From af3a27ec2a6e2d26c216d660fad2b2cbc8a559d6 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 31 Jan 2023 20:20:46 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20feito=20estiliza=C3=A7=C3=A3o=20dos=20b?= =?UTF-8?q?locos=20product-name,=20product-identifier.product=20,product-s?= =?UTF-8?q?elling-price=20e=20product-installments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 4 +- styles/css/vtex.product-identifier.css | 28 +++++- styles/css/vtex.product-price.css | 93 ++++--------------- styles/css/vtex.store-components.css | 30 ++++++ .../product/vtex.product-identifier.scss | 18 ++++ .../pages/product/vtex.product-price.scss | 13 +++ .../pages/product/vtex.store-components.scss | 31 +++++++ 7 files changed, 137 insertions(+), 80 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 33db0f8..f624186 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -107,12 +107,10 @@ }, "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", diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..1453a03 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,27 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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__label, +.product-identifier__separator { + display: none; } + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: right; + margin-top: 8px; + margin-bottom: 24px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b41b0ed 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +/* +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 */ +.sellingPrice--hasListPrice { font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 470eb35..e1d1e8c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,4 +63,34 @@ .content { max-width: 500px; } +} + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.productNameContainer--quickview { + text-align: right; +} + +/*.productDescriptionContainer { + + +}*/ +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file 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..98022d1 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,18 @@ +.product-identifier__label, +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: right; + margin-top: 8px; + margin-bottom: 24px; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..4ec1fff --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,13 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 331c289..b9c3a55 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -43,3 +43,34 @@ max-width: 500px; } } + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.productNameContainer--quickview{ + text-align: right; +} + +/*.productDescriptionContainer { + + +}*/ + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +}