From f56b97418e0edb107659fde2b00a05c6e1bfd682 Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Sat, 28 Jan 2023 19:10:03 -0300 Subject: [PATCH] feat(frete): Adiciona css da parte de consuta de entrega --- styles/configs/style.json | 10 +- styles/css/vtex.store-components.css | 78 ++++++++++++++- .../pages/product/vtex.store-components.scss | 98 ++++++++++++++++++- 3 files changed, 171 insertions(+), 15 deletions(-) diff --git a/styles/configs/style.json b/styles/configs/style.json index 4d1c215..f1383ea 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -23,29 +23,29 @@ ], "customMedia": [ { - "s": "375px" + "s": 48 }, { "ns": { - "value": "1024px", + "value": 48, "minWidth": true } }, { "m": { - "value": "1024px", + "value": 48, "minWidth": true } }, { "l": { - "value": "1024px", + "value": 64, "minWidth": true } }, { "xl": { - "value": "2501px", + "value": 120, "minWidth": true } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c91b2a3..996df71 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -168,6 +168,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; + padding: 0; align-items: center; gap: 32px; } @@ -209,8 +210,8 @@ background-color: #000000; border: 0; position: absolute; - bottom: 32px; - left: 230px; + bottom: 0; + left: 232px; } .shippingContainer :global(.vtex-button__label) { font-size: 0; @@ -224,6 +225,73 @@ align-items: center; color: #FFFFFF; } +.shippingContainer :global(.vtex-input__error) { + position: absolute; + font-size: 10px; + margin-top: 5px; +} + +.shippingTable { + border: 0; + padding: 0; + margin: 16px 0 0; +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + justify-content: flex-start; + align-items: center; + text-align: start; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after { + content: "Frete"; + font-size: 14px; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableCellDeliveryName { + display: flex; + width: 90px; + margin-right: 32px; + text-align: start; + order: 1; +} +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableCellDeliveryEstimate { + display: flex; + width: 136px; + text-align: start; + order: 3; +} +.shippingTable .shippingTableHeadDeliveryPrice, +.shippingTable .shippingTableCellDeliveryPrice { + display: flex; + width: 48px; + margin-right: 32px; + text-align: start; + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + margin-top: 15px; +} +.shippingTable .shippingTableBody .shippingTableCell { + font-size: 12px; + line-height: 16px; + padding: 0; + color: #AFAFAF; +} +.shippingTable .shippingTableBody .shippingTableRadioBtn { + display: none; +} @media screen and (max-width: 1024px) { .productImageTag--main { @@ -233,7 +301,7 @@ text-align: start; } } -@media screen and (max-width: 375px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { flex-direction: column; align-items: flex-end; @@ -247,7 +315,7 @@ padding: 0; } .shippingContainer :global(.vtex-button) { - bottom: 56px; - left: 245px; + bottom: 24px; + left: calc(100% - 48px); } } \ 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 a920169..72d1f0a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -175,6 +175,7 @@ :global(.vtex-address-form__postalCode) { display: flex; + padding: 0; align-items: center; gap: 32px; } @@ -225,8 +226,9 @@ background-color: #000000; border: 0; position: absolute; - bottom: 32px; - left: 230px; + bottom: 0; + left: 232px; + } :global(.vtex-button__label) { @@ -243,8 +245,94 @@ color: #FFFFFF; } } + + :global(.vtex-input__error) { + position: absolute; + font-size: 10px; + margin-top: 5px; + } + + } +.shippingTable { + border: 0; + padding: 0; + margin: 16px 0 0; + + .shippingTableHead { + display: block; + + .shippingTableRow { + display: flex; + justify-content: flex-start; + align-items: center; + text-align: start; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; + } + + .shippingTableHeadDeliveryPrice { + font-size: 0; + + &::after { + content: "Frete"; + font-size: 14px; + } + } + } + + + + .shippingTableHeadDeliveryName, + .shippingTableCellDeliveryName { + display: flex; + width: 90px; + margin-right: 32px; + text-align: start; + order: 1; + } + + .shippingTableHeadDeliveryEstimate, + .shippingTableCellDeliveryEstimate { + display: flex; + width: 136px; + text-align: start; + order: 3; + } + + .shippingTableHeadDeliveryPrice, + .shippingTableCellDeliveryPrice { + display: flex; + width: 48px; + margin-right: 32px; + text-align: start; + order: 2; + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + margin-top: 15px; + } + + .shippingTableCell { + font-size: 12px; + line-height: 16px; + padding: 0; + color: #AFAFAF; + } + + .shippingTableRadioBtn { + display: none; + } + } +} + +@media screen and (min-width: 1920px) {} + @media screen and (max-width: 1024px) { @@ -257,7 +345,7 @@ } } -@media screen and (max-width: 375px) { +@media screen and (max-width: 768px) { .shippingContainer { :global(.vtex-address-form__postalCode) { flex-direction: column; @@ -275,8 +363,8 @@ } :global(.vtex-button) { - bottom: 56px; - left: 245px; + bottom: 24px; + left: calc(100% - 48px); } } }