diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 16e69ed..78ac045 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -14,48 +14,10 @@ column-gap: 32px; } -.stretchChildrenWidth { - padding: 0; -} -@media (max-width: 1920px) and (min-width: 1024px) { - .stretchChildrenWidth { - width: 100% !important; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .stretchChildrenWidth { - width: 100% !important; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .stretchChildrenWidth { - width: 100% !important; - } -} - .flexCol--stack-layout-content { width: 100% !important; } -@media (max-width: 1920px) and (min-width: 1024px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 48.819% 48.819%; - } -} -@media (max-width: 1025px) and (min-width: 768px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 100%; - } -} -@media (max-width: 768px) and (min-width: 375px) { - .flexRowContent--product-main-content { - display: grid; - grid-template-columns: 100%; - } -} - .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { background: #000000; padding: 12px 64px; @@ -69,14 +31,14 @@ margin-top: 10px; } } -.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; +} +.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; line-height: 25px; -} -.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - display: none; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 2e414bd..905ae09 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -13,6 +13,11 @@ width: 94.435%; margin: 0 auto 64px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel { + width: 71.858%; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel { width: 92.166%; @@ -128,7 +133,13 @@ color: #bababa; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { - text-transform: lowercase; + display: none; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before { + content: "de "; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after { + content: " por"; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { padding: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2e4fd9f..e41b6b7 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,6 +11,11 @@ padding: 0 40px; margin-top: 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block { + padding: 0; + } +} @media (max-width: 768px) and (min-width: 375px) { .container--description-block { margin-top: 40px; @@ -22,6 +27,12 @@ margin-bottom: 32px; padding-top: 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer { + width: 71.858%; + margin: 0 auto 32px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer { flex-direction: column; @@ -128,6 +139,12 @@ justify-content: left; } } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .contentContainer { + width: 71.858%; + margin: 0 auto; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .contentContainer { border-bottom: 1px solid #b9b9b9; diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index fcc373c..a119b8a 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -6,39 +6,10 @@ column-gap: 32px; } -.stretchChildrenWidth { - padding: 0; - @media (max-width: 1920px) and (min-width: 1024px) { - width: 100% !important; - } - @media (max-width: 1025px) and (min-width: 768px) { - width: 100% !important; - } - @media (max-width: 768px) and (min-width: 375px) { - width: 100% !important; - } -} - .flexCol--stack-layout-content { width: 100% !important; } -.flexRowContent--product-main-content { - @media (max-width: 1920px) and (min-width: 1024px) { - display: grid; - grid-template-columns: 48.819% 48.819%; - } - @media (max-width: 1025px) and (min-width: 768px) { - display: grid; - grid-template-columns: 100%; - } - @media (max-width: 768px) and (min-width: 375px) { - // padding: 0 40px; - display: grid; - grid-template-columns: 100%; - } -} - //Botao add Cart .flexRow { @@ -54,17 +25,17 @@ height: 74px; margin-top: 10px; } - :global(.vtex-button__label)::before { - content: "ADICIONAR À SACOLA"; - font-family: "Open Sans", sans-serif; - color: #ffffff; - font-weight: 400; - font-size: 18px; - line-height: 25px; - } :global(.vtex-button__label) { :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - display: none; + font-size: 0; + } + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; + color: #ffffff; + font-weight: 400; + font-size: 18px; + line-height: 25px; } } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 66db33f..a8c9aa3 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -5,6 +5,9 @@ min-height: 448.4px; width: 94.435%; margin: 0 auto 64px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 92.166%; } @@ -94,7 +97,17 @@ text-decoration-line: line-through; color: #bababa; :global(.vtex-store-components-3-x-listPriceLabel) { - text-transform: lowercase; + display: none; + } + :global(.vtex-store-components-3-x-listPriceValue) { + :global(.vtex-product-summary-2-x-currencyContainer) { + &::before { + content: "de "; + } + &::after { + content: " por"; + } + } } } :global(.vtex-store-components-3-x-sellingPrice) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 369bfb2..da359cb 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -3,6 +3,9 @@ .container--description-block { padding: 0 40px; margin-top: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + padding: 0; + } @media (max-width: 768px) and (min-width: 375px) { margin-top: 40px; } @@ -11,6 +14,10 @@ border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; padding-top: 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto 32px; + } @media (max-width: 1025px) and (min-width: 768px) { flex-direction: column; border-top: 1px solid #b9b9b9; @@ -95,6 +102,10 @@ } } .contentContainer { + @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; + margin: 0 auto; + } @media (max-width: 1025px) and (min-width: 768px) { border-bottom: 1px solid #b9b9b9; padding-bottom: 16px;