Update Tiles and Menus code and add Menu Badges

5 files changed, 32 insertions, 21 deletions

diff --git a/src/menus.less b/src/menus.less
index ab09107..513652a 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -2,7 +2,7 @@
 .menu {
   background: @core-light-bg-color;
   border-radius: @border-radius;
-  display: block;
+  list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: .8rem;
@@ -13,19 +13,18 @@
 
   .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 {
@@ -34,34 +33,44 @@
       &:active,
       &.active {
         background: @core-secondary-color;
-        color: darken(@core-link-color, 5%);
+        color: @core-dark-link-color;
       }
     }
   }
 
   .menu-header {
     color: @control-color;
-    display: block;
     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;
       content: "";
       display: block;
       height: .1rem;
       transform: translateY(-1rem);
+      position: absolute;
       width: 100%;
     }
 
     .menu-header-text {
       background: @core-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;
+    }
+  }
 }
diff --git a/src/mixins.less b/src/mixins.less
index ffa7ed3..d335620 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -20,7 +20,7 @@
   border-radius: .2rem;
   display: inline-block;
   line-height: 1;
-  padding: .3rem;
+  padding: .3rem .4rem;
   vertical-align: baseline;
 }
 .label-variant(@color) {
diff --git a/src/tiles.less b/src/tiles.less
index f47cd46..2df3434 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -6,7 +6,8 @@
   margin: 0;
   padding: .5rem 0;
 
-  .tile-icon {
+  .tile-icon,
+  .tile-action {
     flex: 0 0 auto;
   }
   .tile-content {
@@ -18,16 +19,12 @@
       padding-right: 1rem;
     }
   }
-  .tile-action {
-    flex: 0 0 auto;
-  }
   .tile-title {
     font-size: 1.6rem;
     font-weight: 500;
   }
   .tile-meta {
     color: @core-gray-color;
-    font-size: 1.3rem;
   }
 
   &.tile-centered {
@@ -36,5 +33,10 @@
     .tile-content {
       overflow: hidden;
     }
+
+    .tile-title,
+    .tile-meta {
+      .text-ellipsis;
+    }
   }
 }
diff --git a/src/typography.less b/src/typography.less
index 11d8f10..2e0ee99 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -31,7 +31,7 @@ h6 {
 }
 p {
   line-height: 2.4rem;
-  margin: 0 0 1em;
+  margin: 0 0 1rem;
 }
 a,
 ins,
diff --git a/src/utilities.less b/src/utilities.less
index 6bc2aad..458b362 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -2,7 +2,7 @@
 .divider {
   border-bottom: .1rem solid @core-border-color;
   display: block;
-  margin: .5rem 0;
+  margin: .8rem 0;
 }
 
 // Loading