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

@ -24,6 +24,8 @@ os Requisitos cobrados serão:
- HACK 5. prateleira de produtos, - HACK 5. prateleira de produtos,
- HACK 6. Newsletter. - HACK 6. Newsletter.
- HACK 7. fazer o pix.
} }

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

@ -124,7 +124,8 @@
"sku-selector": { "sku-selector": {
"props": { "props": {
"variationsSpacing": 3, "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 { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS "; 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 { .skuSelectorContainer .skuSelectorInternalBox {
border: 2px solid #B9B9B9; border: 2px solid #B9B9B9;
} }

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

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