diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 144b3a9..2adfc49 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,118 +1,1022 @@ -body .container-main.container-order-form .orderform-template.active { - .mini-cart { - width: 32.3242%; - margin-left: unset; - margin-right: 0; - float: right; +.container { + @include mq(md, max) { + width: 100%; + } +} + +.cart-items { + .product-name { + width: auto; + } +} + +.cart-template { + font-family: $font-family; + + @include mq(md, max) { + padding: 0 0; } - .orderform-template-holder { - width: 66.1132%; + .summary-totalizers { + // Voltar + @include mq(xl, min) { + min-width: 688px; + } } - .shipping-summary-placeholder { - .address-summary-BRA { - // Alterar depois - display: grid; - grid-template-columns: repeat(3, max-content); - grid-template-rows: repeat(2, max-content); - padding: 0; - margin: 10px 0 18px 0; + .ship-country { + display: none; + } - .postalCode { - grid-column: 2; + .item-unit-label { + display: none; + } + + .cart { + box-sizing: border-box; + border-radius: 5px; + padding: 17px; + border: 1px solid $color-gray3; + + @include mq(md, max) { + margin: 0px 0 25px 0; + border-left: none; + border-right: none; + 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: 99%; + + h2 { + font-family: $font-family-secundary; + font-size: 16px; + font-weight: 400; + line-height: 19px; + background: $color-white1; + border: none; + text-align: left; + color: $color-black1; + margin: 16px 0 1px 10px; + + @include mq(xl, min) { + font-size: 32px; + line-height: 37px; } + } - span { - .number-delimiter { - display: none; + .summary-cart-template-holder { + height: 46% !important; + overflow: hidden; + } + + .item-unavailable { + padding: 0; + + &-message { + padding: 8px; + } + } + + .cart { + ul li { + border-top: none; + margin-top: 0; + padding-top: 0; + + &:not(:first-child) { + margin-top: 8px; + padding-top: 8px; + border-top: 1px solid #e5e5e5; } } } - .link-change-shipping { - display: none; + .summary-template-holder { + border-top: none; + background: $color-white1; } - .shp-summary-package { - padding: 0; - margin-bottom: 14px; + #go-to-cart-button a { + color: #303030; + text-decoration: underline; } - .shp-summary-group { - padding: 0; + .summary-totalizers { + td.info { + width: 100%; + } } - .shp-summary-group-info { + #payment-data-submit { + width: 100%; + height: 42px; + margin-top: 28px; + background: $color-green2; border: none; - } + border-radius: 8px; + color: $color-white1; + outline: none; - .shp-summary-group-price { - display: none; - } - } - - .payment-data.span12 { - .accordion-heading { - display: flex; - - .accordion-toggle { - flex-direction: row; + span { + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; } i { display: none; } } + } - .accordion-inner { - .box-step-content { - .payment-group-list-btn { - margin-top: -31px; + .lookatme { + background-color: $color-white1; + } + + .cart-items { + .product-item { + padding: 16px 0; + } + + th { + 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, + &.shipping-date { + display: none; + } + } + } + + th.product, + th.shipping-date, + th.product-price, + th.quantity, + th.quantity-price { + padding: 0 0 18px 0; + } + + .product-image { + padding: 0; + + @include mq(sm, max) { + width: 72px; + } + + img { + height: 60px; + min-width: 60px; + width: auto; + margin-right: 15px; + + @include mq(xl, min) { + min-width: 146px; + height: 146px; + margin-right: 31px; } - .payment-group { - a { - width: 209px; - height: 50px; - border-radius: 6px; - margin: 0 1px 12px; - padding: 0 0 0 0; - border: 1px solid #000; - text-decoration: none; + @include mq(sm, max) { + height: 72px; + width: auto; + } + } + } - span { - font-family: $font-family; - color: $color-gray10; - font-size: 14px; - font-weight: 400; - line-height: 24px; - letter-spacing: -0.01em; - text-align: center; - padding: 13px 0px; - } + .hproduct { + display: flex; + align-items: center; + + 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; } + } + } - .payment-group-item-text { - background-image: none !important; - } + .quantity { + display: none; + } - .payment-group-item.active { - border: 1px solid $color-orange1; - background-color: $color-white3; + .product-name { + white-space: normal; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: $color-black2; - span { - color: $color-orange1; - } + @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; } } - .link-gift-card { + .brand, + .seller { display: none !important; } + } + } - .steps-view { - margin-top: 3px; + td { + padding: 0; + + a { + color: $color-black2; + font-size: 12px; + font-weight: 400; + text-align: left; + font-family: $font-family-secundary; + + @include mq(xl, min) { + font-size: 24px; + line-height: 28px; + } + } + } + + td.shipping-date { + 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; + } + } + + 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; + right: 0; + } + + span.list-price { + 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; + } + + .old-product-price-label { + text-transform: lowercase; + } + } + } + + td.quantity { + border-radius: 8px; + align-items: center; + border: 1px solid $color-gray3; + box-sizing: border-box; + display: flex; + 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 { + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + background-color: $color-white1; + border: none; + border-radius: 0; + display: block; + max-height: 38px; + margin: 0 !important; + padding: 8px 0; + width: 38px; + color: $color-black2; + box-shadow: none; + + @include mq(lg, max) { + width: 24px !important; + } + + @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 { + color: $color-blue2; + font-size: 18px; + display: block; + + @include mq(xl, min) { + font-size: 32px; + } + } + } + + .item-quantity-change { + @media (max-width: 979px) and (min-width: 768px) { + position: inherit; + bottom: inherit; + left: inherit; + height: inherit; + width: inherit; + top: inherit; + } + + @media (max-width: 490px) { + padding: 0; + } + } + } + + .quantity-price, + .best-price { + .icon-question-sign { + display: none; + } + + span { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: $color-black1; + } + + .new-product-price-label { + text-transform: lowercase; + } + } + + 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-gray6; + font-size: 13px; + + @include mq(xl, min) { + font-size: 25px; + } + + @include mq(md, max) { + font-size: 18px; + } + } + } + + .item-unavailable-message { + background-color: #d8c8ac; + color: $color-white1; + + .icon-warning-sign { + color: #bb4f4f; + } + + .top-arrow { + border-bottom-color: #d8c8ac; + } + } + } + + .summary { + .cart-more-options { + margin: 0; + width: max-content; + + .srp-container { + padding: 0 0 0 10px; + + @include mq(md, max) { + padding: 0 16px; + } + + .srp-content { + @include mq(xl, min) { + max-width: 552px; + } + + .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); + } + + @include mq(md, max) { + margin-bottom: 40px; + } + + .srp-pickup-my-location__button { + background-color: $color-blue2; + border: none; + border-radius: 8px; + color: $color-white1; + outline: none; + width: 100%; + height: 42px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + margin-top: 6px; + } + } + + .srp-toggle { + margin: 0 0 10px; + + &__wrapper { + background-color: $color-white1; + border-radius: 100px; + width: 100%; + font-family: $font-family; + text-transform: uppercase; + font-size: 14px; + font-weight: 400; + line-height: 19px; + } + + &__current { + border: 1px solid $color-black2; + border-radius: 100px; + } + + .blue { + color: $color-black2; + } + + label { + width: 50%; + + &:active { + background-color: $color-white1; + } + } + } + + .srp-postal-code { + .ship-postalCode { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black1; + margin-bottom: 2px; + } + + input { + border: 1px solid $color-gray6; + border-radius: 5px; + box-shadow: none; + font-size: 12px; + height: 36px; + padding: 12px 8px; + width: 172px; + } + + & ~ button { + background-color: $color-blue2; + border: none; + border-radius: 8px; + color: $color-white1; + height: 36px; + outline: none; + position: absolute; + right: -150px; + bottom: 21px; + width: 100px; + text-transform: uppercase; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + line-height: 19px; + letter-spacing: 0.05em; + } + + small a { + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 400; + line-height: 12px; + color: $color-black1; + margin-top: 4px; + } + + span.help.error { + color: red; + font-size: 12px; + position: absolute; + left: 0; + width: 100%; + top: 85px; + } + } + } + + .srp-result { + strong, + .srp-items { + color: #303030; + font-weight: 400; + font-size: 14px; + } + + #deliver-at-text a { + color: #303030; + font-size: 16px; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .srp-shipping-current-single { + border: 1px solid $color-gray4; + border-radius: 0; + color: #303030; + margin: 16px 0 0; + padding: 4px 12px; + + svg path { + fill: #d8c8ac; + } + } + + .srp-delivery-select { + border: 1px solid $color-gray4; + } + + .srp-delivery-select-container { + border: 1px solid $color-gray4; + border-radius: 0; + + .srp-shipping-current-many { + &__name { + color: #303030; + } + + &__sla { + color: #7d7d7d; + } + + &__price { + color: #7d7d7d; + font-weight: 500; + } + + &__arrow svg { + fill: $color-gray4; + } + } + } + } + } + + &-totalizers { + padding: 0; + width: 346px; + + .coupon-data { + #cart-link-coupon-add { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + span { + margin-bottom: 20px; + 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; + } + } + } + + @include mq(md, max) { + padding: 0 16px; + width: 100%; + } + + .coupon-column { + .coupon { + margin: 0; + } + + .coupon-label label { + text-align: left; + margin-bottom: 12px; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-gray2; + cursor: none; + } + + .coupon-fields { + margin-bottom: 38px; + + @include mq(sm, max) { + span { + display: flex; + flex-direction: row; + justify-content: space-between; + i { + position: absolute; + right: 91px; + opacity: 1; + } + } + } + + input { + border: 1px solid $color-gray5; + border-radius: 5px; + box-shadow: none; + color: $color-gray7; + padding: 0 12px; + width: 193px; + font-family: $font-family; + font-size: 12px; + font-weight: 400; + line-height: 14px; + height: 36px; + + @include mq(sm, max) { + max-width: 100%; + width: 100%; + } + } + + button { + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + background: $color-blue2; + border: none; + border-radius: 8px; + color: $color-black2; + margin-left: 12px; + outline: none; + text-transform: uppercase; + padding: 9px 15px; + height: 36px; + max-width: 133px; + + @include mq(md, max) { + width: 138px; + } + } + } + } + + .accordion-group { + tr { + border-color: $color-gray5; + + td { + &.empty { + display: none; + } + + &.info, + &.monetary { + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: $color-black1; + padding: 7px 0; + + @include mq(xl, min) { + font-size: 28px; + line-height: 33px; + } + } + + &.info { + text-align: left; + } + + &.monetary { + text-align: right; + } + } + } + + tfoot { + td.info, + td.monetary { + padding-top: 9px; + font-weight: 700; + font-size: 18px; + line-height: 24px; + color: $color-black1; + + @include mq(xl, min) { + font-size: 36px; + line-height: 49px; + width: 200px; + } + } + } + } + } + } + + .cart-links-bottom { + display: flex; + flex-direction: column; + width: 343px; + + @include mq(xl, min) { + 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; + + @include mq(md, max) { + margin-bottom: 0px; + } + + a { + 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; + } + } + } + + .btn-place-order-wrapper { + a { + background: $color-blue2; + border: none; + border-radius: 8px; + display: block; + font-size: 0; + max-width: 100%; + + &:after { + content: "finalizar compra"; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.05em; + 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; + } } } }