New UI merge in progress

public/ng/less/ui/menu.less

@@ -0,0 +1,158 @@
+@import "var";
+
+// lined menu
+
+ul.menu {
+  > li {
+    list-style: none;
+    > a {
+      padding: .8em 1.2em;
+      &:hover {
+        background-color: @lineMenuHoverBgColor;
+        color: @lineMenuHoverFontColor;
+      }
+    }
+    &.current > a,
+    &.hover > a {
+      color: @lineMenuHoverFontColor;
+    }
+  }
+  > li.head {
+    font-weight: bold;
+    padding: .8em 1.2em;
+  }
+  > li.down:hover {
+    > ul.menu-down {
+      display: block;
+    }
+  }
+  > li.border-bottom {
+    border-bottom: 1px solid @menuBorderColor;
+    height: 0;
+    margin: .5em 0;
+  }
+}
+
+ul.menu-line {
+  > li,
+  > li > a {
+    display: inline-block;
+  }
+  > li.down {
+    position: relative;
+    > a:after {
+      content: "\25BE";
+      margin-left: .4em;
+    }
+    > ul.menu-down {
+      top: 2.1em;
+      width: 150%;
+    }
+  }
+  > li.hover {
+    position: relative;
+    > a:after {
+      position: absolute;
+      content: "\25B4";
+      left: 50%;
+      bottom: -1.1em;
+      margin-left: -4px;
+    }
+  }
+}
+
+ul.menu-vertical,
+ul.menu-down {
+  > li > a,
+  > li.head {
+    display: block;
+    padding: .4em 1.2em;
+  }
+  > li.down {
+    position: relative;
+    > a:after {
+      content: "\25B8";
+      position: absolute;
+      right: .6em;
+    }
+  }
+  > li.hover {
+    position: relative;
+    > a:after {
+      content: "\25B8";
+      position: absolute;
+      left: .5em;
+    }
+  }
+}
+
+ul.menu-border,
+ul.menu-down {
+  border: 1px solid @menuBorderColor;
+  > li.head {
+    border-bottom: 1px solid @menuBorderColor;
+  }
+}
+
+ul.menu-down {
+  position: absolute;
+  display: none;
+  z-index: 99;
+  box-shadow: 0 0 2px @menuShadowColor;
+  background-color: @menuDownBgColor;
+}
+
+ul.menu-radius {
+  border-radius: .3em;
+  > li {
+    &:first-child {
+      border-top-left-radius: .3em;
+      border-top-right-radius: .3em;
+      > a {
+        border-top-left-radius: .2em;
+        border-top-right-radius: .2em;
+      }
+    }
+    &:last-child {
+      border-bottom-left-radius: .3em;
+      border-bottom-right-radius: .3em;
+      > a {
+        border-bottom-left-radius: .2em;
+        border-bottom-right-radius: .2em;
+      }
+    }
+  }
+}
+
+.drop {
+  position: relative;
+  &:hover {
+    > .drop-down {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 200%;
+      display: block;
+    }
+  }
+  > .drop-down {
+    display: none;
+    border: 1px solid @dropBorderColor;
+    box-shadow: 0 0 3px @menuShadowColor;
+    background-color: @dropDownBgColor;
+  }
+}
+
+.drop-bottom {
+  &:after {
+    content: "\25BE";
+    margin-left: .4em;
+  }
+}
+
+.drop-top {
+  &:after {
+    content: "\25B4";
+    margin-left: .4em;
+  }
+}