Merge pull request #151 from picturepan2/feature/components v0.2.5

Feature/components

1 files changed, 29 insertions, 20 deletions

diff --git a/src/menus.less b/src/menus.less
index 60b2f3b..1849a32 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,8 +1,8 @@
 // Menus
 .menu {
-  background: #fff;
+  background: @light-bg-color;
   border-radius: @border-radius;
-  display: block;
+  list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: .8rem;
@@ -13,55 +13,64 @@
 
   .menu-item {
     border-radius: @border-radius;
-    display: block;
-    line-height: 2.4rem;
     margin-top: 0;
-    padding: .3rem .8rem;
+    padding: 0 .8rem;
     text-decoration: none;
     user-select: none;
 
-    a {
+    & > a {
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.3rem -.8rem;
-      padding: .3rem .8rem;
+      line-height: 2.4rem;
+      margin: 0 -.8rem;
+      padding: .4rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-link-color;
+        color: @link-color;
       }
       &:active,
       &.active {
-        background: @core-secondary-color;
-        color: darken(@core-link-color, 5%);
+        background: @light-primary-color;
+        color: @dark-link-color;
       }
     }
   }
 
   .menu-header {
-    color: lighten(@body-font-color, 60%);
-    display: block;
+    color: @light-gray-color;
     font-size: 1.2rem;
-    line-height: 1.8rem;
+    line-height: 2rem;
     margin-top: 0;
-    padding: .2rem .8rem;
+    padding: .2rem 0;
+    position: relative;
+
     &::after {
-      border-bottom: .1rem solid @core-border-color;
+      border-bottom: .1rem solid @border-color;
       content: "";
       display: block;
       height: .1rem;
-      transform: translateY(-1rem);
+      position: absolute;
+      top: 50%;
       width: 100%;
     }
 
     .menu-header-text {
-      background: #fff;
+      background: @light-bg-color;
       display: inline-block;
-      margin-left: -.6rem;
-      padding: 0 .6rem;
+      padding: 0 .8rem;
       position: relative;
       z-index: 99;
     }
   }
+
+  .menu-badge {
+    float: right;
+    padding: .4rem 0;
+
+    .label {
+      margin: .2rem 0;
+    }
+  }
 }