From b3654c7c33d143d7cdec23aa76d81aff5130d54b Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Tue, 31 Jan 2023 20:56:56 -0300
Subject: [PATCH] feat(dados_de_compra):seletores de sku estilizados

---
 docs/Todo.md                                  |  2 +
 store/blocks/pdp/product.jsonc                |  3 +-
 styles/css/vtex.store-components.css          | 21 ++++++++++
 .../pages/product/vtex.store-components.scss  | 38 ++++++++++++-------
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/docs/Todo.md b/docs/Todo.md
index ae7193a..9373b63 100644
--- a/docs/Todo.md
+++ b/docs/Todo.md
@@ -24,6 +24,8 @@ os Requisitos cobrados serão:
       - HACK 5. prateleira de produtos,
 
       - HACK 6. Newsletter.
+      
+      - HACK 7. fazer o pix.
 
 }
 
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a4205a..6ebd4aa 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -124,7 +124,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "name": "Outro Tamanho"
     }
   },
 
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 7bd52fc..157592a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -37,6 +37,27 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
   content: "OUTRAS ";
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  top: -2px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
+  content: "S:";
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTROS ";
+}
 .skuSelectorContainer .skuSelectorInternalBox {
   border: 2px solid #B9B9B9;
 }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index a4875f3..3aa8e83 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -34,19 +34,31 @@
         }
       }
     }
-    // &-tamanho{
-    //   .skuSelectorTextContainer{
-    //     .skuSelectorName{
-    //       text-transform: uppercase;
-    //       &::after{
-    //           content: "S:";
-    //         }
-    //         &::before{
-    //             content: "OUTROS ";
-    //           }
-    //     }
-    //   }
-    // }
+    &-tamanho{
+      .frameAround{
+        width: 40px;
+        height: 40px;
+        top: -2px;
+      }
+      .skuSelectorItemTextValue{
+        padding: 0;
+      }
+      .skuSelectorInternalBox{
+        width: 40px;
+        height: 40px;
+      }
+      .skuSelectorTextContainer{
+        .skuSelectorName{
+          text-transform: uppercase;
+          &::after{
+              content: "S:";
+            }
+            &::before{
+                content: "OUTROS ";
+              }
+        }
+      }
+    }
   }
 
     .skuSelectorInternalBox{