diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3a6e6c5..82f809f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -78,4 +78,169 @@ font-size: 20px; line-height: 34px; color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin-left: 0; + column-gap: 16px; + margin: 8px 0 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + column-gap: 16px; + margin: 8px 0 0; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected { + border-radius: 100%; + border: 2px solid #000000; + width: 48px; + height: 48px; + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + bottom: 0; + top: 0; + right: 0; + border: 2px solid #000000; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + border: none; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% + 10px - 11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; } \ No newline at end of file diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index f8ec26b..d3c2b77 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -70,3 +70,183 @@ color: #575757; } } + +// sku selector + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} + +.skuSelectorTextContainer { + display: none; +} + +.skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + margin-left: 0; + column-gap: 16px; + margin: 8px 0 0; + + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} + + + +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + column-gap: 16px; + margin: 8px 0 0; + height: 48px; + .skuSelectorItem--selected { + border-radius: 100%; + border: 2px solid #000000; + width: 48px; + height: 48px; + margin: 0; + .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + bottom: 0; + top: 0; + right: 0; + border: 2px solid #000000; + } + .skuSelectorInternalBox { + .valueWrapper, + .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; + } + } + } + .skuSelectorItem { + border-radius: 100%; + width: 48px; + height: 48px; + margin: 0; + .frameAround { + width: 48px; + height: 48px; + border-radius: 100%; + border: none; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 48px; + height: 48px; + .diagonalCross { + position: absolute; + width: 46.69px; + height: 0px; + left: calc(50% - 28.345px + 6.35px); + top: calc(50% - -10px + -11px); + border: 1px solid #d5d5d5; + transform: rotate(-43.26deg); + } + .valueWrapper, + .skuSelectorItemImageValue { + border-radius: 100%; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + width: 48px; + height: 48px; + } + } + } + } + } +}