From e29bc78c967b0d7a49795f9ca07e60814cf36643 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 7 Feb 2023 11:11:28 -0300 Subject: [PATCH] feat(pdp): adiciona espacamento das opcoes de frete --- styles/configs/style.json | 2 +- styles/css/vtex.store-components.css | 45 +++++++++++-------- .../pages/product/vtex.store-components.scss | 36 ++++++++------- styles/sass/utils/_vars.scss | 2 + 4 files changed, 50 insertions(+), 35 deletions(-) diff --git a/styles/configs/style.json b/styles/configs/style.json index 8eeed02..5d80c60 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -339,7 +339,7 @@ "letterSpacing": "0" }, "code": { - "fontFamily": "Consolas, monaco, monospace", + "fontFamily": "Open Sans, Consolas, monaco, monospace", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f65339a..567ac08 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .container { margin: 0; @@ -19,6 +20,7 @@ .carouselGaleryThumbs { margin-top: 16px; + margin-bottom: 16px; display: block; } @@ -42,6 +44,7 @@ max-width: 90px; width: 90px !important; margin-right: 16px; + margin-bottom: 0; } .productImagesGallerySlide { @@ -238,8 +241,9 @@ color: #afafaf; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding-top: 8px; position: absolute; - top: 28px; + top: 32px; right: -180px; font-weight: 400; font-size: 12px; @@ -281,6 +285,8 @@ .shippingTable { border: none; + margin: 16px 0; + padding: 0; } .shippingTableRadioBtn { @@ -307,10 +313,12 @@ } .shippingTableHead .shippingTableHeadDeliveryName { width: 110px; + margin-right: 32px; } @media screen and (max-width: 350px) { .shippingTableHead .shippingTableHeadDeliveryName { width: 90px; + margin-right: 8px; } } .shippingTableHead .shippingTableHeadDeliveryEstimate { @@ -318,12 +326,13 @@ } .shippingTableHead .shippingTableHeadDeliveryPrice { display: flex; - width: 110px; + width: 48px; + margin-right: 32px; font-size: 0; } @media screen and (max-width: 350px) { .shippingTableHead .shippingTableHeadDeliveryPrice { - width: 56px; + margin-right: 8px; } } .shippingTableHead .shippingTableHeadDeliveryPrice::after { @@ -343,10 +352,18 @@ .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName, .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice, .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { - padding: 15px 4px 0 0; + margin-right: 32px; + padding: 15px 0 0 0; +} +@media screen and (max-width: 350px) { + .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName, + .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice, + .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + margin-right: 8px; + } } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { - min-width: 112px; + min-width: 110px; width: 110px; } @media screen and (max-width: 350px) { @@ -357,23 +374,13 @@ } } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { - width: 110px; -} -@media screen and (max-width: 768px) { - .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { - width: 70px; - min-width: 72px; - } -} -@media screen and (max-width: 350px) { - .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { - min-width: 56px; - width: 56px; - padding-right: 0; - } + min-width: 48px; + width: 48px; + padding-right: 0; } .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { padding-right: 0; + margin-right: 0; order: 3; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f6548aa..7685cd6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,6 +10,7 @@ .carouselGaleryThumbs { margin-top: 16px; + margin-bottom: 16px; display: block; } @@ -33,6 +34,7 @@ max-width: 90px; width: 90px !important; margin-right: 16px; + margin-bottom: 0; } .productImagesGallerySlide { @@ -274,8 +276,9 @@ } :global(.vtex-address-form__postalCode-forgottenURL) { + padding-top: 8px; position: absolute; - top: 28px; + top: 32px; right: -180px; font-weight: 400; font-size: 12px; @@ -323,6 +326,8 @@ .shippingTable { border: none; + margin: 16px 0; + padding: 0; } .shippingTableRadioBtn { @@ -351,8 +356,10 @@ .shippingTableHeadDeliveryName { width: 110px; + margin-right: 32px; @media screen and (max-width: 350px) { width: 90px; + margin-right: 8px; } } @@ -362,10 +369,11 @@ .shippingTableHeadDeliveryPrice { display: flex; - width: 110px; + width: 48px; + margin-right: 32px; font-size: 0; @media screen and (max-width: 350px) { - width: 56px; + margin-right: 8px; } &::after { content: "FRETE"; @@ -388,11 +396,15 @@ .shippingTableCellDeliveryName, .shippingTableCellDeliveryPrice, .shippingTableCellDeliveryEstimate { - padding: 15px 4px 0 0; + margin-right: 32px; + padding: 15px 0 0 0; + @media screen and (max-width: 350px) { + margin-right: 8px; + } } .shippingTableCellDeliveryName { - min-width: 112px; + min-width: 110px; width: 110px; @media screen and (max-width: 350px) { width: 90px; @@ -402,20 +414,14 @@ } .shippingTableCellDeliveryPrice { - width: 110px; - @media screen and (max-width: 768px) { - width: 70px; - min-width: 72px; - } - @media screen and (max-width: 350px) { - min-width: 56px; - width: 56px; - padding-right: 0; - } + min-width: 48px; + width: 48px; + padding-right: 0; } .shippingTableCellDeliveryEstimate { padding-right: 0; + margin-right: 0; order: 3; } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 2e8afbe..f1a3197 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); + $color-black: #292929; $color-black-100: #000000; $color-black2: #202020;