diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be2df56..9797d82 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -123,8 +123,8 @@ /*"flex-layout.row#buy-button",*/ "html#qtd-btn", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + /*"share#default"*/ ] }, @@ -216,5 +216,11 @@ "Pinterest": true } } + }, + + "shipping-simulator": { + "props": { + "blockClass": "frete" + } } } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e68b426..8b42529 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -22,11 +22,13 @@ border-right: none; height: 50px; }*/ -/*.hideDecorators { +.hideDecorators { border: 1px solid red; border-left: none; border-right: none; -}*/ + height: 49px; +} + /*.numeric-stepper__plus-button { border: none; height: 50px; @@ -41,7 +43,6 @@ } */ .quantitySelectorContainer--quantidade { - border: 1px solid green; margin-right: 5px; padding: 0; height: 100%; @@ -52,4 +53,31 @@ background-color: blue; border: 1px solid orange; height: 49px; -}*/ \ No newline at end of file +}*/ +:global(.vtex-numeric-stepper__input) { + height: 49px; + width: 30px; + border-right: 0; + border-left: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +:global(.vtex-numeric-stepper__plus-button) { + height: 49px; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: transparent; + height: 49px; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 13ffde1..03ee676 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -64,4 +64,61 @@ font-size: 14px; line-height: 19px; color: #000000; +} + +.shippingContainer { + border: 1px solid red; + display: flex; + align-items: end; + margin-top: 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + position: relative; + padding: 0; +} +.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; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; + border-radius: 0%; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + /*background-color: red;*/ +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 28px; + right: -180px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; +} +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: #000000; + border: none; + border-radius: inherit; +} +.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; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index a92d5e9..b42f7bc 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -14,11 +14,12 @@ height: 50px; }*/ -/*.hideDecorators { +.hideDecorators { border: 1px solid red; border-left: none; border-right: none; -}*/ + height: 49px; +} /*.numeric-stepper__plus-button { border: none; @@ -36,7 +37,6 @@ } */ .quantitySelectorContainer--quantidade { - border: 1px solid green; margin-right: 5px; padding: 0; height: 100%; @@ -48,3 +48,30 @@ border: 1px solid orange; height: 49px; }*/ +:global(.vtex-numeric-stepper__input) { + height: 49px; + width: 30px; + border-right: 0; + border-left: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +:global(.vtex-numeric-stepper__plus-button) { + height: 49px; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: transparent; + height: 49px; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 116a28d..7b1fdea 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -60,3 +60,71 @@ color: #000000; } } + +//FRETE + +.shippingContainer { + border: 1px solid red; + display: flex; + align-items: end; + margin-top: 16px; + + :global(.vtex-address-form__postalCode) { + position: relative; + padding: 0; + } + + :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "CALCULAR FRETE:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + + :global(.vtex-input-prefix__group) { + height: 49px; + border-radius: 0%; + } + + :global(.vtex-address-form-4-x-input) { + /*background-color: red;*/ + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 28px; + right: -180px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; + } + + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: #000000; + border: none; + border-radius: inherit; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; + } + } +}