From aee45eb858e4e14bb6cdb074bd2fa015c053e69f Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 14 Dec 2022 11:56:25 -0300 Subject: [PATCH 1/6] feat: adiciona carrinho vazio --- .../sass/checkout/_checkout-vazio.scss | 40 +++++++++++++------ .../src/arquivos/sass/utils/_variaveis.scss | 1 + 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index f5158ca..c9b4a5e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,7 +1,7 @@ .empty-cart { font-family: $font-family; &-content { - color: $color-black-100; + color: $color-black-500; text-align: center; @include mq(md, max) { @@ -10,29 +10,45 @@ } &-title { - font-size: 20px; + font-size: 24px; + line-height: 32px; + font-weight: 700; + text-transform: uppercase; + margin: 0; + margin-bottom: 32px; + margin-top: 170px; + padding: 0; + } + &-message { + display: none; + } + &-links { .link-choose-products { - background: $color-black-100; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; + background: $color-white-500; + border: 1px solid $color-black-500; + border-radius: 0; + transition: ease-in-out 0.2s all; font-family: $font-family; - font-style: normal; - font-weight: 500; font-size: 14px; line-height: 16px; text-align: center; - letter-spacing: 0.05em; - color: $color-white-500; + color: $color-black-500; text-transform: uppercase; + padding: 15px 65px 17px; + margin: 0; &:hover { - background: lighten($color-black-100, 5); + background: $color-gray6; } } } } + +.hide { + display: none !important; + opacity: 0; + pointer-events: none; +} diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index a7acbb6..b4e3eaa 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #ededed; $color-blue: #4267b2; From 671e40b450d7644150af9971ec705eca620ce5d3 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 14 Dec 2022 16:08:39 -0300 Subject: [PATCH 2/6] feat: adiciona meu carrinho --- .../sass/checkout/_checkout-carrinho.scss | 107 ++++++++++-------- .../sass/checkout/_checkout-vazio.scss | 10 +- .../src/arquivos/sass/checkout/_checkout.scss | 12 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 73 insertions(+), 58 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index dcf45b0..ddf319f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -5,7 +5,7 @@ } .cart-template { - font-family: $font-family; + font-family: $font-family-secundary; @include mq(md, max) { padding: 0 0; } @@ -13,10 +13,11 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin: 0 0 48px 0; @include mq(md, max) { margin: 0px 0 25px 0; @@ -155,15 +156,12 @@ } a { - color: $color-blue; - font-style: normal; - font-weight: normal; + color: $color-black-500; font-size: 12px; line-height: 14px; - transition: ease-in 0.22s all; + text-decoration: none; &:hover { - color: darken($color-blue, 10); text-decoration: none; } @@ -217,12 +215,12 @@ td.quantity { align-items: center; - border: 1px solid $color-gray3; - border-radius: 0; + border: 1px solid $color-gray7; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 15px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -262,15 +260,17 @@ .icon-minus-sign { &:before { - content: "-"; - font-size: 16px; + width: 16px; + height: 16px; + color: $color-blue-100; } } .icon-plus-sign { &:before { - content: "+"; - font-size: 14px; + width: 16px; + height: 16px; + color: $color-blue-100; } } @@ -308,6 +308,13 @@ @include mq(md, max) { display: none; } + + .total-selling-price { + font-size: 14px; + line-height: 19px; + font-weight: 700; + font-family: $font-family; + } } .item-remove { @@ -351,12 +358,11 @@ } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0 0 12px; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 32px; + color: $color-black-500; + font-family: $font-family; @include mq(md, max) { margin-top: 0; @@ -364,23 +370,26 @@ } .srp-description { + font-family: $font-family; color: $color-gray2; - font-size: 12px; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray6; + font-family: $font-family; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black-500; letter-spacing: 0.05em; + font-size: 14px; line-height: 19px; font-weight: 500; outline: none; - padding: 12px 40px; + padding: 12px 41px; + margin: 0; transition: all 0.2s linear; &:hover { @@ -477,8 +486,9 @@ border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray3; - font-size: 12px; + color: $color-black-500; + font-size: 14px; + line-height: 16px; height: 36px; padding: 12px 8px; width: 172px; @@ -591,14 +601,16 @@ } &-totalizers { + margin: 0; padding: 0; width: 346px; .coupon-data { + margin: 0 0 10px; #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; + text-decoration: none; cursor: pointer; } } @@ -608,7 +620,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; text-decoration: none; } } @@ -717,7 +729,7 @@ font-size: 14px; line-height: 16px; color: $color-black-100; - padding: 12px 0; + padding: 10px 0; } &.info { @@ -733,11 +745,12 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + font-family: $font-family; font-size: 18px; - line-height: 21px; + line-height: 25px; + font-weight: 700; color: $color-black-100; + padding: 14px 0 17px; } } } @@ -764,25 +777,29 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 10px; + text-decoration: none; @include mq(md, max) { margin-bottom: 0px; } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-500; + + &:hover { + text-decoration: none; + cursor: auto; + } } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue-100; border: none; border-radius: 5px; display: block; @@ -790,17 +807,13 @@ transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 5); - } - &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white-500; + color: $color-black-500; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index c9b4a5e..4ac3b40 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -47,8 +47,8 @@ } } -.hide { - display: none !important; - opacity: 0; - pointer-events: none; -} +// .hide { +// display: none !important; +// opacity: 0; +// pointer-events: none; +// } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 54fd29e..97e13f5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -67,13 +67,13 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black-100; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 16px 0; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index b4e3eaa..576beb2 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,8 +16,10 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #ededed; +$color-gray7: #F0F0F0; $color-blue: #4267b2; +$color-blue-100: #00c8ff; $color-green: #4caf50; From 160bc437667f230eeac47128fd7f7509f2e2a7ae Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 16 Dec 2022 08:50:33 -0300 Subject: [PATCH 3/6] feat: adiciona scss email --- .../sass/checkout/_checkout-autenticacao.scss | 214 ++++++++++++++---- .../sass/checkout/_checkout-carrinho.scss | 213 +++++++++++------ .../sass/checkout/_checkout-pagamento.scss | 42 ++++ .../sass/checkout/_checkout-vazio.scss | 20 +- .../src/arquivos/sass/checkout/_checkout.scss | 4 - .../src/arquivos/sass/utils/_variaveis.scss | 5 + 6 files changed, 368 insertions(+), 130 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 587df19..1c7016f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,15 +1,18 @@ .checkout-container { .client-pre-email { - border-color: $color-gray4; + border-color: $color-black-500; font-family: $font-family; padding-top: 8px; .link-cart { a { - color: $color-black-100; + color: $color-black-500; font-size: 14px; + line-height: 16px; + text-transform: uppercase; &:hover { + cursor: default; color: lighen($color-black-100, 10); } } @@ -22,30 +25,47 @@ justify-content: center; h3 { - margin-bottom: 16px; + margin: 0 0 20px 0; span { - color: #303030; - font-size: 24px; + font-family: $font-family-secundary; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + color: $color-black-500; } small { - color: $color-gray4; + font-family: $font-family-secundary; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + color: $color-black-500; + padding: 0; } } } .client-email { - margin: 0 0 16px; + display: flex; + flex-direction: column; + margin: 0 0 24px; + max-width: 562px; + width: 100%; input { box-shadow: none; - color: $color-black-100; + color: $color-black-500; font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; + font-size: 12px; + line-height: 16px; + padding: 0 14px; + height: 50px; + border: 1px solid $color-black-500; box-sizing: border-box; - border-radius: 5px; + border-radius: 5px 0 0 5px; + max-width: 443px; + width: 100%; @media (max-width: 490px) { width: auto; @@ -53,12 +73,17 @@ } button { - background-color: $color-black-100; - border-radius: 5px; + background-color: $color-blue-100; + border-radius: 0 8px 8px 0; border: none; font-family: $font-family; - height: 54px; - right: 0; + font-size: 14px; + line-height: 19px; + font-weight: 700; + color: $color-black-500; + width: 126px; + height: 50px; + right: -6px; top: 0; @media (max-width: 490px) { @@ -69,19 +94,27 @@ } span.help.error { + font-family: $font-family; + font-size: 12px; + line-height: 16px; + font-weight: 700; color: red; + margin-top: 3px; } } .emailInfo { - padding: 16px; + padding: 16px 16px 27px; background-color: $color-white-500; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black-500; + border-radius: 5px; + max-width: 366px; + width: 100%; h3 { - color: #303030; - margin: 0 0 8px 0; + font-family: $font-family; + color: $color-black-500; + margin: 0 0 10px 0; } ul { @@ -89,11 +122,15 @@ li { span { - color: $color-black-100; + font-family: $font-family; + font-size: 12px; + line-height: 16px; + color: $color-black-500; + font-weight: 700; } i::before { - color: $color-black-100; + color: $color-blue-100; font-size: 1rem; opacity: 1; } @@ -112,18 +149,23 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; .accordion-heading { span { - color: #303030; - margin-bottom: 8px; + font-family: $font-family-secundary; + font-size: 16px; + line-height: 18px; + color: $color-black-100; + margin-top: 7px; + margin-bottom: 25px; padding: 0; i::before { + display: none; fill: #303030; } } @@ -146,19 +188,23 @@ /* General configurations */ .client-notice { + display: none; color: $color-black-100; } p { label { - color: $color-black-100; - font-weight: 500; + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 700; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid $color-gray10; box-shadow: none; } @@ -167,7 +213,19 @@ } } + .newsletter { + + .newsletter-text { + font-family: $font-family; + color: $color-gray9; + font-size: 12px; + line-height: 16px; + } + } + .box-client-info-pj { + display: none; + .link a#is-corporate-client, .link a#not-corporate-client { color: $color-black-100; @@ -180,21 +238,24 @@ font-weight: 500; } + .btn-submit-wrapper { + margin: 0; + } + button.submit { - border: none; - border-radius: 5px; - background: $color-black-100; - margin-top: 8px; + font-family: $font-family; + color: $color-white-500; + letter-spacing: 0.05px; + font-size: 14px; + line-height: 19px; + font-weight: 700; + width: 100%; + border-radius: 8px; + background: $color-blue-100; + margin: 45px 0 29px 0 !important; + text-transform: uppercase; outline: none; - transition: all 0.2s linear; - - &:hover { - background: lighten($color-black-100, 5); - } - - &:active { - background: darken($color-black-100, 5); - } + border: none; } /* Shipping configurations */ @@ -276,14 +337,75 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white-500; + border: 1px solid $color-gray12; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black-100, 50); + font-family: $font-family; + color: $color-black-100; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + // text-shadow: 1.3px 1px lighten($color-black-100, 50); } + + .vtex-omnishipping-1-x-addressFormPart1 { + .ship-country { + display: none; + } + } } } } } + +.hproduct { + + .badge { + display: none; + } + + img { + transform: rotateY(180deg); + } + + span { + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 12px; + line-height: 14px; + } +} + +.vtex-omnishipping-1-x-address { + div { + display: flex; + flex-direction: column; + + label { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 700; + letter-spacing: 0.05px; + margin-bottom: 3px; + } + + .input-mini { + width: 100%; + border: 1px solid $color-gray10; + border-radius: 8px; + } + + input { + width: 96.42%; + + &::placeholder { + display: none; + } + } + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index ddf319f..606d845 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -16,7 +16,7 @@ border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 16px 29px 16px 16px; margin: 0 0 48px 0; @include mq(md, max) { @@ -75,8 +75,12 @@ } #go-to-cart-button a { - color: #303030; + font-family: $font-family; + color: $color-black-500; + font-size: 12px; + line-height: 16px; text-decoration: underline; + padding-right: 17px; } .summary-totalizers { @@ -112,12 +116,14 @@ } th { + font-family: $font-family-secundary; color: $color-black-100; padding: 0 0 16px; - font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + text-align: unset; + vertical-align: unset; @include mq(md, max) { &.quantity-price, @@ -125,6 +131,36 @@ display: none; } } + + &.shipping-date { + font-size: 0; + + &::after { + content: "Frete"; + font-family: $font-family-secundary; + color: $color-black-100; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + } + + &.product-price { + font-size: 0; + + &::after { + content: "Unidade"; + font-family: $font-family-secundary; + color: $color-black-100; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + } + + &.quantity { + width: 181px; + } } .product-image { @@ -138,8 +174,9 @@ img { height: 60px; - max-width: 100%; - width: auto; + max-width: 60px; + width: 100%; + transform: rotateY(180deg); @include mq(sm, max) { height: 72px; @@ -149,7 +186,8 @@ } .product-name { - padding-right: 0; + padding-left: 16px; + width: 321px; @include mq(lg, max) { width: 250px; @@ -177,9 +215,12 @@ } td.shipping-date { + width: 147px; color: $color-gray2; font-size: 12px; line-height: 14px; + text-align: unset; + padding: 0; @include mq(md, max) { display: none; @@ -187,7 +228,11 @@ } .product-price { + text-align: unset; min-width: 100px; + width: 148px; + padding: 0; + @include mq(md, max) { min-width: 78px; } @@ -211,6 +256,10 @@ text-transform: lowercase; } } + + .price-details { + display: none; + } } td.quantity { @@ -220,7 +269,7 @@ box-sizing: border-box; display: flex; justify-content: center; - margin: 15px auto 0; + margin: 10px 0 0 0; max-height: 38px; max-width: 118px; padding: 0; @@ -305,11 +354,15 @@ } .quantity-price { + text-align: unset; + padding: 0; + @include mq(md, max) { display: none; } .total-selling-price { + text-align: unset; font-size: 14px; line-height: 19px; font-weight: 700; @@ -345,6 +398,10 @@ } } + .table td { + padding: 0; + } + .summary { .cart-more-options { margin: 0; @@ -414,51 +471,42 @@ } .srp-pickup-my-location__button { - background-color: $color-black-100; + background-color: $color-blue-100; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white-500; outline: none; width: 100%; - font-style: normal; - font-weight: 500; + font-family: $font-family; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black-100, 5); - } - - &:active { - background-color: darken($color-black-100, 5); - } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; &__wrapper { background-color: $color-white-500; border-radius: 100px; width: 100%; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px; text-transform: uppercase; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-500; border-radius: 100px; + box-shadow: 2px 2px 4px rgba($color-black-500, 0.2); } .blue { - color: $color-blue; + color: $color-black-500; } label { @@ -471,6 +519,11 @@ } .srp-postal-code { + + .ship-country { + display: none; + } + .ship-postalCode { label { font-family: $font-family; @@ -483,7 +536,7 @@ } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray8; border-radius: 5px; box-shadow: none; color: $color-black-500; @@ -495,47 +548,53 @@ } & ~ button { - background-color: $color-black-100; + background-color: $color-blue-100; + position: absolute; + right: calc(-138px - 9px); border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white-500; - font-size: 12px; height: 36px; letter-spacing: 1px; outline: none; - position: absolute; - right: -150px; top: 36px; transition: all 0.2s linear; - width: 96px; + width: 100px; + + font-size: 14px; + line-height: 19px; + font-weight: 700; + letter-spacing: 0.05px; + font-family: $font-family; text-transform: uppercase; - - &:hover { - background-color: lighten($color-black-100, 5); - } - - &:active { - background-color: darken($color-black-100, 5); - } } small a { font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + font-size: 0px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + color: $color-black-500; + + &::after { + content: "Não sei meu código postal"; + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 10px; + line-height: 12px; + text-decoration: underline; + } } span.help.error { + font-family: $font-family; color: red; font-size: 12px; + line-height: 16px; + font-weight: 700; position: absolute; left: 0; width: 100%; - top: 17px; + top: 15px; } } } @@ -603,11 +662,18 @@ &-totalizers { margin: 0; padding: 0; - width: 346px; + max-width: 354px; + width: 100%; .coupon-data { + display: block !important; margin: 0 0 10px; + #cart-link-coupon-add { + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 12px; + line-height: 14px; text-decoration: none; &:hover { text-decoration: none; @@ -642,18 +708,16 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; + margin: 0; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; color: $color-gray2; - cursor: none; + text-align: start; } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 20px; @include mq(sm, max) { span { @@ -669,14 +733,20 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; color: $color-gray4; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + height: 36px; + padding: 0; + max-width: 204px; + width: 100%; + float: left; + + &::placeholder { + padding: 0 16px; + } @include mq(sm, max) { max-width: 100%; @@ -685,17 +755,19 @@ } button { - background: $color-black-100; + background: $color-blue-100; border: none; - border-radius: 5px; - color: $color-white-500; - font-size: 12px; + border-radius: 8px; + color: $color-black-500; + font-size: 14px; + line-height: 19px; height: 36px; letter-spacing: 1px; - margin-left: 6px; + margin-left: 14px; outline: none; transition: all 0.2s linear; - width: 94px; + max-width: 133px; + width: 100%; text-transform: uppercase; @include mq(md, max) { @@ -715,7 +787,7 @@ .accordion-group { tr { - border-color: #e5e5e5; + border-color: $color-gray5; td { &.empty { @@ -724,11 +796,10 @@ &.info, &.monetary { - font-style: normal; - font-weight: normal; + font-family: $font-family; + color: $color-gray2; font-size: 14px; - line-height: 16px; - color: $color-black-100; + line-height: 19px; padding: 10px 0; } @@ -777,7 +848,7 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 10px; + margin-bottom: 15px; text-decoration: none; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..f254cf1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,10 +1,52 @@ body .container-main.container-order-form .orderform-template.active { .mini-cart { + border: 1px solid $color-gray5; + border-radius: 8px; + // padding: 25px 17px; width: 32.3242%; margin-left: unset; margin-right: 0; float: right; } + + h2 { + font-family: $font-family-secundary; + color: $color-black-100; + font-size: 16px; + line-height: 19px; + padding: 25px 0 0 17px !important; + text-align: initial; + padding: 0; + margin-bottom: 34px; + } + + .cart { + border: 0; + padding: 0; + margin: 0; + + li { + display: flex; + align-items: center; + + .description { + margin: 0; + } + + .price { + font-family: $font-family; + color: $color-black-100; + font-size: 12px; + line-height: 16px; + margin: 0; + padding-right: 17px; + } + } + } + + tr { + border-top: 1px solid $color-gray10; + } .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 4ac3b40..89f5173 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -31,18 +31,20 @@ border: 1px solid $color-black-500; border-radius: 0; transition: ease-in-out 0.2s all; - font-family: $font-family; - font-size: 14px; - line-height: 16px; - text-align: center; - color: $color-black-500; - text-transform: uppercase; + font-size: 0px; padding: 15px 65px 17px; margin: 0; + line-height: 0; - &:hover { - background: $color-gray6; - } + &::after { + content: "Continuar comprando"; + font-size: 14px; + line-height: 16px; + text-align: center; + font-family: $font-family-secundary; + color: $color-black-500; + text-transform: uppercase; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 97e13f5..f1a5066 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -55,10 +55,6 @@ body { .btn-success { background: $color-black-100; text-shadow: none; - - &:hover { - background: lighten($color-black-100, 15%); - } } .emailInfo h3 { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 576beb2..276ca6a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -17,6 +17,11 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #ededed; $color-gray7: #F0F0F0; +$color-gray8: #c4c4c4; +$color-gray9: #808080; +$color-gray10: #e0e0e0; +$color-gray11: #828282; +$color-gray12: #292929; $color-blue: #4267b2; $color-blue-100: #00c8ff; From 19f8885e9e1efe9a0c1251466f4c23b69a18276c Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Sat, 17 Dec 2022 14:50:12 -0300 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20displ?= =?UTF-8?q?ayTitle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/js/components/CheckoutUI.js | 36 +- .../sass/checkout/_checkout-autenticacao.scss | 358 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 7 +- .../sass/checkout/_checkout-pagamento.scss | 14 +- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 5 files changed, 371 insertions(+), 45 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..13180bb 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -32,13 +32,12 @@ export default class CheckoutUI { toggleFooterDropdown(event) { event.target.classList.toggle("closed"); - event.target.nextElementSibling.classList.toggle( - "dropdown__content--closed" - ); + event.target.nextElementSibling.classList.toggle("dropdown__content--closed"); } init() { this.configThumb(); + this.displayTitle(); waitForEl(".product-image img", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); } @@ -56,14 +55,27 @@ export default class CheckoutUI { resizeImages() { $(".product-image img").each((i, el) => { const $el = $(el); - $el.attr( - "src", - alterarTamanhoImagemSrcVtex( - $el.attr("src"), - this.width, - this.height - ) - ); + $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height)); }); } -} + + async displayTitle() { + const orderForm = await window.vtexjs.checkout.getOrderForm(); + const items = orderForm.items.length; + const cartId = document.querySelector("#cart-title"); + + $(window).on("orderFormUpdated.vtex", (evt, oF) => { + if (oF.items.length <= 0) { + cartId.style.display = "none"; + } else { + cartId.style.display = "block"; + } + if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") { + cartId.style.display = "none"; + } + }); + if (items === 0) { + cartId.style.display = "none"; + } + } +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 1c7016f..bc0b4a5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -83,7 +83,7 @@ color: $color-black-500; width: 126px; height: 50px; - right: -6px; + right: 0px; top: 0; @media (max-width: 490px) { @@ -114,6 +114,9 @@ h3 { font-family: $font-family; color: $color-black-500; + font-size: 12px; + line-height: 16px; + font-weight: 700; margin: 0 0 10px 0; } @@ -145,6 +148,25 @@ } } + .client-profile-data { + .accordion-heading { + .accordion-toggle { + span { + font-size: 0 !important; + + &::after { + font-family: $font-family-secundary; + color: $color-black-100; + content: "Identificação"; + font-size: 16px; + line-height: 19px; + float: left; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { @@ -153,8 +175,18 @@ border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + max-width: 297px; + width: 100%; .accordion-heading { + + .accordion-toggle-active { + + i::after { + display: none; + } + } + span { font-family: $font-family-secundary; font-size: 16px; @@ -165,18 +197,31 @@ padding: 0; i::before { - display: none; - fill: #303030; + content: ""; + + } + + i::after { + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: right; + cursor: pointer; } } a { + display: flex; + opacity: 0; align-items: center; background-color: #303030; border-radius: 8px; border: none; color: $color-white-500; - display: flex; justify-content: center; padding: 6px 5px 6px 8px; } @@ -189,27 +234,145 @@ .client-notice { display: none; - color: $color-black-100; + + // &::after { + // position: absolute; + // content: "Identificação"; + // font-family: $font-family-secundary; + // font-size: 16px; + // line-height: 19px; + // color: $color-black-500; + // top: 0; + // } } - p { - label { + .ship-country { + display: none; + } + + .ship-postalCode { + display: flex; + flex-direction: column; + + label { font-family: $font-family; color: $color-gray2; font-size: 12px; line-height: 16px; - font-weight: 700; + font-weight: 700; + } + + input { + border: 1px solid $color-gray8; + border-radius: 8px; + width: 100%; + max-width: 270px; + margin-bottom: 10px; + } + + small { + font-family: $font-family; + color: $color-black-100; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + margin: 0; + } + } + + p { + margin: 0; + padding: 0; + + label { + + // input { + // display: none; + // } + + // &.checkbox { + // position: relative; + // padding-left: 26px; + + // .newsletter-text { + // &::before { + // position: absolute; + // content: ""; + // top: 0; + // left: 0; + // width: 16px; + // height: 16px; + // border: 1px solid $color-gray11; + // border-radius: 3px; + + // } + + // .newsletter-text:checked + .newsletter-text::before { + // // content: ''; + // background: $color-blue-100; + // } + // } + + font-family: $font-family; + color: $color-gray2; + font-size: 14px; + line-height: 19px; + font-weight: 400; + } + + .btn-go-to-payment { + margin-top: 0; + } } select, input { + font-family: $font-family; + color: $color-gray9; + font-size: 14px; + line-height: 19px; + font-weight: 400; border-radius: 5px; border: 1px solid $color-gray10; box-shadow: none; + padding: 0 12px; } + .input-xlarge { + max-width: 271px; + width: 100%; + height: 40px; + margin-bottom: 16px; + } + + .input-small { + max-width: 115px; + width: 100%; + height: 40px; + margin-bottom: 16px; + } + + #client-first-name, + #client-document { + margin-right: 15px; + } + + [type="checkbox"] { + width: 18px; + height: 18px; + border: 1px solid $color-gray11; + padding-right: 8px; + margin-top: 0px; + } .help.error { + display: none !important; + font-family: $font-family; color: red; + font-size: 12px; + line-height: 16px; + font-weight: 700; + margin: 0; + padding: 0; } } @@ -220,6 +383,7 @@ color: $color-gray9; font-size: 12px; line-height: 16px; + padding-left: 8px; } } @@ -252,7 +416,7 @@ width: 100%; border-radius: 8px; background: $color-blue-100; - margin: 45px 0 29px 0 !important; + margin: 45px 0 29px 0; text-transform: uppercase; outline: none; border: none; @@ -268,20 +432,34 @@ .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + font-family: $font-family; + color: $color-gray2; font-size: 14px; - font-weight: 500; + line-height: 19px; + font-weight: 700; + padding-bottom: 10px; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray10; + border-radius: 8px; + + span { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } label { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; background-color: $color-white-500; box-shadow: none; - color: #303030; - padding: 8px 12px; + padding: 14px 12px; svg path { fill: #d8c8ac; @@ -291,9 +469,13 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05px; + font-weight: 700; + padding-bottom: 10px; } .shp-summary-group-info { @@ -302,19 +484,34 @@ .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + border: 1px solid $color-gray10; + border-radius: 8px; padding: 12px; + &::before { + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 8px 9.4px 0 0; + } + @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-family: $font-family; + color: $color-blue-100; + font-size: 12px; + line-height: 16px; + font-weight: 400; + text-transform: lowercase; + text-decoration: none; } } @@ -331,11 +528,79 @@ padding-left: 16px; } + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray10; + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0.05px; + } + + .vtex-omnishipping-1-x-svg { + opacity: 0; + + &::before { + border: 1px solid $color-gray8; + width: 16px; + height: 16px; + } + } + + .vtex-omnishipping-1-x-addressSummary { + span { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + } + } + + .vtex-omnishipping-1-x-address { + label { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-weight: 700; + } + + .input-large { + border: 1px solid $color-gray10; + border-radius: 8px; + max-width: 294px; + width: 100%; + height: 33px; + padding: 0; + } + + .input-xlarge { + max-width: 294px; + width: 100%; + height: 33px; + margin-bottom: 16px; + } + } + + .btn-ask-for-geolocation-cta { + color: $color-white-500; + background: $color-blue-100; + } + .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; } + .vtex-omnishipping-1-x-warning { + border-color: $color-gray10; + } + .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: $color-white-500; border: 1px solid $color-gray12; @@ -348,18 +613,52 @@ text-transform: uppercase; font-size: 14px; line-height: 19px; + border-radius: 100px; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + font-family: $font-family; + color: $color-gray8; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + border-radius: 100px; // text-shadow: 1.3px 1px lighten($color-black-100, 50); } - .vtex-omnishipping-1-x-addressFormPart1 { - .ship-country { - display: none; + .vtex-omnishipping-1-x-addressFormPart1 {} + + .ship-number { + .input-mini { + max-width: 270px; + width: 100%; + height: 33px; + margin-bottom: 15px; + } + } + + .ship-complement { + .input-large { + max-width: 270px; + width: 100%; + height: 33px; + padding: 0 12px; + margin-bottom: 15px; + } + } + + .ship-receiverName { + .input-xlarge { + max-width: 270px; + width: 100%; + height: 33px; + margin-bottom: 15px; } } } } } -} + .hproduct { @@ -369,6 +668,9 @@ img { transform: rotateY(180deg); + max-width: 60px; + width: 60px; + height: 60px; } span { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 606d845..d731c61 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -800,7 +800,7 @@ color: $color-gray2; font-size: 14px; line-height: 19px; - padding: 10px 0; + margin: 25px 0; } &.info { @@ -821,7 +821,7 @@ line-height: 25px; font-weight: 700; color: $color-black-100; - padding: 14px 0 17px; + padding: 0; } } } @@ -831,7 +831,8 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + max-width: 354px; + width: 100%; @include mq(md, max) { padding: 0 16px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index f254cf1..b374b2d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -3,23 +3,33 @@ body .container-main.container-order-form .orderform-template.active { border: 1px solid $color-gray5; border-radius: 8px; // padding: 25px 17px; - width: 32.3242%; + height: 397px; + max-width: 331px; + width: 100%; margin-left: unset; margin-right: 0; float: right; } + .span4 { + padding: 24px 17px; + } + h2 { font-family: $font-family-secundary; color: $color-black-100; font-size: 16px; line-height: 19px; - padding: 25px 0 0 17px !important; text-align: initial; padding: 0; margin-bottom: 34px; } + .ask-for-geolocation-title { + padding: 0; + margin: 0; + } + .cart { border: 0; padding: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 276ca6a..638c8ad 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $color-black-100: #292929; $color-black-500: #000000; $color-white-500: #fff; +$color-white-100: #f5f5f5; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; From d08b6b6f9a8b1deadd842d1588aff1ecea5385ac Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Sun, 18 Dec 2022 17:55:16 -0300 Subject: [PATCH 5/6] feat: adiciona pagina pagamento --- .../src/arquivos/js/components/CheckoutUI.js | 2 +- .../sass/checkout/_checkout-autenticacao.scss | 206 +++++++++++++----- .../sass/checkout/_checkout-carrinho.scss | 55 ++++- .../sass/checkout/_checkout-pagamento.scss | 113 +++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 4 + 5 files changed, 313 insertions(+), 67 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index 13180bb..722e4e3 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -78,4 +78,4 @@ export default class CheckoutUI { cartId.style.display = "none"; } } -} \ No newline at end of file +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index bc0b4a5..7ddca24 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -70,6 +70,10 @@ @media (max-width: 490px) { width: auto; } + + &::placeholder { + color: $color-black-500; + } } button { @@ -153,7 +157,7 @@ .accordion-toggle { span { font-size: 0 !important; - + &::after { font-family: $font-family-secundary; color: $color-black-100; @@ -175,8 +179,7 @@ border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; - max-width: 297px; - width: 100%; + width: 90.06%; .accordion-heading { @@ -230,6 +233,16 @@ .accordion-inner { padding: 0; + .box-step { + + .shipping-summary-info { + font-family: $font-family; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + } + } + /* General configurations */ .client-notice { @@ -281,6 +294,10 @@ } p { + font-size: 14px; + line-height: 19px; + font-family: $font-family; + color: $color-gray2; margin: 0; padding: 0; @@ -338,9 +355,46 @@ padding: 0 12px; } + p { + [type="checkbox"] { + display: none; + + &:checked + .newsletter-text::after { + content: ""; + width: 12px; + display: block; + position: absolute; + top: 3px; + border-radius: 3px; + left: 3px; + height: 12px; + background-color: $color-blue-100; + } + } + } + + label { + &.checkbox { + position: relative; + padding-left: 26px; + + .newsletter-text { + &::before { + position: absolute; + content: ""; + border: 1px solid #828282; + border-radius: 3px; + width: 16px; + height: 16px; + top: 0; + left: 0; + } + } + } + } + .input-xlarge { - max-width: 271px; - width: 100%; + width: 91.24%; height: 40px; margin-bottom: 16px; } @@ -357,13 +411,14 @@ margin-right: 15px; } - [type="checkbox"] { - width: 18px; - height: 18px; - border: 1px solid $color-gray11; - padding-right: 8px; - margin-top: 0px; - } + // [type="checkbox"] { + // width: 18px; + // height: 18px; + // border: 1px solid $color-gray11; + // padding-right: 8px; + // margin-top: 0px; + // } + .help.error { display: none !important; font-family: $font-family; @@ -383,7 +438,6 @@ color: $color-gray9; font-size: 12px; line-height: 16px; - padding-left: 8px; } } @@ -457,7 +511,6 @@ color: $color-gray2; font-size: 12px; line-height: 16px; - background-color: $color-white-500; box-shadow: none; padding: 14px 12px; @@ -478,42 +531,59 @@ padding-bottom: 10px; } + .vtex-omnishipping-1-x-SummaryItemContent { + align-items: flex-end; + } + + .shp-summary-package { + padding-left: 0 !important; + } + .shp-summary-group-info { - border-color: $color-gray4; + border-right: none; } - .address-summary { - background: none; - border: 1px solid $color-gray10; - border-radius: 8px; - padding: 12px; + .shipping-summary-placeholder { + .link-change-shipping { + display: none; + } + } - &::before { - content: ""; - display: block; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - width: 20px; - height: 20px; - float: left; - margin: 8px 9.4px 0 0; + .vtex-omnishipping-1-x-addressSummaryActive { + .address-summary { + background: none; + border: 1px solid $color-gray10; + border-radius: 8px; + padding: 12px; + + &::before { + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 8px 9.4px 0 0; + } + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + font-family: $font-family; + color: $color-blue-100; + font-size: 12px; + line-height: 16px; + font-weight: 400; + text-transform: lowercase; + text-decoration: none; + } } - @include mq(md, max) { - background-position: 8px 9px; - } - - a { - font-family: $font-family; - color: $color-blue-100; - font-size: 12px; - line-height: 16px; - font-weight: 400; - text-transform: lowercase; - text-decoration: none; - } - } + } .shp-summary-group-price, .shp-summary-package { @@ -541,7 +611,36 @@ letter-spacing: 0.05px; } + .shp-lean { + .shp-lean-option { + + &::before { + position: relative; + content: ""; + border: 1px solid #828282; + border-radius: 3px; + width: 16px; + height: 16px; + top: 0; + left: 0; + } + } + + // .shp-lean-option-active { + // &::after { + // content: ""; + // width: 12px; + // display: block; + // position: absolute; + // left: 36.6%; + // border-radius: 3px; + // height: 12px; + // background-color: $color-blue-100; + // } + // } + .vtex-omnishipping-1-x-svg { + display: none; opacity: 0; &::before { @@ -550,6 +649,7 @@ height: 16px; } } + } .vtex-omnishipping-1-x-addressSummary { span { @@ -599,6 +699,12 @@ .vtex-omnishipping-1-x-warning { border-color: $color-gray10; + .onda-v1 { + font-family: $font-family; + color: $color-black-500; + font-size: 12px; + line-height: 16px; + } } .vtex-omnishipping-1-x-deliveryChannelsToggle { @@ -630,8 +736,8 @@ .ship-number { .input-mini { - max-width: 270px; - width: 100%; + max-width: unset; + width: 90.91%; height: 33px; margin-bottom: 15px; } @@ -639,8 +745,8 @@ .ship-complement { .input-large { - max-width: 270px; - width: 100%; + max-width: unset; + width: 90.91%; height: 33px; padding: 0 12px; margin-bottom: 15px; @@ -649,8 +755,8 @@ .ship-receiverName { .input-xlarge { - max-width: 270px; - width: 100%; + max-width: unset; + width: 90.91%; height: 33px; margin-bottom: 15px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index d731c61..e8f4c39 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -26,12 +26,16 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { font-family: $font-family; width: 100%; + height: 397px !important; + h2 { background: $color-white-500; border: none; @@ -64,7 +68,7 @@ .shipping-date, .price { - color: #7d7d7d; + display: none; } } } @@ -80,7 +84,7 @@ font-size: 12px; line-height: 16px; text-decoration: underline; - padding-right: 17px; + // padding-right: 17px; } .summary-totalizers { @@ -125,15 +129,13 @@ text-align: unset; vertical-align: unset; - @include mq(md, max) { - &.quantity-price, - &.shipping-date { - display: none; - } + &.product { + width: 40.64%; } &.shipping-date { font-size: 0; + width: 15.05%; &::after { content: "Frete"; @@ -147,6 +149,7 @@ &.product-price { font-size: 0; + width: 15.15%; &::after { content: "Unidade"; @@ -159,7 +162,14 @@ } &.quantity { - width: 181px; + width: 18.53%; + } + + @include mq(md, max) { + &.quantity-price, + &.shipping-date { + display: none; + } } } @@ -186,8 +196,13 @@ } .product-name { - padding-left: 16px; - width: 321px; + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 12px; + line-height: 14px; + white-space: unset; + // padding-left: 16px; + // width: 321px; @include mq(lg, max) { width: 250px; @@ -198,6 +213,7 @@ font-size: 12px; line-height: 14px; text-decoration: none; + padding-left: 16px; &:hover { text-decoration: none; @@ -814,14 +830,29 @@ } tfoot { - td.info, - td.monetary { + font-family: $font-family; + font-size: 18px; + line-height: 25px; + font-weight: 700; + color: $color-black-100; + + td.info { font-family: $font-family; font-size: 18px; line-height: 25px; font-weight: 700; color: $color-black-100; padding: 0; + margin-top: 12px; + margin-bottom: 0; + } + + td.monetary { + font-family: $font-family; + font-size: 18px; + line-height: 25px; + font-weight: 700; + color: $color-black-100; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index b374b2d..556ed3e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,15 +4,26 @@ body .container-main.container-order-form .orderform-template.active { border-radius: 8px; // padding: 25px 17px; height: 397px; - max-width: 331px; - width: 100%; + width: 32.37%; margin-left: unset; margin-right: 0; float: right; + + .payment-confirmation-wrap { + #payment-data-submit { + font-family: $font-family; + color: $color-white-500; + font-size: 14px; + line-height: 19px; + font-weight: 700; + background: $color-green2; + border-radius: 8px; + } + } } .span4 { - padding: 24px 17px; + padding: 24px 17px 22px; } h2 { @@ -46,10 +57,11 @@ body .container-main.container-order-form .orderform-template.active { .price { font-family: $font-family; color: $color-black-100; + font-weight: 400; font-size: 12px; line-height: 16px; margin: 0; - padding-right: 17px; + // padding-right: 17px; } } } @@ -60,4 +72,97 @@ body .container-main.container-order-form .orderform-template.active { .orderform-template-holder { width: 66.1132%; } + + .payment-data { + .active { + width: unset; + padding: 14.5px; + } + } + + .link-gift-card { + #show-gift-card-group { + display: none; + } + } + + .payment-body { + .accordion-inner { + .box-step { + display: flex; + + .form-step { + display: flex; + + .payment-group { + margin: 0; + .payment-group-list-btn { + width: unset; + } + .pg-deposito, + .pg-transferencia-bancaria, + .pg-money, + .pg-promisory---monica, + .pg-desconto-em-folha, + #payment-group-creditControlPaymentGroup, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + #payment-group-PSEPaymentGroup, + #payment-group-SPEIPaymentGroup, + [data-name="Bancolombia Transfer"] { + display: none; + } + + .payment-group-list-btn { + + span { + background-image: none !important; + font-family: $font-family; + color: $color-black-200; + font-size: 14px; + line-height: 24px; + text-align: center; + padding: 13px; + } + + a { + background: $color-gray3; + border: 1px solid $color-black-500; + border-radius: 6px; + margin-bottom: 12px; + padding: 0; + width: 209px; + text-decoration: none; + margin-left: 0; + } + + .active { + border: 1px solid $color-red-100; + background: rgba(220, 221, 227, 0.3); + margin-left: 0px; + + span { + color: $color-red-100; + } + } + } + } + + .steps-view { + // width: 363px; + width: 100%; + margin-left: 40px; + } + } + } + } + } +} + +.PaymentCardHolderDocument { + display: none; +} + +.SecurityEnvironmentIcon { + margin-bottom: 5px; } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 638c8ad..dc6734e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black-100: #292929; +$color-black-200: #58595b; $color-black-500: #000000; $color-white-500: #fff; @@ -24,10 +25,13 @@ $color-gray10: #e0e0e0; $color-gray11: #828282; $color-gray12: #292929; +$color-red-100: #F15A31; + $color-blue: #4267b2; $color-blue-100: #00c8ff; $color-green: #4caf50; +$color-green2: #298541; /* Grid breakpoints */ $grid-breakpoints: ( From 9eda1d37b2a0e3f2ac5b770d4b6e8558da076da7 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Mon, 19 Dec 2022 05:11:45 -0300 Subject: [PATCH 6/6] feat: adiciona responsividade meu carrinho --- .../sass/checkout/_checkout-autenticacao.scss | 1024 ++++++++--------- .../sass/checkout/_checkout-carrinho.scss | 227 ++-- .../sass/checkout/_checkout-pagamento.scss | 319 ++--- .../src/arquivos/sass/checkout/_checkout.scss | 12 + .../src/arquivos/sass/partials/_footer.scss | 4 - .../src/arquivos/sass/partials/_header.scss | 2 - .../src/arquivos/sass/utils/_variaveis.scss | 2 + 7 files changed, 795 insertions(+), 795 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 7ddca24..b890b96 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,156 +1,158 @@ .checkout-container { - .client-pre-email { - border-color: $color-black-500; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-black-500; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black-500; - font-size: 14px; + .link-cart { + a { + color: $color-black-500; + font-size: 14px; + font-weight: 400; line-height: 16px; text-transform: uppercase; - &:hover { + &:hover { cursor: default; - color: lighen($color-black-100, 10); - } - } - } + color: lighen($color-black-100, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { + h3 { margin: 0 0 20px 0; - span { + span { font-family: $font-family-secundary; - font-size: 20px; + font-size: 20px; + font-weight: 400; line-height: 23px; text-transform: uppercase; - color: $color-black-500; - } + color: $color-black-500; + } - small { + small { font-family: $font-family-secundary; - font-size: 20px; + font-size: 20px; line-height: 23px; text-transform: uppercase; - color: $color-black-500; + color: $color-black-500; padding: 0; - } - } - } + } + } + } - .client-email { + .client-email { display: flex; flex-direction: column; - margin: 0 0 24px; + margin: 0 0 24px; max-width: 562px; width: 100%; - input { - box-shadow: none; - color: $color-black-500; - font-family: $font-family; + input { + box-shadow: none; + color: $color-black-500; + font-family: $font-family; font-size: 12px; line-height: 16px; - padding: 0 14px; + padding: 0 14px; height: 50px; - border: 1px solid $color-black-500; - box-sizing: border-box; - border-radius: 5px 0 0 5px; + border: 1px solid $color-black-500; + box-sizing: border-box; + border-radius: 5px 0 0 5px; max-width: 443px; width: 100%; - @media (max-width: 490px) { - width: auto; - } + @media (max-width: 490px) { + width: auto; + } &::placeholder { color: $color-black-500; } - } + } - button { - background-color: $color-blue-100; - border-radius: 0 8px 8px 0; - border: none; - font-family: $font-family; + button { + background-color: $color-blue-100; + border-radius: 0 8px 8px 0; + border: none; + font-family: $font-family; font-size: 14px; line-height: 19px; font-weight: 700; color: $color-black-500; width: 126px; - height: 50px; - right: 0px; - top: 0; + height: 50px; + right: 0px; + top: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { + span.help.error { font-family: $font-family; font-size: 12px; line-height: 16px; font-weight: 700; - color: red; + color: red; margin-top: 3px; - } - } + } + } - .emailInfo { - padding: 16px 16px 27px; - background-color: $color-white-500; - border: 1px solid $color-black-500; - border-radius: 5px; + .emailInfo { + padding: 16px 16px 27px; + background-color: $color-white-500; + border: 1px solid $color-black-500; + border-radius: 5px; max-width: 366px; width: 100%; - h3 { + h3 { font-family: $font-family; - color: $color-black-500; + color: $color-black-500; font-size: 12px; line-height: 16px; font-weight: 700; - margin: 0 0 10px 0; - } + margin: 0 0 10px 0; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { + li { + span { font-family: $font-family; font-size: 12px; line-height: 16px; - color: $color-black-500; + color: $color-black-500; font-weight: 700; - } + } - i::before { - color: $color-blue-100; - font-size: 1rem; - opacity: 1; - } - } - } + i::before { + color: $color-blue-100; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - color: $color-black-100; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $color-black-100; + font-size: 6rem; + opacity: 0.5; + } + } + } .client-profile-data { .accordion-heading { @@ -171,38 +173,35 @@ } } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 8px; - border: 1px solid $color-gray3; - font-family: $font-family; - padding: 16px; - width: 90.06%; - - .accordion-heading { + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 8px; + border: 1px solid $color-gray3; + font-family: $font-family; + padding: 16px; + // width: 90.06%; + .accordion-heading { .accordion-toggle-active { - i::after { display: none; } } - span { + span { font-family: $font-family-secundary; font-size: 16px; line-height: 18px; - color: $color-black-100; + color: $color-black-100; margin-top: 7px; - margin-bottom: 25px; - padding: 0; + margin-bottom: 25px; + padding: 0; - i::before { + i::before { content: ""; - - } + } i::after { content: ""; @@ -214,27 +213,34 @@ height: 20px; float: right; cursor: pointer; - } - } + } + } - a { + a { display: flex; opacity: 0; - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white-500; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white-500; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - .accordion-inner { - padding: 0; + .accordion-inner { + padding: 0; + + p { + input { + box-sizing: border-box; + width: 100%; + max-width: 100%; + } + } .box-step { - .shipping-summary-info { font-family: $font-family; font-size: 14px; @@ -243,9 +249,9 @@ } } - /* General configurations */ + /* General configurations */ - .client-notice { + .client-notice { display: none; // &::after { @@ -257,7 +263,7 @@ // color: $color-black-500; // top: 0; // } - } + } .ship-country { display: none; @@ -293,7 +299,7 @@ } } - p { + p { font-size: 14px; line-height: 19px; font-family: $font-family; @@ -301,8 +307,7 @@ margin: 0; padding: 0; - label { - + label { // input { // display: none; // } @@ -334,440 +339,413 @@ color: $color-gray2; font-size: 14px; line-height: 19px; - font-weight: 400; - } - - .btn-go-to-payment { - margin-top: 0; - } - } - - select, - input { - font-family: $font-family; - color: $color-gray9; - font-size: 14px; - line-height: 19px; - font-weight: 400; - border-radius: 5px; - border: 1px solid $color-gray10; - box-shadow: none; - padding: 0 12px; - } - - p { - [type="checkbox"] { - display: none; - - &:checked + .newsletter-text::after { - content: ""; - width: 12px; - display: block; - position: absolute; - top: 3px; - border-radius: 3px; - left: 3px; - height: 12px; - background-color: $color-blue-100; - } - } + font-weight: 400; } - label { - &.checkbox { - position: relative; - padding-left: 26px; - - .newsletter-text { - &::before { - position: absolute; - content: ""; - border: 1px solid #828282; - border-radius: 3px; - width: 16px; - height: 16px; - top: 0; - left: 0; - } - } - } - } - - .input-xlarge { - width: 91.24%; - height: 40px; - margin-bottom: 16px; - } - - .input-small { - max-width: 115px; - width: 100%; - height: 40px; - margin-bottom: 16px; - } - - #client-first-name, - #client-document { - margin-right: 15px; - } - - // [type="checkbox"] { - // width: 18px; - // height: 18px; - // border: 1px solid $color-gray11; - // padding-right: 8px; - // margin-top: 0px; - // } - - .help.error { - display: none !important; - font-family: $font-family; - color: red; - font-size: 12px; - line-height: 16px; - font-weight: 700; - margin: 0; - padding: 0; - } - } - - .newsletter { - - .newsletter-text { - font-family: $font-family; - color: $color-gray9; - font-size: 12px; - line-height: 16px; + .btn-go-to-payment { + margin-top: 0; } } - .box-client-info-pj { - display: none; - - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black-100; - font-weight: 500; - text-decoration: underline; - } - } - - .state-inscription-box span { - font-weight: 500; - } - - .btn-submit-wrapper { - margin: 0; - } - - button.submit { + select, + input { font-family: $font-family; - color: $color-white-500; - letter-spacing: 0.05px; + color: $color-black-100; + font-size: 14px; + line-height: 19px; + font-weight: 400; + border-radius: 5px; + border: 1px solid $color-gray8; + box-shadow: none; + padding: 0 12px; + } + + p { + [type="checkbox"] { + display: none; + + &:checked + .newsletter-text::after { + content: ""; + width: 12px; + display: block; + position: absolute; + top: 3px; + border-radius: 3px; + left: 3px; + height: 12px; + background-color: $color-blue-100; + } + } + } + + label { + &.checkbox { + position: relative; + padding-left: 26px; + + .newsletter-text { + &::before { + position: absolute; + content: ""; + border: 1px solid #828282; + border-radius: 3px; + width: 16px; + height: 16px; + top: 0; + left: 0; + } + } + } + } + + .input-xlarge { + height: 40px; + margin-bottom: 16px; + } + + .input-small { + height: 40px; + margin-bottom: 16px; + } + + p.client-first-name, + p.client-document { + width: calc(50% - 15px); + margin-right: 15px; + } + + p.client-last-name, + p.client-phone { + width: 50%; + } + + .help.error { + display: none !important; + font-family: $font-family; + color: red; + font-size: 12px; + line-height: 16px; + font-weight: 700; + margin: 0; + padding: 0; + } + } + + .newsletter { + .newsletter-text { + font-family: $font-family; + color: $color-gray10; + font-size: 12px; + line-height: 16px; + } + } + + .box-client-info-pj { + display: none; + + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black-100; + font-weight: 500; + text-decoration: underline; + } + } + + .state-inscription-box span { + font-weight: 500; + } + + .btn-submit-wrapper { + margin: 0; + } + + button.submit { + font-family: $font-family; + color: $color-white-500; + letter-spacing: 0.05px; + font-size: 14px; + line-height: 19px; + font-weight: 700; + width: 100%; + border-radius: 8px; + background: $color-blue-100; + margin: 45px 0 29px 0; + text-transform: uppercase; + outline: none; + border: none; + } + + /* Shipping configurations */ + + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + + .vtex-omnishipping-1-x-deliveryGroup { + p { + font-family: $font-family; + color: $color-gray2; font-size: 14px; line-height: 19px; font-weight: 700; - width: 100%; - border-radius: 8px; - background: $color-blue-100; - margin: 45px 0 29px 0; - text-transform: uppercase; - outline: none; - border: none; - } - - /* Shipping configurations */ - - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - - .vtex-omnishipping-1-x-deliveryGroup { - p { - font-family: $font-family; - color: $color-gray2; - font-size: 14px; - line-height: 19px; - font-weight: 700; - padding-bottom: 10px; - } - - .shp-lean { - border: 1px solid $color-gray10; - border-radius: 8px; - - span { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - font-weight: 400; - } - - label { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - box-shadow: none; - padding: 14px 12px; - - svg path { - fill: #d8c8ac; - } - } - } - } - - .delivery-address-title { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05px; - font-weight: 700; padding-bottom: 10px; - } - - .vtex-omnishipping-1-x-SummaryItemContent { - align-items: flex-end; } + } - .shp-summary-package { - padding-left: 0 !important; - } + .delivery-address-title { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05px; + font-weight: 700; + padding-bottom: 10px; + } - .shp-summary-group-info { - border-right: none; - } + .vtex-omnishipping-1-x-SummaryItemContent { + align-items: flex-end; + } - .shipping-summary-placeholder { - .link-change-shipping { - display: none; - } - } + .shp-summary-package { + padding-left: 0 !important; + } - .vtex-omnishipping-1-x-addressSummaryActive { - .address-summary { - background: none; - border: 1px solid $color-gray10; - border-radius: 8px; - padding: 12px; + .shp-summary-group-info { + border-right: none; + } - &::before { - content: ""; - display: block; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - width: 20px; - height: 20px; - float: left; - margin: 8px 9.4px 0 0; - } - - @include mq(md, max) { - background-position: 8px 9px; - } - - a { - font-family: $font-family; - color: $color-blue-100; - font-size: 12px; - line-height: 16px; - font-weight: 400; - text-transform: lowercase; - text-decoration: none; - } - } - - } - - .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-leanShippingText { - border-right: 1px solid $color-gray10; - } - - .vtex-omnishipping-1-x-leanShippingTextLabel { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - font-weight: 400; - letter-spacing: 0.05px; - } - - .shp-lean { - .shp-lean-option { - - &::before { - position: relative; - content: ""; - border: 1px solid #828282; - border-radius: 3px; - width: 16px; - height: 16px; - top: 0; - left: 0; - } - } - - // .shp-lean-option-active { - // &::after { - // content: ""; - // width: 12px; - // display: block; - // position: absolute; - // left: 36.6%; - // border-radius: 3px; - // height: 12px; - // background-color: $color-blue-100; - // } - // } - - .vtex-omnishipping-1-x-svg { + .shipping-summary-placeholder { + .link-change-shipping { display: none; - opacity: 0; + } + } + + .vtex-omnishipping-1-x-addressSummaryActive { + .address-summary { + background: none; + border: 1px solid $color-gray8; + border-radius: 8px; + padding: 12px; &::before { - border: 1px solid $color-gray8; - width: 16px; - height: 16px; + content: ""; + display: block; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 8px 9.4px 0 0; + } + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + font-family: $font-family; + color: $color-blue-100; + font-size: 12px; + line-height: 16px; + font-weight: 400; + text-transform: lowercase; + text-decoration: none; + float: right; } } } - .vtex-omnishipping-1-x-addressSummary { - span { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - } + .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-leanShippingText { + border-right: 1px solid $color-gray8; + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + font-family: $font-family; + color: $color-gray2; + font-size: 12px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0.05px; + } + + .vtex-omnishipping-1-x-option:hover, + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: #f2f2f2; + } + + .shp-option-icon { + position: relative; + + svg { + display: none; } - .vtex-omnishipping-1-x-address { - label { - font-family: $font-family; - color: $color-gray2; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.05em; - font-weight: 700; - } - - .input-large { - border: 1px solid $color-gray10; - border-radius: 8px; - max-width: 294px; - width: 100%; - height: 33px; - padding: 0; - } - - .input-xlarge { - max-width: 294px; - width: 100%; - height: 33px; - margin-bottom: 16px; - } + &::before { + display: block; + content: ""; + border: 1px solid #828282; + border-radius: 3px; + width: 16px; + height: 16px; + top: 0; + left: 0; } + } - .btn-ask-for-geolocation-cta { - color: $color-white-500; - background: $color-blue-100; + .shp-lean-option-active .shp-option-icon { + &::after { + display: block; + content: ""; + width: 12px; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 3px; + height: 12px; + background-color: $color-blue-100; } + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } - - .vtex-omnishipping-1-x-warning { - border-color: $color-gray10; - .onda-v1 { - font-family: $font-family; - color: $color-black-500; - font-size: 12px; - line-height: 16px; - } - } - - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: $color-white-500; - border: 1px solid $color-gray12; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - } - - .vtex-omnishipping-1-x-deliveryOptionActive { + .vtex-omnishipping-1-x-addressSummary { + span { font-family: $font-family; - color: $color-black-100; - text-transform: uppercase; - font-size: 14px; - line-height: 19px; - border-radius: 100px; + color: $color-gray2; + font-size: 12px; + line-height: 16px; } + } - .vtex-omnishipping-1-x-deliveryOptionInactive { + .vtex-omnishipping-1-x-address { + label { font-family: $font-family; - color: $color-gray8; - text-transform: uppercase; - font-size: 14px; - line-height: 19px; - border-radius: 100px; - // text-shadow: 1.3px 1px lighten($color-black-100, 50); - } - - .vtex-omnishipping-1-x-addressFormPart1 {} - - .ship-number { - .input-mini { - max-width: unset; - width: 90.91%; - height: 33px; - margin-bottom: 15px; - } + color: $color-gray2; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + font-weight: 700; } - .ship-complement { - .input-large { - max-width: unset; - width: 90.91%; - height: 33px; - padding: 0 12px; - margin-bottom: 15px; - } + .input-large { + border: 1px solid $color-gray8; + border-radius: 8px; + max-width: 294px; + width: 100%; + height: 33px; + padding: 0; } - .ship-receiverName { - .input-xlarge { - max-width: unset; - width: 90.91%; - height: 33px; - margin-bottom: 15px; - } + .input-xlarge { + max-width: 294px; + width: 100%; + height: 33px; + margin-bottom: 16px; } - } - } - } + } + .btn-ask-for-geolocation-cta { + color: $color-white-500; + background: $color-blue-100; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-warning { + border-color: $color-gray10; + .onda-v1 { + font-family: $font-family; + color: $color-black-500; + font-size: 12px; + line-height: 16px; + } + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: $color-white-500; + border: 1px solid $color-black-100; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + font-family: $font-family; + color: $color-black-100; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + border-radius: 100px; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + font-family: $font-family; + color: $color-gray8; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + border-radius: 100px; + // text-shadow: 1.3px 1px lighten($color-black-100, 50); + } + + .vtex-omnishipping-1-x-addressFormPart1 { + } + + .ship-number { + .input-mini { + max-width: unset; + width: 90.91%; + height: 33px; + margin-bottom: 15px; + } + } + + .ship-complement { + .input-large { + max-width: unset; + width: 90.91%; + height: 33px; + padding: 0 12px; + margin-bottom: 15px; + } + } + + .ship-receiverName { + .input-xlarge { + max-width: unset; + width: 90.91%; + height: 33px; + margin-bottom: 15px; + } + } + } + } +} .hproduct { - .badge { display: none; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index e8f4c39..f137e70 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -35,6 +35,8 @@ font-family: $font-family; width: 100%; height: 397px !important; + padding: 24px 16px; + box-sizing: border-box; h2 { background: $color-white-500; @@ -66,8 +68,7 @@ border-top: 1px solid #e5e5e5; } - .shipping-date, - .price { + .shipping-date { display: none; } } @@ -76,6 +77,10 @@ .summary-template-holder { border-top: none; background: $color-white-500; + + .summary-totalizers { + max-width: unset; + } } #go-to-cart-button a { @@ -94,18 +99,28 @@ } #payment-data-submit { - background: $color-black-100; + font-family: $font-family; + background: $color-green2; border: none; - border-radius: 0; - color: $color-white-500; + border-radius: 8px; + color: $color-white; outline: none; transition: all 0.2s linear; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + letter-spacing: 0.05em; &:hover { - background: lighten($color-black-100, 5); + background: lighten($color-green2, 5); } &:active { - background: darken($color-black-100, 5); + background: darken($color-green2, 5); + } + + .icon-lock { + display: none; } } } @@ -177,21 +192,21 @@ height: auto; padding: 0; width: 60px; + background: none; - @include mq(sm, max) { - width: 72px; + a { + @include mq(sm, max) { + display: block; + margin-right: 16px; + } } img { height: 60px; - max-width: 60px; - width: 100%; + max-width: unset; + width: 60px; transform: rotateY(180deg); - - @include mq(sm, max) { - height: 72px; - width: auto; - } + object-fit: cover; } } @@ -201,8 +216,6 @@ font-size: 12px; line-height: 14px; white-space: unset; - // padding-left: 16px; - // width: 321px; @include mq(lg, max) { width: 250px; @@ -219,8 +232,8 @@ text-decoration: none; } - @media (max-width: 490px) { - margin-left: 23px; + @include mq(md, max) { + margin: 0; } } @@ -278,91 +291,12 @@ } } - td.quantity { - align-items: center; - border: 1px solid $color-gray7; - border-radius: 8px; - box-sizing: border-box; - display: flex; - justify-content: center; - margin: 10px 0 0 0; - max-height: 38px; - max-width: 118px; - padding: 0; - width: max-content !important; - - @media (max-width: 490px) { - margin-left: 84px !important; - } - - input { - background-color: $color-white-500; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; - display: block; - max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $color-gray2; - box-shadow: none; - - @include mq(lg, max) { - width: 24px !important; - } - } - - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $color-black-100; - display: block; - font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - width: 16px; - height: 16px; - color: $color-blue-100; - } - } - - .icon-plus-sign { - &:before { - width: 16px; - height: 16px; - color: $color-blue-100; - } - } - - .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, .best-price { .icon-question-sign { display: none; } span { - font-style: normal; - font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black-100; @@ -418,6 +352,52 @@ padding: 0; } + td.quantity { + text-align: start; + border: 1px solid #f0f0f0; + border-radius: 8px; + box-sizing: border-box; + display: flex; + align-items: center; + max-width: 99px; + padding: 9px 11px; + height: 34px; + margin-top: 13px; + + @include mq(md, max) { + width: 99px !important; + // margin-left: calc(60px + 16px) !important; + display: flex !important; + padding: 9px 11px !important; + } + + .item-quantity-change { + @include mq(lg, max) { + position: unset !important; + width: unset !important; + height: unset !important; + } + } + + .icon-minus-sign, + .icon-plus-sign { + color: $color-blue-100; + } + + input { + border: none; + outline: none; + box-shadow: none; + margin: 0; + padding: 0; + flex: 1; + + &:focus { + box-shadow: none; + } + } + } + .summary { .cart-more-options { margin: 0; @@ -448,10 +428,11 @@ font-size: 14px; line-height: 18px; margin: 0 0 10px; + max-width: 276px; } button.shp-open-options { - background-color: $color-gray6; + background-color: $color-gray1; font-family: $font-family; border: none; border-radius: 8px; @@ -535,7 +516,6 @@ } .srp-postal-code { - .ship-country { display: none; } @@ -543,8 +523,6 @@ .ship-postalCode { label { font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; line-height: 14px; color: $color-black-100; @@ -681,6 +659,13 @@ max-width: 354px; width: 100%; + @include mq(md, max) { + float: none; + margin: 0; + width: 100%; + max-width: unset; + } + .coupon-data { display: block !important; margin: 0 0 10px; @@ -698,8 +683,6 @@ } span { font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; line-height: 14px; color: $color-black-500; @@ -735,16 +718,19 @@ .coupon-fields { margin-bottom: 20px; + span { + display: flex; + + i.loading-coupon { + display: none; + } + } + @include mq(sm, max) { span { display: flex; flex-direction: row; justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; - } } } @@ -759,10 +745,8 @@ max-width: 204px; width: 100%; float: left; - - &::placeholder { - padding: 0 16px; - } + padding: 0 16px; + box-sizing: border-box; @include mq(sm, max) { max-width: 100%; @@ -785,17 +769,18 @@ max-width: 133px; width: 100%; text-transform: uppercase; + text-shadow: none; @include mq(md, max) { width: 138px; } &:hover { - background-color: lighten($color-black-100, 5); + background-color: lighten($color-blue-100, 5); } &:active { - background-color: darken($color-black-100, 5); + background-color: darken($color-blue-100, 5); } } } @@ -813,10 +798,11 @@ &.info, &.monetary { font-family: $font-family; - color: $color-gray2; + color: $color-black-100; font-size: 14px; line-height: 19px; margin: 25px 0; + padding: 10px 0; } &.info { @@ -842,9 +828,7 @@ line-height: 25px; font-weight: 700; color: $color-black-100; - padding: 0; - margin-top: 12px; - margin-bottom: 0; + padding: 14px 0; } td.monetary { @@ -853,6 +837,7 @@ line-height: 25px; font-weight: 700; color: $color-black-100; + padding: 14px 0; } } } @@ -870,6 +855,7 @@ width: calc(100% - 32px); float: none; margin-bottom: 50px; + max-width: unset; } @include mq(md, min) { @@ -895,7 +881,6 @@ &:hover { text-decoration: none; - cursor: auto; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 556ed3e..e79f76a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,168 +1,197 @@ body .container-main.container-order-form .orderform-template.active { .mini-cart { - border: 1px solid $color-gray5; - border-radius: 8px; - // padding: 25px 17px; - height: 397px; - width: 32.37%; + width: 32.3242%; margin-left: unset; margin-right: 0; float: right; - .payment-confirmation-wrap { - #payment-data-submit { - font-family: $font-family; - color: $color-white-500; - font-size: 14px; - line-height: 19px; - font-weight: 700; + h2 { + text-align: start; + margin-bottom: 34px; + padding: 0; + font-family: $font-family-secundary; + font-size: 16px; + line-height: 19px; + } + + .cart-fixed { + position: relative; + border: 1px solid #e5e5e5; + border-radius: 8px; + box-sizing: border-box; + max-height: 397px; + padding: 24px 16px; + + .summary-cart-template-holder { + height: auto !important; + + .cart .cart-items .product-name { + max-width: 115px; + } + } + + .summary-template-holder { + .totalizers-list { + tr { + position: relative; + + &:first-of-type { + &::before { + content: ""; + width: calc(100% + 32px); + position: absolute; + height: 1px; + background: $color-gray8; + top: 0; + left: -16px; + } + } + + &::after { + content: ""; + width: calc(100% + 32px); + position: absolute; + height: 1px; + background: $color-gray8; + bottom: 0; + left: -16px; + } + } + } + + td.info, + td.monetary { + padding: 0; + } + + tfoot { + td.info, + td.monetary { + margin: 0; + padding: 30px 0 22px 0; + } + } + } + + .payment-confirmation-wrap { + position: absolute; + top: calc(100% + 20px); + left: 0; background: $color-green2; border-radius: 8px; } - } - } - .span4 { - padding: 24px 17px 22px; - } - - h2 { - font-family: $font-family-secundary; - color: $color-black-100; - font-size: 16px; - line-height: 19px; - text-align: initial; - padding: 0; - margin-bottom: 34px; - } - - .ask-for-geolocation-title { - padding: 0; - margin: 0; - } - - .cart { - border: 0; - padding: 0; - margin: 0; - - li { - display: flex; - align-items: center; - - .description { + .cart { + border: none; + padding: 0; margin: 0; - } + height: auto !important; - .price { - font-family: $font-family; - color: $color-black-100; - font-weight: 400; - font-size: 12px; - line-height: 16px; - margin: 0; - // padding-right: 17px; - } - } - } - - tr { - border-top: 1px solid $color-gray10; - } - .orderform-template-holder { - width: 66.1132%; - } - - .payment-data { - .active { - width: unset; - padding: 14.5px; - } - } - - .link-gift-card { - #show-gift-card-group { - display: none; - } - } - - .payment-body { - .accordion-inner { - .box-step { - display: flex; - - .form-step { + ul li { display: flex; + align-items: center; - .payment-group { - margin: 0; - .payment-group-list-btn { - width: unset; + .description { + margin-left: auto; + margin-top: unset; + font-size: 12px; + color: $color-black-100; + + .price { + font-weight: 400; } - .pg-deposito, - .pg-transferencia-bancaria, - .pg-money, - .pg-promisory---monica, - .pg-desconto-em-folha, - #payment-group-creditControlPaymentGroup, - #payment-group-creditDirectSalePaymentGroup, - #payment-group-promissoryPaymentGroup, - #payment-group-PSEPaymentGroup, - #payment-group-SPEIPaymentGroup, - [data-name="Bancolombia Transfer"] { - display: none; - } - - .payment-group-list-btn { - - span { - background-image: none !important; - font-family: $font-family; - color: $color-black-200; - font-size: 14px; - line-height: 24px; - text-align: center; - padding: 13px; - } - - a { - background: $color-gray3; - border: 1px solid $color-black-500; - border-radius: 6px; - margin-bottom: 12px; - padding: 0; - width: 209px; - text-decoration: none; - margin-left: 0; - } - - .active { - border: 1px solid $color-red-100; - background: rgba(220, 221, 227, 0.3); - margin-left: 0px; - - span { - color: $color-red-100; - } - } - } - } - - .steps-view { - // width: 363px; - width: 100%; - margin-left: 40px; } } } } } -} -.PaymentCardHolderDocument { - display: none; -} + .payment-data.span12 { + .accordion-heading { + &::after { + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados"; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: $color-gray2; + display: block; + margin: 12px 0 16px 0; + } + } + } -.SecurityEnvironmentIcon { - margin-bottom: 5px; + .payment-data { + .box-step form.form-step { + display: flex; + + .steps-view { + flex: 1; + } + } + + .payment-group { + margin-top: 0; + width: 209px; + margin-right: 40px; + } + } + .payment-body { + .link-gift-card { + #show-gift-card-group { + display: none; + } + } + + .pg-deposito, + .pg-transferencia-bancaria, + .pg-money, + .pg-promisory---monica, + .pg-desconto-em-folha, + #payment-group-creditControlPaymentGroup, + #payment-group-creditDirectSalePaymentGroup, + #payment-group-promissoryPaymentGroup, + #payment-group-PSEPaymentGroup, + #payment-group-SPEIPaymentGroup, + [data-name="Bancolombia Transfer"] { + display: none; + } + + .payment-group-list-btn { + span { + background-image: none !important; + font-family: $font-family; + color: $color-black-200; + font-size: 14px; + line-height: 24px; + text-align: center; + padding: 13px; + } + + a { + background: $color-gray3; + border: 1px solid $color-black-500; + border-radius: 6px; + margin-bottom: 12px; + padding: 0; + width: 209px; + text-decoration: none; + margin-left: 0; + } + + .active { + border: 1px solid $color-red-100; + background: rgba(220, 221, 227, 0.3); + margin-left: 0px; + + span { + color: $color-red-100; + } + } + } + } + .orderform-template-holder { + width: 66.1132%; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f1a5066..b7d7020 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -49,6 +49,18 @@ body { .container-order-form, .container-cart { width: 80%; + + @include mq(md, max) { + width: 100%; + } + + .orderform-template { + + @include mq(md, max) { + display: flex; + flex-direction: column; + } + } } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..db19077 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -12,8 +12,6 @@ &__address { color: $color-gray2; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 10px; line-height: 12px; text-transform: capitalize; @@ -60,8 +58,6 @@ color: $color-gray2; display: flex; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 10px; line-height: 12px; text-decoration: none; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index b59828b..8a43223 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -47,8 +47,6 @@ display: flex; text-transform: uppercase; font-family: $font-family; - font-style: normal; - font-weight: normal; font-size: 12px; line-height: 16px; color: $color-black-100; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index dc6734e..3444345 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -11,8 +11,10 @@ $color-black-500: #000000; $color-white-500: #fff; $color-white-100: #f5f5f5; +$color-white: #ffffff; $color-gray: #6c6c6c; +$color-gray1: #ededed; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d;