Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dados_de_compra):seletores de sku estilizados

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-31 20:56:56 -03:00
parent 40394780af
commit b3654c7c33
4 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/Todo.md
View File

@ -25,6 +25,8 @@ os Requisitos cobrados serão:
- HACK 6. Newsletter.
- HACK 7. fazer o pix.
}

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

@ -124,7 +124,8 @@
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
"showValueNameForImageVariation": true,
"name": "Outro Tamanho"
}
},

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

@ -37,6 +37,27 @@
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS ";
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
top: -2px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTROS ";
}
.skuSelectorContainer .skuSelectorInternalBox {
border: 2px solid #B9B9B9;
}

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

@ -34,19 +34,31 @@
}
}
}
// &-tamanho{
// .skuSelectorTextContainer{
// .skuSelectorName{
// text-transform: uppercase;
// &::after{
// content: "S:";
// }
// &::before{
// content: "OUTROS ";
// }
// }
// }
// }
&-tamanho{
.frameAround{
width: 40px;
height: 40px;
top: -2px;
}
.skuSelectorItemTextValue{
padding: 0;
}
.skuSelectorInternalBox{
width: 40px;
height: 40px;
}
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
&::after{
content: "S:";
}
&::before{
content: "OUTROS ";
}
}
}
}
}
.skuSelectorInternalBox{