Badge component

ghost/admin/assets/sass/components/badges.scss

@@ -0,0 +1,83 @@
+//
+// Badges
+// --------------------------------------------------
+
+
+// Base class
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 2px 4px;
+  box-shadow: 0 0 0 1px #777; // Fix due to our smaller than default button sizes
+  font-size: 1rem;
+  font-weight: inherit;
+  color: #FFF;
+  line-height: 1;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #777;
+  border-radius: 10px;
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  .btn-xs & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // Account for badges in text tags
+  p & {
+    padding: 0px 4px 3px;
+    position: relative;
+    top: -2px;
+    margin-left: -1px;
+  }
+
+  // Account for badges in navs
+  a.list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: #428BCA;
+    background-color: #FFF;
+    box-shadow: 0 0 0 1px #FFF;
+  }
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+  .nav-item & {
+    margin-top: -5px;
+    margin-left: 3px;
+  }
+}
+
+// Hover state, but only for links
+a.badge {
+  &:hover,
+  &:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colours
+.badge.badge-blue {
+  background-color: $blue;
+  box-shadow: 0 0 0 1px $blue;
+}
+.badge.badge-green {
+  background-color: $green;
+  box-shadow: 0 0 0 1px $green;
+}
+.badge.badge-red {
+  background-color: $red;
+  box-shadow: 0 0 0 1px $red;
+}

ghost/admin/assets/sass/patterns/buttons.scss

@@ -96,6 +96,7 @@
     .badge {
         color: $background;
         background-color: $color;
+        box-shadow: 0 0 0 1px $color;
     }
 }
 

ghost/admin/assets/sass/screen.scss

@@ -41,6 +41,7 @@
 @import "components/splitbuttons";
 @import "components/dropdowns";
 @import "components/pagination";
+@import "components/badges";
 
 
 //

ghost/admin/docs/badges.html

@@ -0,0 +1,43 @@
+---
+layout: default
+title: Ghost UI · Making publishing beautiful.
+---
+
+<header class="page-header">
+    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <h2>Home</h2>
+</header>
+
+<section class="page-content">
+
+    <h3>Badges</h3>
+
+    <div style="padding: 1rem; background: #333; overflow: hidden;">
+        <a class="nav-item content active" href="#">
+            <div class="nav-label"><i class="icon-content"></i> Content <span class="badge">42</span></div>
+        </a>
+        <a class="nav-item new-post" href="#">
+            <div class="nav-label"><i class="icon-add"></i> New Post <span class="badge badge-blue">4</span></div>
+        </a>
+        <a class="nav-item settings" href="#">
+            <div class="nav-label"><i class="icon-settings2"></i> Settings <span class="badge badge-red">1</span></div>
+        </a>
+        <a class="nav-item new-post" href="#">
+            <div class="nav-label"><i class="icon-question"></i> Lorem <span class="badge badge-green">2</span></div>
+        </a>
+    </div>
+
+    <hr>
+    <h3>Badges in Buttons</h3>
+
+    <button type="button" class="btn btn-blue">Blue <span class="badge">42</span></button>
+    <a href="#" type="button" class="btn btn-red">Red</a>
+    <a href="#" type="button" class="btn btn-green">Green <span class="badge">5</span></a>
+
+    <hr>
+    <h3>Badges in Text</h3>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam delectus deserunt <span class="badge">5</span> qui atque expedita aliquam error, repellat libero sint eveniet dolor, reiciendis ab quod iure accusamus. Quo assumenda <span class="badge badge-green">3</span> sunt quam nulla harum deserunt ducimus iusto dolorum praesentium laudantium aspernatur illum recusandae aliquid eligendi delectus, veritatis labore, nostrum, excepturi voluptatibus totam?</p>
+
+
+</section>