feat(selling-price e sku-selectors): Ajusta o selling-price e os sku-selectors
This commit is contained in:
parent
3055e413a1
commit
3141f4b9d5
@ -109,7 +109,7 @@
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
// "product-separator",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
|
@ -4,11 +4,10 @@
|
||||
"colGap": 2,
|
||||
"preserveLayoutOnMobile": true,
|
||||
"preventHorizontalStretch": true,
|
||||
"marginBottom": 4
|
||||
"marginBottom": 4,
|
||||
"blockClass": "preco"
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price"
|
||||
]
|
||||
"children": ["product-selling-price"]
|
||||
},
|
||||
|
||||
"flex-layout.row#list-price-savings": {
|
||||
@ -19,9 +18,6 @@
|
||||
"marginBottom": 2,
|
||||
"marginTop": 5
|
||||
},
|
||||
"children": [
|
||||
"product-list-price",
|
||||
"product-price-savings"
|
||||
]
|
||||
"children": ["product-list-price", "product-price-savings"]
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +1,6 @@
|
||||
{
|
||||
"modal-trigger#quickview": {
|
||||
"children": [
|
||||
"icon-expand",
|
||||
"modal-layout#quickview"
|
||||
],
|
||||
"children": ["icon-expand", "modal-layout#quickview"],
|
||||
"props": {
|
||||
"blockClass": "quickview"
|
||||
}
|
||||
@ -63,9 +60,7 @@
|
||||
},
|
||||
|
||||
"flex-layout.col#quickview-product-quantity": {
|
||||
"children": [
|
||||
"product-summary-quantity#quickview"
|
||||
]
|
||||
"children": ["product-summary-quantity#quickview"]
|
||||
},
|
||||
"product-summary-quantity#quickview": {
|
||||
"props": {
|
||||
@ -74,18 +69,14 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#quickview-add-to-card-button": {
|
||||
"children": [
|
||||
"add-to-cart-button"
|
||||
],
|
||||
"children": ["add-to-cart-button"],
|
||||
"props": {
|
||||
"width": "grow"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#quickview-actions-2": {
|
||||
"children": [
|
||||
"link.product#button-pdp"
|
||||
]
|
||||
"children": ["link.product#button-pdp"]
|
||||
},
|
||||
"link.product#button-pdp": {
|
||||
"props": {
|
||||
@ -107,15 +98,10 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#quickview-images": {
|
||||
"children": [
|
||||
"product-images#quickview"
|
||||
]
|
||||
"children": ["product-images#quickview"]
|
||||
},
|
||||
"flex-layout.col#quickview-product-details": {
|
||||
"children": [
|
||||
"modal-content#quickview",
|
||||
"modal-actions#quickview"
|
||||
],
|
||||
"children": ["modal-content#quickview", "modal-actions#quickview"],
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"blockClass": "quickviewDetails"
|
||||
@ -134,7 +120,7 @@
|
||||
"blockClass": "quickview"
|
||||
}
|
||||
},
|
||||
"product-images#quickview" : {
|
||||
"product-images#quickview": {
|
||||
"props": {
|
||||
"blockClass": "quickview",
|
||||
"showNavigationArrows": true
|
||||
|
@ -255,84 +255,84 @@
|
||||
"measure": [30, 34, 20],
|
||||
"styles": {
|
||||
"heading-1": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "3rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-2": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "'Open Sans', sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "2.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-3": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "1.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-4": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.5rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-5": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-6": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"body": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"small": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"mini": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--small": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--large": {
|
||||
"fontFamily": "Open Sans",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "uppercase",
|
||||
|
@ -7,6 +7,11 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.flexRowContent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexRowContent--preco {
|
||||
margin: 0;
|
||||
}
|
@ -7,7 +7,42 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.savings,
|
||||
.listPrice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-size: 0;
|
||||
}
|
||||
.installmentsNumber {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installmentsNumber::after {
|
||||
content: " x ";
|
||||
}
|
||||
|
||||
.installmentValue .currencyContainer {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installmentValue .currencyContainer::before {
|
||||
content: "de ";
|
||||
font-weight: 400;
|
||||
}
|
||||
.installmentValue .currencyContainer::after {
|
||||
content: " sem juros ";
|
||||
font-weight: 400;
|
||||
}
|
@ -7,12 +7,16 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.container .productImagesThumb {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.container .productImageTag {
|
||||
object-fit: fill !important;
|
||||
}
|
||||
.container .productNameContainer {
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
@ -21,3 +25,69 @@
|
||||
color: #575757;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.container .skuSelectorSubcontainer {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container .skuSelectorNameContainer {
|
||||
margin: 0;
|
||||
}
|
||||
.container .skuSelectorTextContainer {
|
||||
font-size: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.container .skuSelectorTextContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorTextContainer .skuSelectorName:last-child::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorTextContainer .skuSelectorName::before {
|
||||
content: "OUTRAS CORES";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorTextContainer .skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.container .skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.container .frameAround {
|
||||
border-radius: 24px;
|
||||
border: 1px solid #989898;
|
||||
}
|
||||
.container .skuSelectorItem--selected .frameAround {
|
||||
border-radius: 24px;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
.container .skuSelectorItem--selected .skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
.container .skuSelectorInternalBox {
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container .skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(185, 185, 185, 0.6);
|
||||
}
|
@ -1,3 +1,7 @@
|
||||
.flexRowContent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexRowContent--preco {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -2,3 +2,42 @@
|
||||
.listPrice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-size: 0;
|
||||
|
||||
&Number {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray7;
|
||||
|
||||
&::after {
|
||||
content: " x ";
|
||||
}
|
||||
}
|
||||
}
|
||||
.installmentValue {
|
||||
.currencyContainer {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray7;
|
||||
|
||||
&::before {
|
||||
content: "de ";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " sem juros ";
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -8,6 +8,10 @@
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
object-fit: fill !important;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
@ -16,4 +20,87 @@
|
||||
color: $color-gray6;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skuSelectorNameContainer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skuSelectorTextContainer {
|
||||
font-size: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray7;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "OUTRAS CORES";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray7;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.frameAround {
|
||||
border-radius: 24px;
|
||||
border: 1px solid $color-gray8;
|
||||
}
|
||||
|
||||
.skuSelectorItem--selected {
|
||||
.frameAround {
|
||||
border-radius: 24px;
|
||||
border: 2px solid $color-black2;
|
||||
}
|
||||
.skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorInternalBox {
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(185, 185, 185, 0.6);
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
$color-black: #292929;
|
||||
$color-black2: #000000;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
@ -9,6 +10,7 @@ $color-gray4: #c4c4c4;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #575757;
|
||||
$color-gray7: #929292;
|
||||
$color-gray8: #989898;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
@ -31,3 +33,7 @@ $z-index: (
|
||||
level4: 20,
|
||||
level5: 25,
|
||||
) !default;
|
||||
|
||||
//Fonts
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
|
Loading…
Reference in New Issue
Block a user