From c9882ca40108d80647dbb99ad76b00c8d1fa0b1e Mon Sep 17 00:00:00 2001 From: Izabela Balizardo Date: Wed, 1 Feb 2023 23:03:50 -0300 Subject: [PATCH] feat: Adiciona estilo botao quantidade e cep --- react/components/Html/styles.css | 40 +++++++ store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.product-identifier.css | 17 ++- styles/css/vtex.product-quantity.css | 33 ++++++ styles/css/vtex.store-components.css | 82 ++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../product/vtex.product-identifier.scss | 21 ++++ .../pages/product/vtex.product-quantity.scss | 28 +++++ .../pages/product/vtex.store-components.scss | 103 +++++++++++++++++- 9 files changed, 331 insertions(+), 3 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 47285e6..1d92b5e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -94,3 +94,43 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 [class*="quantitySelectorTitle"] { display: none; } */ + +[class*="flexRowContent--btn-product"] button { + background-color: black; + border-color: black; + max-width: 526px; + width: 100%; + height: 49px; + display: flex; + border-radius: 0px; + left: 158px; + bottom: 73px; +} + +[class*="flexRowContent--btn-product"] button span { + font-size: 0px; +} + +[class*="flexRowContent--btn-product"] button span::after { + content: "ADICIONAR À SACOLA"; + font-size: 14px; + font-family: "Open Sans", sans-serif; +} + +[class*="flexRowContent--btn-product"] button:hover { + background-color: #000000; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] a { + color: black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] span { + display: none; +} + + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c9d040e..f499601 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -107,7 +107,6 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 34c4328..228a2c3 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,4 +6,19 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.product-identifier--productReference { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + display: block; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier__label, +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..5476938 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,33 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4145dd4..ebc1bd6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,6 +12,16 @@ } .productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #000000; +} + +.productNameContainer--quickview { font-family: "Open Sans"; font-style: normal; font-weight: 300; @@ -19,4 +29,76 @@ line-height: 34px; text-align: right; color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%); +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: black; + width: 70px; + height: 45px; + color: white; + margin-top: 23px; + margin-left: -4px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: black; + position: absolute; + right: 32px; + top: 25px; +} + +.shareContainer { + display: none; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableRow { + text-align: left; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..c71f073 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,9 @@ +// button.flexRow--btn-product { +// background-color: black; +// border-color: black; +// max-width: 526px; +// width: 100%; +// height: 49px; +// display: flex; +// border-radius: 0px; +// } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 8b13789..5a6d0bb 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1 +1,22 @@ +.product-identifier--productReference { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + display: block; + color: rgba(146, 146, 146, 0.48); + +} + +.product-identifier__label, +.product-identifier__separator { + display: none; +} + + + + + diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..f423a93 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,28 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper { + :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; + } + + :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } + + :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 34d51e4..b8ffe0e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,8 +2,17 @@ background: red; } - .productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #000000; +} + +.productNameContainer--quickview { font-family: "Open Sans"; font-style: normal; font-weight: 300; @@ -13,4 +22,96 @@ color: #575757; } +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .diagonalCross { + background-image: linear-gradient( + to top left, + transparent 44%, + rgba(0, 0, 0, 0.3) 48%, + currentColor 48%, + currentColor 52%, + transparent 52% + ); + } +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; + :global(.vtex-button) { + background-color: black; + width: 70px; + height: 45px; + color: white; + margin-top: 23px; + margin-left: -4px; + } + + :global(.vtex-input__label) { + font-size: 0px; + } + + :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; + } + + :global(.vtex-button__label) { + font-size: 0px; + } + + :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; + } + + :global(.vtex-address-form__postalCode) { + width: 280px; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + color: black; + position: absolute; + right: 32px; + top: 25px; + } +} + +.shareContainer { + display: none; +} + +.shippingTable { + .shippingTableRadioBtn { + display: none; + + + } + + .shippingTableHead { + display: contents; + } + + .shippingTableRow { + text-align: left; + } +}