From 038e0733f15270955011a866cde7f99997a30f43 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sat, 17 Dec 2022 13:18:30 -0300 Subject: [PATCH] feat(refactor):modificando css do header --- .../sass/checkout/_checkout-autenticacao.scss | 74 +++++++++++++++---- .../sass/checkout/_checkout-carrinho.scss | 64 ++++++++-------- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 4 files changed, 96 insertions(+), 45 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..e5c76aa 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -8,9 +8,20 @@ a { color: $color-black; font-size: 14px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + + /* Black */ + + color: #000000; &:hover { - color: lighen($color-black, 10); + color: lighen($color-black-full, 10); } } } @@ -25,12 +36,25 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; } small { - color: $color-gray4; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-full; } } } @@ -40,10 +64,11 @@ input { box-shadow: none; - color: $color-black; + color: $color-black-full; font-family: $font-family; + font-weight: 400; padding: 0 16px; - border: 2px solid $color-gray3; + border: 2px solid $color-black-full; box-sizing: border-box; border-radius: 5px; @@ -53,7 +78,17 @@ } button { - background-color: $color-black; + background-color: $color-blue2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + + color:$color-black-full; border-radius: 5px; border: none; font-family: $font-family; @@ -69,19 +104,26 @@ } span.help.error { - color: red; + color: $color-red; + font-size: 12px; + line-height: 16px; + font-weight: 700; } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black-full; + border-radius: 5px; h3 { - color: #303030; + color:$color-black-full; margin: 0 0 8px 0; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; } ul { @@ -89,11 +131,17 @@ li { span { - color: $color-black; + color:$color-black-full; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; + font-size: 12px; + } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2a4fc9b..ee82df4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -416,25 +416,26 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + padding: 12px 35px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -450,17 +451,17 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px; text-transform: uppercase; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-full; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black-full; } label { @@ -496,9 +497,9 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; font-size: 12px; height: 36px; @@ -619,7 +620,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; text-decoration: none; } } @@ -641,7 +642,9 @@ } .coupon-label label { - margin-bottom: 12px; + margin-bottom:0; + text-align: left; + margin-left: 38px; font-family: $font-family; font-style: normal; font-weight: normal; @@ -684,17 +687,16 @@ } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-black-full; + font-size: 14px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; text-transform: uppercase; @include mq(md, max) { @@ -702,11 +704,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } } @@ -724,7 +726,7 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; @@ -745,9 +747,9 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; } } @@ -787,31 +789,31 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-full; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue2, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black-full; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae5f80f..071eae9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -67,7 +67,7 @@ body { #cart-title, #orderform-title { - color: $color-black; + color: $color-black-full; font-family: $font-family; font-weight: 700; font-size: 24px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 85260a5..c56ea4d 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,6 +20,7 @@ $color-gray7: #C4C4C4;; +$color-red: #FF0000; $color-blue: #4267b2; $color-blue2:#00C8FF;