diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2adfc49..144b3a9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,1022 +1,118 @@ -.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; +body .container-main.container-order-form .orderform-template.active { + .mini-cart { + width: 32.3242%; + margin-left: unset; + margin-right: 0; + float: right; } - .summary-totalizers { - // Voltar - @include mq(xl, min) { - min-width: 688px; - } + .orderform-template-holder { + width: 66.1132%; } - .ship-country { - display: none; - } - - .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; - } - } - - .summary-cart-template-holder { - height: 46% !important; - overflow: hidden; - } - - .item-unavailable { + .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; - &-message { - padding: 8px; + .postalCode { + grid-column: 2; } - } - .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; + span { + .number-delimiter { + display: none; } } } - .summary-template-holder { - border-top: none; - background: $color-white1; + .link-change-shipping { + display: none; } - #go-to-cart-button a { - color: #303030; - text-decoration: underline; + .shp-summary-package { + padding: 0; + margin-bottom: 14px; } - .summary-totalizers { - td.info { - width: 100%; - } + .shp-summary-group { + padding: 0; } - #payment-data-submit { - width: 100%; - height: 42px; - margin-top: 28px; - background: $color-green2; + .shp-summary-group-info { border: none; - border-radius: 8px; - color: $color-white1; - outline: none; + } - span { - font-family: $font-family; - font-size: 14px; - font-weight: 700; - line-height: 19px; - letter-spacing: 0.05em; - text-transform: uppercase; + .shp-summary-group-price { + display: none; + } + } + + .payment-data.span12 { + .accordion-heading { + display: flex; + + .accordion-toggle { + flex-direction: row; } i { display: none; } } - } - .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; + .accordion-inner { + .box-step-content { + .payment-group-list-btn { + margin-top: -31px; } - @include mq(sm, max) { - height: 72px; - width: auto; - } - } - } + .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; - .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; - } - } - } - - .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-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-family: $font-family; + color: $color-gray10; 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; - } + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + padding: 13px 0px; } + } - &.info { - text-align: left; - } + .payment-group-item-text { + background-image: none !important; + } - &.monetary { - text-align: right; + .payment-group-item.active { + border: 1px solid $color-orange1; + background-color: $color-white3; + + span { + color: $color-orange1; } } } - 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; - } - } + .link-gift-card { + display: none !important; } - } - } - } - .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; - } + .steps-view { + margin-top: 3px; } } }