diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 94d1a1a..fbdc8cd 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -60,3 +60,18 @@ line-height: 22px; color: #000000; } + +[class*="html--shipping-simulator"] button { + background-color: #000000; + border: none; + width: 49px; + height: 49px; +} + +[class*="html--shipping-simulator"] a { + color: #000000; +} + +[class*="html--shipping-simulator"] svg { + display: none; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 234803a..deabf01 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -146,11 +146,20 @@ "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#shipping-simulator": { + "props": { + "tag": "div", + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "product-installments#m3": { "props": { "markers": ["highlight"], diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index cfa70d8..7578c0b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -144,4 +144,55 @@ .skuSelectorSubcontainer { margin: 0; +} + +.shippingContainer { + display: flex; + align-items: flex-end; + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "Calcular Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + padding: 0; + position: absolute; + top: 43px; + left: 312px; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; + width: 231px; +} +.shippingContainer :global(.vtex-input__error) { + position: absolute; + margin: 2px; } \ 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 bfafd18..19abef6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -141,3 +141,64 @@ .skuSelectorSubcontainer { margin: 0; } + +.shippingContainer { + display: flex; + align-items: flex-end; + + position: relative; + + :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "Calcular Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + text-transform: uppercase; + } + } + + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + padding: 0; + + position: absolute; + top: 43px; + left: 312px; + } + + :global(.vtex-input-prefix__group ) { + height: 49px; + width: 231px; + } + + :global(.vtex-input__error) { + position: absolute; + margin: 2px; + } +}