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 {