[web] style flow menu

1 files changed, 49 insertions, 23 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index c90e91c4..a026d8aa 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -3,7 +3,6 @@
 
 @menu-height: 85px;
 
-
 header {
     padding-top: 6px;
     background-color: white;
@@ -18,35 +17,62 @@ header {
     }
 }
 
+@menu-legend-height: 16px;
+@menu-group-hmargin: 3px;
 .menu-group {
-    @description-height: 16px;
+    margin: 0 @menu-group-hmargin;
     display: inline-block;
     height: @menu-height;
     vertical-align: top;
+}
 
-    .entry {
-        height: (@menu-height - @description-height)/3;
-        line-height: 1;
-        padding: 0.5rem 1rem;
+.menu-content {
+    height: @menu-height - @menu-legend-height;
+    text-align: center;
 
-        label {
-            font-size: 1.2rem;
-            font-weight: normal;
-            margin: 0;
-        }
-        input[type=checkbox] {
-            margin: 0 2px;
-            vertical-align: middle;
+    > .btn {
+        height: @menu-height - @menu-legend-height;
+        text-align: center;
+        margin: 0 1px;
+        padding: 12px 5px;
+        border: none;
+        border-radius: 0;
+        i {
+            font-size: 20px;
+            display: block;
+            margin: 0 auto 5px;
         }
     }
-    .description {
-        height: @description-height;
-        text-align: center;
-        font-size: 0.9rem;
+}
+
+
+.menu-entry {
+    height: (@menu-height - @menu-legend-height)/3;
+    line-height: 1;
+    padding: 0.5rem 1rem;
+
+    label {
+        font-size: 1.2rem;
+        font-weight: normal;
+        margin: 0;
+    }
+    input[type=checkbox] {
+        margin: 0 2px;
+        vertical-align: middle;
     }
 }
+
+
+.menu-legend {
+    height: @menu-legend-height;
+    text-align: center;
+    font-size: 12px;
+    padding: 0 5px;
+}
+
 .menu-group + .menu-group:before {
     @space: 10px;
+    margin-left: -@menu-group-hmargin;
     content: " ";
     border-left: solid 1px lighten(grey, 40%);
     margin-top: @space;
@@ -68,11 +94,11 @@ header {
 
         padding: 2px 2.5px;
 
-        >.form-control,> .input-group-addon, > .input-group-btn>.btn {
-          height: 23.5px;
-          padding: 1px 5px;
-          font-size: 12px;
-          line-height: 1.5;
+        > .form-control, > .input-group-addon, > .input-group-btn > .btn {
+            height: 23.5px;
+            padding: 1px 5px;
+            font-size: 12px;
+            line-height: 1.5;
         }
     }
 }