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):estilzando estilizando opções de cores

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

15
docs/Todo.md
View File

@ -11,19 +11,20 @@ os Requisitos cobrados serão:
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c} - FIXME [Blocos que devem ser ajustado e desenvolvidos](dados_do_produto_e_de_compra-ao_lado_das_imagens){
- [x] 1. BreadCrumb; - [x] 1. BreadCrumb; {cm:2023-01-31}
- HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), - [x] 2. todo o bloco de imagens do produto, {cm:2023-01-31}
- HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo, - HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens
- HACK 4. prateleira de produtos, - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo,
- HACK 5. Newsletter. - HACK 5. prateleira de produtos,
- HACK 6. Newsletter.
- HACK dados_do_produto_e_de_compra-ao_lado_das_imagens
} }

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

@ -44,7 +44,7 @@
"paddingTop": 7, "paddingTop": 7,
"paddingBottom": 7 "paddingBottom": 7
}, },
"children": ["flex-layout.col#stack","flex-layout.col#right-col"] "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
}, },
"stack-layout": { "stack-layout": {

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

@ -7,36 +7,45 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.skuSelectorContainer--m3-custom-sku-selector { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector { .skuSelectorContainer .skuSelectorItemImage {
border-radius: 50%; width: 48px;
height: 48px;
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { .skuSelectorContainer .skuSelectorItem--selected .frameAround {
border-radius: 24px;
border: 2px solid #000000;
}
.skuSelectorContainer .frameAround {
width: 48px;
height: 48px;
z-index: 5;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase; text-transform: uppercase;
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:"; content: "ES:";
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS "; content: "OUTRAS ";
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { .skuSelectorContainer .skuSelectorInternalBox {
text-transform: uppercase; border: 2px solid #B9B9B9;
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { .skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox {
content: "S:"; width: 100%;
border-radius: 24px;
} }
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before { .skuSelectorContainer .diagonalCross {
content: "OUTROS "; border-radius: 24px;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector {
border-radius: 50%;
}
.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector {
border-radius: 50%;
} }
.carouselContainer { .carouselContainer {

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

@ -1,9 +1,24 @@
.skuSelectorContainer--m3-custom-sku-selector{ .skuSelectorContainer{
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
.skuSelectorItemImage{
.frameAround--m3-custom-sku-selector{ width: 48px;
border-radius: 50%; height: 48px;
}
.skuSelectorItem--selected{
.frameAround{
border-radius: 24px;
border: 2px solid #000000
}
}
.frameAround{
width: 48px;
height: 48px;
z-index: 5;
bottom: 0;
top: 0;
left: 0;
right: 0;
} }
.skuSelectorSubcontainer-{ .skuSelectorSubcontainer-{
&-cor{ &-cor{
@ -19,29 +34,32 @@
} }
} }
} }
&-tamanho{ // &-tamanho{
.skuSelectorTextContainer{ // .skuSelectorTextContainer{
.skuSelectorName{ // .skuSelectorName{
text-transform: uppercase; // text-transform: uppercase;
&::after{ // &::after{
content: "S:"; // content: "S:";
} // }
&::before{ // &::before{
content: "OUTROS "; // content: "OUTROS ";
} // }
} // }
} // }
// }
}
.skuSelectorInternalBox{
border: 2px solid #B9B9B9;
} }
} .skuSelectorItemImageValue,.skuSelectorInternalBox{
width: 100%;
border-radius: 24px;
.skuSelectorItemImageValue--m3-custom-sku-selector{
border-radius: 50%;
} }
.diagonalCross--m3-custom-sku-selector{ .diagonalCross{
border-radius: 50%; border-radius: 24px;
} }
} }
.carouselContainer{ .carouselContainer{