From fc9fc11788a241ccd23242a3f903b4f81902bd62 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Sun, 18 Dec 2022 21:47:01 -0300 Subject: [PATCH] feat(checkout): leayout desktop --- .../sass/checkout/_checkout-autenticacao.scss | 170 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 12 +- .../src/arquivos/sass/utils/_variaveis.scss | 3 + 3 files changed, 169 insertions(+), 16 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 4214e0b..7182275 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -173,11 +173,28 @@ .shipping-data, .payment-data, .client-profile-data { + .ship-country { + display: none; + } .accordion-group { border-radius: 0; border: 1px solid $gray-100; font-family: $font-family; + .vtex-omnishipping-1-x-address { + div { + display: flex; + flex-direction: column; + + P { + input { + width: 99%; + max-width: 100%; + } + } + } + } + .accordion-heading { span { margin-bottom: 8px; @@ -192,7 +209,7 @@ i { position: absolute; - right: 0; + right: 8px; width: 19.2px; height: 18px; cursor: pointer; @@ -212,6 +229,14 @@ display: none; } + .icon-home { + display: none; + } + + // .icon-credit-card { + // display: none; + // } + span[data-i18n="clientProfileData.identification"] { color: $white; margin: 0; @@ -232,7 +257,6 @@ content: ""; height: 50px; width: 50px; - background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png;"); } } @@ -249,7 +273,7 @@ } .accordion-inner { - margin: 15px 0 0 8px; + // margin: 15px 0 0 8px; /* General configurations */ @@ -305,9 +329,9 @@ button.submit { width: 100%; border: none; + margin-top: 42px; border-radius: 8px; background: $blue; - margin-top: 42px; outline: none; transition: all 0.2s linear; cursor: pointer; @@ -320,11 +344,26 @@ } /* Shipping configurations */ + .ship-postalCode { + display: flex; + flex-direction: column; - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; + #ship-postalCode { + width: 95% !important; + max-width: 95% !important; + margin-bottom: 10px; + } + + small a { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $gray-500; + font-weight: 500; + text-decoration: underline; + } } .vtex-omnishipping-1-x-deliveryGroup { @@ -343,6 +382,7 @@ box-shadow: none; color: $gray-800; padding: 8px 12px; + border-bottom: 1px solid $gray-25; svg path { fill: $blue; @@ -362,20 +402,41 @@ } .address-summary { + position: relative; background: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; border-color: $gray-200; - border-radius: 0; - color: #303030; - padding: 12px; + border-radius: 8px; + color: $gray-600; + padding: 12px 12px 12px 43px; + + &::before { + content: ""; + position: absolute; + left: 12.86px; + top: 35%; + width: 21px; + height: 23px; + background-size: 21px 23px; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: $blue; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + margin-left: 84%; } } @@ -392,7 +453,30 @@ padding-left: 16px; } + .vtex-omnishipping-1-x-SummaryItemContent { + display: block; + .vtex-omnishipping-1-x-SummaryItemInfo { + border: none; + + .vtex-omnishipping-1-x-SummaryItemAddress { + .address-summary-BRA { + padding: 12px 12px 12px 12px; + } + + .address-summary-BRA::before { + display: none; + } + } + } + } + .vtex-omnishipping-1-x-submitPaymentButton { + button.submit { + margin-top: 0; + } + } + .vtex-omnishipping-1-x-summaryChange { + display: none; border-color: #303030; color: $black; } @@ -405,7 +489,63 @@ .vtex-omnishipping-1-x-deliveryOptionActive { color: $black; - // text-shadow: 1.3px 1px lighten($black, 50); + } + + .box-step-content { + width: 102%; + + form { + .payment-group { + margin-top: 0; + } + + .steps-view { + width: 64%; + padding: 0; + } + } + .link-gift-card { + display: none !important; + } + .payment-group-list-btn { + margin: 0; + + a { + display: none; + padding: 13px 9px; + border: 1px solid $gray-600; + border-radius: 6px; + text-align: center; + margin: 12px 0 0 0; + + span { + margin: 0 !important; + padding: 0 !important; + background-image: none !important; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + color: $gray-900; + } + span:hover { + color: $orange; + } + } + + a:hover { + border: 1px solid $orange; + } + + a[data-name="American Express"] { + display: block; + } + + a[data-name="Boleto Bancário"] { + display: block; + } + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 0c9bba5..66822d5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -24,6 +24,10 @@ border-radius: 5px; padding: 30px 17px 0px 17px; + .clearfix::before { + display: none; + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -150,6 +154,11 @@ color: $white; outline: none; transition: all 0.2s linear; + + .store-country-BRA { + margin: 0; + padding: 0; + } } } @@ -630,11 +639,12 @@ .srp-delivery-select { border: 1px solid $gray-200; + border-radius: 5px; } .srp-delivery-select-container { border: 1px solid $gray-200; - border-radius: 0; + border-radius: 5px; .srp-shipping-current-many { &__name { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 7f7ebf5..92a45d4 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -19,9 +19,12 @@ $gray-500: #292929; $gray-600: #7d7d7d; $gray-700: #bdbdbd; $gray-800: #828282; +$gray-900: #58595b; $blue: #00c8ff; +$orange: #f15a31; + $color-gray: #6c6c6c; $color-gray3: #f0f0f0;