From 6ecf4fb26e4c186bb3a7fa0cb106ec15dd0da7d7 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 22:17:12 -0300 Subject: [PATCH] feat(header): adiciona logica a barra de progresso ao header --- checkout/src/arquivos/sass/checkout.scss | 1 + .../sass/checkout/_checkout-pagamento.scss | 325 ++++++++++++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 54 ++- 3 files changed, 368 insertions(+), 12 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..deb107c 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira.scss"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..3d48abb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,11 +1,336 @@ body .container-main.container-order-form .orderform-template.active { + // .mini-cart { + // width: 32.3242%; + // margin-left: unset; + // margin-right: 0; + // float: right; + // } + // .orderform-template-holder { + // width: 66.1132%; + // } + .shipping-data { + .shipping-container { + .shipping-method-toggle-delivery { + background: $color-white; + } + .shp-method-option-text { + text-shadow: none; + } + } + } .mini-cart { + border-radius: 8px; width: 32.3242%; margin-left: unset; margin-right: 0; float: right; + border: 1px solid #e5e5e5; + .cart-items { + li { + .product-name { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + white-space: unset; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + .price { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } + } + } + .cart-fixed { + height: auto !important; + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + h2 { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; + text-align: left; + padding: 24px 0px 35px 17px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 32px; + line-height: 37px; + } + } + #go-to-cart-button { + margin-right: 17px; + } + .summary-cart-template-holder { + .summary-totalizers { + margin: 0; + } + .cart { + border: none; + padding: 0px 17px; + margin: 0 0 19px; + } + } + .accordion-group { + table { + margin: 0px 17px; + width: calc(100% - 34px); + tr { + border-top: 1px solid #e0e0e0; + } + td { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #7d7d7d; + } + td[data-i18n="global.total"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: #292929; + float: left; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } + } + td[data-bind="text: totalLabel"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: #292929; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } + } + .info, + .monetary { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + @include mq(xxl, min) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + } + } + } + } + } + + @media (max-width: 1024px) { + width: 97.2%; + margin-left: 6px; + } } .orderform-template-holder { width: 66.1132%; + @media (max-width: 1024px) { + width: 100% !important; + } } } + +.box-step { + .box-step-content { + .form-step { + .link-gift-card { + left: 0; + top: -66px; + margin: 0; + a { + pointer-events: none; + font-size: 0 !important; + &:after { + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #7d7d7d; + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + } + } + } + + .steps-view { + width: 56.456%; + .payment-method { + } + } + + .payment-group { + margin: 0; + width: 32.505%; + .payment-group-list-btn { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; + a { + display: none; + border: 1px solid rgb(0, 0, 0, 0.3); + border-radius: 6px; + background: #f0f0f0; + align-items: center; + text-align: center; + padding: 0 8px; + width: 91.39%; + margin: 0; + span { + width: 100%; + padding: 11px 0; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #58595b; + } + } + + #payment-group-custom201PaymentGroupPaymentGroup { + display: block; + span { + font-size: 0 !important; + &::after { + font-family: "Open Sans"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Boleto Faturado"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } + } + } + } + + #payment-group-custom204PaymentGroupPaymentGroup { + display: block; + span { + font-size: 0 !important; + &:after { + font-family: "Open Sans"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Cartão de Débito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } + } + } + } + + #payment-group-creditCardPaymentGroup { + display: block; + span { + background-image: none !important; + font-size: 0 !important; + text-decoration: none; + &:after { + font-family: "Open Sans"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Cartão de Crédito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } + } + } + } + + #payment-group-bankInvoicePaymentGroup { + display: block; + span { + background-image: none !important; + font-size: 0 !important; + &:after { + font-family: "Open Sans"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + content: "Boleto à Vista"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } + } + } + } + + .payment-group-item.active { + background: rgba(220, 221, 227, 0.3); + mix-blend-mode: normal; + border: 1px solid $color-orange; + border-radius: 6px; + span { + color: $color-orange; + &:after { + color: $color-orange !important; + } + } + } + } + } + } + } +} + +.PaymentCardHolderDocument { + display: block !important; +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..dfeb62a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,37 +2,67 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ +$black: #000; +$color-black-000: #000000; $color-black: #292929; +$color-black2: #292929; $color-white: #fff; +$color-white2: #ededed; +$white: #fff; + +$gray: #c4c4c4; +$gray-200: #8d8d8d; +$gray-500: #292929; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #c4c4c4; +$color-gray7: #989898; +$color-gray8: #828282; +$color-gray9: #bdbdbd; +$color-gray10: #c4c4c4; +$color-gray11: #ededed; +$color-gray12: #989898; + +$color-orange: #f15a31; $color-blue: #4267b2; +$color-blue2: #00c8ff; + +$color-red: #ff0000; $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + Gf: 328px, + cstm: 400, + f: 375px, + c: 376px, + m: 491px, + sm: 576px, + md: 768px, + lg: 992px, + tb: 1024px, + dt: 1025px, + l: 1025px, + xl: 1200px, + tv: 2500px, + xxl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;