From 3eb41bad168ee252bc21b24325f6bc10c3656d57 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 2 Feb 2023 22:47:13 -0300 Subject: [PATCH] feat(dados_de_compra):titulo && cart btn estilizados --- store/blocks/pdp/product.jsonc | 36 ++++++++++++------- styles/css/vtex.flex-layout.css | 10 ++++-- styles/css/vtex.product-identifier.css | 16 +++++++-- styles/css/vtex.product-quantity.css | 29 +++++++++++++-- styles/css/vtex.store-components.css | 5 ++- .../sass/pages/product/vtex.flex-layout.scss | 9 +++-- .../product/vtex.product-identifier.scss | 8 +++++ .../pages/product/vtex.product-quantity.scss | 32 +++++++++++++++-- .../pages/product/vtex.store-components.scss | 7 ++-- 9 files changed, 122 insertions(+), 30 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a2980e8..048ecac 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -80,8 +80,8 @@ }, "product-images": { "props": { - "testid": "product-images", - "aspectRatio": { + "testid": "product-images", + "aspectRatio": { "desktop": "auto", "phone": "auto" }, @@ -98,7 +98,6 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", @@ -118,19 +117,24 @@ } }, - "product-identifier.product": { - "props": { - "label": "hide" //'default' | 'custom' | 'hide' - } - }, "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "title" }, - "children": ["vtex.store-components:product-name"] + "children": [ + "product-identifier.product", + "vtex.store-components:product-name" + ] }, + "product-identifier.product": { + "props": { + "label": "hide", //'default' | 'custom' | 'hide' + "blockClass": "sku" + } + }, "sku-selector": { "props": { "variationsSpacing": 3, @@ -142,11 +146,17 @@ "props": { "marginTop": 4, "marginBottom": 7, - "blockClass":"buy-button" + "blockClass": "buy-button" }, - "children": ["product-quantity","add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] + }, + "product-quantity": { + "props": { + "width": "20%", + "showLabel": false, + "size": "regular" + } }, - "add-to-cart-button": { "props": { "text": "ADICIONAR À SACOLA" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ad47e58..da42b84 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -21,13 +21,12 @@ } .flexRowContent--buy-button .stretchChildrenWidth { padding: 0; - width: max-content !important; + justify-content: flex-start; } .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) { background: black; height: 49px; - width: 100%; - min-width: 534px; + max-width: 526px; } @media screen and (min-width: 40em) { @@ -136,4 +135,9 @@ } :global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings { justify-content: center; +} + +.flexRowContent--title { + align-items: end; + flex-direction: column-reverse; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..af7ca9b 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,15 @@ +/* +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 */ .product-identifier--productReference { - margin-bottom: 1rem; -} + display: block; + text-align: end; + margin-top: 8px; + padding-right: 8px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 1317f4f..6ef4e94 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,31 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.quantitySelectorTitle { - display: none; +.quantitySelectorStepper { + border: 1px solid #CCCCCC; + width: max-content; + min-width: 83.86%; + padding: 3.5px 0; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + border: none; + max-width: 28px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) { + border: none; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) { + color: #000; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) { + color: #000; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { + border: none; + background: #fff; +} + +.quantitySelectorContainer { + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0640339..8b90328 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.productNameContainer--quickview { + padding-right: 40px !important; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -77,7 +81,6 @@ font-weight: 300; font-size: 20px; line-height: 34px; - padding-right: 20px; color: #575757; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 6306930..9106a60 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -9,12 +9,11 @@ gap: 10px; .stretchChildrenWidth{ padding: 0; - width: max-content !important; + justify-content: flex-start; :global(.vtex-button){ background: black; height: 49px; - width: 100%; - min-width: 534px; + max-width: 526px; } } } @@ -130,5 +129,9 @@ justify-content: center; } } +.flexRowContent--title{ + align-items: end; + flex-direction: column-reverse; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..5d3ae98 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,8 @@ +.product-identifier{ + &--productReference{ + display: block; + text-align: end; + margin-top: 8px; + padding-right: 8px; + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 54d6f33..6dbb2a0 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,31 @@ -.quantitySelectorTitle{ - display: none; +.quantitySelectorStepper{ + border: 1px solid #CCCCCC; + width: max-content; + min-width: 83.86%; + padding: 3.5px 0; + :global(.vtex-numeric-stepper-wrapper){ + :global(.vtex-numeric-stepper-container){ + :global(.vtex-numeric-stepper__input){ + border: none; + max-width: 28px; + } + :global(.vtex-numeric-stepper__plus-button){ + border: none; + } + :global(.vtex-numeric-stepper__plus-button__text){ + color: #000; + } + :global(.vtex-numeric-stepper__minus-button__text){ + color: #000; + } + :global(.vtex-numeric-stepper__minus-button){ + border: none; + background: #fff; + } + } + } +} +.quantitySelectorContainer{ + justify-content: center; + align-items: center; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index d7e343b..07ec51f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,6 @@ - .container{ - - } +.productNameContainer--quickview{ + padding-right: 40px !important; +} .skuSelectorContainer{ display: flex; flex-direction: column-reverse; @@ -84,7 +84,6 @@ font-weight: 300; font-size: 20px; line-height: 34px; - padding-right: 20px; color: #575757; } .carouselContainer{