diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 88dfd3e..3a5b238 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -136,7 +136,6 @@ "rich-text#titleCep", "shipping-simulator" // "share#default" - ] }, "shipping-simulator":{ diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d40e551..62007a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -229,6 +229,12 @@ width: 409px; height: 49px; } +@media (max-width: 560px) { + .shippingContainer { + width: 296px; + margin-bottom: 40px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; padding: 0%; @@ -238,6 +244,11 @@ width: 280px; height: 49px; } +@media (max-width: 560px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + width: 247px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { display: none; } @@ -260,6 +271,12 @@ position: absolute; right: -57px; } +@media (max-width: 560px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + top: 45px; + right: -4px; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } @@ -280,4 +297,96 @@ line-height: 19px; color: #ffffff; padding: 0; +} + +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + margin-left: 7px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + width: 108px; + text-transform: uppercase; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + text-transform: uppercase; + width: 136px; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-transform: uppercase; + font-size: 0; + width: 62px; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-size: 14px; +} +.shippingTable .shippingTableHead .shippingTableBody { + display: block; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableBody .shippingTableCellDeliveryName { + width: 108px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTable .shippingTableBody .shippingTableCellDeliveryPrice { + width: 62px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTable .shippingTableBody .shippingTableCellDeliveryEstimate { + width: 136px; + display: flex; + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; } \ 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 a9ee1dd..75c0e36 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -209,6 +209,10 @@ position: relative; width: 409px; height: 49px; + @media (max-width: 560px) { + width: 296px; + margin-bottom: 40px; + } :global(.vtex-address-form__postalCode) { display: flex; padding: 0%; @@ -216,6 +220,9 @@ :global(.vtex-input) { width: 280px; height: 49px; + @media (max-width: 560px) { + width: 247px; + } :global(.vtex-input__label) { display: none; } @@ -238,6 +245,10 @@ color: #000000; position: absolute; right: -57px; + @media (max-width: 560px) { + top: 45px; + right: -4px; + } :global(.vtex__icon-external-link) { display: none; } @@ -262,3 +273,103 @@ } } } +.shippingTable { + // max-width: 326px; + .shippingTableHead { + display: block; + .shippingTableRow { + display: flex; + margin-left: 7px; + .shippingTableHeadDeliveryName { + width: 108px; + text-transform: uppercase; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + } + .shippingTableHeadDeliveryEstimate{ + display: flex; + order: 1; + text-transform: uppercase; + width: 136px; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + } + + .shippingTableHeadDeliveryPrice{ + text-transform: uppercase; + font-size: 0; + width: 62px; + text-align: start; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #202020; + } + .shippingTableHeadDeliveryPrice::after{ + content: "FRETE"; + font-size: 14px; + } + } + .shippingTableBody { + display: block; + } + } + .shippingTableRadioBtn { + display: none; + } + .shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + } + .shippingTableCellDeliveryName { + width: 108px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + } + .shippingTableCellDeliveryPrice { + width: 62px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + } + .shippingTableCellDeliveryEstimate { + width: 136px; + display: flex; + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + color: #afafaf; + } + } +}