diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index f7a4b77..cd4cbcf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,10 +17,10 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 16px 16px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -28,6 +28,10 @@ border-right: none; border-radius: 0; } + + .product { + padding-left: 0; + } } .cart-fixed.affix { position: relative !important; @@ -109,16 +113,44 @@ background-color: $color-white; } + .table { + th, + td { + padding: 0; + padding-bottom: 15px; + } + } + .cart-items { + .shipping-date { + font-size: 0; + + &::before { + content: "Frete"; + font-size: 14px; + position: absolute; + left: 2.5%; + } + } + .product-item { padding: 16px 0; + + .shipping-estimate-date { + color: $color-gray6; + + @media (min-width: 1025px) and (max-width: 1105px) { + font-size: 10px; + } + } } th { - color: $color-black; - padding: 0 0 16px; + position: relative; + color: $color-gray2; + font-family: "Tenor Sans"; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -138,11 +170,15 @@ @include mq(sm, max) { width: 72px; } + } + + td.product-image { + width: 6.062%; + height: 60px; img { - height: 60px; - max-width: 100%; - width: auto; + min-width: 100%; + min-height: 100%; @include mq(sm, max) { height: 72px; @@ -159,12 +195,13 @@ } a { - color: $color-blue; + color: $color-black !important; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + margin-left: 11px; &:hover { color: darken($color-blue, 10); @@ -182,17 +219,51 @@ } } + td.product-name { + @media (min-width: 1025px) and (max-width: 1120px) { + width: 35%; + } + } + td.shipping-date { color: $color-gray2; font-size: 12px; line-height: 14px; + text-align: left; + + @media (min-width: 1025px) and (max-width: 1105px) { + width: 7%; + } + + &::before { + content: ""; + } @include mq(md, max) { display: none; } } + th.product-price { + margin-bottom: 14px; + } + + td.product-price { + &::before { + content: ""; + } + } + .product-price { + font-size: 0; + + &::before { + content: "Unidade"; + font-size: 14px; + position: absolute; + left: 2.5%; + margin-left: 35px; + } min-width: 100px; @include mq(md, max) { min-width: 78px; @@ -204,10 +275,13 @@ } span.list-price { - color: $color-gray2; + color: $color-gray7; font-size: 12px; line-height: 14px; text-decoration-line: line-through; + position: absolute; + margin-left: 35px; + left: 2.5%; @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -219,18 +293,23 @@ } } + th.quantity { + text-align: left; + } + 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; + margin-top: 10px; + height: 34px; max-width: 118px; padding: 0; - width: max-content !important; + width: 64.91% !important; + position: relative; @media (max-width: 490px) { margin-left: 84px !important; @@ -238,11 +317,9 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; + border: none; display: block; - max-height: 38px; + height: 16px; margin: 0 !important; padding: 8px 0; width: 38px; @@ -254,27 +331,29 @@ } } - .icon-plus-sign, + .icon-plus-sign { + &::before { + color: $color-blue; + font-weight: 500; + background: $color-white; + border-radius: 100px; + font-size: 14px; + font-size: 20px; + position: absolute; + top: 20%; + right: 10%; + } + } .icon-minus-sign { &::before { - color: $color-black; - display: block; + color: $color-blue; font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; + background: $color-white; + border-radius: 100px; + font-size: 20px; + position: absolute; + top: 20%; + left: 10%; } } @@ -294,8 +373,9 @@ } } - .quantity-price, - .best-price { + .quantity-price { + text-align: left; + .icon-question-sign { display: none; } @@ -306,6 +386,42 @@ line-height: 16px; color: $color-black; } + + .total-selling-price { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + } + } + + .best-price { + .icon-question-sign { + display: none; + } + .new-product-price-label { + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + color: $color-black; + position: absolute; + left: 2.5%; + margin-left: 35px; + } + + .new-product-price { + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + color: $color-black; + position: absolute; + left: 2.5%; + margin-left: 65px; + } } .quantity-price { @@ -319,7 +435,7 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray8; font-size: 15px; @include mq(md, max) { @@ -368,32 +484,33 @@ } .srp-description { - color: $color-gray2; - font-size: 12px; + color: $color-gray9; + font-size: 14px; line-height: 18px; margin: 0 0 12px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray10; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; outline: none; - padding: 12px 40px; + height: 44px; + width: 56.077%; transition: all 0.2s linear; - &:hover { - background-color: lighten($color-gray5, 5); - } + // &:hover { + // background-color: lighten($color-gray5, 5); + // } - &:active { - background-color: darken($color-gray5, 5); - } + // &:active { + // background-color: darken($color-gray5, 5); + // } } } @@ -602,17 +719,16 @@ #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; cursor: pointer; } } span { - font-family: $font-family; + font-family: "Tenor Sans"; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; text-decoration: none; } } @@ -738,10 +854,10 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 25px; + color: $color-gray2; } } } @@ -751,7 +867,7 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 354px; @include mq(md, max) { padding: 0 16px; @@ -762,7 +878,6 @@ @include mq(md, min) { margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { @@ -775,36 +890,37 @@ } a { - font-family: $font-family; + font-family: "Tenor Sans"; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding: 11px 0; + width: 100%; - &:hover { - background-color: darken($color-green, 5); - } + // &:hover { + // background-color: darken($color-green, 5); + // } &:after { content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-family: "Open Sans"; + font-weight: 700; + font-size: 14px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 80e9780..b73fd3b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -70,12 +70,13 @@ body { #cart-title, #orderform-title { color: $color-gray2; - font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; margin: 40px 0 30px; - letter-spacing: 0.1em; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 3ce2a5c..85cadb8 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,10 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #858585; +$color-gray7: #989898; +$color-gray8: #c4c4c4; +$color-gray9: #7d7d7d; +$color-gray10: #ededed; $color-blue: #00c8ff;