From a8b972c0a17cbb3935ff4059b141f0db3fbb2650 Mon Sep 17 00:00:00 2001 From: danielmoliaribarbosa Date: Fri, 10 Feb 2023 15:54:21 -0300 Subject: [PATCH 1/2] feat(product-identifer): Implementa SASS do block product-identifier --- .../sass/pages/product/vtex.flex-layout.scss | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..621d1c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,115 @@ +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; + + :global(.vtex-flex-layout-0-x-flexRowContent) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; + } + } + + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; + + @media (max-width: 1024px) { + flex-direction: column; + } + + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; + } + } + } +} + +.addButton { + width: 100%; +} + +.flexRow--buyButton { + width: 100%; + + .flexRowContent--buyButton { + margin: 0; + + :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; + border-radius: unset; + } + + :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; + + &::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #ffffff; + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .flexColChild { + width: 100%; + } +} + +@media screen and (max-width: 376px) { + :global(.vtex-add-to-cart-button-0-x-buttonText) { + max-width: 168px; + } + + .flexRow--buyButton { + .flexRowContent--buyButton { + :global(.vtex-button) { + height: 74px !important; + } + } + } +} + +@media screen and (min-width: 2500px) { + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-store-components-3-x-container) { + max-width: 100%; + margin: 0 320px; + } + } + + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-telemarketing-2-x-wrapper) { + :global(.vtex-telemarketing-2-x-container) { + max-width: 100%; + margin: 0 !important; + } + } + } +} From c25ee924df6f23c6421111f69f817c3fb39426fb Mon Sep 17 00:00:00 2001 From: danielmoliaribarbosa Date: Fri, 10 Feb 2023 15:57:41 -0300 Subject: [PATCH 2/2] feat(product-price): Implementa SASS do block product-price --- .../pages/product/vtex.product-price.scss | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 styles/sass/pages/product/vtex.product-price.scss 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..ccfc6be --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,77 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: #000000; +} + +.flexRowContent { + margin: 0 !important; +} + +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; + + &::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; + } + + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; + } + + .currencyCode, + .currencyLiteral, + .currencyInteger, + .currencyDecimal, + .currencyFraction { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + } + + .currencyGroup { + color: #BABABA; + } +} + + +@media screen and (max-width:1024px) { + .listPrice{ + height: 19px; + } + .listPriceValue { + .currencyCode, + .currencyLiteral, + .currencyInteger, + .currencyFraction { + font-size: 12px; + line-height: 16px; + } + } + + .sellingPrice { + font-size: 18px; + line-height: 25px; + } +}