From a827c225b3cee646d43ae37e3261544750a7d786 Mon Sep 17 00:00:00 2001 From: devartes Date: Mon, 6 Feb 2023 19:06:09 -0300 Subject: [PATCH] style: adicionando css do parcelamento e do slider --- styles/css/vtex.product-price.css | 118 ++++++++++++++++++ .../vtexProduct/vtex.product-price.scss | 107 +++++++++++++++- 2 files changed, 224 insertions(+), 1 deletion(-) diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index c22a76c..9243a0d 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -13,4 +13,122 @@ line-height: 38px; color: #000000; margin-top: 24px; +} + +.installments--product-installments { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments--product-installments .installmentsNumber { + font-weight: 700; +} +.installments--product-installments .installmentsNumber::after { + content: "x"; + margin-left: 4px; +} +.installments--product-installments .installmentValue { + font-weight: 700; +} + +.listPrice { + padding: 0; + text-align: center; + height: 19px !important; + display: flex; + justify-content: center; + margin-bottom: 8px; + line-height: 19px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .listPrice { + height: 16px !important; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .listPrice { + height: 16px !important; + line-height: 16px; + } +} +.listPrice :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; +} +.listPrice .listPriceValue { + padding: 0; +} +.listPrice .listPriceValue .currencyContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #bababa; + display: block; +} +@media (max-width: 1025px) and (min-width: 768px) { + .listPrice .listPriceValue .currencyContainer { + font-size: 12px; + line-height: 16px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .listPrice .listPriceValue .currencyContainer { + font-size: 12px; + line-height: 16px; + } +} +.listPrice .listPriceValue .currencyContainer::before { + content: "de "; +} +.listPrice .listPriceValue .currencyContainer::after { + content: " por"; +} + +.sellingPrice { + display: flex; + justify-content: center; + margin: 0; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice { + line-height: 25px; + } +} +.sellingPrice .sellingPriceValue { + height: 33px; + line-height: 33px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice .sellingPriceValue { + line-height: 25px; + height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sellingPrice .sellingPriceValue { + line-height: 25px; + height: 25px; + } +} +.sellingPrice .sellingPriceValue .currencyContainer { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +@media (max-width: 1025px) and (min-width: 768px) { + .sellingPrice .sellingPriceValue .currencyContainer { + font-size: 18px; + line-height: 25px; + } +} +@media (max-width: 768px) and (min-width: 375px) { + .sellingPrice .sellingPriceValue .currencyContainer { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss index 1690d69..c2f638f 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss @@ -1,4 +1,4 @@ -//dados produto +//Dados produto .sellingPrice { font-weight: 700; @@ -7,3 +7,108 @@ color: $black; margin-top: 24px; } + +//Parcelamento + +.installments--product-installments { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $gray; + .installmentsNumber { + font-weight: 700; + &::after { + content: "x"; + margin-left: 4px; + } + } + .installmentValue { + font-weight: 700; + } +} + +//Slider + +.listPrice { + padding: 0; + text-align: center; + height: 19px !important; + display: flex; + justify-content: center; + margin-bottom: 8px; + line-height: 19px; + @media (max-width: 1025px) and (min-width: 768px) { + height: 16px !important; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + height: 16px !important; + line-height: 16px; + } + :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; + } + .listPriceValue { + padding: 0; + .currencyContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: $BABABA; + display: block; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 12px; + line-height: 16px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 12px; + line-height: 16px; + } + &::before { + content: "de "; + } + &::after { + content: " por"; + } + } + } +} + +.sellingPrice { + display: flex; + justify-content: center; + margin: 0; + + @media (max-width: 1025px) and (min-width: 768px) { + line-height: 25px; + } + .sellingPriceValue { + height: 33px; + line-height: 33px; + @media (max-width: 1025px) and (min-width: 768px) { + line-height: 25px; + height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + line-height: 25px; + height: 25px; + } + .currencyContainer { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: $black; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 18px; + line-height: 25px; + } + @media (max-width: 768px) and (min-width: 375px) { + font-size: 18px; + line-height: 25px; + } + } + } +}