From 2765d52c25b602d596d3862d90656f5fde40f09f Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 19:03:49 -0300 Subject: [PATCH] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20e=20remo=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20css=20do=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.slider-layout.css | 100 +----------------- .../vtexSliderLayout/vtex.slider-layout.scss | 80 +------------- 2 files changed, 2 insertions(+), 178 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 7a24b8e..ab40a65 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -76,22 +76,7 @@ border-radius: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { - min-height: 448.4px; -} -@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) { - min-height: 543.4px; - } -} -@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: 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: 254.8px; - } + height: auto; } .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) { padding: 0; @@ -153,89 +138,6 @@ min-width: 100%; } } -.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) { - 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) { - 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; - text-align: center; -} -.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 "; -} -.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; - display: flex; - justify-content: center; -} -.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-sellingPriceLabel) { - 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-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { - font-weight: 700; - font-size: 24px; - line-height: 33px; - 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 8ff7932..46e092a 100644 --- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -47,16 +47,7 @@ max-width: 100% !important; border-radius: 0; :global(.vtex-product-summary-2-x-clearLink) { - min-height: 448.4px; - @media (max-width: 2561px) and (min-width: 1920px) { - min-height: 543.4px; - } - @media (max-width: 1025px) and (min-width: 768px) { - min-height: 383.2px; - } - @media (max-width: 768px) and (min-width: 375px) { - min-height: 254.8px; - } + height: auto; :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-nameContainer) { @@ -108,75 +99,6 @@ } } } - :global(.vtex-product-summary-2-x-priceContainer) { - 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; - text-align: center; - :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 "; - } - &::after { - content: " por"; - } - } - } - } - :global(.vtex-store-components-3-x-sellingPrice) { - padding: 0; - display: flex; - justify-content: center; - :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; - } - :global(.vtex-store-components-3-x-sellingPrice) { - font-weight: 700; - font-size: 24px; - 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 - } - } - } - } - } } } }