diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 89d240b..7ca5a61 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,6 +8,7 @@ export default class Footer { async init() { await this.selectors(); this.footerHTML(); + this.onUpdate() // this.onUpdate(); } @@ -91,7 +92,7 @@ export default class Footer { } - onUpdate() { + async onUpdate() { // Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver @@ -99,7 +100,7 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + console.log(mutation); }); }); diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 213ed26..550aedd 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -74,7 +74,7 @@ body { font-weight: 700; font-size: 24px; line-height: 33px; - margin: 16px 0 17px 17px; + margin: 16px 0 17px 16px; letter-spacing: 1px; text-transform: uppercase; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 68cafe3..73683cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,12 +1,24 @@ .checkout-container { box-sizing: border-box; + height: 545px; + overflow: none; + + @include mq(md, max) { + height: 563px; + } + + @include mq(xl, min) { + height: 656px; + } .client-pre-email { border-color: $color-gray4; font-family: $font-family; - padding-top: 8px; + left: 0; .link-cart { + margin-bottom: 100px; a { + margin: 0 16px; font-weight: 400; font-size: 14px; line-height: 16px; @@ -28,10 +40,9 @@ justify-content: center; h3 { - margin-bottom: 21px; + margin: 0 16px 21px; span { - margin-bottom: 21px; font-weight: 400; font-size: 20px; line-height: 23px; @@ -55,6 +66,14 @@ .client-email { margin: 0 0 24.55px; + @include mq(sm, max) { + width: 86% !important; + } + + @include mq(md, max) { + width: 65.74585635359117%; + } + input { box-shadow: none; font-family: $font-family; @@ -69,10 +88,6 @@ line-height: 16px; font-family: $font-family; color: $color-black; - - @media (max-width: 490px) { - width: auto; - } } button { @@ -105,7 +120,7 @@ font-size: 12px; line-height: 16px; font-family: $font-family; - margin-top: 3px; + margin-top: 9px; } } @@ -114,11 +129,7 @@ background-color: $color-white; border: 1px solid $black-padrao; border-radius: 5px; - width: 400px; - - @include mq(md, max) { - width: 100%; - } + width: 400px !important; h3 { color: $black-padrao; @@ -197,376 +208,378 @@ } } - .accordion-inner { - padding: 0; - .shipping-summary-info { - font-weight: 400; - font-size: 14px; - line-height: 19px; - font-family: $font-family; - color: $color-gray2; - } - - .ship-country { - display: none; - } - - /* General configurations */ - - .client-notice { - display: none; - } - - #ship-postalCode { - box-sizing: border-box; - display: flex; - max-width: 100% !important; - width: 100%; - height: 45px; - border: solid 1px $color-gray7; - border-radius: 8px; - color: $black-padrao; - } - - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; - - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - - svg path { - fill: #d8c8ac; - } - } - } - } - - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-summary-group-info { - border-color: $color-gray4; - } - - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; - - @include mq(md, max) { - background-position: 8px 9px; - } - - 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-addressFormPart1 { - small { - margin: 10px 0 25px 0; - } - - a { + .accordion-body { + .accordion-inner { + padding: 0; + .shipping-summary-info { font-weight: 400; - font-size: 12px; - line-height: 16px; - text-decoration: underline; - color: $color-black; - font-family: $font-family; - } - } - - // PARTE DE ENTREGA // - - .vtex-omnishipping-1-x-deliveryGroup { - .vtex-omnishipping-1-x-shippingSectionTitle { - font-style: normal; - font-weight: 700; font-size: 14px; line-height: 19px; - color: $color-gray2; font-family: $font-family; - margin: 0 0 11px 0; - } - - #delivery-packages-options { - border: 1px solid $color-gray9; - border-radius: 8px; - } - - .shp-lean-option { - //.vtex-omnishipping-1-x-leanShippingIcon { - // width: 12px; - // height: 12px; - // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy") - // no-repeat center center; - // flex: none; - // margin-right: 8px; - - // .vtex-omnishipping-1-x-svg { - // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy") - // no-repeat center center; - // } - // } - - .shp-option-text { - border-right: 1px solid $color-gray9; - flex: auto; - .shp-option-text-label { - font-weight: 400; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - color: $color-gray2; - font-family: $font-family; - } - - .shp-option-text-time span { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: $color-gray2; - font-family: $font-family; - } - } - } - .vtex-omnishipping-1-x-optionPrice { - font-weight: 400; - font-size: 12px; - line-height: 16px; color: $color-gray2; - font-family: $font-family; - } - } - - .vtex-omnishipping-1-x-addressForm { - .vtex-omnishipping-1-x-shippingSectionTitle { - font-weight: 700; - margin-bottom: 11px; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - color: $color-gray2; - font-family: $font-family; } - .vtex-omnishipping-1-x-addressSummary { - border: 1px solid $color-gray9; - border-radius: 8px; - margin-bottom: 0; - .address-summary { - position: relative; - border: 0; - margin-bottom: 0; - .street { - font-weight: 400; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-gray2; - } - - .neighborhood { - font-weight: 400; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-gray2; - } - - .city { - font-weight: 400; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-gray2; - } - - .state-delimiter { - font-weight: 400; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-gray2; - } - - .state { - font-weight: 400; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-gray2; - } - - #force-shipping-fields { - position: absolute; - right: 13px; - font-weight: 400; - text-decoration: none; - text-transform: lowercase; - font-size: 12px; - line-height: 16px; - font-family: $font-family; - color: $color-blue-100; - margin-left: 24px; - } - } + .ship-country { + display: none; } - .vtex-omnishipping-1-x-address { - .ship-number { - width: 100%; - margin-bottom: 15px; - label { - margin-bottom: 3px; - font-weight: 700; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - font-family: $font-family; - color: $color-gray2; - } - input { - box-sizing: border-box; - width: 100%; - border: 1px solid $color-gray9; - border-radius: 8px; - height: 35px; - } - } + /* General configurations */ - .ship-complement { - margin-bottom: 8px; - label { - margin: 15px 0 3px; - font-weight: 700; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - font-family: $font-family; - color: $color-gray2; - } - - input { - margin-bottom: 8px; - box-sizing: border-box; - width: 100%; - border: 1px solid $color-gray9; - border-radius: 8px; - height: 35px; - } - } - - .ship-receiverName { - label { - margin-bottom: 3px; - font-weight: 700; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - font-family: $font-family; - color: $color-gray2; - } - - input { - box-sizing: border-box; - width: 100%; - border: 1px solid $color-gray9; - border-radius: 8px; - height: 35px; - } - } + .client-notice { + display: none; } - } - .vtex-omnishipping-1-x-submitPaymentButton { - margin: 0; - button { + #ship-postalCode { + box-sizing: border-box; + display: flex; + max-width: 100% !important; width: 100%; - background-color: $color-blue-100; - color: $color-white; - font-family: $font-family; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - letter-spacing: 0.05em; - text-transform: uppercase; - margin-bottom: 28px; + height: 45px; + border: solid 1px $color-gray7; border-radius: 8px; + color: $black-padrao; + } - &:hover { - background-color: $color-blue-hover; + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; } - &:active { - background-color: $color-blue-hover; - border: none; + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; + + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; + + svg path { + fill: #d8c8ac; + } + } } } - } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: $color-white; - border: 1px solid $color-black; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - border-radius: 100px; - text-transform: uppercase; - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-transform: uppercase; - color: $color-roxo; - font-family: $font-family; - } + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - .shp-method-option-text { - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-transform: uppercase; - color: $color-roxo; - font-family: $font-family; + @include mq(md, max) { + background-position: 8px 9px; + } + + 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-addressFormPart1 { + small { + margin: 10px 0 25px 0; + } + + a { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + color: $color-black; + font-family: $font-family; + } + } + + // PARTE DE ENTREGA // + + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-shippingSectionTitle { + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + font-family: $font-family; + margin: 0 0 11px 0; + } + + #delivery-packages-options { + border: 1px solid $color-gray9; + border-radius: 8px; + } + + .shp-lean-option { + //.vtex-omnishipping-1-x-leanShippingIcon { + // width: 12px; + // height: 12px; + // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy") + // no-repeat center center; + // flex: none; + // margin-right: 8px; + + // .vtex-omnishipping-1-x-svg { + // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy") + // no-repeat center center; + // } + // } + + .shp-option-text { + border-right: 1px solid $color-gray9; + flex: auto; + .shp-option-text-label { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + font-family: $font-family; + } + + .shp-option-text-time span { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + font-family: $font-family; + } + } + } + .vtex-omnishipping-1-x-optionPrice { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + font-family: $font-family; + } + } + + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-shippingSectionTitle { + font-weight: 700; + margin-bottom: 11px; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray2; + font-family: $font-family; + } + + .vtex-omnishipping-1-x-addressSummary { + border: 1px solid $color-gray9; + border-radius: 8px; + margin-bottom: 0; + .address-summary { + position: relative; + border: 0; + margin-bottom: 0; + .street { + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-gray2; + } + + .neighborhood { + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-gray2; + } + + .city { + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-gray2; + } + + .state-delimiter { + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-gray2; + } + + .state { + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-gray2; + } + + #force-shipping-fields { + position: absolute; + right: 13px; + font-weight: 400; + text-decoration: none; + text-transform: lowercase; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + color: $color-blue-100; + margin-left: 24px; + } + } + } + + .vtex-omnishipping-1-x-address { + .ship-number { + width: 100%; + margin-bottom: 15px; + label { + margin-bottom: 3px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-family: $font-family; + color: $color-gray2; + } + input { + box-sizing: border-box; + width: 100%; + border: 1px solid $color-gray9; + border-radius: 8px; + height: 35px; + } + } + + .ship-complement { + margin-bottom: 8px; + label { + margin: 15px 0 3px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-family: $font-family; + color: $color-gray2; + } + + input { + margin-bottom: 8px; + box-sizing: border-box; + width: 100%; + border: 1px solid $color-gray9; + border-radius: 8px; + height: 35px; + } + } + + .ship-receiverName { + label { + margin-bottom: 3px; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-family: $font-family; + color: $color-gray2; + } + + input { + box-sizing: border-box; + width: 100%; + border: 1px solid $color-gray9; + border-radius: 8px; + height: 35px; + } + } + } + } + + .vtex-omnishipping-1-x-submitPaymentButton { + margin: 0; + button { + width: 100%; + background-color: $color-blue-100; + color: $color-white; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 28px; + border-radius: 8px; + + &:hover { + background-color: $color-blue-hover; + } + + &:active { + background-color: $color-blue-hover; + border: none; + } + } + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white; + border: 1px solid $color-black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; + text-transform: uppercase; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-roxo; + font-family: $font-family; + } + + .shp-method-option-text { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-roxo; + font-family: $font-family; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index effd14e..5945d6f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,14 +1,25 @@ -.container { - @include mq(md, max) { - width: 100%; - } -} - .cart-template { font-family: $font-family; - @include mq(md, max) { - padding: 0 0; + .summary-totalizers { + @include mq(xl, min) { + width: 688.3px !important; + } + } + + .empty-cart-links { + align-items: center; + display: flex; + text-align: center; + a { + font-size: 0; + height: 16px; + &::after { + content: "Continuar comprando"; + font-size: 14px; + text-transform: uppercase; + } + } } .item-unit-label { @@ -22,18 +33,89 @@ margin-bottom: 48px; @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; - } - - @include mq(sm, max) { height: 91px; } .cart-items { + td.quantity-price { + @include mq(xl, min) { + width: 200px; + } + + @include mq(xl, min) { + span { + font-size: 28px; + line-height: 33px; + } + } + } thead { + .product { + font-size: 16px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + + .shipping-date { + font-size: 0; + height: 16px; + &::after { + content: "Frete"; + font-size: 16px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + + .product-price { + font-size: 0; + height: 16px; + &::after { + content: "Unidade"; + font-size: 16px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + + .quantity { + font-size: 0; + height: 16px; + &::after { + content: "Quantidade"; + font-size: 16px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + + .quantity-price { + font-size: 0; + height: 0; + + &::after { + content: "Total"; + font-size: 16px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + @include mq(md, max) { .item-remove { display: none; @@ -99,6 +181,10 @@ .summary-template-holder { border-top: none; background: $color-white; + + @include mq(xl, min) { + height: 300px; + } } #go-to-cart-button a { @@ -138,6 +224,7 @@ padding: 16px 0; @include mq(md, max) { margin: 0; + height: 91px; } } @@ -162,7 +249,7 @@ padding: 0; width: 60px; - @include mq(sm, max) { + @include mq(md, max) { width: 72px; } @@ -173,8 +260,8 @@ max-width: 60px !important; margin: 0 16px 16px 0; - @include mq(sm, min) { - margin-top: 16px; + @include mq(md, max) { + margin: 0 !important; } } } @@ -182,9 +269,15 @@ .product-name { padding: 0; height: 60px; + display: block; - @include mq(lg, max) { - width: 36.796%; + @include mq(md, max) { + width: 100% !important; + display: flex; + } + + @include mq(xl, min) { + width: 100% !important; } a { @@ -194,10 +287,24 @@ font-size: 12px; line-height: 14px; color: $black-padrao; + font-family: $font-family-secundary; transition: ease-in 0.22s all; @include mq(md, max) { - margin-left: 24px; + margin-left: 4px; + position: relative; + top: 20px; + } + + @include mq(sm, max) { + margin-left: 16px; + top: 0; + } + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + width: 100%; } &:hover { @@ -224,6 +331,11 @@ line-height: 14px; font-family: $font-family-secundary; color: $color-gray8; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } @include mq(md, max) { @@ -240,33 +352,50 @@ position: relative; top: 5px; - @include mq(md, max) { - min-width: 78px; - } @include mq(sm, max) { + top: -45px !important; + left: 0 !important; + } + + @include mq(md, max) { text-align: right; position: relative; - top: -50px; + top: -20px; + left: 40px; float: right; margin-right: 5px; height: 38px; padding: 0; } - span.list-price { + .list-price { color: $color-gray2; font-size: 12px; line-height: 14px; text-decoration-line: line-through; - @include mq(sm, max) { + @include mq(md, max) { font-size: 12px; line-height: 14px; } + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + .old-product-price-label { text-transform: lowercase; } } + + .best-price { + span { + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + } + } } td.quantity { @@ -282,12 +411,17 @@ padding: 0; width: max-content !important; position: relative; - top: 5px; + top: 13px; + + @include mq(md, max) { + margin: 0; + position: relative; + top: -20px; + } @include mq(sm, max) { - margin-left: 84px !important; - position: relative; - top: -58px; + top: -48px; + left: 16px; } input { @@ -306,6 +440,11 @@ @include mq(lg, max) { width: 24px !important; } + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } } .icon-plus-sign, @@ -315,6 +454,10 @@ display: block; font-weight: 500; padding: 1px 12px; + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } } } @@ -323,6 +466,10 @@ font-size: 20px; color: $color-blue-100; padding-left: 0 0 0 11px; + @include mq(xl, min) { + font-size: 28px !important; + line-height: 33px !important; + } } } @@ -331,6 +478,11 @@ font-size: 20px; color: $color-blue-100; padding-right: 0 11px 0 0; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } } } @@ -341,7 +493,7 @@ left: inherit; height: inherit; width: inherit; - top: inherit; + top: 0; } @media (max-width: 490px) { @@ -384,12 +536,16 @@ display: flex; i { - height: 10px; - width: 10px; - @include mq(sm, max) { position: relative; - top: 6px; + top: 7px !important; + left: 8px !important; + } + + @include mq(md, max) { + position: relative; + top: -20px; + left: 20px; } } } @@ -405,6 +561,10 @@ @include mq(md, max) { font-size: 18px; } + + @include mq(xl, min) { + font-size: 25px; + } } } @@ -423,6 +583,9 @@ } .summary { + @include mq(xl, min) { + height: 300px; + } .cart-more-options { margin: 0; width: max-content; @@ -445,15 +608,34 @@ @include mq(md, max) { margin-top: 0; } + + @include mq(xl, min) { + font-size: 48px; + line-height: 65px; + } } - .srp-description { - margin: 0 0 10.65px; - font-weight: 400; - font-size: 12px; - line-height: 18px; - font-family: $font-family; - color: $color-gray2; + .srp-content { + @include mq(xl, min) { + font-size: 28px; + line-height: 36px; + width: 512px; + max-width: 512px; + } + .srp-description { + margin: 0 0 10.65px; + font-weight: 400; + font-size: 12px; + line-height: 18px; + font-family: $font-family; + color: $color-gray2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 36px; + max-width: 100%; + } + } } button.shp-open-options { @@ -478,40 +660,67 @@ background-color: darken($color-gray5, 5); } } - } - .srp-data { - width: 280px; + .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: $color-blue-100; - border: none; - border-radius: 8px; - color: $color-white; - outline: none; - width: 100%; - height: 42px; - - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - letter-spacing: 0.05em; - - &:hover { - background-color: ($color-blue-hover); + @include mq(xl, min) { + width: 100%; } - &:active { - background-color: ($color-blue-hover); + @include mq(cstm, max) { + width: calc(100vw - 32px); + } + + @include mq(md, max) { + margin-bottom: 40px; + } + + button { + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + .srp-pickup-empty { + &__my-location { + @include mq(xl, min) { + button { + font-size: 28px; + line-height: 38px; + height: 61px; + } + } + } + } + + .srp-pickup-my-location__button { + background-color: $color-blue-100; + border: none; + border-radius: 8px; + color: $color-white; + outline: none; + width: 100%; + height: 42px; + + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + + @include mq(xl, min) { + width: 100%; + } + + &:hover { + background-color: ($color-blue-hover); + } + + &:active { + background-color: ($color-blue-hover); + } } } } @@ -523,12 +732,35 @@ background-color: $color-white; border-radius: 100px; width: 100%; + height: 36px; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; text-transform: uppercase; + + @include mq(xl, min) { + width: 543px; + height: 57px; + display: flex; + justify-content: center; + align-items: center; + } + } + + &__delivery { + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + &__pickup { + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } } &__current { @@ -556,6 +788,9 @@ } .ship-postalCode { + @include mq(xl, min) { + width: 543px; + } label { font-family: $font-family; font-style: normal; @@ -564,17 +799,29 @@ line-height: 14px; margin-bottom: 2px; color: $color-black; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } } input { border: 1px solid $color-gray3; + color: $black-padrao; border-radius: 5px; box-shadow: none; - color: $color-gray3; + color: $color-black; font-size: 12px; height: 36px; padding: 12px 8px; width: 172px; + + @include mq(xl, min) { + width: 334px; + height: 55px; + font-size: 28px; + } } & ~ button { @@ -596,6 +843,15 @@ transition: all 0.2s linear; text-transform: uppercase; + @include mq(xl, min) { + width: 194px; + height: 55px; + font-size: 28px; + line-height: 38px; + right: 0px; + top: 45px; + } + &:hover { background-color: lighten($color-blue-hover, 5); } @@ -612,6 +868,12 @@ line-height: 12px; color: $black-padrao; margin-top: 4px; + display: flex; + + @include mq(xl, min) { + font-size: 20px; + line-height: 38px; + } } span.help.error { @@ -622,6 +884,12 @@ width: 100%; top: 81px; right: 0px; + + @include mq(xl, min) { + font-size: 20px; + line-height: 38px; + top: 130px; + } } } } @@ -698,6 +966,14 @@ justify-content: center; padding-bottom: 8px; margin: 0; + + @include mq(xl, min) { + display: flex; + justify-content: center; + align-items: flex-end; + height: 70px; + } + #cart-link-coupon-add { text-decoration: none; &:hover { @@ -711,6 +987,11 @@ font-size: 12px; line-height: 14px; color: $black-padrao; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -721,6 +1002,13 @@ .coupon-column { width: 362px; + @include mq(md, max) { + width: 100%; + } + + @include mq(xl, min) { + width: 100%; + } .coupon { margin: 0; } @@ -740,74 +1028,108 @@ font-family: $font-family-secundary; display: flex; justify-content: start; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } - .coupon-fields { - margin-bottom: 54px; - text-align: start; + .coupon-fieldset { + @include mq(xl, min) { + height: 87px; + margin-bottom: 40px; + display: flex; + justify-content: center; + align-items: flex-end; - span { - @include mq(sm, max) { - display: flex; - flex-direction: row; - justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; - } - } - } - - input { - border: 1px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - - color: $color-gray7; - font-weight: 400; - font-size: 12px; - line-height: 14px; - height: 34px; - padding: 0 12px; - width: 178px; - margin-right: 5px; - font-family: $font-family-secundary; - - @include mq(sm, max) { - max-width: 100%; + &:first-child { + display: block; + height: 87px; width: 100%; } } + .coupon-fields { + margin-bottom: 20px; + text-align: start; - button { - background: $color-blue-100; - border: none; - border-radius: 8px; - color: $black-padrao; - font-size: 14px; - height: 36px; - letter-spacing: 1px; - outline: none; - transition: all 0.2s linear; - width: 133.5px; - text-transform: uppercase; - font-family: $font-family; - - &::placeholder { - padding: 5px; + span { + @include mq(md, max) { + display: flex; + flex-direction: row; + justify-content: space-between; + i { + position: absolute; + right: 91px; + opacity: 1; + } + } } - @include mq(md, max) { - width: 138px; + input { + border: 1px solid $color-gray3; + border-radius: 5px; + box-shadow: none; + + color: $color-black; + font-weight: 400; + font-size: 12px; + line-height: 14px; + height: 34px; + padding: 0 12px; + width: 178px; + margin-right: 5px; + font-family: $font-family-secundary; + + @include mq(md, max) { + max-width: 100%; + width: 100%; + } + + @include mq(xl, min) { + height: 55px; + width: 398.4px; + font-size: 28px; + line-height: 38px; + } } - &:hover { - background-color: lighten($color-black, 5); - } + button { + background: $color-blue-100; + border: none; + border-radius: 8px; + color: $black-padrao; + font-size: 14px; + height: 36px; + letter-spacing: 1px; + outline: none; + transition: all 0.2s linear; + width: 133.5px; + text-transform: uppercase; + font-family: $font-family; - &:active { - background-color: darken($color-black, 5); + @include mq(md, max) { + width: 138px; + } + + @include mq(xl, min) { + height: 55px; + width: 253.3px; + font-size: 28px; + line-height: 38px; + } + + &::placeholder { + padding: 5px; + } + + &:hover { + background-color: lighten($color-black, 5); + } + + &:active { + background-color: darken($color-black, 5); + } } } } @@ -833,6 +1155,13 @@ line-height: 16px; font-family: $font-family-secundary; color: $color-black; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + height: 33px; + width: 300px; + } } &.info { @@ -854,6 +1183,11 @@ line-height: 25px; color: $color-black; font-family: $font-family; + + @include mq(xl, min) { + font-size: 36px; + line-height: 49px; + } } } } @@ -877,13 +1211,20 @@ padding-bottom: 43.4px; } + @include mq(xl, min) { + width: 684.3px; + position: relative; + left: 740px; + margin-top: 17px; + } + .link-choose-more-products-wrapper { display: block; text-align: center; margin-bottom: 15px; @include mq(md, max) { - margin-bottom: 0px; + margin-bottom: 15px; } a { @@ -893,6 +1234,11 @@ color: $black-padrao; font-size: 12px; line-height: 14px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -921,6 +1267,11 @@ vertical-align: middle; line-height: 19px; text-shadow: none; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 9f853a2..a25ae09 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,6 +2,10 @@ padding: 0 16px; position: relative; + @include mq(xl, min) { + position: inherit; + } + .container { display: flex; margin: 16px 0; @@ -67,7 +71,7 @@ @media screen and (max-width: 1024px) { order: -1; margin: 0; - width: 100%; + width: 90%; padding-left: 8px; justify-content: flex-start; } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index b4dcec8..3b7e5be 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -36,7 +36,7 @@ $color-roxo: #41115d; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 576px, + sm: 491px, md: 1025px, lg: 2500px, xl: 2501px,