feat:SkuSelectorContainer estilizado

Todo.md

@@ -1,14 +1,37 @@
+# Projeto
 
-- [x] (a) inciando projeto
+--- {cm:2023-01-25}
+
+- [x] (a) inciando projeto {cm:2023-01-25}
+
+- [](b)
 
 os Requisitos cobrados serão:
 
--XXX (b) Blocos que devem ser ajustado e desenvolvidos: BreadCrumb, todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), tabLayout com descrição até troca e devolução e seu conteúdo, prateleira de produtos, Newsletter.
+# Dev
-- XXX (c) Bloco de Preço com Desconto deve ser CUSTOM
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
 
-- FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){
-- FIXME {f} Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.
+
+      - HACK 1. BreadCrumb;
+
+      - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
+
+      - HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo,
+
+      - HACK 4. prateleira de produtos,
+
+      - HACK 5. Newsletter.
+}
 
 
+# Requisitos
+
+{cm:2023-01-25}
+
+- FIXME Bloco de Preço com Desconto deve ser CUSTOM
+
+* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
+
+* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.

styles/css/vtex.store-components.css

@@ -7,6 +7,38 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.skuSelectorContainer--m3-custom-sku-selector {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector {
+  border-radius: 50%;
+}
+.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
+  text-transform: uppercase;
+}
+.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
+  content: "ES:";
+}
+.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS ";
+}
+.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
+  text-transform: uppercase;
+}
+.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
+  content: "S:";
+}
+.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%;
+}
+
 .newsletter {
-  background: red;
+  background: black;
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -1,3 +1,49 @@
+.skuSelectorContainer--m3-custom-sku-selector{
+  display: flex;
+  flex-direction: column-reverse;
+
+  .frameAround--m3-custom-sku-selector{
+    border-radius: 50%;
+  }
+  .skuSelectorSubcontainer-{
+    &-cor{
+      .skuSelectorTextContainer{
+        .skuSelectorName{
+          text-transform: uppercase;
+          &::after{
+              content: "ES:";
+            }
+            &::before{
+                content: "OUTRAS ";
+              }
+        }
+      }
+    }
+    &-tamanho{
+      .skuSelectorTextContainer{
+        .skuSelectorName{
+          text-transform: uppercase;
+          &::after{
+              content: "S:";
+            }
+            &::before{
+                content: "OUTROS ";
+              }
+        }
+      }
+    }
+  }
+
+
+    .skuSelectorItemImageValue--m3-custom-sku-selector{
+          border-radius: 50%;
+      }
+
+  .diagonalCross--m3-custom-sku-selector{
+    border-radius: 50%;
+  }
+}
+
 .newsletter{
-    background: red;
+    background: black;
-}
+}