From ee4cb0cbc311a1c1a9c350ca331debc5be51574f Mon Sep 17 00:00:00 2001
From: ueberjames <ueberjames@gmail.com>
Date: Wed, 8 Feb 2023 11:51:49 -0300
Subject: [PATCH] (fix) flex direction column por flex direction colunm reverse

---
 react/components/Html/styles.css                     |  2 +-
 store/blocks/pdp/product.jsonc                       |  3 ++-
 styles/css/vtex.flex-layout.css                      |  1 +
 styles/css/vtex.store-components.css                 |  8 +++-----
 styles/sass/pages/product/vtex.flex-layout.scss      |  1 +
 styles/sass/pages/product/vtex.store-components.scss | 11 ++++++-----
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 9e62d40..62c7aef 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,7 +1,7 @@
 [class*="html--quantity-button-buy"] {
   display: flex;
   gap: 10px;
- 
+
 
 
 }
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index adb1c73..32ee9ba 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -274,7 +274,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "blockClass":"sku"
     }
   },
 
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d045d44..ca920d2 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -21,6 +21,7 @@
   width: 100%;
   height: 49px;
   margin: 0;
+  margin-left: 10px;
 }
 .flexRow--size-buy-button .flexRowContent--size-buy-button {
   height: 49px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 256331c..d9ab072 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -31,10 +31,9 @@
 
 .skuSelectorContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor {
-  order: 2;
   margin-bottom: 16px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
@@ -84,7 +83,6 @@
   border-radius: 30px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
-  color: rgba(185, 185, 185, 0.6);
   padding: 0;
   margin: auto;
 }
@@ -101,11 +99,11 @@
   height: 17px;
   top: 11px;
 }
-.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
+.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue {
   font-size: 14px;
   line-height: 19px;
   font-weight: 400;
-  color: #000000;
+  color: #000000 !important;
   font-family: "Open Sans", sans-serif;
 }
 
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 1417649..5a97251 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -18,6 +18,7 @@
   width: 100%;
 height: 49px;
 margin: 0;
+margin-left: 10px;
   .flexRowContent--size-buy-button {
     height: 49px;
     width: 100%;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 4111572..da810ca 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -29,13 +29,13 @@
 
 .skuSelectorContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
 
 
   .skuSelectorSubcontainer--cor {
 
 
-    order: 2;
+    // order: 2;
     margin-bottom: 16px;
 
 
@@ -120,7 +120,7 @@
 
     .skuSelectorItemTextValue {
 
-      color:rgba(185, 185, 185, 0.6);
+
       padding: 0;
       margin: auto;
     }
@@ -145,11 +145,12 @@
 
   .skuSelectorItem--skus--selected {
 
-    .skuSelectorItemTextValue--skus {
+    .skuSelectorItemTextValue {
+
       font-size: 14px;
       line-height: 19px;
       font-weight: 400;
-      color: $color-black2;
+      color: $color-black2 !important;
       font-family: $font-open;