From 23ff8808b95c56704c729b7357d33f6f5e38ea0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?=
 <fvdessen@gmail.com>
Date: Thu, 23 Apr 2015 00:40:25 +0200
Subject: [PATCH] [IMP] point_of_sale: various styling improvements

---
 addons/point_of_sale/static/src/css/pos.css | 83 +++++++++++++--------
 addons/point_of_sale/static/src/xml/pos.xml |  6 +-
 2 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 9926beb09ba..f9b79713069 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -720,6 +720,11 @@ td {
     background: #6EC89B;
     border-color: transparent;
 }
+.pos .mode-button.selected-mode:hover {
+    background: #6EC89B;
+    color: white;
+    border-color: transparent;
+}
 
 /*  ********* The right pane contains the screens and headers ********* */
 
@@ -796,6 +801,14 @@ td {
     font-size: 14px;
     cursor: pointer;
 }
+.pos .breadcrumb-button.breadcrumb-home {
+    line-height: 50px;
+    padding: 0;
+    width: 50px;
+    font-size: 25px;
+    text-align: center;
+}
+
 .pos .breadcrumb-arrow{
     width: 28px;
 }
@@ -2047,14 +2060,10 @@ td {
 }
 .pos .modal-dialog .popup{
     position: absolute;
-    left:50%;
-    top:50%;
+    top: 0; left: 0; right: 0; bottom: 0;
+    margin: auto;
     width:500px;
     height:400px;
-    margin-left: -250px;
-    margin-top: -200px;
-    padding:10px;
-    padding-top:20px;
     text-align:center;
     font-size:20px;
     font-weight:bold;
@@ -2065,10 +2074,18 @@ td {
     font-family: 'Lato';
     font-family: Lato;
 }
+.pos .popup .title {
+    background: rgba(255,255,255,0.5);
+    margin: 0;
+    padding: 20px;
+    border-radius: 3px 3px 0px 0px;
+    border-bottom: solid 1px rgba(60,60,60,0.1);
+}
 .pos .popup .body {
     font-weight: normal;
     font-size: 18px;
-    margin: 0px 16px 16px 16px;
+    margin: 16px;
+    margin-top: 20px;
 }
 .pos .popup .body.traceback {
     height: 264px;
@@ -2086,7 +2103,7 @@ td {
     left:0;
     width:100%;
     height:60px;
-    border-top: 1px solid #E0DDDD;
+    border-top: solid 1px rgba(60,60,60,0.1);
 }
 .pos .popup .button{
     float:right;
@@ -2095,7 +2112,6 @@ td {
     line-height:40px;
     text-align:center;
     border-radius: 2px;
-    margin:3px;
     margin-top:10px;
     margin-right:10px;
 
@@ -2104,9 +2120,9 @@ td {
 
     cursor: pointer;
 
-    border: 1px solid #cacaca;
+    border: solid 1px rgba(60,60,60,0.1);
 
-    background: #e2e2e2;
+    background: rgba(0,0,0,0.05);
 }
 .pos .popup .button:active{
     color: white;
@@ -2118,6 +2134,7 @@ td {
     -webkit-transition-timing-function: ease-out;
 }
 
+
 .pos .popup .button.big-left{
     position:absolute;
     top: 120px;
@@ -2160,17 +2177,24 @@ td {
     outline: none;
     box-shadow: 0px 0px 0px 3px #6EC89B;
 }
-.pos .popup.popup-selection .title {
-    margin-top: 0;
+.pos .popup.popup-error {
+    background-color: #F3BBBB;
+    color: rgb(168, 89, 89);
+    box-shadow: 0px 10px 20px rgba(92,51,51,0.4);
+}
+.pos .popup.popup-error .title {
+    color: white;
+    background: rgba(255, 76, 76, 0.5);
 }
 .pos .popup.popup-selection .selection {
     overflow-y: auto;
-    max-height: 305px;
+    max-height: 273px;
     font-size: 16px;
-    margin: 0 -10px;
     width: auto;
     line-height: 50px;
-    border-top: dashed 1px rgb(215,215,215);
+    margin-top: -1px;
+    border-top: solid 3px #6EC89B;
+    
 }
 .pos .popup.popup-selection .selection-item {
     width: auto;
@@ -2184,22 +2208,26 @@ td {
 }
 .pos .popup.popup-number {
     width: 300px;
-    margin-left: -150px;
+    height: 450px;
 }
-.pos .popup-number .footer{
+.pos .footer.centered {
     text-align: center;
 }
-.pos .popup-number .footer .button{
+.pos .footer.centered .button {
     float: none;
     display: inline-block;
+    margin-left: 3px;
+    margin-right: 3px;
 }
 .pos .popup-numpad {
     margin: 12px auto;
-    text-align: left;
+    text-align: center;
     width: 254px;
 }
-.pos .popup-number .title {
-    margin-top: 0;
+.pos .popup-number .title,
+.pos .popup-textinput .title
+{
+    margin-bottom: 20px;
 }
 .pos .popup-numpad .input-button,
 .pos .popup-numpad .mode-button {
@@ -2220,8 +2248,7 @@ td {
 }
 
 .pos .popup.popup-password {
-    width: 250px;
-    margin-left: -125;
+    width: 254px;
 }
 .pos .popup-password .mode-button.add,
 .pos .popup-password .input-button.dot {
@@ -2229,18 +2256,12 @@ td {
 }
 .pos .popup-password .popup-numpad {
     width: 190px;
+    text-align: left;
 }
 .pos .popup-password .popup-input {
     width: 70%;
     -webkit-text-security: disc;
  }
-.pos .popup-password .footer{
-    text-align: center;
-}
-.pos .popup-password .footer .button{
-    float: none;
-    display: inline-block;
-}
 
 .pos .popup .body ul,
 .pos .popup ul.body {
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index 06a5bb74545..6633959aa32 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -159,8 +159,8 @@
         <header class='rightpane-header'>
             <div class="breadcrumbs">
                 <span class="breadcrumb">
-                    <span class=" breadcrumb-button js-category-switch">
-                        <img src="/point_of_sale/static/src/img/home.png" class="breadcrumb-homeimg" />
+                    <span class=" breadcrumb-button breadcrumb-home js-category-switch">
+                        <i class='fa fa-home'></i>
                     </span>
                 </span>
                 <t t-foreach="widget.breadcrumb" t-as="category">
@@ -983,7 +983,7 @@
                     </button>
                     <br />
                 </div>
-                <div class="footer">
+                <div class="footer centered">
                     <div class="button cancel">
                         Cancel 
                     </div>