From 18f641135c0f71f5c40f957599503411a8796dff Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 22 Dec 2022 08:14:30 -0300 Subject: [PATCH] feat: css checkout entrega e pagamento 1280px --- .../sass/checkout/_checkout-autenticacao.scss | 185 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 31 ++- .../sass/checkout/_checkout-pagamento.scss | 28 ++- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 220 insertions(+), 26 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index fc68707..ccd4aee 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -373,8 +373,13 @@ label { background-color: $color-white; box-shadow: none; - color: #303030; + color: $color-gray9 !important; padding: 8px 12px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; svg path { fill: #d8c8ac; @@ -394,23 +399,33 @@ } .shp-summary-group-info { - border-color: $color-gray4; + border: none !important; } .address-summary { background: none; border-color: $color-gray11; border-radius: 8px; - color: #303030; + color: $color-gray9; padding: 12px; + position: relative; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; - // &:first-child::before { - // content: ""; - // background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); - // background-size: 21px 20px; - // width: 21px; - // height: 20px; - // } + &:first-child::before { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") !important; + background-size: 25px 25px; + width: 25px; + height: 25px; + display: block; + position: absolute; + top: 28%; + right: 89%; + } @include mq(md, max) { background-position: 8px 9px; @@ -421,6 +436,50 @@ font-weight: 500; text-decoration: underline; } + + .street { + left: 15%; + position: absolute; + } + + .neighborhood { + position: absolute; + left: 15%; + } + + .neighborhood-delimiter-after { + position: absolute; + left: 36.5%; + } + + .city { + position: absolute; + left: 39%; + } + + .state-delimiter { + position: absolute; + left: 63%; + } + + .state { + position: absolute; + left: 65%; + } + + #force-shipping-fields { + top: 50%; + position: absolute; + left: 80%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: none; + color: $color-blue; + text-transform: lowercase; + } } .shp-summary-group-price, @@ -439,6 +498,7 @@ .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { @@ -471,6 +531,79 @@ td { padding: 25px 0 !important; } + + .info { + border-bottom: 1px solid #f0f0f0; + } + } + + .vtex-omnishipping-1-x-leanShippingTextLabel { + color: $color-gray9 !important; + } + + .vtex-omnishipping-1-x-leanShippingText { + border-right: 1px solid $color-gray11; + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: $color-gray12 !important; + } + + .steps-view { + width: 59.746%; + height: 292px; + } + + .link-gift-card { + display: none !important; + } + + .payment-group-list-btn { + width: 100%; + + .pg-deposito { + display: none; + } + + .pg-transferencia-bancaria { + display: none; + } + + #payment-group-creditDirectSalePaymentGroup { + display: none; + } + + #payment-group-promissoryPaymentGroup { + display: none; + } + + .pg-money { + display: none; + } + + #payment-group-instantPaymentPaymentGroup { + display: none; + } + + #payment-group-PSEPaymentGroup { + display: none; + } + + .pg-promisory---monica { + display: none; + } + + .pg-desconto-em-folha { + display: none; + } + + #payment-group-MercadoPagoPaymentGroup { + display: none; + } + + #payment-group-SPEIPaymentGroup { + display: none; + } } } @@ -479,12 +612,23 @@ display: flex; flex-direction: column; input { - width: 280px; - max-width: 280px; + width: 94.95%; + max-width: 100%; + height: 35px; } } .vtex-omnishipping-1-x-address { + label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + color: $color-gray9; + } + .ship-street, .ship-neighborhood, .ship-city, @@ -493,22 +637,33 @@ } .ship-number { + width: 100%; input { - width: 155%; + width: 94.95%; height: 25px; border-radius: 8px; - margin-bottom: 20px; + // margin-bottom: 20px; } } .ship-receiverName { + width: 100%; input { - width: 95%; + width: 94.95%; border-radius: 8px; height: 25px; margin: 0; } } + + .ship-complement { + width: 100%; + input { + width: 94.95%; + border-radius: 8px; + height: 25px; + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index c95dc4b..74c67a7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -137,19 +137,34 @@ } #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); + position: absolute; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-top: 20px; + + i { + display: none; } - &:active { - background: darken($color-black, 5); - } + // &:hover { + // background: lighten($color-black, 5); + // } + + // &:active { + // background: darken($color-black, 5); + // } } } @@ -959,7 +974,7 @@ .accordion-group { tr { - border-color: #e5e5e5; + border-bottom: 1px solid $color-gray5 !important; td { &.empty { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index dc5d58b..9b26eeb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -41,6 +41,11 @@ body .container-main.container-order-form .orderform-template.active { } .table { + tbody { + tr { + border-bottom: 1px solid $color-gray5 !important; + } + } tfoot { .info { font-weight: 700 !important; @@ -168,7 +173,7 @@ body .container-main.container-order-form .orderform-template.active { .client-profile-data { .accordion-group { - padding: 16px 16px 28.41px 16px; + padding: 26.41px 16px 28.41px 16px; .accordion-heading { .accordion-toggle { &::after { @@ -205,6 +210,7 @@ body .container-main.container-order-form .orderform-template.active { width: 20px; height: 20px; content: ""; + margin-right: 8px; } img { @@ -248,6 +254,7 @@ body .container-main.container-order-form .orderform-template.active { width: 20px; height: 20px; content: ""; + margin-right: 8px; } } @@ -266,6 +273,11 @@ body .container-main.container-order-form .orderform-template.active { .payment-data { .accordion-group { padding: 24.5px 16px; + width: 89.75%; + + @media (max-width: 1024px) { + width: 144%; + } .accordion-heading { span { color: #303030; @@ -280,13 +292,23 @@ body .container-main.container-order-form .orderform-template.active { a { align-items: center; - background-color: #303030; + background: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + margin-top: 10px; + + &::after { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + margin-right: 8px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ea18390..29312fd 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,10 +20,12 @@ $color-gray8: #c4c4c4; $color-gray9: #7d7d7d; $color-gray10: #ededed; $color-gray11: #e0e0e0; +$color-gray12: #f2f2f2; $color-blue: #00c8ff; $color-green: #4caf50; +$color-green2: #298541; $color-red: #ff0000; -- 2.34.1