From 1fe15183984606d26c83c97ad2aef04fc15abbbf Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 10 Mar 2017 14:50:39 +0530
Subject: [PATCH] [pos] ui cleanup

---
 erpnext/accounts/page/pos/pos.js       |   3 +-
 erpnext/public/css/erpnext.css         | 443 ++++++++---------
 erpnext/public/js/pos/pos.html         |  30 +-
 erpnext/public/js/pos/pos_tax_row.html |   6 +-
 erpnext/public/less/erpnext.less       | 650 ++++++++++++-------------
 5 files changed, 518 insertions(+), 614 deletions(-)

diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js
index 1031b77596f..299e34aa64a 100644
--- a/erpnext/accounts/page/pos/pos.js
+++ b/erpnext/accounts/page/pos/pos.js
@@ -748,7 +748,8 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
 			.on('focus', function (e) {
 				$(e.target).val('').trigger('input');
 				me.toggle_edit_button(false);
-				if(me.frm.doc.items.length){
+
+				if(me.frm.doc.items.length) {
 					me.toggle_list_customer(false)
 					me.toggle_item_cart(true)
 				} else {
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index c58733ac1c3..a51472feaa7 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -12,93 +12,11 @@
   height: 32px;
   margin: -10px auto;
 }
-/* pos */
-.pos-item-wrapper {
-  padding: 5px;
-}
-.pos-item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  padding: 5px;
-  padding-bottom: 15px;
-  border: 1px solid #d1d8dd;
-  margin-bottom: 5px;
-}
-.pos-item-text {
-  padding: 0px 5px;
-}
-.pos-item .item-code {
-  margin-bottom: 0px;
-}
-.pos-item .no-image {
-  background-color: #fafbfc;
-  border: 1px dashed #d1d8dd;
-}
-.pos-item-image {
-  width: 100%;
-  height: 0px;
-  padding: 50% 0;
-  text-align: center;
-  line-height: 0;
-  color: #d1d8dd;
-  font-size: 30px;
-  background-size: contain;
-  border: 1px solid transparent;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.pos-item-toolbar {
-  height: 51px;
-  padding: 10px 0px;
-  border-bottom: 1px solid #d1d8dd;
-}
-.pos-toolbar,
-.pos-bill-toolbar {
-  padding: 10px 0px;
-  height: 51px;
-}
-.pos-item-toolbar .form-group {
-  margin-bottom: 0px;
-}
-.edit-pos-item {
-  height: 50px;
-  font-size: 14px;
-  border-top: 1px solid #d1d8dd;
-  padding-top: 12px;
-}
-.pos-bill-item:hover {
-  background-color: #f5f7fa;
-  cursor: pointer;
-}
-.pos-item-qty {
-  display: inline-block;
-}
-.pos-qty-row > div {
-  padding: 5px 0px;
-}
-.pos-qty-btn {
-  margin-top: 3px;
-  cursor: pointer;
-  font-size: 120%;
-}
-.pos .search-area .form-group {
-  max-width: 100% !important;
-}
-.pos .tax-table {
-  margin-bottom: 10px;
-}
 .erpnext-icon {
   width: 24px;
   margin-right: 0px;
   margin-top: -3px;
 }
-.pos .discount-amount-area .discount-field-col {
-  padding-left: 0px;
-}
-.pos .discount-amount-area .input-group {
-  margin-top: 2px;
-}
 .dashboard-list-item {
   background-color: inherit;
   padding: 5px 0px;
@@ -110,135 +28,6 @@
 .dashboard-list-item:last-child {
   border-bottom: none;
 }
-.payment-toolbar .row {
-  width: 323px;
-  margin: 0 auto;
-}
-.payment-mode {
-  cursor: pointer;
-  font-family: sans-serif;
-  font-size: 15px;
-}
-.pos-payment-row .col-xs-6 {
-  padding: 15px;
-}
-.pos-payment-row {
-  border-bottom: 1px solid #d1d8dd;
-  margin: 2px 0px 5px 0px;
-  height: 60px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-.pos-payment-row:hover,
-.pos-keyboard-key:hover {
-  background-color: #FAFBFC;
-  cursor: pointer;
-}
-.pos-keyboard-key,
-.delete-btn {
-  border: 1px solid #d1d8dd;
-  height: 85px;
-  width: 85px;
-  margin: 10px 10px;
-  font-size: 24px;
-  font-weight: 200;
-  background-color: #FDFDFD;
-  border-color: #e8e8e8;
-}
-.numeric-keypad {
-  border: 1px solid #d1d8dd;
-  height: 69px;
-  width: 69px;
-  font-size: 20px;
-  font-weight: 200;
-  background-color: #FDFDFD;
-  border-color: #e8e8e8;
-  margin-left: -4px;
-}
-.pos-pay {
-  height: 69px;
-  width: 69px;
-  font-size: 17px;
-  font-weight: 200;
-  margin-left: -4px;
-}
-.numeric-keypad {
-  height: 60px;
-  width: 60px;
-  font-size: 20px;
-  font-weight: 200;
-  border-radius: 0;
-  background-color: #fff;
-  margin-left: -4px;
-}
-.numeric_keypad {
-  margin-left: -15px;
-}
-.numeric_keypad > .row > button {
-  border: none;
-  border-right: 1px solid #d1d8dd;
-  border-bottom: 1px solid #d1d8dd;
-}
-.numeric_keypad > .row > button:first-child {
-  border-left: 1px solid #d1d8dd;
-}
-.numeric_keypad > .row:first-child > button {
-  border-top: 1px solid #d1d8dd;
-}
-.pos-pay {
-  background-color: #5E64FF;
-  border: none;
-}
-.multimode-payments {
-  padding-left: 30px;
-}
-.payment-toolbar {
-  padding-right: 30px;
-}
-.list-row-head.pos-invoice-list {
-  border-top: 1px solid #d1d8dd;
-}
-body[data-route="pos"] .modal-dialog {
-  width: 750px;
-}
-@media (max-width: 767px) {
-  body[data-route="pos"] .modal-dialog {
-    width: auto;
-  }
-  body[data-route="pos"] .modal-dialog .modal-content {
-    height: auto;
-  }
-}
-@media (max-width: 767px) {
-  .amount-row h3 {
-    font-size: 15px;
-  }
-  .pos-keyboard-key,
-  .delete-btn {
-    height: 50px;
-  }
-  .multimode-payments {
-    padding-left: 15px;
-  }
-  .payment-toolbar {
-    padding-right: 15px;
-  }
-}
-.amount-label {
-  font-size: 16px;
-}
-.selected-payment-mode {
-  background-color: #FAFBFC;
-  cursor: pointer;
-}
-.pos-invoice-list {
-  padding: 15px 10px;
-}
-.write_off_amount,
-.change_amount {
-  margin: 15px;
-  width: 130px;
-}
 .frappe-control[data-fieldname='result_html'] {
   overflow: scroll;
 }
@@ -261,7 +50,169 @@ body[data-route="pos"] .modal-dialog {
 .assessment-result-tool .score {
   text-align: right;
 }
-.pos-list-row {
+/* pos */
+body[data-route="pos"] .pos-bill-toolbar {
+  padding: 10px 0px;
+  height: 51px;
+}
+body[data-route="pos"] .pos-bill-item:hover,
+body[data-route="pos"] .list-customers-table > .pos-list-row:hover {
+  background-color: #f5f7fa;
+  cursor: pointer;
+}
+body[data-route="pos"] .pos-item-qty {
+  display: inline-block;
+}
+body[data-route="pos"] .pos-qty-row > div {
+  padding: 5px 0px;
+}
+body[data-route="pos"] .pos-qty-btn {
+  margin-top: 3px;
+  cursor: pointer;
+  font-size: 120%;
+}
+body[data-route="pos"] .search-area .form-group {
+  max-width: 100% !important;
+}
+body[data-route="pos"] .tax-table {
+  margin-bottom: 10px;
+}
+body[data-route="pos"] .discount-field-col {
+  padding-left: 24px;
+}
+body[data-route="pos"] .discount-amount-area .input-group:first-child {
+  margin-bottom: 2px;
+}
+body[data-route="pos"] .payment-toolbar .row {
+  width: 323px;
+  margin: 0 auto;
+}
+body[data-route="pos"] .payment-mode {
+  cursor: pointer;
+  font-family: sans-serif;
+  font-size: 15px;
+}
+body[data-route="pos"] .pos-payment-row .col-xs-6 {
+  padding: 15px;
+}
+body[data-route="pos"] .pos-payment-row {
+  border-bottom: 1px solid #d1d8dd;
+  margin: 2px 0px 5px 0px;
+  height: 60px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+body[data-route="pos"] .pos-payment-row:hover,
+body[data-route="pos"] .pos-keyboard-key:hover {
+  background-color: #FAFBFC;
+  cursor: pointer;
+}
+body[data-route="pos"] .pos-keyboard-key,
+body[data-route="pos"] .delete-btn {
+  border: 1px solid #d1d8dd;
+  height: 85px;
+  width: 85px;
+  margin: 10px 10px;
+  font-size: 24px;
+  font-weight: 200;
+  background-color: #FDFDFD;
+  border-color: #e8e8e8;
+}
+body[data-route="pos"] .numeric-keypad {
+  border: 1px solid #d1d8dd;
+  height: 69px;
+  width: 69px;
+  font-size: 20px;
+  font-weight: 200;
+  background-color: #FDFDFD;
+  border-color: #e8e8e8;
+  margin-left: -4px;
+}
+body[data-route="pos"] .pos-pay {
+  height: 69px;
+  width: 69px;
+  font-size: 17px;
+  font-weight: 200;
+  margin-left: -4px;
+}
+body[data-route="pos"] .numeric-keypad {
+  height: 60px;
+  width: 60px;
+  font-size: 20px;
+  font-weight: 200;
+  border-radius: 0;
+  background-color: #fff;
+  margin-left: -4px;
+}
+body[data-route="pos"] .numeric_keypad {
+  margin-left: -15px;
+}
+body[data-route="pos"] .numeric_keypad > .row > button {
+  border: none;
+  border-right: 1px solid #d1d8dd;
+  border-bottom: 1px solid #d1d8dd;
+}
+body[data-route="pos"] .numeric_keypad > .row > button:first-child {
+  border-left: 1px solid #d1d8dd;
+}
+body[data-route="pos"] .numeric_keypad > .row:first-child > button {
+  border-top: 1px solid #d1d8dd;
+}
+body[data-route="pos"] .pos-pay {
+  background-color: #5E64FF;
+  border: none;
+}
+body[data-route="pos"] .multimode-payments {
+  padding-left: 30px;
+}
+body[data-route="pos"] .payment-toolbar {
+  padding-right: 30px;
+}
+body[data-route="pos"] .list-row-head.pos-invoice-list {
+  border-top: 1px solid #d1d8dd;
+}
+body[data-route="pos"] .modal-dialog {
+  width: 750px;
+}
+@media (max-width: 767px) {
+  body[data-route="pos"] .modal-dialog {
+    width: auto;
+  }
+  body[data-route="pos"] .modal-dialog .modal-content {
+    height: auto;
+  }
+}
+@media (max-width: 767px) {
+  body[data-route="pos"] .amount-row h3 {
+    font-size: 15px;
+  }
+  body[data-route="pos"] .pos-keyboard-key,
+  body[data-route="pos"] .delete-btn {
+    height: 50px;
+  }
+  body[data-route="pos"] .multimode-payments {
+    padding-left: 15px;
+  }
+  body[data-route="pos"] .payment-toolbar {
+    padding-right: 15px;
+  }
+}
+body[data-route="pos"] .amount-label {
+  font-size: 16px;
+}
+body[data-route="pos"] .selected-payment-mode {
+  background-color: #FAFBFC;
+  cursor: pointer;
+}
+body[data-route="pos"] .pos-invoice-list {
+  padding: 15px 10px;
+}
+body[data-route="pos"] .write_off_amount,
+body[data-route="pos"] .change_amount {
+  margin: 15px;
+  width: 130px;
+}
+body[data-route="pos"] .pos-list-row {
   display: table;
   table-layout: fixed;
   width: 100%;
@@ -270,99 +221,102 @@ body[data-route="pos"] .modal-dialog {
   margin: 0px;
   border-bottom: 1px solid #d1d8dd;
 }
-.pos-list-row .cell {
+body[data-route="pos"] .pos-list-row .cell {
   display: table-cell;
   vertical-align: middle;
 }
-.pos-list-row .subject {
+body[data-route="pos"] .pos-list-row .cell.price-cell {
+  width: 50%;
+}
+body[data-route="pos"] .pos-list-row .subject {
   width: 40%;
 }
-.pos-list-row .list-row-checkbox,
-.pos-list-row .list-select-all {
+body[data-route="pos"] .pos-list-row .list-row-checkbox,
+body[data-route="pos"] .pos-list-row .list-select-all {
   margin-right: 7px;
 }
-.pos-bill-header {
+body[data-route="pos"] .pos-bill-header {
   background-color: #f5f7fa;
   border: 1px solid #d1d8dd;
   padding: 13px 15px;
 }
-.pos-list-row.active {
+body[data-route="pos"] .pos-list-row.active {
   background-color: #fffce7;
 }
-.totals-area {
+body[data-route="pos"] .totals-area {
   border-right: 1px solid #d1d8dd;
   border-left: 1px solid #d1d8dd;
   margin-bottom: 15px;
 }
-.item-cart-items {
+body[data-route="pos"] .tax-area .pos-list-row {
+  border: none;
+}
+body[data-route="pos"] .item-cart-items {
   height: calc(100vh - 526px);
   overflow: auto;
   border: 1px solid #d1d8dd;
   border-top: none;
 }
-.pos .no-items-message {
+body[data-route="pos"] .no-items-message {
   min-height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.pos .pos-list-row:last-child {
+body[data-route="pos"] .pos-list-row:last-child {
   border-bottom: none;
 }
-.pos .form-section-heading {
+body[data-route="pos"] .form-section-heading {
   padding: 0;
 }
-.pos {
-  overflow: hidden;
-}
-.pos .item-list {
+body[data-route="pos"] .item-list {
   border: 1px solid #d1d8dd;
   border-top: none;
   max-height: calc(100vh - 190px);
   overflow: auto;
 }
 @media (max-width: 767px) {
-  .pos .item-list {
+  body[data-route="pos"] .item-list {
     max-height: initial;
   }
 }
-.pos .item-list .image-field {
+body[data-route="pos"] .item-list .image-field {
   height: 140px;
 }
-.pos .item-list .pos-item-wrapper {
+body[data-route="pos"] .item-list .pos-item-wrapper {
   position: relative;
 }
-.pos .item-list .price-info {
-  width: 99%;
-  text-align: center;
+body[data-route="pos"] .item-list .price-info {
   position: absolute;
-  right: 0;
+  left: 0;
   bottom: 0;
-  margin: 2px 1px 2px 2px;
-  background-color: rgba(162, 161, 161, 0.1);
-  padding: 9px 15px;
+  margin: 0 0 15px 15px;
+  background-color: rgba(141, 153, 166, 0.6);
+  padding: 5px 9px;
+  border-radius: 3px;
+  color: #fff;
 }
-.pos-bill-toolbar {
+body[data-route="pos"] .pos-bill-toolbar {
   margin-top: 10px;
 }
-.pos .search-item .form-group {
+body[data-route="pos"] .search-item .form-group {
   margin: 0;
 }
-.item-list-area .pos-bill-header {
+body[data-route="pos"] .item-list-area .pos-bill-header {
   padding: 5px;
   padding-left: 15px;
 }
-.pos-selected-item-action > .pos-list-row {
+body[data-route="pos"] .pos-selected-item-action > .pos-list-row {
   border: none;
 }
-.edit-customer-btn {
+body[data-route="pos"] .edit-customer-btn {
   position: absolute;
   right: 57px;
   top: 15px;
   z-index: 100;
 }
-.btn-more {
+body[data-route="pos"] .btn-more {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -370,3 +324,6 @@ body[data-route="pos"] .modal-dialog {
   background-color: #fafbfc;
   min-height: 200px;
 }
+body[data-route="pos"] .collapse-btn {
+  cursor: pointer;
+}
diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html
index e8a394c950d..e356d8768e0 100644
--- a/erpnext/public/js/pos/pos.html
+++ b/erpnext/public/js/pos/pos.html
@@ -27,27 +27,25 @@
 			</div>
 			<div class="totals-area">
 				<div class="pos-list-row net-total-area">
-					<div class="cell subject"></div>
 					<div class="cell"></div>
 					<div class="cell text-right">{%= __("Net Total") %}</div>
-					<div class="cell net-total text-right"></div>
+					<div class="cell price-cell bold net-total text-right"></div>
 				</div>
 				<div class="pos-list-row tax-area">
-					<div class="cell subject"></div>
 					<div class="cell"></div>
-					<div class="cell text-muted">{%= __("Taxes") %}</div>
-					<div class="cell text-right tax-table"></div>
+					<div class="cell text-right">{%= __("Taxes") %}</div>
+					<div class="cell price-cell text-right tax-table">
+					</div>
 				</div>
 				{% if (apply_discount_on) { %}
 				<div class="pos-list-row discount-amount-area">
-					<div class="cell text-muted">{%= __("Discount") %}</div>
-					<div class="cell discount-field-col">
+					<div class="cell"></div>
+					<div class="cell text-right">{%= __("Discount") %}</div>
+					<div class="cell price-cell discount-field-col">
 						<div class="input-group input-group-sm">
 							<span class="input-group-addon">%</span>
 							<input type="text" class="form-control discount-percentage text-right">
 						</div>
-					</div>
-					<div class="cell discount-field-col">
 						<div class="input-group input-group-sm">
 							<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
 							<input type="text" class="form-control discount-amount text-right" placeholder="{%= 0.00 %}">
@@ -55,21 +53,21 @@
 					</div>
 				</div>
 				{% } %}
-				<div class="pos-list-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
+				<div class="pos-list-row grand-total-area collapse-btn" style="border-bottom:1px solid #d1d8dd;">
 					<div class="cell">
-						<a class="collapse-btn">
+						<a class="">
 							<i class="octicon octicon-chevron-down"></i>
 						</a>
 					</div>
 					<div class="cell text-right bold">{%= __("Grand Total") %}</div>
-					<div class="cell subject grand-total text-right lead"></div>
+					<div class="cell price-cell grand-total text-right lead"></div>
 				</div>
 			</div>
 			<div class="row" style="margin-top: 30px">
-				<div class="col-xs-6 selected-item">
+				<div class="col-sm-6 selected-item">
 
 				</div>
-				<div class="col-xs-6 numeric_keypad" style="display:none">
+				<div class="col-xs-6 numeric_keypad hidden-xs" style="display:none">
 					{% var chartData = ["Qty", "Disc", "Price"] %} {% for(var i=0; i
 					<3; i++) { %} <div class="row text-right">
 						{% for(var j=i*3; j
@@ -110,10 +108,6 @@
 
 		</div>
 		<span id="customer-results" style="color:#68a;"></span>
-		<div class="row pos-item-toolbar hide">
-			<!--<div class="search-item-group col-xs-5"></div>-->
-			<!--<div class="search-item col-xs-7"></div>-->
-		</div>
 		<div class="item-list-area">
 			<div class="pos-list-row pos-bill-header text-muted h6">
 				<div class="cell subject search-item-group">
diff --git a/erpnext/public/js/pos/pos_tax_row.html b/erpnext/public/js/pos/pos_tax_row.html
index 788eb1f337d..3752a89bbdc 100644
--- a/erpnext/public/js/pos/pos_tax_row.html
+++ b/erpnext/public/js/pos/pos_tax_row.html
@@ -1,4 +1,4 @@
-<div class="row">
-	<div class="col-xs-9">{%= description %}</div>
-	<div class="col-xs-3 text-right">{%= tax_amount %}</div>
+<div class="pos-list-row" style="padding-right: 0;">
+	<div class="cell">{%= description %}</div>
+	<div class="cell text-right bold">{%= tax_amount %}</div>
 </div>
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 06355394511..0a489707048 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -17,114 +17,12 @@
 	margin: -10px auto;
 }
 
-/* pos */
-
-.pos-item-wrapper {
-	padding: 5px;
-}
-
-.pos-item {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	cursor: pointer;
-	padding: 5px;
-	padding-bottom: 15px;
-	border: 1px solid #d1d8dd;
-	margin-bottom: 5px;
-}
-
-.pos-item-text {
-	padding: 0px 5px;
-}
-
-.pos-item .item-code {
-	margin-bottom: 0px;
-}
-
-.pos-item .no-image {
-	background-color: #fafbfc;
-	border: 1px dashed #d1d8dd;
-}
-
-.pos-item-image {
-	width: 100%;
-	height: 0px;
-	padding: 50% 0;
-	text-align: center;
-	line-height: 0;
-	color: @text-extra-muted;
-	font-size: 30px;
-	background-size: contain;
-	border: 1px solid transparent;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.pos-item-toolbar {
-	height: 51px; // remove later
-	padding: 10px 0px;
-	border-bottom: 1px solid #d1d8dd;
-}
-
-.pos-toolbar, .pos-bill-toolbar {
-	padding: 10px 0px;
-	// border-bottom: 1px solid #d1d8dd;
-	height: 51px;
-}
-
-.pos-item-toolbar .form-group {
-	margin-bottom: 0px;
-}
-.edit-pos-item {
-	height: 50px;
-	font-size: 14px;
-	border-top: 1px solid @border-color;
-	padding-top: 12px;
-}
-
-.pos-bill-item:hover {
-	background-color: #f5f7fa;
-	cursor: pointer;
-}
-
-.pos-item-qty {
-	display: inline-block;
-}
-
-.pos-qty-row > div {
-	padding: 5px 0px;
-}
-
-.pos-qty-btn {
-	margin-top: 3px;
-	cursor: pointer;
-	font-size: 120%;
-}
-
-.pos .search-area .form-group {
-	max-width: 100% !important;
-}
-
-.pos .tax-table {
-	margin-bottom: 10px;
-}
-
 .erpnext-icon {
 	width: 24px;
 	margin-right: 0px;
 	margin-top: -3px;
 }
 
-.pos .discount-amount-area {
-	.discount-field-col {
-		padding-left: 0px;
-	}
-
-	.input-group {
-		margin-top: 2px;
-	}
-}
-
 .dashboard-list-item {
 	background-color: inherit;
 	padding: 5px 0px;
@@ -139,157 +37,6 @@
 	border-bottom: none;
 }
 
-.payment-toolbar {
-	.row {
-		width: 323px;
-		margin: 0 auto;
-	}
-}
-
-.payment-mode {
-	cursor: pointer;
-	font-family: sans-serif;
-	font-size: 15px;
-}
-
-.pos-payment-row .col-xs-6 {
-	padding :15px;
-}
-
-.pos-payment-row {
-	border-bottom:1px solid #d1d8dd;
-    	margin: 2px 0px 5px 0px;
-	height: 60px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-}
-
-.pos-payment-row:hover, .pos-keyboard-key:hover{
-	background-color: #FAFBFC;
-	cursor: pointer;
-}
-
-.pos-keyboard-key, .delete-btn {
-	border: 1px solid #d1d8dd;
-	height:85px;
-	width:85px;
-	margin:10px 10px;
-	font-size:24px;
-	font-weight:200;
-	background-color: #FDFDFD;
-	border-color: #e8e8e8;
-}
-
-.numeric-keypad {
-	border: 1px solid #d1d8dd;
-	height:69px;
-	width:69px;
-	font-size:20px;
-	font-weight:200;
-	background-color: #FDFDFD;
-	border-color: #e8e8e8;
-	margin-left:-4px;
-}
-
-.pos-pay {
-	height:69px;
-	width:69px;
-	font-size:17px;
-	font-weight:200;
-	margin-left:-4px;
-}
-
-
-.numeric-keypad {
-	height: 60px;
-	width: 60px;
-	font-size: 20px;
-	font-weight: 200;
-	border-radius: 0;
-	background-color: #fff;
-	margin-left:-4px;
-}
-
-.numeric_keypad {
-	margin-left: -15px;
-
-	& > .row > button {
-		border: none;
-		border-right: 1px solid @border-color;
-		border-bottom: 1px solid @border-color;
-
-		&:first-child {
-			border-left: 1px solid @border-color;
-		}
-	}
-
-	& > .row:first-child > button {
-		border-top: 1px solid @border-color;
-	}
-}
-
-.pos-pay {
-	background-color: @brand-primary;
-	border: none;
-}
-
-.multimode-payments {
-	padding-left: 30px;
-}
-
-.payment-toolbar {
-	padding-right: 30px;
-}
-
-.list-row-head.pos-invoice-list {
-	border-top: 1px solid @border-color;
-}
-
-body[data-route="pos"] .modal-dialog {
-	width: 750px;
-
-	@media (max-width: @screen-xs) {
-		width: auto;
-
-		.modal-content {
-			height: auto;
-		}
-	}
-}
-
-@media (max-width: @screen-xs) {
-	.amount-row h3 {
-		font-size: 15px;
-	}
-	.pos-keyboard-key, .delete-btn {
-		height: 50px;
-	}
-	.multimode-payments {
-		padding-left: 15px;
-	}
-	.payment-toolbar {
-		padding-right: 15px;
-	}
-}
-
-.amount-label {
-	font-size: 16px;
-}
-
-.selected-payment-mode {
-	background-color: #FAFBFC;
-	cursor: pointer;
-}
-
-.pos-invoice-list {
-	padding: 15px 10px;
-}
-
-.write_off_amount, .change_amount {
-	margin: 15px;
-	width: 130px;
-}
-
 // assessment tool
 .frappe-control[data-fieldname='result_html'] {
 	overflow: scroll;
@@ -315,131 +62,336 @@ body[data-route="pos"] .modal-dialog {
 	}
 }
 
-.pos-list-row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	padding: 9px 15px;
-	font-size: 12px;
-	margin: 0px;
-	border-bottom: 1px solid @border-color;
+/* pos */
 
-	.cell {
-		display: table-cell;
-		vertical-align: middle;
+body[data-route="pos"] {
+
+	.pos-bill-toolbar {
+		padding: 10px 0px;
+		height: 51px;
 	}
 
-	.subject {
-		width: 40%
+	.pos-bill-item:hover, .list-customers-table > .pos-list-row:hover {
+		background-color: #f5f7fa;
+		cursor: pointer;
 	}
 
-	.list-row-checkbox, .list-select-all {
-		margin-right: 7px;
+	.pos-item-qty {
+		display: inline-block;
 	}
-}
 
-.pos-bill-header {
-	background-color: #f5f7fa;
-	border: 1px solid @border-color;
-	padding: 13px 15px;
-}
+	.pos-qty-row > div {
+		padding: 5px 0px;
+	}
 
-.pos-list-row.active {
-	background-color: @light-yellow;
-}
+	.pos-qty-btn {
+		margin-top: 3px;
+		cursor: pointer;
+		font-size: 120%;
+	}
 
-.totals-area {
-	border-right: 1px solid @border-color;
-	border-left: 1px solid @border-color;
-	margin-bottom: 15px;
-}
+	.search-area .form-group {
+		max-width: 100% !important;
+	}
 
-.item-cart-items {
-	height: ~"calc(100vh - 526px)";
-	overflow: auto;
-	border: 1px solid @border-color;
-	border-top: none;
+	.tax-table {
+		margin-bottom: 10px;
+	}
 
-}
-.pos .no-items-message {
-	min-height: 200px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-}
+	.discount-field-col {
+		padding-left: 24px;
+	}
 
-.pos .pos-list-row:last-child {
-	border-bottom: none;
-}
+	.discount-amount-area {
+		.input-group:first-child {
+			margin-bottom: 2px;
+		}
+	}
 
-.pos .form-section-heading {
-	padding: 0;
-}
+	.payment-toolbar {
+		.row {
+			width: 323px;
+			margin: 0 auto;
+		}
+	}
 
-.pos {
-	overflow: hidden;
-}
+	.payment-mode {
+		cursor: pointer;
+		font-family: sans-serif;
+		font-size: 15px;
+	}
 
-.pos .item-list {
-	border: 1px solid @border-color;
-	border-top: none;
-	max-height: ~"calc(100vh - 190px)";
-	overflow: auto;
+	.pos-payment-row .col-xs-6 {
+		padding :15px;
+	}
+
+	.pos-payment-row {
+		border-bottom:1px solid #d1d8dd;
+		margin: 2px 0px 5px 0px;
+		height: 60px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+	}
+
+	.pos-payment-row:hover, .pos-keyboard-key:hover{
+		background-color: #FAFBFC;
+		cursor: pointer;
+	}
+
+	.pos-keyboard-key, .delete-btn {
+		border: 1px solid #d1d8dd;
+		height:85px;
+		width:85px;
+		margin:10px 10px;
+		font-size:24px;
+		font-weight:200;
+		background-color: #FDFDFD;
+		border-color: #e8e8e8;
+	}
+
+	.numeric-keypad {
+		border: 1px solid #d1d8dd;
+		height:69px;
+		width:69px;
+		font-size:20px;
+		font-weight:200;
+		background-color: #FDFDFD;
+		border-color: #e8e8e8;
+		margin-left:-4px;
+	}
+
+	.pos-pay {
+		height:69px;
+		width:69px;
+		font-size:17px;
+		font-weight:200;
+		margin-left:-4px;
+	}
+
+	.numeric-keypad {
+		height: 60px;
+		width: 60px;
+		font-size: 20px;
+		font-weight: 200;
+		border-radius: 0;
+		background-color: #fff;
+		margin-left:-4px;
+	}
+
+	.numeric_keypad {
+		margin-left: -15px;
+
+		& > .row > button {
+			border: none;
+			border-right: 1px solid @border-color;
+			border-bottom: 1px solid @border-color;
+
+			&:first-child {
+				border-left: 1px solid @border-color;
+			}
+		}
+
+		& > .row:first-child > button {
+			border-top: 1px solid @border-color;
+		}
+	}
+
+	.pos-pay {
+		background-color: @brand-primary;
+		border: none;
+	}
+
+	.multimode-payments {
+		padding-left: 30px;
+	}
+
+	.payment-toolbar {
+		padding-right: 30px;
+	}
+
+	.list-row-head.pos-invoice-list {
+		border-top: 1px solid @border-color;
+	}
+
+	.modal-dialog {
+		width: 750px;
+
+		@media (max-width: @screen-xs) {
+			width: auto;
+
+			.modal-content {
+				height: auto;
+			}
+		}
+	}
 
 	@media (max-width: @screen-xs) {
-		max-height: initial;
+		.amount-row h3 {
+			font-size: 15px;
+		}
+		.pos-keyboard-key, .delete-btn {
+			height: 50px;
+		}
+		.multimode-payments {
+			padding-left: 15px;
+		}
+		.payment-toolbar {
+			padding-right: 15px;
+		}
 	}
 
-	.image-field {
-		height: 140px;
+	.amount-label {
+		font-size: 16px;
 	}
 
-	.pos-item-wrapper {
-		position: relative;
+	.selected-payment-mode {
+		background-color: #FAFBFC;
+		cursor: pointer;
 	}
 
-	.price-info {
-		width: 99%;
-		text-align: center;
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		margin: 2px 1px 2px 2px;
-		background-color: rgba(162, 161, 161, 0.1);
+	.pos-invoice-list {
+		padding: 15px 10px;
+	}
+
+	.write_off_amount, .change_amount {
+		margin: 15px;
+		width: 130px;
+	}
+
+	.pos-list-row {
+		display: table;
+		table-layout: fixed;
+		width: 100%;
 		padding: 9px 15px;
+		font-size: 12px;
+		margin: 0px;
+		border-bottom: 1px solid @border-color;
+
+		.cell {
+			display: table-cell;
+			vertical-align: middle;
+
+			&.price-cell {
+				width: 50%;
+			}
+		}
+
+		.subject {
+			width: 40%
+		}
+
+		.list-row-checkbox, .list-select-all {
+			margin-right: 7px;
+		}
 	}
-}
 
-.pos-bill-toolbar {
-	margin-top: 10px;
-}
+	.pos-bill-header {
+		background-color: #f5f7fa;
+		border: 1px solid @border-color;
+		padding: 13px 15px;
+	}
 
-.pos .search-item .form-group {
-	margin: 0;
-}
+	.pos-list-row.active {
+		background-color: @light-yellow;
+	}
 
-.item-list-area .pos-bill-header {
-	padding: 5px;
-	padding-left: 15px;
-}
+	.totals-area {
+		border-right: 1px solid @border-color;
+		border-left: 1px solid @border-color;
+		margin-bottom: 15px;
+	}
 
-.pos-selected-item-action > .pos-list-row {
-	border: none;
-}
+	.tax-area .pos-list-row {
+		border: none;
+	}
 
-.edit-customer-btn {
-	position: absolute;
-	right: 57px;
-	top: 15px;
-	z-index: 100;
-}
+	.item-cart-items {
+		height: ~"calc(100vh - 526px)";
+		overflow: auto;
+		border: 1px solid @border-color;
+		border-top: none;
+	}
 
-.btn-more {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	background-color: @light-bg;
-	min-height: 200px;
+	.no-items-message {
+		min-height: 200px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.pos-list-row:last-child {
+		border-bottom: none;
+	}
+
+	.form-section-heading {
+		padding: 0;
+	}
+
+	.item-list {
+		border: 1px solid @border-color;
+		border-top: none;
+		max-height: ~"calc(100vh - 190px)";
+		overflow: auto;
+
+		@media (max-width: @screen-xs) {
+			max-height: initial;
+		}
+
+		.image-field {
+			height: 140px;
+		}
+
+		.pos-item-wrapper {
+			position: relative;
+		}
+
+		.price-info {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			margin: 0 0 15px 15px;
+			background-color: rgba(141, 153, 166, 0.6);
+			padding: 5px 9px;
+			border-radius: 3px;
+			color: #fff;
+		}
+	}
+
+	.pos-bill-toolbar {
+		margin-top: 10px;
+	}
+
+	.search-item .form-group {
+		margin: 0;
+	}
+
+	.item-list-area .pos-bill-header {
+		padding: 5px;
+		padding-left: 15px;
+	}
+
+	.pos-selected-item-action > .pos-list-row {
+		border: none;
+	}
+
+	.edit-customer-btn {
+		position: absolute;
+		right: 57px;
+		top: 15px;
+		z-index: 100;
+	}
+
+	.btn-more {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		background-color: @light-bg;
+		min-height: 200px;
+	}
+
+	.collapse-btn {
+		cursor: pointer;
+	}
 }
\ No newline at end of file