diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..e867163 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,10 +13,15 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin-bottom: 48px; + + @include mq(xg, min) { + padding: 16px 31px; + } @include mq(md, max) { margin: 0px 0 25px 0; @@ -111,12 +116,19 @@ } th { + font-family: $font-family-secundary; color: $color-black; - padding: 0 0 16px; + padding: 0 0 17px; font-style: normal; - font-weight: bold; + font-weight: normal; font-size: 14px; line-height: 16px; + text-align: left; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -124,43 +136,82 @@ display: none; } } + .product-price { + font-size: 0; + } + } + + th.shipping-date { + font-size: 0; + + &::after { + content: "Frete"; + font-family: $font-family-secundary; + color: $color-black; + font-weight: normal; + font-style: normal; + font-size: 14px; + line-height: 16px; + padding: 0 0 17px; + vertical-align: bottom; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } + } } .product-image { - height: auto; + height: 60px; padding: 0; width: 60px; - @include mq(sm, max) { - width: 72px; + @include mq(xg, min) { + width: 146px; + height: 146px; } img { height: 60px; - max-width: 100%; - width: auto; + max-width: 60px; + width: 60px; + object-fit: cover; - @include mq(sm, max) { - height: 72px; - width: auto; + @include mq(xg, min) { + width: 146px; + max-width: 146px; + height: 146px; } } } .product-name { - padding-right: 0; + padding: 0; + + @include mq(xg, min) { + width: 600px; + } @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + font-family: $font-family-secundary; + color: $color-black2; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + margin-left: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + margin-left: 31px; + } &:hover { color: darken($color-blue, 10); @@ -179,9 +230,17 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray7; + font-family: $font-family-secundary; + font-weight: normal; font-size: 12px; line-height: 14px; + text-align: left; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } @include mq(md, max) { display: none; @@ -190,6 +249,8 @@ .product-price { min-width: 100px; + text-align: left; + @include mq(md, max) { min-width: 78px; } @@ -200,10 +261,19 @@ } span.list-price { - color: $color-gray2; + color: $color-gray7; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; + font-weight: normal; + font-style: normal; text-decoration-line: line-through; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -212,21 +282,52 @@ .old-product-price-label { text-transform: lowercase; } + + .muted { + color: $color-gray7; + } + } + } + + th.product-price { + font-size: 0; + + &::after { + content: "Unidade"; + font-family: $font-family-secundary; + color: $color-black; + font-weight: normal; + font-style: normal; + font-size: 14px; + line-height: 16px; + padding: 0 0 17px; + vertical-align: bottom; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } } 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; - margin: 6px auto 0; - max-height: 38px; - max-width: 118px; - padding: 0; + margin: 13px 0; + max-height: 34px; + max-width: 99px; + padding: 9px 11px; width: max-content !important; + text-align: left; + + @include mq(xg, min) { + margin: 48px 0px; + padding: 21px 62px; + } @media (max-width: 490px) { margin-left: 84px !important; @@ -234,16 +335,27 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: none; border-radius: 0; border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; padding: 8px 0; - width: 38px; - color: $color-gray2; + width: 40px; + color: $color-black2; box-shadow: none; + font-family: $font-family-secundary; + font-weight: normal; + font-size: 14px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + max-height: 50px; + width: 52px; + } @include mq(lg, max) { width: 24px !important; @@ -253,24 +365,15 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; display: block; font-weight: 500; - padding: 1px 12px; - } - } + font-size: 17px; + color: $color-blue2; + cursor: pointer; - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; + @include mq(xg, min) { + font-size: 32px; + } } } @@ -292,19 +395,41 @@ .quantity-price, .best-price { + text-align: left; + + @include mq(xg, min) { + width: 200px; + } .icon-question-sign { display: none; } span { + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } } .quantity-price { + .total-selling-price { + font-family: $font-family; + font-weight: 700; + line-height: 19px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } + } + @include mq(md, max) { display: none; } @@ -315,9 +440,13 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray6; font-size: 15px; + @include mq(xg, min) { + font-size: 26px; + } + @include mq(md, max) { font-size: 18px; } @@ -351,12 +480,18 @@ } .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px 0; font-style: normal; font-weight: normal; + font-family: $font-family; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black2; + + @include mq(xg, min) { + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-top: 0; @@ -365,23 +500,44 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-style: normal; + font-weight: normal; + font-family: $font-family; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; + max-width: 18rem; + + @include mq(xg, min) { + font-size: 28px; + line-height: 36px; + width: 552px; + max-width: none; + margin-bottom: 11px; + } } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray8; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black2; + font-family: $font-family; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: normal; outline: none; - padding: 12px 40px; + padding: 12px 41px; transition: all 0.2s linear; + margin: 0; + text-transform: uppercase; + cursor: pointer; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } &:hover { background-color: lighten($color-gray5, 5); @@ -593,8 +749,15 @@ &-totalizers { padding: 0; width: 346px; + margin: 0; + + @include mq(xg, min) { + width: 688px; + } .coupon-data { + margin-bottom: 0 0 10px 0; + #cart-link-coupon-add { text-decoration: none; &:hover { @@ -603,13 +766,19 @@ } } span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; text-decoration: none; + cursor: pointer; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -712,12 +881,18 @@ &.info, &.monetary { + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black; - padding: 12px 0; + padding: 10px 0; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -733,11 +908,19 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; + padding: 14px 0 17px 0; + + @include mq(xg, min) { + font-size: 36px; + line-height: 49px; + width: 250px; + } } } } @@ -747,64 +930,89 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 354px; + margin-bottom: 43px !important; + padding: 0; + + @include mq(xg, min) { + margin-bottom: 44px !important; + width: 688px; + } @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); float: none; - margin-bottom: 50px; - } - - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 14px; + + @include mq(xg, min) { + margin-bottom: 13px; + } @include mq(md, max) { margin-bottom: 0px; } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } } } + .link-choose-more-products{ + margin-right: 0; + } + .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding: 12px 102px; + cursor: pointer; + + @include mq(xg, min) { + padding: 12px 175px; + } &:hover { - background-color: darken($color-green, 5); + background: $color-blue3; } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; + line-height: 19px; letter-spacing: 0.05em; color: $color-white; text-transform: uppercase; vertical-align: middle; - line-height: 19px; text-shadow: none; + color: $color-black2; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index caaa353..2bcb250 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,8 +16,13 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #C4C4C4; +$color-gray7: #989898; +$color-gray8: #EDEDED; $color-blue: #4267b2; +$color-blue2: #00C8FF; +$color-blue3: #3fd4fd; //hover + $color-green: #495e49;