SabrinaMiranda/challenge-vtex-io-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estiliza o bloco sku-selector

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-01 14:50:01 -03:00
parent aa056c6a4e
commit 14f815665b
3 changed files with 189 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
store/blocks/pdp/product.jsonc
View File

@ -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"
]
},

89
styles/css/vtex.store-components.css
View File

@ -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;
}

95
styles/sass/pages/product/vtex.store-components.scss
View File

@ -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;
}