feature/product-page #2
@ -3,6 +3,7 @@
|
||||
gap: 26px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
width: 197px;
|
||||
}
|
||||
|
||||
.image {
|
||||
|
@ -1,4 +1,9 @@
|
||||
{
|
||||
"html#tab-layout": {
|
||||
"props": { "testId": "product-description" },
|
||||
"children": ["tab-layout#details"]
|
||||
},
|
||||
|
||||
"tab-layout#details": {
|
||||
"children": ["tab-list#details", "tab-content#details"],
|
||||
"props": {
|
||||
|
@ -3,7 +3,7 @@
|
||||
"children": [
|
||||
"html#breadcontainer",
|
||||
"condition-layout.product#availability",
|
||||
"tab-layout#details",
|
||||
"html#tab-layout",
|
||||
"list-context.product-list#prateleira",
|
||||
"newsletter"
|
||||
]
|
||||
@ -60,6 +60,7 @@
|
||||
},
|
||||
"children": ["breadcrumb#pdp"]
|
||||
},
|
||||
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
},
|
||||
@ -68,6 +69,7 @@
|
||||
"text": "##### Product Specifications"
|
||||
}
|
||||
},
|
||||
|
||||
"product-description": {
|
||||
"props": {
|
||||
"marginBottom": 7,
|
||||
@ -151,19 +153,33 @@
|
||||
"rowGap": 0
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"html#product-name",
|
||||
"html#codigo",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"html#selling-price",
|
||||
"html#installments",
|
||||
"html#pix",
|
||||
"html#skus",
|
||||
"html#qtd-btn",
|
||||
"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": {
|
||||
"props": {
|
||||
"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": {
|
||||
"props": {
|
||||
"marginBottom": 3,
|
||||
@ -182,6 +205,7 @@
|
||||
|
||||
"html#codigo": {
|
||||
"props": {
|
||||
"testId": "product-code",
|
||||
"blockClass": "codigo"
|
||||
},
|
||||
"children": ["product-identifier.product"]
|
||||
@ -291,5 +315,11 @@
|
||||
"props": {
|
||||
"blockClass": "frete"
|
||||
}
|
||||
},
|
||||
"html#shipping-simulator": {
|
||||
"props": {
|
||||
"testId": "shipping-simulator"
|
||||
},
|
||||
"children": ["shipping-simulator"]
|
||||
}
|
||||
}
|
||||
|
@ -28,3 +28,7 @@
|
||||
.spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
@ -9,7 +9,17 @@
|
||||
/* Grid breakpoints */
|
||||
.container--title-prateleira {
|
||||
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 {
|
||||
margin: 0;
|
||||
|
@ -63,6 +63,11 @@
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skuSelectorNameContainer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frameAround--skus {
|
||||
@ -70,9 +75,14 @@
|
||||
}
|
||||
|
||||
.skuSelectorOptionsList {
|
||||
margin-left: -5px;
|
||||
display: flex;
|
||||
margin-left: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
@ -85,6 +95,10 @@
|
||||
color: color-gray6;
|
||||
}
|
||||
|
||||
.skuSelectorItem {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue--skus {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -111,6 +125,9 @@
|
||||
justify-content: center;
|
||||
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 {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -118,6 +135,9 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
margin: 0;
|
||||
}
|
||||
.skuSelectorSubcontainer--cor .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
@ -146,6 +166,10 @@
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
|
||||
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
|
||||
}
|
||||
|
||||
.diagonalCross--skus {
|
||||
transform: rotate(80deg);
|
||||
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);
|
||||
|
@ -18,3 +18,7 @@
|
||||
.spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.element {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -1,6 +1,12 @@
|
||||
.container--title-prateleira {
|
||||
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 {
|
||||
margin: 0;
|
||||
|
@ -55,6 +55,11 @@
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skuSelectorNameContainer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frameAround--skus {
|
||||
@ -62,10 +67,14 @@
|
||||
}
|
||||
|
||||
.skuSelectorOptionsList {
|
||||
margin-left: -5px;
|
||||
display: flex;
|
||||
margin-left: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.skuSelectorNameContainer {
|
||||
.skuSelectorTextContainer {
|
||||
.skuSelectorName {
|
||||
@ -84,6 +93,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItem {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue--skus {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -101,6 +114,7 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//SKU INDISPONIVEL SELECIONADO
|
||||
.skuSelectorItem--skus--selected {
|
||||
.skuSelectorInternalBox--skus {
|
||||
border: 2px solid $color-black-100;
|
||||
@ -110,6 +124,15 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
.diagonalCross--skus {
|
||||
background-image: linear-gradient(
|
||||
to top right,
|
||||
transparent 44%,
|
||||
#000 48%,
|
||||
transparent 52%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue--skus {
|
||||
@ -121,6 +144,8 @@
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
margin: 0;
|
||||
|
||||
.skuSelectorName {
|
||||
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 {
|
||||
transform: rotate(80deg);
|
||||
background-image: linear-gradient(
|
||||
@ -178,7 +217,6 @@
|
||||
}
|
||||
|
||||
//FRETE
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
Loading…
Reference in New Issue
Block a user