diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 36dde0c..9827e81 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -15,6 +15,27 @@ background: #000; border: #000; border-radius: 0; + font-size: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label'] { + width: 100%; + padding: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label']::before { + content: 'ADICIONAR À SACOLA'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; } [class*='html--Prateleira'] { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6dd20f4..667708b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,6 @@ "flex-layout.row#specifications-title", "list-context.product-list#demo1", "product-questions-and-answers" - // "newsletter" ] }, "html#breadcrumb": { @@ -112,13 +111,12 @@ "html#selling-price", "html#product-installments", "html#pix", + "availability-subscriber", "html#sku-selector", "html#quantityAndButton", - "Placeholder", - "product-assembly-options", "product-gifts", - "availability-subscriber", - "html#shipping-simulator" + "html#shipping-simulator", + "Placeholder" ] }, "html#selling-price": { @@ -227,8 +225,8 @@ "children": [ "html#product-name", "html#codigo", - "html#sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "html#sku-selector" ] }, "html#codigo": { @@ -262,7 +260,11 @@ "props": { "blockClass": "description" }, "children": ["product-description"] }, - + "product-description": { + "props": { + "collapseContent": false + } + }, "html#tab-layout#desc": { "props": { "testId": "product-description", @@ -408,6 +410,11 @@ "product-selling-price" ] }, + "product-list-price": { + "props": { + "markers": ["discount"] + } + }, "html#slider-layout": { "props": { "testId": "product-summary-list" diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index c16a50b..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: blueviolet; -} - -.html--pdp-breadcrumb { - background-color: black; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 8fff30f..dd3cefe 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,8 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding-left: 40px; - align-items: center; + padding: 0 40px; + margin: 0 auto; + max-width: 96rem; } .container .homeLink .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 083e71e..f3c7cb1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,6 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRow--message-availability { + display: flex; + order: 0; +} + :global(.vtex-store-components-3-x-container) { padding: 0 40px; } @@ -26,6 +31,27 @@ .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { margin-left: 32px; } +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} +.flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; +} +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; } @@ -40,8 +66,8 @@ } .flexRowContent { - margin-bottom: 0; - padding-bottom: 0; + margin: 0 auto; + padding: 16px 0 0; } @media (max-width: 1024px) { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 85e9db3..82dbcde 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -9,24 +9,55 @@ /* Grid breakpoints */ .sliderLayoutContainer { padding: 0 40px 32px; - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; } .sliderLayoutContainer .sliderLeftArrow { left: 36px; margin: 0; padding: 0; } +@media (max-width: 500px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 24px; + } +} .sliderLayoutContainer .sliderRightArrow { right: 36px; margin: 0; padding: 0; } +@media (max-width: 500px) { + .sliderLayoutContainer .sliderRightArrow { + right: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderRightArrow { + right: 24px; + } +} .sliderLayoutContainer .sliderTrackContainer { margin: 0 auto; width: 94%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack { - gap: 16px; + gap: 2px; +} +@media (min-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 8px; + } +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; + } } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { margin: 0; @@ -42,6 +73,7 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { width: 100%; + min-height: 94px; height: 100%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { @@ -52,7 +84,7 @@ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; + height: 132px; align-items: center; font-family: "Open Sans", sans-serif; font-style: normal; @@ -62,12 +94,27 @@ text-align: center; color: #000; } +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + height: 50px; + } +} +@media (max-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 16px; + } +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { display: flex; justify-content: center; align-items: center; margin: 0; } +@media (max-width: 374px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { + height: 38px; + } +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; @@ -79,6 +126,7 @@ padding: 0; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -88,6 +136,45 @@ color: #bababa; padding: 0; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::before { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::after { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::before { + content: "de"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) { display: flex; padding: 0; @@ -102,6 +189,11 @@ text-align: center; color: #000; } +@media (max-width: 349px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { + font-size: 18px; + } +} .sliderLayoutContainer .paginationDotsContainer { align-items: center; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 396b8c9..74c82ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,72 +8,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - margin-top: 32px; - background: black; -} -.newsletter .container { - padding: 32px 0 16px 0; -} -.newsletter .container .form .label { - font-size: 0; - display: flex; - flex-direction: column; - gap: 16px; -} -.newsletter .container .form .label::before { - content: "Assine nossa newsletter"; - font-size: 24px; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - line-height: 38px; - color: #ffffff; -} -.newsletter .container .form .label::after { - content: "Receba ofertas e novidades por e-mail"; - white-space: pre; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; -} -.newsletter .container .form .inputGroup { - display: flex; - justify-content: center; -} -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { - border: none; - border-bottom: 1px #929292 solid; - border-radius: 0; -} -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - background: black; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - width: 774px; -} -.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { - padding: 0; -} -.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { - background: black; - border: none; - border-bottom: 3px gray solid; - border-radius: 0; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; -} - .productImagesGallerySlide { width: 100%; height: 100%; @@ -166,6 +100,7 @@ margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + gap: 16px; margin-left: 0 !important; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { @@ -404,6 +339,9 @@ color: #202020; text-transform: uppercase; } +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + font-weight: 400 !important; +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { order: 2; font-weight: 400 !important; @@ -450,6 +388,9 @@ display: none; } +.subscriberContainer { + padding-bottom: 56px; +} .subscriberContainer .title { font-size: 0; margin-bottom: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 7a7ef75..90a380d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -8,7 +8,8 @@ /* Media Query M3 */ /* Grid breakpoints */ .listContainer { - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; display: flex; flex-direction: row; justify-content: space-around; @@ -55,18 +56,24 @@ text-transform: capitalize; border-radius: 0; } +@media (min-width: 1920px) { + .listItem :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} @media (max-width: 1024px) { .listItem { margin: 0; - padding: 0; + padding: 8px 0; } .listItem :global(.vtex-button) { margin: 0; - padding: 0; + padding: 0 !important; } .listItem :global(.vtex-button) :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; } } @@ -82,6 +89,12 @@ } @media (min-width: 1025px) { .listItemActive :global(.vtex-button) { - border-bottom: 2px black solid; + border-bottom: 3px black solid; + } +} +@media (min-width: 1920px) { + .listItemActive :global(.vtex-button) { + font-size: 24px; + line-height: 38px; } } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 4e15541..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,7 +1 @@ -.html { - background-color: blueviolet; -} -.html--pdp-breadcrumb { - background-color: black; -} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 526aae0..6bd8a23 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,8 @@ .container { - padding-left: 40px; - align-items: center; + padding: 0 40px; + margin: 0 auto; + max-width: 96rem; + .homeLink { .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a413ca1..7d82dbb 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,13 +1,16 @@ +.flexRow--message-availability { + display: flex; + order: 0; +} + :global(.vtex-store-components-3-x-container) { padding: 0 40px; - :global(.vtex-flex-layout-0-x-flexRowContent) { @media (max-width: 1024px) { display: flex; flex-direction: column; } } - :global(.vtex-store-components-3-x-carouselContainer) { margin-bottom: 32px; } @@ -16,21 +19,35 @@ max-height: none; } } - .flexColChild { :global(.vtex-store-components-3-x-productDescriptionTitle) { margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } } + :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } :global(.vtex-store-components-3-x-container) { padding: 0 32px; } - .agenciamagma-store-theme-5-x-html--Quantity-Button { display: flex; } } - .flexColChild--image-description { :global(.vtex-store-components-3-x-imageElement) { @media (max-width: 1024px) { @@ -38,12 +55,10 @@ } } } - .flexRowContent { - margin-bottom: 0; - padding-bottom: 0; + margin: 0 auto; + padding: 16px 0 0; } - .stretchChildrenWidth { @media (max-width: 1024px) { width: 100% !important; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 8b339ef..90370b1 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,6 +1,5 @@ .quantitySelectorContainer { margin: 0; - .quantitySelectorTitle { display: none; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 170d7fb..2d91b18 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,36 +1,48 @@ .sliderLayoutContainer { padding: 0 40px 32px; - margin-bottom: 32px; - + margin: 0 auto 32px; + max-width: 96rem; .sliderLeftArrow { left: 36px; margin: 0; padding: 0; + @media (max-width: 500px) { + left: 33px; + } + @media (max-width: 374px) { + left: 24px; + } } - .sliderRightArrow { right: 36px; margin: 0; padding: 0; + @media (max-width: 500px) { + right: 33px; + } + @media (max-width: 374px) { + right: 24px; + } } - .sliderTrackContainer { margin: 0 auto; width: 94%; - .sliderTrack { - gap: 16px; - + gap: 2px; + @media (min-width: 300px) { + gap: 8px; + } + @media (min-width: 500px) { + gap: 16px; + } .slide { .slideChildrenContainer { :global(.vtex-product-summary-2-x-container) { margin: 0; - :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; @@ -38,6 +50,7 @@ :global(.vtex-product-summary-2-x-imageContainer) { :global(.vtex-product-summary-2-x-imageNormal) { width: 100%; + min-height: 94px; height: 100%; } } @@ -47,13 +60,11 @@ display: flex; padding: 0; justify-content: center; - :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; + height: 132px; align-items: center; - font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -61,6 +72,12 @@ line-height: 25px; text-align: center; color: #000; + @media (min-width: 500px) { + height: 50px; + } + @media (max-width: 300px) { + font-size: 16px; + } } } :global(.vtex-product-price-1-x-listPrice) { @@ -69,6 +86,10 @@ align-items: center; margin: 0; + @media (max-width: 374px) { + height: 38px; + } + :global(.vtex-product-price-1-x-listPriceValue) { font-family: 'Open Sans', sans-serif; font-style: normal; @@ -80,6 +101,7 @@ padding: 0; } :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -88,19 +110,47 @@ text-align: center; color: #bababa; padding: 0; + &::before { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; + } + &::after { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + } } } - // :global(.vtex-product-price-1-x-listPriceValue)::after { - // content: 'por'; - // font-family: 'Open Sans', sans-serif; - // font-style: normal; - // font-weight: 400; - // font-size: 14px; - // line-height: 19px; - // text-align: center; - // color: #bababa; - // } - + :global(.vtex-product-price-1-x-listPriceValue)::before { + content: 'de'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; + } + :global(.vtex-product-price-1-x-listPriceValue)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; + } :global(.vtex-product-price-1-x-sellingPrice) { display: flex; padding: 0; @@ -113,6 +163,10 @@ line-height: 33px; text-align: center; color: #000; + + @media (max-width: 349px) { + font-size: 18px; + } } } } @@ -123,13 +177,11 @@ } .paginationDotsContainer { align-items: center; - .paginationDot { width: 10px; height: 10px; background-color: #000; } - .paginationDot--isActive { background-color: #fff; width: 17px !important; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c13b678..3bf3522 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,81 +1,9 @@ -.newsletter { - margin-top: 32px; - background: black; - .container { - padding: 32px 0 16px 0; - .form { - .label { - font-size: 0; - display: flex; - flex-direction: column; - gap: 16px; - &::before { - content: 'Assine nossa newsletter'; - font-size: 24px; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - line-height: 38px; - color: #ffffff; - } - &::after { - content: 'Receba ofertas e novidades por e-mail'; - white-space: pre; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - } - } - .inputGroup { - display: flex; - justify-content: center; - :global(.vtex-input) { - :global(.vtex-input-prefix__group) { - border: none; - border-bottom: 1px #929292 solid; - border-radius: 0; - :global(.vtex-styleguide-9-x-input) { - background: black; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - width: 774px; - } - } - } - :global(.vtex-store-components-3-x-buttonContainer) { - padding: 0; - :global(.vtex-button) { - background: black; - border: none; - border-bottom: 3px gray solid; - border-radius: 0; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - } - } - } - } - } -} - .productImagesGallerySlide { width: 100%; height: 100%; - .productImage { width: 100%; height: 100%; - .productImageTag { @media (min-width: 1025px) { width: 100% !important; @@ -85,11 +13,9 @@ } } } - .carouselGaleryThumbs { display: flex !important; margin-top: 16px; - :first-child { display: flex !important; justify-content: flex-start; @@ -119,7 +45,6 @@ } } } - .productBrand { display: flex; justify-content: flex-start; @@ -133,7 +58,6 @@ justify-content: flex-end; } } - .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -156,6 +80,7 @@ .skuSelectorNameContainer { margin: 0; .skuSelectorOptionsList { + gap: 16px; margin-left: 0 !important; .skuSelectorItem { margin: 0; @@ -178,7 +103,6 @@ } } } - .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; .skuSelectorNameContainer { @@ -258,7 +182,6 @@ } } } - .shippingContainer { display: flex; margin: 0; @@ -314,7 +237,6 @@ bottom: 0; } } - :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -391,6 +313,9 @@ line-height: 19px; color: #202020; text-transform: uppercase; + .shippingTableHeadDeliveryName { + font-weight: 400 !important; + } .shippingTableHeadDeliveryEstimate { order: 2; font-weight: 400 !important; @@ -441,8 +366,9 @@ } } } - .subscriberContainer { + padding-bottom: 56px; + .title { font-size: 0; margin-bottom: 0; @@ -472,7 +398,6 @@ line-height: 19px; display: flex; align-items: center; - color: #868686; } .form { @@ -481,15 +406,12 @@ display: flex; height: 40px; gap: 8px; - .input { margin: 0; - :global(.vtex-input) { :global(.vtex-input-prefix__group) { border: 0.6px solid #989898; border-radius: 0; - :global(.vtex-styleguide-9-x-input) { border-radius: 0; } @@ -501,14 +423,12 @@ position: absolute; bottom: calc(-100% - 27px); margin: 0 !important; - :global(.vtex-button) { width: 100%; background: #000; border: 0.6px solid #000; border-radius: 0; color: #fff; - :global(.vtex-button__label) { padding: 12px; font-size: 0; @@ -527,7 +447,6 @@ } } } - .productDescriptionContainer { @media (max-width: 1024px) { position: relative; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 9c689eb..851d7a4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,6 @@ .listContainer { - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; display: flex; flex-direction: row; justify-content: space-around; @@ -44,21 +45,24 @@ line-height: 38px; text-transform: capitalize; border-radius: 0; + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } } .listItem { @media (max-width: 1024px) { margin: 0; - padding: 0; + padding: 8px 0; :global(.vtex-button) { margin: 0; - padding: 0; + padding: 0 !important; :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; } } } } - .listItemActive :global(.vtex-button) { background-color: white; color: black; @@ -68,8 +72,11 @@ font-weight: 400; font-size: 18px; line-height: 38px; - @media (min-width: 1025px) { - border-bottom: 2px black solid; + border-bottom: 3px black solid; + } + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; } }