diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b2c8fa7..02895f2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -60,7 +60,6 @@ "rowGap": 7, "marginTop": 5, "marginBottom": 7, - "paddingBottom": 7, "blockClass": "productMain" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -149,10 +148,16 @@ "children": [ "vtex.store-components:product-name", - "product-identifier.product" + "product-identifier.product#pdp-identifier" ] }, + "product-identifier.product#pdp-identifier": { + "props": { + "label": "hide" + } + }, + "html#sku-selector": { "props": { "testId": "sku-selector" @@ -169,6 +174,14 @@ }, "flex-layout.row#pdp-buy-actions": { + "props": { + "marginTop": 5, + "marginBottom": 5, + "colSizing": "auto", + "colGap": 5, + "rowGap": 5, + "blockClass": "productActions" + }, "children": ["html#pdp-product-quantity", "html#add-to-cart-button"] }, @@ -211,9 +224,10 @@ "flex-layout.row#product-availability": { "props": { "colGap": 7, - "marginTop": 4, + "rowGap": 7, + "marginTop": 5, "marginBottom": 7, - "paddingTop": 7 + "blockClass": "productAvailability" }, "children": [ "flex-layout.col#stack", @@ -227,16 +241,18 @@ "blockClass": "info-availability" }, "children": [ - "vtex.store-components:product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#product-name", + "flex-layout.row#availability", + "sku-selector" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" }, "children": ["availability-subscriber"] - } + }, + + "availability-subscriber": {} } diff --git a/styles/configs/style.json b/styles/configs/style.json index 63b6e82..b39aafe 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -200,7 +200,7 @@ "muted-5": "#f2f4f5" }, "on": { - "base": "#3f3f40", + "base": "#B9B9B999", "base--inverted": "#ffffff", "action-primary": "#ffffff", "action-secondary": "#000000", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 064c332..68cfaf9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -104,15 +104,18 @@ padding-bottom: 1rem; } +.flexRow--productAvailability, .flexRow--productMain { padding: 0 40px; } -.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__label), -.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__separator) { - font-size: 0; - width: 0; - height: 0; +@media screen and (max-width: 1024px) { + .flexRowContent--productMain { + flex-direction: column !important; + } + .flexRowContent--productMain .stretchChildrenWidth { + width: 100% !important; + } } @media screen and (min-width: 1025px) { @@ -121,24 +124,42 @@ } } -.flexRowContent--productAddToCart :global(.vtex-button) { +.flexRowContent--productActions .stretchChildrenWidth { + width: auto !important; +} +@media screen and (min-width: 768px) { + .flexRowContent--productActions .stretchChildrenWidth:last-child { + flex-grow: 1; + } +} + +.flexRowContent--productActions { + flex-direction: column; +} +@media screen and (min-width: 768px) { + .flexRowContent--productActions { + max-height: 49px; + flex-direction: row; + } +} +.flexRowContent--productActions :global(.vtex-button) { height: 72px; line-height: 24.51px; } -@media screen and (min-width: 1025px) { - .flexRowContent--productAddToCart :global(.vtex-button) { +@media screen and (min-width: 768px) { + .flexRowContent--productActions :global(.vtex-button) { height: 49px; } } -.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) { +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-button__label) { justify-content: stretch; padding: 12px 64px; } -.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { flex-grow: 1; width: 100%; } -.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { +.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { width: 99%; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index b8c8b00..47487ee 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -11,11 +11,22 @@ width: 128px; min-height: 49px; } +.quantitySelectorStepper :global(.vtex-numeric-stepper-container) { + height: 49px; + border: 1px solid #cccccc; +} .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { width: 100%; - height: 100%; } -.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button-container), -.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button-container) { +.quantitySelectorStepper :global(.vtex-numeric-stepper__input), +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button), +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { height: 100%; + border: none; + background-color: transparent; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button__text), +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 21.79px; } \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index 24736ea..34c4328 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.relatedProducts { - padding: 0 40px; -} - -.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) { - gap: 12px; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6c65dc9..5f4b698 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -120,6 +121,17 @@ z-index: 2; } +.skuSelectorItem--selected .skuSelectorItemTextValue { + color: #292929; +} +.skuSelectorItem--selected .diagonalCross { + width: 100%; + background: transparent; +} +.skuSelectorItem--selected .diagonalCross::before { + border-top: 1px solid #292929; +} + .skuSelectorItemTextValue { width: 100%; padding: 0; @@ -128,7 +140,156 @@ align-items: center; } +.skuSelectorSubcontainer--cor { + margin: 0; +} .skuSelectorSubcontainer--cor .skuSelectorItem { width: 48px; height: 48px; +} + +.shippingContainer { + position: relative; +} +@media screen and (min-width: 769px) { + .shippingContainer { + width: 280px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + position: relative; + width: 100%; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: right; +} +@media screen and (min-width: 769px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: unset; + position: absolute; + right: -50.7%; + top: 70%; + margin-left: 16px; + padding: 0; + transform: translateY(-50%); + } +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::before { + content: "Calcular frete:"; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + color: inherit; +} +.shippingContainer :global(.vtex-button) { + background-color: #292929; + position: absolute; + top: 27px; + right: 0; + color: #fff; + height: 49px; + width: 49px; + margin: 0; + border: 0; + border-radius: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-size: 14px; +} + +.shippingTable { + border: 0; + margin: 0; + padding: 16px 0 0; +} + +.shippingTableHead { + display: table-header-group !important; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + width: auto; + text-align: left; + color: #292929; + font-weight: 400; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCell { + padding: 15px 0; +} + +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-size: 14px; + font-weight: 700; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + font-weight: 400; + color: #868686; +} +.subscriberContainer .form .content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 40px 48px; + gap: 16px 8px; +} +.subscriberContainer .form .input { + margin: 0; + width: 100%; + height: 100%; +} +.subscriberContainer .form .input :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer .submit { + grid-column: 1/2 span; + margin: 0; +} +.subscriberContainer .submit :global(.vtex-button) { + width: 100%; + height: 100%; + background-color: #000; + color: #fff; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "Avise-se"; + font-size: 14px; + text-transform: uppercase; } \ 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 index 8bf7a3b..fa11cd1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -97,16 +97,18 @@ padding-bottom: 1rem; } +.flexRow--productAvailability, .flexRow--productMain { padding: 0 40px; } -.flexColChild--productInformations { - :global(.vtex-product-identifier-0-x-product-identifier__label), - :global(.vtex-product-identifier-0-x-product-identifier__separator) { - font-size: 0; - width: 0; - height: 0; +.flexRowContent--productMain { + @media screen and (max-width: 1024px) { + flex-direction: column !important; + + .stretchChildrenWidth { + width: 100% !important; + } } } @@ -116,12 +118,31 @@ } } -.flexRowContent--productAddToCart { +.flexRowContent--productActions { + .stretchChildrenWidth { + width: auto !important; + + &:last-child { + @media screen and (min-width: 768px) { + flex-grow: 1; + } + } + } +} + +.flexRowContent--productActions { + flex-direction: column; + + @media screen and (min-width: 768px) { + max-height: 49px; + flex-direction: row; + } + :global(.vtex-button) { height: 72px; line-height: 24.51px; - @media screen and (min-width: 1025px) { + @media screen and (min-width: 768px) { height: 49px; } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 6626ee4..b1a02d4 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -4,13 +4,25 @@ min-height: 49px; } - :global(.vtex-numeric-stepper__input) { - width: 100%; - height: 100%; + :global(.vtex-numeric-stepper-container) { + height: 49px; + border: 1px solid #cccccc; } - :global(.vtex-numeric-stepper__plus-button-container), - :global(.vtex-numeric-stepper__minus-button-container) { + :global(.vtex-numeric-stepper__input) { + width: 100%; + } + + :global(.vtex-numeric-stepper__input), + :global(.vtex-numeric-stepper__plus-button), + :global(.vtex-numeric-stepper__minus-button) { height: 100%; + border: none; + background-color: transparent; + } + :global(.vtex-numeric-stepper__minus-button__text), + :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 21.79px; } } diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss index d5a39b4..e69de29 100644 --- a/styles/sass/pages/product/vtex.shelf.scss +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -1,9 +0,0 @@ -.relatedProducts { - padding: 0 40px; -} - -.shelfContentContainer { - :global(.vtex-slider-0-x-sliderFrame) { - gap: 12px; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 24c6354..6a09377 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -125,6 +125,21 @@ } } +.skuSelectorItem--selected { + .skuSelectorItemTextValue { + color: $color-black; + } + + .diagonalCross { + width: 100%; + background: transparent; + + &::before { + border-top: 1px solid $color-black; + } + } +} + .skuSelectorItemTextValue { width: 100%; padding: 0; @@ -135,10 +150,182 @@ } .skuSelectorSubcontainer--cor { + margin: 0; + .skuSelectorItem { width: 48px; height: 48px; } } +.shippingContainer { + position: relative; + @media screen and (min-width: 769px) { + width: 280px; + } + + :global(.vtex-address-form__postalCode) { + position: relative; + width: 100%; + padding: 0; + + :global(.vtex-input-prefix__group) { + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-input__suffix) { + display: none; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + text-align: right; + + @media screen and (min-width: 769px) { + text-align: unset; + + position: absolute; + right: -50.7%; + top: 70%; + margin-left: 16px; + padding: 0; + transform: translateY(-50%); + } + } + + :global(.vtex-input__label) { + font-size: 0; + + &::before { + content: "Calcular frete:"; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + color: inherit; + } + } + + :global(.vtex-button) { + background-color: $color-black; + position: absolute; + top: 27px; + right: 0; + color: $color-white; + height: 49px; + width: 49px; + margin: 0; + border: 0; + border-radius: 0; + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "OK"; + font-size: 14px; + } + } + } +} + +.shippingTable { + border: 0; + margin: 0; + padding: 16px 0 0; +} + +.shippingTableHead { + display: table-header-group !important; + + .shippingTableRow { + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + width: auto; + text-align: left; + color: $color-black; + + font-weight: 400; + font-size: 14px; + line-height: 19.07px; + text-transform: uppercase; + } + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCell { + padding: 15px 0; +} + +.subscriberContainer { + .title { + font-size: 0; + + &::before { + content: "Produto indisponível"; + font-size: 14px; + font-weight: 700; + color: #868686; + } + } + + .subscribeLabel { + font-size: 0; + + &::before { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + font-weight: 400; + color: #868686; + } + } + + .form { + .content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 40px 48px; + gap: 16px 8px; + } + + .input { + margin: 0; + width: 100%; + height: 100%; + + :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + } + } + } + + .submit { + grid-column: 1 / 2 span; + margin: 0; + + :global(.vtex-button) { + width: 100%; + height: 100%; + background-color: #000; + color: #fff; + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "Avise-se"; + font-size: 14px; + text-transform: uppercase; + } + } + } + } +}