forked from M3-Academy/challenge-vtex-io
feat(dados_de_compra):estilzando estilizando opções de cores
This commit is contained in:
parent
8637483976
commit
40394780af
15
docs/Todo.md
15
docs/Todo.md
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
@ -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": {
|
||||
|
@ -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 {
|
||||
|
@ -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,28 +34,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tamanho{
|
||||
.skuSelectorTextContainer{
|
||||
.skuSelectorName{
|
||||
text-transform: uppercase;
|
||||
&::after{
|
||||
content: "S:";
|
||||
}
|
||||
&::before{
|
||||
content: "OUTROS ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-tamanho{
|
||||
// .skuSelectorTextContainer{
|
||||
// .skuSelectorName{
|
||||
// text-transform: uppercase;
|
||||
// &::after{
|
||||
// content: "S:";
|
||||
// }
|
||||
// &::before{
|
||||
// content: "OUTROS ";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.skuSelectorItemImageValue--m3-custom-sku-selector{
|
||||
border-radius: 50%;
|
||||
.skuSelectorInternalBox{
|
||||
border: 2px solid #B9B9B9;
|
||||
}
|
||||
.skuSelectorItemImageValue,.skuSelectorInternalBox{
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.diagonalCross--m3-custom-sku-selector{
|
||||
border-radius: 50%;
|
||||
.diagonalCross{
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user