[web] style options menu

The other menus are WIP.

1 files changed, 50 insertions, 8 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index 4813b933..90907ec7 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,24 +1,66 @@
 @import (reference) '../../node_modules/bootstrap/less/variables.less';
 @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less';
 
+@menu-height: 85px;
+
+
 header {
-    padding-top: 0.5em;
+    padding-top: 6px;
     background-color: white;
     @separator-color: lighten(grey, 15%);
-    .menu {
-        padding: 10px;
+    menu {
+        display: block;
+        margin: 0;
+        padding: 0;
         border-bottom: solid @separator-color 1px;
+        height: @menu-height;
+        overflow: visible; // search help context laps over.
     }
 }
 
-@menu-row-gutter-width: 5px;
-.menu-row {
-    .make-row(@menu-row-gutter-width);
+.menu-group {
+    @description-height: 16px;
+    display: inline-block;
+    height: @menu-height;
+    vertical-align: top;
+
+    .entry {
+        height: (@menu-height - @description-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;
+        }
+    }
+    .description {
+        height: @description-height;
+        text-align: center;
+        font-size: 0.9rem;
+    }
+}
+.menu-group + .menu-group:before {
+    @space: 10px;
+    content: " ";
+    border-left: solid 1px lighten(grey, 40%);
+    margin-top: @space;
+    height: @menu-height - @space*2;
+    position: absolute;
+}
+
+@menu-main-gutter-width: 5px;
+.menu-main {
+    .make-row(@menu-main-gutter-width);
 }
 
 .filter-input {
-    .make-sm-column(3, @menu-row-gutter-width);
-    margin-bottom:5px;
+    .make-sm-column(4, @menu-main-gutter-width);
 }
 
 .filter-input .popover {