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 {