add menu header code

2 files changed, 46 insertions, 5 deletions

diff --git a/src/base.less b/src/base.less
index d197d3b..3eda371 100644
--- a/src/base.less
+++ b/src/base.less
@@ -22,6 +22,6 @@ a {
 
   &:hover,
   &:focus {
-    color: darken(@core-link-color, 10%);
+    color: darken(@core-link-color, 25%);
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 8235b4a..cb69690 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -13,16 +13,57 @@
   .menu-item {
     display: block;
     padding: .2rem 1rem;
+    margin-top: 0;
     border-radius: 3px;
     color: @body-font-color;
     line-height: 2.4rem;
-    cursor: pointer;
     text-decoration: none;
     user-select: none;
 
-    &:hover,
-    &:focus {
-      background-color: @core-border-color;
+    a {
+      display: block;
+      margin: -.2rem -1rem;
+      padding: .2rem 1rem;
+      border-radius: 3px;
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        background-color: @core-border-color;
+      }
+    }
+  }
+
+  .menu-header {
+    display: block;
+    padding: .2rem 1rem;
+    margin-top: 0;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    color: lighten(@body-font-color, 60%);
+
+    .menu-header-text {
+      display: inline-block;
+      padding: 0 .6rem;
+      margin-left: -.6rem;
+      background-color: #fff;
+      position: relative;
+      z-index: 99;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1px;
+      transform: translateY(-10px);
+      border-bottom: 1px solid @core-border-color;
     }
   }
+
+  .divider {
+    display: block;
+    border-bottom: 1px solid @core-border-color;
+    margin: .5rem;
+  }
 }