From ee41da335d74633c69c0fcb9803e4f189da9a38c Mon Sep 17 00:00:00 2001 From: Matheus Date: Mon, 26 Dec 2022 19:45:16 -0300 Subject: [PATCH] feat: checkout do protudo estilizado somente 1280 --- .../sass/checkout/_checkout-carrinho.scss | 327 ++++++++++++------ .../src/arquivos/sass/partials/_footer.scss | 1 + 2 files changed, 229 insertions(+), 99 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 38dde8e..e5ecce9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,17 +6,29 @@ .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; - } + }; + + .item-unit-label { display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 0 16px 16px; + height: 127px; + + @media only screen and (max-width: 1024px){ + border-radius: 0; + border-left: 0; + border-right: 0; + padding: 16px 16px 15px; + height: 93px; + }; @include mq(md, max) { margin: 0px 0 25px 0; @@ -108,6 +120,16 @@ .cart-items { .product-item { padding: 16px 0; + + @media only screen and (max-width: 1024px){ + display: grid; + grid-template: + "image name remove" 25px + "image quantity price" 34px + / 76px 498.5px 417.5px; + height: 60px; + padding: 0; + } } th { @@ -127,9 +149,17 @@ } } + @media only screen and (max-width: 1024px){ + display: none; + } + } td { padding: 0; + + .total-selling-price{ + font-weight: 700; + } } .shipping-date{ @@ -151,17 +181,26 @@ width: 72px; } + @media only screen and (max-width: 1024px){ + grid-area: image; + } + img { transform: scaleX(-1); height: 60px; min-width: 60px; max-width: 60px; width: auto; + margin-top: 10px; @include mq(sm, max) { height: 72px; width: auto; } + + @media only screen and (max-width: 1024px){ + margin-top: 0; + } } } @@ -169,6 +208,11 @@ width: 300px; padding: 0 0 0 16px; + @media only screen and (max-width: 1024px){ + grid-area: name; + padding: 0; + } + @include mq(lg, max) { width: 250px; @@ -208,9 +252,13 @@ @include mq(md, max) { display: none; } + + @media only screen and (max-width: 1024px){ + display: none; + } } - .product-price { + th.product-price { font-size: 0; min-width: 100px; @@ -245,15 +293,40 @@ display: flex; flex-direction: column; } - td.product-price{ - padding-top: 8px; + td.product-price{ + font-size: initial; + top: 11.5px; + + @media only screen and (max-width: 1024px){ + grid-area: price; + justify-self: end; + top: 0; + } + + .list-price{ + height: 22px; + font-family: 'Tenor Sans'; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + .old-product-price-label{ + text-transform: lowercase; + color: #989898; + } + } + .best-price{ + .new-product-price-label{ + text-transform: lowercase; + } + } } td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; @@ -263,22 +336,25 @@ padding: 0; width: max-content !important; height: 34px; - border-radius: 8px; @media (max-width: 490px) { margin-left: 84px !important; + }; + + @media only screen and (max-width: 1024px){ + grid-area: quantity; + margin: 0; } input { background-color: $color-white; - border: 1px solid $color-gray3; + border: 0; border-radius: 0; - border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; - padding: 8px 0; - width: 38px; + padding: 0; + width: 25px; color: $color-gray2; box-shadow: none; @@ -290,24 +366,16 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: #00C8FF; display: block; font-weight: 500; padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; + width: 16px; + height: 16px; + border-radius: 100px; + padding: 0; + margin: 1px 10px; + cursor: pointer; } } @@ -333,16 +401,17 @@ display: none; } span { - text-transform: lowercase; font-style: normal; - font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: black; } } .quantity-price { + @media only screen and (max-width: 1024px){ + display: none; + } @include mq(md, max) { display: none; } @@ -354,11 +423,27 @@ } .icon::before { color: $color-gray4; - font-size: 15px; + font-size: 13px; + height: 10px; @include mq(md, max) { font-size: 18px; } + + } + + @media only screen and (max-width: 1024px){ + grid-area: remove; + justify-self: end; + height: 11px; + width: 10px; + } + + .item-link-remove{ + @media only screen and (max-width: 1024px){ + font-size: 0; + padding: 0; + } } } @@ -389,7 +474,7 @@ } .srp-main-title { - margin: 32px 0 12px; + margin: 32px 0 11px; font-style: normal; font-weight: normal; font-size: 24px; @@ -406,7 +491,7 @@ color: $color-gray2; font-size: 12px; line-height: 18px; - margin: 0 0 12px; + margin: 0; } button.shp-open-options { @@ -421,8 +506,15 @@ outline: none; padding: 12px 40px; transition: all 0.2s linear; + margin-top: 10px; cursor: pointer; + @media only screen and (max-width: 1024px){ + width: 157px; + font-size: 14px; + line-height: 19px; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -436,6 +528,10 @@ .srp-data { width: 280px; + @media only screen and (max-width: 1024px){ + margin-top: 0; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -445,9 +541,9 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: #00C8FF; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; @@ -455,7 +551,7 @@ font-style: normal; font-weight: 500; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; &:hover { @@ -469,7 +565,8 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; + padding-bottom: 0; &__wrapper { background-color: $color-white; @@ -502,73 +599,96 @@ } } + .srp-postal-code { - .ship-postalCode { - label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-black; - margin-bottom: 12px; - } + .ship-country { + display: none; + } - input { - border: 1px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray3; - font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; - } + .vtex-shipping-preview-0-x-postalCodeForgotten{ + margin-top: 0; - & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; - text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); + .ship-postalCode { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black; + margin-bottom: 2px; } - &:active { - background-color: darken($color-black, 5); + input { + border: 1px solid $color-gray3; + border-radius: 5px; + box-shadow: none; + color: $color-gray3; + font-size: 12px; + height: 36px; + padding: 12px 8px; + width: 172px; } - } - small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; - } + & ~ button { + background-color: #00c8fe; + border: none; + border-radius: 5px; + color: $color-white; + font-weight: 700; + font-size: 14px; + line-height: 19px; + height: 36px; + letter-spacing: 1px; + outline: none; + position: absolute; + right: -150px; + top: 16px; + transition: all 0.2s linear; + width: 96px; + text-transform: uppercase; + padding: 8px 8px 9px; - span.help.error { - color: red; - font-size: 12px; - position: absolute; - left: 0; - width: 100%; - top: 17px; + &:hover { + background-color: lighten($color-black, 5); + } + + &:active { + background-color: darken($color-black, 5); + } + } + + small{ + a { + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 0px; + line-height: 12px; + color: black; + margin-top: 7px; + cursor: pointer; + }; + + a::before { + content: 'Não sei meu código postal'; + font-size: 10px; + line-height: 12px; + text-decoration-line: underline; + } + } + + span.help.error { + color: red; + font-size: 12px; + position: absolute; + left: 0; + width: 100%; + top: 17px; + } } } + } .srp-result { @@ -636,6 +756,11 @@ width: 356px; margin-top: 33px; + @media only screen and (max-width: 1024px){ + margin: 48px 16px 7px; + width: 96.875%; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -673,7 +798,7 @@ } .coupon-label{ - margin-bottom: 0; + margin-bottom: 4px; label { font-family: $font-family; @@ -789,7 +914,7 @@ td.monetary { font-family: 'Open Sans'; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; line-height: 25px; color: $color-black; @@ -849,10 +974,6 @@ padding: 10.5px 19px; cursor: pointer; - &:hover { - background-color: darken($color-green, 5); - } - &:after { content: "finalizar compra"; font-family: $font-family; @@ -868,4 +989,12 @@ } } } + .summary-template-holder{ + .row-fluid{ + @media only screen and (max-width: 1024px){ + display: flex; + flex-direction: column; + } + } + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 215dec9..e1d6d12 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,6 +4,7 @@ }; .footerCheckout { + margin-top: 37px; color: $color-gray2; .footerCheckout__prateleira{