From 676dd1e71e03daec820fafae710d8307a31bc885 Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Fri, 3 Feb 2023 15:39:27 -0300
Subject: [PATCH] refactor: ajuste css sku e preteleira

---
 react/components/Html/styles.css              | 20 ++++++++++++------
 styles/css/vtex.store-components.css          | 19 +++++++++++++++--
 .../pages/product/vtex.store-components.scss  | 21 +++++++++++++++++--
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index dcedc6d..7669a87 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -5,7 +5,7 @@
 }
 
 [class*="html--product-quantity"] {
-  width: 24.335%;
+  width: 161.58px;
 }
 
 [class*="html--add-to-cart"] {
@@ -38,11 +38,6 @@
   width: 100%;
 }
 
-[class*="html--shelf"] {
-  display: flex;
-  justify-content: center;
-}
-
 @media (min-width: 1921px) {
   [class*="html--product-quantity"] {
     width: 16.712%;
@@ -51,9 +46,18 @@
   [class*="html--descriptionImage"] {
     width: 47.392%;
   }
+
+  [class*="html--shelf"] {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 @media (max-width: 1024px) {
+  [class*="html--product-quantity"] {
+    width: 149.91px;
+  }
+
   [class*="html--buy-button"] {
     margin-bottom: 16px;
   }
@@ -73,6 +77,10 @@
     gap: 0;
   }
 
+  [class*="html--product-quantity"] {
+    width: 128px;
+  }
+
   [class*="html--buy-button"] :global(.vtex-button) {
     height: 74px;
     padding: 0 64px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 2dd0ffa..e2b36b4 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -53,6 +53,21 @@
   height: 40px !important;
   width: 40px;
 }
+.skuSelectorItem .skuSelectorItemTextValue {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+
+.skuSelectorItem--selected .skuSelectorItemTextValue {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #000000;
+}
 
 .frameAround {
   border-radius: 50%;
@@ -65,8 +80,8 @@
   left: 6px;
   bottom: 0px;
   z-index: 2;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 33px;
 }
 
 .skuSelectorInternalBox {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index ce0ac31..43c498b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -41,6 +41,23 @@
 .skuSelectorItem {
   height: 40px !important;
   width: 40px;
+  .skuSelectorItemTextValue {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #b9b9b999;
+  }
+}
+
+.skuSelectorItem--selected {
+  .skuSelectorItemTextValue {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-black;
+  }
 }
 
 .frameAround {
@@ -54,8 +71,8 @@
   left: 6px;
   bottom: 0px;
   z-index: 2;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 33px;
 }
 
 .skuSelectorInternalBox {