From cfc869ee611bf7dcb6423f40a3f945861dacb403 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Tue, 13 Dec 2022 10:37:12 -0300 Subject: [PATCH] Feat(Chekout): Cria as paginas de meu carrinho, e pagina de coleta de email --- .../sass/checkout/_checkout-autenticacao.scss | 57 +++++-- .../sass/checkout/_checkout-carrinho.scss | 143 +++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 21 ++- .../src/arquivos/sass/partials/_footer.scss | 8 +- .../src/arquivos/sass/partials/_header.scss | 8 +- 5 files changed, 174 insertions(+), 63 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..3990982 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,8 +6,10 @@ .link-cart { a { - color: $color-black; + color: red; font-size: 14px; + line-height: 16px; + text-transform: uppercase; &:hover { color: lighen($color-black, 10); @@ -22,30 +24,54 @@ justify-content: center; h3 { - margin-bottom: 16px; + margin-bottom: 20px; + margin-top: 7px; span { - color: #303030; - font-size: 24px; + color: #f30606; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; + letter-spacing: 0.09em; } small { - color: $color-gray4; + color: red; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; + padding: 0; + letter-spacing: 0.09em; } } } .client-email { - margin: 0 0 16px; + display: flex; + margin: 0 0 47px; + width: 57%; + justify-content: flex-start; input { box-shadow: none; color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 1px solid red; box-sizing: border-box; - border-radius: 5px; + border-radius: 5px 0px 0px 5px; + width: 77%; + height: 52px; + &::placeholder{ + color: red; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + } @media (max-width: 490px) { width: auto; @@ -67,9 +93,22 @@ position: absolute; } } + #btn-client-pre-email{ + right: 14px; + padding: 4px 26px; + height: 52px; + background-color: red; + border-radius: 0px 8px 8px 0px; + } span.help.error { color: red; + position: absolute; + left: 213px; + top: 50px; + font-weight: 700; + font-size: 12px; + line-height: 16px; } } @@ -93,7 +132,7 @@ } i::before { - color: $color-black; + color: red; 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 195f487..c093081 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -16,7 +16,7 @@ border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 16px 16px 5px 16px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -112,9 +112,9 @@ th { color: $color-black; - padding: 0 0 16px; + padding: 0 0 13px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -124,6 +124,29 @@ display: none; } } + &.shipping-date{ + font-size: 0; + line-height: 0; + &::after{ + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: red; + } + } + &.product-price{ + font-size: 0; + line-height: 0; + &::after{ + content: "Unidade"; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: red + ; + } + } } .product-image { @@ -136,9 +159,9 @@ } img { - height: 60px; + height: 70px; max-width: 100%; - width: auto; + width: 100%; @include mq(sm, max) { height: 72px; @@ -155,7 +178,7 @@ } a { - color: $color-blue; + color: $color-black; font-style: normal; font-weight: normal; font-size: 12px; @@ -214,15 +237,18 @@ } } } + td.product-price{ + padding: 10px 5px 0 5px; + } 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; - margin: 6px auto 0; + margin: 15px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -234,7 +260,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: none; border-radius: 0; border-width: 0 1px; display: block; @@ -253,17 +279,31 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-white; display: block; font-weight: 500; - padding: 1px 12px; + // padding: 1px 12px; } } + .item-quantity-change-decrement{ + width: 16px; + height: 16px; + margin-left: 11px; + } + .item-quantity-change-increment { + width: 16px; + height: 16px; + margin-right: 11px; + } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; + font-size: 14px; + background-color: #00C8FF; + border-radius: 50%; + height: 100%; + width: 100%; } } @@ -271,6 +311,10 @@ &:before { content: "+"; font-size: 14px; + background-color: #00C8FF; + border-radius: 50%; + height: 100%; + width: 100%; } } @@ -367,7 +411,7 @@ color: $color-gray2; font-size: 12px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; } button.shp-open-options { @@ -375,13 +419,14 @@ border: none; border-radius: 5px; color: $color-gray2; - font-size: 16px; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; outline: none; padding: 12px 40px; transition: all 0.2s linear; + margin-top: 0; &:hover { background-color: lighten($color-gray5, 5); @@ -395,6 +440,7 @@ .srp-data { width: 280px; + margin-top: 0; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -404,8 +450,12 @@ margin-bottom: 40px; } + .ship-country { + display: none; + } + .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue; border: none; border-radius: 5px; color: $color-white; @@ -429,7 +479,8 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; + padding-bottom: 0; &__wrapper { background-color: $color-white; @@ -444,12 +495,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black; } label { @@ -470,7 +521,7 @@ font-size: 12px; line-height: 14px; color: $color-black; - margin-bottom: 12px; + margin-bottom: 2px; } input { @@ -485,7 +536,7 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue; border: none; border-radius: 5px; color: $color-white; @@ -495,7 +546,7 @@ outline: none; position: absolute; right: -150px; - top: 36px; + top: 26px; transition: all 0.2s linear; width: 96px; text-transform: uppercase; @@ -513,19 +564,29 @@ font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; + font-size: 0px; + line-height: 0px; + color: $color-black; margin-top: 7px; + + &::after{ + content: "Não sei meu código postal"; + font-size: 10px; + line-height: 12px; + + :hover{ + text-decoration: underline; + } + } } span.help.error { color: red; font-size: 12px; position: absolute; - left: 0; + left: 63px; width: 100%; - top: 17px; + top: 5px; } } } @@ -598,7 +659,6 @@ #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; cursor: pointer; } } @@ -608,7 +668,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; text-decoration: none; } } @@ -641,7 +701,7 @@ } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 20px; @include mq(sm, max) { span { @@ -663,8 +723,10 @@ color: $color-gray4; font-size: 12px; height: 34px; - padding: 0 12px; - max-width: 160px; + padding: 0 0 0 16px; + max-width: 204px; + width: 51%; + margin-right: 7.4px; @include mq(sm, max) { max-width: 100%; @@ -673,9 +735,9 @@ } button { - background: $color-black; + background: blue; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; font-size: 12px; height: 36px; @@ -683,7 +745,7 @@ margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 133px; text-transform: uppercase; @include mq(md, max) { @@ -743,6 +805,9 @@ } } } + .coupon-data{ + display: block !important; + } .cart-links-bottom { display: flex; @@ -764,7 +829,7 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 14px; @include mq(md, max) { margin-bottom: 0px; @@ -776,13 +841,13 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue; border: none; border-radius: 5px; display: block; @@ -797,10 +862,10 @@ &: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: red; 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 dad4e1c..107f05f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -86,13 +86,12 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: red; 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: 17px 0; text-transform: uppercase; @include mq(md, max) { @@ -100,7 +99,15 @@ body { } } #cart-title{ - display: none !important; + display: block !important; + font-weight: 700; + font-size: 24px; + line-height: 33px; + width: max-content; + color: #292929; + margin: 16px 0; + letter-spacing: 0.05em; + } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index e765cfd..4ebb8b1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -69,19 +69,19 @@ align-items: center; display: flex; list-style-type: none; - margin: 0; - width: 33%; + margin: 0 0 0 158px; + width: 21%; justify-content: flex-end; .Link1{ justify-content: end; &__footer-imgs-logoVtex{ - width: 20%; + width: 35%; } } .footer-imgs-logoM3{ - width: 17%; + width: 27.5%; } li:last-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 56e7d0a..f476faa 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -67,19 +67,19 @@ .p-borda-1{ border-top: 1.5px solid black; position: absolute; - left: 25.6%; + left: 25%; bottom: 5px; margin: 0; - width: 95.9%; + width: 97%; transform: translateY(-7px); } .p-borda-2{ border-top: 1.5px solid black; position: absolute; - right: 22%; + right: 21.5%; bottom: 5px; margin: 0; - width: 99.3%; + width: 100.8%; transform: translateY(-7px); } }