From d987535bad5265127e1c0844878436fd094c54dd Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 31 Jan 2023 18:43:32 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20desc?= =?UTF-8?q?ri=C3=A7=C3=A3o=20e=20produto=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Pix-bloco/Pix.tsx | 2 +- react/components/Pix-bloco/style.module.css | 27 +++- store/blocks/pdp/product.jsonc | 16 +-- styles/css/vtex.breadcrumb.css | 3 +- styles/css/vtex.flex-layout.css | 13 ++ styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.store-components.css | 91 +++++++++++++- styles/css/vtex.tab-layout.css | 48 ++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 13 ++ .../product/vtex.product-identifier.scss | 1 + .../pages/product/vtex.store-components.scss | 116 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 47 +++++++ styles/sass/utils/_vars.scss | 3 + 14 files changed, 365 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index 36c4a0e..63e5ebe 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -23,7 +23,7 @@ const Pix = () => { return (
-
+
desconto
diff --git a/react/components/Pix-bloco/style.module.css b/react/components/Pix-bloco/style.module.css index 1bc0701..d36fdf4 100644 --- a/react/components/Pix-bloco/style.module.css +++ b/react/components/Pix-bloco/style.module.css @@ -1,3 +1,26 @@ -.wrapper { - /* background-color: red; */ +.container-flex { + display: flex; + flex-direction: row; + align-items: center; + gap: 26px; + margin-top: 8px; + margin-bottom: 16px; +} + +.value { + font-weight: 700; + font-size: 18px; + line-height: 25px; + margin: 0; + + color: rgba(0, 0, 0, 0.58); +} + +.text { + font-weight: 300; + font-size: 13px; + line-height: 18px; + margin: 0; + + color: #929292; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2c3ed0d..48ad871 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -44,6 +44,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "container-main-content", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -109,11 +110,11 @@ "flex-layout.row#selling-price", "product-installments", "Pix", - "product-separator", + // "product-separator", "sku-selector", "html#buy-button", // "flex-layout.row#buy-button", - "product-gifts", + // "product-gifts", "availability-subscriber", "shipping-simulator" ] @@ -250,8 +251,7 @@ "flex-layout.col#imageDescriptionContainer": { "props": { - "blockClass": "image-description", - "width": "50%" + "blockClass": "image-description" }, "children": ["product-images#imageDescription"] }, @@ -265,7 +265,8 @@ "flex-layout.row#description": { "props": { - "marginBottom": 7 + "marginBottom": 7, + "preventHorizontalStretch": true }, "children": ["flex-layout.col#imageDescriptionContainer", "product-description"] }, @@ -335,6 +336,7 @@ "flex-layout.row#product-availability": { "props": { + "blockClass": "container-main-content", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -354,8 +356,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 8b19a74..7ba6a2a 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,8 +11,7 @@ /* Cores */ /* Grid breakpoints */ .container { - padding-right: 40px; - padding-left: 40px; + padding: 0 40px 16px; } .homeIcon, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 24d5340..ec1ba35 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -23,4 +23,17 @@ .flexRowContent--buy-button-row { height: 49px; +} + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; +} + +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; +} + +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 83412a1..fb15ed4 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -23,4 +23,5 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7fab1eb..5d2e382 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -10,6 +11,10 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ +.container { + padding: 0; +} + .newsletter { background: #000000; color: #fff; @@ -41,8 +46,8 @@ color: #000000; } -.container { - padding: 0 40px; +.thumbImg { + border-radius: 8px; } .productNameContainer { @@ -50,10 +55,12 @@ font-size: 20px; line-height: 34px; text-align: right; + margin-bottom: 8px; color: #575757; } .productImage .productImageTag { + width: unset !important; max-height: unset !important; } @@ -77,6 +84,7 @@ flex-direction: column; } .skuSelectorContainer .skuSelectorSubcontainer--cor { + margin-bottom: 16px; order: 2; } .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, @@ -100,6 +108,9 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { display: none; } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -156,6 +167,9 @@ bottom: 3px; transform: rotateY(180deg); } +.skuSelectorContainer .skuSelectorItem--sku-size { + margin: 0 16px 0 0; +} .subscriberContainer { font-weight: 400; @@ -190,6 +204,13 @@ font-size: 40px; } +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; +} +:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; +} + .shippingContainer { display: flex; } @@ -256,6 +277,10 @@ color: #929292; } +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; +} + .shippingTable { display: flex; flex-direction: column; @@ -274,6 +299,7 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; + padding-right: 112px; color: #202020; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { @@ -324,4 +350,65 @@ } .shippingTableBody .shippingTableRadioBtn { display: none; +} + +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .title .subscribeLabel { + font-size: 0; +} +.subscriberContainer .title .subscribeLabel::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: " nome email" " submit submit"; + justify-content: inherit; + gap: 8px; +} +.subscriberContainer .form .content .inputName { + grid-area: nome; +} +.subscriberContainer .form .content .inputEmail { + grid-area: email; +} +.subscriberContainer .form .content .submit { + grid-area: submit; + width: 100%; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; +} + +.productDescriptionContainer .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + color: #575757; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..afbe7a8 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,48 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.container--structure { + padding: 0 40px; +} + +.contentContainer { + padding: 0 32px; +} + +.listContainer { + border-bottom: 1px solid #b9b9b9; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} +.listContainer .listItem :global(.vtex-button):hover { + background-color: transparent; +} +.listContainer .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: #bfbfbf; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; +} +.listContainer .listItemActive :global(.vtex-button) { + background-color: #fff; + border: none; +} +.listContainer .listItemActive :global(.vtex-button__label) { + color: #000000; + background-color: #fff; + border-bottom: 2px solid #000000; + padding: 0; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 452f605..378f809 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,5 @@ .container { - padding-right: 40px; - padding-left: 40px; + padding: 0 40px 16px ; } .homeIcon, diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 656e0bd..cfedcb3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -12,3 +12,16 @@ .flexRowContent--buy-button-row { height: 49px; } + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; +} + +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; +} + +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 91bc644..2843d55 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,5 +15,6 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 894c491..6ef9d21 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,7 @@ +.container { + padding: 0; +} + .newsletter { background: $black; color: $white; @@ -33,22 +37,24 @@ } } -// TITULO E IMAGENS -.container { - padding: 0 40px; +.thumbImg { + border-radius: 8px; } +// TITULO E IMAGENS .productNameContainer { font-weight: 300; font-size: 20px; line-height: 34px; text-align: right; + margin-bottom: 8px; color: $gray-100; } .productImage { .productImageTag { + width: unset !important; max-height: unset !important; } } @@ -75,6 +81,7 @@ margin-top: 16px; flex-direction: column; .skuSelectorSubcontainer--cor { + margin-bottom: 16px; order: 2; .frameAround, @@ -108,6 +115,8 @@ margin-top: 16px; } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -183,6 +192,9 @@ margin-top: 16px; transform: rotateY(180deg); } } + .skuSelectorItem--sku-size { + margin: 0 16px 0 0; + } } .subscriberContainer { @@ -226,6 +238,14 @@ margin-top: 16px; } } +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; + + :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; + } +} + // CEP .shippingContainer { display: flex; @@ -309,6 +329,10 @@ margin-top: 16px; } } +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; +} + // ENTREGA .shippingTable { @@ -330,6 +354,7 @@ margin-top: 16px; font-size: 14px; line-height: 19px; text-transform: uppercase; + padding-right: 112px; color: $black-100; } @@ -399,3 +424,88 @@ margin-top: 16px; display: none; } } + +// PRODUTO INDISPONÍVEL +.subscriberContainer { + + .title { + font-size: 0; + + &::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + } + } + + .form { + .content { + display: grid; + grid-template-areas: " nome email" + " submit submit"; + justify-content: inherit; + gap: 8px; + + .inputName { + grid-area: nome; + } + + .inputEmail { + grid-area: email; + } + + .submit { + grid-area: submit; + width: 100%; + + :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + + color: $white; + } + } + } + } + } +} + +// DESCRIÇÃO +.productDescriptionContainer { + .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + + color: $gray-100; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..f7bbd67 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,47 @@ +.container--structure { + padding: 0 40px; +} + +.contentContainer { + padding: 0 32px; +} + +.listContainer { + border-bottom: 1px solid $gray-500; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; + + .listItem { + :global(.vtex-button) { + + &:hover { + background-color: transparent; + } + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: $gray-400; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; + } + } + + .listItemActive { + :global(.vtex-button) { + background-color: $white; + border: none; + } + + :global(.vtex-button__label) { + color: $black; + background-color: $white; + border-bottom: 2px solid $black; + padding: 0; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 1bf6970..e1fc183 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -11,6 +11,9 @@ $white: #fff; $gray: #929292; $gray-100: #575757; $gray-200: #cccccc; +$gray-300: #868686; +$gray-400: #bfbfbf; +$gray-500: #b9b9b9; $color-gray: #6c6c6c;