From 30d61a4c057f4e4f4f95e8f7ad739479ab27dbd4 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Sat, 17 Dec 2022 02:07:02 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=C3=A7=C3=A3o=20checkout=20carr?= =?UTF-8?q?inho=20e=20checkout=20email?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 13 +- checkout/src/arquivos/sass/checkout.scss | 17 +- .../sass/checkout/_checkout-autenticacao.scss | 557 ++++++++++-------- .../sass/checkout/_checkout-carrinho.scss | 278 +++++---- .../src/arquivos/sass/partials/_footer.scss | 234 -------- .../arquivos/sass/partials/_prateleira.scss | 235 ++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 6 + 7 files changed, 756 insertions(+), 584 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 655f0c6..89d240b 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,7 +8,7 @@ export default class Footer { async init() { await this.selectors(); this.footerHTML(); - this.addCarrossel(); + // this.onUpdate(); } @@ -24,6 +24,7 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); console.log(this.checkoutVazio) } + footerHTML() { const footerPrat = this.footerPrateleira const textAdress = this.footerAdress; @@ -49,10 +50,10 @@ export default class Footer {
${product.productName}
${product.items.map((nameProduct) => { - return ` - ` }).join("")}
@@ -62,6 +63,10 @@ export default class Footer { footerPrat.children[1].appendChild(li) }) }) + .then(() => { this.addCarrossel() }) + .catch((error) => { + console.log(error) + }) textAdress.innerHTML = ` diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 08101fd..a9de162 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,6 +2,7 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; html { @@ -64,18 +65,14 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $black-padrao; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 16px 0 17px; + letter-spacing: 1px; text-transform: uppercase; - - @include mq(md, max) { - margin-left: 30px; - } } .dropdown { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..e0164d8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,372 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + min-height: 410px; + .client-pre-email { + border-color: $color-gray4; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + color: $black-padrao; + font-family: $font-family-secundary; + text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 21px; - span { - color: #303030; - font-size: 24px; - } + span { + margin-bottom: 21px; + font-weight: 400; + font-size: 20px; + line-height: 23px; + color: $black-padrao; + font-family: $font-family-secundary; + text-transform: uppercase; + } - small { - color: $color-gray4; - } - } - } + small { + margin-bottom: 21px; + font-weight: 400; + font-size: 20px; + line-height: 23px; + color: $black-padrao; + font-family: $font-family-secundary; + text-transform: uppercase; + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 24.55px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + font-family: $font-family; + padding: 15px 0 15px 14px; + border: 1px solid $black-padrao; + box-sizing: border-box; + border-radius: 5px 8px 8px 5px; + height: 50px; - @media (max-width: 490px) { - width: auto; - } - } + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-black; - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + @media (max-width: 490px) { + width: auto; + } + } - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + button { + background-color: #00c8ff; + border-radius: 0px 8px 8px 0px; + border: none; + height: 50px; + right: 0; + top: 0; - span.help.error { - color: red; - } - } + font-weight: 700; + width: 126px; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + color: $black-padrao; - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + span.help.error { + color: red; + font-weight: 700; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + margin-top: 3px; + } + } - ul { - margin: 0; + .emailInfo { + padding: 16px 16px 26.5px 16px; + background-color: $color-white; + border: 1px solid $black-padrao; + border-radius: 5px; + width: 400px; - li { - span { - color: $color-black; - } + h3 { + color: $black-padrao; + margin: 0 0 9.5px 0; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + ul { + margin: 0; - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + li { + span { + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black; + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + i::before { + color: $color-blue-100; + font-size: 17px; + opacity: 1; + } + } + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - i::before { - fill: #303030; - } - } + .shipping-data, + .payment-data, + .client-profile-data { + margin-left: 16px; + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 11px; - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - .accordion-inner { - padding: 0; + i::before { + fill: #303030; + } + } - /* General configurations */ + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - .client-notice { - color: $color-black; - } + .accordion-inner { + padding: 0; - p { - label { - color: $color-black; - font-weight: 500; - } + /* General configurations */ - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + .client-notice { + display: none; + } - .help.error { - color: red; - } - } + .client-first-name p { + margin: 16px 10px 0 0; + label { + font-weight: 400; + font-size: 14px; + line-height: 19px; + font-family: $font-family; + color: $color-gray2; + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + select, + input { + border-radius: 0; + border: 1px solid $color-gray9; + border-radius: 5px; + box-shadow: none; + height: 32px; + width: 100%; - .state-inscription-box span { - font-weight: 500; - } + font-weight: 400; + font-size: 14px; + line-height: 19px; + font-family: $font-family; + color: $color-gray10; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + .help.error { + color: red; + } + } - &:hover { - background: lighten($color-black, 5); - } + .box-client-info-pj { + display: none; + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - &:active { - background: darken($color-black, 5); - } - } + .state-inscription-box span { + font-weight: 500; + } - /* Shipping configurations */ + #opt-in-newsletter { + width: 18px; + height: 18px; + } - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + .newsletter-text { + position: relative; + top: 2px; + font-weight: 400px; + line-height: 16px; + font-size: 12px; + font-family: $font-family; + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .submit { + margin: 45px 0; + button { + border: none; + border-radius: 8px; + background: $color-blue-100; + outline: none; + transition: all 0.2s linear; + width: 100%; - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + color: $color-white; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + &:hover { + background: lighten($color-blue-hover, 5); + } - svg path { - fill: #d8c8ac; - } - } - } - } + &:active { + background: darken($color-blue-hover, 5); + } + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + /* Shipping configurations */ - .shp-summary-group-info { - border-color: $color-gray4; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - @include mq(md, max) { - background-position: 8px 9px; - } + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + svg path { + fill: #d8c8ac; + } + } + } + } - .shp-summary-group-price { - padding-right: 16px; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + @include mq(md, max) { + background-position: 8px 9px; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } + + .shp-summary-group-price { + padding-right: 16px; + } + + .shp-summary-package { + padding-left: 16px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..3f6a91c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,17 +6,21 @@ .cart-template { font-family: $font-family; + margin: 0 !important; + @include mq(md, max) { padding: 0 0; } + .item-unit-label { display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 0 16px; + margin-bottom: 48px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -25,9 +29,11 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; width: 100%; @@ -112,11 +118,11 @@ th { color: $color-black; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + font-family: $font-family-secundary; + padding: 17px 0; @include mq(md, max) { &.quantity-price, @@ -136,9 +142,11 @@ } img { - height: 60px; - max-width: 100%; - width: auto; + height: 60px !important; + width: 60px !important; + object-fit: cover; + max-width: 60px !important; + margin: 0 16px 16px 0; @include mq(sm, max) { height: 72px; @@ -148,18 +156,20 @@ } .product-name { - padding-right: 0; + padding: 0; + height: 60px; @include mq(lg, max) { - width: 250px; + width: 36.796%; } a { - color: $color-blue; - font-style: normal; - font-weight: normal; + display: flex; + margin-bottom: 10px; + font-weight: 400; font-size: 12px; line-height: 14px; + color: $black-padrao; transition: ease-in 0.22s all; &:hover { @@ -183,13 +193,29 @@ font-size: 12px; line-height: 14px; + span { + margin-bottom: 10px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + font-family: $font-family-secundary; + color: $color-gray8; + } + @include mq(md, max) { display: none; } } + th.product-price { + position: relative; + top: 0px; + } .product-price { min-width: 100px; + position: relative; + top: 5px; + @include mq(md, max) { min-width: 78px; } @@ -218,15 +244,17 @@ 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: 10px auto 0; max-height: 38px; max-width: 118px; padding: 0; width: max-content !important; + position: relative; + top: 5px; @media (max-width: 490px) { margin-left: 84px !important; @@ -234,7 +262,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 1px solid transparent; border-radius: 0; border-width: 0 1px; display: block; @@ -262,15 +290,17 @@ .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + font-size: 20px; + color: $color-blue-100; + padding-left: 0 0 0 11px; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 14px; + font-size: 20px; + color: $color-blue-100; + padding-right: 0 11px 0 0; } } @@ -292,6 +322,8 @@ .quantity-price, .best-price { + position: relative; + left: 5px; .icon-question-sign { display: none; } @@ -301,22 +333,39 @@ font-size: 14px; line-height: 16px; color: $color-black; + position: relative; } } .quantity-price { + span { + position: relative; + top: -5px; + } @include mq(md, max) { display: none; } } .item-remove { + a { + padding: 0; + margin-bottom: 20px; + display: flex; + + i { + height: 10px; + width: 10px; + } + } + @media (max-width: 490px) { top: 0; } .icon::before { color: $color-gray4; - font-size: 15px; + width: 10px; + height: 10px; @include mq(md, max) { font-size: 18px; @@ -351,12 +400,12 @@ } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0px 0 12px; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + font-family: $font-family; + color: $black-padrao; @include mq(md, max) { margin-top: 0; @@ -364,21 +413,24 @@ } .srp-description { - color: $color-gray2; + margin: 0 0 10.65px; + font-weight: 400; font-size: 12px; line-height: 18px; - margin: 0 0 12px; + font-family: $font-family; + color: $color-gray2; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray6; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + margin: 0; + border-radius: 8px; + color: $black-padrao; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: 400; outline: none; padding: 12px 40px; transition: all 0.2s linear; @@ -405,31 +457,32 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue-100; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + height: 42px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: ($color-blue-hover); } &:active { - background-color: darken($color-black, 5); + background-color: ($color-blue-hover); } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; &__wrapper { background-color: $color-white; @@ -444,12 +497,13 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $black-padrao; border-radius: 100px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-blue; + color: $black-padrao; } label { @@ -462,6 +516,10 @@ } .srp-postal-code { + .ship-country { + display: none; + } + .ship-postalCode { label { font-family: $font-family; @@ -469,8 +527,8 @@ font-weight: normal; font-size: 12px; line-height: 14px; + margin-bottom: 2px; color: $color-black; - margin-bottom: 12px; } input { @@ -485,38 +543,40 @@ } & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; position: absolute; + width: 100px; + height: 36px; right: -150px; - top: 36px; + top: 24px; + border-radius: 8px; + border: none; + outline: none; + font-weight: 700; + line-height: 14px; + font-size: 14px; + color: $color-white; + background-color: $color-blue-100; + font-family: $font-family; + letter-spacing: 1px; transition: all 0.2s linear; - width: 96px; text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue-hover, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue-hover, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; + font-weight: 400; font-size: 10px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + color: $black-padrao; + margin-top: 4px; } span.help.error { @@ -592,9 +652,16 @@ &-totalizers { padding: 0; + margin-bottom: 17px; width: 346px; .coupon-data { + height: 14px; + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 8px; + margin: 0; #cart-link-coupon-add { text-decoration: none; &:hover { @@ -603,13 +670,11 @@ } } span { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; - text-decoration: none; + color: $black-padrao; } } @@ -619,6 +684,7 @@ } .coupon-column { + width: 362px; .coupon { margin: 0; } @@ -630,21 +696,22 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; + margin-bottom: 4px; + font-weight: 400; font-size: 12px; line-height: 14px; color: $color-gray2; - cursor: none; + font-family: $font-family-secundary; + display: flex; + justify-content: start; } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 54px; + text-align: start; - @include mq(sm, max) { - span { + span { + @include mq(sm, max) { display: flex; flex-direction: row; justify-content: space-between; @@ -657,14 +724,19 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray4; + + color: $color-gray7; + font-weight: 400; font-size: 12px; + line-height: 14px; height: 34px; padding: 0 12px; - max-width: 160px; + width: 178px; + margin-right: 5px; + font-family: $font-family-secundary; @include mq(sm, max) { max-width: 100%; @@ -673,18 +745,22 @@ } button { - background: $color-black; + background: $color-blue-100; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $black-padrao; + font-size: 14px; height: 36px; letter-spacing: 1px; - margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 133.5px; text-transform: uppercase; + font-family: $font-family; + + &::placeholder { + padding: 5px; + } @include mq(md, max) { width: 138px; @@ -704,6 +780,9 @@ .accordion-group { tr { border-color: #e5e5e5; + &:nth-child(3) { + display: none; + } td { &.empty { @@ -712,12 +791,12 @@ &.info, &.monetary { - font-style: normal; - font-weight: normal; + padding: 12px 0 10px; + font-weight: 400; font-size: 14px; line-height: 16px; + font-family: $font-family-secundary; color: $color-black; - padding: 12px 0; } &.info { @@ -733,11 +812,12 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + padding: 14px 0 0; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; + font-family: $font-family; } } } @@ -758,13 +838,13 @@ @include mq(md, min) { margin: 0; - padding-bottom: 50px; + padding-bottom: 43.4px; } .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 15px; @include mq(md, max) { margin-bottom: 0px; @@ -774,33 +854,33 @@ font-family: $font-family; font-style: normal; font-weight: normal; + color: $black-padrao; font-size: 12px; line-height: 14px; - color: $color-blue; } } .btn-place-order-wrapper { a { - background: $color-green; - border: none; - border-radius: 5px; display: block; - font-size: 0; - transition: ease-in 0.22s all; padding: 12px 19px; + font-size: 0; + background: $color-blue-100; + border: none; + border-radius: 8px; + transition: ease-in 0.22s all; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue-hover, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; + font-weight: 700; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $black-padrao; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 49cacbf..9f853a2 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,240 +2,6 @@ padding: 0 16px; position: relative; - &__prateleira { - margin-bottom: 123px; - - @media screen and (min-width: 2500px) { - margin-bottom: 156px; - } - - @media screen and (max-width: 1024px) { - margin-bottom: 188px; - } - - h2 { - display: flex; - margin: 0 0 20px; - font-weight: 400; - line-height: 38px; - font-size: 24px; - justify-content: center; - font-family: $font-family-secundary; - - @media screen and (min-width: 2500px) { - font-size: 48px; - line-height: 76px; - } - } - - .container-carousel-item { - display: flex; - margin: 0; - padding: 0 116px; - list-style: none; - - @media screen and (min-width: 2500px) { - padding: 0 237px; - } - - @media screen and (max-width: 1024px) { - padding: 0; - } - - li { - width: 96.1% !important; - - @media screen and (min-width: 1280px) and (max-width: 1281px) { - width: 242px !important; - margin-right: 16px; - } - - @media screen and (min-width: 2500px) and (max-width: 2501px) { - width: 485.07px !important; - margin-right: 16.93px; - } - - @media screen and (min-width: 1023px) and (max-width: 1024px) { - width: 320px !important; - margin-right: 15px; - } - - figure { - margin: 0; - - img { - width: 100%; - background: $color-gray-100; - } - - figcaption { - display: flex; - margin-top: 20px; - justify-content: center; - font-weight: 400; - font-size: 13px; - align-items: center; - text-align: center; - line-height: 18px; - font-family: $font-family; - - @media screen and (min-width: 2500px) { - font-size: 26px; - line-height: 35px; - } - - @media screen and (min-width: 726px) and (max-width: 1024px) { - margin: 20px 0; - } - - @media screen and (min-width: 376px) and (max-width: 725px) { - margin-top: 11px; - min-height: 36px; - } - - @media screen and (min-width: 1025px) and (max-width: 1188px) { - min-height: 36px; - } - } - } - .container-tamanho-cores { - display: flex; - margin-top: 20px; - gap: 5px; - align-items: center; - justify-content: center; - flex-wrap: wrap; - - @media screen and (max-width: 725px) { - min-height: 61px; - } - - @media screen and (min-width: 1025px) and (max-width: 1188px) { - min-height: 61px; - } - - input { - display: none; - } - - label { - display: flex; - padding: 5px; - border-radius: 8px; - font-weight: 700; - font-size: 13px; - line-height: 18px; - align-items: center; - text-align: center; - text-transform: uppercase; - background: $color-blue-100; - letter-spacing: 0.05em; - color: $color-white; - justify-content: center; - - @media screen and (min-width: 2500px) { - padding: 6.1px; - font-size: 26px; - line-height: 35px; - } - } - - label:last-child { - margin-right: 0; - } - } - - .container-button-prateleira { - margin-top: 20px; - - @media screen and (min-width: 726px) and (max-width: 1024px) { - margin-top: 20px; - } - - a { - text-decoration: none; - } - - button { - width: 100%; - height: 42px; - font-weight: 700; - font-size: 13px; - line-height: 13px; - border: none; - border-radius: 8px; - color: $color-white; - background: $color-blue-100; - letter-spacing: 0.05em; - text-transform: uppercase; - font-family: $font-family; - - @media screen and (min-width: 2500px) { - height: 59px; - font-size: 26px; - line-height: 35px; - letter-spacing: 0.05em; - } - } - } - } - } - - .slick-prev { - width: 13px; - height: 29.5px; - border: none; - background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg) - no-repeat center center; - z-index: 4; - left: 125px; - top: 43%; - - @media screen and (min-width: 2500px) { - width: 26px; - height: 58px; - background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg) - no-repeat center center; - left: 255px; - top: 45%; - } - - @media screen and (max-width: 1024px) { - width: 13.65px; - height: 29.47px; - left: 10px; - top: 48%; - } - } - - .slick-next { - width: 13px; - height: 29.5px; - border: none; - background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg) - no-repeat center center; - z-index: 4; - top: 43%; - right: 137px; - - @media screen and (min-width: 2500px) { - width: 26px; - height: 58px; - background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg) - no-repeat center center; - top: 45%; - right: 265px; - } - - @media screen and (max-width: 1024px) { - width: 13.65px; - height: 29.47px; - top: 48%; - right: 20px; - } - } - } - .container { display: flex; margin: 16px 0; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..e9c6570 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,236 @@ /* _prateleira.scss */ +.footerCheckout { + &__prateleira { + margin-bottom: 123px; + + @media screen and (min-width: 2500px) { + margin-bottom: 156px; + } + + @media screen and (max-width: 1024px) { + margin-bottom: 188px; + } + + h2 { + display: flex; + margin: 0 0 20px; + font-weight: 400; + line-height: 38px; + font-size: 24px; + justify-content: center; + font-family: $font-family-secundary; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 76px; + } + } + + .container-carousel-item { + display: flex; + margin: 0; + padding: 0 116px; + list-style: none; + + @media screen and (min-width: 2500px) { + padding: 0 237px; + } + + @media screen and (max-width: 1024px) { + padding: 0; + } + + li { + width: 96.1% !important; + + @media screen and (min-width: 1280px) and (max-width: 1281px) { + width: 242px !important; + margin-right: 16px; + } + + @media screen and (min-width: 2500px) and (max-width: 2501px) { + width: 485.07px !important; + margin-right: 16.93px; + } + + @media screen and (min-width: 1023px) and (max-width: 1024px) { + width: 320px !important; + margin-right: 15px; + } + + figure { + margin: 0; + + img { + width: 100%; + background: $color-gray-100; + } + + figcaption { + display: flex; + margin-top: 20px; + justify-content: center; + font-weight: 400; + font-size: 13px; + align-items: center; + text-align: center; + line-height: 18px; + font-family: $font-family; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } + + @media screen and (min-width: 726px) and (max-width: 1024px) { + margin: 20px 0; + } + + @media screen and (min-width: 376px) and (max-width: 725px) { + margin-top: 11px; + min-height: 36px; + } + + @media screen and (min-width: 1025px) and (max-width: 1188px) { + min-height: 36px; + } + } + } + .container-tamanho-cores { + display: flex; + margin-top: 20px; + gap: 5px; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + @media screen and (max-width: 725px) { + min-height: 61px; + } + + @media screen and (min-width: 1025px) and (max-width: 1224px) { + min-height: 61px; + } + + input { + display: none; + } + + label { + display: flex; + padding: 5px; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + align-items: center; + text-align: center; + text-transform: uppercase; + background: $color-blue-100; + letter-spacing: 0.05em; + color: $color-white; + justify-content: center; + + @media screen and (min-width: 2500px) { + padding: 6.1px; + font-size: 26px; + line-height: 35px; + } + } + + label:last-child { + margin-right: 0; + } + } + + .container-button-prateleira { + margin-top: 20px; + + @media screen and (min-width: 726px) and (max-width: 1024px) { + margin-top: 20px; + } + + a { + text-decoration: none; + } + + button { + width: 100%; + height: 42px; + font-weight: 700; + font-size: 13px; + line-height: 13px; + border: none; + border-radius: 8px; + color: $color-white; + background: $color-blue-100; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + + @media screen and (min-width: 2500px) { + height: 59px; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + } + } + } + } + } + + .slick-prev { + width: 13px; + height: 29.5px; + border: none; + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg) + no-repeat center center; + z-index: 4; + left: 125px; + top: 43%; + + @media screen and (min-width: 2500px) { + width: 26px; + height: 58px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg) + no-repeat center center; + left: 255px; + top: 45%; + } + + @media screen and (max-width: 1024px) { + width: 13.65px; + height: 29.47px; + left: 10px; + top: 48%; + } + } + + .slick-next { + width: 13px; + height: 29.5px; + border: none; + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg) + no-repeat center center; + z-index: 4; + top: 43%; + right: 137px; + + @media screen and (min-width: 2500px) { + width: 26px; + height: 58px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg) + no-repeat center center; + top: 45%; + right: 265px; + } + + @media screen and (max-width: 1024px) { + width: 13.65px; + height: 29.47px; + top: 48%; + right: 20px; + } + } + } +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 91a2a03..e20c584 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -17,9 +17,15 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #ededed; +$color-gray7: #c4c4c4; +$color-gray8: #989898; +$color-gray9: #e0e0e0; +$color-gray10: #bdbdbd; $color-blue: #4267b2; $color-blue-100: #00c8ff; +$color-blue-hover: #01addd; $color-green: #4caf50;