From 2019e4d20244d11639d93239f3f2883a1a35d014 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Wed, 25 Jan 2023 19:15:57 -0300
Subject: [PATCH] feat(product): adicionando estilo nos tamanhos e cores

product
---
 store/blocks/pdp/product.jsonc                |   2 +-
 styles/css/vtex.store-components.css          | 156 ++++++++++++++
 .../pages/product/vtex.store-components.scss  | 191 ++++++++++++++++++
 styles/sass/utils/_vars.scss                  |   2 +
 4 files changed, 350 insertions(+), 1 deletion(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 2f88e34..ac9bebc 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -109,7 +109,7 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      // "product-rating-summary",
+      // "product-rating-summary", // avaliações
       // "flex-layout.row#list-price-savings", preço com promoção vindo vtex
       "flex-layout.row#selling-price",
       "installment-component",
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index cafb2ca..66059de 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -92,4 +92,160 @@
     justify-content: flex-start;
     margin-top: 32px;
   }
+}
+
+.skuSelectorContainer--sku-product {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 16px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer {
+  margin-bottom: 8px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTROS TAMANHOS";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  column-gap: 16px;
+  margin: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #989898;
+  box-sizing: border-box;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-product {
+  border-color: #000;
+  border-width: 2px;
+  border-radius: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border: none;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross--sku-product {
+  transform: rotate(45deg);
+  border-radius: 24px;
+  background: #D5D5D5;
+  width: 1px;
+  height: 100%;
+  margin: 0 auto;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
+  padding: 0;
+  margin: 0 auto;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
+  color: #000;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer {
+  margin-bottom: 8px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+  column-gap: 16px;
+  margin: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #989898;
+  border-radius: 24px;
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  padding: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-product {
+  border-color: #000;
+  border-width: 2px;
+  border-radius: 24px;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border: none;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross--sku-product {
+  transform: rotate(45deg);
+  border-radius: 24px;
+  background: #D5D5D5;
+  width: 1px;
+  height: 100%;
+  margin: 0 auto;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper--unavailable {
+  border: 1px solid #989898;
+  border-radius: 24px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper--unavailable .skuSelectorItemImageValue {
+  height: 48px;
+  width: 48px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .valueWrapper--sku-product {
+  height: 48px;
+  width: 48px;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .valueWrapper--sku-product .skuSelectorItemImageValue {
+  border-radius: 24px;
+  padding: 0;
+}
+.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
+  color: #000;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index e7e4351..4264885 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -79,5 +79,196 @@
   }
 }
 
+.skuSelectorContainer--sku-product  {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 16px;
 
+  .skuSelectorSubcontainer--tamanho {
+
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorTextContainer {
+        margin-bottom: 8px;
+
+        .skuSelectorName {
+          font-size: 0;
+
+          &::after {
+            content: "OUTROS TAMANHOS";
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray6;
+          }
+        }
+      }
+
+      .skuSelectorOptionsList {
+        column-gap: 16px;
+        margin: 0;
+
+        .skuSelectorItem {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          border: 1px solid #989898;
+          box-sizing: border-box;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+
+          margin: 0;
+          padding: 0;
+
+          .frameAround--sku-product {
+            border-color: $color-black0;
+            border-width: 2px;
+            border-radius: 24px;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            z-index: 5;
+
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+          }
+
+          .skuSelectorInternalBox {
+            border: none;
+
+            .diagonalCross--sku-product {
+              transform: rotate(45deg);
+              border-radius: 24px;
+              background: #D5D5D5;
+              width: 1px;
+              height: 100%;
+              margin: 0 auto;
+            }
+          }
+
+          .skuSelectorItemTextValue  {
+            padding: 0;
+            margin: 0 auto;
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray8;
+          }
+        }
+        .skuSelectorItem--selected {
+          .skuSelectorItemTextValue {
+            color: $color-black0;
+          }
+        }
+      }
+
+    }
+
+  }
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorSelectorImageValue {
+        display: none;
+      }
+
+      .skuSelectorTextContainer {
+        margin-bottom: 8px;
+
+        .skuSelectorName {
+          font-size: 0;
+
+          &::after {
+            content: "OUTRAS CORES";
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray6;
+          }
+        }
+      }
+
+      .skuSelectorOptionsList {
+        column-gap: 16px;
+        margin: 0;
+
+        .skuSelectorItem {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          border: 1px solid #989898;
+          border-radius: 24px;
+          width: 48px;
+          height: 48px;
+
+          margin: 0;
+          padding: 0;
+
+          .frameAround--sku-product {
+            border-color: $color-black0;
+            border-width: 2px;
+            border-radius: 24px;
+            width: 48px;
+            height: 48px;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            z-index: 5;
+          }
+
+          .skuSelectorInternalBox {
+            border: none;
+
+            .diagonalCross--sku-product {
+              transform: rotate(45deg);
+              border-radius: 24px;
+              background: #D5D5D5;
+              width: 1px;
+              height: 100%;
+              margin: 0 auto;
+
+            }
+            .valueWrapper--unavailable {
+              border: 1px solid #989898;
+              border-radius: 24px;
+
+              .skuSelectorItemImageValue {
+                height: 48px;
+                width: 48px;
+              }
+            }
+          }
+        }
+        .valueWrapper--sku-product {
+          height: 48px;
+          width: 48px;
+          .skuSelectorItemImageValue {
+            border-radius: 24px;
+            padding: 0;
+          }
+        }
+        .skuSelectorItem--selected {
+          .skuSelectorItemTextValue {
+            color: $color-black0;
+          }
+        }
+      }
+    }
+  }
+}
 
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index dab1a14..3d9db95 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -15,6 +15,8 @@ $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
 $color-gray6: #929292;
 $color-gray7: #575757;
+$color-gray8: rgba(185, 185, 185, 0.6);
+
 
 $color-blue: #4267b2;