From b669698bdfe50459853e4cf47eb4b07c5a01f7fa Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 26 Dec 2022 01:17:40 -0300 Subject: [PATCH] feat: Aplica css desktop --- .../sass/checkout/_checkout-autenticacao.scss | 199 +++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 13 ++ 2 files changed, 201 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 38003b3..c21feca 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -829,8 +829,8 @@ } } - .vtex-omnishipping-1-x-svg { - background-image: url(" https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); + .vtex-omnishipping-1-x-svg, + input[type='radio']:checked + .vtex-omnishipping-1-x-leanShippingIcon { background-repeat: no-repeat; background-size: 18px; width: auto; @@ -842,10 +842,19 @@ background-size: 34px; height: 34px; } + } - &:active { - background-image: url(" https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); - } + .vtex-omnishipping-1-x-svg, + input[type='radio']:checked + .vtex-omnishipping-1-x-leanShippingIcon { + background-image: url(" https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png"); + } + + input[type='radio']:checked + .vtex-omnishipping-1-x-leanShippingIcon { + background-image: url(" https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png"); + } + + .vtex-omnishipping-1-x-leanShippingOptionActive { + background: #f2f2f2 !important; } #delivery-packages-options { @@ -883,12 +892,6 @@ letter-spacing: 0.05em; } - #CHEAPEST { - &:active { - background-color: #F2F2F2; - } - } - #find-pickups-manualy-button-denied { background-color: $color-blue2; border: 1px solid $color-blue2; @@ -908,6 +911,14 @@ padding: 11px 110px; margin-bottom: 25px; } + + &:hover { + background-color: $color-blue3; + } + + &:active { + background-color: $color-gray4; + } } .shipping-data, @@ -990,6 +1001,10 @@ } } +.checkout-container .shipping-data .accordion-group .accordion-inner .vtex-omnishipping-1-x-deliveryGroup .shp-lean label { + background: none; +} + .checkout-container .shipping-data .accordion-group .accordion-inner .vtex-omnishipping-1-x-deliveryGroup .shp-lean label svg path { fill: transparent; } @@ -1065,4 +1080,166 @@ border-color: #E0E0E0; } +.checkout-container .shipping-data .accordion-group .accordion-heading a{ + background-color: $color-white; +} + +.vtex-omnishipping-1-x-SummaryItemContent { + .vtex-omnishipping-1-x-SummaryItemInfo { + border-right: none; + } +} + +#open-shipping { + display: none; +} + +.vtex-omnishipping-1-x-SummaryItemContent { + display: flex; + flex-direction: column; + align-items: flex-start !important; +} + +.postalCode, +.number, +.checkout-container .shipping-data .accordion-group .accordion-inner .shp-summary-package, +.checkout-container .shipping-data .accordion-group .accordion-inner .shp-summary-group-price { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } +} + +.checkout-container .shipping-data .accordion-group .accordion-inner .shp-summary-group-price { + margin-left: 5px; +} + +.payment-group-item { + background: $color-gray3; + mix-blend-mode: normal; + opacity: 0.3; + border: 1px solid $color-black2; + border-radius: 6px; + margin-bottom: 12px; + margin-left: 0; + padding: 0; + width: 209px; + height: 50px; + cursor: pointer; + + @include mq(xg, min) { + width: 406px; + } +} + +.payment-group-item.active { + background: rgba(220, 221, 227, 0.3); + mix-blend-mode: normal; + border: 1px solid #F15A31; + border-radius: 6px; +} + +.payment-group-item-text { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #58595B; + text-align: center; + padding: 13px; + white-space: nowrap; + margin: 0 4px; + display: flex; + align-items: center; + justify-content: center; + padding-right: 0; + padding-left: 0; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + padding-top: 5px; + padding-bottom: 5px; + } +} + +#show-gift-card-group { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + color: #58595B; + text-align: center; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } +} + +.cart-template .cart-fixed .cart ul li .shipping-date { + text-align: right; +} + +.steps-view { + width: 61.4%; + + @include mq(xg, min) { + width: 63.9%; + } + + @media (max-width: 1230px) { + width: 58%; + } +} + +.box-payment-group2, +.box-payment-pinpad h3, +.input-xlarge, +.payment-pix-step-text { + + @include mq(xg, min) { + font-size: 22px; + line-height: 28px; + } +} + +.input-xlarge { + + @include mq(xg, min) { + height: 50px; + } + + option { + font-size: 14px; + line-height: 18px; + } +} + +.payment-pix-step-number { + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } +} + +.mercadopago-payment-methods .span4 p, +.payment-mercadopago-container-methods .box-img .pt-arg p { + @include mq(xg, min) { + font-size: 20px; + line-height: 24px; + } +} + /*url("https://agenciamagma.vteximg.com.br/homeM3Academy.png");*/ diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 0bb0241..53b83d2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -131,6 +131,15 @@ text-align: center; letter-spacing: 0.05em; text-transform: uppercase; + padding: 12px 91px; + white-space: nowrap; + margin-top: 20px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + padding: 12px 173px; + } &:hover { background: lighten($color-black, 5); @@ -141,6 +150,10 @@ } } + .icon-lock:before { + display: none; + } + .summary-cart-template-holder { .cart { margin-bottom: 0;