From 932bb4b2132cf92160a3e8a32e86754cd6c81df3 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Sat, 17 Dec 2022 16:45:31 -0300 Subject: [PATCH] feat: estiliza o carrinho desktop --- checkout/src/arquivos/js/components/Footer.js | 6 + .../sass/checkout/_checkout-carrinho.scss | 172 +++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 24 ++- .../src/arquivos/sass/utils/_variaveis.scss | 5 +- 4 files changed, 149 insertions(+), 58 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6f979fc..5815e2f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -21,6 +21,10 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); this.emptyCartTitle = await waitElement(".empty-cart-title"); this.continueShopping = await waitElement("#cart-choose-products"); + this.frete = await waitElement(".shipping-date"); + this.unidade = await waitElement(".product-price"); + this.iconMinus = await waitElement(".icon-minus-sign"); + this.iconPlus = await waitElement(".icon-plus-sign"); this.prateleira = await waitElement(".footerCheckout__prateleira"); // this.prateleiraSlick = await waitElement(".prateleira__carousel") } @@ -30,6 +34,8 @@ export default class Footer { console.log("entrou no if do replaceContent()") this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; this.continueShopping.textContent = "Continuar comprando"; + this.frete.textContent = "Frete"; + this.unidade.textContent = "Unidade"; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index eb6f983..633130c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -26,13 +26,16 @@ } .cart { + margin-bottom: 48px; + padding: 16px; + border: 1px solid $color-gray3; + // border-radius: 5px; + // background: cyan; + // margin: 0; // background: purple; - // border: 1px solid red; // $color-gray3; - border-radius: 5px; - padding: 16px; - box-sizing: border-box; + // box-sizing: border-box; @include mq(md, max) { margin: 0px 0 25px 0; @@ -41,24 +44,6 @@ border-radius: 0; } - // .cart-items { - // font-family: $font-family-secundary; - - // thead { - // line-height: 16px; - // font-size: 14px; - // // font-style: normal; - // // font-weight: 400; - // color: $black-300; - // } - - // .product-image img { - // display: block; - // width: 60px; - // height: 60px; - // transform: scaleX(-1); - // } - // } } .cart-fixed.affix { @@ -142,18 +127,30 @@ background-color: $color-white; } + + .cart-items { + // border-collapse: separate; + // border-spacing: 16px; + .product-item { - padding: 16px 0; + // height: 60px; + // background: green; + } + + thead tr { + // background: purple; } th { - color: $black-300; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; - font-size: 14px; + padding: 0; line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-300; + text-align: left; @include mq(md, max) { &.quantity-price, @@ -163,6 +160,16 @@ } } + // tbody tr { + // padding: 16px 0 0; + // } + + td { + margin: 0; + padding: 0; + text-align: left; + } + .product-image { height: auto; padding: 0; @@ -175,7 +182,8 @@ img { height: 60px; max-width: 100%; - width: auto; + width: 60px; + transform: scaleX(-1); @include mq(sm, max) { height: 72px; @@ -185,18 +193,20 @@ } .product-name { - padding-right: 0; + padding-left: 16px; @include mq(lg, max) { width: 250px; } a { - color: $color-blue; - font-style: normal; - font-weight: normal; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + transition: ease-in 0.22s all; &:hover { @@ -216,9 +226,12 @@ } td.shipping-date { - color: $color-gray2; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $gray-300; @include mq(md, max) { display: none; @@ -227,6 +240,7 @@ .product-price { min-width: 100px; + @include mq(md, max) { min-width: 78px; } @@ -237,10 +251,17 @@ } span.list-price { - color: $color-gray2; - font-size: 12px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; text-decoration-line: line-through; + color: $gray-300; + + text-decoration-line: line-through; + + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -255,14 +276,14 @@ 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: 0; max-height: 38px; max-width: 118px; - padding: 0; + padding: 9px 11px; width: max-content !important; @media (max-width: 490px) { @@ -270,16 +291,20 @@ } input { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $black-500; + border: none; + background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; padding: 8px 0; width: 38px; - color: $color-gray2; box-shadow: none; @include mq(lg, max) { @@ -289,29 +314,61 @@ .icon-plus-sign, .icon-minus-sign { + &::before { - color: $black-300; + line-height: 16px; + text-align: center; + color: $color-white; display: block; - font-weight: 500; - padding: 1px 12px; + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 900; + color: $color-white; + + // padding: 1px 12px; + // transform: translate(-50%, -50%); } } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; + // font-size: 16px; } } .icon-plus-sign { &:before { content: "+"; - font-size: 14px; + // font-size: 16px; } } .item-quantity-change { + // @include buttonStyle(16px) { + // }; + // font-family: $font-family-secundary; + // font-style: normal; + // font-weight: 400; + // font-size: 14px; + // line-height: 16px; + color: $color-white; + background: $blue-300; + border-radius: 50%; + border: none; + width: 16px; + height: 16px; + + + // text-align: center; + // text-transform: uppercase; + + // font-style: normal; + // display: flex; + // align-items: center; + // letter-spacing: 0.05em; + + @media (max-width: 979px) and (min-width: 768px) { position: inherit; bottom: inherit; @@ -342,12 +399,27 @@ } .quantity-price { + + span { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $black-300; + } + + + @include mq(md, max) { display: none; } } .item-remove { + width: 10px; + height: 10px; + @media (max-width: 490px) { top: 0; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f61ccf6..72b36fc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -72,14 +72,26 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + margin: 16px 0; + line-height: 33px; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-size: 24px; + font-weight: 700; + font-style: normal; text-transform: uppercase; + color: $black-300; + + letter-spacing: 0.05em; + + + // color: $color-gray2; + // font-family: $font-family; + // font-weight: 500; + // font-size: 36px; + // line-height: 42px; + // margin: 40px 0 30px; + // letter-spacing: 0.1em; + // text-transform: uppercase; @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 1881bf7..296527a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,14 +8,15 @@ $font-family-secundary:"Tenor Sans", sans-serif; $black-300: #292929; $black-500: #000000; -$color-white: #fff; +$color-white: #ffffff; +$color-gray3: #f0f0f0; $color-gray-rename: #c4c4c4; +$gray-300: #989898; $blue-300: #00C8FF; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; -$color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5;