diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index eb51e71..13375c3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -45,6 +45,7 @@ } } + } .client-email { @@ -65,10 +66,11 @@ box-shadow: none; color: $color-black; font-family: $font-family; - padding: 0 16px 12px; + padding: 0 16px 0; border: 1px solid $color-black; box-sizing: border-box; border-radius: 5px; + font-size: 16px; &::placeholder { font-family: $font-family; @@ -78,6 +80,7 @@ line-height: 16px; display: flex; align-items: center; + padding: 0 16px 12px; } @media (max-width: 490px) { @@ -103,7 +106,28 @@ } span.help.error { + content: ""; color: red; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-align: center; + text-transform: capitalize; + visibility: hidden; + + + &::after { + content: "Campo Obrigatório"; + } + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 32px; + } + } } @@ -153,226 +177,10 @@ opacity: 0.5; } } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 8px; - border: 1px solid $color-gray3; - font-family: $font-family; - padding: 16px; - .accordion-heading { - // span { - // color: #303030; - // margin-bottom: 8px; - // padding: 0; - // background: none; - - & span:nth-child(2n) { - margin-bottom: 36px; - padding: 0; - visibility: hidden; - position: relative; - - &::before { - content: "Identificação"; - visibility: visible; - position: absolute; - } - } - - i::before { - fill: #303030; - } - } - - a { - align-items: center; - background-color: $color-white; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - display: none; - } - } - - .accordion-inner { - padding: 0; - - /* General configurations */ - - .client-notice { - color: $color-black; - display: none; - } - - p { - label { - color: $color-gray2; - font-weight: 500; - - } - - select, - input { - height: 42px; - border-radius: 8px; - border: 1px solid $color-gray7; - box-shadow: none; - } - - - .help.error { - color: red; - } - } - - .box-client-info-pj { - - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } - - .state-inscription-box span { - font-weight: 500; - } - - button.submit { - border: none; - border-radius: 5px; - background: $color-blue2; - color: $color-white; - font-weight: 700; - font-size: 14px; - line-height: 19px; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; - width: 100%; - - - &:hover { - background: lighten($color-black, 5); - } - - &:active { - background: darken($color-black, 5); - } - } - - /* Shipping configurations */ - - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - background-color: red; - } - - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 3px; - - - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; - - - svg path { - fill: #d8c8ac; - - } - } - } - } - - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } - - .shp-summary-group-info { - border-color: $color-gray4; - } - - .address-summary { - background: none; - border-color: $color-gray7; - border-radius: 0; - color: $color-gray2; - padding: 12px; - border-radius: 8px; - - @include mq(md, max) { - background-position: 8px 9px; - } - - a { - content: ""; - display: block; - text-align: end; - - - &::after { - content: "alterar"; - color: $color-blue2; - font-weight: 500; - text-decoration: underline; - - } - - } - } - } - - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } - - .shp-summary-group-price { - padding-right: 16px; - } - - .shp-summary-package { - padding-left: 16px; - } - - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } - - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } - - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } } @@ -429,54 +237,11 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { width: 100%; } -.step.accordion-group.shipping-data { - & .accordion-heading { - & span.accordion-toggle.collapsed { - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - cursor: pointer; - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 19px; - color: $color-black; - } - } -} -.payment-data { - & .accordion-group { - & .accordion-heading { - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - cursor: pointer; - } - } -} - -i.icon-edit { - position: relative; - color: transparent; - - &::before { - position: relative; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 100% 50%; - width: 16px; - height: 16px; - } -} p.notification { - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -492,6 +257,8 @@ input#client-phone { } input#client-first-name { + width: 96%; + @media (max-width: 1024px) { width: 96%; } @@ -499,10 +266,12 @@ input#client-first-name { p.client-first-name.input.pull-left.text.required, p.client-last-name.input.pull-left.text.required { - max-width: 46%; + max-width: 48%; } p.client-last-name.input.pull-left.text.required { + margin-left: 5px; + @media (max-width: 1024px) { max-width: 46.9%; } @@ -512,6 +281,7 @@ input#client-document, input#client-phone { width: 92%; + @media (max-width: 1024px) { width: 96%; } @@ -551,6 +321,15 @@ span.quantity.badge { font-size: 12px; line-height: 14px; color: $color-black2; + + @media (min-width: 2500px) { + + width: 100%; + max-width: 60%; + font-size: 24px; + line-height: 28px; + margin-left: 13.5px + } } .cart-fixed.affix-top.cart-fixed-transition { @@ -565,6 +344,10 @@ span.quantity.badge { border-bottom: 1px solid $color-gray2; border-radius: 0; margin-bottom: 0; + + @media (min-width: 2500px) { + min-height: 250px; + } } .mini-cart h2 { @@ -585,15 +368,15 @@ span.quantity.badge { } a#orderform-minicart-to-cart { - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; text-align: right; right: 16px; - color: #000000 !important; - bottom: 34px; + color: $color-black2 !important; + bottom: 44px; position: relative; cursor: pointer; } @@ -601,24 +384,33 @@ a#orderform-minicart-to-cart { span.fn.product-name { overflow-wrap: break-word; white-space: break-spaces !important; - inline-size: 182px !important; + + @media (min-width: 2500px) { + inline-size: none; + font-size: 32px; + line-height: 37px; + } } .cart-fixed .cart ul li .price { - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; text-align: right; - color: #292929; + color: $color-black; white-space: nowrap; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } li.hproduct.item.muted { display: flex; align-items: center; - justify-content: space-between; } .mini-cart .price { @@ -632,7 +424,7 @@ p#go-to-cart-button { tr.Items, tr.Discounts { border-bottom: 1px solid $color-gray2 !important; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -646,7 +438,7 @@ td.info { } .shipping-summary-info { - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -656,6 +448,10 @@ td.info { p.submit.btn-submit-wrapper { margin-top: 44px; + + button { + background-color: red($color: #000000); + } } .step.accordion-group.client-profile-data.active { @@ -678,10 +474,10 @@ td.monetary { button#shipping-option-delivery { background: #ffffff; - border: 1px solid #292929; + border: 1px solid $color-black; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 100px; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -694,7 +490,7 @@ button#shipping-option-delivery { button#shipping-option-pickup-in-point { border-radius: 100px; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; @@ -721,10 +517,20 @@ p.input.ship-postalCode.required.text { } .accordion-heading .accordion-toggle { - padding: 4px 0 0; + padding: 4px 8px 0; font-weight: 400; font-size: 16px; line-height: 19px; + font-family: $font-family-secundary; + + @media (min-width: 2500px) { + padding: 4px 20px 0; + font-size: 32px; + line-height: 37px; + + } + + } @@ -744,16 +550,274 @@ input#client-email { .step.accordion-group.client-profile-data.filled { height: 100%; - padding: 24px 16px 36px; + padding: 0; + + .accordion-toggle { + + + span { + + color: #303030; + margin-bottom: 8px; + padding: 0; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 37px; + } + + + visibility: hidden; + position: relative; + + + &::before { + content: 'Identificação'; + visibility: visible; + position: absolute; + } + + + + } + } } -.box-step { - margin-top: 25px; -} +// .box-step { +// margin-top: 25px; +// } input#ship-number, input#ship-complement, input#ship-receiverName { width: 95%; height: 35px; +} + +p.client-first-name.input.pull-left.text.required, +p.client-last-name.input.pull-left.text.required { + width: 46%; +} + +.client-notice, +.client-profile-data ul { + display: none; +} + + + +.accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + + + + i::before { + display: none; + } + } + + a { + background: transparent; + border: none; + + &::before { + content: ''; + width: 19.2px; + height: 18.66px; + background: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png') no-repeat center center; + display: block; + background-size: 100%; + border: none; + cursor: pointer; + + @media (min-width: 2500px) { + width: 39.24px; + height: 40.58px; + } + + } + } +} + +button#btn-go-to-payment, +button#go-to-shipping { + width: 100%; + background-color: $color-blue2; + color: $color-white; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + @media (min-width:2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } +} + +.accordion-heading { + span { + margin-bottom: 8px; + padding: 0; + color: $color-black2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin-bottom: 15px; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 37px; + } + + i { + position: absolute; + right: 8px; + width: 19.2px; + height: 18px; + cursor: pointer; + } + + i::before { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 19.2px 18px; + fill: transparent; + color: transparent; + width: 19.2px; + height: 18px; + cursor: pointer; + } + + .icon-user { + display: none; + } + + .icon-home { + display: none; + } + + .icon-credit-card { + display: none; + } + + // .icon-edit { + // display: none; + // } + + span[data-i18n="clientProfileData.identification"] { + color: $color-white; + margin: 0; + } + + span[data-i18n="clientProfileData.identification"]::before { + content: "Identificação"; + color: $color-black2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + // margin: 0 0 0 17px; + } + + span[data-i18n="paymentData.payment"]::before { + content: ""; + height: 50px; + width: 50px; + } + } + + a { + align-items: center; + background-color: transparent; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 20px 15px 6px 8px; + } +} + +a#edit-shipping-data, +.accordion-toggle .link-box-edit { + background: transparent; +} + + + +.box-info { + // margin-left: 15px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } +} + +.mini-cart .url { + img { + + width: 116.5px; + + } +} + +// ul.cart-items.unstyled.clearfix { +// margin-bottom: 50px; +// } + +span.shipping-date.pull-left { + display: none; +} + +strong.price.pull-right { + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + width: 100%; + } +} + +.mini-cart .description { + @media (min-width: 2500px) { + margin-top: 0; + } +} + +.accordion-toggle .link-box-edit { + position: absolute; + right: 0px; + top: 0px; +} + +.address-summary.address-summary-BRA, +.vtex-omnishipping-1-x-summaryPackage.shp-summary-package { + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } +} + +.vtex-omnishipping-1-x-SummaryItemContent { + display: block !important; +} + +.vtex-omnishipping-1-x-SummaryItemPrice { + @media (min-width: 2500px) { + padding: 0 !important; + font-size: 24px; + line-height: 33px; + } +} + +.vtex-omnishipping-1-x-summaryChange { + display: none !important; + + @media (min-width: 2500px) {} } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index c410841..e2b7aec 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -44,6 +44,11 @@ color: #303030; font-size: 14px; font-weight: 500; + + @media (min-width: 2500px) { + font-size: 32px !important; + line-height: 37px; + } } .item-unavailable { @@ -70,7 +75,7 @@ .shipping-date, .price { - color: $color-gray2; + color: #7d7d7d; } } } @@ -83,6 +88,12 @@ #go-to-cart-button a { color: #303030; text-decoration: underline; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + margin-bottom: 10px; + } } .summary-totalizers { @@ -93,11 +104,19 @@ #payment-data-submit { background: $color-blue2; + ; border: none; border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + width: 96%; + margin: 0 auto; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } &:hover { background: lighten($color-black, 5); @@ -274,6 +293,7 @@ font-weight: 500; // padding: 1px 12px; background-color: $color-blue2; + ; width: 16px; height: 16px; margin: 0 11px; @@ -441,6 +461,7 @@ .srp-pickup-my-location__button { background-color: $color-blue2; + ; border: none; border-radius: 5px; color: $color-white; @@ -492,7 +513,7 @@ width: 50%; &:active { - background-color: #f0f0f0; + background-color: $color-gray3; } } } @@ -522,6 +543,7 @@ &~button { background: $color-blue2; + ; border-radius: 8px; border: none; color: $color-white; @@ -645,11 +667,11 @@ } &__sla { - color: $color-gray2; + color: #7d7d7d; } &__price { - color: $color-gray2; + color: #7d7d7d; font-weight: 500; } @@ -817,6 +839,7 @@ button { background: $color-blue2; + ; border: none; border-radius: 8px; height: 36px; @@ -903,7 +926,7 @@ font-weight: 700; font-size: 18px; line-height: 25px; - color: #292929; + color: $color-black; font-family: $font-family; @media (min-width: 2500px) { @@ -957,6 +980,7 @@ .btn-place-order-wrapper { a { background: $color-blue2; + ; border: none; border-radius: 5px; display: block; @@ -1015,6 +1039,56 @@ position: absolute; } -.client-profile-data ul { +.icon-lock { display: none; +} + + +.payment-group-list-btn { + margin: 0; + + a { + display: none; + padding: 13px 9px; + border: 1px solid $color-gray2 ; + border-radius: 6px; + text-align: center; + margin: 12px 0 0 0; + + span { + margin: 0 !important; + padding: 0 !important; + background-image: none !important; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + color: $color-gray6 + } + + span:hover { + color: $color-orange; + } + } + + a:hover { + border: 1px solid $color-orange; + } + + a[data-name="American Express"] { + display: block; + } + + a[data-name="Boleto Bancário"] { + display: block; + } + + a[data-name="Depósito"] { + display: block; + } + + a[data-name="Mercado Pago"] { + display: block; + } } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 310e2e9..5b5d583 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -70,17 +70,19 @@ body { #cart-title, #orderform-title { - color: $color-black; + color: $color-black2; font-family: $font-family; font-weight: 700; font-size: 24px; line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; - - + @media (min-width:2500px) { + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index fa22e0f..9f345c2 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -67,6 +67,7 @@ font-family: $font-family; background-color: $color-blue2; + ; color: $color-white; border-radius: 8px; font-weight: 700; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f8ce165..099e90f 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,10 +20,11 @@ $color-gray7: #e0e0e0; $color-blue: #4267b2; $color-blue2: #00C8FF; -; + $color-green: #4caf50; +$color-orange: #f15a31; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0,