feature/product-page #2

Merged
cainamilech merged 2 commits from feature/product-page into master 2023-02-06 19:36:23 +00:00
9 changed files with 132 additions and 10 deletions

View File

@ -3,6 +3,7 @@
gap: 26px; gap: 26px;
align-items: center; align-items: center;
margin-top: 8px; margin-top: 8px;
width: 197px;
} }
.image { .image {

View File

@ -1,4 +1,9 @@
{ {
"html#tab-layout": {
"props": { "testId": "product-description" },
"children": ["tab-layout#details"]
},
"tab-layout#details": { "tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"], "children": ["tab-list#details", "tab-content#details"],
"props": { "props": {

View File

@ -3,7 +3,7 @@
"children": [ "children": [
"html#breadcontainer", "html#breadcontainer",
"condition-layout.product#availability", "condition-layout.product#availability",
"tab-layout#details", "html#tab-layout",
"list-context.product-list#prateleira", "list-context.product-list#prateleira",
"newsletter" "newsletter"
] ]
@ -60,6 +60,7 @@
}, },
"children": ["breadcrumb#pdp"] "children": ["breadcrumb#pdp"]
}, },
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
@ -68,6 +69,7 @@
"text": "##### Product Specifications" "text": "##### Product Specifications"
} }
}, },
"product-description": { "product-description": {
"props": { "props": {
"marginBottom": 7, "marginBottom": 7,
@ -151,19 +153,33 @@
"rowGap": 0 "rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "html#product-name",
"html#codigo", "html#codigo",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#selling-price", "html#selling-price",
"product-installments", "html#installments",
"html#pix", "html#pix",
"html#skus", "html#skus",
"html#qtd-btn", "html#qtd-btn",
"availability-subscriber", "availability-subscriber",
"shipping-simulator" "html#shipping-simulator"
] ]
}, },
"html#installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"product-installments": { "product-installments": {
"props": { "props": {
"installmentsCriteria": "max-quantity-without-interest", "installmentsCriteria": "max-quantity-without-interest",
@ -172,6 +188,13 @@
} }
}, },
"html#product-name": {
"props": {
"testId": "product-name"
},
"children": ["flex-layout.row#product-name"]
},
"flex-layout.row#product-name": { "flex-layout.row#product-name": {
"props": { "props": {
"marginBottom": 3, "marginBottom": 3,
@ -182,6 +205,7 @@
"html#codigo": { "html#codigo": {
"props": { "props": {
"testId": "product-code",
"blockClass": "codigo" "blockClass": "codigo"
}, },
"children": ["product-identifier.product"] "children": ["product-identifier.product"]
@ -291,5 +315,11 @@
"props": { "props": {
"blockClass": "frete" "blockClass": "frete"
} }
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
} }
} }

View File

@ -28,3 +28,7 @@
.spacer { .spacer {
display: none; display: none;
} }
.element {
padding: 0;
}

View File

@ -9,7 +9,17 @@
/* Grid breakpoints */ /* Grid breakpoints */
.container--title-prateleira { .container--title-prateleira {
margin-top: 16px; margin-top: 16px;
margin-bottom: 12px; margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
.container--title-prateleira {
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-prateleira {
margin-bottom: 16px;
}
} }
.container--title-prateleira .paragraph--title-prateleira { .container--title-prateleira .paragraph--title-prateleira {
margin: 0; margin: 0;

View File

@ -63,6 +63,11 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
} }
.frameAround--skus { .frameAround--skus {
@ -70,9 +75,14 @@
} }
.skuSelectorOptionsList { .skuSelectorOptionsList {
margin-left: -5px; display: flex;
margin-left: 0;
gap: 16px;
} }
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0; font-size: 0;
} }
@ -85,6 +95,10 @@
color: color-gray6; color: color-gray6;
} }
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus { .skuSelectorItemTextValue--skus {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -111,6 +125,9 @@
justify-content: center; justify-content: center;
display: flex; display: flex;
} }
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus { .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -118,6 +135,9 @@
color: #000000; color: #000000;
} }
.skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName { .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0; font-size: 0;
} }
@ -146,6 +166,10 @@
height: 48px; height: 48px;
} }
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.diagonalCross--skus { .diagonalCross--skus {
transform: rotate(80deg); transform: rotate(80deg);
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%); background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);

View File

@ -18,3 +18,7 @@
.spacer { .spacer {
display: none; display: none;
} }
.element {
padding: 0;
}

View File

@ -1,6 +1,12 @@
.container--title-prateleira { .container--title-prateleira {
margin-top: 16px; margin-top: 16px;
margin-bottom: 12px; margin-bottom: 32px;
@media screen and (max-width: 1024px) {
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
margin-bottom: 16px;
}
.paragraph--title-prateleira { .paragraph--title-prateleira {
margin: 0; margin: 0;

View File

@ -55,6 +55,11 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
} }
.frameAround--skus { .frameAround--skus {
@ -62,10 +67,14 @@
} }
.skuSelectorOptionsList { .skuSelectorOptionsList {
margin-left: -5px; display: flex;
margin-left: 0;
gap: 16px;
} }
.skuSelectorSubcontainer--tamanho { .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer { .skuSelectorNameContainer {
.skuSelectorTextContainer { .skuSelectorTextContainer {
.skuSelectorName { .skuSelectorName {
@ -84,6 +93,10 @@
} }
} }
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus { .skuSelectorItemTextValue--skus {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -101,6 +114,7 @@
display: flex; display: flex;
} }
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected { .skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus { .skuSelectorInternalBox--skus {
border: 2px solid $color-black-100; border: 2px solid $color-black-100;
@ -110,6 +124,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
} }
.skuSelectorItemTextValue--skus { .skuSelectorItemTextValue--skus {
@ -121,6 +144,8 @@
} }
.skuSelectorSubcontainer--cor { .skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorName { .skuSelectorName {
font-size: 0; font-size: 0;
@ -159,6 +184,20 @@
} }
} }
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
}
.diagonalCross--skus { .diagonalCross--skus {
transform: rotate(80deg); transform: rotate(80deg);
background-image: linear-gradient( background-image: linear-gradient(
@ -178,7 +217,6 @@
} }
//FRETE //FRETE
.shippingContainer { .shippingContainer {
display: flex; display: flex;
align-items: end; align-items: end;