From a0a28e660a298cdd5605d4946050fe6ad0d37cee Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 30 Jan 2023 18:33:19 -0300 Subject: [PATCH] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilos=20e?= =?UTF-8?q?=20adicionando=20estilos=20para=20telas=20de=202561px=20at?= =?UTF-8?q?=C3=A9=201920px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.breadcrumb.css | 6 ++++ styles/css/vtex.product-identifier.css | 2 -- styles/css/vtex.product-price.css | 1 + styles/css/vtex.slider-layout.css | 20 +++++++++++++ styles/css/vtex.store-components.css | 28 +++++++++++++++++++ .../product/breadcrumb/vtex.breadcrumb.scss | 4 +++ .../vtex.store-components.scss | 26 ++++++++++++----- .../product/vtex.product-identifier.scss | 2 -- .../pages/product/vtex.product-price.scss | 1 + .../pages/product/vtex.slider-layout.scss | 12 ++++++++ 10 files changed, 91 insertions(+), 11 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index fe15ef5..3bb78f0 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -14,6 +14,12 @@ margin-left: 40px; padding: 0 0 16px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container { + margin: 0 auto; + width: 71.858%; + } +} .container .homeLink { padding: 0; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 092a09b..8ca0eeb 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -24,13 +24,11 @@ .product-identifier__value { text-align: left; float: left; - margin-bottom: 24px; } } @media (max-width: 768px) and (min-width: 375px) { .product-identifier__value { text-align: left; float: left; - margin-bottom: 24px; } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index e3b1eb7..c22a76c 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -12,4 +12,5 @@ font-size: 25px; line-height: 38px; color: #000000; + margin-top: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 905ae09..b869bde 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -34,6 +34,11 @@ width: 96%; margin: 0 auto; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer { + width: 97.012%; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer { width: 95.085%; @@ -47,6 +52,11 @@ .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 5.3515% !important; } +@media (max-width: 2561px) and (min-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { + width: 5.4036% !important; + } +} @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 6.0831% !important; @@ -67,6 +77,11 @@ .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: 402.2px; @@ -99,6 +114,11 @@ width: 100%; height: 314.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) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + height: 434.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) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { height: 291.2px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 615482a..4724426 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -187,11 +187,21 @@ grid-template-areas: "A B" "C C"; max-width: unset !important; } +@media (max-width: 2561px) and (min-width: 1920px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 44.138%; + } +} @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { width: 81.02%; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 100%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { grid-area: A; margin: 0 8px 15px 0; @@ -202,6 +212,11 @@ width: 23.657em; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + width: 94.26%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -209,6 +224,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + height: 40px; } :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -220,12 +236,18 @@ grid-area: B; margin: 0 0 15px; width: 12.22em; + height: 40px; } @media (max-width: 1025px) and (min-width: 768px) { :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { width: 23.657em; } } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + width: 99.47%; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -247,6 +269,12 @@ :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { width: 100%; } +@media (max-width: 768px) and (min-width: 375px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + margin: 0; + height: 49px; + } +} :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; } diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index 85b0762..f537138 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -4,6 +4,10 @@ flex-wrap: wrap; margin-left: 40px; padding: 0 0 16px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin: 0 auto; + width: 71.858%; + } .homeLink { padding: 0; } diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index f815c20..97ada7a 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -164,12 +164,15 @@ "A B" "C C"; max-width: unset !important; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 44.138%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 81.02%; } - // @media (max-width: 768px) and (min-width: 375px) { - - // } + @media (max-width: 768px) and (min-width: 375px) { + width: 100%; + } :global(.vtex-store-components-3-x-inputName) { grid-area: A; margin: 0 8px 15px 0; @@ -177,6 +180,9 @@ @media (max-width: 1025px) and (min-width: 768px) { width: 23.657em; } + @media (max-width: 768px) and (min-width: 375px) { + width: 94.26%; + } :global(.vtex-input) { :global(.vtex-input-prefix__group) { :global(.vtex-styleguide-9-x-input) { @@ -186,6 +192,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + height: 40px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -200,9 +207,13 @@ grid-area: B; margin: 0 0 15px; width: 12.22em; + height: 40px; @media (max-width: 1025px) and (min-width: 768px) { width: 23.657em; } + @media (max-width: 768px) and (min-width: 375px) { + width: 99.47%; + } :global(.vtex-input) { :global(.vtex-input-prefix__group) { :global(.vtex-styleguide-9-x-input) { @@ -224,12 +235,13 @@ } :global(.vtex-store-components-3-x-submit) { grid-area: C; - margin: 0; - // @media (max-width: 1025px) and (min-width: 768px) { - // width: 150.13%; - // } + margin: 0; :global(.vtex-button) { width: 100%; + @media (max-width: 768px) and (min-width: 375px) { + margin: 0; + height: 49px; + } :global(.vtex-button__label) { font-size: 0; } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2c6485f..706c081 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,11 +15,9 @@ @media (max-width: 1025px) and (min-width: 768px) { text-align: left; float: left; - margin-bottom: 24px; } @media (max-width: 768px) and (min-width: 375px) { text-align: left; float: left; - margin-bottom: 24px; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 57181bb..1b611af 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -5,4 +5,5 @@ font-size: 25px; line-height: 38px; color: #000000; + margin-top: 24px; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index a8c9aa3..e3530c6 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -19,6 +19,9 @@ .sliderTrackContainer { width: 96%; margin: 0 auto; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 97.012%; + } @media (max-width: 1025px) and (min-width: 768px) { width: 95.085%; } @@ -28,6 +31,9 @@ .sliderTrack { .slide--carousel { width: 5.3515% !important; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 5.4036%!important; + } @media (max-width: 1025px) and (min-width: 768px) { width: 6.0831% !important; } @@ -41,6 +47,9 @@ 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: 402.2px; } @@ -69,6 +78,9 @@ :global(.vtex-product-summary-2-x-imageContainer) { width: 100%; height: 314.4px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 434.4px; + } @media (max-width: 1025px) and (min-width: 768px) { height: 291.2px; }