From 994521192d24c526243e6629aa9cd610f1661976 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Fri, 10 Feb 2023 23:07:18 -0300 Subject: [PATCH] fix: faz akustes finais --- react/components/Html/styles.css | 51 ++-- store/blocks/header/category-menu.json | 34 +-- store/blocks/header/header.jsonc | 14 +- store/blocks/pdp/product-shelf-related.jsonc | 1 + styles/css/vtex.breadcrumb.css | 5 + styles/css/vtex.flex-layout.css | 23 +- styles/css/vtex.product-quantity.css | 3 +- styles/css/vtex.product-summary.css | 2 +- styles/css/vtex.slider-layout.css | 15 +- styles/css/vtex.store-components.css | 128 +++++++-- styles/css/vtex.tab-layout.css | 4 +- .../sass/pages/product/vtex.breadcrumb.scss | 4 + .../sass/pages/product/vtex.flex-layout.scss | 29 +- .../pages/product/vtex.product-quantity.scss | 5 +- .../pages/product/vtex.product-summary.scss | 2 +- .../pages/product/vtex.slider-layout.scss | 20 +- .../pages/product/vtex.store-components.scss | 257 +++++++++--------- .../sass/pages/product/vtex.tab-layout.scss | 12 +- styles/sass/utils/_vars.scss | 4 + 19 files changed, 371 insertions(+), 242 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b775543..e5460d8 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -3,8 +3,6 @@ column-gap: 10px; } - - /* Tablet */ @media (max-width: 1024px) { [class*="html--container__buyButton"] { @@ -25,7 +23,8 @@ border: none; border-radius: 0; width: 100%; - height: 49px; + height: auto; + min-height: 49px; max-width: 526px; /* aqui é até 1440 */ } @@ -35,6 +34,12 @@ min-width: 766px; } } +@media (max-width: 768px) { + [class*="html--container__buyButton"] :global(.vtex-button) { + max-height: 72px; + padding: 12px 64px ; + } +} @media (min-width: 490px) { [class*="html--container__buyButton"] :global(.vtex-button__label)::after { @@ -42,12 +47,6 @@ } } -@media (min-width: 1023px) and (max-width: 1025px) { - [class*="html--container__buyButton"] :global(.vtex-button) { - min-width: 806px; - } -} - @media (max-width: 1440px) { [class*="html--container__buyButton"] :global(.vtex-button) { max-width: 806px; @@ -75,17 +74,23 @@ } } -@media (min-width: 490px) { - [class*="html--container__buyButton"] :global(.vtex-button__label)::after { - max-width: none; - max-width: none; - } +[class*="html--quantity"] { + max-width: 128px!important; + height: 49px; + margin-bottom: 16px + } + @media (max-width: 767px) { +[class*="html--quantity"] { + margin-bottom: 10px + } } + [class*="html--m3-add-to-cart-button "]{ + width: 100%; } + + + +/* Area do product sumary */ -/* @media (min-width:374px) and (max-width:376px) { -[class*="html--m3-html-product-sumary"] { - height: 254.8px!important; -}} */ @media (max-width:1920px) { [class*="html--m3-html-product-sumary"] { height: unset; @@ -100,12 +105,12 @@ max-width:314.4px; max-width: 291.2px; }} -[class*="html--quantity"] { - max-width: 128px!important; - } [class*="html--m3-html-product-sumary"]{ display: flex; flex-direction: column; } - [class*="html--m3-add-to-cart-button "]{ - width: 100%; } + @media (min-width: 1920px) { + [class*="html--m3-product-summary-list"] { + padding: 0 360px; + } + } diff --git a/store/blocks/header/category-menu.json b/store/blocks/header/category-menu.json index f641551..b3e7f9f 100644 --- a/store/blocks/header/category-menu.json +++ b/store/blocks/header/category-menu.json @@ -23,17 +23,13 @@ "text": "Apparel & Accessories" } }, - "blocks": [ - "vtex.menu@2.x:submenu#category-apparel" - ] + "blocks": ["vtex.menu@2.x:submenu#category-apparel"] }, "vtex.menu@2.x:submenu#category-apparel": { "props": { "width": "auto" }, - "children": [ - "vtex.menu@2.x:menu#category-apparel" - ] + "children": ["vtex.menu@2.x:menu#category-apparel"] }, "vtex.menu@2.x:menu#category-apparel": { "props": { @@ -119,42 +115,28 @@ "text": "More" } }, - "blocks": [ - "vtex.menu@2.x:submenu#more" - ] + "blocks": ["vtex.menu@2.x:submenu#more"] }, "vtex.menu@2.x:submenu#more": { "props": { "width": "100%" }, - "children": [ - "flex-layout.row#menu-more" - ] + "children": ["flex-layout.row#menu-more"] }, "flex-layout.row#menu-more": { - "children": [ - "flex-layout.col#menu-more-1", - "flex-layout.col#menu-more-2" - ] + "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"] }, "flex-layout.col#menu-more-1": { - "children": [ - "vtex.menu@2.x:menu#more" - ] + "children": ["vtex.menu@2.x:menu#more"] }, "flex-layout.col#menu-more-2": { - "children": [ - "info-card#home" - ] + "children": ["info-card#home"] }, "vtex.menu@2.x:menu#more": { "props": { "orientation": "vertical" }, - "children": [ - "menu-item#about-us", - "menu-item#faq" - ] + "children": ["menu-item#about-us", "menu-item#faq"] }, "menu-item#about-us": { "props": { diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..e79a49b 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -19,7 +19,7 @@ "fullWidth": true } }, - + "flex-layout.row#3-desktop": { "props": { "blockClass": "menu-link", @@ -80,9 +80,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png", - "width": "180", - "height": "12" + "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg", + "width": "140", + "height": "33" } }, "header-layout.mobile": { @@ -125,9 +125,9 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png", - "width": "77.5", - "height": "27.5" + "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg", + "width": "140", + "height": "33" } } } diff --git a/store/blocks/pdp/product-shelf-related.jsonc b/store/blocks/pdp/product-shelf-related.jsonc index b2d4e7d..bbc5ab6 100644 --- a/store/blocks/pdp/product-shelf-related.jsonc +++ b/store/blocks/pdp/product-shelf-related.jsonc @@ -32,6 +32,7 @@ }, "html#slider-layout": { "props": { + "blockClass": "m3-product-summary-list", "testId": "product-summary-list" }, "children": ["slider-layout#m3-carousel-products"] diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 343dcfa..105f0f2 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -10,6 +10,11 @@ .container { padding: 16px 40px; } +@media (min-width: 1920px) { + .container { + padding: 16px 360px; + } +} .container .homeIcon { display: none; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b040f82..951c0c1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,6 +12,11 @@ margin: 0; column-gap: 32px; } +@media (min-width: 1920px) { + .flexRowContent--product-main { + padding: 0 360px; + } +} @media (max-width: 1024px) { .flexRowContent--product-main { flex-direction: column; @@ -23,6 +28,11 @@ padding: 0; border-radius: 0; } +@media (min-width: 1920px) { + .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + max-width: 904px; + } +} @media (max-width: 1024px) { .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { width: 100% !important; @@ -41,6 +51,11 @@ margin: 0; gap: 32px; } +@media (min-width: 1920px) { + .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { + padding: 0 360px; + } +} @media (max-width: 1024px) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { flex-direction: column; @@ -52,6 +67,11 @@ padding: 0; border-radius: 0; } +@media (min-width: 1920px) { + .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + max-width: 904px; + } +} @media (max-width: 1024px) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { width: 100% !important; @@ -69,6 +89,7 @@ @media (max-width: 1024px) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) { max-width: none; + text-align: initial; } } .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability { @@ -113,7 +134,7 @@ } @media (min-width: 1920px) { .flexRowContent--description .stretchChildrenWidth { - width: unset !important; + width: 100% !important; } } @media (max-width: 1024px) { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index a547762..016c9be 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -19,7 +19,8 @@ .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button), .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { border: none; - background-color: #fff; + background-color: #ffffff; + color: #000000; } .quantitySelectorContainer--quantity__wrapper { diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 5c04d42..39301b0 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -20,7 +20,7 @@ } :global(.vtex-product-summary-2-x-nameContainer) { - background-color: white; + background-color: #ffffff; width: 100%; padding: 0; padding-top: 16px; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6137049..a78a587 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -7,20 +7,23 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -@media (min-width: 2000px) { +@media (max-width: 590px) { .sliderLayoutContainer--m3-carousel-products { - max-width: 1920px; - margin: 0 auto; + padding: 0 40px; + min-width: 296px; } } .sliderTrackContainer--m3-carousel-products { - max-width: 94.712%; - margin: 0 40px; + width: 100%; + padding: 0 40px; } @media (max-width: 590px) { .sliderTrackContainer--m3-carousel-products { - max-width: 78.9333333333%; + min-width: 296px; + max-width: 100%; + margin: 0 auto; + padding: 0; } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 058e6ec..1d80a66 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -113,6 +113,7 @@ :global(.vtex-store-components-3-x-container) { padding-left: 0 !important; padding-right: 0 !important; + max-width: 100% !important; } :global(.vtex-store-components-3-x-container) .productNameContainer--quickview { text-align: end; @@ -124,17 +125,19 @@ } } +.productImagesGallerySlide { + width: 100% !important; +} + .shippingContainer { display: flex; flex-direction: row; position: relative; width: 100%; } -.shippingContainer :global(.vtex-address-form__postalCode) { - display: flex; -} @media (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; width: 100%; flex-direction: column; } @@ -142,6 +145,7 @@ .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; left: 312px; + top: 0; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -152,12 +156,7 @@ text-decoration-line: underline; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { - color: #000; -} -@media (max-width: 1024px) { - .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { - position: initial; - } + color: #000000; } @media (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { @@ -165,6 +164,7 @@ right: 0; bottom: 0; left: auto; + top: auto; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { @@ -193,7 +193,7 @@ line-height: 16px; display: flex; align-items: center; - color: #afafaf; + color: #AFAFAF; } .shippingContainer :global(.vtex-button) { background: none; @@ -201,7 +201,8 @@ width: 49px; height: 49px; border-radius: 0; - background-color: #000; + background-color: #000000; + cursor: pointer; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; @@ -298,7 +299,7 @@ line-height: 16px; display: flex; align-items: center; - color: #afafaf; + color: #AFAFAF; padding: 0; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { @@ -338,7 +339,7 @@ line-height: 19px; display: flex; align-items: center; - color: #868686; + color: #afafaf; } .subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) { font-size: 0; @@ -353,7 +354,7 @@ /* or 136% */ display: flex; align-items: center; - color: #868686; + color: #afafaf; } .subscriberContainer .form { width: 100%; @@ -428,7 +429,7 @@ height: 49px; border: none; border-radius: 0; - background: #000; + background: #000000; } .subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; @@ -493,29 +494,80 @@ } .productDescriptionContainer .content { text-align: justify; + max-width: 632px; +} +@media (max-width: 1024px) { + .productDescriptionContainer .content { + max-width: none; + } +} +.productDescriptionContainer .productDescriptionText { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; - max-width: 632px; + color: #6c6c6c; } @media (min-width: 1920px) { - .productDescriptionContainer .content { + .productDescriptionContainer .productDescriptionText { max-width: 872px !important; font-size: 18px; line-height: 25px; } } @media (max-width: 1024px) { - .productDescriptionContainer .content { + .productDescriptionContainer .productDescriptionText { font-size: 14px; line-height: 19px; max-width: none; + padding-bottom: 16px; + border-bottom: 1px solid #B9B9B9; } } +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; + margin-left: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; +} +.skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; + color: #000000; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorOptionsList { + margin: 0; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -527,7 +579,7 @@ border-radius: 30px; z-index: 3; padding: 0; - border-color: #000; + border-color: #000000; top: 0; left: 0; } @@ -542,6 +594,7 @@ } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { margin-left: 0 !important; + gap: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { margin: 0; @@ -560,6 +613,22 @@ line-height: 19px; color: #929292; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #D5D5D5; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #000000; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; } @@ -612,11 +681,12 @@ border: 1px solid #989898; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { - width: 30px; - height: 30px; - transform: rotate(274deg); - left: 4px; - top: 5px; + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #D5D5D5; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { padding: 0; @@ -629,6 +699,14 @@ line-height: 19px; color: rgba(185, 185, 185, 0.6); } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #000000; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { color: #000000; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index bbd2888..b8565f3 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -13,12 +13,12 @@ } @media (min-width: 1920px) { .container--tab-product { - max-width: 1840px; + padding: 0 360px; } } .container--tab-product .listContainer--m3-tab-list-product { justify-content: space-around; - border-bottom: 1px solid #B9B9B9; + border-bottom: 1px solid #989898; margin-bottom: 32px; } @media (max-width: 1024px) { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 968d7f9..6b64c75 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,10 @@ .container { padding: 16px 40px; + @media (min-width:1920px) { + padding: 16px 360px; + } + .homeIcon { display: none; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 74ddf7d..b4654be 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,6 +4,11 @@ margin: 0; column-gap: 32px; + + @media (min-width:1920px) { + padding: 0 360px; + } + @media (max-width:1024px) { flex-direction: column; } @@ -14,6 +19,10 @@ padding: 0; border-radius: 0; + @media (min-width:1920px) { + max-width: 904px; + } + @media (max-width:1024px) { width: 100% !important; max-width: 944px; @@ -21,6 +30,7 @@ } } + // FIM PRODUCT // INICIO INDISPONIVEL @@ -37,18 +47,24 @@ margin: 0; gap: 32px; + @media (min-width:1920px) { + padding: 0 360px; + } + @media (max-width:1024px) { - // padding: 0 40px; flex-direction: column; } - // padding: 0 40px; :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { min-width: 296px; max-width: 664px; padding: 0; border-radius: 0; + @media (min-width:1920px) { + max-width: 904px; + } + @media (max-width:1024px) { width: 100% !important; max-width: 944px; @@ -60,18 +76,15 @@ font-weight: 300; font-size: 20px; line-height: 34px; - // max-width: 90%; text-align: end; @media (max-width:1024px) { max-width: none; + text-align: initial; } } - @media (max-width:1024px) { - // width: 100% !important; - // max-width: none; - } + @media (max-width:1024px) {} .flexColChild--info-availability { height: 68px; @@ -130,7 +143,7 @@ @media (min-width:1920px) { .stretchChildrenWidth { - width: unset !important; + width: 100% !important; } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 1ac41e1..edd965d 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,5 +1,5 @@ .quantitySelectorStepper { - border: 1px solid #989898; + border: 1px solid $color-gray10; max-width: 128px; padding: 3.5px 0; @@ -15,7 +15,8 @@ :global(.vtex-numeric-stepper__plus-button), :global(.vtex-numeric-stepper__minus-button) { border: none; - background-color: #fff; + background-color: $color-white; + color: $color-black; } } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index db8cf50..6bb1c5a 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -12,7 +12,7 @@ } :global(.vtex-product-summary-2-x-nameContainer) { - background-color: white; + background-color: $color-white; width: 100%; padding: 0; padding-top: 16px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index f832ce8..0971d59 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,21 +1,27 @@ .sliderLayoutContainer--m3-carousel-products { - @media (min-width:2000px) { - max-width: 1920px; - margin: 0 auto; + + @media (max-width:590px) { + padding: 0 40px; + min-width: 296px; } } .sliderTrackContainer--m3-carousel-products { - max-width: 94.712%; - // margin: 0 auto; - margin: 0 40px; + width: 100%; // margin: 0 auto; + padding: 0 40px; @media (max-width:590px) { - max-width: 78.933333333333333333333333333333%; + min-width: 296px; + max-width: 100%; + margin: 0 auto; + padding: 0; } + + } + // card .slide--m3-carousel-products { margin: 0 8px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 002a4cc..88f2b70 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -120,6 +120,7 @@ :global(.vtex-store-components-3-x-container) { padding-left: 0 !important; padding-right: 0 !important; + max-width: 100% !important; .productNameContainer--quickview { text-align: end; @@ -131,6 +132,9 @@ } } +.productImagesGallerySlide { + width: 100% !important; +} // Area de formulario do cep .shippingContainer { @@ -140,9 +144,9 @@ width: 100%; :global(.vtex-address-form__postalCode) { - display: flex; @media (max-width:768px) { + display: flex; width: 100%; flex-direction: column; } @@ -150,6 +154,7 @@ :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; left: 312px; + top: 0; font-family: $font-family; font-style: normal; font-weight: 400; @@ -160,18 +165,19 @@ text-decoration-line: underline; :last-child { - color: #000; + color: $color-black; } - @media (max-width:1024px) { - position: initial; - } + // @media (max-width:1024px) { + // position: initial; + // } @media (max-width:768px) { position: absolute; right: 0; bottom: 0; left: auto; + top: auto; } :global(.vtex__icon-external-link) { @@ -185,7 +191,7 @@ } :global(.vtex-input-prefix__group) { - border: 1px solid #cccccc; + border: 1px solid $color-gray12; border-radius: 0; max-width: 231px; height: 49px; @@ -205,7 +211,7 @@ display: flex; align-items: center; - color: #afafaf; + color: $color-gray7; } @@ -217,7 +223,8 @@ width: 49px; height: 49px; border-radius: 0; - background-color: #000; + background-color: $color-black; + cursor: pointer; :global(.vtex-button__label) { font-size: 0; @@ -234,7 +241,7 @@ display: flex; align-items: center; - color: #ffffff; + color: $color-white; } } } @@ -267,7 +274,7 @@ line-height: 19px; text-transform: uppercase; /* identical to box height */ - color: #202020; + color: $color-gray14; } .shippingTableHeadDeliveryName { @@ -299,7 +306,7 @@ text-transform: uppercase; /* identical to box height */ - color: #202020; + color: $color-gray14 } } } @@ -329,7 +336,7 @@ display: flex; align-items: center; - color: #afafaf; + color: $color-gray7; padding: 0; } @@ -388,7 +395,7 @@ display: flex; align-items: center; - color: #868686; + color: $color-gray13; } } @@ -407,7 +414,7 @@ display: flex; align-items: center; - color: #868686; + color: $color-gray13; } } @@ -493,7 +500,7 @@ border: none; border-radius: 0; - background: #000; + background: $color-black; :global(.vtex-button__label) { font-size: 0; @@ -510,7 +517,7 @@ display: flex; align-items: center; - color: #ffffff; + color: $color-white; @media (min-width:1920px) { font-weight: 600; @@ -561,7 +568,6 @@ // FIM INDISPONIVEL // INICIO DESCRIÇÃO -.flexRow--description {} .productDescriptionContainer { .productDescriptionTitle { @@ -575,13 +581,23 @@ .content { text-align: justify; + max-width: 632px; + + @media (max-width:1024px) { + max-width: none; + } + } + + .productDescriptionText { font-family: $font-family; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; - color: $color-gray6; - max-width: 632px; + color: $color-gray; + + + @media (min-width:1920px) { @@ -595,117 +611,68 @@ font-size: 14px; line-height: 19px; max-width: none; - // max-width: none !important; + padding-bottom: 16px; + border-bottom: 1px solid $color-gray11; + } } } -// SKU E TAMANHOS -// .skuSelectorContainer { -// display: flex; -// flex-direction: column-reverse; -// .skuSelectorSubcontainer--cor { -// .skuSelectorName { -// font-size: 0; +.skuSelectorSubcontainer--tamanho { -// margin-left: 16px; + .skuSelectorName { + font-size: 0; -// &::after { -// visibility: visible; -// display: block; -// content: "OUTRAS CORES:"; -// font-size: 14px; -// } -// } + margin-left: 16px; -// .skuSelectorSelectorImageValue, -// .skuSelectorNameSeparator { -// display: none; -// } + &::after { + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + } + } -// .frameAround { -// border-radius: 30px; -// } + .frameAround { + // border: 1px solid $color-gray10; + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; + } -// .skuSelectorItemImageValue, -// .skuSelectorInternalBox { -// border-radius: 21px; -// color: $color-black; -// } -// } + .skuSelectorInternalBox { + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; + color: $color-black; + border: 1px solid $color-gray10; + } -// .diagonalCross { -// top: 0px; -// right: 10px; -// bottom: 0px; -// left: 10px; -// transform: rotateY(180deg); -// color: black; -// } - -// .skuSelectorSubcontainer--tamanho { - -// .skuSelectorName { -// font-size: 0; - -// margin-left: 16px; - -// &::after { -// visibility: visible; -// display: block; -// content: "OUTROS TAMANHOS:"; -// font-size: 14px; -// } -// } - -// .frameAround { -// // border: 1px solid #989898; -// width: 40px; -// height: 40px; -// border-radius: 30px; -// top: 0; -// left: 0; -// right: 0; -// } - -// .skuSelectorInternalBox { -// margin: auto; -// padding: 0; -// width: 40px; -// height: 40px; -// border-radius: 30px; -// color: $color-black; -// border: 1px solid #989898; -// } - -// .skuSelectorItemTextValue { -// padding: 0; -// margin: auto; -// font-family: $font-family; -// font-style: normal; -// font-weight: 400; -// font-size: 14px; -// line-height: 19px; + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; -// color: rgba(185, 185, 185, 0.6); -// } -// } + color: rgba(185, 185, 185, 0.6); + } +} -// .valueWrapper .skuSelectorItemTextValue { -// margin-right: 5px; -// } -// .frameAround { -// border-color: #000; -// z-index: 9; -// } -// } +.skuSelectorOptionsList { + margin: 0; +} -// .skuSelectorOptionsList { -// margin: 0; -// } .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -717,7 +684,7 @@ border-radius: 30px; z-index: 3; padding: 0; - border-color: #000; + border-color: $color-black; top: 0; left: 0; } @@ -734,6 +701,7 @@ .skuSelectorOptionsList { margin-left: 0 !important; + gap: 16px; .skuSelectorItem { margin: 0; @@ -753,7 +721,32 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $color-gray6 + } + } + } + + .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #D5D5D5; + + } + + .skuSelectorItem--selected { + + .skuSelectorInternalBox { + + .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: $color-black; } } } @@ -776,11 +769,13 @@ font-size: 14px; line-height: 19px; content: 'OUTROS TAMANHOS: '; - color: #929292; + color: $color-gray6 } } } + + .skuSelectorOptionsList { margin: 0; margin-left: 0; @@ -793,7 +788,7 @@ margin: 0; .frameAround--sku-selector { - border-color: #000000; + border-color: $color-black; border-width: 2px; width: 40px; height: 40px; @@ -813,14 +808,15 @@ border-radius: 100%; width: 40px; height: 40px; - border: 1px solid #989898; + border: 1px solid $color-gray10; .diagonalCross { - width: 30px; - height: 30px; - transform: rotate(274deg); - left: 4px; - top: 5px; + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: #D5D5D5; } @@ -841,9 +837,20 @@ } .skuSelectorItem--selected { + .skuSelectorInternalBox { + + .diagonalCross { + top: 2px; + right: 10px; + bottom: 2px; + left: 10px; + transform: rotateY(180deg); + color: $color-black; + } + .skuSelectorItemTextValue { - color: #000000; + color: $color-black; } } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 7588cb4..8b186d0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,20 +1,18 @@ .container--tab-product { width: 100%; - // max-width: 94.44%; - // margin: 0 auto; padding: 0 40px; - @media (min-width:1920px) { - max-width: 1840px; + @media (min-width:1920px) { + padding: 0 360px; } .listContainer--m3-tab-list-product { justify-content: space-around; - border-bottom: 1px solid #B9B9B9; + border-bottom: 1px solid $color-gray10; margin-bottom: 32px; @media (max-width:1024px) { @@ -67,7 +65,7 @@ :global(.vtex-button) { background-color: $color-white; border: none; - border-bottom: 2px solid #000000; + border-bottom: 2px solid $color-black; border-radius: 0; position: relative; top: 2px; @@ -85,7 +83,7 @@ font-size: 18px; line-height: 38px; - color: #000000; + color: $color-black; @media (max-width:1024px) { padding-left: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 479ce1a..4788ce0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,10 @@ $color-gray7: #AFAFAF; $color-gray8: #BFBFBF; $color-gray9: #BABABA; $color-gray10: #989898; +$color-gray11: #B9B9B9; +$color-gray12: #cccccc; +$color-gray13: #afafaf; +$color-gray14: #202020; $color-blue: #4267b2;