From 94aa3c4768f1a0a3bc8d96b590d3aaca55d111b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Fri, 3 Feb 2023 17:22:47 -0300 Subject: [PATCH] feat(pdp): Adiciona gap skus e margins title prateleira --- react/components/Pix/Pix.module.css | 1 + store/blocks/pdp/product-tablayout.jsonc | 5 +++ store/blocks/pdp/product.jsonc | 10 ++++- styles/css/vtex.product-summary.css | 4 ++ styles/css/vtex.rich-text.css | 12 +++++- styles/css/vtex.store-components.css | 26 +++++++++++- .../pages/product/vtex.product-summary.scss | 4 ++ styles/sass/pages/product/vtex.rich-text.scss | 8 +++- .../pages/product/vtex.store-components.scss | 42 ++++++++++++++++++- 9 files changed, 105 insertions(+), 7 deletions(-) diff --git a/react/components/Pix/Pix.module.css b/react/components/Pix/Pix.module.css index f28658b..47647a8 100644 --- a/react/components/Pix/Pix.module.css +++ b/react/components/Pix/Pix.module.css @@ -3,6 +3,7 @@ gap: 26px; align-items: center; margin-top: 8px; + width: 197px; } .image { diff --git a/store/blocks/pdp/product-tablayout.jsonc b/store/blocks/pdp/product-tablayout.jsonc index 6bdf545..bf5b66c 100644 --- a/store/blocks/pdp/product-tablayout.jsonc +++ b/store/blocks/pdp/product-tablayout.jsonc @@ -1,4 +1,9 @@ { + "html#tab-layout": { + "props": { "testId": "tab-layout" }, + "children": ["tab-layout#details"] + }, + "tab-layout#details": { "children": ["tab-list#details", "tab-content#details"], "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0230796..3c3089e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcontainer", "condition-layout.product#availability", - "tab-layout#details", + "html#tab-layout", "list-context.product-list#prateleira", "newsletter" ] @@ -160,7 +160,7 @@ "html#skus", "html#qtd-btn", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, @@ -291,5 +291,11 @@ "props": { "blockClass": "frete" } + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] } } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 91d86b9..715afef 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -27,4 +27,8 @@ .spacer { display: none; +} + +.element { + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 4bcdad9..f53c460 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -9,7 +9,17 @@ /* Grid breakpoints */ .container--title-prateleira { margin-top: 16px; - margin-bottom: 12px; + margin-bottom: 32px; +} +@media screen and (max-width: 1024px) { + .container--title-prateleira { + margin-bottom: 24px; + } +} +@media screen and (max-width: 768px) { + .container--title-prateleira { + margin-bottom: 16px; + } } .container--title-prateleira .paragraph--title-prateleira { margin: 0; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 13ecbbf..f65339a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,6 +63,11 @@ display: flex; flex-direction: column-reverse; margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorNameContainer { + margin: 0; } .frameAround--skus { @@ -70,9 +75,14 @@ } .skuSelectorOptionsList { - margin-left: -5px; + display: flex; + margin-left: 0; + gap: 16px; } +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { font-size: 0; } @@ -85,6 +95,10 @@ color: color-gray6; } +.skuSelectorItem { + margin: 0; +} + .skuSelectorItemTextValue--skus { font-weight: 400; font-size: 14px; @@ -111,6 +125,9 @@ justify-content: center; display: flex; } +.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus { + background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%); +} .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus { font-weight: 400; font-size: 14px; @@ -118,6 +135,9 @@ color: #000000; } +.skuSelectorSubcontainer--cor { + margin: 0; +} .skuSelectorSubcontainer--cor .skuSelectorName { font-size: 0; } @@ -146,6 +166,10 @@ height: 48px; } +.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus { + background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%); +} + .diagonalCross--skus { transform: rotate(80deg); background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%); diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index e94dd37..41102d4 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -18,3 +18,7 @@ .spacer { display: none; } + +.element { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 0f3392e..ebb3da4 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,6 +1,12 @@ .container--title-prateleira { margin-top: 16px; - margin-bottom: 12px; + margin-bottom: 32px; + @media screen and (max-width: 1024px) { + margin-bottom: 24px; + } + @media screen and (max-width: 768px) { + margin-bottom: 16px; + } .paragraph--title-prateleira { margin: 0; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a44c69f..f6548aa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -55,6 +55,11 @@ display: flex; flex-direction: column-reverse; margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorNameContainer { + margin: 0; } .frameAround--skus { @@ -62,10 +67,14 @@ } .skuSelectorOptionsList { - margin-left: -5px; + display: flex; + margin-left: 0; + gap: 16px; } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { .skuSelectorTextContainer { .skuSelectorName { @@ -84,6 +93,10 @@ } } +.skuSelectorItem { + margin: 0; +} + .skuSelectorItemTextValue--skus { font-weight: 400; font-size: 14px; @@ -101,6 +114,7 @@ display: flex; } +//SKU INDISPONIVEL SELECIONADO .skuSelectorItem--skus--selected { .skuSelectorInternalBox--skus { border: 2px solid $color-black-100; @@ -110,6 +124,15 @@ align-items: center; justify-content: center; display: flex; + + .diagonalCross--skus { + background-image: linear-gradient( + to top right, + transparent 44%, + #000 48%, + transparent 52% + ); + } } .skuSelectorItemTextValue--skus { @@ -121,6 +144,8 @@ } .skuSelectorSubcontainer--cor { + margin: 0; + .skuSelectorName { font-size: 0; @@ -159,6 +184,20 @@ } } +//SKU INDISPONIVEL SELECIONADO +.skuSelectorItem--skus--selected { + .skuSelectorInternalBox--skus { + .diagonalCross--skus { + background-image: linear-gradient( + to top right, + transparent 44%, + #000 48%, + transparent 52% + ); + } + } +} + .diagonalCross--skus { transform: rotate(80deg); background-image: linear-gradient( @@ -178,7 +217,6 @@ } //FRETE - .shippingContainer { display: flex; align-items: end;