From 96fe5b7436b3520c42ac675601812b7816c65b26 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Mon, 6 Feb 2023 19:31:21 -0300 Subject: [PATCH] feat: adiciona variaveis de cores e fonte --- styles/css/vtex.store-components.css | 10 ++++---- .../pages/product/vtex.product-summary.scss | 10 ++++---- styles/sass/pages/product/vtex.rich-text.scss | 8 +++---- .../pages/product/vtex.store-components.scss | 24 +++++++++---------- .../sass/pages/product/vtex.tab-layout.scss | 10 ++++---- styles/sass/utils/_vars.scss | 7 +++++- 6 files changed, 37 insertions(+), 32 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7899658..51e6dd1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,7 +9,7 @@ /* Grid breakpoints */ .newsletter { background: #000000; - color: #fff; + color: #ffffff; margin: 64px 0; } @media (max-width: 1024px) { @@ -40,13 +40,13 @@ font-size: 0; } .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::before { - font-family: "Open Sans", sans-serif; + font-family: "Open Sans"; content: "Assine nossa newsletter"; font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; - color: #FFFFFF; + color: #ffffff; padding-bottom: 4px; } @media (max-width: 1920px) { @@ -56,7 +56,7 @@ } .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans", sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -86,7 +86,7 @@ color: #929292; } .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { - font-family: "Open Sans", sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index d4dff55..1ee603b 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -34,7 +34,7 @@ } :global(.vtex-product-summary-2-x-brandName) { - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 18px; @@ -58,14 +58,14 @@ padding-top: 0 !important; padding-bottom: 0 !important; - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; text-align: center; text-decoration-line: line-through; - color: #BABABA; + color: $color-gray9; @media (max-width:767px) { font-size: 12px; @@ -79,7 +79,7 @@ } .price_sellingPrice { - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 700; font-size: 24px; @@ -93,4 +93,4 @@ } } -} \ No newline at end of file +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index fb5da86..c58633f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,19 +1,19 @@ .container--m3-shipping-simulator-title { .paragraph { - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; + color: $color-gray6; text-transform: uppercase; margin-bottom: 8px; } } .paragraph--m3-shelf-related-title { - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 24px; @@ -21,7 +21,7 @@ text-align: center; - color: #575757; + color: $color-black3; @media (max-width:768px) { font-size: 20px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8eae560..3d253f5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,6 @@ .newsletter { background: $color-black; - color: #fff; + color: $color-white; margin: 64px 0; @@ -30,13 +30,13 @@ font-size: 0; &::before { - font-family: 'Open Sans', sans-serif; + font-family: $font-family; content: "Assine nossa newsletter"; font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; - color: #FFFFFF; + color: $color-white; padding-bottom: 4px; @media (max-width:1920px) { @@ -46,13 +46,13 @@ &::after { content: "Receba ofertas e novidades por e-mail"; - font-family: 'Open Sans', sans-serif; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; - color: #929292; + color: $color-gray6; @media (max-width:1024px) { font-size: 16px; @@ -63,7 +63,7 @@ } :global(.vtex-store-components-3-x-inputGroup) { - border-bottom: 1px solid #929292; + border-bottom: 1px solid $color-gray6; @media (max-width:1024px) { display: flex; @@ -77,16 +77,16 @@ :global(.vtex-styleguide-9-x-input) { background: transparent; - color: #929292; + color: $color-gray6; &::placeholder { - font-family: 'Open Sans', sans-serif; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; - color: #929292; + color: $color-gray6; @media (max-width:1024px) { font-size: 12px; @@ -112,7 +112,7 @@ width: 100%; max-width: 84px; height: 32px; - border-bottom: 3px solid #BFBFBF; + border-bottom: 3px solid $color-gray8; } } } @@ -129,7 +129,7 @@ font-weight: 400; font-size: 24px; line-height: 32px; - color: #575757; + color: $color-black3; } .content { @@ -139,7 +139,7 @@ font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; + color: $color-gray6; max-width: 632px; // max-width: 632px !important; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index d004e08..1a070f4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -27,7 +27,7 @@ :global(.vtex-button) { :global(.vtex-button__label) { - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 18px; @@ -37,14 +37,14 @@ align-items: center; text-align: center; - color: #BFBFBF; + color: $COLOR-GRAY8; text-transform: capitalize; } } } .listItem--m3-tab-list-item-product { - background: #fff; + background: $color-white; border: none !important; width: 114px; @@ -52,12 +52,12 @@ .listItemActive--m3-tab-list-item-product, .listItemActive { - background: #fff; + background: $color-white; border: none !important; :global(.vtex-button) { - background-color: #fff; + background-color: $color-white; border: none; border-bottom: 2px solid #000000; border-radius: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index b2401b0..c24dde1 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,14 +1,19 @@ $font-family : "Open Sans"; $color-black: #000000; $color-black2: #292929; +$color-black3: #575757; -$color-white: #fff; +$color-white: #ffffff; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; +$color-gray7: #AFAFAF; +$color-gray8: #BFBFBF; +$color-gray9: #BABABA; $color-blue: #4267b2;