diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 05b62c9..c37b910 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -46,13 +46,59 @@ height: 46px; } -[class*="frameAround"] { +[class*="skuSelectorSubcontainer--cor"] + :global(.vtex-store-components-3-x-skuSelectorName) { + font-size: 0; +} + +[class*="skuSelectorSubcontainer--cor"] + :global(.vtex-store-components-3-x-skuSelectorName)::after { + font-size: 12px; + content: "OUTRAS CORES"; +} + +[class*="skuSelectorSubcontainer--cor"] + :global(.vtex-store-components-3-x-skuSelectorSelectorImageValue) { + font-size: 0; +} + +[class*="skuSelectorSubcontainer--tamanho"] + :global(.vtex-store-components-3-x-skuSelectorName) { + font-size: 0; +} + +[class*="skuSelectorSubcontainer--tamanho"] + :global(.vtex-store-components-3-x-skuSelectorName)::after { + font-size: 12px; + content: "OUTROS TAMANHOS:"; +} + +[class*="skuSelectorSubcontainer--cor"] + :global(.vtex-store-components-3-x-frameAround) { border-radius: 24px; width: 48px; height: 48px; border-color: black; } +[class*="skuSelectorSubcontainer--tamanho"] + :global(.vtex-store-components-3-x-frameAround) { + border-radius: 24px; + width: 40px; + height: 40px; + border-color: black; + left: 0.5px; + top: -1.8px; +} + +[class*="skuSelectorSubcontainer--tamanho"] + :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + border-radius: 24px; + width: 40px; + height: 40px; + border-color: black; +} + [class*="skuSelectorItemTextValue"] { position: absolute; top: 50%;