From 1b85338bee5bd089157fc477f61897786db02425 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Wed, 14 Dec 2022 20:02:26 -0300 Subject: [PATCH] feat: Estiliza carrinho desktop --- checkout/src/arquivos/js/components/Footer.js | 27 +- .../sass/checkout/_checkout-autenticacao.scss | 230 ++- .../sass/checkout/_checkout-carrinho.scss | 1396 +++++++++-------- .../sass/checkout/_checkout-pagamento.scss | 5 + .../sass/checkout/_checkout-vazio.scss | 53 +- .../src/arquivos/sass/checkout/_checkout.scss | 13 +- .../src/arquivos/sass/partials/_footer.scss | 27 +- .../src/arquivos/sass/utils/_variaveis.scss | 9 + 8 files changed, 1032 insertions(+), 728 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9bf8192..fbf15d2 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,6 +3,19 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); + this.list = [ + {}, + + {}, + + {}, + + {}, + + {}, + ]; + + this.addCarrossel(); } async init() { @@ -35,10 +48,14 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, + const prateleira = await waitElement("footerCheckout__prateleira"); + $(prateleira).slick({ + dots: true, + infinite: true, + arrows: true, + slidesToShow: 4, + slidesToScroll: 4, + variableWidth: true, }); } @@ -51,6 +68,7 @@ export default class Footer {
  • Hipercard
  • PayPal
  • Boleto
    • +
  • PCI VTEX
    • `; } @@ -74,7 +92,6 @@ export default class Footer { - `; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e13bff5..d9b1c2f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,13 +1,21 @@ .checkout-container { .client-pre-email { - border-color: #8d8d8d; - font-family: $font-family; + border-color: $black-500; padding-top: 8px; + label { + font-family: $font-family-secundary; + text-transform: uppercase; + color: $black-500; + } + .link-cart { a { - color: #292929; + color: $black-500; + font-family: $font-family-secundary; font-size: 14px; + line-height: 16px; + text-transform: uppercase; &:hover { color: lighen(#292929, 10); @@ -25,12 +33,12 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + color: $black-500; + font-size: 20px; } small { - color: #8d8d8d; + color: $black-500; } } } @@ -39,26 +47,35 @@ margin: 0 0 16px; input { + height: 50px; box-shadow: none; - color: #292929; + color: $black-500; font-family: $font-family; + font-size: 12px; + line-height: 16px; padding: 0 16px; - border: 2px solid f0f0f0; + border: 1px solid $black-500; box-sizing: border-box; border-radius: 5px; + &::placeholder { + color: $black-500; + } + @media (max-width: 490px) { width: auto; } } button { - background-color: #292929; - border-radius: 5px; + background-color: $vivid-blue; + border-radius: 0 8px 8px 0; border: none; font-family: $font-family; - height: 54px; - right: 0; + color: $black-500; + letter-spacing: 0.05em; + height: 50px; + right: -4px; top: 0; @media (max-width: 490px) { @@ -70,17 +87,23 @@ span.help.error { color: red; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; } } .emailInfo { padding: 16px; background-color: #fff; - border: 1px solid #8d8d8d; - border-radius: 0; + border: 1px solid $black-500; + border-radius: 5px; + margin-top: 47px; h3 { - color: #303030; + font-family: $font-family; + font-weight: 700; margin: 0 0 8px 0; } @@ -89,11 +112,15 @@ li { span { - color: #292929; + color: $black-500; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; } i::before { - color: #292929; + color: $vivid-blue; font-size: 1rem; opacity: 1; } @@ -112,19 +139,25 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid #8d8d8d; + border-radius: 8px; + border: 1px solid $gray-300; font-family: $font-family; - padding: 16px; + font-size: 14px; + // font-size: 14px !important; + padding: 24px 17px 38px 17px; + margin-bottom: 16px; .accordion-heading { span { - color: #303030; - margin-bottom: 8px; + font-family: $font-family-secundary; + font-size: 16px; + line-height: 19px; + color: $black-400; + margin-bottom: 25px; padding: 0; i::before { - fill: #303030; + display: none; } } @@ -143,36 +176,76 @@ .accordion-inner { padding: 0; + // #client-phone { + // &::placeholder { + // visibility: hidden; + + // &:after { + // visibility: visible; + // content: "(99) 99999-9999"; + + // } + // } + + tr { + td.info { + border-bottom: 1px solid $gray-700; + } + } + /* General configurations */ + .box-info { + font-size: 14px; + line-height: 19px; + color: $gray-700; + } + .client-notice { - color: #292929; + display: none; } p { + position: relative; + margin-bottom: 6px; + color: $gray-700; + label { - color: #292929; - font-weight: 500; + // color: $gray-800; + font-size: 14px; + font-weight: 400; + margin-bottom: 1px; } select, input { - border-radius: 0; - border: 1px solid #8d8d8d; + padding: 13px 7px; + border-radius: 5px; + border: 1px solid $gray-50; + color: $black-500; box-shadow: none; + margin-bottom: 16px; } .help.error { color: red; + font-size: 9px; + margin: 0; } } .box-client-info-pj { + display: none; .link a#is-corporate-client, .link a#not-corporate-client { - color: #292929; - font-weight: 500; - text-decoration: underline; + display: none; + // color: #292929; + // font-weight: 500; + // text-decoration: underline; + } + + .link { + display: none; } } @@ -181,20 +254,27 @@ } button.submit { + width: 100%; border: none; - border-radius: 5px; - background: #292929; - margin-top: 8px; + border-radius: 8px; outline: none; - transition: all 0.2s linear; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + background: $vivid-blue; + color: $white; + margin-top: 36px; + // transition: all 0.2s linear; - &:hover { - background: lighten(#292929, 5); - } + // &:hover { + // background: lighten(#292929, 5); + // } - &:active { - background: darken(#292929, 5); - } + // &:active { + // background: darken(#292929, 5); + // } } /* Shipping configurations */ @@ -205,6 +285,10 @@ text-decoration: underline; } + .vtex-omnishipping-1-x-SummaryItemContent { + display: block; + } + .vtex-omnishipping-1-x-deliveryGroup { p { color: #303030; @@ -236,52 +320,78 @@ } .shp-summary-group-info { - border-color: #8d8d8d; + border-style: none; + // border-color: #8d8d8d; } .address-summary { background: none; - border-color: #8d8d8d; + color: $gray-700; border-radius: 0; - color: #303030; - padding: 12px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 0px; @include mq(md, max) { background-position: 8px 9px; } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + // a { + // color: #303030; + // font-weight: 500; + // text-decoration: underline; + // } } .shp-summary-group-price, .shp-summary-package { - color: #8d8d8d; + padding: 0; + color: $gray-700; } - .shp-summary-group-price { - padding-right: 16px; - } + // .shp-summary-group-price { + // padding-right: 16px; + // } .shp-summary-package { - padding-left: 16px; + margin-top: 25px; } .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; + display: none; + } + + .vtex-omnishipping-1-x-SummaryItemGroup { + padding: 0; + margin: 0; } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $white; + border: 1px solid $black-400; + } + + .vtex-omnishipping-1-x-deliveryChannelsOption { + color: $gray-400; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten(#292929, 50); + color: $black-400; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index ae8475e..0968693 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,10 +17,10 @@ display: none; } .cart { - border: 1px solid #f0f0f0; + border: 1px solid $gray-200; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 16px 29px 16px 16px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -35,12 +35,22 @@ .cart-fixed { font-family: $font-family; width: 100%; + border: 1px solid $gray-200; + box-sizing: border-box; + border-radius: 8px; + padding: 24px 17px 36px; + height: auto !important; + h2 { - background: #fff; + padding: 0; + text-align: left; + background: $white; border: none; - color: #303030; - font-size: 14px; + color: $black-400; + font-family: $font-family-secundary; + font-size: 16px; font-weight: 500; + margin-bottom: 34px; } .item-unavailable { @@ -52,9 +62,11 @@ } .cart { - border: 1px solid #8d8d8d; + border: 0; + padding: 0; ul li { + display: flex; border-top: none; margin-top: 0; padding-top: 0; @@ -65,9 +77,26 @@ border-top: 1px solid #e5e5e5; } - .shipping-date, + // span { + + // } + + // a img { + // width: 58.82%; + // } + + .shipping-date { + display: none; + } + // .shipping-date, .price { - color: #7d7d7d; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + color: $black-400; } } } @@ -78,7 +107,8 @@ } #go-to-cart-button a { - color: #303030; + font-family: $font-family; + color: $black-500; text-decoration: underline; } @@ -86,22 +116,39 @@ td.info { width: 100%; } + + // tr.Discounts { + // border-bottom: $gray-50; + // } } #payment-data-submit { - background: #292929; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + background: $green; + border-radius: 8px; border: none; - border-radius: 0; - color: #fff; + color: $white; outline: none; transition: all 0.2s linear; - &:hover { - background: lighten(#292929, 5); + + .icon-lock { + display: none; } - &:active { - background: darken(#292929, 5); - } + // &:hover { + // background: lighten(#292929, 5); + // } + + // &:active { + // background: darken(#292929, 5); + // } } } @@ -109,6 +156,23 @@ background-color: #fff; } + // .ul.unstyled { + + // .mini-cart { + // display: block; + // overflow: auto; + // text-overflow: ellipsis; + // white-space: normal; + // float: none; + // width: 76%; + // line-height: 150%; + // .item { + // .fn { + // } + // } + // } + // } + .cart-items { .product-item { padding: 16px 0; @@ -118,9 +182,10 @@ color: #292929; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + text-align: left; @include mq(md, max) { &.quantity-price, @@ -131,184 +196,221 @@ } .product-image { - height: auto; + // height: auto; padding: 0; - width: 60px; - - @include mq(sm, max) { - width: 72px; - } + // width: 60px; img { - height: 60px; - max-width: 100%; + height: 75px; + max-width: 60px; + width: 60px; + } + } + + @include mq(sm, max) { + width: 72px; + } + + img { + // height: 60px; + // max-width: 100%; + // width: auto; + width: 58.82%; + + @include mq(sm, max) { + height: 72px; width: auto; + } + } + } - @include mq(sm, max) { - height: 72px; - width: auto; - } + .quantity { + box-shadow: none; + } + + // td.product-name { + + // } + + .product-name { + padding: 0 90px 0 16px; + color: $black-500; + + @include mq(lg, max) { + width: 250px; + } + + a { + width: 17.58%; + color: $black-500; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + transition: ease-in 0.22s all; + + &:hover { + color: darken(#00c8ff, 10); + text-decoration: none; + } + + @media (max-width: 490px) { + margin-left: 23px; } } - .product-name { - padding-right: 0; + .brand, + .seller { + display: none !important; + } + } - @include mq(lg, max) { - width: 250px; - } + td.shipping-date { + color: $gray-500; + font-size: 12px; + line-height: 14px; + text-align: left; + padding: 0 91px 0 0; + // margin-right: 91px; - a { - color: $black-500; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; + @include mq(md, max) { + display: none; + } + } - &:hover { - color: darken(#00c8ff, 10); - text-decoration: none; - } + .product-price { + // visibility: hidden; + text-align: left; + // padding: 0; - @media (max-width: 490px) { - margin-left: 23px; - } - } + min-width: 100px; - .brand, - .seller { - display: none !important; - } + @include mq(md, max) { + min-width: 78px; + } + @media (max-width: 490px) { + position: absolute; + bottom: 0; + right: 0; } - td.shipping-date { + span.list-price { color: $gray-500; font-size: 12px; line-height: 14px; - - @include mq(md, max) { - display: none; - } - } - - .product-price { - min-width: 100px; - @include mq(md, max) { - min-width: 78px; - } - @media (max-width: 490px) { - position: absolute; - bottom: 0; - right: 0; - } - - span.list-price { - color: $gray-500; + text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; - text-decoration-line: line-through; - @include mq(sm, max) { - font-size: 12px; - line-height: 14px; - } + } - .old-product-price-label { - text-transform: lowercase; - } + .old-product-price-label { + text-transform: lowercase; + } + } + } + td.product-price { + padding: 0 49px 0 0; + } + + td.quantity { + display: flex; + align-items: center; + justify-content: center; + margin: 11px 79px 0 0; + padding: 0; + height: 34px; + width: 99px; + // width: max-content !important; + box-sizing: border-box; + border: 1px solid $gray-300; + border-radius: 8px; + + @media (max-width: 490px) { + margin-left: 84px !important; + } + + input { + background-color: $white; + border: 0 none; + display: block; + max-height: 38px; + margin: 0 !important; + // padding: 8px 0; + width: 38px; + color: $black-500; + box-shadow: none; + font-family: $font-family-secundary; + font-size: 14px; + line-height: 16px; + + @include mq(lg, max) { + width: 24px !important; } } - td.quantity { - display: flex; - align-items: center; - justify-content: center; - margin: 6px auto 0; - padding: 0; - max-height: 38px; - max-width: 118px; - width: max-content !important; - box-sizing: border-box; - border: 1px solid $gray-300; - border-radius: 8px; + .icon-plus-sign, + .icon-minus-sign { + &::before { + color: $white; + background: $vivid-blue; + display: block; + font-family: $font-family; + font-size: 20px; + font-weight: 700; + line-height: 10px; + border-radius: 50%; + padding: 3px 0; + width: 16px; + + // padding: 1px 12px; + } + } + + .icon-minus-sign { + &:before { + content: "-"; + // width: 10px; + } + } + + .icon-plus-sign { + &:before { + content: "+"; + } + } + + .item-quantity-change { + @media (max-width: 979px) and (min-width: 768px) { + position: inherit; + bottom: inherit; + left: inherit; + height: inherit; + width: inherit; + top: inherit; + } @media (max-width: 490px) { - margin-left: 84px !important; - } - - input { - background-color: $white; - border: 0 none; - display: block; - max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $black-500; - box-shadow: none; - font-family: $font-family-secundary; - font-size: 14px; - line-height: 16px; - - @include mq(lg, max) { - width: 24px !important; - } - } - - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $white; - background: $vivid-blue; - display: block; - font-family: $font-family; - font-weight: 700; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } - - .item-quantity-change { - @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; - } - - @media (max-width: 490px) { - padding: 0; - } + padding: 0; } } + } - .quantity-price, - .best-price { - .icon-question-sign { - display: none; - } - span { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: #292929; - } + td.quantity-price { + text-align: left; + padding: 0; + + .icon-question-sign { + display: none; + } + + span { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 16px; + color: $black-400; } .quantity-price { @@ -316,117 +418,428 @@ display: none; } } + } - .item-remove { - @media (max-width: 490px) { - top: 0; - } - .icon::before { - color: #8d8d8d; - font-size: 15px; - - @include mq(md, max) { - font-size: 18px; - } - } + .best-price { + .icon-question-sign { + display: none; + } + span { + font-style: $font-family-secundary; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $black-400; + // padding: 0 49px 0 0; + word-spacing: -5px; } - .item-unavailable-message { - background-color: #d8c8ac; - color: #fff; + .new-product-price-label { + text-transform: lowercase; + } + } - .icon-warning-sign { - color: #bb4f4f; - } + .item-remove { + padding: 0; + @media (max-width: 490px) { + top: 0; + } + .icon::before { + color: $gray-400; + font-size: 15px; - .top-arrow { - border-bottom-color: #d8c8ac; + @include mq(md, max) { + font-size: 18px; } } } - .summary { - .cart-more-options { - margin: 0; - width: max-content; + .item-unavailable-message { + background-color: #d8c8ac; + color: #fff; - .srp-container { - padding: 0 0 0 10px; + .icon-warning-sign { + color: #bb4f4f; + } + + .top-arrow { + border-bottom-color: #d8c8ac; + } + } +} + +.summary { + .cart-more-options { + margin: 0; + width: max-content; + + .srp-container { + padding: 0 0 0 10px; + + @include mq(md, max) { + padding: 0 16px; + } + + .srp-main-title { + margin: 32px 0 12px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: $black-500; @include mq(md, max) { - padding: 0 16px; - } - - .srp-main-title { - margin: 32px 0 12px; - font-family: $font-family; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 33px; - color: $black-500; - - @include mq(md, max) { - margin-top: 0; - } - } - - .srp-description { - color: $gray-700; - font-family: $font-family; - font-size: 12px; - line-height: 18px; - margin: 0 0 12px; - } - - button.shp-open-options { - background-color: $gray-100; - border: none; - border-radius: 5px; - color: $black-500; - font-family: $font-family; - font-size: 14px; - letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten(#e5e5e5, 5); - } - - &:active { - background-color: darken(#e5e5e5, 5); - } + margin-top: 0; } } - .srp-data { - width: 280px; + .srp-description { + color: $gray-700; + font-family: $font-family; + font-size: 12px; + line-height: 18px; + margin: 0 0 12px; + } - @include mq(cstm, max) { - width: calc(100vw - 32px); + button.shp-open-options { + background-color: $gray-100; + border: none; + border-radius: 5px; + color: $black-500; + font-family: $font-family; + font-size: 14px; + letter-spacing: 0.05em; + line-height: 19px; + font-weight: 500; + outline: none; + padding: 12px 40px; + transition: all 0.2s linear; + + &:hover { + background-color: lighten(#e5e5e5, 5); } - @include mq(md, max) { - margin-bottom: 40px; + &:active { + background-color: darken(#e5e5e5, 5); + } + } + } + + .srp-data { + width: 280px; + + @include mq(cstm, max) { + width: calc(100vw - 32px); + } + + @include mq(md, max) { + margin-bottom: 40px; + } + + .srp-pickup-my-location__button { + background-color: $vivid-blue; + border: none; + border-radius: 8px; + color: $white; + outline: none; + width: 100%; + + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: 0.05em; + text-transform: uppercase; + + &:hover { + background-color: $vivid-blue-lighten; } - .srp-pickup-my-location__button { - background-color: #292929; + &:active { + background-color: $vivid-blue-darker; + } + } + } + + .srp-toggle { + margin: 0 0 20px; + padding: 0; + + &__wrapper { + background-color: $white; + border-radius: 100px; + width: 100%; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + } + + &__current { + border: 1px solid $black-500; + border-radius: 100px; + } + + .blue { + color: $black-500; + } + + label { + width: 50%; + + &:active { + background-color: #f0f0f0; + } + } + } + + .srp-postal-code { + .ship-country { + display: none; + } + + .ship-postalCode { + label { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $black-500; + margin-bottom: 2px; + } + + input { + border: 1px solid f0f0f0; + border-radius: 5px; + box-shadow: none; + outline: none; + color: f0f0f0; + font-size: 12px; + height: 36px; + padding: 12px 8px; + width: 172px; + } + + & ~ button { + background-color: $vivid-blue; + border: none; + border-radius: 5px; + color: $white; + font-family: $font-family; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05px; + outline: none; + // position: absolute; + // right: -150px; + // top: 36px; + transition: all 0.2s linear; + width: 96px; + text-transform: uppercase; + margin-left: 50px; + // padding: 8px 11px 9px; + + &:hover { + background-color: $vivid-blue-lighten; + } + + &:active { + background-color: $vivid-blue-darker; + } + } + + small a { + // visibility: hidden; + + // &:after { + visibility: visible; + 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: $black-500; + margin-top: 4px; + text-decoration: underline; + // } + } + + span.help.error { + color: red; + font-size: 12px; + position: absolute; + left: 0px; + width: 100%; + top: 17px; + } + } + } + + .srp-result { + strong, + .srp-items { + color: #303030; + font-weight: 400; + font-size: 14px; + } + + #deliver-at-text a { + color: #303030; + font-size: 16px; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .srp-shipping-current-single { + border: 1px solid #8d8d8d; + border-radius: 0; + color: #303030; + margin: 16px 0 0; + padding: 4px 12px; + + svg path { + fill: #d8c8ac; + } + } + + .srp-delivery-select { + border: 1px solid $gray-300; + } + + .srp-delivery-select-container { + border: 1px solid $gray-300; + border-radius: 5px; + + .srp-shipping-current-many { + &__name { + color: $black-400; + } + + &__sla { + color: $gray-700; + } + + &__price { + color: $gray-700; + font-weight: 500; + } + + &__arrow svg { + fill: #8d8d8d; + } + } + } + } + } + + &-totalizers { + padding: 0; + width: 346px; + + .coupon-data { + #cart-link-coupon-add { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + span { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $black-500; + text-decoration: none; + cursor: pointer; + } + } + + @include mq(md, max) { + padding: 0 16px; + width: 100%; + } + + .coupon-column { + .coupon { + margin: 0; + } + + .link-coupon-add { + color: #303030; + font-size: 12px; + text-decoration: underline; + } + + .coupon-label label { + margin-bottom: 12px; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: #7d7d7d; + cursor: none; + } + + .coupon-fields { + margin-bottom: 32px; + + @include mq(sm, max) { + span { + display: flex; + flex-direction: row; + justify-content: space-between; + i { + position: absolute; + right: 91px; + opacity: 1; + } + } + } + + input { + border: 2px solid f0f0f0; + border-radius: 5px; + box-shadow: none; + color: #8d8d8d; + font-size: 12px; + height: 34px; + padding: 0 12px; + max-width: 160px; + + @include mq(sm, max) { + max-width: 100%; + width: 100%; + } + } + + button { + background: #292929; border: none; border-radius: 5px; color: #fff; + font-size: 12px; + height: 36px; + letter-spacing: 1px; + margin-left: 6px; outline: none; - width: 100%; + transition: all 0.2s linear; + width: 94px; + text-transform: uppercase; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; + @include mq(md, max) { + width: 138px; + } &:hover { background-color: lighten(#292929, 5); @@ -437,387 +850,116 @@ } } } + } - .srp-toggle { - margin: 0 0 34px; + .accordion-group { + tr { + // border-bottom: 1px solid $gray-50; + // border-color: $gray-50; - &__wrapper { - background-color: #fff; - border-radius: 100px; - width: 100%; + td { + &.empty { + display: none; + } + + &.info, + &.monetary { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $black-400; + padding: 10px 0; + } + + &.info { + text-align: left; + } + + &.monetary { + text-align: right; + } + } + } + + tfoot { + td.info, + td.monetary { font-family: $font-family; font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; - } - - &__current { - border: 1px solid #00c8ff; - border-radius: 100px; - } - - .blue { - color: #00c8ff; - } - - label { - width: 50%; - - &:active { - background-color: #f0f0f0; - } - } - } - - .srp-postal-code { - .ship-postalCode { - label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: #292929; - margin-bottom: 12px; - } - - input { - border: 1px solid f0f0f0; - border-radius: 5px; - box-shadow: none; - color: f0f0f0; - font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; - } - - & ~ button { - background-color: #292929; - border: none; - border-radius: 5px; - color: #fff; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; - text-transform: uppercase; - - &:hover { - background-color: lighten(#292929, 5); - } - - &:active { - background-color: darken(#292929, 5); - } - } - - small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: #00c8ff; - margin-top: 7px; - } - - span.help.error { - color: red; - font-size: 12px; - position: absolute; - left: 0; - width: 100%; - top: 17px; - } - } - } - - .srp-result { - strong, - .srp-items { - color: #303030; - font-weight: 400; - font-size: 14px; - } - - #deliver-at-text a { - color: #303030; - font-size: 16px; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - - .srp-shipping-current-single { - border: 1px solid #8d8d8d; - border-radius: 0; - color: #303030; - margin: 16px 0 0; - padding: 4px 12px; - - svg path { - fill: #d8c8ac; - } - } - - .srp-delivery-select { - border: 1px solid #8d8d8d; - } - - .srp-delivery-select-container { - border: 1px solid #8d8d8d; - border-radius: 0; - - .srp-shipping-current-many { - &__name { - color: #303030; - } - - &__sla { - color: #7d7d7d; - } - - &__price { - color: #7d7d7d; - font-weight: 500; - } - - &__arrow svg { - fill: #8d8d8d; - } - } - } - } - } - - &-totalizers { - padding: 0; - width: 346px; - - .coupon-data { - #cart-link-coupon-add { - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - span { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $black-500; - text-decoration: none; - cursor: pointer; - } - } - - @include mq(md, max) { - padding: 0 16px; - width: 100%; - } - - .coupon-column { - .coupon { - margin: 0; - } - - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: #7d7d7d; - cursor: none; - } - - .coupon-fields { - margin-bottom: 32px; - - @include mq(sm, max) { - span { - display: flex; - flex-direction: row; - justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; - } - } - } - - input { - border: 2px solid f0f0f0; - border-radius: 5px; - box-shadow: none; - color: #8d8d8d; - font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; - - @include mq(sm, max) { - max-width: 100%; - width: 100%; - } - } - - button { - background: #292929; - border: none; - border-radius: 5px; - color: #fff; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; - outline: none; - transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; - - @include mq(md, max) { - width: 138px; - } - - &:hover { - background-color: lighten(#292929, 5); - } - - &:active { - background-color: darken(#292929, 5); - } - } - } - } - - .accordion-group { - tr { - border-color: #e5e5e5; - - td { - &.empty { - display: none; - } - - &.info, - &.monetary { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: #292929; - padding: 12px 0; - } - - &.info { - text-align: left; - } - - &.monetary { - text-align: right; - } - } - } - - tfoot { - td.info, - td.monetary { - font-family: $font-family; - font-style: normal; - font-weight: 700; - font-size: 18px; - line-height: 25px; - color: #292929; - } - } - } - } - } - - .cart-links-bottom { - display: flex; - flex-direction: column; - width: 343px; - - @include mq(md, max) { - padding: 0 16px; - width: calc(100% - 32px); - float: none; - margin-bottom: 50px; - } - - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; - } - - .link-choose-more-products-wrapper { - display: block; - text-align: center; - margin-bottom: 16px; - - @include mq(md, max) { - margin-bottom: 0px; - } - - a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $black-500; - } - } - - .btn-place-order-wrapper { - a { - background: $vivid-blue; - border: none; - border-radius: 5px; - display: block; - font-size: 0; - transition: ease-in 0.22s all; - padding: 12px 19px; - - &:hover { - background-color: darken(#4caf50, 5); - } - - &:after { - content: "finalizar compra"; - font-family: $font-family; font-weight: 700; - font-size: 14px; - letter-spacing: 0.05em; - color: $black-500; - text-transform: uppercase; - vertical-align: middle; - line-height: 19px; - text-shadow: none; + font-size: 18px; + line-height: 25px; + color: $black-400; } } } } } + +.cart-links-bottom { + display: flex; + flex-direction: column; + width: 343px; + + @include mq(md, max) { + padding: 0 16px; + width: calc(100% - 32px); + float: none; + margin-bottom: 50px; + } + + @include mq(md, min) { + margin: 0; + padding-bottom: 50px; + } + + .link-choose-more-products-wrapper { + display: block; + text-align: center; + margin-bottom: 16px; + + @include mq(md, max) { + margin-bottom: 0px; + } + + a { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $black-500; + } + } + + .btn-place-order-wrapper { + a { + background: $vivid-blue; + border: none; + border-radius: 5px; + display: block; + font-size: 0; + transition: ease-in 0.22s all; + padding: 12px 19px; + + &:hover { + background-color: $vivid-blue-lighten; + } + + &:after { + content: "finalizar compra"; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.05em; + color: $black-500; + text-transform: uppercase; + vertical-align: middle; + line-height: 19px; + text-shadow: none; + } + } + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..d299a49 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,6 +4,11 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + .quantity { + background-color: $vivid-blue; + color: $white; + } } .orderform-template-holder { width: 66.1132%; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 7428c2e..8a1fd39 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -3,6 +3,7 @@ &-content { color: #292929; text-align: center; + align-items: center; @include mq(md, max) { padding: 0 16px; @@ -10,14 +11,12 @@ } &-title { - display: none; - &::before{ - font-family: $font-family; - font-weight: 700; - font-size: 24px; - line-height: 33px; - text-transform: uppercase; - } + align-items: center; + font-family: $font-family; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-transform: uppercase; } &-message { @@ -26,21 +25,29 @@ &-links { .link-choose-products { - background-color: $white; - border-style: border-box; - border: 1px solid $black-500; - border-radius: 0; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family-secundary; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $black-500; - text-transform: uppercase; + &:before { + content: ""; + } + + &:after { + content: "Continuar comprando"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16.38px; + text-align: center; + text-transform: uppercase; + background-color: $white; + border-style: border-box; + border: 1px solid $black-500; + border-radius: 0; + transition: ease-in 0.22s all; + outline: none; + letter-spacing: 0.05em; + padding: 15px 65px 17px 64px; + color: $black-500; + } &:hover { background: lighten(#292929, 5); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index a21e4be..76a0d16 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -71,8 +71,17 @@ body { } .btn-success { - background: #292929; - text-shadow: none; + border: none; + border-radius: 8px; + color: $white; + outline: none; + font-family: "Open Sans",sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: .05em; + text-transform: uppercase; &:hover { background: lighten(#292929, 15%); diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 6e28ce8..f2662d5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -20,7 +20,7 @@ font-style: normal; font-weight: normal; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; max-width: 40%; @@ -38,15 +38,19 @@ justify-self: center; list-style: none; - li .vtex-pci { - &::before { - display: block; - content: ""; - height: 24px; - width: 1px; - color: $gray-400; - } - } + // li .vtex-pci { + // &::before { + // display: block; + // content: ""; + // height: 24px; + // width: 1px; + // color: $gray-400; + // } + + // width: 81.62% + // img { + // } + // } @include mq(md, max) { align-self: center; @@ -54,7 +58,8 @@ } &__divider { - background-color: #8d8d8d; + content: ""; + background-color: $gray-400; display: inline-block; height: 24px; margin: 0 8px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 2c0fac0..29c0a3a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,6 +8,7 @@ $font-family-secundary: "Tenor Sans", sans-serif; $white: #ffffff; +$gray-50: #e0e0e0; $gray-100: #ededed; $gray-200: #e5e5e5; $gray-300: #f0f0f0; @@ -15,11 +16,19 @@ $gray-400: #c4c4c4; $gray-500: #989898; $gray-600: #858585; $gray-700: #7d7d7d; +$gray-800: #808080; +$gray-900: #828282; $black-400: #292929; $black-500: #000000; $vivid-blue: #00C8FF; +$vivid-blue-lighten: #57dbff; +$vivid-blue-darker: #00b0e0; + +$green: #298541; +$green-lighten: #2fa34e; +$green-darker: #185428; /* Grid breakpoints */ $grid-breakpoints: (