diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3cea114..68c03b5 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -242,7 +242,7 @@ "props": { "installmentsCriteria": "max-quantity-without-interest", "blockClass": "parcelamentos", - "message": "{installmentsNumber} x {installmentValue} sem juros" + "message": "{installmentsNumber} de {installmentValue} sem juros" } }, diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 0d3b6f2..8939bde 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -17,13 +17,12 @@ .installments--parcelamentos .installmentsNumber { font-weight: 700; } +.installments--parcelamentos .installmentsNumber::after { + content: " x"; +} .installments--parcelamentos .installmentValue { font-weight: 700; } -.installments--parcelamentos .installmentValue::before { - content: "de "; - font-weight: 400; -} .listPrice--summary { font-weight: 400; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c082c8d..d944e95 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -174,6 +174,7 @@ } .shippingContainer :global(.vtex-input__error) { position: absolute; + margin-top: 2px; } .shippingContainer :global(.vtex-input__label) { font-size: 0; @@ -189,6 +190,12 @@ height: 49px; border-radius: 0%; } +.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + padding: 0; +} +.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) { + width: 231px; +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; top: 28px; @@ -235,30 +242,60 @@ .shippingTableHead { display: table-header-group; +} +.shippingTableHead .shippingTableRow { + display: flex; + align-items: end; +} +.shippingTableHead .shippingTableHeadDeliveryName, +.shippingTableHead .shippingTableHeadDeliveryEstimate, +.shippingTableHead .shippingTableHeadDeliveryPrice { font-weight: 400; font-size: 14px; line-height: 19px; text-transform: uppercase; color: #202020; -} -.shippingTableHead .shippingTableHeadDeliveryName, -.shippingTableHead .shippingTableHeadDeliveryEstimate, -.shippingTableHead .shippingTableHeadDeliveryPrice { text-align: initial; + padding: 0; +} +.shippingTableHead .shippingTableHeadDeliveryName { + min-width: 110px; +} +.shippingTableHead .shippingTableHeadDeliveryEstimate { + order: 3; +} +.shippingTableHead .shippingTableHeadDeliveryPrice { + display: flex; + min-width: 110px; + font-size: 0; +} +.shippingTableHead .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-size: 14px; } -.shippingTableCell { +.shippingTableBody .shippingTableRow { + display: flex; +} +.shippingTableBody .shippingTableRow .shippingTableCell { font-weight: 400; font-size: 12px; line-height: 16px; color: #afafaf; } - -.shippingTableCellDeliveryName, -.shippingTableCellDeliveryPrice, -.shippingTableCellDeliveryEstimate { - padding: 0; - padding-top: 15px; +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName, +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice, +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + padding: 15px 4px 0 0; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + min-width: 110px; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + min-width: 110px; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 3; } .productDescriptionContainer--descricao { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 1fbd38f..f905c46 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -7,15 +7,14 @@ .installmentsNumber { font-weight: 700; + + &::after { + content: " x"; + } } .installmentValue { font-weight: 700; - - &::before { - content: "de "; - font-weight: 400; - } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ca74330..7900193 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -193,6 +193,7 @@ :global(.vtex-input__error) { position: absolute; + margin-top: 2px; } :global(.vtex-input__label) { @@ -210,6 +211,14 @@ :global(.vtex-input-prefix__group) { height: 49px; border-radius: 0%; + + :global(.vtex-input__suffix) { + padding: 0; + } + + :global(.vtex-address-form-4-x-hideDecorators) { + width: 231px; + } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -266,31 +275,72 @@ .shippingTableHead { display: table-header-group; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-transform: uppercase; - color: $color-black2; + + .shippingTableRow { + display: flex; + align-items: end; + } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-black2; text-align: initial; + padding: 0; + } + + .shippingTableHeadDeliveryName { + min-width: 110px; + } + + .shippingTableHeadDeliveryEstimate { + order: 3; + } + + .shippingTableHeadDeliveryPrice { + display: flex; + min-width: 110px; + font-size: 0; + &::after { + content: "FRETE"; + font-size: 14px; + } } } -.shippingTableCell { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #afafaf; -} +.shippingTableBody { + .shippingTableRow { + display: flex; -.shippingTableCellDeliveryName, -.shippingTableCellDeliveryPrice, -.shippingTableCellDeliveryEstimate { - padding: 0; - padding-top: 15px; + .shippingTableCell { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + } + + .shippingTableCellDeliveryName, + .shippingTableCellDeliveryPrice, + .shippingTableCellDeliveryEstimate { + padding: 15px 4px 0 0; + } + + .shippingTableCellDeliveryName { + min-width: 110px; + } + + .shippingTableCellDeliveryPrice { + min-width: 110px; + } + + .shippingTableCellDeliveryEstimate { + order: 3; + } + } } //DESCRIÇÃO