From e4b72887c9243ed60a0d01992bdd4933aba61a6a Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 18 Dec 2022 22:42:51 -0300 Subject: [PATCH] feat: Aplica css desktop --- checkout/src/arquivos/sass/checkout.scss | 1 + .../sass/checkout/_checkout-autenticacao.scss | 272 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 32 ++- .../src/arquivos/sass/checkout/_checkout.scss | 9 - .../src/arquivos/sass/partials/_footer.scss | 16 +- .../src/arquivos/sass/utils/_variaveis.scss | 3 + 6 files changed, 273 insertions(+), 60 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..c533b61 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,3 +3,4 @@ @import "./partials/header"; @import "./partials/footer"; @import "./checkout/checkout.scss"; +@import "./partials/prateleira"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..42af891 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,13 +1,29 @@ + + .checkout-container { .client-pre-email { - border-color: $color-gray4; + border-color: $color-black2; font-family: $font-family; - padding-top: 8px; + padding-top: 14px; + + .client-pre-email-h label { + margin-top: 0; + } .link-cart { a { - color: $color-black; - font-size: 14px; + color: $color-black2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } &:hover { color: lighen($color-black, 10); @@ -20,68 +36,151 @@ display: flex; align-items: center; justify-content: center; + margin-top: 65px; h3 { margin-bottom: 16px; + width: 825px; - span { - color: #303030; - font-size: 24px; - } + @include mq(xg, min) { + width: 1631px; + } - small { - color: $color-gray4; - } + span, + small { + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + color: $color-black2; + margin-bottom: 21px; + + @include mq(xg, min) { + font-size: 40px; + line-height: 47px; + margin-bottom: 23px; + } + } } } .client-email { - margin: 0 0 16px; + margin: 0 0 24px 0; + width: 580px; + + @include mq(xg, min) { + width: 990px; + } input { box-shadow: none; - color: $color-black; + color: $color-black2; font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; + padding: 15px 14px; + border: 1px solid $color-black2; box-sizing: border-box; border-radius: 5px; + width: 443px; + height: 50px; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; - @media (max-width: 490px) { - width: auto; - } + @include mq(xg, min) { + width: 765px; + height: 50px; + font-size: 24px; + line-height: 33px; + } } button { - background-color: $color-black; - border-radius: 5px; + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; border: none; font-family: $font-family; - height: 54px; - right: 0; + color: $color-black2; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + height: 52px; + width: 126px; + right: 8px; top: 0; + outline: none; + padding: 12px 14px; + position: relative; + cursor: pointer; + + @include mq(xg, min) { + font-size: 28px; + line-height: 30px; + width: 219px; + padding: 12px 17px; + } @media (max-width: 490px) { height: 48px; margin: 0; position: absolute; } + + &:hover { + background-color: $color-blue3; + } + + &:active { + background-color: $color-blue4; + } } span.help.error { - color: red; + color: $color-red; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black2; + border-radius: 5px; + width: 400px; + height: 150px; + margin-bottom: 92px; + + @include mq(xg, min) { + width: 776px; + height: 238px; + } h3 { - color: #303030; + color: $color-black2 !important; + font-family: $font-family; margin: 0 0 8px 0; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } ul { @@ -89,13 +188,27 @@ li { span { - color: $color-black; + color: $color-black2 !important; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; + + @include mq(xg, min) { + font-size: 2rem !important; + } } } } @@ -104,6 +217,10 @@ color: $color-black; font-size: 6rem; opacity: 0.5; + + @include mq(xg, min) { + font-size: 11rem !important; + } } } } @@ -113,18 +230,44 @@ .client-profile-data { .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + border-radius: 8px; + box-shadow: none; .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .accordion-toggle { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + padding: 0 + } + .accordion-toggle-active { + + span { + font-size: 0; + &::after { + content: "Identificação"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + margin-top: 24px; + padding: 0; + } + } + } + span { i::before { fill: #303030; + display: none; } } @@ -147,6 +290,7 @@ .client-notice { color: $color-black; + display: none; } p { @@ -163,7 +307,7 @@ } .help.error { - color: red; + color: $color-red; } } @@ -182,18 +326,33 @@ button.submit { border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; + border-radius: 8px; + background: $color-blue2; + margin-top: 44px; outline: none; transition: all 0.2s linear; + width: 100%; + height: 42px; + padding: 12px 74px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + white-space: nowrap; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; &:hover { - background: lighten($color-black, 5); + background: $color-blue3; } &:active { - background: darken($color-black, 5); + background: $color-blue4; } } @@ -274,7 +433,6 @@ border-color: #303030; color: #303030; } - .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: #d8c8ac; border: 1px solid #d8c8ac; @@ -282,8 +440,42 @@ .vtex-omnishipping-1-x-deliveryOptionActive { text-shadow: 1.3px 1px lighten($color-black, 50); + color: #000; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; } } } } + .shipping-method-toggle-delivery { + background-color: white !important; + border: 1px solid $color-black !important; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + width: 50%; + color: #c4c4c4; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + } + + /*.shipping-data, + .payment-data { + + .accordion-heading { + .accordion-toggle { + &::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + cursor: pointer; + } + } + } + + }*/ } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 79cd5f1..fb24649 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -43,9 +43,12 @@ h2 { background: $color-white; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-black; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; } .item-unavailable { @@ -94,12 +97,21 @@ } #payment-data-submit { - background: $color-black; + background: $color-green2; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + 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; + &:hover { background: lighten($color-black, 5); } @@ -140,6 +152,7 @@ display: none; } } + .product-price { font-size: 0; } @@ -192,6 +205,12 @@ .product-name { padding: 0; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black2; @include mq(xg, min) { width: 600px; @@ -258,6 +277,7 @@ @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -790,7 +810,7 @@ } span.help.error { - color: red; + color: $color-red; font-size: 12px; position: absolute; left: 0; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ccfa3ee..97cb451 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,15 +12,6 @@ html { min-height: 100%; } -footer .footerCheckout__wrapper { - width: 96.875%; - margin: auto auto 0 auto; - - @include mq(xm, min) { - width: 94.9734%; - } -} - header { width: 100%; border-bottom: 1px solid $color-black2; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index b9f39ef..a29bff5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,9 +1,8 @@ /* _footer.scss */ .footerCheckout { - width: 100%; - border-top: 1px solid $color-black2; - &__wrapper { + width: 100%; + border-top: 1px solid $color-black2; align-items: center; display: flex; padding: 22px 0; @@ -18,12 +17,14 @@ } .container { - width: 100%; + width: 96.875%; display: grid; grid-template-columns: 1fr; - + margin: auto auto 0 auto; + @include mq(xm, min) { display: flex; + width: 94.9734%; align-items: center; justify-content: space-between; } @@ -179,4 +180,9 @@ } } } + + .desativado { + display: none !important; + } } + diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 68b63c6..155876d 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -25,6 +25,9 @@ $color-blue3: #3fd4fd; //buttom hover $color-blue4: #11bae9; //buttom active $color-green: #495e49; +$color-green2: #298541; + +$color-red: #FF0000; //error /* Grid breakpoints */ $grid-breakpoints: (