diff --git a/checkout/src/arquivos/assets/svgs/less-icon.svg b/checkout/src/arquivos/assets/svgs/less-icon.svg new file mode 100644 index 0000000..cf34fc0 --- /dev/null +++ b/checkout/src/arquivos/assets/svgs/less-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index aceb71e..ec26bad 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -54,6 +54,7 @@ display: none; } .cart { + font-family: $font-family-secundary; border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; @@ -147,8 +148,9 @@ } .cart-items { - .product-item { - padding: 16px 0; + td { + text-align: start; + padding: 0; } th { @@ -168,7 +170,7 @@ } .product-image { - height: auto; + height: 60px; padding: 0; width: 60px; @@ -177,9 +179,10 @@ } img { + max-width: 60px; height: 60px; - max-width: 100%; - width: auto; + /*max-width: 100%;*/ + width: 60px; @include mq(sm, max) { height: 72px; @@ -189,24 +192,25 @@ } .product-name { - padding-right: 0; + padding: 0 0 0 16px; @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + color: $color-black-500; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; + pointer-events: none; transition: ease-in 0.22s all; - &:hover { + /*&:hover { color: darken($color-blue, 10); text-decoration: none; - } + }*/ @media (max-width: 490px) { margin-left: 23px; @@ -220,7 +224,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -231,6 +235,8 @@ .product-price { min-width: 100px; + /*padding-top: 13px;*/ + @include mq(md, max) { min-width: 78px; } @@ -241,7 +247,6 @@ } span.list-price { - color: $color-gray2; font-size: 12px; line-height: 14px; text-decoration-line: line-through; @@ -251,22 +256,28 @@ } .old-product-price-label { + color: $color-gray6; text-transform: lowercase; } + + .muted { + color: $color-gray6; + } } } 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; + margin: 13px 0 0; + height: 34px; max-height: 38px; max-width: 118px; - padding: 0; + padding: 9px 0; width: max-content !important; @media (max-width: 490px) { @@ -275,15 +286,13 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; + border: 0; display: block; max-height: 38px; margin: 0 !important; - padding: 8px 0; + padding: 0; width: 38px; - color: $color-gray2; + color: $color-black-500; box-shadow: none; @include mq(lg, max) { @@ -294,24 +303,24 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-blue2; display: block; font-weight: 500; - padding: 1px 12px; + padding: 1px 11px; } } .icon-minus-sign { &:before { - content: "-"; font-size: 16px; + padding-right: 0; } } .icon-plus-sign { &:before { - content: "+"; font-size: 14px; + padding-left: 0; } } @@ -349,6 +358,13 @@ @include mq(md, max) { display: none; } + + .total-selling-price { + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } } .item-remove { @@ -356,8 +372,10 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray7; font-size: 15px; + width: 10px; + height: 10px; @include mq(md, max) { font-size: 18px; @@ -745,6 +763,7 @@ .accordion-group { tr { border-color: #e5e5e5; + padding: 0; td { &.empty { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 9711df4..81acfde 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,7 +1,10 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid $color-black-500; + .container { - width: auto !important; + width: 79.53125% !important; } &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 48f351e..318d0fb 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,8 +15,11 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #989898; +$color-gray7: #c4c4c4; $color-blue: #4267b2; +$color-blue2: #00c8ff; $color-green: #4caf50;