From 9953a9c5751498425cde636f72fdb58414ba8054 Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 7 Feb 2023 14:53:55 -0300 Subject: [PATCH 1/4] =?UTF-8?q?style:=20corrigindo=20estilo=20dos=20inputs?= =?UTF-8?q?=20da=20=C3=A1rea=20de=20produto=20indispon=C3=ADvel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 16 +++++++++++++--- .../product/vtexStore/vtex.store-components.scss | 13 +++++++++---- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9fb3b77..c4b3db8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -161,7 +161,7 @@ @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) { column-gap: 8px; - grid-template-columns: 48.57% 48.57%; + grid-template-columns: 48.563% 48.563%; width: 100%; } } @@ -181,6 +181,10 @@ margin-right: 0; } } +: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) { + border: 0 !important; + border-radius: unset !important; +} :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; @@ -189,7 +193,8 @@ border: 1px solid #989898; border-radius: unset; height: 40px; - padding: 0 14px; + padding: 12px 14px; + 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) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -214,6 +219,10 @@ margin-right: 0; } } +: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) { + border: 0 !important; + border-radius: unset !important; +} :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; @@ -221,7 +230,8 @@ color: #989898; border: 1px solid #989898; border-radius: unset; - padding: 0 14px; + padding: 12px 14px; + 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-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index aab0940..e1e132d 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -159,7 +159,7 @@ } @media (max-width: 768px) and (min-width: 375px) { column-gap: 8px; - grid-template-columns: 48.57% 48.57%; + grid-template-columns: 48.563% 48.563%; width: 100%; } :global(.vtex-store-components-3-x-inputName) { @@ -175,6 +175,8 @@ } :global(.vtex-input) { :global(.vtex-input-prefix__group) { + border: 0 !important; + border-radius: unset !important; :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -183,7 +185,8 @@ border: 1px solid #989898; border-radius: unset; height: 40px; - padding: 0 14px; + padding: 12px 14px; + width: 100%; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -208,6 +211,8 @@ } :global(.vtex-input) { :global(.vtex-input-prefix__group) { + border: 0 !important; + border-radius: unset !important; :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; @@ -215,7 +220,8 @@ color: #989898; border: 1px solid #989898; border-radius: unset; - padding: 0 14px; + padding: 12px 14px; + width: 100%; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -588,7 +594,6 @@ } } - //Tab Layout .productImagesContainer--image-description { From 9be8d02492c8688f42f18fe41d94813f39b2deef Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 8 Feb 2023 06:49:37 -0300 Subject: [PATCH 2/4] =?UTF-8?q?style:=20corrigindo=20margin-bottom=20do=20?= =?UTF-8?q?.productNameContainer=20da=20=C3=A1rea=20de=20Dados=20do=20prod?= =?UTF-8?q?uto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 3 +-- styles/sass/pages/product/vtexStore/vtex.store-components.scss | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c4b3db8..61440b0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -87,19 +87,18 @@ .productNameContainer { text-align: right; + margin-bottom: 8px; } @media (max-width: 1025px) and (min-width: 768px) { .productNameContainer { text-align: left; margin-top: 32px; - margin-bottom: 8px; } } @media (max-width: 768px) and (min-width: 375px) { .productNameContainer { text-align: left; margin-top: 32px; - margin-bottom: 8px; } } .productNameContainer .productBrand { diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index e1e132d..469cb61 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -95,15 +95,14 @@ .productNameContainer { text-align: right; + margin-bottom: 8px; @media (max-width: 1025px) and (min-width: 768px) { text-align: left; margin-top: 32px; - margin-bottom: 8px; } @media (max-width: 768px) and (min-width: 375px) { text-align: left; margin-top: 32px; - margin-bottom: 8px; } .productBrand { font-weight: 300; From 35b4c346f3c8a9a0b09e5df5e69c60e598c25eab Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 8 Feb 2023 07:54:13 -0300 Subject: [PATCH 3/4] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20altura?= =?UTF-8?q?=20do=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.slider-layout.css | 5 ++++- .../pages/product/vtexSliderLayout/vtex.slider-layout.scss | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ab40a65..22b3fe0 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -29,6 +29,7 @@ .sliderLayoutContainer--carousel { width: 78.616%; margin: 0 auto 32px; + min-height: 254.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer { @@ -86,6 +87,9 @@ 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-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) { + line-height: 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-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { font-weight: 400; font-size: 18px; @@ -95,7 +99,6 @@ display: inline-block; vertical-align: text-top; 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) { diff --git a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss index 46e092a..ec37d69 100644 --- a/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss @@ -16,6 +16,7 @@ @media (max-width: 768px) and (min-width: 375px) { width: 78.616%; margin: 0 auto 32px; + min-height: 254.8px; } .sliderTrackContainer { width: 96%; @@ -55,6 +56,7 @@ display: flex; justify-content: center; :global(.vtex-product-summary-2-x-productNameContainer) { + line-height: 0; :global(.vtex-product-summary-2-x-productBrand) { font-weight: 400; font-size: 18px; @@ -64,7 +66,6 @@ display: inline-block; vertical-align: text-top; padding: 0 16px; - min-height: 19px; @media (max-width: 1025px) and (min-width: 768px) { font-size: 14px; line-height: 19px; From 9275b80a2cbaa62cc5cebe0dba6e5290b0108ba5 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 8 Feb 2023 10:12:53 -0300 Subject: [PATCH 4/4] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo?= =?UTF-8?q?=20do=20Tab=20Layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.tab-layout.css | 22 +++++++++++++--- .../vtexTabLayout/vtex.tab-layout.scss | 26 ++++++++++++++++--- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 9881fdb..f19e38b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -33,6 +33,7 @@ .container--description-block .listContainer { width: 71.858%; margin: 0 auto 64px; + column-gap: 7%; } } @media (max-width: 1025px) and (min-width: 768px) { @@ -85,6 +86,7 @@ width: 100%; height: 38px; border-radius: 0; + min-height: unset; } @media (max-width: 2561px) and (min-width: 1920px) { .container--description-block .listContainer .listItem :global(.vtex-button) { @@ -117,6 +119,7 @@ margin: 0; padding: 0; height: 38px; + min-height: unset; } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItemActive { @@ -136,37 +139,50 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - border-bottom: 2px solid #000000; width: 100%; height: 38px; border-radius: 0; } +.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after { + content: ""; + border-bottom: 2px solid #000000; + width: 100%; +} @media (max-width: 2561px) and (min-width: 1920px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) { font-size: 24px; } + .container--description-block .listContainer .listItemActive :global(.vtex-button) ::after { + border-bottom: 3px solid #000000; + } } @media (max-width: 1025px) and (min-width: 768px) { - .container--description-block .listContainer .listItemActive :global(.vtex-button) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) ::after { + content: unset; border-bottom: unset; } } @media (max-width: 768px) and (min-width: 375px) { - .container--description-block .listContainer .listItemActive :global(.vtex-button) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) ::after { + content: unset; border-bottom: unset; } } .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { padding: 0; width: 100%; + display: flex; + flex-direction: column; } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + flex-direction: row; justify-content: left; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + flex-direction: row; justify-content: left; } } diff --git a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss index aa5ed62..aaa507b 100644 --- a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss @@ -19,6 +19,7 @@ @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; margin: 0 auto 64px; + column-gap: 7%; } @media (max-width: 1025px) and (min-width: 768px) { flex-direction: column; @@ -59,6 +60,7 @@ width: 100%; height: 38px; border-radius: 0; + min-height: unset; @media (max-width: 2561px) and (min-width: 1920px) { font-size: 24px; } @@ -84,6 +86,7 @@ margin: 0; padding: 0; height: 38px; + min-height: unset; @media (max-width: 1025px) and (min-width: 768px) { margin-bottom: 16px; } @@ -98,26 +101,43 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - border-bottom: 2px solid $black; width: 100%; height: 38px; border-radius: 0; + ::after { + content: ""; + border-bottom: 2px solid $black; + width: 100%; + } @media (max-width: 2561px) and (min-width: 1920px) { font-size: 24px; + ::after { + border-bottom: 3px solid $black; + } } @media (max-width: 1025px) and (min-width: 768px) { - border-bottom: unset; + ::after { + content: unset; + border-bottom: unset; + } } @media (max-width: 768px) and (min-width: 375px) { - border-bottom: unset; + ::after { + content: unset; + border-bottom: unset; + } } :global(.vtex-button__label) { padding: 0; width: 100%; + display: flex; + flex-direction: column; @media (max-width: 1025px) and (min-width: 768px) { + flex-direction: row; justify-content: left; } @media (max-width: 768px) and (min-width: 375px) { + flex-direction: row; justify-content: left; } }