diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 0bc765a..94bb886 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,148 +1,9 @@ .checkout-container { - .client-pre-email { - border-color: $clr-gray-300; - font-family: $font-family-100; - padding-top: 8px; - - .link-cart { - a { - color: $clr-gray-600; - font-size: 14px; - - &:hover { - color: lighen($clr-gray-600, 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: $clr-gray-300; - } - } - } - - .client-email { - margin: 0 0 16px; - - input { - box-shadow: none; - color: $clr-gray-600; - font-family: $font-family-100; - padding: 0 16px; - border: 2px solid $clr-gray-100; - box-sizing: border-box; - border-radius: 5px; - - @media (max-width: 490px) { - width: auto; - } - } - - button { - background-color: $clr-gray-600; - border-radius: 5px; - border: none; - font-family: $font-family-100; - 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: $clr-common-white; - border: 1px solid $clr-gray-300; - border-radius: 0; - - h3 { - color: #303030; - margin: 0 0 8px 0; - } - - ul { - margin: 0; - - li { - span { - color: $clr-gray-600; - } - - i::before { - color: $clr-gray-600; - font-size: 1rem; - opacity: 1; - } - } - } - - i::before { - color: $clr-gray-600; - font-size: 6rem; - opacity: 0.5; - } - } - } - .shipping-data, .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $clr-gray-300; - font-family: $font-family-100; - 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: $clr-common-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } - .accordion-inner { - padding: 0; - /* General configurations */ .client-notice { @@ -150,18 +11,6 @@ } p { - label { - color: $clr-gray-600; - font-weight: 500; - } - - select, - input { - border-radius: 0; - border: 1px solid $clr-gray-300; - box-shadow: none; - } - .help.error { color: red; } @@ -180,23 +29,6 @@ font-weight: 500; } - button.submit { - border: none; - border-radius: 5px; - background: $clr-gray-600; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($clr-gray-600, 5); - } - - &:active { - background: darken($clr-gray-600, 5); - } - } - /* Shipping configurations */ .ship-postalCode small a { @@ -206,12 +38,6 @@ } .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } - .shp-lean { border: 1px solid $clr-gray-300; border-radius: 0; @@ -229,47 +55,10 @@ } } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - .shp-summary-group-info { border-color: $clr-gray-300; } - .address-summary { - background: none; - border-color: $clr-gray-300; - 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: $clr-gray-300; - } - - .shp-summary-group-price { - padding-right: 16px; - } - - .shp-summary-package { - padding-left: 16px; - } - .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; @@ -317,10 +106,6 @@ float: none; } - #find-pickups-manualy-button-denied { - @include btn-primary-blue-white(); - } - #postalCode-finished-loading { .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: $clr-common-white; @@ -346,133 +131,20 @@ border: 1px solid $clr-primary-blue-500; } - .checkout-container .shipping-data .accordion-group, - .checkout-container .payment-data .accordion-group, - .checkout-container .client-profile-data .accordion-group, .checkout-container .shipping-data .accordion-group .accordion-inner .vtex-omnishipping-1-x-deliveryGroup - .shp-lean, - .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary, - .cart-template.mini-cart .cart-fixed { + .shp-lean { border: 1px solid $clr-gray-100; border-radius: 8px; } - .checkout-container .form-page.client-pre-email { - padding: 5px; - box-sizing: content-box; - } - - .checkout-container .client-profile-data .accordion-group { - padding: 16px 16px 44px; - } - .client-profile-data .accordion-group .accordion-heading span i.icon-user { display: none; } - .client-profile-data .accordion-group .accordion-heading span span[data-i18n] { - font-size: 0px; - - &::before { - content: "Identificação"; - font-size: 16px; - line-height: 18.72px; - font-family: $font-family-200; - } - } - - .checkout-container .shipping-data .accordion-group .accordion-inner p label, - .checkout-container .payment-data .accordion-group .accordion-inner p label, - .checkout-container .client-profile-data .accordion-group .accordion-inner p label { - color: #7d7d7d; - font-size: 12px; - line-height: 19.07px; - } - - .checkout-container .shipping-data .accordion-group .accordion-inner p select, - .checkout-container .shipping-data .accordion-group .accordion-inner p input, - .checkout-container .payment-data .accordion-group .accordion-inner p select, - .checkout-container .payment-data .accordion-group .accordion-inner p input, - .checkout-container .client-profile-data .accordion-group .accordion-inner p select, - .checkout-container .client-profile-data .accordion-group .accordion-inner p input { - border: 1px solid #f0f0f0; - padding: 0 11px; - border-radius: 5px; - height: 42px; - width: 100%; - max-width: none; - background-position: right 50%; - } - - .checkout-container .payment-data .accordion-group .accordion-heading a, - .checkout-container .shipping-data .accordion-group .accordion-heading a, - .checkout-container .client-profile-data .accordion-group .accordion-heading a { - background-color: $clr-common-white; - font-size: 24px; - color: $clr-primary-blue-500; - } - - .box-client-info-pf { - width: 100%; - - display: grid; - grid-template-columns: 50% 50%; - } - - p.client-phone, - p.client-document, - p.client-first-name, - p.client-last-name { - float: none !important; - width: 100%; - margin: 0; - } - - p.client-first-name, - p.client-document { - padding-right: 8px; - } - - p.client-phone, - p.client-last-name { - padding-left: 8px; - } - - p.client-email { - grid-column: 1/3; - margin-bottom: 16px; - } - - p.client-first-name, - p.client-last-name { - margin-bottom: 16px; - } - - p.client-document, - p.client-phone { - margin-bottom: 16px; - } - - p.newsletter { - margin: 0 0 45px; - } - - .checkbox.newsletter-label { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - - #opt-in-newsletter { - width: 16px; - height: 16px; - } - } - .links.unstyled, .client-notice.notice { display: none; @@ -482,11 +154,6 @@ padding: 8px 16px 0; } - .checkout-container .client-pre-email .emailInfo { - width: 100%; - font-size: 12px; - } - .checkout-container .client-pre-email .emailInfo h3 { line-height: 16.34px; } @@ -500,69 +167,27 @@ padding: 0 16px; } - #go-to-cart-button { - padding: 0 16px; - - a { - font-size: 12px; - line-height: 16.34px; - text-decoration: none; - color: $clr-common-black; - } - } - .cart { border: none; margin: 0; } .cart-fixed { - padding-top: 16px; height: auto !important; + + &.affix { + position: sticky; + top: 0; + } } - .cart-totalizers.totalizers { - padding: 0; - margin-bottom: 0; + @media screen and (min-width: 1025px) { + position: relative; - tr { - border-top: 1px solid $clr-gray-200; - border-bottom: 1px solid $clr-gray-200; - } - - tbody { - td.info, - td.monetary { - color: $clr-gray-400; - } - - td.info { - padding: 25px 0 25px 16px; - } - td.monetary { - padding: 25px 16px 25px 0; - } - } - - tfoot { - tr { - border: none; - } - - td.info, - td.monetary { - color: $clr-gray-600; - } - - td.info { - padding: 30px 0 22px 16px; - font-size: 18px; - line-height: 19.07px; - } - td.monetary { - padding: 30px 16px 22px 0; - font-size: 14px; - line-height: 24.51px; + .cart-fixed { + &.affix { + top: 60px; + transform: translateY(60px); } } } @@ -589,16 +214,17 @@ } } + @media screen and (min-width: 2500px) { + grid-template-columns: fluid(1314.75px, 1988.28px) fluid(642.7px, 1988.28px); + gap: 0 30.3px; + } + div.row-fluid { width: 100%; display: grid; grid-template-columns: 1fr; - - #shipping-data { - .shipping-data { - width: 100%; - } - } + gap: 17px; + margin-bottom: 17px; #client-profile-data, #shipping-data, @@ -607,7 +233,7 @@ } .client-profile-data.filled { - margin: 0 16px 16px; + margin: 0px 16px; } &::before, @@ -618,7 +244,8 @@ @media screen and (min-width: 1025px) { grid-template-columns: fluid(331px, 677px) fluid(330px, 677px); grid-template-rows: auto auto auto; - gap: 0 16px; + margin: 0; + gap: 16px; #shipping-data, #payment-data { @@ -639,53 +266,15 @@ margin: 0; } } + @media screen and (min-width: 2500px) { + grid-template-columns: fluid(642.7px, 1314.75px) fluid(640.75px, 1314.75px); + gap: 16px 31.3px; + } } .form-step.box-edit .row-fluid { display: initial; } - - .client-pre-email { - .link-cart a { - font-size: 10px; - line-height: 12px; - font-family: $font-family-200; - text-transform: uppercase; - } - } - - .client-pre-email .emailInfo ul li i::before { - color: $clr-primary-blue-500; - } - - .client-pre-email .client-email button { - @include btn-primary-blue-black(); - } - - .checkout-container .shipping-data .accordion-group .accordion-inner button.submit, - .checkout-container .payment-data .accordion-group .accordion-inner button.submit, - .checkout-container .client-profile-data .accordion-group .accordion-inner button.submit, - #btn-go-to-payment { - @include btn-primary-blue-white(); - } - - #btn-go-to-payment { - width: 100%; - } - - .client-pre-email-h { - label { - span, - small { - font-size: 12px; - line-height: 14px; - font-weight: 400; - color: $clr-common-black; - font-family: $font-family-200; - text-transform: uppercase; - } - } - } } .checkout-container .accordion-group .accordion-heading span > i, @@ -693,25 +282,6 @@ display: none; } - .submit.btn-submit-wrapper { - button#go-to-shipping, - button#go-to-payment { - @include btn-primary-blue-white(); - - width: 100%; - } - } - - .vtex-omnishipping-1-x-address { - display: grid; - grid-template-columns: 1fr; - - .input { - float: none; - margin: 0; - } - } - .checkout-container .shipping-data .accordion-group @@ -721,7 +291,879 @@ .vtex-omnishipping-1-x-leanShippingOptionActive { background-color: #f2f2f2; } +} +.container-order-form { + @media screen and (min-width: 1200px) { + width: inherit; + } +} + +.container-order-form { + width: 100%; + + #shipping-data, + #payment-data { + float: none; + } + + #payment-data { + margin: 0; + } + + @media screen and (min-width: 1025px) { + #shipping-data, + #payment-data { + float: none; + } + + #client-profile-data .client-profile-data.active { + margin: 0; + } + + .cart-template.mini-cart { + padding: 0; + } + } + + @media screen and (min-width: 1025px) { + width: fluid(1018px, 1280px); + min-height: calc(100vh - 175px); + + .checkout-container .client-pre-email { + padding: 8px 0 0; + } + + #orderform-title { + padding: 0; + } + + .client-pre-email .emailInfo .icon-lock { + display: block; + } + } +} + +// Default styles +.orderform-template-holder .client-profile-data #client-pre-email { + @media screen and (max-width: 490px) { + width: auto; + } +} + +/*===---------------------===*\ +|H| STYLES ROUTE EMAIL |H| +\*---=====================---*/ +.checkout-container { + .client-profile-data { + .link-cart a { + @include font-size("s-100"); + line-height: 11.7px; + font-weight: 400; + font-family: $font-family-200; + text-transform: uppercase; + + &:hover { + color: lighen($clr-gray-600, 10); + } + + @media screen and (min-width: 1025px) { + @include font-size("s-300"); + line-height: 16.38px; + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 32.76px; + } + } + } +} + +.checkout-container { + .client-pre-email-h { + margin-bottom: 22px; + + label * { + @include font-size("s-200"); + line-height: 16.38px; + font-family: $font-family-200; + font-weight: 400; + padding: 0; + display: inline; + color: $clr-common-black; + text-transform: uppercase; + text-align: center; + } + } +} + +.checkout-container { + .client-pre-email-h { + @media screen and (min-width: 600px) { + margin-bottom: 38px; + + label * { + @include font-size("s-300"); + line-height: 16.38px; + } + } + + @media screen and (min-width: 1025px) { + margin-bottom: 21px; + + label * { + @include font-size("s-600"); + line-height: 23.4px; + } + } + + @media screen and (min-width: 2500px) { + margin-bottom: 23px; + + label * { + @include font-size("splus-900"); + line-height: 46.8px; + } + } + } +} + +.checkout-container { + .client-pre-email { + border-color: $clr-gray-300; + font-family: $font-family-100; + padding-top: 8px; + padding: 0 16px; + + .pre-email { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .client-email { + margin: 0 0 16px; + } + } +} + +.checkout-container { + .pre-email .client-email { + position: relative; + width: 100%; + + input { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + + width: 100%; + padding: 0 16px; + border: 2px solid $clr-gray-100; + border-right: none; + height: 52px; + border-radius: 5px 0px 0px 5px; + + box-shadow: none; + color: #292929; + + box-sizing: border-box; + } + + .btn.btn-success { + @include btn-primary-blue-black(); + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + height: 52px; + letter-spacing: 0.05em; + + max-width: 126.76px; + border-radius: 0px 8px 8px 0px; + + text-transform: uppercase; + } + + .help.error { + @include font-size("s-200"); + line-height: 16.34px; + text-align: center; + font-weight: 700; + color: red; + } + } +} + +.checkout-container { + .pre-email .client-email { + @media screen and (min-width: 1025px) { + width: fluid(562px, 1018px); + } + + @media screen and (min-width: 2500px) { + width: fluid(970.98px, 1988.28px); + + input { + @include font-size("splus-100"); + line-height: 32.68px; + } + + .btn.btn-success { + @include font-size("splus-300"); + line-height: 38.13px; + + width: fluid(219px, 970.98px); + max-width: none; + } + + .help.error { + @include font-size("splus-100"); + line-height: 32.68px; + text-align: center; + font-weight: 700; + } + } + } +} + +.checkout-container { + .emailInfo { + width: 100%; + } +} + +.checkout-container { + .emailInfo { + ul { + margin: 0; + + li { + i::before { + color: $clr-primary-blue-500; + font-size: 1rem; + opacity: 1; + } + } + } + + i::before { + color: $clr-gray-600; + font-size: 6rem; + opacity: 0.5; + } + } +} + +.checkout-container { + .emailInfo { + padding: 16px; + border: 1px solid $clr-common-black; + border-radius: 5px; + + background-color: $clr-common-white; + + h3, + span { + @include font-size("s-200"); + line-height: 16.34px; + color: $clr-common-black; + } + + h3 { + margin: 0 0 9.56px 0; + } + + span { + font-weight: 700; + margin-bottom: 0.56px; + } + } +} + +.checkout-container { + .emailInfo { + min-height: 150px; + @media screen and (min-width: 600px) { + width: fluid(343px, 992px); + } + + @media screen and (min-width: 1025px) { + width: fluid(400px, 1018px); + } + + @media screen and (min-width: 2500px) { + min-height: 238.56px; + + ul li i::before { + font-size: 2rem; + } + + h3, + span { + @include font-size("splus-100"); + line-height: 32.68px; + } + + h3 { + margin-bottom: 14px; + } + + span { + margin-bottom: 1px; + } + + i::before { + font-size: 9.5rem; + } + } + } +} + +// Default Styles + +@media screen and (max-width: 490px) { + .orderform-template-holder .client-profile-data input[type="text"] { + width: 100%; + } + + .orderform-template-holder .client-profile-data { + p.client-phone, + p.client-document, + p.client-first-name, + p.client-last-name { + float: none !important; + width: 100%; + margin: 0; + + input { + width: 100% !important; + } + } + } +} + +/*===----------------------===*\ +|H| STYLES ROUTE PROFILE |H| +\*---======================---*/ +.checkout-container { + .client-pre-email { + border-color: $clr-gray-300; + font-family: $font-family-100; + padding-top: 8px; + + .link-cart { + a { + position: relative; + z-index: 1000; + color: $clr-gray-600; + font-size: 14px; + + &:hover { + color: lighen($clr-gray-600, 10); + } + } + } + } +} + +.checkout-container { + .client-profile-data, + .shipping-data, + .payment-data { + .accordion-inner { + padding: 0; + } + + .accordion-group { + padding: 16px; + border: 1px solid #f0f0f0; + border-radius: 8px; + font-family: $font-family-100; + } + } + + .client-profile-data { + .accordion-group { + @media screen and (min-width: 2500px) { + padding: 24px 35.51px 36px 34px; + } + } + } + + .payment-data .accordion-group { + @media screen and (min-width: 2500px) { + padding: 24px 33.51px 28px 34px; + } + } + + .cart-template.mini-cart .cart-fixed { + border-top: 1px solid $clr-gray-100; + border-radius: 8px; + + .summary-cart-template-holder, + .row-fluid.summary, + h2 { + border-left: 1px solid $clr-gray-100; + border-right: 1px solid $clr-gray-100; + } + + h2 { + padding-top: 16px; + padding-bottom: 34px; + } + .summary-template-holder { + padding: 0px; + } + + .row-fluid.summary { + border-radius: 0 0 8px 8px; + border-bottom: 1px solid $clr-gray-100; + } + } +} + +.checkout-container { + .accordion-heading span { + @include font-size("s-400"); + line-height: 18.72px; + + padding: 0; + margin-bottom: 16px; + + font-family: $font-family-200; + color: $clr-common-black; + + &[data-i18n="clientProfileData.identification"] { + font-size: 0px; + + margin-bottom: 36px; + + &::before { + @include font-size("s-400"); + line-height: 18.72px; + + content: "Identificação"; + } + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-500"); + line-height: 37.44px; + + &[data-i18n="clientProfileData.identification"] { + &::before { + @include font-size("splus-500"); + line-height: 37.44px; + } + } + } + } +} + +.checkout-container { + .accordion-inner { + .shipping-summary-placeholder, + .notification { + @include font-size("s-300"); + line-height: 19.07px; + + font-weight: 400; + font-family: $font-family-100; + + color: $clr-gray-400; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + .client-profile-data, + .shipping-data, + .payment-data { + p input, + p select { + @include font-size("s-300"); + line-height: 19.07px; + font-family: $font-family-100; + + width: 100%; + height: 42px; + padding: 0 11px; + max-width: none; + border: 1px solid $clr-gray-100; + border-radius: 5px; + + background-color: $clr-common-white; + background-position: right 50%; + + &:focus { + box-shadow: none; + } + } + } +} + +.checkout-container { + .client-profile-data { + p label { + @include font-size("s-300"); + color: $clr-gray-400; + font-weight: 400; + font-family: $font-family-100; + line-height: 19.07px; + } + } +} + +.checkout-container { + .client-profile-data { + @media screen and (min-width: 2500px) { + p label { + @include font-size("splus-300"); + line-height: 38.13px; + } + + p input { + @include font-size("splus-300"); + line-height: 38.13px; + height: 61px; + } + } + } +} + +.checkout-container { + .client-profile-data { + .newsletter-label { + @include font-size("s-200"); + line-height: 16.34px; + + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + + input[type="checkbox"] { + width: 18px; + height: 18px; + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-200"); + line-height: 32.68px; + + input[type="checkbox"] { + width: 34.95px; + height: 34.95px; + } + } + } + } +} + +.checkout-container { + .btn-submit-wrapper button, + #find-pickups-manualy-button-denied, + .btn-go-to-payment { + @include btn-primary-blue-white(); + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + + transition: all 0.2s linear; + + &:hover { + background: lighten($clr-gray-600, 5); + } + + &:active { + background: darken($clr-gray-600, 5); + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } +} + +.checkout-container { + .client-profile-data.filled { + .form-step.box-info { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.checkout-container { + .shipping-data { + .shipping-container { + padding: 0; + } + + .accordion-group { + width: 100%; + + padding: 24px 17.8px 36px 17px; + + margin: 0; + + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + padding: 34px 34px 44px; + } + } + } +} + +.checkout-container { + .payment-data .accordion-heading a, + .shipping-data .accordion-heading a, + .client-profile-data .accordion-heading a { + top: 0px; + right: 0px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0px; + border: none; + + .icon-edit { + width: 20.26px; + height: 20.89px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") + center center / cover; + } + + outline: none; + background-color: $clr-common-white; + + @media screen and (min-width: 2500px) { + .icon-edit { + width: 39.24px; + height: 40.58px; + } + } + } +} + +.container-order-form { + .box-client-info-pf { + width: 100%; + + display: grid; + grid-template-columns: 50% 50%; + } + + p { + &.client-phone, + &.client-document, + &.client-first-name, + &.client-last-name { + float: none !important; + width: 100%; + margin: 0; + } + + &.client-first-name, + &.client-document { + padding-right: 8px; + } + + &.client-phone, + &.client-last-name { + padding-left: 8px; + } + + &.client-email { + grid-column: 1/3; + margin-bottom: 16px; + } + + &.client-first-name, + &.client-last-name { + margin-bottom: 16px; + } + + &.client-document, + &.client-phone { + margin-bottom: 16px; + } + + &.newsletter { + margin: 0 0 45px; + } + } +} + +.checkout-container { + .shp-method-option { + .shp-method-option-text { + @include font-size("s-300"); + text-transform: uppercase; + line-height: 19.07px; + display: block; + padding: 8px 0; + } + + &.shp-method-option-active { + color: $clr-common-black; + } + + @media screen and (min-width: 2500px) { + .shp-method-option-text { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + .shipping-data { + .ship-postalCode { + label { + font-size: 0px; + + &::before { + content: "Cep:"; + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 700; + font-family: $font-family-100; + + text-transform: uppercase; + + color: $clr-gray-400; + } + } + + input { + @include font-size("s-300"); + line-height: 19.07px; + + height: 45px; + border-color: $clr-gray-250; + } + + small { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + color: $clr-gray-400; + margin: 0; + } + } + } +} + +.checkout-container { + .shipping-data { + .ship-postalCode { + @media screen and (min-width: 2500px) { + label { + &::before { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + input { + @include font-size("splus-300"); + line-height: 38.13px; + + height: 61px; + } + + small { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-deliveryGroup { + p { + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-leanShippingTextLabel, + .vtex-omnishipping-1-x-optionPrice, + .shp-option-text-time { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + } + + .vtex-omnishipping-1-x-leanShippingIcon { + margin-left: 8px; + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + letter-spacing: 0.05em; + } + } + } +} + +.checkout-container { + .shipping-data { + @media screen and (min-width: 2500px) { + .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-leanShippingTextLabel, + .vtex-omnishipping-1-x-leanShippingTextLabelSingle, + .vtex-omnishipping-1-x-optionPrice, + .shp-option-text-time { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } +} + +.checkout-container { .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive { .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { svg { @@ -757,84 +1199,882 @@ } } -.container-order-form { - @media screen and (min-width: 1200px) { - width: inherit; +.checkout-container { + @media screen and (min-width: 2500px) { + .shp-lean-option.shp-lean-option-active.vtex-omnishipping-1-x-leanShippingOptionActive { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + &::before { + width: 32px; + height: 32px; + } + } + } + + .shp-lean-option.vtex-omnishipping-1-x-leanShippingOption { + .vtex-omnishipping-1-x-leanShippingIcon.shp-option-icon { + &::before { + width: 32px; + height: 32px; + } + } + } } } -.container-order-form { - width: 100%; +.checkout-container { + .vtex-omnishipping-1-x-geolocationTitle.ask-for-geolocation-title { + @include font-size("s-300"); + line-height: 19.07px; + font-family: $font-family-100; - #shipping-data, - #payment-data { - float: none; + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } } - @media screen and (max-width: 490px) { - .orderform-template-holder .client-profile-data input[type="text"] { - width: 100%; + .vtex-omnishipping-1-x-subtitle.ask-for-geolocation-subtitle { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + + .vtex-omnishipping-1-x-imageAsk.ask-for-geolocation-image-ask { + background-color: $clr-primary-blue-500; + + @media screen and (min-width: 2500px) { + width: 220px; + height: 220px; + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-shippingSectionTitle { + @include font-size("s-200"); + line-height: 16.34px; + + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } } - .orderform-template-holder .client-profile-data { - p.client-phone, - p.client-document, - p.client-first-name, - p.client-last-name { - float: none !important; - width: 100%; - margin: 0; + .address-summary-BRA { + span { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; - input { - width: 100% !important; + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; } } } } - @media screen and (min-width: 375px) { - .checkout-container .shipping-data .accordion-group .accordion-inner p label, - .checkout-container .payment-data .accordion-group .accordion-inner p label, - .checkout-container .client-profile-data .accordion-group .accordion-inner p label { - font-size: 14px; - } - } + .vtex-omnishipping-1-x-addressSummary { + position: relative; + display: flex; + align-items: center; + gap: 9.98px; + border: 1px solid #f0f0f0; + border-radius: 8px; + padding: 20.96px 17px 15px 16.38px; - @media screen and (min-width: 600px) { - .checkout-container .client-pre-email .emailInfo { - width: fluid(343px, 992px); - } - } - - @media screen and (min-width: 1025px) { - #shipping-data, - #payment-data { - float: none; - } - - #client-profile-data .client-profile-data.active { + .address-summary { + padding: 0; margin: 0; + border: none; + font-weight: 400; + color: $clr-gray-400; + background: none; } - .cart-template.mini-cart { - padding: 0; - } - } + &::before { + content: ""; - @media screen and (min-width: 1025px) { - width: fluid(1018px, 1280px); - min-height: calc(100vh - 175px); - - .checkout-container .client-pre-email { - padding: 8px 0 0; + min-width: 21px; + height: 21px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center + center/ cover; } - #orderform-title { - padding: 0; - } + @media screen and (min-width: 2500px) { + padding: 15px 28px 15px 28.66px; - .client-pre-email .emailInfo .icon-lock { - display: block; + &::before { + min-width: 46.45px; + height: 46.45px; + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-linkEdit.link-edit { + @include font-size("s-200"); + line-height: 16.34px; + + color: $clr-primary-blue-500; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-addressForm { + .vtex-omnishipping-1-x-address { + display: grid; + grid-template-columns: 1fr; + + * .input + .input { + margin: 15px 0 0; + } + + .input { + float: none; + + label { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 700; + font-family: $font-family-100; + letter-spacing: 0.05em; + + color: $clr-gray-400; + } + + input { + @include font-size("s-300"); + line-height: 19.07px; + height: 35px; + border-color: #e0e0e0; + } + } + } + } + } +} + +.checkout-container { + .shipping-data { + .vtex-omnishipping-1-x-addressForm { + @media screen and (min-width: 2500px) { + .vtex-omnishipping-1-x-address { + .input { + label { + @include font-size("splus-100"); + line-height: 32.68px; + } + + input { + @include font-size("splus-300"); + line-height: 38.13px; + height: 61px; + } + } + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + border-color: $clr-gray-300; + font-family: $font-family-100; + + .link-cart { + position: relative; + z-index: 1000; + a { + color: $clr-gray-600; + font-size: 14px; + + &:hover { + color: lighen($clr-gray-600, 10); + } + } + } + } +} + +.checkout-container { + .shipping-data { + height: 100%; + + .box-info { + .shp-summary-group, + .shipping-container { + padding: 0; + } + + .vtex-omnishipping-1-x-summaryChange { + display: none; + } + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + + span { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } + } + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-summaryPackage .shp-summary-package-time span.shp-option-text { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } +} + +.checkout-container { + .vtex-omnishipping-1-x-SummaryItemPrice { + font-family: $font-family-100; + font-size: 12px; + font-weight: 400; + line-height: 16.34px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + + line-height: 32.68px; + letter-spacing: 0.05em; + } + } +} + +.checkout-container { + .summary-cart-template-holder.cart-fixed-transition { + @media screen and (max-width: 1024px) { + overflow: initial; + } + } +} + +.container-cart.container-cart-fill { + @media screen and (min-width: 1025px) { + $width-container: 1018px; + + width: fluid($width-container, 1280px); + + .cart-template { + display: grid; + grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid( + 354px, + $width-container + ); + + .cart-template-holder { + grid-area: item; + } + + .summary-template-holder { + grid-area: actions; + + .row-fluid.summary { + display: grid !important; + grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid( + 354px, + $width-container + ); + + .cart-more-options { + grid-area: options; + padding: 0; + } + + .totalizers { + padding: 0; + grid-area: total; + } + } + } + + .cart-links-bottom { + grid-area: button; + padding: 0; + } + } + } +} + +.container-cart.container-cart-fill { + @media screen and (min-width: 2500px) { + $width-container: 1988.28px; + + width: fluid($width-container, 2500px); + + .cart-template { + grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid( + 688.35px, + $width-container + ); + + .summary-template-holder { + .row-fluid.summary { + grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid( + 688.35px, + $width-container + ); + } + } + } + } +} + +//autentication + +.cart-fixed { + width: 100% !important; + + h2 { + @include font-size("s-400"); + line-height: 18.72px; + + margin: 0; + border: none; + + font-weight: 500; + font-family: $font-family-200; + background-color: transparent; + + color: #303030; + @media screen and (min-width: 2500px) { + @include font-size("splus-500"); + line-height: 37.44px; + } + } + + .item-unavailable { + padding: 0; + + &-message { + padding: 8px; + } + } +} + +.cart-fixed { + .cart { + overflow: initial; + border: 1px solid $clr-gray-300; + } +} + +.cart-fixed { + .cart .cart-items .item { + $width-container: 309px; + + display: grid; + grid-template: + "product-image product-name space product-price" auto / fluid(60px, $width-container) + minmax(auto, fluid(115px, $width-container)) auto auto; + + align-items: center; + + .fn { + overflow: initial; + text-overflow: initial; + white-space: initial; + float: none; + } + + .url, + .product-name, + .description { + width: 100%; + } + + .description { + grid-area: product-price; + } + + .url { + grid-area: product-image; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .product-name { + grid-area: product-name; + } + } +} + +.cart-fixed { + .cart .cart-items .item { + .product-name { + @include font-size("s-200"); + line-height: 14.04px; + font-weight: 400; + font-family: $font-family-200; + + margin-left: 7px; + + color: $clr-common-black; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + + margin-left: 13.5px; + } + } + + .description { + @include font-size("s-200"); + line-height: 16.34px; + font-family: $font-family-100; + font-weight: 400; + + color: $clr-gray-600; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 32.86px; + } + } + } +} + +.cart-fixed { + .cart .cart-items { + .item { + .description { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; + height: 100%; + span, + strong { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + font-family: $font-family-100; + + color: $clr-gray-600; + } + + .shipping-date { + display: none; + } + } + + margin-top: 0; + padding-top: 0; + border-top: none; + + &:not(:first-child) { + padding-top: 8px; + margin-top: 8px; + border-top: 1px solid $clr-gray-200; + } + + .quantity.badge { + display: none; + } + + .shipping-date, + .price { + color: $clr-gray-400; + } + .price { + text-align: right; + margin: 0; + } + } + } +} + +.cart-fixed { + @media screen and (min-width: 600px) { + .cart .cart-items .item { + $width-container: 976px; + + grid-template: + "product-image product-name space product-price" auto / fluid( + 60px, + $width-container + ) + minmax(fluid(115px, $width-container), auto) auto minmax(fluid(62px, $width-container), auto); + } + } + + @media screen and (min-width: 1025px) { + .cart .cart-items .item { + $width-container: 298px; + + grid-template: + "product-image product-name space product-price" auto / fluid( + 60px, + $width-container + ) + fluid(115px, $width-container) auto min(fluid(62px, $width-container)); + } + } + + @media screen and (min-width: 2500px) { + .cart .cart-items .item { + $width-container: 612.484px; + + height: 116.5px; + + .url { + height: 116.5px; + } + + grid-template: + "product-image product-name space product-price" auto / fluid( + 116.5px, + $width-container + ) + fluid(227px, $width-container) auto min(fluid(124px, $width-container)); + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + padding: 0; + margin-bottom: 0; + + tr { + border-top: 1px solid $clr-gray-200; + border-bottom: 1px solid $clr-gray-200; + } + + tbody { + td.info, + td.monetary { + @include font-size("s-300"); + line-height: 19.07px; + + color: $clr-gray-400; + } + + td.info { + padding: 25px 0 25px 16px; + text-align: left; + } + td.monetary { + text-align: right; + padding: 25px 16px 25px 0; + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + @media screen and (min-width: 2500px) { + tbody { + td.info, + td.monetary { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .payment-confirmation-wrap { + border: none !important; + padding: 0; + } + + .cart-totalizers.totalizers { + tfoot { + tr { + border: none; + } + + td.info, + td.monetary { + color: $clr-gray-600; + } + + td.info { + @include font-size("s-500"); + line-height: 19.07px; + text-align: left; + + width: 100%; + padding: 30px 0 22px 16px; + } + td.monetary { + @include font-size("s-300"); + line-height: 19.07px; + text-align: right; + + width: 50%; + padding: 30px 16px 22px 0; + } + } + } + } +} + +.checkout-container { + .cart-template.mini-cart { + .cart-totalizers.totalizers { + @media screen and (min-width: 2500px) { + tfoot { + td.info { + @include font-size("splus-700"); + line-height: 49.03px; + } + td.monetary { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } + } +} + +.checkout-container { + #payment-data-submit { + display: flex; + align-items: center; + justify-content: center; + + margin-top: 20px; + border-radius: 8px; + + transition: 200ms linear; + + background-color: #298541; + + span { + @include font-size("s-300"); + font-family: $font-family-100; + letter-spacing: 0.05em; + line-height: 19.07px; + font-weight: 700; + color: $clr-common-white; + text-transform: uppercase; + } + + i { + display: none; + } + + &:hover { + background: lighten(#298541, 5); + } + + &:active { + background: darken(#298541, 5); + } + + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.checkout-container { + #go-to-cart-button { + padding: 0 16px; + margin: 0 0 10px; + a { + @include font-size("s-200"); + line-height: 16.34px; + font-weight: 400; + color: $clr-common-black; + font-family: $font-family-100; + } + @media screen and (min-width: 2500px) { + margin: 19.5 0 10px; + a { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } +} + +.container-order-form { + .store-country-BRA.active span.accordion-toggle.collapsed.accordion-toggle-active::after { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + display: block; + margin-top: 12px; + font-family: $font-family-100; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + color: $clr-gray-400; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 48px; + } + } +} + +.container-order-form .orderform-template.active div.row-fluid #payment-data.span12 { + @media screen and (min-width: 1025px) { + grid-column: 1/3; + grid-row: 2/3; + } +} + +.checkout-container { + #payment-group-creditCardPaymentGroup .payment-group-item-text { + background: none; + } + + #payment-data { + &.payment-data { + .form-step.box-new { + .steps-view { + width: 100%; + + @media screen and (min-width: 1025px) { + $width-container: 642px; + + width: fluid(393px, $width-container); + } + + @media screen and (min-width: 2500px) { + $width-container: 1247.25px; + width: fluid(800.25px, $width-container); + } + } + } + + .link-gift-card { + margin: 0px; + left: 0px; + margin-bottom: 10px; + + @media screen and (min-width: 1025px) { + left: 9px; + } + } + + .payment-group { + width: 100%; + + @media screen and (min-width: 1025px) { + $width-container: 642px; + + width: fluid(209px, $width-container); + } + + @media screen and (min-width: 2500px) { + $width-container: 1247.25px; + width: fluid(406.48px, $width-container); + } + } + + .payment-group-list-btn { + width: 100%; + + .payment-group-item { + width: 100%; + + display: flex; + align-items: center; + justify-content: center; + + border: 1px solid $clr-common-black; + padding: 13px; + color: $clr-common-black; + border-radius: 6px; + margin: 0; + opacity: 0.3; + + &.active { + border-color: #f15a31; + color: #f15a31; + opacity: 1; + } + + &-text { + @include font-size("s-300"); + padding: 0; + font-family: $font-family-100; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + background-image: none; + } + + @media screen and (min-width: 2500px) { + &-text { + @include font-size("splus-300"); + line-height: 24px; + } + } + } + + .payment-group-item { + margin-bottom: 12px; + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 93c150b..cfda45e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,67 +1,30 @@ .cart-template { font-family: $font-family-100; - @include mq(md, max) { - padding: 0 0; - } + padding: 0; + .item-unit-label { display: none; } + .cart { - border: 3px solid $clr-gray-100; + padding: 0 16px; + margin: 0 0 25px 0; + border: 1px solid $clr-gray-100; + border-left: none; + border-right: none; + box-sizing: border-box; - border-radius: 5px; - padding: 16px; - @include mq(md, max) { - margin: 0px 0 25px 0; - border-left: none; - border-right: none; - border-radius: 0; + @media screen and (min-width: 1025px) { + margin: 0; + border-radius: 5px; + border: 1px solid $clr-gray-100; } } - .cart-fixed.affix { - position: relative !important; - } +} + +.cart-template { .cart-fixed { - font-family: $font-family-100; - width: 100%; - h2 { - background: $clr-common-white; - border: none; - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .item-unavailable { - padding: 0; - - &-message { - padding: 8px; - } - } - - .cart { - border: 1px solid $clr-gray-300; - - ul li { - border-top: none; - margin-top: 0; - padding-top: 0; - - &:not(:first-child) { - margin-top: 8px; - padding-top: 8px; - border-top: 1px solid #e5e5e5; - } - - .shipping-date, - .price { - color: #7d7d7d; - } - } - } - .summary-template-holder { border-top: none; background: $clr-common-white; @@ -77,22 +40,6 @@ width: 100%; } } - - #payment-data-submit { - background: $clr-gray-600; - border: none; - border-radius: 0; - color: $clr-common-white; - outline: none; - transition: all 0.2s linear; - &:hover { - background: lighten($clr-gray-600, 5); - } - - &:active { - background: darken($clr-gray-600, 5); - } - } } .lookatme { @@ -104,22 +51,6 @@ padding: 16px 0; } - th { - color: $clr-gray-600; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; - font-size: 14px; - line-height: 16px; - - @include mq(md, max) { - &.quantity-price, - &.shipping-date { - display: none; - } - } - } - .product-image { height: auto; padding: 0; @@ -142,30 +73,10 @@ } .product-name { - padding-right: 0; - @include mq(lg, max) { width: 250px; } - a { - color: $clr-blue-500; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; - - &:hover { - color: darken($clr-blue-500, 10); - text-decoration: none; - } - - @media (max-width: 490px) { - margin-left: 23px; - } - } - .brand, .seller { display: none !important; @@ -217,71 +128,12 @@ display: flex; justify-content: center; margin: 6px auto 0; - max-height: 38px; - max-width: 118px; padding: 0; width: max-content !important; @media (max-width: 490px) { margin-left: 84px !important; } - - input { - background-color: $clr-common-white; - border: 1px solid $clr-gray-100; - border-radius: 0; - border-width: 0 1px; - display: block; - max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $clr-gray-400; - box-shadow: none; - - @include mq(lg, max) { - width: 24px !important; - } - } - - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $clr-gray-600; - display: block; - font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } - - .item-quantity-change { - @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; - } - - @media (max-width: 490px) { - padding: 0; - } - } } .quantity-price, @@ -344,83 +196,9 @@ @include mq(md, max) { padding: 0 16px; } - - .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; - font-size: 24px; - line-height: 28px; - color: $clr-gray-400; - - @include mq(md, max) { - margin-top: 0; - } - } - - .srp-description { - color: $clr-gray-400; - font-size: 12px; - line-height: 18px; - margin: 0 0 12px; - } - - button.shp-open-options { - background-color: $clr-gray-200; - border: none; - border-radius: 5px; - color: $clr-gray-400; - font-size: 16px; - letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten($clr-gray-200, 5); - } - - &:active { - background-color: darken($clr-gray-200, 5); - } - } - } - - .srp-data { - width: 280px; - - @include mq(cstm, max) { - width: calc(100vw - 32px); - } - - .srp-pickup-my-location__button { - @include btn-primary-blue-white(); - - border-radius: 5px; - outline: none; - width: 100%; - - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; - - &:hover { - background-color: lighten($clr-gray-600, 5); - } - - &:active { - background-color: darken($clr-gray-600, 5); - } - } } .srp-toggle { - margin: 0 0 34px; - &__wrapper { background-color: $clr-common-white; border-radius: 100px; @@ -453,56 +231,6 @@ .srp-postal-code { .ship-postalCode { - label { - font-family: $font-family-100; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $clr-gray-600; - margin-bottom: 12px; - } - - input { - border: 1px solid $clr-gray-100; - border-radius: 5px; - box-shadow: none; - color: $clr-gray-100; - font-size: 12px; - height: 36px; - padding: 12px 8px; - } - - & ~ button { - @include btn-primary-blue-white(); - - border-radius: 5px; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - transition: all 0.2s linear; - text-transform: uppercase; - - &:hover { - background-color: lighten($clr-gray-600, 5); - } - - &:active { - background-color: darken($clr-gray-600, 5); - } - } - - small a { - font-family: $font-family-100; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $clr-blue-500; - margin-top: 7px; - } - span.help.error { color: red; font-size: 12px; @@ -549,9 +277,6 @@ } .srp-delivery-select-container { - border: 1px solid $clr-gray-300; - border-radius: 0; - .srp-shipping-current-many { &__name { color: #303030; @@ -586,14 +311,6 @@ cursor: pointer; } } - span { - font-family: $font-family-100; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - text-decoration: none; - } } @include mq(md, max) { @@ -606,26 +323,7 @@ margin: 0; } - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family-100; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $clr-gray-400; - cursor: none; - } - .coupon-fields { - margin-bottom: 32px; - @include mq(sm, max) { span { display: flex; @@ -638,93 +336,6 @@ } } } - - input { - border: 2px solid $clr-gray-100; - border-radius: 5px; - box-shadow: none; - color: $clr-gray-300; - font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; - - @include mq(sm, max) { - max-width: 100%; - width: 100%; - } - } - - button { - @include btn-primary-blue-white(); - - border-radius: 5px; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; - outline: none; - transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; - - @include mq(md, max) { - width: 138px; - } - - &:hover { - background-color: lighten($clr-gray-600, 5); - } - - &:active { - background-color: darken($clr-gray-600, 5); - } - } - } - } - - .accordion-group { - tr { - border-color: #e5e5e5; - - td { - &.empty { - display: none; - } - - &.info, - &.monetary { - font-style: normal; - font-weight: normal; - font-size: 14px; - font-family: $font-family-200; - line-height: 16px; - color: $clr-gray-600; - padding: 12px 0; - } - - &.info { - text-align: left; - } - - &.monetary { - text-align: right; - } - } - } - - tfoot { - tr { - td.info, - td.monetary { - font-style: normal; - font-weight: 700; - font-size: 18px; - line-height: 21px; - font-family: $font-family-100; - color: $clr-gray-600; - } - } } } } @@ -734,18 +345,14 @@ display: flex; float: none; flex-direction: column; - width: 343px; @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); - float: none; - margin-bottom: 50px; } @include mq(md, min) { margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -756,153 +363,193 @@ @include mq(md, max) { margin-bottom: 0px; } - - a { - font-family: $font-family-100; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - } } .btn-place-order-wrapper { a { @include btn-primary-blue-black(); - border-radius: 5px; - display: block; - font-size: 0; - transition: ease-in 0.22s all; + display: flex; + align-items: center; + justify-content: center; + padding: 12px 19px; + border-radius: 5px; + + font-size: 0; + + transition: ease-in 0.22s all; &:hover { background-color: darken($clr-green-500, 5); } - - &:after { - content: "finalizar compra"; - font-family: $font-family-100; - font-weight: 500; - font-size: 13px; - color: inherit; - letter-spacing: 0.05em; - text-transform: uppercase; - vertical-align: middle; - line-height: 19px; - text-shadow: none; - } } } } } +.container-cart { + .ship-country { + display: none; + } +} + .container-cart.container-cart-fill { width: 100%; padding: 0 !important; #cart-title { display: flex !important; + width: 100%; padding: 0 16px; text-align: left; - } - .ship-country { - display: none; + @media screen and (min-width: 1025px) { + padding: 0; + } } +} +.container-cart { .cart-template { .item-quantity-change { position: relative; display: flex; align-items: center; justify-content: center; + width: 16px; height: 16px; - background: #00c8ff; border-radius: 100%; .icon-plus-sign, .icon-minus-sign { position: relative; + + color: $clr-primary-blue-500; width: 100%; height: 100%; - - &::before { - content: ""; - position: absolute; - padding: 0; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: $clr-common-white; - } } + } + } +} - .icon-plus-sign { - &::after { - content: ""; - position: absolute; - padding: 0; - top: 50%; - left: 50%; - width: 2px; - height: 10px; - transform: translate(-50%, -50%); - background-color: $clr-common-white; - } - - &::before { - width: 10px; - height: 2px; - } +.container-cart { + .cart-template { + @media (max-width: 490px) { + .item-quantity-change { + padding: 0; } + } - .icon-minus-sign { - &::before { - width: 10px; - height: 2px; + @media screen and (max-width: 979px) and (min-width: 768px) { + .item-quantity-change { + position: inherit; + bottom: inherit; + left: inherit; + height: inherit; + width: inherit; + top: inherit; + } + } + + @media screen and (min-width: 2500px) { + .item-quantity-change { + width: 32px; + height: 32px; + + .icon-minus-sign, + .icon-plus-sign { + width: 32px; + height: 32px; + font-size: 1.72em; } } } } +} +.container-cart { .link-coupon-add, .link-choose-more-products { - color: $clr-common-black; - + &, span { color: $clr-common-black; } } +} +.container-cart { .cart-more-options { padding: 0 16px; } - .srp-container, + .cart-more-options .srp-data, .cart-more-options, - .cart-more-options .srp-data { + .srp-container { width: 100%; } - .cart-template { - th.shipping-date { - font-size: 0px; + .srp-container { + max-width: 343px; + margin-bottom: 48.35px; + } - &::before { - content: "Frete"; - font-size: 14px; - } + .srp-data { + margin: 0; + } +} + +.container-cart { + .srp-data { + .srp-delivery-select-container { + border: 1px solid $clr-gray-300; + border-radius: 8px; } - th.product-price { - font-size: 0px; - &::before { - content: "Unidade"; - font-size: 14px; + .srp-pickup-my-location__button { + @include btn-primary-blue-white(); + + width: 100%; + border-radius: 5px; + + outline: none; + + span { + @include font-size("s-400"); + font-weight: 700; + line-height: 19.07px; + font-family: $font-family-100; + letter-spacing: 0.05em; } + + &:hover { + background-color: lighten($clr-gray-600, 5); + color: $clr-common-white; + } + + &:active { + background-color: darken($clr-gray-600, 5); + color: $clr-common-white; + } + + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } + } +} + +.container-cart { + .cart { + margin-bottom: 48px; + + @media screen and (min-width: 1025px) { + padding-top: 16px; } } @@ -911,188 +558,891 @@ } .vtex-shipping-preview-0-x-postalCodeForgotten { - display: flex; gap: 8px; + width: 100%; - align-items: center; - justify-content: flex-start; - } + margin: 0; - .ship-postalCode { - width: 62.682215743%; - display: flex; - align-items: flex-start; - flex-direction: column; + .ship-postalCode { + width: fluid(215px, 343px); - .input-small { - width: 100%; - } - } + input { + @include font-size("s-200"); - .srp-pc-input { - width: 34.985422741%; - margin-top: 5px; - } + width: 100%; + height: 36px; + padding: 12px 8px; + border: 1px solid $clr-gray-250; + border-radius: 5px; - .srp-data { - margin-bottom: 48.35px; - } + box-shadow: none; - .totalizers { - padding: 0 16px; - width: 100%; - } - - .cart-more-options { - .srp-container { - padding: 0; - max-width: none; - } - } - - .cart-links-bottom { - width: 100%; - padding: 0 16px; - margin-bottom: 43.42px; - - .link-choose-more-products-wrapper { - margin: 0 0 14.91px; - } - } - - .coupon-column .coupon-fields { - span { - width: 100%; - display: flex; - align-items: center; - } - } - - .cart-template .cart-items td.quantity { - border: 1px solid #ddd; - border-radius: 8px; - padding: 10px; - - input { - border: none; - padding: 0 10px; - box-sizing: content-box; - } - } - - @media screen and (min-width: 600px) { - .totalizers { - padding: 0 16px; - margin: 0; - } - - .cart-more-options { - .srp-data { - width: 343px; + color: $clr-gray-600; } } - .cart-template .cart-items th { - vertical-align: top; - } + small { + margin-top: 4px; - .cart-template-holder { - padding: 0 16px; - } - } + a { + font-size: 0px; - @media screen and (min-width: 1025px) { - width: fluid(1018px, 1280px); + &::before { + content: "Não sei meu código postal"; + font: normal normal 10px / 11.7px $font-family-200; - .cart-template .cart-items td.quantity { - margin: 6px auto 0 0; - } - - .cart-template { - .shipping-date, - .product-price, - .quantity-price { - text-align: left; - padding: 5px 0; - } - } - - .cart-template-holder { - padding: 0; - } - - .product-name { - width: auto; - } - - .cart-template .cart-items th { - text-align: left; - padding-bottom: 16px; - } - - #cart-title { - padding: 0; - } - - .cart { - margin-bottom: 48px; - } - - .cart-more-options { - padding: 0; - - .srp-container { - padding: 0; - } - - .srp-data { - margin-bottom: 0; - } - } - - .row-fluid.summary { - width: 100%; - margin: 0 auto; - } - - .cart-more-options { - width: fluid(280px, 1018px); - float: left; - - .srp-container { - .srp-content { - .srp-main-title { - margin-top: 0; - } + text-decoration: underline; + color: $clr-common-black; } } } - .cart-links-bottom.cart-links { - width: fluid(354px, 1018px); - display: flex; - align-items: flex-end; - float: right; - padding: 0; - margin: 0 auto; - } - - .btn-place-order-wrapper { - width: 100%; - } - - .link-choose-more-products-wrapper { - width: 100%; - text-align: center; - } - - .cart-totalizers.totalizers { - width: fluid(354px, 1018px); - float: right; - padding: 0; - margin-left: 0; - margin-right: 0; - margin-bottom: 0; + .srp-pc-input.btn { + width: fluid(120px, 343px); + margin: -8px 0 0; + } + } +} + +.container-cart { + .ship-postalCode { + label { + @include font-size("s-200"); + line-height: 14.04px; + font-style: normal; + font-weight: normal; + + margin-bottom: 2px; + + color: $clr-gray-600; + } + } +} + +.container-cart { + .ship-postalCode { + & ~ button { + @include btn-primary-blue-white(); + @include font-size("s-200"); + font-weight: 700; + line-height: 19.07px; + letter-spacing: 1px; + + height: 36px; + border-radius: 5px; + + outline: none; + transition: all 0.2s linear; + text-transform: uppercase; + + &:hover { + background-color: lighten($clr-gray-600, 5); + } + + &:active { + background-color: darken($clr-gray-600, 5); + } + } + } +} + +.container-cart { + .vtex-shipping-preview-0-x-postalCodeForgotten { + .ship-postalCode { + @media screen and (min-width: 2500px) { + input, + & ~ button { + height: 55px; + } + + label { + @include font-size("splus-100"); + line-height: 32.68px; + } + + input { + @include font-size("splus-100"); + } + + small a { + &::before { + font: normal normal 20px / 23.4px $font-family-200; + } + } + + & ~ .srp-pc-input.btn { + @include font-size("splus-300"); + line-height: 38.13px; + + margin-top: 12px; + } + } + } + } +} + +.container-cart { + .cart-template { + .cart-more-options { + float: none; + width: 100%; + padding: 0 16px; + + .srp-container { + padding: 0; + } + } + + .totalizers { + float: none; + width: 100%; + padding: 0 16px; + margin: 0; + } + + .cart-links-bottom { + width: 100%; + padding: 0 16px; + margin: 20px 0 0; + } + } +} + +.container-cart { + .cart-items { + .product-item { + padding: 16px 0; + margin: 0; + + .product-name { + @media screen and (min-width: 1025px) { + padding-left: 16px; + } + + @media screen and (min-width: 2500px) { + padding-left: 31px; + } + + a { + @include font-size("s-200"); + line-height: 14.04px; + + color: $clr-common-black; + font-family: $font-family-200; + transition: ease-in 0.22s all; + + &:hover { + color: darken($clr-primary-blue-500, 10); + text-decoration: none; + } + + @media screen and (min-width: 1025px) { + } + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + } + + .quantity { + @media screen and (min-width: 1025px) { + margin: 15px 0 0; + } + + @media screen and (min-width: 2500px) { + margin: 54px 0 0; + } + } + + .product-price { + margin: 0; + height: 36px; + + @media screen and (min-width: 1025px) { + } + + span.best-price { + height: 14.04px; + + @media screen and (min-width: 2500px) { + height: 28.08px; + } + } + + span { + @include font-size("s-200"); + line-height: 14.04px; + font-family: $font-family-200; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + } + + .shipping-estimate-date { + @include font-size("s-200"); + line-height: 14.04px; + font-family: $font-family-200; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } + + .quantity-price span { + @include font-size("s-300"); + line-height: 19.07px; + font-weight: 700; + font-family: $font-family-100; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + + .product-image { + width: 60px; + height: 60px; + + a { + display: block; + width: auto; + height: auto; + } + + img { + width: 100%; + height: 60px; + object-fit: cover; + + @media screen and (min-width: 2500px) { + width: 146px; + height: 146px; + } + } + } + + .item-remove { + position: absolute; + top: 22px; + right: 6px; + transform: translate(50%, -50%); + + .icon-remove { + color: #c4c4c4; + } + } + } + } +} + +.container-cart { + .full-cart .cart { + td.product-name { + width: auto; + } + + td.quantity { + padding: 9px 9px 9px 11px; + border-radius: 8px; + height: 34px; + + .item-quantity-change { + box-sizing: content-box; + } + + input { + @include font-size("s-300"); + line-height: 16.38px; + + font-family: $font-family-200; + font-weight: 400; + + display: block; + + width: 38px; + height: auto; + margin: 0 !important; + border: none; + border-radius: 0; + + color: $clr-common-black; + background-color: $clr-common-white; + box-shadow: none; + box-sizing: content-box; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 32.76px; + + padding: 0 5px; + width: 37px; + } + } + } + } +} + +.container-cart { + @media screen and (max-width: 1024px) { + .full-cart .cart { + table { + display: block; + + thead { + display: none; + } + + tbody { + display: block; + + tr { + width: 100%; + display: block; + position: relative; + + td.shipping-date, + td.quantity-price { + display: none; + } + + td.product-image { + left: 0; + position: absolute; + } + + td.quantity { + margin-left: 76px !important; + } + + .product-name { + display: block; + margin-left: 76px; + text-align: left; + line-height: 140%; + width: auto; + } + + .item-remove { + position: absolute; + top: 22px; + right: 6px; + transform: translate(50%, -50%); + } + + .product-price { + position: absolute; + bottom: 16px; + padding: 0; + right: 0; + } + } + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 1025px) { + padding: 16px 0 0; + + .product-item { + height: 76px; + } + + thead { + th { + @include font-size("s-300"); + line-height: 16.38px; + color: $clr-gray-600; + font-style: normal; + font-weight: 400; + padding: 0 0 16px; + font-family: $font-family-200; + text-align: left; + + &.product-price, + &.shipping-date { + font-size: 0px; + + &::before { + @include font-size("s-300"); + line-height: 16.38px; + } + } + + &.product-price { + &::before { + content: "Unidade"; + } + } + + &.shipping-date { + &::before { + content: "Frete"; + } + } + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 2500px) { + .product-item { + height: 162px; + } + + thead { + th { + &.product-price, + &.shipping-date { + &::before { + @include font-size("splus-300"); + line-height: 32.76px; + } + } + + &.quantity-price { + min-width: 170px; + } + + @include font-size("splus-300"); + line-height: 32.76px; + } + } + } + } +} + +.container-cart { + .cart-items { + @media screen and (min-width: 1025px) { + tbody { + td { + text-align: left; + vertical-align: middle; + } + + td.product-price { + vertical-align: middle; + } + + td.quantity { + margin: 0; + } + + td.shipping-date { + padding: 5px 0; + } + } + } + } +} + +.container-cart { + .cart-items { + .product-item { + .item-remove { + position: static; + top: initial; + right: initial; + transform: none; + + .icon-remove { + color: #c4c4c4; + } + } + } + } +} + +.container-cart { + .cart-template { + .cart-more-options { + #shipping-preview-container { + width: 100%; + max-width: none; + } + } + } +} + +.container-cart { + .cart-more-options { + .srp-data, + .srp-toggle { + width: 100%; + } + + .srp-toggle { + margin-bottom: 20px; + + label { + @include font-size("s-300"); + line-height: 19.07px; + } + } + + .srp-main-title { + @include font-size("splus-100"); + line-height: 32.68px; + font-family: $font-family-100; + + margin-bottom: 11px; + + color: $clr-common-black; + } + + .srp-description { + @include font-size("s-300"); + font-weight: 400; + line-height: 18px; + font-family: $font-family-100; + + max-width: none; + margin-bottom: 10.65px; + + color: $clr-gray-400; + } + } +} + +.container-cart { + .cart-more-options { + .shp-open-options { + @include font-size("s-300"); + line-height: 19.07px; + letter-spacing: 0.05em; + + background-color: $clr-gray-200; + color: $clr-common-black; + + @media screen and (min-width: 2500px) { + @include font-size("splus-300"); + line-height: 38.13px; + } + } + } +} + +.container-cart { + @media screen and (min-width: 2500px) { + .cart-more-options { + .srp-toggle label { + @include font-size("splus-300"); + line-height: 38.13px; + } + + .srp-main-title { + @include font-size("sxplus"); + line-height: 65px; + } + + .srp-description { + @include font-size("splus-300"); + line-height: 36px; + } + } + } +} + +.container-cart { + .cart-links-bottom { + .link-choose-more-products-wrapper a { + @include font-size("s-200"); + line-height: 14.04px; + font-weight: 400; + font-family: $font-family-200; + + text-align: center; + } + + .btn-place-order-wrapper a { + font-size: 0px; + + &::before { + @include font-size("s-300"); + + content: "Finalizar Compra"; + + font-weight: 700; + line-height: 19.07px; + font-family: $font-family-100; + letter-spacing: 0.05em; + + text-shadow: none; + color: $clr-common-black; + } + } + } +} + +.container-cart { + .coupon-label label { + @include font-size("s-200"); + font-style: normal; + font-weight: normal; + line-height: 14.04px; + font-family: $font-family-100; + + margin-bottom: 12px; + + text-align: left; + + color: $clr-gray-400; + cursor: none; + + @media screen and (min-width: 2500px) { + @include font-size("splus-100"); + line-height: 28.08px; + } + } +} + +.container-cart { + .coupon-fieldset { + span { + position: relative; + display: inline-flex; + gap: 8px; + width: 100%; + white-space: nowrap; + text-align: left; + + i { + position: absolute; + } + } + + .coupon-value { + @include font-size("s-200"); + line-height: 14.04px; + + width: 100%; + height: 36px; + padding: 0 12px; + border: 2px solid #f0f0f0; + border-radius: 5px; + + font-size: 12px; + + box-shadow: none; + color: #8d8d8d; + } + } +} + +.container-cart { + .coupon-fieldset { + @media screen and (min-width: 2500px) { + span { + gap: 30px; + } + + .coupon-value { + @include font-size("splus-100"); + line-height: 28.08px; + + width: fluid(398.42px, 688.35px); + height: 55px; + } + } + } +} + +.container-cart { + .coupon-form { + margin-bottom: 30px; + } +} + +.container-cart { + @media screen and (min-width: 1025px) { + .coupon-form { + margin-bottom: 35px; + } + } +} + +.container-cart { + .link-coupon-add { + display: inline; + text-align: center; + + span { + @include font-size("s-200"); + line-height: 14.04px; + text-decoration: none; + + position: initial; + display: inline; + text-align: initial; + } + } +} + +.container-cart { + .link-coupon-add { + @media screen and (min-width: 2500px) { + span { + @include font-size("splus-300"); + line-height: 28.08px; + } + } + } +} + +.container-cart { + .coupon-fieldset { + button { + @include btn-primary-blue-black(); + @include font-size("s-200"); + font-weight: 700; + line-height: 19.07px; + letter-spacing: 1px; + + width: fluid(133.51px, 343px); + height: 36px; + max-width: 133.51px; + border-radius: 5px; + + transition: all 0.2s linear; + + outline: none; + text-shadow: none; + text-transform: uppercase; + cursor: pointer; + + &:hover { + background-color: lighten($clr-gray-600, 5); + } + + &:active { + background-color: darken($clr-gray-600, 5); + } + } + } +} + +.container-cart { + .coupon-fieldset { + @media screen and (min-width: 2500px) { + button { + @include font-size("splus-100"); + line-height: 28.08px; + + width: fluid(260.34px, 688.35px); + height: 55px; + max-width: none; + } + } + + @media screen and (min-width: 600px) { + $width-container: 992px; + + .coupon-value { + width: fluid(853px, $width-container); + } + } + } +} + +.container-cart { + @media screen and (min-width: 2500px) { + .cart-links-bottom { + .link-choose-more-products-wrapper a { + @include font-size("splus-100"); + line-height: 28px; + } + + .btn-place-order-wrapper a { + &::before { + @include font-size("splus-300"); + line-height: 38px; + } + } + } + } +} + +.container-cart { + .cart-template .summary-totalizers { + td { + &.empty { + display: none; + } + + &.info { + text-align: left; + width: 50%; + } + + &.monetary { + text-align: right; + width: 50%; + } + } + + tbody td { + @include font-size("s-300"); + font-style: normal; + font-weight: normal; + + font-family: $font-family-200; + line-height: 16.38px; + + color: #292929; + padding: 10px 0; + } + + tfoot { + tr { + td.info, + td.monetary { + @include font-size("s-500"); + + font-style: normal; + font-weight: 700; + padding: 0; + + line-height: 24.51px; + font-family: $font-family-100; + color: $clr-gray-600; + } + } + } + } +} + +.container-cart { + .cart-template .summary-totalizers { + @media screen and (min-width: 2500px) { + tbody td { + @include font-size("splus-300"); + line-height: 32.76px; + } + + tfoot { + tr { + td.info, + td.monetary { + @include font-size("splus-700"); + + line-height: 49.03px; + } + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 9046b23..2cd2c42 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -2,23 +2,27 @@ display: flex; align-items: center; justify-content: center; + border: 1px solid $clr-common-black; border-radius: 0; + font-weight: 400; font-family: $font-family-200; + color: $clr-common-black; background-color: $clr-common-white; } .container-main.container-cart { - width: 100%; - height: 100%; - padding: 0 16px !important; display: flex; align-items: center; justify-content: center; flex-direction: column; + width: 100%; + height: 100%; + padding: 0 16px !important; + #cart-title { display: none !important; } @@ -39,7 +43,7 @@ display: none; } - @media screen and (min-width: 1025px) { + @include mq("lg") { width: fluid(400px, 1280px); padding: 0 !important; max-width: none; @@ -50,7 +54,7 @@ } } - @media screen and (min-width: 2500px) { + @include mq("xxl") { width: fluid(659px, 2500px); } } @@ -61,55 +65,88 @@ } } -.empty-cart { - font-family: $font-family-100; - &-content { - color: $clr-gray-600; - text-align: center; +.container-main.container-cart { + .empty-cart { + font-family: $font-family-100; + &-content { + color: $clr-gray-600; + text-align: center; - .empty-cart-title { - font-size: 0px; + .empty-cart-title { + font-size: 0px; - &::before { - content: "Seu carrinho está vazio."; - text-align: center; - font-size: 18px; - text-transform: uppercase; + &::before { + @include font-size("s-500"); + line-height: 24.51px; + + content: "Seu carrinho está vazio."; + text-align: center; + text-transform: uppercase; + } } } - @media screen and (min-width: 1024px) { - padding: 0; + &-links { + .link-choose-products { + @include btn-secondary(); + + transition: ease-in 0.22s all; + font-size: 0px; + padding: 16px 0; + + &::before { + @include font-size("s-300"); + line-height: 16px; + + content: "Continuar Comprando"; + + font-style: normal; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + &:hover { + background: lighten($clr-gray-600, 5); + } + } } - @media screen and (min-width: 1280px) { - .empty-cart-title { - &::before { - font-size: 24px; + &-content { + @include mq("lg") { + padding: 0; + } + + @include mq("xl") { + .empty-cart-title { + &::before { + @include font-size("splus-100"); + line-height: 32.68px; + } + } + } + } + + @include mq("xxl") { + &-content { + .empty-cart-title { + &::before { + @include font-size("sxplus"); + line-height: 65.37px; + } + } + } + + &-links { + .link-choose-products { + width: fluid(638.67px, 659px); + max-width: none; + + &::before { + @include font-size("splus-200"); + line-height: 32.76px; + } } } } } - - &-links { - .link-choose-products { - @include btn-secondary(); - transition: ease-in 0.22s all; - font-size: 0px; - padding: 16px 0; - - &::before { - content: "Continuar Comprando"; - font-size: 14px; - font-style: normal; - line-height: 16px; - letter-spacing: 0.05em; - text-transform: uppercase; - } - - &:hover { - background: lighten($clr-gray-600, 5); - } - } - } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index b5b160d..0cbe5d3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -34,6 +34,10 @@ body { } } +.container-cart { + min-height: 70vh; +} + .btn-success { background: $clr-gray-600; text-shadow: none; @@ -56,6 +60,11 @@ body { line-height: 42px; margin: 16px 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 48px; + + line-height: 65px; + } } .dropdown { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 8a04c82..33a427d 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -101,16 +101,32 @@ position: absolute; } .slick-prev { - background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; z-index: 4; left: 10px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; + + @media screen and (min-width: 2500px) { + height: 57.99px; + width: 26px; + + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center center / cover; + } } .slick-next { z-index: 4; right: 10px; background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center center; + + @media screen and (min-width: 2500px) { + height: 57.99px; + width: 26px; + + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center / cover; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 4aa2eec..e28f695 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,23 +1,20 @@ +/* prettier-ignore*/ .footerCheckout { color: $clr-gray-400; &__wrapper { border-top: 1px solid $clr-common-black; padding: 16px 25px 18.88px 8px; - - @include mq("md", min) { - padding: 16px 0; - } } &__stamps { order: 0; - margin: 0 0 16px; + margin: 0 0 16px; } &__address { order: 1; - margin: 0 0 16px; + margin: 0 0 16px; } &__developedBy { @@ -25,11 +22,12 @@ } } +/* prettier-ignore*/ .footerCheckout { .container { - width: 100%; display: flex; flex-direction: column; + width: 100%; &::before, &::after { @@ -38,62 +36,6 @@ } } -.footerCheckout { - @include mq("md", min) { - &__stamps { - width: 34.510595358%; - } - - &__wrapper { - .container { - width: 94.9734%; - margin: 0 auto; - } - } - } - - @include mq("lg", min) { - .container { - align-items: center; - justify-content: space-between; - flex-direction: row; - } - - &__address { - order: 0; - margin: 0; - } - - &__stamps { - width: 33.223684211%; - order: 1; - margin: 0; - } - - &__developedBy { - order: 2; - } - } - - @include mq("xxl", min) { - &__address { - span { - font-size: 200%; - } - } - - &__stamps { - width: 29.074771156%; - } - - &__developedBy { - span { - font-size: 180%; - } - } - } -} - .footerCheckout { &__developedBy a, &__developedBy, @@ -102,21 +44,84 @@ display: flex; align-items: center; } + &__wrapper { justify-content: space-between; + } +} - @include mq("lg", min) { +.footerCheckout { + @include mq("md") { + &__stamps { + width: 34.510595358%; + } + + &__wrapper { + padding: 16px 0; + + .container { + width: 94.9734%; + margin: 0 auto; + } + } + } + + @include mq("lg") { + .container { + align-items: center; + justify-content: space-between; + flex-direction: row; + } + + &__wrapper { width: 100%; } + + &__address { + order: 0; + + margin: 0; + } + + &__stamps { + order: 1; + + width: 33.223684211%; + margin: 0; + } + + &__developedBy { + order: 2; + } + } + + @include mq("xxl") { + &__address { + span { + font-size: 20px; + } + } + + &__stamps { + width: 29.074771156%; + } + + &__developedBy { + span { + font-size: map-get($text-sizes, "s-500"); + line-height: 24.51px; + } + } } } .footerCheckout { &__creditList { - width: 100%; display: flex; align-items: center; gap: 4px; + + width: 100%; } &__creditItem, @@ -136,8 +141,8 @@ font-weight: normal; font-size: 10px; line-height: 12px; - font-family: $font-family-100; text-transform: capitalize; + color: $clr-gray-400; } } @@ -145,11 +150,13 @@ .footerCheckout { &__stamps { &__divider { - background-color: $clr-gray-300; display: inline-block; + + width: 1px; height: 24px; margin: 0 8px; - width: 1px; + + background-color: $clr-gray-300; } } } @@ -166,9 +173,10 @@ font-style: normal; font-weight: normal; font-size: 10px; - font-family: $font-family-100; line-height: 12px; + font-family: $font-family-100; text-decoration: none; + color: $clr-gray-400; span { @@ -182,5 +190,3 @@ } } } - - diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a211e21..f39d459 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,4 +1,5 @@ /* _header.scss */ + body { margin: 0; padding: 0; @@ -23,13 +24,29 @@ body :where(ul, li, ol) { @return unquote($width); } +@mixin font-size($size) { + $content: $text-sizes; + + @if map-has-key($content, $size) { + font-size: map-get($content, $size); + } +} + .headerCheckout { + position: sticky; + position: -webkit-sticky; + top: 0; + left: 0; + background: $clr-common-white; + width: 100%; padding: 16px; border-bottom: 1px solid $clr-common-black; + z-index: 10000; .container { width: 100%; height: auto; + margin: 0; } &__wrapper, @@ -39,49 +56,58 @@ body :where(ul, li, ol) { } &__wrapper { - width: 100%; justify-content: space-between; + width: 100%; } &__safeBuy { - width: fluid(119px, 343px); - max-width: 119px; gap: 8px; - span { - font: normal normal 12px / 14px $font-family-100; - text-transform: uppercase; - color: $clr-gray-500; - } + width: 100%; + max-width: 119px; + } +} - img { - width: 12px; - height: 13px; - } +.headerCheckout__safeBuy { + span { + @include font-size("s-200"); + line-height: 16.34px; + + font-style: normal; + font-weight: normal; + font-family: $font-family-100; + text-transform: uppercase; } - &__logo { - width: fluid(155.58px, 343px); - max-width: 155.58px; - height: auto; - - img { - width: 100%; - height: 100%; - } + img { + width: 12px; + height: 13px; } +} +.headerCheckout__logo { + width: fluid(155.58px, 343px); + height: auto; + max-width: 155.58px; + + img { + width: 100%; + height: 100%; + } +} + +.headerCheckout { .progress-bar { display: none; } } .headerCheckout { - @media screen and (min-width: 1025px) { + @include mq("lg") { padding: 29px 0; &__wrapper { - width: fluid(992px, 1024px); + width: fluid(1018px, 1280px); margin: 0 auto; } @@ -90,13 +116,7 @@ body :where(ul, li, ol) { } } - @media screen and (min-width: 1025px) { - &__wrapper { - width: fluid(1018px, 1280px); - } - } - - @media screen and (min-width: 2500px) { + @include mq("xxl") { $width-container: 1988.28px; &__wrapper { @@ -114,7 +134,9 @@ body :where(ul, li, ol) { max-width: none; span { - font: normal normal 24px / 32.68px $font-family-100; + @include font-size("splus-100"); + line-height: 32.68px; + font-family: $font-family-100; } img { @@ -128,89 +150,151 @@ body :where(ul, li, ol) { .headerCheckout { .progress-bar { width: 439px; + } + + .progress-list, + .progress-item, + .progress-container, + .progress-content { + display: flex; + align-items: center; + } + + .progress-list { + justify-content: space-between; + width: 100%; + margin: 0; + } + + .progress-item, + .progress-container, + .progress-content { + flex-direction: column; + justify-content: center; + } + + .progress-container { + position: relative; + + width: 100%; + } + + .progress-content { + gap: 16px; + } + + .progress-item { + @include font-size("s-200"); + line-height: 14.04px; + + font-family: $font-family-200; + + &--left, + &--right { + width: 40%; + + .progress-line { + position: absolute; + bottom: 6px; + + width: 100%; + height: 1px; + border-bottom: 1px solid #000; + } + } + + &--left { + .progress-container { + align-items: flex-start; + } + + .progress-line { + left: 75%; + transform: translateX(-50%); + } + } + + &--center { + width: 90px; + } + + &--right { + .progress-container { + align-items: flex-end; + } + + .progress-line { + right: 72%; + transform: translateX(50%); + } + } + } + + .progress-bullet { + $square-size: 12px; + + position: relative; + z-index: 10; + + width: $square-size; + height: $square-size; + border: 1px solid $clr-common-black; + border-radius: 100%; + + background-color: $clr-common-white; + + &.active { + background-color: $clr-common-black; + } + } +} + +.headerCheckout { + @include mq("xxl") { + .progress-bar { + width: 1078.86px; + } .progress-list { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - margin: 0; + justify-content: initial; } .progress-item { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-size: 12px; - } + @include font-size("splus-100"); + line-height: 28.08px; - .progress-content, - .progress-container { - display: flex; - align-items: center; - flex-direction: column; - } - - .progress-container { - position: relative; - justify-content: center; - width: 100%; - } - - .progress-item { &--left, &--right { - width: 40%; + width: fluid(444px, 1078.86px); .progress-line { - position: absolute; - bottom: 6px; - width: 100%; - height: 1px; - border-bottom: 1px solid #000; + bottom: 12px; } } &--left { - .progress-container { - align-items: flex-start; - } - .progress-line { - left: 75%; - transform: translateX(-50%); + left: 67%; } } &--center { - width: 90px; + width: auto; + max-width: none; } &--right { - .progress-container { - align-items: flex-end; - } - .progress-line { - right: 72%; - transform: translateX(50%); + right: 67%; } } } .progress-bullet { - width: 12px; - height: 12px; - background-color: $clr-common-white; - position: relative; - border: 1px solid $clr-common-black; - z-index: 10; - border-radius: 100%; + $square-size: 24px; - &.active { - background-color: $clr-common-black; - } + width: $square-size; + height: $square-size; } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index b544915..41b9f63 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,120 +1,175 @@ /* _prateleira.scss */ + .footerCheckout__prateleira { width: 100%; - margin-top: 43.42px; - min-height: 363px; padding: 0 8px; - margin-bottom: 54px; + margin: 43.42px 0 54px; - /* slick-prev */ .slick-arrow { position: absolute; top: 50%; + transform: translateY(-50%); + width: 13.64px; height: 29.47px; - transform: translateY(-50%); + border: none; background-color: transparent; - transition: 300ms; } +} +.footerCheckout__prateleira { &-title { width: 100%; - margin-bottom: 20px; padding: 0 8px; + margin-bottom: 20px; + font-size: 14px; - text-align: center; font-weight: 400; font-family: $font-family-200; + text-align: center; + color: $clr-common-black; } +} - .shelf-item { - .product-item-container { - margin: 0 8px; +.footerCheckout__prateleira { + .product-item-container { + margin: 0 8px; + } +} + +.footerCheckout__prateleira { + .product-item { + &-figure { + width: 100%; + margin-bottom: 20px; + + img { + max-width: 100%; + width: 100%; + height: auto; + } } + } +} - .product-item { - &-figure { - width: 100%; - margin-bottom: 20px; - img { - max-width: 100%; - height: auto; - } - } +.footerCheckout__prateleira { + .product-item { + &-name, + &-link, + .type-name { + @include font-size("s-250"); + line-height: 24px; + font-family: $font-family-100; + } + } +} - &-name { - min-height: 36px; - text-align: center; - font-weight: 400; - font-family: $font-family-100; - font-size: 13px; - text-overflow: ellipsis; - line-height: 17.7px; - } +.footerCheckout__prateleira { + .product-item { + &-name { + min-height: 36px; + height: 36px; + font-weight: 400; + font-family: $font-family-100; + text-overflow: ellipsis; + text-align: center; - &-types { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 5px; - min-height: 68px; - } - - &-link { - @include btn-primary-blue-white(); - - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 12px 0; - letter-spacing: 5%; - border-radius: 8px; - font-weight: 700; - font-size: 13px; - line-height: 17.7px; - font-family: $font-family-100; - color: $clr-common-white; + @media screen and (max-width:410px) { + height: 53px; } } - .product-type-container { - background-color: $clr-primary-blue-500; - border-radius: 8px; - height: 28px; + &-types { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 5px; + min-height: 68px; + height: 68px + } + } +} + +.footerCheckout__prateleira { + .product-item { + &-link { + @include btn-primary-blue-white(); + display: flex; align-items: center; justify-content: center; - .type-name { - font-weight: 700; - font-size: 13px; - padding: 5px; - line-height: 17.7px; - letter-spacing: 5%; - font-family: $font-family-100; - color: $clr-common-white; - } + width: 100%; + padding: 12px 0; + border-radius: 8px; + + font-weight: 700; + letter-spacing: 5; + + color: $clr-common-white; } } - @media screen and (min-width: 600px) { + .product-type-container { + display: flex; + align-items: center; + justify-content: center; + + height: 28px; + border-radius: 8px; + + background-color: $clr-primary-blue-500; + } + + .type-name { + padding: 5px; + + font-weight: 700; + letter-spacing: 5; + font-family: $font-family-100; + + color: $clr-common-white; + } +} + +.footerCheckout__prateleira { + @include mq("lg") { + width: fluid(1034px, 1280px); + margin: 43.42px auto 56px; + padding: 0; + } + + @include mq("md") { &-title { - font-size: 24px; + @include font-size("splus-100"); line-height: 38px; } } - @media screen and (min-width: 1025px) { - width: fluid(1034px, 1280px); - margin: 43.42px auto 56px; - padding: 0; - + @include mq("xxl") { &-title { + @include font-size("sxplus"); + line-height: 76px; + padding: 0; } + + .product-item { + &-name, + &-link, + .type-name { + @include font-size("splus-200"); + line-height: 35.41px; + + font-family: $font-family-100; + } + } + + .product-item-container { + margin: 0 9.965px; + } } } diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 9185fe8..14ffda3 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin btn-primary-blue-black() { border: none; color: $clr-common-black; @@ -12,6 +14,14 @@ text-transform: uppercase; } +@mixin text-size($size) { + @if map_has_key($text-sizes, $size) { + $size: map_get($text-sizes, $size); + + font-size: $size; + } +} + /** * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) */ diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index dfa332c..2603bd7 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -12,21 +12,39 @@ $clr-gray-600: #292929; $clr-gray-500: #6c6c6c; $clr-gray-400: #7d7d7d; $clr-gray-300: #8d8d8d; +$clr-gray-250: #c4c4c4; $clr-gray-200: #e5e5e5; $clr-gray-100: #f0f0f0; -$clr-gray-500: #6c6c6c; - $clr-blue-500: #4267b2; $clr-green-500: #4caf50; $clr-primary-blue-500: #00c8ff; +/*prettier-ignore*/ +$text-sizes: ( + "s-050": 9px, + "s-100": 10px, + "s-200": 12px, + "s-250": 13px, + "s-300": 14px, + "s-400": 16px, + "s-500": 18px, // MAIN + "s-600": 20px, + "splus-100": 24px, + "splus-200": 26px, + "splus-300": 28px, + "splus-500": 32px, + "splus-700": 36px, + "splus-900": 40px, + "sxplus": 48px, +) !default; + /* Grid breakpoints */ $grid-breakpoints: ( xxs: 0, - xs: 280, + xs: 280px, sm: 375px, md: 600px, lg: 1025px,