From d3e3f4b38729b53e4e26f8d2d0b2dde9e5f90bf2 Mon Sep 17 00:00:00 2001 From: devartes Date: Fri, 16 Dec 2022 16:56:34 -0300 Subject: [PATCH] style: modificando estilo do carrinho do checkout para telas 2500px --- .../sass/checkout/_checkout-carrinho.scss | 149 +++++++++++++++++- .../src/arquivos/sass/checkout/_checkout.scss | 9 +- 2 files changed, 149 insertions(+), 9 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b8a831d..ed60d0a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -18,6 +18,9 @@ border-radius: 5px; padding: 16px; margin-bottom: 48px; + @media (min-width: $checkout2500px) { + padding: 16px 31px; + } @include mq(md, max) { margin: 0px 0 25px 0; @@ -119,6 +122,10 @@ font-size: 14px; line-height: 16px; color: $color-black; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -132,6 +139,10 @@ height: auto; padding: 0; width: 60px; + @media (min-width: $checkout2500px) { + width: 146px; + height: auto; + } @include mq(sm, max) { width: 72px; @@ -141,17 +152,22 @@ height: 60px; max-width: 100%; width: auto; - @include mq(sm, max) { height: 72px; width: auto; } + @media (min-width: $checkout2500px) { + width: 146px; + height: auto; + } } } .product-name { padding-right: 0; - + @media (min-width: $checkout2500px) { + padding-left: 31px; + } @include mq(lg, max) { width: 250px; } @@ -164,11 +180,16 @@ line-height: 14px; color: $color-black2; transition: ease-in 0.22s all; + white-space: nowrap; &:hover { color: darken($color-blue, 10); text-decoration: none; } + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + } @media (max-width: 490px) { margin-left: 23px; @@ -188,7 +209,10 @@ font-size: 12px; line-height: 14px; color: $color-gray6; - + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + } @include mq(md, max) { display: none; } @@ -213,6 +237,10 @@ line-height: 14px; text-decoration-line: line-through; color: $color-gray6; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + } @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -231,7 +259,7 @@ box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 8px auto 0 0; height: 34px; width: 99px; padding: 0; @@ -239,6 +267,11 @@ @media (max-width: 490px) { margin-left: 84px !important; } + @media (min-width: $checkout2500px) { + width: 135px; + height: 50px; + margin: 65px auto 0 0; + } input { background-color: $color-white; @@ -247,8 +280,17 @@ display: block; max-height: 38px; width: 38px; - color: $color-gray2; box-shadow: none; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black2; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 33px; + } @include mq(lg, max) { width: 24px !important; @@ -278,6 +320,11 @@ justify-content: center; align-items: center; color: #ffffff; + @media (min-width: $checkout2500px) { + width: 32px; + height: 32px; + font-size: 32px; + } } } @@ -294,6 +341,11 @@ justify-content: center; align-items: center; color: #ffffff; + @media (min-width: $checkout2500px) { + width: 32px; + height: 32px; + font-size: 32px; + } } } @@ -325,6 +377,21 @@ font-size: 14px; line-height: 16px; color: $color-black; + white-space: nowrap; + @media (min-width: $checkout2500px) { + font-size: 28px; + line-height: 33px; + } + } + & :nth-child(2n) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + @media (min-width: $checkout2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } @@ -664,6 +731,10 @@ line-height: 14px; color: $color-black2; text-decoration: none; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -773,7 +844,6 @@ font-weight: 400; font-size: 28px; line-height: 38px; - } @include mq(md, max) { width: 138px; @@ -805,8 +875,16 @@ font-weight: normal; font-size: 14px; line-height: 16px; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; color: $color-black; padding: 12px 0; + @media (min-width: $checkout2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } &.info { @@ -827,6 +905,13 @@ font-size: 18px; line-height: 25px; color: #292929; + font-family: "Open Sans"; + @media (min-width: $checkout2500px) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + white-space: nowrap; + } } } } @@ -838,6 +923,9 @@ flex-direction: column; width: 362px; + @media (min-width: $checkout2500px) { + width: 688.35px; + } @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -854,7 +942,9 @@ display: block; text-align: center; margin-bottom: 16px; - + @media (min-width: $checkout2500px) { + margin-bottom: 13.8px; + } @include mq(md, max) { margin-bottom: 0px; } @@ -869,6 +959,10 @@ text-align: right; color: $color-black2; margin-right: 0; + @media (min-width: $checkout2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -887,6 +981,9 @@ justify-content: center; align-items: center; cursor: pointer; + @media (min-width: $checkout2500px) { + height: 54.19px; + } &:hover { background-color: darken($color-green, 5); } @@ -900,7 +997,14 @@ text-align: center; letter-spacing: 0.05em; text-transform: uppercase; + font-family: "Open Sans"; + font-style: normal; color: $color-black2; + @media (min-width: $checkout2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } @@ -938,3 +1042,34 @@ .loading-inline { position: absolute; } + +.new-product-price-label { + text-transform: lowercase; +} + +.cart-items .product-name { + width: 321px; + @media (min-width: $checkout2500px) { + width: 632px; + } +} +.cart-items .product-remove, +.cart-items .product-price, +.cart-items .shipping-date, +.cart-items .quantity-price, +.cart-items .quantity, +.cart-items .monetary { + text-align: left; +} + +th.shipping-date { + visibility: hidden; + position: relative; + &::after { + content: "Frete"; + visibility: visible; + position: absolute; + top: 0; + left: 0; + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index c130633..2be48fc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -51,11 +51,11 @@ body { .container-cart { width: 80%; } - & .container-order-form, & .container-cart { + & .container-order-form, + & .container-cart { @media (max-width: $checkout375px) { width: 100%; } - } } @@ -83,6 +83,11 @@ body { letter-spacing: 0.05em; margin: 17px 0 16px; text-transform: uppercase; + @media (min-width: $checkout2500px) { + font-weight: 700; + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-left: 30px;