diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..e130ce2 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/menu"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 4251593..9abb473 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -18,7 +18,6 @@ background: #292929; border: none; border-radius: 5px; - transition: ease-in 0.22s all; outline: none; font-family: $font-family; font-style: normal; @@ -29,10 +28,6 @@ letter-spacing: 0.05em; color: $white-500; text-transform: uppercase; - - &:hover { - background: lighten(#292929, 5); - } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 97787f4..6d104e7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -8,62 +8,8 @@ img { } body { - @include mq(md, max) { - padding-left: 0; - } - - &.body-cart { - font-family: $font-family; - } - - &.body-cart, - &.body-order-form { - @include mq(xl, min) { - padding-top: 0; - } - - @include mq(lg, max) { - padding-bottom: 0 !important; - } - - @include mq(md, max) { - padding-right: 0; - padding-left: 0; - } - } - .container-order-form, - .container-cart { - width: 80%; - } -} - -.btn-success { - background: #292929; - text-shadow: none; - - &:hover { - background: lighten(#292929, 15%); - } -} - -.emailInfo h3 { - color: #292929 !important; -} - -#cart-title, -#orderform-title { - color: #7d7d7d; - 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; - } + padding: 0; + margin: 0; } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_menu.scss b/checkout/src/arquivos/sass/partials/_menu.scss index 7dd6104..5a452d4 100644 --- a/checkout/src/arquivos/sass/partials/_menu.scss +++ b/checkout/src/arquivos/sass/partials/_menu.scss @@ -1 +1,87 @@ /* _menu.scss */ +.container-main { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + h2 { + all: unset; + } + + .hide { + display: none !important; + } + + .empty-cart-title { + font-size: 0; + + &::before { + content: "SEU CARRINHO ESTÁ VAZIO"; + font-weight: 700; + font-family: $font-family; + font-size: 24px; + line-height: 33px; + color: $black-500; + + @include mq(mobile, max) { + font-size: 18px; + line-height: 25px; + } + + @include mq(4k, min) { + font-size: 48px; + line-height: 65px; + } + } + } + + .transactions-container, + .empty-cart-message { + display: none; + } + + .empty-cart-links { + margin-top: 32px; + + .link-choose-products { + margin: 0; + width: 25%; + max-width: 327px; + font-size: 0; + padding: 15px 0 17px; + background-color: $white-500; + border: 1px solid $black-500; + border-radius: 0; + + @include mq(mobile, max) { + width: 67%; + max-width: 250px; + } + + @include mq(4k, min) { + width: 25%; + max-width: 638px; + } + + &:hover { + background-color: $white-500; + } + + &::before { + content: "CONTINUAR COMPRANDO"; + font-weight: 400; + font-size: 14px; + line-height: 16px; + font-family: $font-family-secundary; + color: $black-500; + text-shadow: none; + + @include mq(4k, min) { + font-size: 28px; + line-height: 33px; + } + } + } + } +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f440389..a051572 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -18,9 +18,9 @@ $grid-breakpoints: ( xs: 0, cstm: 400, sm: 375px, - md: 768px, + md: 478px, lg: 992px, - mobile: 1024px, + mobile: 1025px, xl: 1200px, 4k: 2500px, ) !default;