From 95120d918808e8bf3af506c0acb71aa57bd2e8df Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 15:23:19 -0300 Subject: [PATCH] =?UTF-8?q?feat(checkout-carrinho):=20Adapta=20p=C3=A1gina?= =?UTF-8?q?=20do=20carrinho=20para=20o=20layout=20do=20figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-carrinho.scss | 185 ++++++++++++------ .../src/arquivos/sass/utils/_variaveis.scss | 2 + 2 files changed, 131 insertions(+), 56 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..0b324ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,7 +13,7 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -114,10 +114,32 @@ color: $color-black; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + &.shipping-date { + font-size: 0; + + &::after { + content: "Frete"; + font-weight: 400; + font-family: $font-family-secundary; + font-size: 14px; + line-height: 16px; + } + } + + &.product-price { + &::after { + content: "Unidade"; + font-weight: 400; + font-family: $font-family-secundary; + font-size: 14px; + line-height: 16px; + } + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -155,7 +177,7 @@ } a { - color: $color-blue; + color: $color-black2; font-style: normal; font-weight: normal; font-size: 12px; @@ -163,7 +185,7 @@ transition: ease-in 0.22s all; &:hover { - color: darken($color-blue, 10); + color: darken($color-black, 10); text-decoration: none; } @@ -179,7 +201,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -190,6 +212,8 @@ .product-price { min-width: 100px; + font-size: 0; + @include mq(md, max) { min-width: 78px; } @@ -200,25 +224,34 @@ } span.list-price { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; } + .muted { + color: $color-gray6; + } + .old-product-price-label { text-transform: lowercase; } + + .new-product-price-label { + color: $color-black; + } } } td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; @@ -236,7 +269,7 @@ background-color: $color-white; border: 1px solid $color-gray3; border-radius: 0; - border-width: 0 1px; + border-width: 0; display: block; max-height: 38px; margin: 0 !important; @@ -253,26 +286,26 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-blue2; display: block; font-weight: 500; padding: 1px 12px; } } - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } + // .icon-minus-sign { + // // &:before { + // // content: "-"; + // // font-size: 16px; + // // } + // } - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } + // .icon-plus-sign { + // &:before { + // content: "+"; + // font-size: 14px; + // } + // } .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { @@ -302,6 +335,12 @@ line-height: 16px; color: $color-black; } + + .total-selling-price { + &.total-selling-price { + font-weight: 700; + } + } } .quantity-price { @@ -355,8 +394,9 @@ font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + font-family: $font-family; + color: $color-black2; @include mq(md, max) { margin-top: 0; @@ -365,7 +405,8 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-size: 14px; + font-weight: 400; line-height: 18px; margin: 0 0 12px; } @@ -373,9 +414,9 @@ button.shp-open-options { background-color: $color-gray5; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black2; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; @@ -405,18 +446,22 @@ } .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%; + cursor: pointer; + padding: 12px 36px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; + white-space: nowrap; + text-transform: uppercase; &:hover { background-color: lighten($color-black, 5); @@ -444,12 +489,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black2; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black2; } label { @@ -462,6 +507,25 @@ } .srp-postal-code { + .ship-country { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black2; + margin-bottom: 12px; + } + + select { + border: 1px solid $color-gray7; + border-radius: 5px; + box-shadow: none; + color: $color-black2; + } + } + .ship-postalCode { label { font-family: $font-family; @@ -469,15 +533,15 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; margin-bottom: 12px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray7; border-radius: 5px; box-shadow: none; - color: $color-gray3; + color: $color-black2; font-size: 12px; height: 36px; padding: 12px 8px; @@ -485,11 +549,14 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; - font-size: 12px; + font-style: normal; + font-size: 14px; + font-weight: 700; + line-height: 19px; height: 36px; letter-spacing: 1px; outline: none; @@ -501,22 +568,28 @@ text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0; + &::after { + content: "Não sei meu código postal"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + color: $color-black2; + margin-top: 7px; + text-decoration-line: underline; + cursor: pointer; + } } span.help.error { @@ -525,7 +598,7 @@ position: absolute; left: 0; width: 100%; - top: 17px; + top: 5px; } } } @@ -608,7 +681,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; text-decoration: none; } } @@ -734,7 +807,7 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; line-height: 21px; color: $color-black; @@ -776,31 +849,31 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; } } .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-blue, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; + font-weight: 700; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 0f0de87..1aa5f0c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,8 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #989898; +$color-gray7: #c4c4c4; $color-blue: #4267b2; $color-blue2: #00c8ff; -- 2.34.1