diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 3990982..779b8e5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,14 +6,16 @@ .link-cart { a { - color: red; + color: $color-black2; + font-weight: 400; + font-family: $font-family-secundary; font-size: 14px; line-height: 16px; text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } + // &:hover { + // color: lighen($color-black, 10); + // } } } @@ -28,22 +30,22 @@ margin-top: 7px; span { - color: #f30606; + color: $color-black2; + font-family: $font-family-secundary; font-size: 20px; line-height: 23px; text-transform: uppercase; font-weight: 400; - letter-spacing: 0.09em; } small { - color: red; + color: $color-black2; + font-family: $font-family-secundary; font-size: 20px; line-height: 23px; text-transform: uppercase; font-weight: 400; padding: 0; - letter-spacing: 0.09em; } } } @@ -59,13 +61,14 @@ color: $color-black; font-family: $font-family; padding: 0 16px; - border: 1px solid red; + border: 1px solid $color-black2; + border-right: none; box-sizing: border-box; border-radius: 5px 0px 0px 5px; width: 77%; height: 52px; &::placeholder{ - color: red; + color: $color-black2; font-weight: 400; font-size: 12px; line-height: 16px; @@ -97,8 +100,15 @@ right: 14px; padding: 4px 26px; height: 52px; - background-color: red; + background-color: $color-blue2; border-radius: 0px 8px 8px 0px; + position: static; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; } span.help.error { @@ -115,11 +125,15 @@ .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black2; + border-radius: 5px; h3 { - color: #303030; + color: $color-black2; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; margin: 0 0 8px 0; } @@ -128,11 +142,16 @@ li { span { - color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black2; } i::before { - color: red; + color: $color-blue2; font-size: 1rem; opacity: 1; } @@ -146,36 +165,94 @@ } } } + .newsletter{ + margin-bottom: 44px; + } + #go-to-shipping{ + width: 100%; + margin-bottom: 3px; + margin-top: 0; + } + p.input.ship-country.text{ + display: none; + + } + .vtex-omnishipping-1-x-addressFormPart1 small{ + margin-left: 0; + } .shipping-data, .payment-data, .client-profile-data { + .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; + border-radius: 8px; font-family: $font-family; - padding: 16px; + padding: 17px 17px 29px 17px; + + span{ + font-size: 12px; + line-height: 14px; + } + + .accordion-toggle{ + font-weight: 400; + font-size: 16px; + line-height: 20px; + } + div.row-fluid:before{ + display: none; + } + + p.link.link-gift-card{ + display: none !important; + } + .row-fluid:before{ + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seu dados"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + } + .accordion-heading { span { - color: #303030; - margin-bottom: 8px; + color: $color-black; + margin-bottom: 15px; padding: 0; - i::before { - fill: #303030; + i { + font-size: 0; + line-height: 0; + &.icon-edit{ + + &::before{ + content: ""; + width: 20px; + height: 20px; + background-image:url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png) ; + background-repeat: no-repeat; + margin-top: 7px; + background-size: contain; + } + } } } a { align-items: center; - background-color: #303030; + background-color: $color-white; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + display: block !important; + outline: none; } } @@ -183,23 +260,45 @@ padding: 0; /* General configurations */ + .box-client-info-pj{ + display: none; + } .client-notice { color: $color-black; + display: none; } p { label { - color: $color-black; - font-weight: 500; + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + span.newsletter-text{ + color: $color-gray9; + } } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid $color-gray10; box-shadow: none; + padding: 10px 6px; + + &#opt-in-newsletter{ + border-radius: 3px; + color: $color-gray11; + } } + #ship-postalCode{ + width: 100%; + max-width: 95%; + } .help.error { color: red; @@ -218,14 +317,25 @@ .state-inscription-box span { font-weight: 500; } + .submit.btn-submit-wrapper{ + margin-top: 0; + } button.submit { border: none; - border-radius: 5px; - background: $color-black; + border-radius: 8px; + background: $color-blue2; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; &:hover { background: lighten($color-black, 5); @@ -239,21 +349,26 @@ /* Shipping configurations */ .ship-postalCode small a { - color: #303030; - font-weight: 500; + color: $color-black; + font-weight: 400; + font-size: 12px; + line-height: 16px; text-decoration: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-gray2; + font-weight: 700; + font-size: 14px; + line-height: 19px; + font-style: normal; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray10; + border-radius: 8px; + margin-bottom: 15px; label { background-color: $color-white; @@ -269,30 +384,47 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-gray2; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + margin-bottom: 11px; + font-style: normal; } .shp-summary-group-info { border-color: $color-gray4; + border: none; } .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; + border-color: $color-gray10; + border-radius: 8px; color: #303030; padding: 12px; + padding-top: 2px; + &::before{ + content: ""; + width: 24px; + height: 24px; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-repeat: no-repeat; + background-size: 24px; + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: $color-blue2; + float: right; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-transform: lowercase; } } @@ -303,25 +435,82 @@ .shp-summary-group-price { padding-right: 16px; + display: none; } .shp-summary-package { - padding-left: 16px; + padding-left: 12px; } .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-purple; } + .vtex-omnishipping-1-x-deliveryOptionInactive{ + color: $color-gray8; + } + p.input.ship-number.required.text{ + width: 100%; + } + input#ship-number.input-mini, + input#ship-complement.input-large, + input#ship-receiverName.input-xlarge { + width: 95%; + } + .steps-view{ + width: 57%; + margin-top: 35px; + + } + span.payment-group-item-text{ + background-image: none !important; + } + .payment-group-item{ + border-right: 1px solid $color-black2 ; + border: 1px solid $color-black2; + border-radius: 6px; + display: none; + opacity: 0.3; + margin-bottom: 12px; + mix-blend-mode: normal; + padding: 13px 24.5px; + background: $color-gray3; + color: $color-gray6; + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &-text{ + padding: 5px 0 5px 0; + } + } + .payment-group-item.active{ + margin-left: 5px; + border-radius: 6px; + border-right: 1px solid $color-orange ; + border: 1px solid $color-orange; + color: $color-orange; + text-decoration: none; + opacity: 1; + background: rgba(220, 221, 227, 0.3); + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index c093081..54706cf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -3,6 +3,14 @@ width: 100%; } } +.PaymentCardNumber input { + width: 64%; + height: 25px; +} +input#creditCardpayment-card-0Number.input.medium{ + width: 64%; + height: 25px; +} .cart-template { font-family: $font-family; @@ -13,7 +21,7 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px 16px 5px 16px; @@ -30,13 +38,20 @@ } .cart-fixed { font-family: $font-family; - width: 100%; + width: 99.5%; + border: 1px solid $color-gray5; + height: 397px !important; + border-radius: 8px; h2 { background: $color-white; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-black; + font-family: $font-family-secundary; + font-size: 16px; + line-height: 19px; + font-weight: 400; + text-align: start; + padding: 24px 0 0 17px; } .item-unavailable { @@ -48,7 +63,7 @@ } .cart { - border: 1px solid $color-gray4; + border: none; ul li { border-top: none; @@ -76,6 +91,11 @@ #go-to-cart-button a { color: #303030; text-decoration: underline; + margin-right: 17px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; } .summary-totalizers { @@ -85,19 +105,26 @@ } #payment-data-submit { - background: $color-black; + background: $color-green2; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); - } + border-top: 15px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; - &:active { - background: darken($color-black, 5); - } + // &:hover { + // background: lighten($color-black, 5); + // } + + // &:active { + // background: darken($color-black, 5); + // } } } @@ -108,11 +135,16 @@ .cart-items { .product-item { padding: 16px 0; + + .product-name{ + padding-top: 10px; + } } th { color: $color-black; padding: 0 0 13px; + font-family: $font-family-secundary; font-style: normal; font-weight: 400; font-size: 14px; @@ -132,7 +164,7 @@ font-weight: 400; font-size: 14px; line-height: 16px; - color: red; + color: $color-black; } } &.product-price{ @@ -143,8 +175,7 @@ font-weight: 400; font-size: 14px; line-height: 16px; - color: red - ; + color: $color-black; } } } @@ -169,9 +200,25 @@ } } } - + .badge{ + display: none; + } + #hproduct-item-2616{ + width: 60px; + } + .price{ + padding-top: 15px; + } .product-name { padding-right: 0; + width: 39%; + font-family: $font-family-secundary; + white-space: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + padding-top: 30px; + color: $color-black2; @include mq(lg, max) { width: 250px; @@ -311,7 +358,7 @@ &:before { content: "+"; font-size: 14px; - background-color: #00C8FF; + background-color: $color-blue2; border-radius: 50%; height: 100%; width: 100%; @@ -340,11 +387,17 @@ display: none; } span { + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + &.total-selling-price{ + font-weight: 700; + line-height: 19px; + } } } @@ -395,12 +448,12 @@ } .srp-main-title { - margin: 32px 0 12px; + margin: 33px 0 12px; font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black2; @include mq(md, max) { margin-top: 0; @@ -409,16 +462,16 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-size: 14px; line-height: 18px; margin: 0 0 10px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray7; border: none; - border-radius: 5px; - color: $color-gray2; + border-radius: 8px; + color: $color-black2; font-size: 14px; letter-spacing: 0.05em; line-height: 19px; @@ -427,6 +480,7 @@ padding: 12px 40px; transition: all 0.2s linear; margin-top: 0; + text-transform: uppercase; &:hover { background-color: lighten($color-gray5, 5); @@ -455,26 +509,27 @@ } .srp-pickup-my-location__button { - background-color: $color-blue; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + font-family: $font-family; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } } @@ -495,12 +550,16 @@ } &__current { - border: 1px solid $color-black; + border: 1px solid $color-black2; border-radius: 100px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-black; + color: $color-black2 !important; + } + .gray{ + color: $color-gray8; } label { @@ -519,8 +578,8 @@ font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-black; + line-height: 16px; + color: $color-black2; margin-bottom: 2px; } @@ -536,43 +595,47 @@ } & ~ button { - background-color: $color-blue; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; + font-family: $font-family; font-size: 12px; + line-height: 19px; + font-weight: 700; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05px; outline: none; position: absolute; right: -150px; top: 26px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } small a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 0px; line-height: 0px; - color: $color-black; + color: $color-black2; margin-top: 7px; &::after{ content: "Não sei meu código postal"; font-size: 10px; line-height: 12px; + font-weight: 400; :hover{ text-decoration: underline; @@ -663,12 +726,12 @@ } } span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; text-decoration: none; } } @@ -681,6 +744,7 @@ .coupon-column { .coupon { margin: 0; + } .link-coupon-add { @@ -688,7 +752,9 @@ font-size: 12px; text-decoration: underline; } - + .coupon-label{ + margin-bottom: 4px; + } .coupon-label label { margin-bottom: 12px; font-family: $font-family; @@ -698,6 +764,7 @@ line-height: 14px; color: $color-gray2; cursor: none; + text-align: left; } .coupon-fields { @@ -717,7 +784,7 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; color: $color-gray4; @@ -735,13 +802,16 @@ } button { - background: blue; + background: $color-blue2; border: none; border-radius: 8px; - color: $color-white; - font-size: 12px; + color: $color-black2; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05px; margin-left: 6px; outline: none; transition: all 0.2s linear; @@ -752,13 +822,13 @@ width: 138px; } - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } } } @@ -784,6 +854,7 @@ &.info { text-align: left; + font-family: $font-family-secundary; } &.monetary { @@ -796,17 +867,55 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; + font-weight: 700; + font-size: 14px; + line-height: 19px; color: $color-black; + // padding-top: 30px; + float: none; + } + td.info{ + font-weight: 700; + font-size: 18px; + line-height: 25px; + // padding-left: 17px; + font-family: $font-family; + } + td.monetary{ + padding-right: 0px; } } } } } + .Items{ + // border-top: 1px solid; + border-bottom: 1px solid; + .info{ + padding: 20px 0 10px 0 ; + padding-left: 0; + float: none; + } + .monetary{ + padding-right: 0px ; + float: none; + } + } + .Discounts{ + border-bottom: 1px solid; + .info{ + padding: 20px 0 10px 0 ; + padding-left: 0; + float: none; + } + .monetary{ + padding-right: 0px ; + float: none; + } + } .coupon-data{ display: block !important; + margin-top: 33px; } .cart-links-bottom { @@ -836,36 +945,37 @@ } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; + text-decoration: none; } } .btn-place-order-wrapper { a { - background: $color-blue; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 5); - } + // &:hover { + // background-color: darken($color-green, 5); + // } &:after { content: "finalizar compra"; font-family: $font-family; font-weight: 700; - font-size: 13px; + font-size: 14px; letter-spacing: 0.05em; - color: red; + color: $color-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..64ababb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,8 +4,12 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + .payment-submit-wrap{ + margin-top: 15px; + } } .orderform-template-holder { width: 66.1132%; } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 2f7d767..1a32b2b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -20,8 +20,11 @@ &::after{ content: "SEU CARRINHO ESTÁ VAZIO"; + font-family: $font-family; + font-weight: 700; font-size: 24px; line-height: 33px; + color: $color-black2; } } @@ -29,16 +32,16 @@ .link-choose-products { border: 1px solid $color-black; border-radius: 0; - // transition: ease-in 0.22s all; + transition: ease-in 0.22s all; outline: none; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; + font-weight: 400; + font-size: 0px; + line-height: 0px; text-align: center; letter-spacing: 0.05em; - color: $color-black; + color: $color-black2; text-transform: uppercase; margin: 0 0 0 0; width: 31.74%; @@ -47,6 +50,17 @@ &:hover { background: lighten($color-white, 5); } + &::before{ + content: "Continuar comprando"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + color: $color-black2; + text-transform: uppercase; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 107f05f..078423f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -11,7 +11,7 @@ html { footer .footerCheckout__wrapper { width: 100%; margin: auto auto 0 auto; - border-top: 1px solid black; + border-top: 1px solid $color-black2; .container{ display: flex; align-items: center; @@ -24,7 +24,7 @@ header { margin: 0 auto; } header{ - border-bottom: 1px solid black; + border-bottom: 1px solid $color-black2; padding: 29px 0; } .headerCheckout__safeBuy{ @@ -39,6 +39,164 @@ body { min-height: 100% !important; padding-top: 0 !important; + .PaymentCardNumber input { + width: 64%; + height: 25px; + } + p.PaymentCardHolderDocument.input.text.required.mask{ + display: none; + } + .PaymentInstallments select{ + width: 68%; + } + input#creditCardpayment-card-0Name.input-medium{ + width: 34%; + height: 25px; + } + .input#creditCardpayment-card-0Code.input-mini{ + width: 16%; + height: 25px; + } + #ship-postalCode{ + border: 1px solid $color-gray8; + border-radius: 8px; + } + #find-pickups-manualy-button-denied{ + color: $color-black2; + outline: none; + &:hover{ + background: $color-white; + color: $color-black2; + } + &:active{ + background: $color-white; + color: $color-black2; + } + } + #payment-data-submit{ + i.icon-lock{ + display: none; + } + } + tbody.totalizers-list{ + tr.srp-summary-result.hide{ + display: none; + } + } + div.cart-fixed.cart-fixed-transition.affix-top{ + .Items{ + border-top: 1px solid $color-gray10; + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + .Discounts{ + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + tfoot { + td.info, + td.monetary { + padding-top: 30px; + padding-bottom: 0px; + } + td.info{ + padding-left: 17px; + } + td.monetary{ + padding-right: 17px; + } + } + div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + margin-bottom: 0; + } + button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ + margin-top: 47px; + } + } + div#client-profile-data.span6.client-profile-data{ + .client-profile-email{ + margin-bottom: 6px; + } + .client-profile-summary{ + span{ + margin-bottom: 6px; + } + } + span{ + font-size: 0; + line-height: 0; + &::after{ + content: "Identificação"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } + } + span.accordion-toggle.collapsed, + span.email, + span.name, + span.tel, + span.newsletter-text{ + &::after{ + display: none; + } + } + span.email, + span.name, + span.tel{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + span.newsletter-text{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + } + } + // a#payment-group-SPEIPaymentGroup.payment-group-item, + // a#payment-group-MercadoPagoPaymentGroup.payment-group-item, + // a#payment-group-PSEPaymentGroup.payment-group-item, + // a#payment-group-promissoryPaymentGroup.payment-group-item, + // a#payment-group-creditDirectSalePaymentGroup.payment-group-item, + // a#payment-group-creditControlPaymentGroup.payment-group-item { + // display: none; + // } + a#payment-group-creditCardPaymentGroup.payment-group-item, + a#payment-group-bankInvoicePaymentGroup.payment-group-item { + display: block; + + } + .payment-group-list-btn{ + width: 105%; + } + + @include mq(md, max) { padding-left: 0; } @@ -80,13 +238,9 @@ body { } } -.emailInfo h3 { - color: $color-black !important; -} - #cart-title, #orderform-title { - color: red; + color: $color-black2; font-family: $font-family; font-weight: 700; font-size: 24px; @@ -104,7 +258,7 @@ body { font-size: 24px; line-height: 33px; width: max-content; - color: #292929; + color: $color-black; margin: 16px 0; letter-spacing: 0.05em; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 4ebb8b1..3a13fe0 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -18,7 +18,7 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - width: 33%; + width: 33.33%; &::after{ content: "."; @@ -36,7 +36,7 @@ justify-self: center; list-style: none; margin: 0; - width: 33%; + width: 33.33%; justify-content: center; @include mq(md, max) { @@ -45,10 +45,10 @@ } .footer-imgs-cards { - width: 10.01%; - margin-right: 12px; + width: 10.8%; + margin-right: 2.8%; &-final{ - width: 10.01%; + width: 10.8%; margin-right: 0px } } @@ -69,23 +69,27 @@ align-items: center; display: flex; list-style-type: none; - margin: 0 0 0 158px; - width: 21%; + margin: 0 0 0 0px; + width: 33.33%; justify-content: flex-end; .Link1{ justify-content: end; &__footer-imgs-logoVtex{ - width: 35%; + width: 40%; } } .footer-imgs-logoM3{ width: 27.5%; } + li:first-child { + width: 26.61%; + } li:last-child { - margin-left: 16px; + margin-left: 2.5%; + width: 25.58%; } a { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index f476faa..82bce17 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -25,7 +25,6 @@ display: flex; flex-direction: column; list-style: none; - /* border: 1px solid violet; */ } .p-text{ width: max-content; @@ -33,13 +32,15 @@ font-size: 12px; line-height: 14px; margin-bottom: 9px; + font-family: $font-family-secundary; + color: $color-black2; } .p-bola{ - border: 1px solid black; + border: 1px solid $color-black2; border-radius: 50%; width: 10px; height: 10px; - background-color: white; + background-color: $color-white; } .div-itens{ display: flex; @@ -100,10 +101,10 @@ text-transform: uppercase; font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-gray; + color: $color-black; } i { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..78a25f6 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,18 +6,34 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black2: #000000; + $color-white: #fff; + +$color-purple: #41115D; + + $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #58595B; +$color-gray7: #EDEDED; +$color-gray8: #C4C4C4; +$color-gray9: #808080; +$color-gray10: #E0E0E0; +$color-gray11: #828282; $color-blue: #4267b2; +$color-blue2: #00C8FF; $color-green: #4caf50; +$color-green2: #298541; + +$color-orange: #F15A31; /* Grid breakpoints */ $grid-breakpoints: (