From 40394780af8072ea2f52691efe0259c2ff0ebe85 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 31 Jan 2023 01:11:52 -0300 Subject: [PATCH] =?UTF-8?q?feat(dados=5Fde=5Fcompra):estilzando=20estiliza?= =?UTF-8?q?ndo=20op=C3=A7=C3=B5es=20de=20cores?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/Todo.md | 15 +++-- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.store-components.css | 45 ++++++++----- .../pages/product/vtex.store-components.scss | 66 ++++++++++++------- 4 files changed, 78 insertions(+), 50 deletions(-) diff --git a/docs/Todo.md b/docs/Todo.md index c478340..ae7193a 100644 --- a/docs/Todo.md +++ b/docs/Todo.md @@ -11,19 +11,20 @@ os Requisitos cobrados serão: - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p -- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c} +- FIXME [Blocos que devem ser ajustado e desenvolvidos](dados_do_produto_e_de_compra-ao_lado_das_imagens){ - - [x] 1. BreadCrumb; + - [x] 1. BreadCrumb; {cm:2023-01-31} - - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), + - [x] 2. todo o bloco de imagens do produto, {cm:2023-01-31} - - HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo, + - HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens - - HACK 4. prateleira de produtos, + - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, - - HACK 5. Newsletter. + - HACK 5. prateleira de produtos, + + - HACK 6. Newsletter. - - HACK dados_do_produto_e_de_compra-ao_lado_das_imagens } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dc8d388..6a4205a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -44,7 +44,7 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack","flex-layout.col#right-col"] + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, "stack-layout": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b055542..7bd52fc 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,36 +7,45 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.skuSelectorContainer--m3-custom-sku-selector { +.skuSelectorContainer { display: flex; flex-direction: column-reverse; } -.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector { - border-radius: 50%; +.skuSelectorContainer .skuSelectorItemImage { + width: 48px; + height: 48px; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { +.skuSelectorContainer .skuSelectorItem--selected .frameAround { + border-radius: 24px; + border: 2px solid #000000; +} +.skuSelectorContainer .frameAround { + width: 48px; + height: 48px; + z-index: 5; + bottom: 0; + top: 0; + left: 0; + right: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { text-transform: uppercase; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { content: "ES:"; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before { +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before { content: "OUTRAS "; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { - text-transform: uppercase; +.skuSelectorContainer .skuSelectorInternalBox { + border: 2px solid #B9B9B9; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { - content: "S:"; +.skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox { + width: 100%; + border-radius: 24px; } -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before { - content: "OUTROS "; -} -.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector { - border-radius: 50%; -} -.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector { - border-radius: 50%; +.skuSelectorContainer .diagonalCross { + border-radius: 24px; } .carouselContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 38f013e..a4875f3 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,9 +1,24 @@ -.skuSelectorContainer--m3-custom-sku-selector{ +.skuSelectorContainer{ display: flex; flex-direction: column-reverse; - - .frameAround--m3-custom-sku-selector{ - border-radius: 50%; + .skuSelectorItemImage{ + width: 48px; + height: 48px; + } + .skuSelectorItem--selected{ + .frameAround{ + border-radius: 24px; + border: 2px solid #000000 + } + } + .frameAround{ + width: 48px; + height: 48px; + z-index: 5; + bottom: 0; + top: 0; + left: 0; + right: 0; } .skuSelectorSubcontainer-{ &-cor{ @@ -19,29 +34,32 @@ } } } - &-tamanho{ - .skuSelectorTextContainer{ - .skuSelectorName{ - text-transform: uppercase; - &::after{ - content: "S:"; - } - &::before{ - content: "OUTROS "; - } - } - } + // &-tamanho{ + // .skuSelectorTextContainer{ + // .skuSelectorName{ + // text-transform: uppercase; + // &::after{ + // content: "S:"; + // } + // &::before{ + // content: "OUTROS "; + // } + // } + // } + // } + } + + .skuSelectorInternalBox{ + border: 2px solid #B9B9B9; } - } - - - .skuSelectorItemImageValue--m3-custom-sku-selector{ - border-radius: 50%; + .skuSelectorItemImageValue,.skuSelectorInternalBox{ + width: 100%; + border-radius: 24px; } - .diagonalCross--m3-custom-sku-selector{ - border-radius: 50%; - } + .diagonalCross{ + border-radius: 24px; + } } .carouselContainer{