diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index dcf45b0..ddf319f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -5,7 +5,7 @@ } .cart-template { - font-family: $font-family; + font-family: $font-family-secundary; @include mq(md, max) { padding: 0 0; } @@ -13,10 +13,11 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin: 0 0 48px 0; @include mq(md, max) { margin: 0px 0 25px 0; @@ -155,15 +156,12 @@ } a { - color: $color-blue; - font-style: normal; - font-weight: normal; + color: $color-black-500; font-size: 12px; line-height: 14px; - transition: ease-in 0.22s all; + text-decoration: none; &:hover { - color: darken($color-blue, 10); text-decoration: none; } @@ -217,12 +215,12 @@ td.quantity { align-items: center; - border: 1px solid $color-gray3; - border-radius: 0; + border: 1px solid $color-gray7; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 15px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -262,15 +260,17 @@ .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + width: 16px; + height: 16px; + color: $color-blue-100; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 14px; + width: 16px; + height: 16px; + color: $color-blue-100; } } @@ -308,6 +308,13 @@ @include mq(md, max) { display: none; } + + .total-selling-price { + font-size: 14px; + line-height: 19px; + font-weight: 700; + font-family: $font-family; + } } .item-remove { @@ -351,12 +358,11 @@ } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0 0 12px; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 32px; + color: $color-black-500; + font-family: $font-family; @include mq(md, max) { margin-top: 0; @@ -364,23 +370,26 @@ } .srp-description { + font-family: $font-family; color: $color-gray2; - font-size: 12px; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray6; + font-family: $font-family; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black-500; letter-spacing: 0.05em; + font-size: 14px; line-height: 19px; font-weight: 500; outline: none; - padding: 12px 40px; + padding: 12px 41px; + margin: 0; transition: all 0.2s linear; &:hover { @@ -477,8 +486,9 @@ border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray3; - font-size: 12px; + color: $color-black-500; + font-size: 14px; + line-height: 16px; height: 36px; padding: 12px 8px; width: 172px; @@ -591,14 +601,16 @@ } &-totalizers { + margin: 0; padding: 0; width: 346px; .coupon-data { + margin: 0 0 10px; #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; + text-decoration: none; cursor: pointer; } } @@ -608,7 +620,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; text-decoration: none; } } @@ -717,7 +729,7 @@ font-size: 14px; line-height: 16px; color: $color-black-100; - padding: 12px 0; + padding: 10px 0; } &.info { @@ -733,11 +745,12 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + font-family: $font-family; font-size: 18px; - line-height: 21px; + line-height: 25px; + font-weight: 700; color: $color-black-100; + padding: 14px 0 17px; } } } @@ -764,25 +777,29 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 10px; + text-decoration: none; @include mq(md, max) { margin-bottom: 0px; } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; + + &:hover { + text-decoration: none; + cursor: auto; + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue-100; border: none; border-radius: 5px; display: block; @@ -790,17 +807,13 @@ transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 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-500; + color: $color-black-500; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index c9b4a5e..4ac3b40 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -47,8 +47,8 @@ } } -.hide { - display: none !important; - opacity: 0; - pointer-events: none; -} +// .hide { +// display: none !important; +// opacity: 0; +// pointer-events: none; +// } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 54fd29e..97e13f5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -67,13 +67,13 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black-100; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 16px 0; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index b4e3eaa..576beb2 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,8 +16,10 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #ededed; +$color-gray7: #F0F0F0; $color-blue: #4267b2; +$color-blue-100: #00c8ff; $color-green: #4caf50;