.shop_cart { #order_delivery { display: none !important; } } .oe_website_sale { padding-top: 20px; .row { display: flex; justify-content: space-between; margin: 0; .col-12 { margin-bottom: 52px; .cart_title_div { width: max-content; .cart_title { font-family: $main-font; font-size: 24px; line-height: 23px; color: $black-color; font-weight: 700; position: relative; margin-top: 20px; &:after { position: absolute; content: ""; background-color: $yellow-color; width: 100%; height: 3px; left: 0; top: 30px; } } } } .oe_cart { padding: 0; @media(max-width: 1199px) { margin-bottom: 60px !important; } .row { .col-lg-12 { @media(max-width: 1199px) { padding: 0; } .alert { background-color: #ffffff; border-color: #000000; color: #000000; font-family: $main-font; font-size: 18px; border-radius: 0; } .table { display: flex; thead { display: none; } tbody { display: flex; flex-wrap: wrap; width: 100%; tr { background-color: #ffffff !important; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid $yellow-color; height: 140px; width: 98%; @media(max-width: 1199px) { min-height: 200px; align-items: flex-start; margin: 0 auto; width: 100%; } .td-img { background-color: #F0F0F0; width: 18%; max-width: 110px; border-top: none !important; @media(max-width: 1199px) { display: block !important; order: 1; width: 32%; } span { .img { max-width: 100%; max-height: 100%; } } } .td-product_name { width: 42%; padding-left: 20px; border-top: none !important; @media(max-width: 1199px) { order: 2; width: 58%; padding-left: 10px; div:first-child { overflow: hidden; text-overflow: ellipsis; height: 80px; } } div { a { font-size: 18px; line-height: 105.5%; font-family: $main-font; color: $black-color; font-weight: 700; text-decoration: none; @media(max-width: 1199px) { font-size: 14px; } &:hover { display: inline; box-shadow: inset 0 -0.3em #ffd503, inset 0 -0.2em #ffd503; } } } .cart_line_author_container { margin-top: 20px; @media(max-width: 1199px) { margin-top: 14px; } .cart_line_author { font-size: 18px; line-height: 17px; font-weight: 400; font-family: $main-font; color: $black-color; @media(max-width: 1199px) { font-size: 14px; } } } } .td-qty { width: 14%; display: flex; justify-content: center; border-top: none !important; @media(max-width: 1199px) { order: 4; width: 50%; } .css_quantity { @media(max-width: 1199px) { margin-left: 0 !important; } .input-group-prepend { margin-right: 0; display: flex; justify-content: center; align-items: center; .btn { border-radius: 0; height: 20px; width: 20px; border: 1px solid black; padding: 0; @media(max-width: 1199px) { display: block !important; height: 30px; width: 30px; } .fa-minus { &:before { content: '\002D'; position: absolute; top: -1px; left: 7px; color: #000000; @media(max-width: 1199px) { content: ''; background: url("/web_common/static/src/img/cart_minus.png") no-repeat center; width: 20px; height: 20px; top: 3px; left: 4px; } } } } } .form-control { border: none !important; font-size: 18px; line-height: 123.02%; font-family: $main-font; color: $black-color; max-width: 39px; } .input-group-append { margin-right: 0; display: flex; justify-content: center; align-items: center; .btn { border-radius: 0; height: 20px; width: 20px; border: 1px solid black; padding: 0; @media(max-width: 1199px) { display: block !important; height: 30px; width: 30px; } .fa-plus { &:before { content: '\002B'; position: absolute; top: 0; left: 4px; color: #000000; @media(max-width: 1199px) { content: ''; background: url("/web_common/static/src/img/cart_plus.png") no-repeat center; width: 20px; height: 20px; top: 3px; } } } } } } } .td-price { width: 19%; border-top: none !important; display: flex; flex-direction: column; justify-content: center; @media(max-width: 1199px) { order: 5; width: 50%; } .text-danger { display: none; } span, .oe_currency_value { font-size: 24px; line-height: 23px; font-family: $main-font; color: $black-color; font-weight: 400; @media(max-width: 1199px) { text-align: right !important; padding-top: 11px; } //.oe_currency_value { // font-size: 24px; // line-height: 23px; // font-family: $main-font; // color: $black-color; // font-weight: 400; //} } } .td-action { border-top: none !important; width: 5%; padding-right: 0; display: flex; justify-content: flex-end; @media(max-width: 1199px) { order: 3; width: 10%; } .js_delete_product { display: flex; justify-content: center; align-items: center; small { align-items: center; display: flex; justify-content: center; .fa-trash-o { position: relative; width: 20px; height: 20px; &:before { position: absolute; content: ''; top: 3px; left: 3px; background: url("/web_common/static/src/img/delete_btn.png") no-repeat; width: 20px; height: 20px; } } } } } } #order_delivery { display: none !important; } } } .btn-primary, .btn-secondary { display: none !important; } } } } #o_cart_summary { padding: 0; .cart_right { overflow: visible; border: none; min-height: 500px; @media(max-width: 1199px) { width: 100%; max-width: 320px; margin: 0 auto; min-height: 400px; } .card-body { padding: 0; h4, hr { display: none !important; } div { div { .show_coupon { font-size: 18px; line-height: 17px; color: $black-color; font-family: $main-font; border: 1px solid $yellow-color; padding: 23px 0; width: 100%; display: flex; justify-content: center; align-items: center; height: 82px; position: relative; text-decoration: none; .show_coupon_span { position: relative; &:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 1px; left: 50%; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } &:hover { &:after { background: #000000; width: 100%; left: 0; bottom: 0; content: ""; display: block; height: 1px; position: absolute; transition: width 0.3s ease 0s, left 0.3s ease 0s; } } } } .coupon_form { padding: 20px 10px; border: 1px solid $yellow-color; position: relative; height: 82px; form { .input-group { input { height: 40px; border-radius: 0; &:focus, &:active { box-shadow: 0 0 5px 0 #000000; border: none; } } .input-group-append { .btn { background-color: $yellow-color; color: $black-color; font-size: 16px; line-height: 106.2%; border: none; border-radius: 0; display: flex; align-items: center; cursor: pointer; letter-spacing: 0.1em; &:focus, &:active { box-shadow: 0 0 5px 0 #000000; border-color: #000000; } } } } } .alert { position: absolute; top: -88px; left: 0; background-color: $white-color; color: $black-color; font-family: $main-font; } } } #cart_total { border: 1px solid $yellow-color; margin-top: 10px; padding: 10px 30px; position: relative; .table { width: 100%; tbody { tr:last-child { display: none !important; } tr { display: flex; td { width: 50%; } .text-right, .text-xl-right, .text-muted { display: flex; justify-content: flex-start; color: $black-color !important; font-family: $main-font; font-weight: 400; font-size: 18px; line-height: 17px; } .text-xl-right { justify-content: flex-end; } } #order_total { margin-top: 20px; td { border-top: none !important; } } } } } .cart_order_btn { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; top: 265px; z-index: 1029; .btn_checkout { z-index: 1030; border: none; background-color: #000000; color: #ffffff; padding: 22px; cursor: pointer; min-width: 260px; margin-bottom: 10px; letter-spacing: 0.1em; &:focus, &:active { box-shadow: 0 0 5px 0 #000000; } } .continue_btn { z-index: 1030; border: 1px solid #000000; background-color: #ffffff; color: #000000; padding: 22px; cursor: pointer; min-width: 260px; margin-bottom: 0 !important; &:focus, &:active { box-shadow: 0 0 5px 0 #000000; } .fa-chevron-left { display: none; } } } .float-right { display: none !important; } } } } .mt8 { display: flex; flex-direction: column-reverse; position: absolute; align-items: center; top: 261px; width: 100%; .btn-primary { z-index: 1029; border: none; background-color: #000000; color: #ffffff; padding: 22px; cursor: pointer; min-width: 260px; margin-bottom: 10px; .fa-chevron-right { display: none; } &:focus, &:active { box-shadow: 0 0 5px 0 #000000; } } .btn-secondary { z-index: 1029; border: 1px solid #000000; background-color: #ffffff; color: #000000; padding: 22px; cursor: pointer; min-width: 260px; margin-bottom: 0 !important; &:focus, &:active { box-shadow: 0 0 5px 0 #000000; } .fa-chevron-left { display: block; &:before { display: none !important; } .d-none { @media(max-width: 1199px) { display: block !important; } } } } } } } }