[wip] New POS UI
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
new file mode 100644
index 0000000..d44b17c
--- /dev/null
+++ b/erpnext/public/css/pos.css
@@ -0,0 +1,53 @@
+.pos {
+ padding: 15px;
+}
+.customer-container {
+ padding: 0 15px;
+ display: inline-block;
+ width: 39%;
+ vertical-align: top;
+}
+.item-container {
+ padding: 0 15px;
+ display: inline-block;
+ width: 60%;
+ vertical-align: top;
+}
+.item-group-field {
+ margin-left: 15px;
+}
+.cart-wrapper .list-item__content:not(:first-child) {
+ justify-content: flex-end;
+}
+.cart-items {
+ height: 200px;
+ overflow: auto;
+}
+.fields {
+ display: flex;
+}
+.pos-items-wrapper {
+ max-height: 480px;
+ overflow: auto;
+}
+.pos-item-wrapper {
+ height: 250px;
+}
+.image-view-container {
+ display: block;
+}
+.image-view-container .image-field {
+ height: auto;
+}
+.empty-state {
+ height: 100%;
+ position: relative;
+}
+.empty-state span {
+ position: absolute;
+ color: #8D99A6;
+ font-size: 12px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/erpnext/public/less/pos.less b/erpnext/public/less/pos.less
new file mode 100644
index 0000000..c94f8b5
--- /dev/null
+++ b/erpnext/public/less/pos.less
@@ -0,0 +1,81 @@
+@import "../../../../frappe/frappe/public/less/variables.less";
+
+.pos {
+ // display: flex;
+ padding: 15px;
+}
+
+.customer-container {
+ padding: 0 15px;
+ // flex: 2;
+ display: inline-block;
+ width: 39%;
+ vertical-align: top;
+}
+
+.item-container {
+ padding: 0 15px;
+ // flex: 3;
+ display: inline-block;
+ width: 60%;
+ vertical-align: top;
+}
+
+.item-group-field {
+ margin-left: 15px;
+}
+
+.cart-wrapper {
+ .list-item__content:not(:first-child) {
+ justify-content: flex-end;
+ }
+}
+
+.cart-items {
+ height: 200px;
+ overflow: auto;
+
+ // .list-item {
+ // background-color: @light-yellow;
+ // transition: background-color 1s linear;
+ // }
+
+ // .list-item.added {
+ // background-color: white;
+ // }
+}
+
+.fields {
+ display: flex;
+}
+
+.pos-items-wrapper {
+ max-height: 480px;
+ overflow: auto;
+}
+
+.pos-item-wrapper {
+ height: 250px;
+}
+
+.image-view-container {
+ display: block;
+}
+
+.image-view-container .image-field {
+ height: auto;
+}
+
+.empty-state {
+ height: 100%;
+ position: relative;
+
+ span {
+ position: absolute;
+ color: @text-muted;
+ font-size: @text-medium;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
\ No newline at end of file