From 93efdb8cf22c23f5ed69d564ade5c682552698ca Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 22:22:05 -0300 Subject: [PATCH] feat(checkout): adiciona css em scss as telas do checkout --- .../sass/checkout/_checkout-autenticacao.scss | 1297 ++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 848 +++++++++-- .../sass/checkout/_checkout-vazio.scss | 131 +- .../src/arquivos/sass/checkout/_checkout.scss | 48 +- 4 files changed, 1918 insertions(+), 406 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..75c4875 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,1112 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + @media (max-width: 1024px) { + .orderform-template { + display: flex; + flex-direction: column; + } - .link-cart { - a { - color: $color-black; - font-size: 14px; + .row-fluid { + display: flex; + flex-direction: column; - &:hover { - color: lighen($color-black, 10); - } - } - } + #shipping-data, + #payment-data { + margin: 0; + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .orderform-template-holder { + width: 93.556%; + } + } - h3 { - margin-bottom: 16px; + .client-pre-email { + border-color: $color-black; + padding-top: 12px; - span { - color: #303030; - font-size: 24px; - } + .client-pre-email-h label { + margin-top: 65px; + width: 100%; - small { - color: $color-gray4; - } - } - } + @media (max-width: 375px) { + margin-top: 90px; + width: 100%; + } - .client-email { - margin: 0 0 16px; + @media (min-width: 376px) and (max-width: 1024px) { + width: 100%; + } + } - 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; + .client-pre-email-h { + margin: 0; + display: flex; + justify-content: center; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 375px) { + margin-bottom: 22px; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + .link-cart { + margin: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + a { + color: $color-black; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; - span.help.error { - color: red; - } - } + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 1024px) { + margin-right: 16px; + font-size: 10px; + line-height: 12px; + } + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - ul { - margin: 0; + h3 { + margin-bottom: 21px; - li { - span { - color: $color-black; - } + @media (max-width: 1024px) { + margin-bottom: 28px; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + span { + color: $color-black; + font-size: 24px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + @media (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + @media (max-width: 375px) { + width: 100%; + font-size: 12px; + } + } - i::before { - fill: #303030; - } - } + small { + color: $color-black; + font-size: 24px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + padding: 0; - 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; - } - } + @media (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } - .accordion-inner { - padding: 0; + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } - /* General configurations */ + @media (max-width: 375px) { + width: 100%; + font-size: 12px; + } + } + } + } - .client-notice { - color: $color-black; - } + .client-email { + margin: 0 0 16px -120px; + .btn-success { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + } - p { - label { - color: $color-black; - font-weight: 500; - } + @media (max-width: 1024px) { + width: 100%; + margin: 0 0 16px -12%; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + @media (min-width: 2500px) { + width: 1166px; + margin-left: -200px; + } - .help.error { - color: red; - } - } + @media (max-width: 491px) { + margin: 0 0 16px -90px; + width: 76%; + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + @media (max-width: 375px) { + width: 57.6%; + margin: 0 0 0 -128px; + height: 95px; + } - .state-inscription-box span { - font-weight: 500; - } + @media (max-width: 280px) { + width: 55.4%; + margin-left: -108px; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + input { + box-shadow: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 0 14px; + border: 1px solid $color-black; + box-sizing: border-box; + border-radius: 5px 0px 0px 5px; + width: 65.738%; - &:hover { - background: lighten($color-black, 5); - } + @media (min-width: 2500px) { + width: 765.37px; + height: 52px; + font-size: 24px; + line-height: 33px; + } - &:active { - background: darken($color-black, 5); - } - } + @media (max-width: 1024px) { + width: 84.4%; + max-width: 866px; + height: 50px; + } + } - /* Shipping configurations */ + input::placeholder { + color: $color-black; + } - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + button { + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + width: 18.81%; + height: 54px; + right: -4px; + top: 0; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-black; + cursor: pointer; - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + @media (min-width: 2500px) { + width: 219px; + height: 54px; + top: -1px; + font-size: 28px; + line-height: 38px; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 1024px) { + right: -4.5%; + height: 50px; + top: 0px; + width: 126.76px; + } - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + @media (max-width: 491px) { + right: -57.6%; + top: -55px; + height: 50px; + width: 126.76px; + } - svg path { - fill: #d8c8ac; - } - } - } - } + @media (max-width: 375px) { + right: -79.34%; + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + span.help.error { + color: $color-red; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + margin: 5px 49% 10px; + width: 118px; - .shp-summary-group-info { - border-color: $color-gray4; - } + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + width: 236px; + margin: 5px 572px 10px; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + @media (max-width: 1024px) { + margin: 7px 502px 10px; + } - @include mq(md, max) { - background-position: 8px 9px; - } + @media (max-width: 375px) { + margin: -46px 50.4% 22px; + } + } + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black; + border-radius: 5px; + width: 366px; + height: auto; - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + @media (min-width: 2500px) { + width: 742.67px; + height: 204.58px; + } - .shp-summary-group-price { - padding-right: 16px; - } + @media (max-width: 1024px) { + width: 309px; + } - .shp-summary-package { - padding-left: 16px; - } + @media (max-width: 375px) { + width: 82.4%; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + h3 { + color: $color-black; + margin: 0 0 8px 0; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + margin-bottom: 15px; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + @media (max-width: 1024px) { + margin-top: 4px; + } + } + + ul { + margin: 0; + + li:nth-child(1) { + max-width: 150px; + } + + li:nth-child(2) { + max-width: 279px; + } + + li:nth-child(3) { + max-width: 231px; + } + + li:nth-child(4) { + max-width: 302px; + } + + @media (min-width: 2500px) { + li:nth-child(1) { + max-width: 100%; + } + + li:nth-child(2) { + max-width: 100%; + } + + li:nth-child(3) { + max-width: 100%; + } + + li:nth-child(4) { + max-width: 100%; + } + } + + li { + span { + color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + + @media (min-width: 2500px) { + font-size: 2rem; + } + } + } + } + + .icon-lock { + position: absolute; + bottom: -29px; + right: 0px; + + @media (max-width: 1024px) { + display: none; + } + } + + i::before { + color: $color-black; + font-size: 5.736rem; + opacity: 0.5; + + @media (min-width: 2500px) { + font-size: 11.083rem; + } + } + } + } + + .client-profile-data { + .pull-left { + @media (max-width: 490px) { + float: left !important; + } + } + } + + #payment-data > div { + @media (max-width: 1024px) { + margin-left: 1.6%; + } + } + + .shipping-data, + .payment-data, + .client-profile-data { + @media (max-width: 1024px) { + width: 100%; + margin-left: 1.6%; + } + + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 24px 17px 36px; + + .accordion-heading { + .accordion-toggle { + margin: 0 0 25px; + i { + display: none; + } + } + } + + @media (max-width: 1024px) { + width: 93.556%; + } + + @media (min-width: 2500px) { + padding: 20px 20px 20px 36px; + } + #postalCode-finished-loading { + @media (max-width: 375px) { + width: 343px; + } + @media (max-width: 1024px) { + width: 309px; + } + } + + .accordion-heading { + .accordion-toggle { + .icon-credit-card, + .icon-home { + content: url(https://agenciamagma.vteximg.com.br/arquivos/LapisM3Academy.png); + width: 20px; + float: right; + cursor: pointer; + @media (min-width: 2500px) { + color: transparent; + } + } + } + .accordion-toggle-active { + i { + display: none; + } + } + + span { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black2; + margin-top: 6px; + margin-bottom: 36px; + padding: 0; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 37px; + margin-bottom: 14px; + } + + span[data-i18n="clientProfileData.identification"] { + color: $color-white; + } + + span[data-i18n="clientProfileData.identification"]::before { + content: "Identificação"; + color: $color-black; + @media (min-width: 2500px) { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 37px; + + color: #292929; + } + } + .link-box-edit { + background: $color-white; + border: none; + + .icon-edit { + display: block; + content: url(https://agenciamagma.vteximg.com.br/arquivos/LapisM3Academy.png); + width: 20px; + float: right; + cursor: pointer; + @media (min-width: 2500px) { + width: 37.19px; + } + } + } + } + } + + .accordion-inner { + padding: 0; + + .box-step { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-address { + display: flex; + flex-direction: column; + div { + display: flex; + flex-direction: column; + p { + margin-right: 14px; + } + } + } + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + .ship-postalCode { + flex-direction: column; + display: flex; + .input-small { + max-width: 95.98%; + } + small { + margin: 0; + } + } + } + .form-step { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + + color: #7d7d7d; + } + .client-profile-email { + margin-bottom: 6px; + } + .client-profile-summary { + br { + display: none; + } + display: flex; + flex-direction: column; + gap: 6px; + } + } + .shp-summary-group { + padding: 0; + } + } + /* General configurations */ + + .box-step { + .box-step-content { + .form-step { + margin-top: 76px; + } + } + } + + .client-notice { + display: none; + } + + .client-email > input { + @media (max-width: 1024px) { + width: 98.54%; + max-width: 100%; + } + + @media (min-width: 2500px) { + font-size: 26px; + } + + width: 96%; + } + + .client-email > label { + font-size: 0px; + } + + .client-email > label::after { + content: "Email"; + font-size: 14px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + margin-top: 24px; + } + } + + p.client-first-name, + p.client-last-name, + p.client-document, + p.client-phone { + width: 43%; + + @media (min-width: 2500px) { + width: 44.6%; + } + } + + p.client-first-name, + p.client-document { + margin-right: 10%; + + @media (min-width: 2500px) { + margin-right: 7%; + } + } + + @media (max-width: 1024px) { + p.client-first-name, + p.client-document { + margin-right: 3%; + } + + p.client-first-name, + p.client-last-name, + p.client-document, + p.client-phone { + width: 47.7%; + } + } + + p.client-document, + p.client-phone { + input { + @media (max-width: 490px) { + width: 95% !important; + } + } + } + + p.newsletter span { + text-transform: none; + } + + p { + label { + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: capitalize; + height: 20px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + margin-bottom: 20px; + } + } + + select, + input { + border-radius: 5px; + border: 1px solid $color-gray6; + box-shadow: none; + height: 32px; + margin-bottom: 8px; + width: 100%; + + @media (min-width: 2500px) { + height: 23px; + padding: 24px 0 12px 9px; + font-size: 26px; + } + } + + input::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + } + + .help.error { + color: $color-red; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + text-transform: capitalize; + + @media (min-width: 2500px) { + font-size: 18px; + width: 100%; + } + } + } + + .box-client-info-pf { + @media (max-width: 1024px) { + width: 100%; + } + } + + .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; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + .newsletter { + margin: -4px 0 32px; + + @media (min-width: 2500px) { + margin: -14px 0 50px; + } + } + + #opt-in-newsletter { + position: relative; + top: -3px; + width: 18px; + height: 18px; + border: 1px solid $color-gray8; + border-radius: 3px; + + @media (min-width: 2500px) { + width: 35px; + height: 35px; + top: -1px; + } + } + + .newsletter-text { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray7; + margin-left: 6px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + + .submit .btn-submit-wrapper { + text-align: center; + } + + button.submit { + border: none; + border-radius: 8px; + background: $color-blue2; + margin: 8px 0 21px; + outline: none; + width: 100%; + color: $color-white; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + padding: 0; + height: 42px; + letter-spacing: 0.05em; + text-transform: uppercase; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + height: 61px; + } + } + + .shipping-summary-info, + .notification { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + } + + /* Shipping configurations */ + + .ship-postalCode small a { + font-family: "Open Sans"; + color: #303030; + font-weight: 500; + text-decoration: underline; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #292929; + } + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { + font-family: "Open Sans"; + color: #7d7d7d; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + } + + .shp-lean { + border: 1px solid #e0e0e0; + border-radius: 8px; + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: #f2f2f2; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png) !important; + path { + fill: transparent; + } + } + } + } + .vtex-omnishipping-1-x-leanShippingOption { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png); + path { + fill: transparent; + } + } + } + } + + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; + + &:active { + background: #f2f2f2; + } + + svg path { + fill: #d8c8ac; + } + } + } + } + + .delivery-address-title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + + color: #7d7d7d; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } + } + + .shp-summary-group-info { + border-color: $color-gray4; + border: none; + .shp-summary-group-address { + .address-summary { + .postalCode { + display: none; + } + } + } + } + + .address-summary { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #7d7d7d; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-size: 20px; + background-repeat: no-repeat; + + @media (min-width: 2500px) { + padding: 15px 28px 15px 81px; + paddin-left: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + background-size: 40px; + } + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + color: #00c8ff; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } + } + + .shp-summary-group-price { + padding-right: 16px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } + } + + .shp-summary-package { + padding-left: 0px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + display: none; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white; + border: 1px solid #292929; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: #000; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + text-shadow: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + text-transform: uppercase; + } + } + .vtex-omnishipping-1-x-deliveryOptionInactive { + color: #c4c4c4; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + text-transform: uppercase; + } + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..2ae5d48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -5,6 +5,11 @@ } .cart-template { + @include mq(l, max) { + display: flex; + flex-direction: column; + } + font-family: $font-family; @include mq(md, max) { padding: 0 0; @@ -13,10 +18,15 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin-bottom: 48px; + + @include mq(l, max) { + padding: 0; + } @include mq(md, max) { margin: 0px 0 25px 0; @@ -65,6 +75,20 @@ .price { color: #7d7d7d; } + .shipping-date { + @media (min-width: 2500px) { + display: none; + } + } + + .url { + .photo { + object-fit: cover; + transform: rotateY(180deg); + height: 60px; + width: 60px; + } + } } } @@ -74,8 +98,22 @@ } #go-to-cart-button a { - color: #303030; - text-decoration: underline; + color: $color-black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + text-decoration-line: underline; + @media (max-width: 1024px) { + float: right; + } + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } .summary-totalizers { @@ -85,18 +123,27 @@ } #payment-data-submit { - background: $color-black; - border: none; - border-radius: 0; + background: #298541; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + span { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + i { + display: none; + } &:hover { - background: lighten($color-black, 5); + background: lighten(#298541, 5); } &:active { - background: darken($color-black, 5); + background: darken(#298541, 5); } } } @@ -108,16 +155,44 @@ .cart-items { .product-item { padding: 16px 0; + + @include mq(c, max) { + padding: 16px 0 0 16px; + margin: 16px 16px 15px 16px; + } + + @include mq(l, max) { + display: flex; + padding: 16px 0 15px 16px; + } + + @include mq(m, max) { + position: relative; + padding: 0 0 0 16px; + margin: 16px 16px 15px 16px; + } } th { - color: $color-black; - padding: 0 0 16px; + text-align: start; + font-family: $font-family-secundary; + color: $color-black2; + padding: 0 0 17px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + @include mq(l, max) { + display: none; + } + + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -130,45 +205,84 @@ height: auto; padding: 0; width: 60px; - - @include mq(sm, max) { - width: 72px; + @include mq(xxl, min) { + width: 7.427%; + height: 146px; } img { height: 60px; max-width: 100%; - width: auto; - - @include mq(sm, max) { - height: 72px; - width: auto; + width: 100%; + object-fit: cover; + transform: rotateY(180deg); + @include mq(xxl, min) { + width: 100%; + height: 146px; } } } .product-name { + width: 32.425%; padding-right: 0; + padding-left: 0; + + @include mq(l, max) { + position: absolute; + left: 92px; + padding: 0; + } + + @include mq(xxl, min) { + width: 32.147%; + } @include mq(lg, max) { width: 250px; } + @include mq(m, max) { + margin: 0 !important; + left: 78px !important; + } + a { - color: $color-blue; + color: $color-black; font-style: normal; font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + padding-left: 16px; + + @include mq(l, max) { + position: absolute; + padding: 0; + width: 200px; + } + @include mq(xxl, min) { + padding-left: 31px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } &:hover { - color: darken($color-blue, 10); + color: darken($color-black, 10); text-decoration: none; } @media (max-width: 490px) { - margin-left: 23px; + position: absolute; + padding: 0; + margin: 0; + width: 200px; + } + + @include mq(f, max) { + font-size: 8px; } } @@ -179,17 +293,61 @@ } td.shipping-date { - color: $color-gray2; + text-align: start; + color: $color-gray12; font-size: 12px; line-height: 14px; + width: 14.85%; + padding-left: 0; + font-weight: 400; + font-family: $font-family-secundary; + + @include mq(l, max) { + display: none; + } + + @include mq(xxl, min) { + width: 14.5982%; + } + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } @include mq(md, max) { display: none; } } + td.product-price { + top: 10px; + + @include mq(l, max) { + position: absolute; + right: 0; + top: 32px; + } + @include mq(m, max) { + top: 22px; + } + } + .product-price { - min-width: 100px; + text-align: start; + width: 14.95%; + padding-left: 0; + + @include mq(l, max) { + text-align: right; + width: fit-content; + padding-right: 16px; + } + + @include mq(xxl, min) { + width: 14.904%; + } + @include mq(md, max) { min-width: 78px; } @@ -200,77 +358,127 @@ } span.list-price { - color: $color-gray2; + color: $color-gray12; + font-weight: 400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } @include mq(sm, max) { font-size: 12px; line-height: 14px; } + @include mq(f, max) { + font-size: 12px; + } + .old-product-price-label { text-transform: lowercase; + font-family: $font-family-secundary; + } + + .muted { + color: $color-gray12; + font-family: $font-family-secundary; } } } + .table td { + padding: 5px 5px 5px 0; + } + td.quantity { align-items: center; - border: 1px solid $color-gray3; border-radius: 0; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; - max-height: 38px; - max-width: 118px; + margin: 18px 0 0; + max-height: 34px; + max-width: 99px; + min-height: 34px; + min-width: 99px; padding: 0; width: max-content !important; + border: 1px solid $color-gray3; + border-radius: 8px; - @media (max-width: 490px) { - margin-left: 84px !important; + @include mq(f, max) { + max-width: 70px; + min-width: 70px; + } + + @include mq(l, max) { + margin-left: 16px; + margin-top: 26px; + } + + @include mq(xxl, min) { + margin: 53px 0 0; + max-width: 135px; + max-height: 50px; } input { background-color: $color-white; border: 1px solid $color-gray3; border-radius: 0; - border-width: 0 1px; + border-width: 0 0; display: block; max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; + padding: 0; + width: 45px; color: $color-gray2; box-shadow: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + width: 54px; + } @include mq(lg, max) { - width: 24px !important; + width: 45px !important; + } + @include mq(f, max) { + width: 20px !important; } } .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-black2; display: block; font-weight: 500; - padding: 1px 12px; } } .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + font-size: 14px; + color: $color-blue2; + padding: 9px 0px 9px 11px; + @include mq(xxl, min) { + font-size: 29px; + } } } .icon-plus-sign { &:before { - content: "+"; font-size: 14px; + color: $color-blue2; + padding: 9px 11px 9px 0px; + @include mq(xxl, min) { + font-size: 29px; + } } } @@ -290,6 +498,46 @@ } } + .quantity-price { + text-align: start; + width: 10%; + padding-left: 0; + @include mq(xxl, min) { + width: 9.258%; + } + + @include mq(l, max) { + display: none; + } + + .total-selling-price { + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-black2; + font-family: $font-family; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + } + } + + .item-remove { + @include mq(l, max) { + position: absolute; + top: 8px; + right: 0; + } + .item-link-remove { + vertical-align: super; + @include mq(xxl, min) { + vertical-align: middle; + } + } + } + .quantity-price, .best-price { .icon-question-sign { @@ -298,9 +546,22 @@ span { font-style: normal; font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; + color: $color-black2; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + .new-product-price { + font-family: $font-family-secundary; + } + .new-product-price-label { + text-transform: lowercase; + font-family: $font-family-secundary; } } @@ -312,12 +573,16 @@ .item-remove { @media (max-width: 490px) { - top: 0; + top: -7px !important; } .icon::before { - color: $color-gray4; + color: $color-gray10; font-size: 15px; + @include mq(xxl, min) { + font-size: 26px; + } + @include mq(md, max) { font-size: 18px; } @@ -339,24 +604,42 @@ } .summary { + @include mq(l, max) { + display: flex !important; + flex-direction: column; + max-width: 992px; + width: auto; + margin: 0 16px; + } .cart-more-options { margin: 0; - width: max-content; + max-width: 55.68%; + + @include mq(l, max) { + margin-bottom: 48px; + } + + .srp-content { + @include mq(xxl, min) { + width: 700px; + } + } .srp-container { - padding: 0 0 0 10px; - - @include mq(md, max) { - padding: 0 16px; - } + padding: 0; .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px; font-style: normal; - font-weight: normal; + color: $color-black; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-top: 0; @@ -365,24 +648,56 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-weight: 400; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + max-width: 78.86%; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 36px; + } + + @include mq(l, max) { + max-width: 276px; + width: 276px; + } + + @include mq(f, max) { + width: 248px; + font-size: 12px; + } } button.shp-open-options { - background-color: $color-gray5; + width: 100%; + background-color: $color-gray11; border: none; border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + font-weight: 400; + font-size: 14px; line-height: 19px; - font-weight: 500; + letter-spacing: 0.05em; + color: $color-black; outline: none; padding: 12px 40px; transition: all 0.2s linear; + @include mq(l, max) { + width: 157px; + height: 44px; + } + + @include mq(xxl, min) { + width: 230px; + font-weight: 400; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + height: 44px; + padding: 0; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -393,43 +708,85 @@ } } + .srp-pickup-empty__my-location { + width: 178.35%; + + @include mq(l, max) { + width: 343px; + margin: 0; + } + @include mq(xxl, min) { + width: 173.14%; + } + } + .srp-data { - width: 280px; + width: 44.86%; + margin-top: 10.65px; + + .shp-open-options { + margin: 0; + } @include mq(cstm, max) { width: calc(100vw - 32px); } - @include mq(md, max) { - margin-bottom: 40px; - } - .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + margin-top: 7px; + padding: 13px 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); + @include mq(xxl, min) { + height: 60.98px; } - &:active { - background-color: darken($color-black, 5); + @include mq(l, max) { + height: 42px; + width: 343px; + } + + @include mq(f, max) { + width: 248px; + float: left; + } + + span { + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-white; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } .srp-toggle { - margin: 0 0 34px; + margin: 0; + padding-bottom: 13px; + width: 178.35%; + + @include mq(l, max) { + width: 343px; + } + @include mq(xxl, min) { + width: 173.14%; + } &__wrapper { background-color: $color-white; @@ -441,40 +798,69 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + + @include mq(l, max) { + width: 343px; + } + + @include mq(f, max) { + width: 248px; + } } &__current { - border: 1px solid $color-blue; - border-radius: 100px; + border: 1px solid $color-black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-blue; + color: $color-black; } label { width: 50%; + font-weight: 400; + font-size: 14px; + line-height: 19px; + background-color: $color-white; + border-radius: 100px; + + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + } &:active { - background-color: #f0f0f0; } } } .srp-postal-code { + .srp-postal-code__form { + .ship-country { + display: none; + } + } + .ship-postalCode { label { font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; - line-height: 14px; + line-height: 16px; color: $color-black; - margin-bottom: 12px; + margin-bottom: 2px; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray10; border-radius: 5px; box-shadow: none; color: $color-gray3; @@ -482,46 +868,90 @@ height: 36px; padding: 12px 8px; width: 172px; + @include mq(xxl, min) { + width: 333.96px; + height: 55px; + margin-bottom: 5px; + } + @include mq(l, max) { + width: 215px; + } + @include mq(f, max) { + width: 160px; + } } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; - font-size: 12px; + font-weight: 700; + font-size: 14px; + line-height: 19px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; outline: none; position: absolute; right: -150px; - top: 36px; + top: 28px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; + @include mq(xxl, min) { + width: 194.16px; + height: 55px; + right: -285px; + top: 45px; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + @include mq(l, max) { + width: 120px; + right: -213px; + } + @include mq(f, max) { + font-size: 11px; + width: 80px; + right: -118px; + } + &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue2, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0; + + &:after { + text-decoration-line: underline; + font-family: $font-family-secundary; + font-style: normal; + margin-top: 7px; + font-size: 10px; + font-weight: 400; + line-height: 12px; + color: $color-black; + content: "Não sei meu código postal"; + @include mq(xxl, min) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + } + } } span.help.error { + display: none !important; color: red; - font-size: 12px; + font-size: 10px; position: absolute; left: 0; width: 100%; @@ -591,9 +1021,22 @@ } &-totalizers { + margin: 0; padding: 0; width: 346px; + @include mq(c, max) { + padding: 0 !important; + } + + @include mq(l, max) { + width: 100%; + margin: 0; + } + @include mq(xxl, min) { + width: 688.35px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -603,13 +1046,19 @@ } } 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; text-decoration: none; + color: $color-black; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } } @@ -621,6 +1070,79 @@ .coupon-column { .coupon { margin: 0; + + .coupon-form { + .coupon-fieldset { + & div { + text-align: initial; + + .coupon-value { + min-width: 50.96%; + border: 1px solid $color-gray5; + border-radius: 5px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + font-family: $font-family-secundary; + color: $color-gray10; + @include mq(xxl, min) { + min-width: 54.105%; + height: 55px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + @include mq(l, max) { + max-width: 83.367%; + min-width: 83.367%; + width: 83.367%; + margin-right: 5px; + } + + @media screen and (max-width: 1019px) { + min-width: 70%; + width: 70%; + } + + @include mq(c, max) { + width: 100%; + min-width: fit-content; + } + } + + button { + margin-left: 2.036%; + min-width: 38.59%; + font-weight: 400; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + font-family: $font-family; + color: $color-black; + background-color: $color-blue2; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + height: 55px; + margin-left: 3.843%; + min-width: 37.822%; + } + @include mq(l, max) { + width: 133.51px; + min-width: 133.51px; + float: right; + margin: 0; + } + @include mq(f, max) { + min-width: 40px; + font-size: 10px; + } + } + } + } + } } .link-coupon-add { @@ -631,13 +1153,18 @@ .coupon-label label { margin-bottom: 12px; - 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-gray2; cursor: none; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } .coupon-fields { @@ -673,7 +1200,7 @@ } button { - background: $color-black; + background: $color-black2; border: none; border-radius: 5px; color: $color-white; @@ -691,11 +1218,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-black2, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-black2, 5); } } } @@ -713,11 +1240,17 @@ &.info, &.monetary { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; - color: $color-black; + color: $color-black2; padding: 12px 0; + font-family: $font-family-secundary; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } &.info { @@ -726,6 +1259,9 @@ &.monetary { text-align: right; + @include mq(xxl, min) { + min-width: 240px; + } } } } @@ -734,10 +1270,20 @@ 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; + font-family: $font-family; + color: $color-black2; + + @include mq(l, max) { + width: 120px; + } + @include mq(xxl, min) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } } } @@ -749,40 +1295,45 @@ flex-direction: column; width: 343px; - @include mq(md, max) { - padding: 0 16px; + @include mq(l, max) { + max-width: 992px; width: calc(100% - 32px); - float: none; - margin-bottom: 50px; + margin: 0 16px; } - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; + @include mq(xxl, min) { + width: 688.34px; } .link-choose-more-products-wrapper { display: block; text-align: center; margin-bottom: 16px; + margin-right: 10px; @include mq(md, max) { margin-bottom: 0px; } a { - 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-black; + margin: 0; + @include mq(xxl, min) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; border-radius: 5px; display: block; @@ -791,22 +1342,69 @@ padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: $color-blue2; } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; + line-height: 19px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; vertical-align: middle; - line-height: 19px; text-shadow: none; + @include mq(xxl, min) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + } } } } } } + +.cart-items { + thead { + tr { + .shipping-date { + font-size: 0; + &:after { + font-size: 14px; + content: "Frete"; + vertical-align: middle; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + + .product-price { + font-size: 0; + &:after { + font-size: 14px; + content: "Unidade"; + vertical-align: middle; + @include mq(xxl, min) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + } + } +} +@include mq(xxl, min) { + .vtex-shipping-preview-0-x-postalCodeForgotten { + p { + width: 260px !important; + } + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..42a2bc0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,105 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; + &-content { + margin-top: 170px; + color: $color-black; + text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + @include mq(md, max) { + padding: 0 16px; + } + .empty-cart-message { + display: none; + } + } - &-title { - font-size: 20px; - } + &-title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black-000; + margin-bottom: 32px; + @include mq(dt, max) { + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + margin-bottom: 22px; + } + @include mq(tv, min) { + font-weight: 700; + font-size: 48px; + line-height: 65px; + } + } + &-btn { + padding: 250px !important; + } - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + &-links { + .link-choose-products { + background: $white; + transition: ease-in 0.22s all; + outline: none; + font-family: $font-family-secundary; + font-style: normal; + color: $black; + text-align: center; + letter-spacing: 0.05em; + color: $black; + font-size: 0px; + text-transform: uppercase; + border: 1px solid #000000; + border-radius: 0%; + padding: 16px 64px 16px 65px; + height: 16px; + margin: 0; + &::after { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + content: "Continuar comprando"; + } - &:hover { - background: lighten($color-black, 5); - } - } - } + &:hover { + background: $white; + } + @media screen and (max-width: 354px) { + height: 32px !important; + } + @include mq(dt, max) { + height: 16px; + padding: 16px 26px; + + &::after { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + } + } + @include mq(tv, min) { + height: 33.52px; + padding: 16px 121px; + &::after { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..31cb12e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,11 +9,11 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; + // width: 94.9734%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, -header { +footer .footerCheckout__prateleira { width: 79.53125%; margin: 0 auto; } @@ -49,37 +49,61 @@ body { } .container-order-form, .container-cart { + //margin-top: 170px; width: 80%; + + @include mq(l, max) { + max-width: 1024px; + width: 100%; + } } } .btn-success { - background: $color-black; + background: $color-black2; + padding: 15px 64px 17px 65px; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($color-black2, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $color-black2 !important; +} + +#orderform-title { + margin-bottom: 28px !important; } #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + height: 33px; + line-height: 33px; + margin: 17px 0 16px; + font-weight: 700; + font-size: 24px; + letter-spacing: 0.05em; text-transform: uppercase; + @include mq(xxl, min) { + height: 65px; + font-weight: 700; + font-size: 48px; + line-height: 65px; + letter-spacing: 0.05em; + } + @include mq(md, max) { margin-left: 30px; } + + @include mq(l, max) { + margin-left: 16px; + } } .dropdown {