feat: Estiliza container de skus
This commit is contained in:
parent
2cc75c71ac
commit
892cd902e9
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
}
|
}
|
@ -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;
|
||||||
|
@ -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;
|
||||||
@ -50,3 +58,85 @@
|
|||||||
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);
|
||||||
|
}
|
@ -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;
|
||||||
|
29
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
29
styles/sass/pages/product/vtex.product-identifier.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user