diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e286cd1..c7bf762 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -18,7 +18,7 @@ } } - .row-fluid.summary{ + .row-fluid.summary { display: block; } @@ -122,7 +122,6 @@ } } - .client-email { margin: 0 0 16px; @media (min-width: $checkout2500px) { @@ -339,9 +338,18 @@ .accordion-heading { span { - color: #303030; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #292929; margin-bottom: 8px; padding: 0; + @media (min-width: $checkout2500px) { + font-size: 32px; + line-height: 37px; + } } a { @@ -365,6 +373,10 @@ background-size: 100%; border: none; cursor: pointer; + @media (min-width: $checkout2500px) { + width: 39.24px; + height: 40.58px; + } } } } @@ -388,6 +400,10 @@ line-height: 19px; color: $color-gray7; margin-bottom: 1px; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + } } select, @@ -430,14 +446,28 @@ &:active { background: darken($color-black, 5); } + @media (min-width: $checkout2500px) { + height: 61px; + font-size: 28px; + line-height: 38px; + } } /* Shipping configurations */ .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: $color-black; + text-decoration-line: underline; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } .vtex-omnishipping-1-x-deliveryGroup { @@ -478,8 +508,17 @@ background: none; border-color: $color-gray4; border-radius: 0; - color: #303030; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #7d7d7d; padding: 12px; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } @include mq(md, max) { background-position: 8px 9px; @@ -495,6 +534,16 @@ .shp-summary-group-price, .shp-summary-package { color: $color-gray4; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } .shp-summary-group-price { @@ -541,6 +590,10 @@ font-size: 12px; line-height: 16px; color: $color-gray7 !important; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } } } @@ -552,6 +605,10 @@ } } +span.shipping-date.pull-left { + display: none; +} + .step.accordion-group.client-profile-data.active { & .accordion-heading { & span:nth-child(2n) { @@ -569,11 +626,54 @@ font-size: 16px; line-height: 19px; color: $color-black; + @media (min-width: $checkout2500px) { + font-size: 32px; + line-height: 37px; + } } } } } +.checkout-container .client-profile-data .accordion-group .accordion-heading span:nth-child(2n) { + margin-bottom: 36px; + padding: 0; + font-size: 0; + position: relative; + &::after { + content: "Identificação"; + position: absolute; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + @media (min-width: $checkout2500px) { + font-size: 32px; + line-height: 37px; + } + } +} + +.box-info { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray7; + top: 0; + position: relative; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } + @media (max-width: $checkout1024px) { + top: 0; + } +} + a#is-corporate-client { display: none; } @@ -582,6 +682,10 @@ input#opt-in-newsletter { width: 18px; height: 18px; margin-right: 8px; + @media (min-width: $checkout2500px) { + width: 34.95px; + height: 34.95px; + } } span.newsletter-text { @@ -591,6 +695,10 @@ span.newsletter-text { font-size: 12px; line-height: 16px; color: $color-gray9; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } p.notification { @@ -600,11 +708,19 @@ p.notification { font-size: 14px; line-height: 19px; color: $color-gray7; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + } } .step.accordion-group.client-profile-data.filled { @media (max-width: $checkout1024px) { - width: 100%; + width: 93%; + } + @media (max-width: $checkout375px) { + margin-left: 16px; + margin-right: 16px; } } @@ -612,24 +728,60 @@ input#client-last-name, input#client-document, input#client-phone { width: 100%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bdbdbd; @media (max-width: $checkout375px) { width: 89% !important; } + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + } } -input#client-document,input#client-phone{ +input#client-last-name { @media (max-width: $checkout1024px) { height: 32.1px; - } + } + @media (min-width: $checkout2500px) { + height: 34.1px; + } } -input#client-last-name{ +input#client-document, +input#client-phone { @media (max-width: $checkout1024px) { height: 32.1px; - } + } + @media (min-width: $checkout2500px) { + height: 34.1px; + } +} + +input#client-document { + width: 92%; + @media (max-width: $checkout1024px) { + width: 96%; + } +} + +input#client-last-name { + @media (max-width: $checkout1024px) { + height: 32.1px; + } } input#client-first-name { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bdbdbd; @media (max-width: $checkout1024px) { width: 96%; height: 32.1px; @@ -637,15 +789,21 @@ input#client-first-name { @media (max-width: $checkout375px) { width: 89% !important; } + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + height: 32.1px; + width: 92%; + } } -p.client-first-name.input.pull-left.text.required,p.client-document.input.pull-left.text.required.mask{ +p.client-first-name.input.pull-left.text.required, +p.client-document.input.pull-left.text.required.mask { @media (max-width: $checkout375px) { margin-right: 15.21px !important; } } - p.client-first-name.input.pull-left.text.required, p.client-last-name.input.pull-left.text.required { width: 46%; @@ -653,19 +811,18 @@ p.client-last-name.input.pull-left.text.required { width: 49%; margin-bottom: 17px; } + @media (max-width: 767px) { + width: 46%; + } + @media (max-width: 490px) { + width: 46%; + margin-bottom: 17px; + } @media (max-width: $checkout375px) { width: 47.5%; } } -input#client-document{ - width: 92%; - @media (max-width: $checkout1024px) { - width: 96%; - } -} - - p.client-document.input.pull-left.text.required.mask, p.client-phone.input.pull-left.text.required.mask { width: 46%; @@ -674,12 +831,20 @@ p.client-phone.input.pull-left.text.required.mask { width: 49%; margin-bottom: 17px; } - @media (max-width: $checkout375px) { + @media (max-width: 767px) { + width: 46%; + margin-bottom: 17px; + } + @media (max-width: 490px) { + width: 46%; + margin-bottom: 17px; + } + @media (max-width: $checkout375px) { width: 47.5%; } } -p.client-email.input.text.required{ +p.client-email.input.text.required { @media (max-width: $checkout1024px) { margin-bottom: 17px; } @@ -692,10 +857,22 @@ p.submit.btn-submit-wrapper { } } -fieldset.box-client-info-pj{ +fieldset.box-client-info-pj { display: none; } +@media (max-width: 767px) { + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + max-width: none; + } +} + .orderform-template-holder .client-profile-data .pull-left { @media (max-width: $checkout375px) { float: left !important; @@ -709,9 +886,14 @@ div#client-profile-data { } } - input#client-email { width: 96%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bdbdbd; @media (max-width: $checkout1024px) { width: 99%; height: 32.1px; @@ -719,6 +901,11 @@ input#client-email { @media (max-width: $checkout375px) { width: 99%; } + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + height: 32.1px; + } } .client-pre-email .emailInfo .icon-lock { @@ -756,6 +943,11 @@ span.quantity.badge { font-size: 12px; line-height: 14px; color: $color-black2; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + padding: 0; + } } .cart-template .cart-fixed .cart { @@ -776,8 +968,8 @@ span.quantity.badge { line-height: 19px; color: $color-black !important; margin-left: 0; - // top: 24px; padding-top: 24px; + padding-left: 17px; position: relative; } @@ -797,6 +989,10 @@ a#orderform-minicart-to-cart { bottom: 34px; position: relative; cursor: pointer; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } span.fn.product-name { @@ -814,6 +1010,20 @@ span.fn.product-name { text-align: right; color: #292929; white-space: nowrap; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } +} + +.summary-cart-template-holder.cart-fixed-transition { + height: 60px !important; + @media (min-width: $checkout2500px) { + height: 116.5px !important; + } + @media (max-width: $checkout1024px) { + height: 120px !important; + } } li.hproduct.item.muted { @@ -857,6 +1067,10 @@ td.info { .cart-template .cart-fixed { width: 98.2%; + @media (max-width: $checkout1024px) { + width: 96.5% !important; + margin-top: 17px; + } } td.monetary { @@ -865,17 +1079,35 @@ td.monetary { } .cart-fixed.cart-fixed-transition.affix-top { - height: auto !important; + height: auto; + height: 397px !important; @media (max-width: $checkout1024px) { height: 390px !important; } + @media (min-width: $checkout2500px) { + height: 397px !important; + } border: 1px solid #e5e5e5; border-radius: 8px; } +li.hproduct.item.muted { + a { + img { + height: 60px; + width: 60px; + object-fit: cover; + @media (min-width: $checkout2500px) { + width: 116.5px; + height: 116.5px; + } + } + } +} + .btn-block + .btn-block { - margin-top: 20px; + margin-top: 66px; } .payment-confirmation-wrap { @@ -896,6 +1128,12 @@ button#shipping-option-delivery { color: #41115d; width: 148px !important; height: 36px !important; + @media (min-width: $checkout2500px) { + width: 286.5px !important; + height: 55px !important; + font-size: 28px; + line-height: 38px; + } } button#shipping-option-pickup-in-point { @@ -906,7 +1144,11 @@ button#shipping-option-pickup-in-point { font-size: 14px; line-height: 19px; text-transform: uppercase; - color: #c4c4c4; + color: $color-gray8; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 38px; + } } p.input.ship-postalCode.required.text { @@ -919,12 +1161,27 @@ p.input.ship-postalCode.required.text { font-size: 12px; line-height: 16px; color: $color-gray7; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } } .checkout-container .shipping-data .accordion-group .accordion-inner p input { width: 95.5% !important; height: 35.01px !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bdbdbd; + @media (min-width: $checkout2500px) { + height: 45px !important; + font-size: 28px; + line-height: 38px; + } } p.vtex-omnishipping-1-x-shippingSectionTitle { @@ -934,6 +1191,10 @@ p.vtex-omnishipping-1-x-shippingSectionTitle { font-size: 14px !important; line-height: 19px; color: $color-gray7 !important; + @media (min-width: $checkout2500px) { + font-size: 28px !important; + line-height: 38px !important; + } } span.shipping-date.pull-left { @@ -947,6 +1208,11 @@ label.vtex-omnishipping-1-x-leanShippingOption { center; width: 18px; height: 18px; + @media (min-width: $checkout2500px) { + width: 34.95px; + height: 34.95px; + background-size: 34.95px; + } svg path { display: none; } @@ -958,6 +1224,11 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { center center; width: 18px; height: 18px; + @media (min-width: $checkout2500px) { + width: 34.95px; + height: 34.95px; + background-size: 34.95px; + } svg path { display: none; } @@ -982,6 +1253,10 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { line-height: 16px; letter-spacing: 0.05em; color: $color-gray7 !important; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } label#FASTEST { @@ -998,6 +1273,10 @@ span.state { font-size: 12px; line-height: 16px; color: $color-gray7; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 33px; + } } a#force-shipping-fields { @@ -1035,6 +1314,10 @@ p.input.ship-receiverName.required.text label { line-height: 16px !important; letter-spacing: 0.05em; color: $color-gray7 !important; + @media (min-width: $checkout2500px) { + font-size: 24px !important; + line-height: 33px !important; + } } a#force-shipping-fields { @@ -1069,6 +1352,10 @@ span.accordion-toggle.collapsed.accordion-toggle-active span { line-height: 24px; letter-spacing: -0.01em; color: $color-black; + @media (min-width: $checkout2500px) { + font-size: 32px; + line-height: 37px; + } } .cart-template .cart-fixed #payment-data-submit { @@ -1083,6 +1370,12 @@ span.accordion-toggle.collapsed.accordion-toggle-active span { letter-spacing: 0.05em; text-transform: uppercase; color: $color-white; + height: 42px; + @media (min-width: $checkout2500px) { + height: 61px; + font-size: 28px; + line-height: 38px; + } } p.card-flags.active { @@ -1093,6 +1386,39 @@ p.card-flags.active { form.form-step.box-new.row-fluid { top: 37px; position: relative; + @media (max-width: $checkout1024px) { + top: 0; + } + &::before { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: $color-gray7; + bottom: 16px; + position: relative; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 48px; + } + @media (max-width: $checkout1024px) { + top: 12px; + margin-bottom: 24px; + } + @media (max-width: $checkout375px) { + margin-bottom: 50px; + } + } +} + +fieldset.payment-group { + @media (max-width: $checkout1024px) { + display: flex; + justify-content: center; + } } .steps-view { @@ -1127,30 +1453,106 @@ p.PaymentCardHolderDocument.input.text.required.mask { a { background: $color-gray3; mix-blend-mode: normal; - opacity: 0.3; border: 1px solid $color-black2; border-radius: 6px; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; + padding: 11.2px 23.1px; + color: #58595b; + margin-bottom: 12px; text-align: center; - letter-spacing: -0.01em; - color: transparent; + @media (min-width: $checkout2500px) { + padding: 13px 94px; + width: 216.1px; + } & span { opacity: unset; - color: #58595b; + padding: 0; + } + &:active, + &:focus { + background: rgba(220, 221, 227, 0.3); + mix-blend-mode: normal; + border: 1px solid #f15a31; + cursor: pointer; + text-align: center; + letter-spacing: -0.01em; + color: #f15a31; + text-decoration: none; } - } } +.payment-group-item-text { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + opacity: unset; + letter-spacing: -0.01em; + white-space: nowrap; + @media (min-width: $checkout2500px) { + font-size: 28px !important; + line-height: 24px !important; + } +} + +.steps-view { + width: 55.9%; + @media (min-width: $checkout2500px) { + width: 57.6%; + } + @media (max-width: $checkout1024px) { + width: 96.5%; + } +} + +.payment-group-item { + width: 95.91%; +} + +ul.cart-items.unstyled.clearfix { + display: flex; + flex-direction: column; +} + +li.hproduct.item.muted { + top: 0; + bottom: 0; +} + +#payment-group-bankInvoicePaymentGroup .payment-group-item-text, +#payment-group-creditCardPaymentGroup .payment-group-item-text { + background-image: none; +} + .payment-group-list-btn { @media (max-width: $checkout1024px) { width: 96%; } + @media (max-width: 767px) { + width: 96% !important; + } } + +.payment-data .payment-group { + @media (max-width: 767px) { + margin-left: 0px !important; + margin-right: 0px !important; + } +} + +.payment-data .payment-group a { + @media (max-width: 767px) { + width: 88.31% !important; + } +} + +.box-client-info-pf { + @media (max-width: 767px) { + margin-right: 0; + } +} + .vtex-omnishipping-1-x-addressFormPart1 input { max-width: none !important; } @@ -1169,6 +1571,9 @@ body .container-main.container-order-form .orderform-template.active .mini-cart @media (max-width: $checkout1024px) { width: 100%; } + @media (max-width: $checkout375px) { + width: 95%; + } } body .container-main.container-order-form .orderform-template.active .orderform-template-holder { @@ -1185,7 +1590,19 @@ p.input.ship-country.text { width: 100%; } -// área do carrinho +.table { + @media (max-width: $checkout1024px) { + width: 100%; + } +} + +.step.accordion-group.store-country-BRA.active { + @media (max-width: $checkout1024px) { + margin-left: 16px; + margin-right: 16px; + } +} + .row-fluid { @media (max-width: $checkout1024px) { display: flex; @@ -1200,6 +1617,8 @@ p.input.ship-country.text { .step.accordion-group.shipping-data { @media (max-width: $checkout1024px) { margin-bottom: 17px; + margin-left: 16px; + margin-right: 16px; } & .accordion-heading { & a { @@ -1221,6 +1640,8 @@ p.input.ship-country.text { .step.accordion-group.store-country-BRA.filled { @media (max-width: $checkout1024px) { margin-bottom: 17px; + margin-left: 16px; + margin-right: 16px; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 61e7166..5c64e68 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -26,7 +26,7 @@ } @media (max-width: $checkout1024px) { - height: 91px; + height: auto; display: flex; justify-content: space-between; position: relative; @@ -48,13 +48,17 @@ } .cart-fixed { font-family: $font-family; - width: 100%; + // width: 100%; h2 { background: $color-white; border: none; color: #303030; font-size: 14px; font-weight: 500; + @media (min-width: $checkout2500px) { + font-size: 32px !important; + line-height: 37px; + } } .item-unavailable { @@ -116,6 +120,9 @@ &:active { background: darken($color-black, 5); } + & i.icon-lock { + display: none; + } } } @@ -169,7 +176,8 @@ img { height: 60px; max-width: 100%; - width: auto; + width: 60px; + object-fit: cover; @include mq(sm, max) { height: 72px; width: auto; @@ -192,11 +200,12 @@ padding-left: 31px; } @media (max-width: $checkout1024px) { - left: 145px; + left: 71px; position: absolute; } @media (max-width: $checkout375px) { width: auto; + left: 145px; margin: 0; } @@ -524,7 +533,6 @@ } .summary { - // display: block; .cart-more-options { margin: 0; width: max-content; @@ -764,7 +772,6 @@ width: 120px; height: 36px; right: -213px; - } &:hover { background-color: lighten($color-black, 5); @@ -877,7 +884,7 @@ @media (min-width: $checkout2500px) { width: 688.35px; } - // aqui + @media (max-width: $checkout1024px) { width: 97%; display: flex !important; @@ -1207,6 +1214,17 @@ } } } + +[class*="span"].pull-right, .row-fluid [class*="span"].pull-right{ + @media (max-width: $checkout1024px) { + float: none; + } + @media (max-width: $checkout375px) { + float: none; + margin-left: 0; + } +} + .muted { color: $color-gray6; } @@ -1353,6 +1371,7 @@ th.quantity { } .full-cart .cart table tbody tr td.product-name { + padding-left: 16px; @media (max-width: $checkout375px) { margin: 0; width: 0; @@ -1409,6 +1428,6 @@ th.product { } .full-cart .cart table tbody tr td.quantity input { @media (max-width: $checkout375px) { - margin: 0 20px; + margin: 0 20px; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..629be32 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,6 +4,10 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + @media (max-width: $checkout1024px) { + float: none; + margin-left: 16px; + } } .orderform-template-holder { width: 66.1132%;