diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1192bc5..8f34089 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -22,18 +22,17 @@ } [class*="html--cart-button"] { - width: 78.94%; + width: 80%; height: 49px; } [class*="html--prateleira"] { - padding: 16px 40px 64px; + padding: 16px 40px 113px; } [class*="html--price"] { display: flex; flex-direction: column; - margin-bottom: 32px; } [class*="html--sku-selector"] { @@ -48,8 +47,16 @@ [class*="html--product-main"] { padding: 16px 360px 0; } + [class*="html--cart-button"] { + width: 90%; + height: 49px; + } [class*="html--prateleira"] { - padding: 16px 360px 64px; + padding: 16px 360px 113px; + } + [class*="html--stack-layout"], + [class*="html--right-col"] { + width: 50%; } } @@ -66,6 +73,10 @@ [class*="html--cart-button"] { width: 85.39%; } + + [class*="html--prateleira"] { + padding-bottom: 105px; + } } @media screen and (max-width: 768px) { @@ -83,4 +94,7 @@ [class*="html--shipping-simulator"]::-webkit-scrollbar { background-color: transparent; } + [class*="html--prateleira"] { + padding-bottom: 65px; + } } diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index 69058e5..9c3a9b6 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -13,15 +13,13 @@ } .buttonText--add-to-cart-button { + font-weight: 400; font-size: 18px; line-height: 25px; - display: flex; - align-items: center; - text-align: center; color: #FFFFFF; } -@media screen and (max-width: 375px) { +@media screen and (max-width: 768px) { .buttonText--add-to-cart-button { width: 168px; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 424160e..678f2a2 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -14,7 +14,7 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); - margin-bottom: 8px; + margin-bottom: 24px; } .product-identifier__label, diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index d9258b9..17448e7 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -41,8 +41,6 @@ border-radius: 0; font-size: 16px; line-height: 22px; - display: flex; - align-items: center; color: #000000; height: 100%; width: 26px !important; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 57f0703..02b03af 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .container--produto-prateleira { max-width: initial !important; + border-radius: 0; margin: 0; } .container--produto-prateleira :global(.vtex-store-components-3-x-discountContainer) { @@ -20,11 +21,10 @@ .container--produto-prateleira .imageContainer { display: flex; align-items: center; - justify-content: center; - width: 100%; - max-width: 334.4px; - height: 334.4px; + max-width: 314.4px; + height: 314.4px; background: #EDEDED; + margin: 0; } .container--produto-prateleira .nameContainer { padding: 16px 0 8px; @@ -41,13 +41,18 @@ } .container--produto-prateleira .imageNormal { width: 100%; - max-height: 334.4px; + max-height: 314.4px; max-width: 100%; } .container--produto-prateleira .priceContainer { padding: 0 0 32px; } +.element--produto-prateleira { + padding: 0; + height: auto; +} + @media screen and (min-width: 1920px) { .container--produto-prateleira .imageContainer { max-width: 434.4px; @@ -61,12 +66,12 @@ } @media screen and (max-width: 1024px) { .container--produto-prateleira .imageContainer { - max-width: 317.87px; - height: 317.87px; + max-width: 291.2px; + height: 291.2px; } .container--produto-prateleira .imageNormal { width: 100%; - max-height: 317.87px; + max-height: 291.2px; max-width: 100%; } .container--produto-prateleira .nameContainer .productNameContainer { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 96aa00a..e6df74c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -69,6 +69,11 @@ color: #575757; } +@media screen and (max-width: 1024px) { + .container--title-prateleira .paragraph--title-prateleira { + margin: 0 0 24px; + } +} @media screen and (max-width: 768px) { .container--title-prateleira .paragraph--title-prateleira { font-size: 20px; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 86ff6d7..2092db5 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,7 +15,7 @@ gap: 16px; } .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - width: 95.96%; + width: 97%; } .sliderLayoutContainer--prateleira .slide--prateleira { margin: 0; @@ -33,7 +33,7 @@ content: ""; position: absolute; padding: 10px; - left: 1px; + left: 8px; box-shadow: 2px -2px 0 0px #000 inset; border: solid transparent; border-width: 0 0 1px 1px; @@ -51,7 +51,7 @@ content: ""; position: absolute; padding: 10px; - right: 1px; + right: 8px; box-shadow: 2px -2px 0 0px #000 inset; border: solid transparent; border-width: 0 0 1px 1px; @@ -59,6 +59,7 @@ } .sliderLayoutContainer--prateleira .paginationDotsContainer { align-items: center; + bottom: -32px; } .sliderLayoutContainer--prateleira .paginationDot--prateleira { width: 10px; @@ -73,6 +74,11 @@ border: 0.5px solid #000000; } +@media screen and (min-width: 1920px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + width: 98%; + } +} @media screen and (max-width: 1024px) { .sliderLayoutContainer--prateleira .sliderTrack--prateleira { gap: 12px; @@ -80,9 +86,24 @@ .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { width: 100%; } + .paginationDotsContainer { + bottom: -24px; + } } @media screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + width: 90%; + } .sliderLayoutContainer--prateleira .sliderTrack--prateleira { gap: 8px; } + .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira { + left: -8px; + } + .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira { + right: -8px; + } + .sliderLayoutContainer--prateleira .paginationDotsContainer { + bottom: -16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 556db07..fabd8b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,102 +8,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.notificationBarContainer { - background-color: black; - height: 34px; -} -.notificationBarContainer .notificationBarInner { - min-height: 34px; -} -.notificationBarContainer .notificationContent { - display: flex; - align-items: center; - gap: 54px; - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: #FFFFFF; -} -.notificationBarContainer .notificationContent::before { - content: ""; - display: flex; - width: 6px; - height: 6px; - padding: 1px; - box-shadow: 1px -1px 0 0px #fff inset; - border: solid transparent; - border-width: 0 0 1px 1px; - transform: rotate(45deg); -} -.notificationBarContainer .notificationContent::after { - content: ""; - display: flex; - width: 6px; - height: 6px; - padding: 1px; - box-shadow: 1px -1px 0 0px #fff inset; - border: solid transparent; - border-width: 0 0 1px 1px; - transform: rotate(-135deg); -} - -.logoContainer { - padding: 0; -} - -.searchBarContainer { - padding: 0; -} -.searchBarContainer :global(.vtex-input-prefix__group) { - width: 243px; - border: 1px solid #AEAEAE; - border-width: 0 0 1px; - border-radius: 0; - flex-direction: row-reverse; -} -.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { - background: transparent; -} -.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - padding-left: 12px; - font-weight: 300; - font-size: 12px; - line-height: 16px; - background: transparent; - color: #AEAEAE; -} -.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { - padding: 0; -} -.searchBarContainer .searchBarIcon { - padding: 0; -} -.searchBarContainer .searchBarIcon .searchIcon, -.searchBarContainer .searchBarIcon .closeIcon { - width: 10px; - height: 10px; - color: #AEAEAE; -} - -@media screen and (max-width: 1024px) { - .searchBarContainer { - max-width: 100%; - position: absolute; - bottom: 32px; - } - .searchBarContainer .autoCompleteOuterContainer { - max-width: 100%; - padding: 8px 40px 0; - } - .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) { - width: 100%; - } -} -@media screen and (max-width: 300px) { - .notificationBarContainer .notificationContent { - gap: 34px; - } -} .newsletter { background: red; } @@ -122,6 +26,7 @@ line-height: 34px; color: #575757; text-align: right; + margin-bottom: 8px; } .carouselGaleryCursor { @@ -172,7 +77,10 @@ } .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; + font-weight: 400; font-size: 14px; + line-height: 19px; + color: #929292; } .skuSelectorSubcontainer--cor { @@ -180,20 +88,16 @@ } .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "OUTRAS CORES"; - font-size: 14px; -} - -.skuSelectorNameContainer { - margin: 0; -} - -.skuSelectorTextContainer { font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } +.skuSelectorNameContainer { + margin: 0; +} + .skuSelectorName, .skuSelectorSelectorImageValue { font-size: 0; @@ -244,8 +148,8 @@ .diagonalCross { background: #d5d5d5; width: 1px; - height: 38.18px; - left: 19px; + height: 39.18px; + left: 20px; top: 1px; transform: rotate(45deg); } @@ -281,6 +185,7 @@ width: 280px; height: 49px; border-radius: 0; + border: 1px solid #CCCCCC; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; @@ -289,8 +194,6 @@ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { font-size: 12px; line-height: 16px; - display: flex; - align-items: center; text-decoration-line: underline; color: #000000; } @@ -301,11 +204,9 @@ font-weight: 400; font-size: 12px; line-height: 16px; + color: #AFAFAF; } .shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { - font-weight: 400; - font-size: 12px; - line-height: 16px; color: #AFAFAF; } .shippingContainer :global(.vtex-button) { @@ -399,6 +300,7 @@ .productImagesContainer--description { width: 50%; + max-width: 632px; max-height: 632px; } @@ -560,7 +462,7 @@ } @media screen and (min-width: 1920px) { - .productImagesGallerySwiperContainer .productImageTag--main { + .productImagesContainer--carousel .productImagesGallerySwiperContainer .productImageTag--main { max-height: 904px !important; } .productImagesContainer--description { @@ -578,6 +480,11 @@ font-size: 18px; line-height: 25px; } + .productImagesContainer--description { + width: 100%; + max-width: 872px; + max-height: 872px; + } } @media screen and (max-width: 1024px) { .productImageTag--main { @@ -588,6 +495,7 @@ } .productImagesContainer--description { width: 100%; + max-width: 100%; max-height: 944px; } .productDescriptionContainer { @@ -647,4 +555,100 @@ bottom: 24px; left: calc(100% - 48px); } +} +.notificationBarContainer { + background-color: black; + height: 34px; +} +.notificationBarContainer .notificationBarInner { + min-height: 34px; +} +.notificationBarContainer .notificationContent { + display: flex; + align-items: center; + gap: 54px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; +} +.notificationBarContainer .notificationContent::before { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(45deg); +} +.notificationBarContainer .notificationContent::after { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(-135deg); +} + +.logoContainer { + padding: 0; +} + +.searchBarContainer { + padding: 0; +} +.searchBarContainer :global(.vtex-input-prefix__group) { + width: 243px; + border: 1px solid #AEAEAE; + border-width: 0 0 1px; + border-radius: 0; + flex-direction: row-reverse; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + background: transparent; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding-left: 12px; + font-weight: 300; + font-size: 12px; + line-height: 16px; + background: transparent; + color: #AEAEAE; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + padding: 0; +} +.searchBarContainer .searchBarIcon { + padding: 0; +} +.searchBarContainer .searchBarIcon .searchIcon, +.searchBarContainer .searchBarIcon .closeIcon { + width: 10px; + height: 10px; + color: #AEAEAE; +} + +@media screen and (max-width: 1024px) { + .searchBarContainer { + max-width: 100%; + position: absolute; + bottom: 32px; + } + .searchBarContainer .autoCompleteOuterContainer { + max-width: 100%; + padding: 8px 40px 0; + } + .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} +@media screen and (max-width: 300px) { + .notificationBarContainer .notificationContent { + gap: 34px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 6b7ae97..9667929 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -29,9 +29,6 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - display: flex; - align-items: center; - text-align: center; padding: 0 !important; color: #BFBFBF; } diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index c2eeea7..36cb218 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -4,18 +4,15 @@ } .buttonText--add-to-cart-button { + font-weight: 400; font-size: 18px; line-height: 25px; - display: flex; - align-items: center; - text-align: center; - color: #FFFFFF; } -@media screen and (max-width: 375px) { +@media screen and (max-width: 768px) { .buttonText--add-to-cart-button { width: 168px; } -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 430030b..54767da 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -5,7 +5,7 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); - margin-bottom: 8px; + margin-bottom: 24px; } .product-identifier__label, @@ -18,4 +18,4 @@ .product-identifier--productReference { justify-content: flex-start; } -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index a7ec3c9..eeae21b 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -32,8 +32,6 @@ border-radius: 0; font-size: 16px; line-height: 22px; - display: flex; - align-items: center; color: #000000; height: 100%; width: 26px !important; @@ -47,4 +45,4 @@ :global(.vtex-numeric-stepper__plus-button) { border-width: 1px 1px 1px 0; justify-content: flex-start; -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 67b6802..4839a83 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,5 +1,6 @@ .container--produto-prateleira { max-width: initial !important; + border-radius: 0; margin: 0; :global(.vtex-store-components-3-x-discountContainer) { @@ -13,11 +14,10 @@ .imageContainer { display: flex; align-items: center; - justify-content: center; - width: 100%; - max-width: 334.4px; - height: 334.4px; + max-width: 314.4px; + height: 314.4px; background: #EDEDED; + margin: 0; } .nameContainer { @@ -40,7 +40,7 @@ .imageNormal { width: 100%; - max-height: 334.4px; + max-height: 314.4px; max-width: 100%; } @@ -49,6 +49,11 @@ } } +.element--produto-prateleira { + padding: 0; + height: auto; +} + @media screen and (min-width: 1920px) { .container--produto-prateleira { .imageContainer { @@ -68,13 +73,13 @@ @media screen and (max-width: 1024px) { .container--produto-prateleira { .imageContainer { - max-width: 317.87px; - height: 317.87px; + max-width: 291.2px; + height: 291.2px; } .imageNormal { width: 100%; - max-height: 317.87px; + max-height: 291.2px; max-width: 100%; } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 911b590..e55bea4 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -10,6 +10,14 @@ } } +@media screen and (max-width: 1024px) { + .container--title-prateleira { + .paragraph--title-prateleira { + margin: 0 0 24px; + } + } +} + @media screen and (max-width: 768px) { .container--title-prateleira { .paragraph--title-prateleira { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 195c6fa..4c84559 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -7,7 +7,7 @@ } .sliderTrackContainer--prateleira { - width: 95.96%; + width: 97%; } .slide--prateleira { @@ -28,7 +28,7 @@ content: ""; position: absolute; padding: 10px; - left: 1px; + left: 8px; box-shadow: 2px -2px 0 0px #000 inset; border: solid transparent; border-width: 0 0 1px 1px; @@ -49,7 +49,7 @@ content: ""; position: absolute; padding: 10px; - right: 1px; + right: 8px; box-shadow: 2px -2px 0 0px #000 inset; border: solid transparent; border-width: 0 0 1px 1px; @@ -59,6 +59,7 @@ .paginationDotsContainer { align-items: center; + bottom: -32px; } .paginationDot--prateleira { @@ -76,6 +77,14 @@ } } +@media screen and (min-width: 1920px) { + .sliderLayoutContainer--prateleira { + .sliderTrackContainer--prateleira { + width: 98%; + } + } +} + @media screen and (max-width: 1024px) { .sliderLayoutContainer--prateleira { .sliderTrack--prateleira { @@ -87,12 +96,34 @@ } } + + .paginationDotsContainer { + bottom: -24px; + } } @media screen and (max-width: 768px) { + .sliderLayoutContainer--prateleira { + + .sliderTrackContainer--prateleira { + width: 90%; + } + .sliderTrack--prateleira { gap: 8px; } + + .sliderLeftArrow--prateleira { + left: -8px; + } + + .sliderRightArrow--prateleira { + right: -8px; + } + + .paginationDotsContainer { + bottom: -16px; + } } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 94cd57c..3f00397 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -16,6 +16,7 @@ line-height: 34px; color: #575757; text-align: right; + margin-bottom: 8px; } .carouselGaleryCursor { @@ -69,7 +70,10 @@ .skuSelectorName { &::after { content: "OUTROS TAMANHOS:"; + font-weight: 400; font-size: 14px; + line-height: 19px; + color: #929292; } } } @@ -80,7 +84,10 @@ .skuSelectorName { &::after { content: "OUTRAS CORES"; + font-weight: 400; font-size: 14px; + line-height: 19px; + color: #929292; } } } @@ -89,13 +96,6 @@ margin: 0; } -.skuSelectorTextContainer { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; -} - .skuSelectorName, .skuSelectorSelectorImageValue { font-size: 0; @@ -150,8 +150,8 @@ .diagonalCross { background: #d5d5d5; width: 1px; - height: 38.18px; - left: 19px; + height: 39.18px; + left: 20px; top: 1px; transform: rotate(45deg); } @@ -193,6 +193,7 @@ width: 280px; height: 49px; border-radius: 0; + border: 1px solid #CCCCCC; } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -202,8 +203,6 @@ :last-child { font-size: 12px; line-height: 16px; - display: flex; - align-items: center; text-decoration-line: underline; color: #000000; } @@ -218,12 +217,9 @@ font-weight: 400; font-size: 12px; line-height: 16px; + color: #AFAFAF; &::placeholder { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #AFAFAF; } } @@ -341,6 +337,7 @@ .productImagesContainer--description { width: 50%; + max-width: 632px; max-height: 632px; } @@ -544,9 +541,12 @@ @media screen and (min-width: 1920px) { - .productImagesGallerySwiperContainer { - .productImageTag--main { - max-height: 904px !important; + + .productImagesContainer--carousel { + .productImagesGallerySwiperContainer { + .productImageTag--main { + max-height: 904px !important; + } } } @@ -568,6 +568,12 @@ font-size: 18px; line-height: 25px; } + + .productImagesContainer--description { + width: 100%; + max-width: 872px; + max-height: 872px; + } } @@ -583,6 +589,7 @@ .productImagesContainer--description { width: 100%; + max-width: 100%; max-height: 944px; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 8b3ed05..e5ec320 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -22,9 +22,6 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; - display: flex; - align-items: center; - text-align: center; padding: 0 !important; color: #BFBFBF; }