diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss index c9d001c127ca..ba64b59b46b2 100644 --- a/erpnext/public/scss/point-of-sale.scss +++ b/erpnext/public/scss/point-of-sale.scss @@ -53,7 +53,7 @@ .seperator { margin-left: var(--margin-sm); - margin-right: var(--margin-sm); + margin-right: var(--margin-md); border-bottom: 1px solid var(--gray-300); } @@ -381,6 +381,7 @@ align-items: center; padding: var(--padding-sm); border-radius: var(--border-radius-md); + margin-right: var(--margin-sm); &:hover { background-color: var(--control-bg); @@ -858,13 +859,10 @@ > .fields-section { flex: 1; - position: absolute; display: flex; flex-direction: column; width: 50%; height: 100%; - top: 0; - left: 0; padding-bottom: var(--margin-md); .invoice-fields { @@ -1152,3 +1150,62 @@ } } } + +@media screen and (max-width: 620px) { + .point-of-sale-app { + grid-template-columns: repeat(1, minmax(0, 1fr)); + + > .items-selector { + grid-column: span 6 / span 1 !important; + > .items-container { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + } + + > .item-details-container, .customer-cart-container { + grid-column: span 6 / span 1; + } + + > .payment-container { + overflow: scroll; + > .fields-numpad-container { + flex-direction: column-reverse; + > .number-pad { + display: none; + } + > .fields-section { + width: 100%; + } + } + } + + > .past-order-summary{ + > .invoice-summary-wrapper { + width: 100%; + } + } + + .numpad-totals { + > span { + padding: 0 5px; + font-size: var(--text-sm); + } + } + + .col > * { + font-size: var(--text-sm) !important; + } + + .control-input-wrapper { + padding-left: 0.15rem; + } + + .pay-amount { + margin-left: 0.2rem; + } + + .past-order-list { + grid-column: span 6 / span 1; + } + } +} diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js index 46490c43ae77..193048f6769e 100644 --- a/erpnext/selling/page/point_of_sale/pos_item_cart.js +++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js @@ -286,7 +286,7 @@ erpnext.PointOfSale.ItemCart = class { this.item_is_selected = false; this.$cart_container.find('.cart-item-wrapper').css("background-color", ""); } else { - $cart_item.css("background-color", "var(--gray-50)"); + $cart_item.css("background-color", "var(--control-bg)"); this.item_is_selected = true; this.$cart_container.find('.cart-item-wrapper').not(item).css("background-color", ""); }