From 1368115fee6808220298f68d5718f51a9467dd5b Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 22:03:09 -0300 Subject: [PATCH] feat(sass):Adiciona sass da autenticacao da compra --- .../sass/checkout/_checkout-autenticacao.scss | 1154 +++++++++++++---- package-lock.json | 2 + 2 files changed, 919 insertions(+), 237 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..d7b3130 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,969 @@ .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; + } + .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 { + .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 { + 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 #e0e0e0; + border-radius: 8px; + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: #f2f2f2; + } + + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; + + &:active { + background: #f2f2f2; + } + + svg path { + fill: #d8c8ac; + } + } + } + } + + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } + + .shp-summary-group-info { + border-color: $color-gray4; + border: none; + .shp-summary-group-address { + .address-summary { + .postalCode { + display: none; + } + } + } + } + + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + + @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: 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/package-lock.json b/package-lock.json index 3be68c7..4024f93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "jquery": "^3.6.0", "m3-utils": "^0.1.0", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4" }, "devDependencies": { @@ -19345,6 +19346,7 @@ "m3-utils": "^0.1.0", "prettier": "^2.3.2", "sass": "^1.38.1", + "slick-carousel": "^1.8.1", "terser-webpack-plugin": "^5.1.4", "webpack": "^5.51.1", "webpack-merge": "^5.8.0" -- 2.34.1