diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index b869bde..7a24b8e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -9,25 +9,26 @@ /* Grid breakpoints */ .sliderLayoutContainer--carousel { background: unset; - min-height: 448.4px; width: 94.435%; - margin: 0 auto 64px; + margin: 0 auto 113px; } @media (max-width: 2561px) and (min-width: 1920px) { .sliderLayoutContainer--carousel { width: 71.858%; + min-height: 543.4px; } } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel { width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel { width: 78.616%; margin: 0 auto 32px; - min-height: 273.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer { @@ -84,12 +85,12 @@ } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 402.2px; + min-height: 383.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 273.8px; + min-height: 254.8px; } } .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) { @@ -108,7 +109,22 @@ color: #000000; display: inline-block; vertical-align: text-top; - min-height: 50px; + padding: 0 16px; + min-height: 19px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .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-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .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-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } } .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-imageContainer) { width: 100%; @@ -143,18 +159,50 @@ .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) { row-gap: 8px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .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) { + height: 60px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .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) { + height: 49px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .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) { + height: 49px; + } +} .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) { padding: 0; - font-weight: 400; - font-size: 14px; - line-height: 19px; text-align: center; - text-decoration-line: line-through; - 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) { 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) { + padding: 0; +} +.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) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; +} +@media (max-width: 1025px) and (min-width: 768px) { + .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) { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .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) { + font-size: 12px; + line-height: 16px; + } +} .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 "; } @@ -176,6 +224,18 @@ text-align: center; color: #000000; } +@media (max-width: 1025px) and (min-width: 768px) { + .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) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .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) :global(.vtex-store-components-3-x-sellingPrice) { + font-size: 18px; + line-height: 25px; + } +} .sliderLayoutContainer--carousel .sliderArrows { padding: 0; margin: 0; diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss index 5894c7d..8ff7932 100644 --- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -2,19 +2,20 @@ .sliderLayoutContainer--carousel { background: unset; - min-height: 448.4px; width: 94.435%; - margin: 0 auto 64px; + margin: 0 auto 113px; @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; + min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { width: 92.166%; + margin: 0 auto 105px; + min-height: 383.2px; } @media (max-width: 768px) and (min-width: 375px) { width: 78.616%; margin: 0 auto 32px; - min-height: 273.8px; } .sliderTrackContainer { width: 96%; @@ -51,10 +52,10 @@ min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { - min-height: 402.2px; + min-height: 383.2px; } @media (max-width: 768px) and (min-width: 375px) { - min-height: 273.8px; + min-height: 254.8px; } :global(.vtex-product-summary-2-x-element) { padding: 0; @@ -71,7 +72,18 @@ color: $black; display: inline-block; vertical-align: text-top; - min-height: 50px; + padding: 0 16px; + min-height: 19px; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + padding: 0 8px; + } + @media (max-width: 768px) and (min-width: 375px) { + padding: 0 8px; + font-size: 14px; + line-height: 19px; + } } } } @@ -100,19 +112,37 @@ padding: 0; :global(.vtex-store-components-3-x-priceContainer) { row-gap: 8px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 60px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 49px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 49px; + } :global(.vtex-store-components-3-x-listPrice) { padding: 0; - font-weight: 400; - font-size: 14px; - line-height: 19px; text-align: center; - text-decoration-line: line-through; - color: $BABABA; :global(.vtex-store-components-3-x-listPriceLabel) { display: none; } :global(.vtex-store-components-3-x-listPriceValue) { + padding: 0; :global(.vtex-product-summary-2-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: $BABABA; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } &::before { content: "de "; } @@ -135,6 +165,14 @@ line-height: 33px; text-align: center; color: $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 18px; + line-height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 18px; + line-height: 25px + } } } }