diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 06be4ab..c5c13ca 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,10 @@ -[class*="html--buy-button"]{ - display: flex; +@media(min-width:769px){ + [class*="html--buy-button"]{ + display: flex; + } +} +@media(max-width: 768px){ + [class*="html--buy-button"]{ + display: block; + } } diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index b3dc525..7b616f6 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -6,12 +6,6 @@ }, "children": ["html#buy-button"] }, - "product-assembly-options": { - "children": [ - "flex-layout.row#product-assembly-options", - "assembly-option-input-values" - ] - }, "assembly-option-input-values": { "props": { "optionsDisplay": "box" diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index bd95902..2caab25 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -117,10 +117,8 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", "availability-subscriber", "sku-selector", - "product-assembly-options", "product-gifts", "html#buy-button", "shipping-simulator" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4125368..39d6339 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -21,6 +21,11 @@ margin-top: 24px; width: 375px; } +@media only screen and (max-width: 1023px) { + .flexRowContent--message-availability { + width: 100%; + } +} .sellingPriceValue { font-size: 50px; @@ -43,6 +48,12 @@ height: 49px; margin-top: 8px; } +@media only screen and (max-width: 767px) { + .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { + margin: 0 0 16px; + height: auto; + } +} .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { font-size: 0; } @@ -51,6 +62,6 @@ content: "ADICIONAR À SACOLA"; font-size: 18px; font-weight: 400; - padding: 12px 0; + padding: 12px 64px; line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 3466fe3..f6f1f04 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -15,6 +15,12 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } +@media only screen and (max-width: 1023px) { + .product-identifier--productReference { + justify-content: start; + margin-bottom: 24px; + } +} .product-identifier--productReference .product-identifier__label { display: none; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index b9db5c7..5369bca 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -15,18 +15,34 @@ } .installments { - font-weight: 300; - font-size: 16px; - line-height: 22px; + display: flex; + font-size: 0; color: #929292; + margin-bottom: 8px; } .installments .installmentsNumber { font-weight: 700; font-size: 16px; line-height: 22px; } +.installments .installmentsNumber::after { + content: "x "; +} .installments .installmentValue { font-weight: 700; font-size: 16px; line-height: 22px; +} +.installments .installmentValue::before { + content: "de "; + margin-left: 5px; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.installments .installmentValue::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index f874c99..4d473d3 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -14,6 +14,11 @@ width: 149px; margin-right: 10px; } +@media only screen and (max-width: 767px) { + .quantitySelectorContainer { + margin-bottom: 10px; + } +} .quantitySelectorContainer .quantitySelectorTitle { display: none; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2f5b631..258140a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -16,8 +16,8 @@ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*PRODUTO INDISPONIVEL, TEXTOS */ - /* FORMULARIO DE PRODUTO INDISPONIVEL */ /* BUSCA DE CEP */ + /* TRANSPORTADORAS */ } .container .productNameContainer--quickview { text-align: end; @@ -26,6 +26,11 @@ line-height: 34px; color: #575757; } +@media only screen and (max-width: 1023px) { + .container .productNameContainer--quickview { + text-align: start; + } +} .container .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -106,6 +111,8 @@ } .container .subscriberContainer { width: 100%; + margin-top: 24px; + /* FORMULARIO DE PRODUTO INDISPONIVEL */ } .container .subscriberContainer .title { font-size: 0; @@ -128,30 +135,41 @@ line-height: 19px; color: #868686; } -.container .form { +.container .subscriberContainer .form { position: relative; } -.container .form :global(.vtex-store-components-3-x-content) { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) { width: 374.65px; display: block; margin-top: 16px; } -.container .form :global(.vtex-store-components-3-x-content) .inputName { +@media only screen and (max-width: 1023px) { + .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) { + width: 100%; + max-width: 100%; + } +} +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { width: 182.46px; margin-right: 10.08px; margin-bottom: 15px; } -.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { +@media only screen and (max-width: 1023px) { + .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { + width: 49%; + } +} +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { border: 0.6px solid #929292; border-radius: 0; } -.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; line-height: 28px; color: #929292; } -.container .form :global(.vtex-store-components-3-x-content) .inputEmail { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { position: absolute; left: 51%; top: 0%; @@ -160,21 +178,28 @@ font-weight: 400; margin-bottom: 15px; } -.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { +@media only screen and (max-width: 1023px) { + .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { + width: -webkit-fill-available; + margin: 0 0 0 8px; + left: 49%; + } +} +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { border: 0.6px solid #929292; border-radius: 0; } -.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; line-height: 28px; color: #929292; } -.container .form :global(.vtex-store-components-3-x-content) .submit { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit { width: 100%; margin-bottom: 16px; } -.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { width: 100%; height: 49px; background-color: #000000; @@ -185,7 +210,7 @@ align-items: center; justify-content: center; } -.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { content: "AVISE-ME"; color: #fff; font-weight: 600; @@ -193,17 +218,28 @@ line-height: 25px; font-family: "Open sans", sans-serif; } -.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { +.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } .container .shippingContainer { display: flex; } +@media only screen and (max-width: 767px) { + .container .shippingContainer { + display: block; + position: relative; + } +} .container .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; align-items: center; padding: 0; } +@media only screen and (max-width: 767px) { + .container .shippingContainer :global(.vtex-address-form__postalCode) { + display: block; + } +} .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { font-size: 0; } @@ -219,6 +255,11 @@ height: 49px; border-radius: 0; } +@media only screen and (max-width: 767px) { + .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + width: 100%; + } +} .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; margin-top: 25px; @@ -229,6 +270,13 @@ line-height: 16px; text-decoration: underline; } +@media only screen and (max-width: 767px) { + .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + left: 0; + margin-top: 8px; + text-align: end; + } +} .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000000; } @@ -245,6 +293,13 @@ border-radius: 0; cursor: pointer; } +@media only screen and (max-width: 767px) { + .container .shippingContainer :global(.vtex-button) { + position: absolute; + right: 0px; + top: 0px; + } +} .container .shippingContainer :global(.vtex-button)::before { content: "OK"; font-weight: 600; @@ -255,6 +310,95 @@ .container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { height: fit-content; } +.container .shippingTable { + border: none; + padding: 0; + margin: 15px 0; +} +.container .shippingTable .shippingTableHead { + display: block; + text-transform: uppercase; + margin-bottom: 15px; +} +.container .shippingTable .shippingTableHead .shippingTableRow { + display: flex; + flex-direction: row; +} +.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + margin-right: 39px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +@media only screen and (max-width: 767px) { + .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + margin-right: 32px; + } +} +.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; + margin-right: 30px; +} +@media only screen and (max-width: 767px) { + .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + margin-right: 32px; + } +} +.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.container .shippingTable .shippingTableBody .shippingTableRow { + display: flex; + flex-direction: row; +} +.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 82px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +@media only screen and (max-width: 767px) { + .container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + margin-right: 22px; + } +} +.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 50px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} +.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0 0 15px; +} +.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; +} .productImage { width: max-content; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3584833..8d9a06b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -14,6 +14,9 @@ .flexRowContent--message-availability { margin-top: 24px; width: 375px; + @include mq(md, max) { + width: 100%; + } } .sellingPriceValue { @@ -34,6 +37,10 @@ border: none; height: 49px; margin-top: 8px; + @include mq(sm, max) { + margin: 0 0 16px; + height: auto; + } :global(.vtex-button__label) { :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { font-size: 0; @@ -42,7 +49,7 @@ content: "ADICIONAR À SACOLA"; font-size: 18px; font-weight: 400; - padding: 12px 0; + padding: 12px 64px; line-height: 22px; } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 9c71e9d..5e433e6 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -5,6 +5,10 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + @include mq(md, max) { + justify-content: start; + margin-bottom: 24px; + } .product-identifier__label { display: none; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 084e5de..6d12f64 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -6,18 +6,35 @@ } .installments { - font-weight: 300; - font-size: 16px; - line-height: 22px; + display: flex; + font-size: 0; color: $color-gray-6; + margin-bottom: 8px; .installmentsNumber { font-weight: 700; font-size: 16px; line-height: 22px; + + &::after { + content: "x "; + } } .installmentValue { font-weight: 700; font-size: 16px; line-height: 22px; + &::before { + content: "de "; + margin-left: 5px; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + &::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index f897cc6..ccc39fb 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -4,6 +4,9 @@ margin-bottom: 16px; width: 149px; margin-right: 10px; + @include mq(sm, max) { + margin-bottom: 10px; + } .quantitySelectorTitle { display: none; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fc449fa..d870b2f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,6 +10,9 @@ font-size: 20px; line-height: 34px; color: $color-gray-7; + @include mq(md, max) { + text-align: start; + } } /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ @@ -121,6 +124,7 @@ /*PRODUTO INDISPONIVEL, TEXTOS */ .subscriberContainer { width: 100%; + margin-top: 24px; .title { font-size: 0; margin-bottom: 0; @@ -144,42 +148,29 @@ color: $color-gray-9; } } - } - - /* FORMULARIO DE PRODUTO INDISPONIVEL */ - .form { - position: relative; - :global(.vtex-store-components-3-x-content) { - width: 374.65px; - display: block; - margin-top: 16px; - .inputName { - width: 182.46px; - margin-right: 10.08px; - margin-bottom: 15px; - :global(.vtex-input-prefix__group) { - border: 0.6px solid $color-gray-6; - border-radius: 0; + /* FORMULARIO DE PRODUTO INDISPONIVEL */ + .form { + position: relative; + :global(.vtex-store-components-3-x-content) { + width: 374.65px; + display: block; + margin-top: 16px; + @include mq(md, max) { + width: 100%; + max-width: 100%; } - :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; - font-size: 12px; - line-height: 28px; - color: $color-gray-6; - } - } - .inputEmail { - position: absolute; - left: 51%; - top: 0%; - border-radius: 0; - width: 182.46px; - font-weight: 400; - margin-bottom: 15px; + .inputName { + width: 182.46px; + margin-right: 10.08px; + margin-bottom: 15px; + @include mq(md, max) { + width: 49%; + } - :global(.vtex-input-prefix__group) { - border: 0.6px solid $color-gray-6; - border-radius: 0; + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; + } :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; @@ -187,31 +178,56 @@ color: $color-gray-6; } } - } - .submit { - width: 100%; - margin-bottom: 16px; - :global(.vtex-button) { - width: 100%; - height: 49px; - background-color: $color-black-padrao; - border: none; + .inputEmail { + position: absolute; + left: 51%; + top: 0%; border-radius: 0; - font-size: 0; - display: flex; - align-items: center; - justify-content: center; - &::before { - content: "AVISE-ME"; - color: $color-white; - font-weight: 600; - font-size: 18px; - line-height: 25px; - font-family: "Open sans", sans-serif; + width: 182.46px; + font-weight: 400; + margin-bottom: 15px; + @include mq(md, max) { + width: -webkit-fill-available; + margin: 0 0 0 8px; + left: 49%; } - :global(.vtex-button__label) { - padding: 0; + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: $color-gray-6; + } + } + } + .submit { + width: 100%; + margin-bottom: 16px; + :global(.vtex-button) { + width: 100%; + height: 49px; + background-color: $color-black-padrao; + border: none; + border-radius: 0; + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + &::before { + content: "AVISE-ME"; + color: $color-white; + font-weight: 600; + font-size: 18px; + line-height: 25px; + font-family: "Open sans", sans-serif; + } + + :global(.vtex-button__label) { + padding: 0; + } } } } @@ -221,10 +237,17 @@ /* BUSCA DE CEP */ .shippingContainer { display: flex; + @include mq(sm, max) { + display: block; + position: relative; + } :global(.vtex-address-form__postalCode) { display: flex; align-items: center; padding: 0; + @include mq(sm, max) { + display: block; + } :global(.vtex-input__label) { font-size: 0; &::before { @@ -239,6 +262,9 @@ width: 280px; height: 49px; border-radius: 0; + @include mq(sm, max) { + width: 100%; + } } :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; @@ -249,6 +275,11 @@ font-size: 12px; line-height: 16px; text-decoration: underline; + @include mq(sm, max) { + left: 0; + margin-top: 8px; + text-align: end; + } :last-child { color: $color-black-padrao; } @@ -266,6 +297,12 @@ font-size: 0; border-radius: 0; cursor: pointer; + + @include mq(sm, max) { + position: absolute; + right: 0px; + top: 0px; + } &::before { content: "OK"; font-weight: 600; @@ -278,6 +315,100 @@ } } } + + /* TRANSPORTADORAS */ + .shippingTable { + border: none; + padding: 0; + margin: 15px 0; + .shippingTableHead { + display: block; + text-transform: uppercase; + margin-bottom: 15px; + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableHeadDeliveryName { + margin-right: 39px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + @include mq(sm, max) { + margin-right: 32px; + } + } + + .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + } + + .shippingTableHeadDeliveryPrice { + font-size: 0; + margin-right: 30px; + @include mq(sm, max) { + margin-right: 32px; + } + &::before { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + } + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableCellDeliveryName { + width: 82px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray-10; + @include mq(sm, max) { + margin-right: 22px; + } + } + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray-10; + } + + .shippingTableCellDeliveryPrice { + width: 50px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray-10; + } + .shippingTableCell { + padding: 0 0 15px; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } + } } .productImage { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 1257d59..30a8dc3 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,5 +1,6 @@ $color-black: #292929; $color-black-padrao: #000000; +$color-black2: #202020; $color-white: #fff; $color-gray: #6c6c6c; @@ -11,6 +12,7 @@ $color-gray-6: #929292; $color-gray-7: #575757; $color-gray-8: #989898; $color-gray-9: #868686; +$color-gray-10: #afafaf; $color-blue: #4267b2; @@ -20,10 +22,10 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, + sm: 768px, + md: 1024px, + lg: 1920px, + xl: 1921px, ) !default; $z-index: (