adding basic badges support

8 files changed, 277 insertions, 10 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index acc5f3201..976400909 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 86914d83d..76a58dfb1 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3216,6 +3216,51 @@ a.thumbnail:hover {
 .label-inverse:hover {
   background-color: #1a1a1a;
 }
+.badge {
+  padding: 2px 10px 3px;
+  font-size: 12.025px;
+  font-weight: bold;
+  color: #ffffff;
+  background-color: #999999;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+.badge:hover {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+.badge-error {
+  background-color: #b94a48;
+}
+.badge-error:hover {
+  background-color: #953b39;
+}
+.badge-warning {
+  background-color: #f89406;
+}
+.badge-warning:hover {
+  background-color: #c67605;
+}
+.badge-success {
+  background-color: #468847;
+}
+.badge-success:hover {
+  background-color: #356635;
+}
+.badge-info {
+  background-color: #3a87ad;
+}
+.badge-info:hover {
+  background-color: #2d6987;
+}
+.badge-inverse {
+  background-color: #333333;
+}
+.badge-inverse:hover {
+  background-color: #1a1a1a;
+}
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 0 0;
diff --git a/docs/components.html b/docs/components.html
index 046bd7280..67353828e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -98,6 +98,7 @@
         </ul>
       </li>
       <li><a href="#labels">Labels</a></li>
+      <li><a href="#badges">Badges</a></li>
       <li><a href="#typography">Typography</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
@@ -1200,6 +1201,102 @@
 
 
 
+<!-- Badges
+================================================== -->
+<section id="badges">
+  <div class="page-header">
+    <h1>Badges <small>Indicators and unread counts</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>About</h3>
+      <p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>Available classes</h3>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Example</th>
+            <th>Markup</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              Default
+            </td>
+            <td>
+              <span class="badge">1</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Success
+            </td>
+            <td>
+              <span class="badge badge-success">2</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Warning
+            </td>
+            <td>
+              <span class="badge badge-warning">4</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Error
+            </td>
+            <td>
+              <span class="badge badge-error">6</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Info
+            </td>
+            <td>
+              <span class="badge badge-info">8</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Inverse
+            </td>
+            <td>
+              <span class="badge badge-inverse">10</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
 <!-- Typographic components
 ================================================== -->
 <section id="typography">
@@ -1592,11 +1689,6 @@
 &lt;/div&gt;
 </pre>
     </div><!--/span-->
-    <div class="span4" style="display: none;">
-      <h2>Badges</h2>
-      <p>Use a badge on an element for an unread count or as a simple indicator.</p>
-<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
-    </div><!--/span-->
     <div class="span4">
       <h2>Close icon</h2>
       <p>Use the generic close icon for dismissing content like modals and alerts.</p>
diff --git a/docs/download.html b/docs/download.html
index b7588ad47..04b1e6bb6 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -108,6 +108,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> Labels</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> Badges</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index a8aaeeff5..54f354932 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,6 +22,7 @@
         </ul>
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
+      <li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
       <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
@@ -1124,6 +1125,102 @@
 
 
 
+<!-- Badges
+================================================== -->
+<section id="badges">
+  <div class="page-header">
+    <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>About</h3>
+      <p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>Available classes</h3>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>{{_i}}Name{{/i}}</th>
+            <th>{{_i}}Example{{/i}}</th>
+            <th>{{_i}}Markup{{/i}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              {{_i}}Default{{/i}}
+            </td>
+            <td>
+              <span class="badge">1</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Success{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-success">2</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Warning{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-warning">4</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Error{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-error">6</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Info{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-info">8</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Inverse{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-inverse">10</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
 <!-- Typographic components
 ================================================== -->
 <section id="typography">
@@ -1516,11 +1613,6 @@
 &lt;/div&gt;
 </pre>
     </div><!--/span-->
-    <div class="span4" style="display: none;">
-      <h2>{{_i}}Badges{{/i}}</h2>
-      <p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
-<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
-    </div><!--/span-->
     <div class="span4">
       <h2>{{_i}}Close icon{{/i}}</h2>
       <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index ae995b8a4..618bb3e1e 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -32,6 +32,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
diff --git a/less/badges.less b/less/badges.less
new file mode 100644
index 000000000..6f74108ee
--- /dev/null
+++ b/less/badges.less
@@ -0,0 +1,35 @@
+// BADGES
+// ------
+
+// Base
+.badge {
+  padding: 2px 10px 3px;
+  font-size: @baseFontSize * .925;
+  font-weight: bold;
+  color: @white;
+  background-color: @grayLight;
+  .border-radius(10px);
+}
+
+// Hover state
+.badge:hover {
+  color: @white;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// Colors
+.badge-error            { background-color: @errorText; }
+.badge-error:hover      { background-color: darken(@errorText, 10%); }
+
+.badge-warning          { background-color: @orange; }
+.badge-warning:hover    { background-color: darken(@orange, 10%); }
+
+.badge-success          { background-color: @successText; }
+.badge-success:hover    { background-color: darken(@successText, 10%); }
+
+.badge-info             { background-color: @infoText; }
+.badge-info:hover       { background-color: darken(@infoText, 10%); }
+
+.badge-inverse          { background-color: @grayDark; }
+.badge-inverse:hover    { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 4b09b7aa6..0d380a0e2 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -53,6 +53,7 @@
 // Components: Misc
 @import "thumbnails.less";
 @import "labels.less";
+@import "badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";