feat: Estiliza container de skus

This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-24 23:22:27 -03:00
parent 2cc75c71ac
commit 892cd902e9
11 changed files with 328 additions and 75 deletions

View File

@ -105,20 +105,17 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"product-separator",
"product-identifier.product",
"sku-selector", "sku-selector",
"product-quantity", "product-quantity",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "shipping-simulator"
"share#default"
] ]
}, },
@ -132,7 +129,8 @@
"sku-selector": { "sku-selector": {
"props": { "props": {
"variationsSpacing": 3, "variationsSpacing": 3,
"showValueNameForImageVariation": true "showValueNameForImageVariation": true,
"blockClass": "size-sku"
} }
}, },
@ -174,16 +172,5 @@
"blockClass": "message-availability" "blockClass": "message-availability"
}, },
"children": ["availability-subscriber"] "children": ["availability-subscriber"]
},
"share#default": {
"props": {
"social": {
"Facebook": true,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
}
}
} }
} }

View File

@ -1,9 +1,6 @@
{ {
"modal-trigger#quickview": { "modal-trigger#quickview": {
"children": [ "children": ["icon-expand", "modal-layout#quickview"],
"icon-expand",
"modal-layout#quickview"
],
"props": { "props": {
"blockClass": "quickview" "blockClass": "quickview"
} }
@ -63,9 +60,7 @@
}, },
"flex-layout.col#quickview-product-quantity": { "flex-layout.col#quickview-product-quantity": {
"children": [ "children": ["product-summary-quantity#quickview"]
"product-summary-quantity#quickview"
]
}, },
"product-summary-quantity#quickview": { "product-summary-quantity#quickview": {
"props": { "props": {
@ -74,18 +69,14 @@
} }
}, },
"flex-layout.col#quickview-add-to-card-button": { "flex-layout.col#quickview-add-to-card-button": {
"children": [ "children": ["add-to-cart-button"],
"add-to-cart-button"
],
"props": { "props": {
"width": "grow" "width": "grow"
} }
}, },
"flex-layout.row#quickview-actions-2": { "flex-layout.row#quickview-actions-2": {
"children": [ "children": ["link.product#button-pdp"]
"link.product#button-pdp"
]
}, },
"link.product#button-pdp": { "link.product#button-pdp": {
"props": { "props": {
@ -107,15 +98,10 @@
} }
}, },
"flex-layout.col#quickview-images": { "flex-layout.col#quickview-images": {
"children": [ "children": ["product-images#quickview"]
"product-images#quickview"
]
}, },
"flex-layout.col#quickview-product-details": { "flex-layout.col#quickview-product-details": {
"children": [ "children": ["modal-content#quickview", "modal-actions#quickview"],
"modal-content#quickview",
"modal-actions#quickview"
],
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"blockClass": "quickviewDetails" "blockClass": "quickviewDetails"
@ -134,7 +120,7 @@
"blockClass": "quickview" "blockClass": "quickview"
} }
}, },
"product-images#quickview" : { "product-images#quickview": {
"props": { "props": {
"blockClass": "quickview", "blockClass": "quickview",
"showNavigationArrows": true "showNavigationArrows": true

View File

@ -1,5 +1,18 @@
@font-face { @font-face {
font-family: "Roboto"; font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Regular.ttf"); src: url("assets/fonts/OpenSans-Regular.ttf");
font-weight: 400; font-weight: 400;
} }
@font-face {
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Bold.ttf");
font-weight: 700;
}

View File

@ -95,7 +95,7 @@
max-height: 100%; max-height: 100%;
} }
.flexColChild--quickviewDetails:first-child { .flexRowContent .flexColChild--quickviewDetails:first-child {
overflow-y: auto; overflow-y: auto;
height: 66% !important; height: 66% !important;
overflow-x: hidden; overflow-x: hidden;

View File

@ -1,3 +1,27 @@
.product-identifier--productReference { /*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* .product-identifier--productReference {
margin-bottom: 1rem; margin-bottom: 1rem;
} */
.product-identifier__label {
display: none;
} }
.product-identifier__separator {
display: none;
}
.product-identifier__value {
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}

View File

@ -11,29 +11,17 @@
display: none; display: none;
} }
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue { .sellingPriceValue {
font-size: 2.25rem;
font-weight: 700; font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
} }
.installments { .installments {
color: #727273; color: #929292;
margin-bottom: 1rem; margin-bottom: 16px;
}
.savings {
display: none;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
} }
.savings--summary { .savings--summary {
@ -68,6 +56,16 @@
font-size: 0.875rem; font-size: 0.875rem;
} }
.installments {
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments .installmentsNumber,
.installments .installmentValue {
font-weight: 700;
}
.savings--summaryPercentage { .savings--summaryPercentage {
background: #0f3e99; background: #0f3e99;
border-radius: 1000px; border-radius: 1000px;

View File

@ -21,6 +21,14 @@
} }
} }
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productImageTag--main { .productImageTag--main {
max-height: max-content !important; max-height: max-content !important;
max-width: 664px; max-width: 664px;
@ -49,4 +57,86 @@
.productImagesThumb { .productImagesThumb {
max-width: 90px; max-width: 90px;
margin-right: 16px; margin-right: 16px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
order: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
order: 1;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
border-radius: 50%;
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
border-color: #000000;
top: -2px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
top: 4px;
right: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku {
color: #000000;
}
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
} }

View File

@ -89,6 +89,13 @@
max-height: 100%; max-height: 100%;
} }
// .flexColChild:first-child {
// display: flex;
// align-self: flex-end;
// }
.flexRowContent
.flexColChild--quickviewDetails:first-child { .flexColChild--quickviewDetails:first-child {
overflow-y: auto; overflow-y: auto;
height: 66% !important; height: 66% !important;

View File

@ -0,0 +1,29 @@
/* .product-identifier--productReference {
margin-bottom: 1rem;
} */
// .info-availability {
// display: flex;
// align-self: flex-end;
// }
.product-identifier {
&__label {
display: none;
}
&__separator {
display: none;
}
&__value {
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
}

View File

@ -5,30 +5,28 @@
// font-size: 1rem; // font-size: 1rem;
} }
.sellingPrice { // .sellingPrice {
color: #3f3f40; // margin: 0;
font-size: 1.25rem; // }
}
.sellingPriceValue { .sellingPriceValue {
font-size: 2.25rem;
font-weight: 700; font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $black;
margin: 0;
} }
.installments { .installments {
color: #727273; color: $gray-500;
margin-bottom: 1rem; margin-bottom: 16px;
} }
.savings { // .sellingPriceValue--summary {
display: none; // font-size: 1.25rem;
} // font-weight: 600;
// color: $black;
.sellingPriceValue--summary { // }
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
}
.savings--summary { .savings--summary {
background: #8bc34a; background: #8bc34a;
@ -63,6 +61,17 @@ display: none;
font-size: 0.875rem; font-size: 0.875rem;
} }
.installments {
font-size: 16px;
line-height: 22px;
color: $gray-500;
.installmentsNumber,
.installmentValue {
font-weight: 700;
}
}
.savings--summaryPercentage { .savings--summaryPercentage {
background: #0f3e99; background: #0f3e99;
border-radius: 1000px; border-radius: 1000px;

View File

@ -23,6 +23,14 @@
// width: 664px !important; // width: 664px !important;
// } // }
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: $gray-600;
}
.productImageTag--main { .productImageTag--main {
max-height: max-content !important; max-height: max-content !important;
max-width: 664px; max-width: 664px;
@ -52,3 +60,105 @@
max-width: 90px; max-width: 90px;
margin-right: 16px; margin-right: 16px;
} }
.skuSelectorContainer {
display: flex;
flex-direction: column;
.skuSelectorSubcontainer--cor {
order: 2;
.frameAround,
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 50%;
}
.frameAround {
border-color: $black;
}
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
}
}
.skuSelectorSelectorImageValue {
display: none;
}
}
}
.skuSelectorSubcontainer--tamanho {
order: 1;
.skuSelectorItemTextValue{
padding: 0;
margin: auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.frameAround,
.skuSelectorInternalBox {
border-radius: 50%;
width: 40px;
height: 40px;
}
.frameAround {
border-color: $black;
top: -2px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.diagonalCross {
top: 4px;
right: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
}
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-500;
}
}
.skuSelectorSelectorImageValue {
display: none;
}
}
}
}
.skuSelectorItem--size-sku--selected {
.skuSelectorItemTextValue--size-sku {
color: $black;
}
}
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}