From cc38398ef62970d9aaadb732da570a5228cd556c Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Mon, 26 Dec 2022 20:57:32 -0300 Subject: [PATCH] =?UTF-8?q?feat(checkout):=20criado=20e=20modificado=20est?= =?UTF-8?q?iliza=C3=A7=C3=A3o.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-autenticacao.scss | 1107 ++++++++++++----- 1 file changed, 820 insertions(+), 287 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..559a356 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,822 @@ -.checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; - - &:hover { - color: lighen($color-black, 10); - } - } - } - - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; - - h3 { - margin-bottom: 16px; - - span { - color: #303030; - font-size: 24px; - } - - small { - color: $color-gray4; - } - } - } - - .client-email { - margin: 0 0 16px; - - 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; - - @media (max-width: 490px) { - width: auto; - } - } - - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; - - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } - - span.help.error { - color: red; - } - } - - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; - - h3 { - color: #303030; - margin: 0 0 8px 0; - } - - ul { - margin: 0; - - li { - span { - color: $color-black; - } - - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } - - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } - - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; - - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - - i::before { - fill: #303030; - } - } - - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } - - .accordion-inner { - padding: 0; - - /* General configurations */ - - .client-notice { - color: $color-black; - } - - p { - label { - color: $color-black; - font-weight: 500; - } - - 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 { - 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); - } - } - - /* Shipping configurations */ - - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - - .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-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); - } - } - } - } +.mini-cart { + .cart { + @include mq(xl, min) { + max-height: initial; + } + } +} + + +.checkout-container { + .mini-cart { + .affix-top, + .affix { + height: 409px !important; + + @include mq(xl, min) { + height: 630px !important; + } + + .summary-cart-template-holder { + height: 36% !important; + + @include mq(xl, min) { + height: auto !important; + } + } + + .cart { + border: none; + + ul li:not(:first-child) { + padding: 0; + margin: 0; + } + } + + .summary-template-holder { + .accordion-group { + .accordion-inner { + tbody { + tr { + border: 1px solid $color-gray9; + border-left: 0; + border-right: 0; + + td.info, + td.monetary { + padding: 20px 17px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: $color-gray2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + td.info { + width: -webkit-fill-available; + + @include mq(xl, min) { + width: max-content; + } + } + + td.monetary { + width: 100%; + + @include mq(xl, min) { + width: 20px; + } + } + } + } + + tfoot { + td.info, + td.monetary { + padding: 25px 17px 0 17px; + } + + td.info { + width: -webkit-fill-available; + + @include mq(xl, min) { + width: max-content; + } + } + + td.monetary { + width: 100%; + } + } + } + } + } + } + #go-to-cart-button { + a { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black2; + text-decoration: none; + margin: 10px 17px 5px 0; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + + &:hover { + text-decoration: underline; + } + } + } + } + + .client-pre-email { + border-color: $color-black2; + font-family: $font-family; + + .link-cart { + margin-top: 9px; + + a { + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-transform: uppercase; + color: $color-black2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + + span, + small { + font-family: $font-family-secundary; + font-size: 20px; + font-weight: 400; + line-height: 23px; + text-transform: uppercase; + color: $color-black2; + + @include mq(xl, min) { + font-size: 40px; + line-height: 47px; + } + } + } + + .client-email { + margin: 6px 0 9px; + max-width: 562px; + + @include mq(xl, min) { + max-width: 971px; + } + + i { + right: 130px; + top: 6px; + } + + input { + font-size: 12px; + font-weight: 400; + line-height: 16px; + height: 50px; + box-shadow: none; + color: $color-black1; + font-family: $font-family; + padding: 0 15px; + border: 1px solid $color-black2; + box-sizing: border-box; + border-radius: 5px 10px 10px 5px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + + @media (max-width: 490px) { + width: auto; + } + } + + button { + height: 50px; + width: 126px; + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + right: 0; + top: 0; + outline: 0; + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-black2; + text-transform: uppercase; + } + + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } + + span.help.error { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + color: red; + text-transform: capitalize; + margin-top: 3px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + .emailInfo { + margin: 11px auto 0 auto; + padding: 16px; + background-color: $color-white1; + border: 1px solid $color-black2; + color: $color-black2; + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + max-width: 400px; + border-radius: 5px; + + @include mq(xl, min) { + max-width: 776px; + font-size: 24px; + line-height: 33px; + } + + h3 { + margin: 0 0 8px 0; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + + ul { + margin: 0; + + li { + span { + color: $color-black2; + } + + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + width: 17px; + height: 10px; + + @include mq(xl, min) { + font-size: 25px; + width: 33px; + height: 23px; + } + } + } + } + + i::before { + color: $color-black1; + font-size: 7rem; + opacity: 0.5; + + @include mq(xl, min) { + font-size: 150px; + } + } + } + + label { + margin-top: 45px; + } + } + + .client-profile-data.filled { + height: 106px; + } + + .shipping-data, + .payment-data, + .client-profile-data { + #client-email { + width: 96.4%; + + @include mq(xl, min) { + height: 61px; + width: 97.7%; + } + } + + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray9; + font-family: $font-family; + padding: 20px 16px; + + @include mq(xl, min) { + padding: 24px 34px; + } + + &:nth-child(1) { + padding: 20px 16px 24px 16px; + + @include mq(xl, min) { + padding: 24px 34px; + } + } + + .accordion-heading { + margin-bottom: 8px; + + .accordion-toggle { + span { + @include mq(xl, min) { + margin: 0; + } + } + } + + .collapsed { + a { + padding: 8px 8px 6px 0px; + } + } + + span { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + padding: 0; + font-family: $font-family-secundary; + font-size: 16px; + font-weight: 400; + line-height: 19px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 32px; + line-height: 37px; + margin-bottom: 15px; + } + + .link-box-edit { + background-color: transparent; + outline: 0; + opacity: 100%; + border: none; + box-shadow: none; + } + + [class^="icon-"]:not(.icon-user:first-child) { + content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + cursor: pointer; + width: 20px; + height: 20px; + + @include mq(xl, min) { + width: 40px; + height: 40px; + } + } + + i::before { + display: none; + } + } + + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white1; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } + + ul { + display: none; + } + + .accordion-inner { + padding: 0; + margin-top: 8px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + + .box-info { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + letter-spacing: 0em; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + + .client-profile-email { + margin: 15px 0 0; + } + + .client-profile-summary { + .name { + display: flex; + flex-direction: column; + margin: 5px 0; + } + + .tel { + margin-bottom: 20px; + } + } + + br { + display: none; + } + } + + /* General configurations */ + + .client-notice { + display: none; + color: $color-black1; + } + + .newsletter { + @include mq(xl, min) { + margin: 12px 0; + } + } + + p { + label { + display: flex; + align-items: center; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: $color-gray2; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + + .newsletter-label { + height: 18px; + margin-top: -5px; + + #opt-in-newsletter { + margin-right: 8px; + width: 18px; + height: 18px; + min-width: auto; + + @include mq(xl, min) { + width: 35px; + height: 35px; + } + } + + .newsletter-text { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + select, + input { + border-radius: 5px; + border: 1px solid $color-gray9; + box-shadow: none; + height: 42px; + padding: 0 0 0 11px; + margin-bottom: 4px; + min-width: 143px; + + @include mq(xl, min) { + min-width: 270px; + height: 61px; + font-size: 28px; + line-height: 38px; + } + } + + .help.error { + color: red; + margin-top: 0; + + @include mq(xl, min) { + font-size: 23px; + width: auto; + } + } + } + + .client-first-name, + .client-document { + margin-right: 15px; + } + + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black1; + font-weight: 500; + text-decoration: underline; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + button.submit { + border: none; + border-radius: 8px; + background: $color-blue2; + margin: 44px 0 24px 0; + outline: none; + display: block; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + height: 61px; + } + } + + /* Shipping configurations */ + + .ship-postalCode { + label { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + color: $color-gray2; + } + + input { + min-width: 96%; + } + + small { + margin: 1px 0 0 0; + + a { + font-weight: 500; + text-decoration: underline; + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black1; + } + } + } + .vtex-omnishipping-1-x-deliveryGroup { + p { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + color: $color-gray2; + margin: -7px 0 7px 0; + } + + .shp-lean { + border: 1px solid $color-gray9; + border-radius: 8px; + + label { + background-color: $color-white1; + box-shadow: none; + color: #303030; + padding: 8px 12px; + } + + .vtex-omnishipping-1-x-leanShippingOption { + svg { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); + + width: 18px; + height: 18px; + border-radius: 3px; + + path { + fill: transparent; + } + } + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background-color: $color-white2; + + svg { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + + path { + fill: transparent; + } + } + + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray9; + .shp-option-text-label, + .shp-option-text-time { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + } + } + + .vtex-omnishipping-1-x-optionPrice { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + padding-left: 6px; + } + } + } + + .delivery-address-title { + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.05em; + text-align: left; + color: $color-gray2; + margin: -12px 0 7px 0; + } + + .shp-summary-group-info { + border-color: $color-gray4; + } + + .address-summary { + background: $color-white1; + border-color: $color-gray9; + border-radius: 8; + padding: 12px 12px 12px 44px; + + @include mq(md, max) { + background-position: 8px 9px; + } + + span { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-gray2; + } + + a { + font-family: $font-family; + text-transform: lowercase; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-blue2; + text-decoration: none; + margin-left: 56px; + } + + :nth-child(6) { + display: none; + } + } + + .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-address { + input { + width: 314px; + height: 35px; + margin-bottom: 2px; + } + + label { + display: inline-flex; + font-family: $font-family; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.05em; + } + + #ship-state { + display: block; + width: 314px; + outline: none; + } + } + + .vtex-omnishipping-1-x-submitPaymentButton { + button { + margin: -11px 0 20px 0; + } + } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + } + + .vtex-omnishipping-1-x-addressSummaryActive { + .address-summary { + background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") + no-repeat; + background-size: 25px; + background-position: 10px 19px; + } + } + + .vtex-omnishipping-1-x-deliveryChannelsWrapper { + margin: 22px 0 25px; + } + + .vtex-omnishipping-1-x-summaryChange { + color: $color-gray6; + } + + .vtex-omnishipping-1-x-deliveryChannelsOption { + color: $color-gray6; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white1; + border: 1px solid $color-black2; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + color: $color-black2; + } + } + } + } } -- 2.34.1