diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 3bb78f0..677a74f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -21,24 +21,33 @@ } } .container .homeLink { - padding: 0; + padding-right: 6px; + padding-left: 0; } .container .homeLink::before { content: "Home"; font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } .container .homeIcon { display: none; } +.container .arrow { + padding: 0 6px; +} +.container .arrow .link { + padding: 0 6px; +} +.container .term { + padding: 0 6px; +} .container .link, .container .term { font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; -} -@media (max-width: 768px) and (min-width: 375px) { - .container .term { - padding-left: 0; - } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1c20985..10d123f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -87,8 +87,18 @@ width: 22px; height: 18px; padding: 0; + left: 0; + position: absolute; } +.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { + margin-left: 308.08px; + } +} .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { font-weight: 400; font-size: 12px; diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index 64d6962..da0e430 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -44,7 +44,7 @@ font-weight: 400; font-size: 14px; line-height: 30px; - color: rgba(255, 255, 255, 0.45); + color: #929292; } .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed, .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 388c6fc..992f63a 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,9 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.quantitySelectorContainer { + margin-bottom: 0px; +} @media (max-width: 768px) and (min-width: 375px) { .quantitySelectorContainer { margin: 0; @@ -27,6 +30,7 @@ font-weight: 400; font-size: 16px; line-height: 22px; + padding: 0; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f555c33..988802d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -207,6 +207,8 @@ display: grid; grid-template-areas: "A B" "C C"; max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; } @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) { @@ -215,27 +217,32 @@ } @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%; + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + 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) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; 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; - width: 12.22em; + margin: 0 0 15px 0; + width: 100%; } @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-inputName) { - width: 23.657em; + 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-inputName) { - width: 94.26%; + width: 100%; + 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) :global(.vtex-styleguide-9-x-input) { @@ -246,6 +253,7 @@ border: 1px solid #989898; border-radius: unset; height: 40px; + padding: 0 14px; } :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; @@ -256,17 +264,18 @@ :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) { grid-area: B; margin: 0 0 15px; - width: 12.22em; + width: 100%; 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; + 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-inputEmail) { - width: 99.47%; + width: 100%; + 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) :global(.vtex-styleguide-9-x-input) { @@ -276,6 +285,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + padding: 0 14px; } :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; @@ -397,6 +407,11 @@ color: #000000; } +@media (max-width: 1025px) and (min-width: 768px) { + .skuSelectorSubcontainer--cor { + margin-bottom: 0; + } +} .skuSelectorSubcontainer--cor .skuSelectorNameContainer { margin: 8px 0 0; height: 48px; @@ -456,6 +471,11 @@ display: flex; align-items: flex-end; } +@media (max-width: 768px) and (min-width: 375px) { + .shippingContainer { + padding-bottom: 40px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) { padding-bottom: 0; } @@ -486,12 +506,22 @@ width: 100%; } } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; font-size: 12px; line-height: 16px; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { height: 0; padding: 0; @@ -540,16 +570,38 @@ .shippingTable { border: 0; padding: 0; + margin-top: 16px; +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable { + margin-top: 0; + margin-bottom: 16px; + } } .shippingTable .shippingTableHead { display: block; } .shippingTable .shippingTableHead .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -584,11 +636,26 @@ } .shippingTable .shippingTableBody .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 10% 5.6% 12.5%; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 9.6% 5.5% 11.5%; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: 30% 18% 39%; + } +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -614,6 +681,7 @@ .productImagesContainer--image-description { width: 92.93%; + height: 632px; max-height: unset; position: relative; margin-left: 32px; @@ -621,11 +689,13 @@ @media (max-width: 2561px) and (min-width: 1920px) { .productImagesContainer--image-description { width: 94.784%; + height: 872px; } } @media (max-width: 1025px) and (min-width: 768px) { .productImagesContainer--image-description { width: 100%; + height: 944px; margin-left: 0; margin-bottom: 16px; } @@ -633,11 +703,31 @@ @media (max-width: 768px) and (min-width: 375px) { .productImagesContainer--image-description { width: 100%; + height: 296px; margin-left: 0; margin-bottom: 16px; } } -.productImagesContainer--image-description .productImageTag--image-description--main { +.productImagesContainer--image-description .productImage--image-description { + height: 632px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .productImagesContainer--image-description .productImage--image-description { + height: 872px; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description .productImage--image-description { + height: 944px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .productImagesContainer--image-description .productImage--image-description { + height: 296px; + } +} +.productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { + object-fit: cover !important; max-height: unset !important; } @@ -645,6 +735,7 @@ width: 92.93%; position: relative; margin-left: 16px; + margin-right: 32px; } @media (max-width: 2561px) and (min-width: 1920px) { .productDescriptionContainer { @@ -654,6 +745,7 @@ @media (max-width: 1025px) and (min-width: 768px) { .productDescriptionContainer { margin-left: 0; + margin-right: 0; width: 100%; } } @@ -661,6 +753,7 @@ .productDescriptionContainer { margin-left: 0; width: 100%; + margin-right: 0; } } .productDescriptionContainer .productDescriptionTitle { @@ -670,6 +763,11 @@ line-height: 32px; color: #575757; } +@media (max-width: 2561px) and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + margin-bottom: 16px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .productDescriptionContainer .productDescriptionTitle { font-size: 20px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ef09152..83a9e0c 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -26,12 +26,13 @@ justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; - padding-top: 16px; + padding-top: 0; + column-gap: 99px; } @media (max-width: 2561px) and (min-width: 1920px) { .container--description-block .listContainer { width: 71.858%; - margin: 0 auto 32px; + margin: 0 auto 64px; } } @media (max-width: 1025px) and (min-width: 768px) { @@ -39,6 +40,7 @@ flex-direction: column; border-top: 1px solid #b9b9b9; margin-bottom: 16px; + padding-top: 16px; } } @media (max-width: 768px) and (min-width: 375px) { @@ -46,20 +48,29 @@ flex-direction: column; border-top: 1px solid #b9b9b9; margin-bottom: 16px; + padding-top: 16px; } } .container--description-block .listContainer .listItem { margin: 0; padding: 0; + width: 114px; height: 38px; } +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem { + width: 142px; + } +} @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem { + width: 82px; margin-bottom: 16px; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem { + width: 82px; margin-bottom: 16px; } } @@ -81,15 +92,24 @@ } } .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + width: 114px; + height: 38px; +} +@media (max-width: 2561px) and (min-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 142px; + } } @media (max-width: 1025px) and (min-width: 768px) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; justify-content: left; } } @media (max-width: 768px) and (min-width: 375px) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + width: 82px; justify-content: left; } } diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index f537138..429c4e5 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -9,29 +9,39 @@ width: 71.858%; } .homeLink { - padding: 0; + padding-right: 6px; + padding-left: 0; } .homeLink::before { content: "Home"; font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; } .homeIcon { display: none; } + .arrow { + padding: 0 6px; + .link { + padding: 0 6px; + } + } + + .term { + padding: 0 6px; + } + .link, .term { font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; - } - - .term { - @media (max-width: 768px) and (min-width: 375px) { - padding-left: 0; - } + color: $gray; } } diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 31b9484..56c310a 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -83,6 +83,8 @@ width: 22px; height: 18px; padding: 0; + left: 0; + position: absolute; } } } @@ -94,6 +96,10 @@ .flexColChild { :global(.vtex-menu-2-x-menuContainerNav) { :global(.vtex-menu-2-x-menuContainer) { + margin-left: 148.08px; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-left: 308.08px; + } :global(.vtex-menu-2-x-menuItem) { :global(.vtex-menu-2-x-styledLink) { :global(.vtex-menu-2-x-styledLinkContent) { @@ -102,7 +108,7 @@ line-height: 16px; letter-spacing: -0.1em; text-transform: uppercase; - color: #929292; + color: $gray; } } } @@ -110,7 +116,7 @@ } } -//product-images +//Product-images .flexRowContent { padding: 0; @@ -128,7 +134,7 @@ .flexRowContent { .stretchChildrenWidth { :global(.vtex-button):first-child { - background: #000000; + background: $black; padding: 12px 64px; height: 49px; border: none; @@ -144,7 +150,7 @@ :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { content: "ADICIONAR À SACOLA"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 25px; @@ -158,7 +164,7 @@ //Footer .flexRow--menu-row { - background-color: #000000; + background-color: $black; height: 464px; padding: 32px 32px 128px; @media (max-width: 2561px) and (min-width: 1920px) { @@ -166,13 +172,13 @@ } } .flexRow--menu-row-mobile { - background-color: #000000; + background-color: $black; min-height: 532px; padding: 0px 16px 32px; .flexRowContent--menu-row-mobile { display: flex; flex-direction: column; - .stretchChildrenWidth{ + .stretchChildrenWidth { width: 100% !important; } } 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 2f51c3e..c25695f 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,4 +1,5 @@ //Logo Header + .logoContainer { padding-left: 40px; @media (max-width: 2561px) and (min-width: 1920px) { @@ -7,6 +8,7 @@ } //Input Header + .autoCompleteOuterContainer { &:first-child { :global(.vtex-input) { @@ -21,7 +23,7 @@ } } -//product-images +//Product-images .container { width: 100%; @@ -79,18 +81,14 @@ @media (max-width: 2561px) and (min-width: 1920px) { height: 904px !important; } - // @media (max-width: 1920px) and (min-width: 1024px) { - // max-height: unset !important; - // } + @media (max-width: 1025px) and (min-width: 768px) { height: 944px !important; - // max-height: unset !important; } @media (max-width: 768px) and (min-width: 375px) { width: 99.67% !important; height: 296px !important; object-fit: cover !important; - // max-height: unset !important; } } } @@ -133,7 +131,7 @@ } } -//dados produto +//Dados produto .productNameContainer { text-align: right; @@ -189,24 +187,31 @@ "A B" "C C"; max-width: unset !important; + column-gap: 8px; + grid-template-columns: 49% 49%; @media (max-width: 2561px) and (min-width: 1920px) { width: 44.138%; } @media (max-width: 1025px) and (min-width: 768px) { - width: 81.02%; + grid-template-columns: 49.6% 49.6%; + column-gap: 8px; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { + column-gap: 8px; + grid-template-columns: 48.57% 48.57%; width: 100%; } :global(.vtex-store-components-3-x-inputName) { grid-area: A; - margin: 0 8px 15px 0; - width: 12.22em; + margin: 0 0 15px 0; + width: 100%; @media (max-width: 1025px) and (min-width: 768px) { - width: 23.657em; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { - width: 94.26%; + width: 100%; + margin-right: 0; } :global(.vtex-input) { :global(.vtex-input-prefix__group) { @@ -218,6 +223,7 @@ border: 1px solid #989898; border-radius: unset; height: 40px; + padding: 0 14px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -231,13 +237,14 @@ :global(.vtex-store-components-3-x-inputEmail) { grid-area: B; margin: 0 0 15px; - width: 12.22em; + width: 100%; height: 40px; @media (max-width: 1025px) and (min-width: 768px) { - width: 23.657em; + width: 100%; } @media (max-width: 768px) and (min-width: 375px) { - width: 99.47%; + width: 100%; + margin-right: 0; } :global(.vtex-input) { :global(.vtex-input-prefix__group) { @@ -248,6 +255,7 @@ color: #989898; border: 1px solid #989898; border-radius: unset; + padding: 0 14px; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; @@ -273,7 +281,7 @@ :global(.vtex-button__label)::after { content: "AVISE-ME"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 25px; @@ -284,7 +292,7 @@ } } -// sku selector +// Sku selector .skuSelectorContainer { display: flex; @@ -302,7 +310,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } .skuSelectorSubcontainer--tamanho::before { @@ -311,7 +319,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } .skuSelectorSubcontainer--tamanho { @@ -328,7 +336,7 @@ height: 40px; margin: 0; .frameAround--sku-selector { - border-color: #000000; + border-color: $black; border-width: 2px; width: 40px; height: 40px; @@ -371,7 +379,7 @@ .skuSelectorItem--selected { .skuSelectorInternalBox { .skuSelectorItemTextValue { - color: #000000; + color: $black; } } } @@ -379,6 +387,9 @@ } } .skuSelectorSubcontainer--cor { + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 0; + } .skuSelectorNameContainer { margin: 8px 0 0; height: 48px; @@ -392,7 +403,7 @@ height: 48px; margin: 0; .frameAround--sku-selector { - border-color: #000000; + border-color: $black; border-width: 2px; width: 48px; height: 48px; @@ -435,11 +446,14 @@ } } -// Calculadora de Frete +//Calculadora de Frete .shippingContainer { display: flex; align-items: flex-end; + @media (max-width: 768px) and (min-width: 375px) { + padding-bottom: 40px; + } :global(.vtex-address-form__postalCode) { padding-bottom: 0; @media (max-width: 768px) and (min-width: 375px) { @@ -451,7 +465,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $gray; } :global(.vtex-input) { :global(.vtex-input__label) { @@ -465,6 +479,13 @@ @media (max-width: 768px) and (min-width: 375px) { width: 100%; } + :global(.vtex-address-form-4-x-input) { + color: #afafaf; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 0 16.5px 16px; + } :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -472,13 +493,16 @@ line-height: 16px; } } + :global(.vtex-input__error) { + position: absolute; + } } :global(.vtex-address-form__postalCode-forgottenURL) { height: 0; padding: 0; :last-child { text-decoration-line: underline; - color: #000000; + color: $black; font-weight: 400; font-size: 12px; line-height: 16px; @@ -500,7 +524,7 @@ :global(.vtex-button) { width: 49px; height: 49px; - background: #000000; + background: $black; border-radius: 0; border: none; bottom: 1px; @@ -511,7 +535,7 @@ :global(.vtex-button)::after { content: "OK"; font-family: "Open Sans", sans-serif; - color: #ffffff; + color: $white; font-weight: 600; font-size: 14px; line-height: 19px; @@ -523,13 +547,27 @@ .shippingTable { border: 0; padding: 0; + margin-top: 16px; + @media (max-width: 768px) and (min-width: 375px) { + margin-top: 0; + margin-bottom: 16px; + } .shippingTableHead { display: block; .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -567,10 +605,19 @@ .shippingTableBody { .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 16.36%); + grid-template-columns: 13% 8% 17%; grid-template-areas: "A B C"; column-gap: 32px; margin-top: 15px; + @media (max-width: 2561px) and (min-width: 1920px) { + grid-template-columns: 10% 5.6% 12.5%; + } + @media (max-width: 1025px) and (min-width: 768px) { + grid-template-columns: 9.6% 5.5% 11.5%; + } + @media (max-width: 768px) and (min-width: 375px) { + grid-template-columns: 30% 18% 39%; + } .shippingTableCellDeliveryName { grid-area: A; text-transform: capitalize; @@ -603,40 +650,60 @@ .productImagesContainer--image-description { width: 92.93%; + height: 632px; max-height: unset; position: relative; margin-left: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; + height: 872px; } @media (max-width: 1025px) and (min-width: 768px) { width: 100%; + height: 944px; margin-left: 0; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { width: 100%; + height: 296px; margin-left: 0; margin-bottom: 16px; } - & .productImageTag--image-description--main { - max-height: unset !important; + .productImage--image-description { + height: 632px; + @media (max-width: 2561px) and (min-width: 1920px) { + height: 872px; + } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 296px; + } + & .productImageTag--image-description--main { + object-fit: cover !important; + max-height: unset !important; + } } } .productDescriptionContainer { width: 92.93%; position: relative; margin-left: 16px; + margin-right: 32px; @media (max-width: 2561px) and (min-width: 1920px) { width: 94.784%; } @media (max-width: 1025px) and (min-width: 768px) { margin-left: 0; + margin-right: 0; width: 100%; } @media (max-width: 768px) and (min-width: 375px) { margin-left: 0; width: 100%; + margin-right: 0; } .productDescriptionTitle { margin-bottom: 8px; @@ -644,6 +711,9 @@ font-size: 24px; line-height: 32px; color: #575757; + @media (max-width: 2561px) and (min-width: 1920px) { + margin-bottom: 16px; + } @media (max-width: 1025px) and (min-width: 768px) { font-size: 20px; } @@ -659,7 +729,7 @@ font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; + color: $gray; @media (max-width: 1025px) and (min-width: 768px) { font-size: 14px; line-height: 19px; @@ -687,12 +757,12 @@ .newsletter { height: 175px; - background: #000000; + background: $black; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 16px; - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid $white; @media (max-width: 1025px) and (min-width: 768px) { border-bottom: none !important; } @@ -724,7 +794,7 @@ font-size: 24px; line-height: 38px; text-align: center; - color: #ffffff; + color: $white; display: flex; flex-direction: column; } @@ -734,7 +804,7 @@ font-size: 18px; line-height: 25px; text-align: center; - color: #929292; + color: $gray; margin-top: 16px; @media (max-width: 1025px) and (min-width: 768px) { font-size: 16px; @@ -758,7 +828,7 @@ border-top: none; border-left: none; border-right: none; - border-bottom: 1px solid #929292; + border-bottom: 1px solid $gray; border-radius: 0; height: 32px; :global(.vtex-styleguide-9-x-input) { @@ -767,8 +837,8 @@ font-weight: 400; font-size: 18px; line-height: 25px; - color: #929292; - border: 1px solid #000000; + color: $gray; + border: 1px solid $black; @media (max-width: 1025px) and (min-width: 768px) { font-size: 12px; line-height: 16px; @@ -786,8 +856,8 @@ font-weight: 400; font-size: 18px; line-height: 25px; - color: #929292; - border: 1px solid #000000; + color: $gray; + border: 1px solid $black; @media (max-width: 1025px) and (min-width: 768px) { font-size: 12px; line-height: 16px; @@ -806,7 +876,7 @@ padding: 0 16px 0; width: 84px; height: 32px; - border-bottom: 3px solid #bfbfbf; + border-bottom: 3px solid $gray-300; min-height: unset; @media (max-width: 768px) and (min-width: 375px) { margin-top: 0; @@ -817,9 +887,8 @@ font-size: 14px; line-height: 19px; text-align: center; - color: #ffffff; + color: $white; padding: 0 !important; - // border: 1px solid #000000; } } } diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtex.menu.scss index 69b9cf5..035d2a7 100644 --- a/styles/sass/pages/product/vtex.menu.scss +++ b/styles/sass/pages/product/vtex.menu.scss @@ -1,4 +1,5 @@ //Footer + .menuContainerNav { .menuContainer { @media (max-width: 1025px) and (min-width: 768px) { @@ -27,7 +28,7 @@ font-weight: 400; font-size: 14px; line-height: 30px; - color: rgba(255, 255, 255, 0.45); + color: $gray; .accordionIcon--site-m3-academy-mobile--isClosed, .accordionIcon--am3academy-mobile--isClosed { visibility: hidden; @@ -76,13 +77,13 @@ font-weight: 400; font-size: 12px; line-height: 30px; - color: #ffffff; + color: $white; display: flex; justify-content: center; align-items: center; width: 164px; height: 42px; - border: 1px solid #ffffff; + border: 1px solid $white; @media (max-width: 1025px) and (min-width: 768px) { width: 100%; } @@ -92,7 +93,7 @@ } .styledLinkContent--site-m3-academy-mobile, .styledLinkContent--am3academy-mobile { - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid $white; padding: 8px 0; } .styledLinkContent--site-m3-academy, @@ -104,7 +105,7 @@ .styledLinkContent--seja-um-franqueado-block { font-weight: 400; font-size: 14px; - color: #ffffff; + color: $white; } } } @@ -144,13 +145,13 @@ margin-bottom: 0; } .SpanTitle { - color: #ffffff; + color: $white; font-weight: 400; font-size: 14px; line-height: 38px; } .SpanTitleBig { - color: #ffffff; + color: $white; font-weight: 400; font-size: 18px; line-height: 38px; @@ -207,7 +208,7 @@ font-weight: 400; font-size: 10px; line-height: 12px; - color: #ffffff; + color: $white; column-gap: 8.72px; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 1b611af..1690d69 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -4,6 +4,6 @@ font-weight: 700; font-size: 25px; line-height: 38px; - color: #000000; + color: $black; margin-top: 24px; } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index b08c2e8..2015465 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,6 +1,7 @@ -//product quantity +//Product quantity .quantitySelectorContainer { + margin-bottom: 0px; @media (max-width: 768px) and (min-width: 375px) { margin: 0; } @@ -18,11 +19,12 @@ border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #929292; + border-color: $cccccc; + color: $gray; font-weight: 400; font-size: 16px; line-height: 22px; + padding: 0; } :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; @@ -31,8 +33,8 @@ height: 49px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #000000; + border-color: $cccccc; + color: $black; border-radius: 0; font-weight: 400; font-size: 16px; @@ -46,10 +48,10 @@ height: 49px; border-top-width: 1px; border-bottom-width: 1px; - border-color: #cccccc; - color: #000000; + border-color: $cccccc; + color: $black; border-radius: 0; - background-color: #ffffff; + background-color: $white; font-weight: 400; font-size: 16px; line-height: 22px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index e3530c6..5894c7d 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -32,7 +32,7 @@ .slide--carousel { width: 5.3515% !important; @media (max-width: 2561px) and (min-width: 1920px) { - width: 5.4036%!important; + width: 5.4036% !important; } @media (max-width: 1025px) and (min-width: 768px) { width: 6.0831% !important; @@ -48,7 +48,7 @@ :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; @media (max-width: 2561px) and (min-width: 1920px) { - min-height: 543.4px; + min-height: 543.4px; } @media (max-width: 1025px) and (min-width: 768px) { min-height: 402.2px; @@ -68,7 +68,7 @@ font-size: 18px; line-height: 25px; text-align: center; - color: #000000; + color: $black; display: inline-block; vertical-align: text-top; min-height: 50px; @@ -80,7 +80,7 @@ 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; } @@ -107,7 +107,7 @@ line-height: 19px; text-align: center; text-decoration-line: line-through; - color: #bababa; + color: $BABABA; :global(.vtex-store-components-3-x-listPriceLabel) { display: none; } @@ -134,7 +134,7 @@ font-size: 24px; line-height: 33px; text-align: center; - color: #000000; + color: $black; } } } @@ -185,13 +185,13 @@ align-items: center; bottom: -32px; .paginationDot { - background-color: #000000; + background-color: $black; width: 10px !important; height: 10px !important; } .paginationDot--isActive { - background-color: #ffffff; - border: 0.5px solid #000000; + background-color: $white; + border: 0.5px solid $black; width: 17px !important; height: 17px !important; } diff --git a/styles/sass/pages/product/vtex.sticky-layout.scss b/styles/sass/pages/product/vtex.sticky-layout.scss index c472aa7..23fc160 100644 --- a/styles/sass/pages/product/vtex.sticky-layout.scss +++ b/styles/sass/pages/product/vtex.sticky-layout.scss @@ -1,5 +1,5 @@ // Header .wrapper--sticky-header { - background-color: #ffffff !important; + background-color: $white !important; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 39537b3..49d1bd0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -12,37 +12,46 @@ } .listContainer { justify-content: space-around; - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; margin-bottom: 32px; - padding-top: 16px; + padding-top: 0; + column-gap: 99px; @media (max-width: 2561px) and (min-width: 1920px) { width: 71.858%; - margin: 0 auto 32px; + margin: 0 auto 64px; } @media (max-width: 1025px) and (min-width: 768px) { flex-direction: column; - border-top: 1px solid #b9b9b9; + border-top: 1px solid $B9B9B9; margin-bottom: 16px; + padding-top: 16px; } @media (max-width: 768px) and (min-width: 375px) { flex-direction: column; - border-top: 1px solid #b9b9b9; + border-top: 1px solid $B9B9B9; margin-bottom: 16px; + padding-top: 16px; } .listItem { margin: 0; padding: 0; + width: 114px; height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; margin-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { + width: 82px; margin-bottom: 16px; } :global(.vtex-button) { background-color: unset; border: none; - color: #bfbfbf; + color: $gray-300; font-weight: 400; font-size: 18px; line-height: 38px; @@ -54,11 +63,18 @@ font-size: 24px; } :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + width: 114px; + height: 38px; + @media (max-width: 2561px) and (min-width: 1920px) { + width: 142px; + } @media (max-width: 1025px) and (min-width: 768px) { + width: 82px; justify-content: left; } @media (max-width: 768px) and (min-width: 375px) { + width: 82px; justify-content: left; } } @@ -77,12 +93,12 @@ :global(.vtex-button) { background-color: unset; border: none; - color: #000000; + color: $black; font-weight: 400; font-size: 18px; line-height: 38px; text-transform: capitalize; - border-bottom: 2px solid #000000; + border-bottom: 2px solid $black; width: 100%; height: 38px; border-radius: 0; @@ -114,11 +130,11 @@ margin: 0 auto; } @media (max-width: 1025px) and (min-width: 768px) { - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; padding-bottom: 16px; } @media (max-width: 768px) and (min-width: 375px) { - border-bottom: 1px solid #b9b9b9; + border-bottom: 1px solid $B9B9B9; padding-bottom: 16px; } .contentItem {