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/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9fb3b77..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 { @@ -161,7 +160,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 +180,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 +192,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 +218,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 +229,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/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/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; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index aab0940..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; @@ -159,7 +158,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 +174,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 +184,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 +210,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 +219,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 +593,6 @@ } } - //Tab Layout .productImagesContainer--image-description { 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; } }