diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..2adfc49 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -4,19 +4,39 @@ } } +.cart-items { + .product-name { + width: auto; + } +} + .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; } + + .summary-totalizers { + // Voltar + @include mq(xl, min) { + min-width: 688px; + } + } + + .ship-country { + display: none; + } + .item-unit-label { display: none; } + .cart { - border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 17px; + border: 1px solid $color-gray3; @include mq(md, max) { margin: 0px 0 25px 0; @@ -25,18 +45,38 @@ border-radius: 0; } } + .cart-fixed.affix { position: relative !important; } + .cart-fixed { + height: 370px !important; + border: 1px solid $color-gray5; + border-radius: 8px; font-family: $font-family; - width: 100%; + width: 99%; + h2 { - background: $color-white; + font-family: $font-family-secundary; + font-size: 16px; + font-weight: 400; + line-height: 19px; + background: $color-white1; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + text-align: left; + color: $color-black1; + margin: 16px 0 1px 10px; + + @include mq(xl, min) { + font-size: 32px; + line-height: 37px; + } + } + + .summary-cart-template-holder { + height: 46% !important; + overflow: hidden; } .item-unavailable { @@ -48,8 +88,6 @@ } .cart { - border: 1px solid $color-gray4; - ul li { border-top: none; margin-top: 0; @@ -60,17 +98,12 @@ padding-top: 8px; border-top: 1px solid #e5e5e5; } - - .shipping-date, - .price { - color: #7d7d7d; - } } } .summary-template-holder { border-top: none; - background: $color-white; + background: $color-white1; } #go-to-cart-button a { @@ -85,24 +118,32 @@ } #payment-data-submit { - background: $color-black; + width: 100%; + height: 42px; + margin-top: 28px; + background: $color-green2; border: none; - border-radius: 0; - color: $color-white; + border-radius: 8px; + color: $color-white1; outline: none; - transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; } - &:active { - background: darken($color-black, 5); + i { + display: none; } } } .lookatme { - background-color: $color-white; + background-color: $color-white1; } .cart-items { @@ -111,12 +152,17 @@ } th { - color: $color-black; - padding: 0 0 16px; - font-style: normal; - font-weight: bold; + font-family: $font-family-secundary; font-size: 14px; + font-weight: 400; line-height: 16px; + text-align: left; + color: $color-black1; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -126,10 +172,16 @@ } } + th.product, + th.shipping-date, + th.product-price, + th.quantity, + th.quantity-price { + padding: 0 0 18px 0; + } + .product-image { - height: auto; padding: 0; - width: 60px; @include mq(sm, max) { width: 72px; @@ -137,8 +189,15 @@ img { height: 60px; - max-width: 100%; + min-width: 60px; width: auto; + margin-right: 15px; + + @include mq(xl, min) { + min-width: 146px; + height: 146px; + margin-right: 31px; + } @include mq(sm, max) { height: 72px; @@ -147,52 +206,134 @@ } } - .product-name { - padding-right: 0; + .hproduct { + display: flex; + align-items: center; - @include mq(lg, max) { - width: 250px; + img { + min-width: 60px; + height: 60px; + + @include mq(xl, min) { + min-width: 116px; + height: 116px; + } } + .description { + width: 80%; + margin-top: 0; + + .shipping-date { + display: none; + } + + strong { + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 16px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 33px; + } + } + } + + .quantity { + display: none; + } + + .product-name { + white-space: normal; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + + a { + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; + margin-left: 16px; + + @media (max-width: 490px) { + margin-left: 23px; + } + } + + .brand, + .seller { + display: none !important; + } + } + } + + td { + padding: 0; + a { - color: $color-blue; - font-style: normal; - font-weight: normal; + color: $color-black2; font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; + font-weight: 400; + text-align: left; + font-family: $font-family-secundary; - &:hover { - color: darken($color-blue, 10); - text-decoration: none; + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; } - - @media (max-width: 490px) { - margin-left: 23px; - } - } - - .brand, - .seller { - display: none !important; } } td.shipping-date { - color: $color-gray2; font-size: 12px; + text-align: left; + font-weight: 400; line-height: 14px; + vertical-align: initial; + padding-right: 50px; + color: $color-gray7; + text-transform: lowercase; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + vertical-align: inherit; + } @include mq(md, max) { display: none; } } - .product-price { + td.product-price { min-width: 100px; + text-align: left; + + .best-price { + span { + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + } + @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -200,10 +341,17 @@ } span.list-price { - color: $color-gray2; - font-size: 12px; - line-height: 14px; + color: $color-gray7; text-decoration-line: line-through; + font-size: 12px; + font-weight: 400; + line-height: 14px; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -216,61 +364,73 @@ } td.quantity { + border-radius: 8px; align-items: center; border: 1px solid $color-gray3; - border-radius: 0; box-sizing: border-box; display: flex; - justify-content: center; - margin: 6px auto 0; - max-height: 38px; max-width: 118px; + max-height: 38px; padding: 0; width: max-content !important; + @include mq(xl, min) { + max-height: 50px; + margin-top: 38px; + } + @media (max-width: 490px) { margin-left: 84px !important; } input { - background-color: $color-white; - border: 1px solid $color-gray3; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + background-color: $color-white1; + 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; + color: $color-black2; box-shadow: none; @include mq(lg, max) { width: 24px !important; } - } - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $color-black; - display: block; - font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; + @include mq(xl, min) { + font-size: 28px; + line-height: 32px; } } .icon-plus-sign { + &::before { + padding: 9px 11px 9px 3px; + } + } + + .icon-minus-sign { + &::before { + padding: 9px 3px 9px 11px; + } + } + + .icon-plus-sign, + .icon-minus-sign { &:before { - content: "+"; - font-size: 14px; + color: $color-blue2; + font-size: 18px; + display: block; + + @include mq(xl, min) { + font-size: 32px; + } } } @@ -295,28 +455,58 @@ .icon-question-sign { display: none; } + span { - font-style: normal; - font-weight: normal; font-size: 14px; + font-weight: 400; line-height: 16px; - color: $color-black; + color: $color-black1; + } + + .new-product-price-label { + text-transform: lowercase; } } - .quantity-price { + td.quantity-price { + vertical-align: initial; + text-align: left; + + @include mq(xl, min) { + min-width: 154px; + } + + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } + } + @include mq(md, max) { display: none; } } .item-remove { + vertical-align: initial; + @media (max-width: 490px) { top: 0; } + .icon::before { - color: $color-gray4; - font-size: 15px; + color: $color-gray6; + font-size: 13px; + + @include mq(xl, min) { + font-size: 25px; + } @include mq(md, max) { font-size: 18px; @@ -326,7 +516,7 @@ .item-unavailable-message { background-color: #d8c8ac; - color: $color-white; + color: $color-white1; .icon-warning-sign { color: #bb4f4f; @@ -350,51 +540,72 @@ padding: 0 16px; } - .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; - font-size: 24px; - line-height: 28px; - color: $color-gray2; - - @include mq(md, max) { - margin-top: 0; - } - } - - .srp-description { - color: $color-gray2; - font-size: 12px; - line-height: 18px; - margin: 0 0 12px; - } - - button.shp-open-options { - background-color: $color-gray5; - border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten($color-gray5, 5); + .srp-content { + @include mq(xl, min) { + max-width: 552px; } - &:active { - background-color: darken($color-gray5, 5); + .srp-main-title { + font-family: $font-family; + font-size: 24px; + font-weight: 400; + line-height: 33px; + line-height: 32px; + color: $color-black2; + margin-bottom: 11px; + + @include mq(xl, min) { + font-size: 48px; + line-height: 65px; + } + + @include mq(md, max) { + margin-top: 0; + } + } + + .srp-description { + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 18px; + color: $color-gray2; + margin: 0 0 0; + max-width: 18rem; + + @include mq(xl, min) { + font-size: 28px; + line-height: 36px; + min-width: 552px; + } + } + + button.shp-open-options { + background-color: $color-gray8; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + color: $color-black2; + border: none; + border-radius: 8px; + outline: none; + width: 157px; + height: 44px; + + @include mq(xl, min) { + font-size: 28px; + width: 230px; + height: 44px; + } } } } .srp-data { width: 280px; + margin-top: 0; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -405,58 +616,50 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; + border-radius: 8px; + color: $color-white1; outline: none; width: 100%; - - font-style: normal; - font-weight: 500; + height: 42px; + font-family: $font-family; font-size: 14px; - line-height: 16px; + font-weight: 700; + line-height: 19px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + margin-top: 6px; } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; &__wrapper { - background-color: $color-white; + background-color: $color-white1; border-radius: 100px; width: 100%; font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; text-transform: uppercase; + font-size: 14px; + font-weight: 400; + line-height: 19px; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black2; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black2; } label { width: 50%; &:active { - background-color: #f0f0f0; + background-color: $color-white1; } } } @@ -469,15 +672,14 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; - margin-bottom: 12px; + color: $color-black1; + margin-bottom: 2px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray6; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; height: 36px; padding: 12px 8px; @@ -485,38 +687,31 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-white1; height: 36px; - letter-spacing: 1px; outline: none; position: absolute; right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + bottom: 21px; + width: 100px; text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 10px; + font-weight: 400; line-height: 12px; - color: $color-blue; - margin-top: 7px; + color: $color-black1; + margin-top: 4px; } span.help.error { @@ -525,7 +720,7 @@ position: absolute; left: 0; width: 100%; - top: 17px; + top: 85px; } } } @@ -597,19 +792,24 @@ .coupon-data { #cart-link-coupon-add { text-decoration: none; + &:hover { text-decoration: underline; - cursor: pointer; } } + span { - font-family: $font-family; - font-style: normal; - font-weight: normal; + margin-bottom: 20px; + font-family: $font-family-secundary; font-size: 12px; + font-weight: 400; line-height: 14px; - color: $color-blue; - text-decoration: none; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -623,13 +823,8 @@ margin: 0; } - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - .coupon-label label { + text-align: left; margin-bottom: 12px; font-family: $font-family; font-style: normal; @@ -641,7 +836,7 @@ } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 38px; @include mq(sm, max) { span { @@ -657,14 +852,17 @@ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; - color: $color-gray4; - font-size: 12px; - height: 34px; + color: $color-gray7; padding: 0 12px; - max-width: 160px; + width: 193px; + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 14px; + height: 36px; @include mq(sm, max) { max-width: 100%; @@ -673,37 +871,32 @@ } button { - background: $color-black; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; + border-radius: 8px; + color: $color-black2; + margin-left: 12px; outline: none; - transition: all 0.2s linear; - width: 94px; text-transform: uppercase; + padding: 9px 15px; + height: 36px; + max-width: 133px; @include mq(md, max) { width: 138px; } - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } } } } .accordion-group { tr { - border-color: #e5e5e5; + border-color: $color-gray5; td { &.empty { @@ -712,12 +905,17 @@ &.info, &.monetary { - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 14px; + font-weight: 400; line-height: 16px; - color: $color-black; - padding: 12px 0; + color: $color-black1; + padding: 7px 0; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -733,11 +931,17 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + padding-top: 9px; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 24px; + color: $color-black1; + + @include mq(xl, min) { + font-size: 36px; + line-height: 49px; + width: 200px; + } } } } @@ -749,6 +953,10 @@ flex-direction: column; width: 343px; + @include mq(xl, min) { + width: 688px; + } + @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); @@ -758,7 +966,7 @@ @include mq(md, min) { margin: 0; - padding-bottom: 50px; + //padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -771,40 +979,44 @@ } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; + font-family: $font-family-secundary; font-size: 12px; + font-weight: 400; line-height: 14px; - color: $color-blue; + color: $color-black2; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } } } .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; - - &:hover { - background-color: darken($color-green, 5); - } + max-width: 100%; &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; text-shadow: none; + + @include mq(xl, min) { + font-size: 28px; + line-height: 38px; + } } } }