From cbbf1e3d59d3cea2c388d7d9c125e72c99b2e6c5 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Wed, 21 Dec 2022 22:00:58 -0300 Subject: [PATCH] feat: gera modificacao de css para organizar o layout das paginas em versao desktop 1280px --- checkout/src/arquivos/js/components/Footer.js | 70 +- .../sass/checkout/_checkout-autenticacao.scss | 736 ++++++++++++++---- .../sass/checkout/_checkout-carrinho.scss | 326 ++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 15 +- 4 files changed, 919 insertions(+), 228 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ce12bd8..fd47b66 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,3 +1,4 @@ +import { data } from "jquery"; import { waitElement } from "m3-utils"; export default class Footer { @@ -8,8 +9,8 @@ export default class Footer { async init() { await this.selectors(); this.onUpdate(); - this.createfooterShelf(); - this.insertImagesPayments(); + + this.insertImagesPayments() this.insertImagesDevelopedBy(); } @@ -22,8 +23,12 @@ export default class Footer { this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira"); + + + } + onUpdate() { //Função qu 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 @@ -54,7 +59,7 @@ export default class Footer { mutations.forEach((mutation) => { if (target.style.display == "none" && window.location.hash == "#/cart") { shelf.classList.remove("none"); - this.footerShelf(); + this.createfooterShelf(); } else { shelf.classList.add("none"); @@ -67,6 +72,34 @@ export default class Footer { } + async addCarrossel() { + const elementSlick = document.querySelector(".footerCheckout__prateleira__list"); + + $(elementSlick).slick({ + slidesToShow: 4, + slidesToScroll: 1, + infinite: true, + arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + } + }, + { + breakpoint: 491, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + } + } + ] + }); + } + + insertImagesPayments() { this.footerCheckoutPayments.innerHTML = ` @@ -94,6 +127,7 @@ export default class Footer { `; } + async createfooterShelf() { this.footerCheckoutShelf.innerHTML = ``; this.footerCheckoutShelf.innerHTML += ` @@ -132,32 +166,6 @@ export default class Footer { } - async addCarrossel() { - const elementToUseInSlick = document.querySelector(".footerCheckout__prateleira__list"); - - $(elementToUseInSlick).slick({ - slidesToShow: 4, - slidesToScroll: 1, - infinite: true, - arrows: true, - responsive: [ - { - breakpoint: 1025, - settings: { - slidesToShow: 3, - slidesToScroll: 1, - } - }, - { - breakpoint: 491, - settings: { - slidesToShow: 2, - slidesToScroll: 1, - } - } - ] - }); - } - - } + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..eb51e71 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -20,40 +20,74 @@ display: flex; align-items: center; justify-content: center; + text-transform: uppercase; + font-family: $font-family-secundary; + color: $color-black; + font-weight: 400; + font-size: 20px; + line-height: 23px; + h3 { margin-bottom: 16px; + span { color: #303030; font-size: 24px; + text-transform: uppercase; + font-family: $font-family-secundary; + color: $color-black; } small { - color: $color-gray4; + color: $color-black; + } } } .client-email { margin: 0 0 16px; + margin: 0 0 16px; + width: 100%; + + max-width: 54.90625%; + height: 68.09px; + + + + @media (min-width:2500px) { + max-width: none; + } input { box-shadow: none; color: $color-black; font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; + padding: 0 16px 12px; + border: 1px solid $color-black; box-sizing: border-box; border-radius: 5px; + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + } + @media (max-width: 490px) { width: auto; } } button { - background-color: $color-black; + background-color: $color-blue2; + color: $color-black; border-radius: 5px; border: none; font-family: $font-family; @@ -76,8 +110,10 @@ .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; + border: 1px solid $color-black; border-radius: 0; + width: 35.743%; + border-radius: 8px; h3 { color: #303030; @@ -89,11 +125,22 @@ li { span { + font-family: $font-family; color: $color-black; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media (min-width:2500px) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + } + } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; } @@ -112,178 +159,601 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + // span { + // color: #303030; + // margin-bottom: 8px; + // padding: 0; + // background: none; - i::before { - fill: #303030; + & span:nth-child(2n) { + margin-bottom: 36px; + padding: 0; + visibility: hidden; + position: relative; + + &::before { + content: "Identificação"; + visibility: visible; + position: absolute; } } - 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; + i::before { + fill: #303030; } } - .accordion-inner { - padding: 0; + a { + align-items: center; + background-color: $color-white; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + display: none; + } + } - /* General configurations */ + .accordion-inner { + padding: 0; - .client-notice { - color: $color-black; - } + /* General configurations */ - p { - label { - color: $color-black; - font-weight: 500; - } + .client-notice { + color: $color-black; + display: none; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } - - .help.error { - color: red; - } - } - - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } - - .state-inscription-box span { + p { + label { + color: $color-gray2; font-weight: 500; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } + select, + input { + height: 42px; + border-radius: 8px; + border: 1px solid $color-gray7; + box-shadow: none; } - /* Shipping configurations */ - .ship-postalCode small a { - color: #303030; + .help.error { + color: red; + } + } + + .box-client-info-pj { + + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; font-weight: 500; text-decoration: underline; } + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .state-inscription-box span { + font-weight: 500; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + button.submit { + border: none; + border-radius: 5px; + background: $color-blue2; + color: $color-white; + font-weight: 700; + font-size: 14px; + line-height: 19px; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; + width: 100%; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - svg path { - fill: #d8c8ac; - } - } - } + &:hover { + background: lighten($color-black, 5); } - .delivery-address-title { + &:active { + background: darken($color-black, 5); + } + } + + /* Shipping configurations */ + + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + background-color: red; + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { color: #303030; font-size: 14px; font-weight: 500; } - .shp-summary-group-info { - border-color: $color-gray4; + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 3px; + + + 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-gray7; + border-radius: 0; + color: $color-gray2; + padding: 12px; + border-radius: 8px; + + @include mq(md, max) { + background-position: 8px 9px; } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + a { + content: ""; + display: block; + text-align: end; - @include mq(md, max) { - background-position: 8px 9px; - } - a { - color: #303030; + &::after { + content: "alterar"; + color: $color-blue2; 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); } } } + + .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); + } } } + + + +i.icon-user, +i.icon-home, +i.icon-credit-card { + display: none; +} + +.checkout-container .shipping-data .accordion-group .accordion-inner .vtex-omnishipping-1-x-deliveryGroup .shp-lean { + border: 1px solid $color-gray7; + border-radius: 8px; +} + +label.vtex-omnishipping-1-x-leanShippingOption { + .shp-option-icon { + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png") no-repeat center center; + width: 18px; + height: 18px; + + svg path { + display: none; + } + } +} + +label.vtex-omnishipping-1-x-leanShippingOptionActive { + .shp-option-icon { + background: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png") no-repeat center center; + width: 18px; + height: 18px; + + svg path { + display: none; + } + } +} + +.ship-country { + display: none; +} + +#ship-postalCode { + // width: 100%; + // min-width: 95%; + border-radius: 8px; + border: 1px solid $color-gray6; + height: 40px; + +} + +.ship-number { + width: 100%; +} + +.step.accordion-group.shipping-data { + & .accordion-heading { + & span.accordion-toggle.collapsed { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-repeat: no-repeat; + background-size: 16px; + background-position: 100% 50%; + cursor: pointer; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + + } + } +} + +.payment-data { + & .accordion-group { + & .accordion-heading { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-repeat: no-repeat; + background-size: 16px; + background-position: 100% 50%; + cursor: pointer; + } + } +} + +i.icon-edit { + position: relative; + color: transparent; + + &::before { + position: relative; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-repeat: no-repeat; + background-size: 16px; + background-position: 100% 50%; + width: 16px; + height: 16px; + } +} + +p.notification { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; +} + +input#client-last-name, +.input#client-first-name, +input#client-document, +input#client-phone { + width: 100%; +} + +input#client-first-name { + @media (max-width: 1024px) { + width: 96%; + } +} + +p.client-first-name.input.pull-left.text.required, +p.client-last-name.input.pull-left.text.required { + max-width: 46%; +} + +p.client-last-name.input.pull-left.text.required { + @media (max-width: 1024px) { + max-width: 46.9%; + } +} + +input#client-document, +input#client-phone { + width: 92%; + + @media (max-width: 1024px) { + width: 96%; + } +} + +input#client-phone { + @media (max-width: 1024px) { + width: 100%; + } +} + +.client-document.input.pull-left.text.required.mask, +p.client-phone.input.pull-left.text.required.mask { + width: 48%; + + @media (max-width: 1024px) { + width: 46%; + } +} + +form.form-page.client-pre-email.anim-death.anim-current { + height: 100vh; + + @media (max-width: 1024px) { + height: 100%; + } +} + +span.quantity.badge { + display: none; +} + +.cart-template .cart-items .product-name { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black2; +} + +.cart-fixed.affix-top.cart-fixed-transition { + border: 1px solid #e5e5e5; + border-radius: 8px; +} + +.cart-template .cart-fixed .cart { + border-left: none; + border-top: none; + border-right: none; + border-bottom: 1px solid $color-gray2; + border-radius: 0; + margin-bottom: 0; +} + +.mini-cart h2 { + text-align: left; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px !important; + line-height: 19px; + color: $color-black !important; + margin-left: 10px; + top: 24px; + position: relative; +} + +.mini-cart .item { + top: 26px; +} + +a#orderform-minicart-to-cart { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + right: 16px; + color: #000000 !important; + bottom: 34px; + position: relative; + cursor: pointer; +} + +span.fn.product-name { + overflow-wrap: break-word; + white-space: break-spaces !important; + inline-size: 182px !important; +} + +.cart-fixed .cart ul li .price { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + color: #292929; + white-space: nowrap; +} + +li.hproduct.item.muted { + display: flex; + align-items: center; + justify-content: space-between; +} + +.mini-cart .price { + margin-right: 0; +} + +p#go-to-cart-button { + height: 0; +} + +tr.Items, +tr.Discounts { + border-bottom: 1px solid $color-gray2 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; +} + +td.info { + left: 17px; + position: relative; +} + +.shipping-summary-info { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; +} + +p.submit.btn-submit-wrapper { + margin-top: 44px; +} + +.step.accordion-group.client-profile-data.active { + width: 88.5%; + height: auto; +} + +.cart-template .cart-fixed { + width: 98.2%; +} + +td.monetary { + right: 17px; + position: relative; +} + +.cart-fixed.cart-fixed-transition.affix-top { + height: auto !important; +} + +button#shipping-option-delivery { + background: #ffffff; + border: 1px solid #292929; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #41115d; + width: 148px !important; + height: 36px !important; +} + +button#shipping-option-pickup-in-point { + border-radius: 100px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #c4c4c4; +} + + + +p.input.ship-postalCode.required.text { + display: flex; + flex-direction: column; + // width: 100%; + + label { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } +} + +.accordion-heading .accordion-toggle { + padding: 4px 0 0; + font-weight: 400; + font-size: 16px; + line-height: 19px; + +} + +input#client-email { + width: 96%; + + +} + +.box-client-info { + margin-top: 36px; +} + +#opt-in-newsletter { + height: auto; +} + +.step.accordion-group.client-profile-data.filled { + height: 100%; + padding: 24px 16px 36px; +} + +.box-step { + margin-top: 25px; +} + +input#ship-number, +input#ship-complement, +input#ship-receiverName { + width: 95%; + height: 35px; +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..c410841 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; + @include mq(md, max) { padding: 0 0; } + .item-unit-label { display: none; } + .cart { border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + height: 150px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -25,12 +29,15 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; width: 100%; + h2 { background: $color-white; border: none; @@ -63,7 +70,7 @@ .shipping-date, .price { - color: #7d7d7d; + color: $color-gray2; } } } @@ -85,12 +92,13 @@ } #payment-data-submit { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + &:hover { background: lighten($color-black, 5); } @@ -119,6 +127,7 @@ line-height: 16px; @include mq(md, max) { + &.quantity-price, &.shipping-date { display: none; @@ -190,9 +199,11 @@ .product-price { min-width: 100px; + @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -204,6 +215,7 @@ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -218,11 +230,11 @@ 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: 12px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -234,7 +246,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: none; border-radius: 0; border-width: 0 1px; display: block; @@ -245,6 +257,8 @@ color: $color-gray2; box-shadow: none; + + @include mq(lg, max) { width: 24px !important; } @@ -252,25 +266,33 @@ .icon-plus-sign, .icon-minus-sign { + + &::before { - color: $color-black; + color: $color-white; display: block; font-weight: 500; - padding: 1px 12px; + // padding: 1px 12px; + background-color: $color-blue2; + width: 16px; + height: 16px; + margin: 0 11px; + border-radius: 100%; + } } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; + font-size: 14px; } } .icon-plus-sign { &:before { content: "+"; - font-size: 14px; + font-size: 15px; } } @@ -290,17 +312,29 @@ } } + + .quantity-price, .best-price { .icon-question-sign { display: none; } + span { + margin-bottom: 20px; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black; + + } + + &:nth-child(2n), + :nth-child(2n) { + font-weight: 700; + font-size: 14px; + line-height: 19px; } } @@ -314,6 +348,7 @@ @media (max-width: 490px) { top: 0; } + .icon::before { color: $color-gray4; font-size: 15px; @@ -405,15 +440,16 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; + padding: 11px 35px; outline: none; width: 100%; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 0.05em; @@ -484,21 +520,41 @@ width: 172px; } - & ~ button { - background-color: $color-black; + &~button { + background: $color-blue2; + border-radius: 8px; border: none; - border-radius: 5px; color: $color-white; - font-size: 12px; height: 36px; - letter-spacing: 1px; outline: none; position: absolute; right: -150px; - top: 36px; + top: 39px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + cursor: pointer; + + @media (min-width: 2500px) { + width: 194.16px; + height: 55px; + right: -413px; + font-size: 28px; + line-height: 38px; + top: 55px; + } + + @media (max-width: 375px) { + width: 120px; + height: 36px; + right: -213px; + + } &:hover { background-color: lighten($color-black, 5); @@ -510,13 +566,27 @@ } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + margin-top: 4px; + font-size: 0; + color: $color-black2; + cursor: pointer; + + &::before { + content: "Não sei meu código postal"; + font-family: "Tenor Sans"; + font-style: normal; + font-style: normal; + font-weight: 400; + line-height: 12px; + text-decoration-line: underline; + font-size: 10px; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + white-space: nowrap; + } + } } span.help.error { @@ -531,6 +601,7 @@ } .srp-result { + strong, .srp-items { color: #303030; @@ -574,11 +645,11 @@ } &__sla { - color: #7d7d7d; + color: $color-gray2; } &__price { - color: #7d7d7d; + color: $color-gray2; font-weight: 500; } @@ -592,24 +663,60 @@ &-totalizers { padding: 0; - width: 346px; + width: 353px; + + @media (min-width: 2500px) { + width: 688.35px; + } + + // aqui + @media (max-width: 1024px) { + width: 97%; + display: flex !important; + justify-content: center; + position: relative; + flex-direction: column; + margin: 0 16px; + } + + @media (max-width: 375px) { + width: auto; + } .coupon-data { + margin-top: 1px; + + @media (max-width: 1024px) { + margin-top: 48.35px; + } + + @media (max-width: 375px) { + margin-top: 48.35px; + } + #cart-link-coupon-add { text-decoration: none; + cursor: pointer; + &:hover { text-decoration: underline; cursor: pointer; } } + span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; text-decoration: none; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -630,24 +737,36 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; + margin-bottom: 4px; font-style: normal; - font-weight: normal; font-size: 12px; line-height: 14px; color: $color-gray2; cursor: none; + font-family: $font-family-secundary; + font-weight: 400; + text-align: initial; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } .coupon-fields { margin-bottom: 32px; + & span { + display: flex; + } + @include mq(sm, max) { span { display: flex; flex-direction: row; justify-content: space-between; + i { position: absolute; right: 91px; @@ -657,14 +776,38 @@ } input { - border: 2px solid $color-gray3; border-radius: 5px; box-shadow: none; color: $color-gray4; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + height: 12.012px; + width: 169.972px; + max-width: none; + padding: 11px 16.18px 11px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + line-height: 14px; + text-align: left; + + background: $color-white; + border: 1px solid $color-gray5; + + &::placeholder { + color: $color-gray2; + } + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + height: 26.1px; + width: 364.1px; + padding: 13px 16.18px 14px; + } + + @media (max-width: 1024px) { + width: 100%; + } @include mq(sm, max) { max-width: 100%; @@ -673,18 +816,31 @@ } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + margin-left: 15.17px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 133.51px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; text-transform: uppercase; + color: $color-black2; + text-align: center; + + @media (min-width: 2500px) { + width: 260.34px; + height: 55px; + font-weight: 400; + font-size: 28px; + line-height: 38px; + } @include mq(md, max) { width: 138px; @@ -716,8 +872,17 @@ font-weight: normal; font-size: 14px; line-height: 16px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; color: $color-black; padding: 12px 0; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } &.info { @@ -731,13 +896,22 @@ } tfoot { + td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 25px; + color: #292929; + font-family: $font-family; + + @media (min-width: 2500px) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + white-space: nowrap; + } } } } @@ -782,13 +956,31 @@ .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; border-radius: 5px; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding-top: 0px; + padding-bottom: 0px; + height: 41.67px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + @media (min-width: 2500px) { + height: 54.19px; + } + + @media (max-width: 1024px) { + margin: 0 16px; + } + + @media (max-width: 375px) { + margin: 0; + } &:hover { background-color: darken($color-green, 5); @@ -796,17 +988,33 @@ &:after { content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; + font-style: normal; + font-weight: 700; + font-size: 14px; line-height: 19px; - text-shadow: none; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: "Open Sans"; + font-style: normal; + color: $color-black2; + + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } } } + +.loading-inline span { + display: none; + position: absolute; +} + +.client-profile-data ul { + display: none; +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..310e2e9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,6 +12,7 @@ footer .footerCheckout__wrapper { width: 94.9734%; margin: auto auto 0 auto; } + footer .footerCheckout__prateleira, header { width: 79.53125%; @@ -47,6 +48,7 @@ body { padding-left: 0; } } + .container-order-form, .container-cart { width: 80%; @@ -68,15 +70,18 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; letter-spacing: 0.1em; text-transform: uppercase; + + + @include mq(md, max) { margin-left: 30px; } @@ -123,4 +128,4 @@ body { transform: rotate(0); } } -} +} \ No newline at end of file