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
- 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,
"paddingBottom": 7
},
"children": ["flex-layout.col#stack","flex-layout.col#right-col"]
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
"stack-layout": {

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

@ -7,36 +7,45 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.skuSelectorContainer--m3-custom-sku-selector {
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector {
border-radius: 50%;
.skuSelectorContainer .skuSelectorItemImage {
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;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS ";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
.skuSelectorContainer .skuSelectorInternalBox {
border: 2px solid #B9B9B9;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
.skuSelectorContainer .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorInternalBox {
width: 100%;
border-radius: 24px;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTROS ";
}
.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%;
.skuSelectorContainer .diagonalCross {
border-radius: 24px;
}
.carouselContainer {

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

@ -1,9 +1,24 @@
.skuSelectorContainer--m3-custom-sku-selector{
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
.frameAround--m3-custom-sku-selector{
border-radius: 50%;
.skuSelectorItemImage{
width: 48px;
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-{
&-cor{
@ -19,29 +34,32 @@
}
}
}
&-tamanho{
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
&::after{
content: "S:";
}
&::before{
content: "OUTROS ";
}
}
}
// &-tamanho{
// .skuSelectorTextContainer{
// .skuSelectorName{
// text-transform: uppercase;
// &::after{
// content: "S:";
// }
// &::before{
// content: "OUTROS ";
// }
// }
// }
// }
}
.skuSelectorInternalBox{
border: 2px solid #B9B9B9;
}
}
.skuSelectorItemImageValue--m3-custom-sku-selector{
border-radius: 50%;
.skuSelectorItemImageValue,.skuSelectorInternalBox{
width: 100%;
border-radius: 24px;
}
.diagonalCross--m3-custom-sku-selector{
border-radius: 50%;
}
.diagonalCross{
border-radius: 24px;
}
}
.carouselContainer{