diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6dd4a2f..25c4c3c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -105,20 +105,17 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, @@ -132,7 +129,8 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "size-sku" } }, @@ -174,16 +172,5 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -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 diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css index 82bb3dd..6d4199a 100644 --- a/styles/configs/font-faces.css +++ b/styles/configs/font-faces.css @@ -1,5 +1,18 @@ @font-face { - font-family: "Roboto"; + font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Regular.ttf"); 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; +} + diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 7a6df69..03e8c8f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -95,7 +95,7 @@ max-height: 100%; } -.flexColChild--quickviewDetails:first-child { +.flexRowContent .flexColChild--quickviewDetails:first-child { overflow-y: auto; height: 66% !important; overflow-x: hidden; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..f956e09 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -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; +} */ +.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); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 3932d84..e26f032 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -11,29 +11,17 @@ display: none; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; + margin: 0; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - display: none; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2e2e2e; + color: #929292; + margin-bottom: 16px; } .savings--summary { @@ -68,6 +56,16 @@ font-size: 0.875rem; } +.installments { + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments .installmentsNumber, +.installments .installmentValue { + font-weight: 700; +} + .savings--summaryPercentage { background: #0f3e99; border-radius: 1000px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8ca4fd7..4ab4e3b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -21,6 +21,14 @@ } } +.productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + .productImageTag--main { max-height: max-content !important; max-width: 664px; @@ -49,4 +57,86 @@ .productImagesThumb { max-width: 90px; 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); } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5be2ea5..d11c849 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -89,6 +89,13 @@ max-height: 100%; } +// .flexColChild:first-child { +// display: flex; +// align-self: flex-end; +// } + +.flexRowContent + .flexColChild--quickviewDetails:first-child { overflow-y: auto; height: 66% !important; diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..29581db --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -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); + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index e7d8b24..1e892ab 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -5,30 +5,28 @@ // font-size: 1rem; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} +// .sellingPrice { +// margin: 0; +// } .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $black; + margin: 0; } .installments { - color: #727273; - margin-bottom: 1rem; + color: $gray-500; + margin-bottom: 16px; } -.savings { -display: none; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2e2e2e; -} +// .sellingPriceValue--summary { +// font-size: 1.25rem; +// font-weight: 600; +// color: $black; +// } .savings--summary { background: #8bc34a; @@ -63,6 +61,17 @@ display: none; font-size: 0.875rem; } +.installments { + font-size: 16px; + line-height: 22px; + color: $gray-500; + + .installmentsNumber, + .installmentValue { + font-weight: 700; + } +} + .savings--summaryPercentage { background: #0f3e99; border-radius: 1000px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ec1e657..fda317e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,6 +23,14 @@ // width: 664px !important; // } +.productNameContainer--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: $gray-600; +} + .productImageTag--main { max-height: max-content !important; max-width: 664px; @@ -52,3 +60,105 @@ max-width: 90px; 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); +}