diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 76a4891..6d87f05 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -159,7 +159,7 @@ } a { - color: $color-black; + color: $color-blackTotal; font-style: normal; font-weight: 400; font-size: 12px; @@ -184,7 +184,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray8; font-size: 12px; line-height: 14px; @@ -206,7 +206,9 @@ } span.list-price { - color: $color-gray2; + color: $color-gray8; + font-family: $font-family-secundary; + font-weight: 400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; @@ -229,49 +231,44 @@ display: flex; justify-content: center; margin: 6px auto 0; - max-height: 38px; - max-width: 118px; - padding: 1rem 1rem; + max-height: 34px; + max-width: 99px; width: max-content !important; - @media (max-width: 490px) { - margin-left: 84px !important; + a.item-quantity-change-increment { + margin: 0.563rem 0.66rem 0.563rem 0; + } + a.item-quantity-change-decrement { + margin: 0.563rem 0 0.563rem 0.66rem; } input { - background-color: $color-white; + background-color: transparent; border-radius: 0; border: none !important; display: block; max-height: 38px; - margin: 0.9rem !important; + margin: 0.75rem !important; padding: 8px 0; width: 24px; - color: $color-gray2; + color: $color-blackTotal; box-shadow: none; - - /* @include mq(lg, max) { - width: 24px !important; - } */ } .icon-plus-sign, .icon-minus-sign { &::before { color: $color-white; - display: block; - font-weight: 500; - text-align: center; + font-size: 10px; } } .icon-minus-sign { &:before { - content: "-"; + content: "\f068"; width: 16px; height: 16px; background: $color-blue2; - padding: 4px 4px 5px 4px; border-radius: 50%; display: flex; justify-content: center; @@ -281,11 +278,10 @@ .icon-plus-sign { &:before { - content: "+"; + content: "\f067"; width: 16px; height: 16px; background: $color-blue2; - padding: 4px; border-radius: 50%; display: flex; justify-content: center; @@ -320,8 +316,9 @@ } span { font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; + font-family: $font-family; line-height: 16px; color: $color-black; } @@ -331,6 +328,10 @@ @include mq(md, max) { display: none; } + + .total-selling-price { + font-weight: 700; + } } .item-remove { @@ -338,8 +339,8 @@ top: 0; } .icon::before { - color: $color-gray4; - font-size: 15px; + color: $color-gray6; + text-shadow: 0px 4px 3px #c4c4c48a; @include mq(md, max) { font-size: 18px; @@ -367,8 +368,6 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; - @include mq(md, max) { padding: 0 16px; } @@ -380,7 +379,7 @@ font-weight: 400; font-size: 24px; line-height: 28px; - color: $color-black; + color: $color-blackTotal; @include mq(md, max) { margin-top: 0; @@ -389,23 +388,25 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 0.666rem; + max-width: 276px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray9; border: none; - border-radius: 5px; - color: $color-gray2; + border-radius: 0.5rem; + color: $color-blackTotal; font-size: 16px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; outline: none; - padding: 12px 40px; + padding: 0.749rem 2.563rem 0.804rem 2.563rem ; transition: all 0.2s linear; + margin: unset; &:hover { background-color: lighten($color-gray5, 5); @@ -423,6 +424,7 @@ .srp-data { width: 280px; + margin-top: 0.666rem; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -752,6 +754,16 @@ } .accordion-group { + tr.Discounts { + td { + &.info, + &.monetary { + padding: 0.625rem 0; + } + } + + } + tr { border-color: #e5e5e5; @@ -767,7 +779,8 @@ font-size: 14px; line-height: 16px; color: $color-black; - padding: 20px 0; + padding: unset; + padding: 0.813rem 0 0.625rem; } &.info { @@ -815,7 +828,7 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 0.932rem; @include mq(md, max) { margin-bottom: 0px; @@ -836,11 +849,13 @@ a { background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 0.5rem; display: block; font-size: 0; transition: ease-in 0.22s all; - padding: 12px 19px; + padding: 0.756rem 6.386rem 0.795rem 6.411rem; + display: flex; + justify-content: center; &:hover { opacity: 0.8; @@ -850,19 +865,24 @@ content: "finalizar compra"; font-family: $font-family; font-weight: 700; - font-size: 13px; + font-size: 14px; letter-spacing: 0.05em; color: $color-black; text-transform: uppercase; vertical-align: middle; line-height: 19px; text-shadow: none; + white-space: nowrap; } } } } } +.summary-template-holder { + margin-top: 2.5rem; +} + .checkout-container { overflow: initial !important; } @@ -1216,6 +1236,26 @@ ul.slick-dots { display: none !important; } +th.shipping-date { + display: flex; + justify-content: flex-end; + align-items: center; + color: transparent !important; + &::before { + content: "Frete"; + color: #292929; + display: flex; + font-style: normal; + font-weight: 400; + font-family: "Tenor Sans", sans-serif; + font-size: 14px; + line-height: 16px; + + grid-column: 2 / 3; + grid-row: 1 / 2; + } +} + @media (max-width: 1024px) { .row-fluid.orderform-template.span12.active { display: flex; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 3b4618e..0f4f9ed 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-blackTotal: #000000; $color-white: #fff; @@ -16,6 +17,8 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #c4c4c4; $color-gray7: #58595B; +$color-gray8: #989898; +$color-gray9: #EDEDED; $color-blue: #4267b2; $color-blue2: #00C8FF;