From ea5740cfd6c10c845e9cc1b6c56c103cfa817788 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Thu, 9 Feb 2023 23:51:42 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20corre=C3=A7=C3=A3o=20geral=20de=20respon?= =?UTF-8?q?sividade=20e=20elementos=20da=20pagina=20de=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 6 -- .../components/PixDiscount/styles.module.css | 7 +- store/blocks/pdp/product.jsonc | 2 +- styles/configs/font-faces.scss | 2 +- styles/css/vtex.breadcrumb.css | 11 ++- styles/css/vtex.flex-layout.css | 52 ++++++++++---- styles/css/vtex.product-quantity.css | 24 +++++-- styles/css/vtex.product-summary.css | 2 +- styles/css/vtex.slider-layout.css | 23 ++++++- styles/css/vtex.stack-layout.css | 2 +- styles/css/vtex.store-components.css | 53 +++++++++------ styles/css/vtex.tab-layout.css | 10 +++ .../sass/pages/product/vtex.breadcrumb.scss | 9 ++- .../sass/pages/product/vtex.flex-layout.scss | 54 ++++++++++----- .../pages/product/vtex.product-quantity.scss | 22 ++++-- .../pages/product/vtex.product-summary.scss | 2 +- .../pages/product/vtex.slider-layout.scss | 17 ++++- .../pages/product/vtex.store-components.scss | 68 +++++++++++++------ .../sass/pages/product/vtex.tab-layout.scss | 6 ++ 19 files changed, 267 insertions(+), 105 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 5278ee3..7d0117b 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,7 +1,6 @@ /* CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO */ - [class*="html--buy-button"] :global(.vtex-button) { min-height: 49px; padding: 12px 64px; @@ -33,11 +32,6 @@ } } -[class*="html--product-quantity"] { - width: 128px; - margin-right: 10px; -} - /* DESCRIÇÃO DO PRODUTO SELECIONADO */ diff --git a/react/components/PixDiscount/styles.module.css b/react/components/PixDiscount/styles.module.css index 48a71c8..75d8e17 100644 --- a/react/components/PixDiscount/styles.module.css +++ b/react/components/PixDiscount/styles.module.css @@ -1,12 +1,13 @@ .wrapper { display: flex; + align-items: center; margin: 8px 0 16px 0; height: 39px; } .container-img{ - margin-right: 26px; - display: flex; - align-items: center; + width: 66px; + margin-right: 26px; + height: 24px; } .figure-pix{ margin: 0; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 66ef4be..d21bd09 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -412,7 +412,7 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "blockClass": "product-name" }, "children": ["vtex.store-components:product-name"] }, diff --git a/styles/configs/font-faces.scss b/styles/configs/font-faces.scss index 6db8519..6b6e852 100644 --- a/styles/configs/font-faces.scss +++ b/styles/configs/font-faces.scss @@ -1,4 +1,4 @@ @font-face { font-family: "Open Sans", "sans-serif"; - src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); + src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap"); } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 610bc6f..9ef9ca1 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,7 +9,16 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 16px 40px; + padding: 0; + margin: 0 40px 16px 40px; + height: 20.12px; + display: flex; + align-items: center; +} +@media only screen and (min-width: 1921px) { + .container { + margin: 0 360px 16px 360px; + } } .container .homeLink { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ab160a8..80be301 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -14,42 +14,63 @@ } /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ +.flexRow--main { + padding: 0 40px; +} +@media only screen and (min-width: 1921px) { + .flexRow--main { + padding: 0 360px; + } +} @media only screen and (max-width: 1024px) { - .flexRowContent--main { + .flexRow--main .flexRowContent--main { display: block; } } @media only screen and (max-width: 1024px) { - .flexRowContent--main .stretchChildrenWidth { + .flexRow--main .flexRowContent--main .stretchChildrenWidth { width: 100% !important; } } -.flexRowContent--main .stretchChildrenWidth .flexCol--stack { - padding-left: 40px; -} @media only screen and (max-width: 1024px) { - .flexRowContent--main .stretchChildrenWidth .flexCol--stack { - padding: 0 40px; + .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack { width: 100%; } } -.flexRowContent--main .stretchChildrenWidth .flexCol--right-col { - padding-right: 40px; +.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack { + margin-right: 16px; +} +@media only screen and (max-width: 1024px) { + .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack { + margin: 0; + } +} +.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col { margin-left: 16px; } @media only screen and (max-width: 1024px) { - .flexRowContent--main .stretchChildrenWidth .flexCol--right-col { - padding: 0 40px; - margin-left: 0; + .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col { + margin: 0; } } +.flexRow--product-name { + width: 100%; + min-height: 34px; + margin-bottom: 8px; +} + /* ASSINANTE DE PRODUTO INDISPONIVEL */ .flexRowContent--product-availability { padding: 0; margin: 0; padding: 0 40px; } +@media only screen and (min-width: 1921px) { + .flexRowContent--product-availability { + padding: 0 360px; + } +} @media only screen and (max-width: 1024px) { .flexRowContent--product-availability { display: block; @@ -103,7 +124,12 @@ } @media only screen and (max-width: 1024px) { .flexRow--newsletter-container { - margin-top: 34px; + margin-top: 64px; + } +} +@media only screen and (max-width: 768px) { + .flexRow--newsletter-container { + margin-top: 32px; } } .flexRow--newsletter-container .flexRowContent--newsletter-container { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 8fa6cf2..bdd40fc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,7 +10,7 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - width: 100%; + width: 128px; margin: 0 10px 0 0; } @media only screen and (max-width: 768px) { @@ -21,9 +21,6 @@ .quantitySelectorContainer .quantitySelectorTitle { display: none; } -.quantitySelectorContainer .quantitySelectorStepper { - height: 49px; -} .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { width: 31.6px; height: 49px; @@ -39,20 +36,33 @@ border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #fff; - font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; } +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) { + font-weight: 400; + width: 10px; + height: 12px; + align-items: center; + display: flex; + justify-content: space-evenly; +} .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { height: 49px; - width: 10px; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #fff; - font-weight: 400; font-size: 16px; line-height: 22px; color: #000000; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) { + font-weight: 400; + width: 10px; + height: 12px; + align-items: center; + display: flex; + justify-content: space-evenly; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 05173a4..36fcad9 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -32,7 +32,7 @@ } @media only screen and (max-width: 768px) { .containerNormal .element .imageContainer--image-prateleira { - height: 124.81px; + height: 124.82px; } } .containerNormal .element .imageContainer--image-prateleira .imageNormal { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index a9810ba..e12ff5d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,6 +11,12 @@ padding-left: 40px !important; padding-right: 40px !important; } +@media only screen and (min-width: 1921px) { + .sliderLayoutContainer--prateleira { + padding-left: 360px !important; + padding-right: 360px !important; + } +} .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { padding: 0 19.2px 49px 19.2px; } @@ -21,7 +27,7 @@ } @media only screen and (max-width: 768px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - padding: 0 14.7px 33px 14.7px; + padding: 0 14.7px 32px 14.7px; } } .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { @@ -35,6 +41,7 @@ @media only screen and (max-width: 768px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { margin: 0 4px; + width: 7.1111% !important; } } @media only screen and (max-width: 768px) { @@ -60,10 +67,17 @@ visibility: hidden; margin: 0 0 0 40px; padding: 0; - height: 29.6px; + height: 29.61px; width: 11.21px; } +@media only screen and (min-width: 1921px) { + .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira { + margin: 0 0 0 360px; + } +} .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before { + width: 11.21px; + height: 29.61px; visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); } @@ -74,6 +88,11 @@ height: 29.6px; width: 11.21px; } +@media only screen and (min-width: 1921px) { + .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira { + margin: 0 360px 0 0; + } +} .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..6e41b0e 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,6 +1,6 @@ .stackItem--product { width: 100%; - min-height: 257px + min-height: 100% } .stackItem--quickview { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f0cf8df..b9dc8d2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -21,25 +21,18 @@ margin: 0; } } -.productImagesGallerySlide .productImage { - margin-right: 16px; -} -@media only screen and (max-width: 1024px) { - .productImagesGallerySlide .productImage { - margin: 0; - } -} -.productImagesGallerySlide .productImage .productImageTag--main { +.productImagesGallerySlide .productImageTag--main { max-height: 100% !important; } /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { - margin: 16px 0; + margin: 16px 16px 0 0; } -@media only screen and (max-width: 768px) { +@media only screen and (max-width: 1024px) { .carouselGaleryThumbs { display: block; + margin: 16px 0 32px 0; } } .carouselGaleryThumbs .thumbImg { @@ -58,7 +51,7 @@ /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ .productNameContainer--quickview { - text-align: end; + text-align: right; font-weight: 300; font-size: 20px; line-height: 34px; @@ -117,26 +110,30 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector { border: 2px solid #000000; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross { + margin: 6px; + width: 36px; + background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%); +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; - font-family: "Open Sans", sans-serif; font-weight: 400; line-height: 19px; font-size: 14px; color: #929292; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { - margin: 8px 0 0 0; - height: 40px; + min-height: 40px; + margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector { - margin: 0 16px 0 0; + margin: 8px 16px 0 0; width: 40px; height: 40px; } @@ -173,6 +170,11 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { color: #000000 !important; } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross { + margin: 6px; + width: 30px; + background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%); +} .skuSelectorContainer .skuSelectorTextContainer { display: none; } @@ -316,6 +318,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingContainer { display: block; max-width: 296px; + width: 100%; } } .shippingContainer :global(.vtex-address-form__postalCode) { @@ -455,14 +458,18 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ flex-direction: row; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { - margin-right: 39px; + min-width: 80px; + height: 19px; + margin-right: 32px; font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; + text-align: start; } @media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + min-width: 69px; margin-right: 32px; } } @@ -476,7 +483,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { font-size: 0; - margin-right: 30px; + min-width: 50px; + margin-right: 32px; } @media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -495,8 +503,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ flex-direction: row; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { - width: 82px; - margin-right: 28px; + min-width: 82px; + text-transform: capitalize; + margin-right: 32px; font-weight: 400; font-size: 12px; line-height: 16px; @@ -516,8 +525,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ color: #afafaf; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { - width: 50px; - margin-right: 28px; + min-width: 50px; + margin-right: 32px; font-weight: 400; font-size: 12px; line-height: 16px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 8269c67..79944ab 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,6 +11,11 @@ padding: 0 40px; margin: 16px 0; } +@media only screen and (min-width: 1921px) { + .container--description { + padding: 0 360px; + } +} .container--description .listContainer { display: flex; padding: 0 64px; @@ -64,6 +69,11 @@ text-transform: capitalize; border-bottom: 2px solid transparent; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + border-bottom: none; + } +} @media only screen and (min-width: 1921px) { .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { font-size: 24px; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index c54eb2c..217def0 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,5 +1,12 @@ .container { - padding: 16px 40px; + padding: 0; + margin: 0 40px 16px 40px; + height: 20.12px; + display: flex; + align-items: center; + @include mq(xl, min) { + margin: 0 360px 16px 360px; + } .homeLink { display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7b31771..a4e5a10 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,37 +4,54 @@ } /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ -.flexRowContent--main { - @include mq(md, max) { - display: block; +.flexRow--main { + padding: 0 40px; + @include mq(xl, min) { + padding: 0 360px; } - .stretchChildrenWidth { + .flexRowContent--main { @include mq(md, max) { - width: 100% !important; + display: block; } - .flexCol--stack { - padding-left: 40px; + .stretchChildrenWidth { @include mq(md, max) { - padding: 0 40px; - width: 100%; + width: 100% !important; } - } - .flexCol--right-col { - padding-right: 40px; - margin-left: 16px; - @include mq(md, max) { - padding: 0 40px; - margin-left: 0; + .flexCol--stack { + @include mq(md, max) { + width: 100%; + } + .flexColChild--stack { + margin-right: 16px; + @include mq(md, max) { + margin: 0; + } + } + } + .flexCol--right-col { + margin-left: 16px; + @include mq(md, max) { + margin: 0; + } } } } } +.flexRow--product-name { + width: 100%; + min-height: 34px; + margin-bottom: 8px; +} + /* ASSINANTE DE PRODUTO INDISPONIVEL */ .flexRowContent--product-availability { padding: 0; margin: 0; padding: 0 40px; + @include mq(xl, min) { + padding: 0 360px; + } @include mq(md, max) { display: block; } @@ -80,7 +97,10 @@ background-color: $color-black-padrao; margin-top: 64px; @include mq(md, max) { - margin-top: 34px; + margin-top: 64px; + } + @include mq(sm, max) { + margin-top: 32px; } .flexRowContent--newsletter-container { display: flex; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 82e050a..c37437c 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,7 +1,7 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - width: 100%; + width: 128px; margin: 0 10px 0 0; @include mq(sm, max) { margin: 0 0 10px 0; @@ -10,7 +10,6 @@ display: none; } .quantitySelectorStepper { - height: 49px; :global(.vtex-numeric-stepper__input) { width: 31.6px; height: 49px; @@ -26,22 +25,35 @@ border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: $color-white; - font-weight: 400; font-size: 16px; line-height: 22px; color: $color-black-padrao; + :global(.vtex-numeric-stepper__plus-button__text) { + font-weight: 400; + width: 10px; + height: 12px; + align-items: center; + display: flex; + justify-content: space-evenly; + } } :global(.vtex-numeric-stepper__minus-button) { height: 49px; - width: 10px; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: $color-white; - font-weight: 400; font-size: 16px; line-height: 22px; color: $color-black-padrao; + :global(.vtex-numeric-stepper__minus-button__text) { + font-weight: 400; + width: 10px; + height: 12px; + align-items: center; + display: flex; + justify-content: space-evenly; + } } } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 70d1bd0..e30b603 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -16,7 +16,7 @@ height: 291.21px; } @include mq(sm, max) { - height: 124.81px; + height: 124.82px; } .imageNormal { height: 100%; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 572cc4e..6a939f5 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,13 +1,17 @@ .sliderLayoutContainer--prateleira { padding-left: 40px !important; padding-right: 40px !important; + @include mq(xl, min) { + padding-left: 360px !important; + padding-right: 360px !important; + } .sliderTrackContainer--prateleira { padding: 0 19.2px 49px 19.2px; @include mq(md, max) { padding: 0 17.2px 41px 17.2px; } @include mq(sm, max) { - padding: 0 14.7px 33px 14.7px; + padding: 0 14.7px 32px 14.7px; } .slide--prateleira { margin: 0 8px; @@ -16,6 +20,7 @@ } @include mq(sm, max) { margin: 0 4px; + width: 7.1111% !important; } } @@ -44,9 +49,14 @@ visibility: hidden; margin: 0 0 0 40px; padding: 0; - height: 29.6px; + height: 29.61px; width: 11.21px; + @include mq(xl, min) { + margin: 0 0 0 360px; + } &::before { + width: 11.21px; + height: 29.61px; visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); } @@ -58,6 +68,9 @@ padding: 0; height: 29.6px; width: 11.21px; + @include mq(xl, min) { + margin: 0 360px 0 0; + } &::after { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 881ac14..ad2fdbe 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,22 +10,18 @@ @include mq(md, max) { margin: 0; } - .productImage { - margin-right: 16px; - @include mq(md, max) { - margin: 0; - } - .productImageTag--main { - max-height: 100% !important; - } + .productImageTag--main { + max-height: 100% !important; } } /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { - margin: 16px 0; - @include mq(sm, max) { + margin: 16px 16px 0 0; + + @include mq(md, max) { display: block; + margin: 16px 0 32px 0; } .thumbImg { @@ -46,7 +42,7 @@ /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ .productNameContainer--quickview { - text-align: end; + text-align: right; font-weight: 300; font-size: 20px; line-height: 34px; @@ -101,6 +97,18 @@ .frameAround--sku-selector { border: 2px solid $color-black-padrao; } + .diagonalCross { + margin: 6px; + width: 36px; + background-image: linear-gradient( + to top right, + transparent 44%, + $color-black-padrao 48%, + currentColor 48%, + currentColor 0, + transparent 0% + ); + } } } } @@ -111,20 +119,19 @@ margin-bottom: 10px; &::before { content: "OUTROS TAMANHOS:"; - font-family: "Open Sans", sans-serif; font-weight: 400; line-height: 19px; font-size: 14px; color: $color-gray-6; } .skuSelectorNameContainer { - margin: 8px 0 0 0; - height: 40px; + min-height: 40px; + margin: 0; .skuSelectorOptionsList { margin: 0; .skuSelectorItem--sku-selector { - margin: 0 16px 0 0; + margin: 8px 16px 0 0; width: 40px; height: 40px; .frameAround--sku-selector { @@ -164,6 +171,18 @@ .skuSelectorItemTextValue { color: $color-black-padrao !important; } + .diagonalCross { + margin: 6px; + width: 30px; + background-image: linear-gradient( + to top right, + transparent 44%, + $color-black-padrao 48%, + currentColor 48%, + currentColor 0, + transparent 0% + ); + } } } } @@ -317,6 +336,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ @include mq(sm, max) { display: block; max-width: 296px; + width: 100%; } :global(.vtex-address-form__postalCode) { display: flex; @@ -445,12 +465,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ display: flex; flex-direction: row; .shippingTableHeadDeliveryName { - margin-right: 39px; + min-width: 80px; + height: 19px; + margin-right: 32px; font-weight: 400; font-size: 14px; line-height: 19px; color: $color-black2; + text-align: start; @include mq(sm, max) { + min-width: 69px; margin-right: 32px; } } @@ -465,7 +489,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingTableHeadDeliveryPrice { font-size: 0; - margin-right: 30px; + min-width: 50px; + margin-right: 32px; @include mq(sm, max) { margin-right: 32px; } @@ -485,8 +510,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ display: flex; flex-direction: row; .shippingTableCellDeliveryName { - width: 82px; - margin-right: 28px; + min-width: 82px; + text-transform: capitalize; + margin-right: 32px; font-weight: 400; font-size: 12px; line-height: 16px; @@ -506,8 +532,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ } .shippingTableCellDeliveryPrice { - width: 50px; - margin-right: 28px; + min-width: 50px; + margin-right: 32px; font-weight: 400; font-size: 12px; line-height: 16px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index fd46af1..b24ce29 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,6 +1,9 @@ .container--description { padding: 0 40px; margin: 16px 0; + @include mq(xl, min) { + padding: 0 360px; + } .listContainer { display: flex; padding: 0 64px; @@ -44,6 +47,9 @@ line-height: 38px; text-transform: capitalize; border-bottom: 2px solid transparent; + @include mq(md, max) { + border-bottom: none; + } @include mq(xl, min) { font-size: 24px; line-height: 38px;