diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a42453..1cb3c10 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -111,7 +111,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments#m3", - "sku-selector", + "html#sku-selector-m3", "product-quantity", "product-assembly-options", "product-gifts", @@ -141,10 +141,21 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "imageHeight": 48, + "imageWidth": 48 } }, + "html#sku-selector-m3": { + "props":{ + "tag": "section", + "testId": "sku-selector", + "blockClass": "sku-selector-m3" + }, + "children": ["sku-selector"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, @@ -174,7 +185,7 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", + "html#sku-selector-m3", "flex-layout.row#availability" ] }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e1d1e8c..adabe57 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -77,10 +77,6 @@ text-align: right; } -/*.productDescriptionContainer { - - -}*/ .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -93,4 +89,89 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorName, +.skuSelectorNameSeparator, +.skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} + +.skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #989898; + position: relative; +} + +.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + width: 46px; + height: 46px; +} + +.frameAround { + display: none; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} + +.skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(185, 185, 185, 0.6); + width: 20px; +} + +.skuSelectorItemImage { + display: flex; + justify-content: center; + align-items: center; + border: none; +} + +.skuSelectorItem--selected { + border: 2px solid #000000; + border-radius: 50%; +} +.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { + color: #000000; +} + +.skuSelectorOptionsList { + gap: 16px; + margin: 0; +} + +.diagonalCross { + background-image: none; + border: 1px solid #D5D5D5; + transform: rotate(-45deg); + position: absolute; + left: -80%; + right: -10.46%; + top: 82.5%; + bottom: 17.5%; +} + +.skuSelectorSubcontainer { + margin: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b9c3a55..96a83a4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -56,11 +56,6 @@ text-align: right; } -/*.productDescriptionContainer { - - -}*/ - .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -74,3 +69,93 @@ line-height: 22px; color: #929292; } + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorName, +.skuSelectorNameSeparator, +.skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} + +.skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #989898; + position: relative; +} + +.skuSelectorItemImage { + :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + width: 46px; + height: 46px; + } +} + +.frameAround { + display: none; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} + +.skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(185, 185, 185, 0.6); + width: 20px; +} + +.skuSelectorItemImage { + display: flex; + justify-content: center; + align-items: center; + border: none; +} + +.skuSelectorItem--selected{ + border: 2px solid #000000; + border-radius: 50%; + + :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { + color: #000000; + } +} + +.skuSelectorOptionsList { + gap: 16px; + margin: 0; +} + +.diagonalCross { + background-image: none; + + border: 1px solid #D5D5D5; + transform: rotate(-45deg); + + position: absolute; + left: -80%; + right: -10.46%; + top: 82.5%; + bottom: 17.5%; +} + +.skuSelectorSubcontainer { + margin: 0; +}