From 665de0455cb433c9e3c3b6d6ad72318b46098650 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir <vickashmahabir@gmail.com>
Date: Fri, 18 Jan 2013 17:35:23 -0400
Subject: Change .badge to .counter, make appearance more OSX-ish, and remove
 colors

---
 docs/assets/css/bootstrap.css            | 40 +++++----------------
 docs/components.html                     | 47 ++++---------------------
 docs/templates/pages/components.mustache | 47 ++++---------------------
 less/badges.less                         | 60 --------------------------------
 less/bootstrap.less                      |  2 +-
 less/counters.less                       | 48 +++++++++++++++++++++++++
 6 files changed, 72 insertions(+), 172 deletions(-)
 delete mode 100644 less/badges.less
 create mode 100644 less/counters.less

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 46cd2bc4b..5c7c2bba9 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3991,60 +3991,38 @@ a.thumbnail:hover {
   list-style: none;
 }
 
-.badge {
+.counter {
   display: inline-block;
-  padding: 2px 4px;
+  min-width: 10px;
+  padding: 2px 7px;
   font-size: 11.844px;
   font-weight: bold;
   line-height: 14px;
   color: #fff;
+  text-align: center;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   white-space: nowrap;
   vertical-align: baseline;
   background-color: #999999;
-  border-radius: 3px;
+  border-radius: 10px;
 }
 
-.badge:empty {
+.counter:empty {
   display: none;
 }
 
-a.badge:hover {
+a.counter:hover {
   color: #fff;
   text-decoration: none;
   cursor: pointer;
 }
 
-.badge-danger {
-  background-color: #b94a48;
-}
-
-.badge-danger[href] {
-  background-color: #953b39;
-}
-
-.badge-warning {
-  background-color: #f89406;
-}
-
-.badge-warning[href] {
-  background-color: #c67605;
-}
-
-.badge-success {
-  background-color: #468847;
-}
-
-.badge-success[href] {
-  background-color: #356635;
-}
-
-.btn .badge {
+.btn .counter {
   position: relative;
   top: -1px;
 }
 
-.btn-mini .badge {
+.btn-mini .counter {
   top: 0;
 }
 
diff --git a/docs/components.html b/docs/components.html
index 76590a1ca..d432dda58 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -91,7 +91,7 @@
           <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
           <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
           <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
-          <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
+          <li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li>
           <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
           <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@@ -1333,11 +1333,11 @@
 
 
 
-        <!-- Badges
+        <!-- Counters
         ================================================== -->
-        <section id="badges">
+        <section id="counters">
           <div class="page-header">
-            <h1>Badges</h1>
+            <h1>Counters</h1>
           </div>
 
           <table class="table table-bordered table-striped">
@@ -1354,50 +1354,17 @@
                   Default
                 </td>
                 <td>
-                  <span class="badge">1</span>
+                  <span class="counter">42</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>
-                  Danger
-                </td>
-                <td>
-                  <span class="badge badge-danger">6</span>
-                </td>
-                <td>
-                  <code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
+                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
                 </td>
               </tr>
             </tbody>
           </table>
 
           <h3>Easily collapsible</h3>
-          <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+          <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
         </section>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 0172ada8a..63f8c765b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,7 +22,7 @@
           <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
           <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
           <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
-          <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
+          <li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li>
           <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
           <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@@ -1264,11 +1264,11 @@
 
 
 
-        <!-- Badges
+        <!-- Counters
         ================================================== -->
-        <section id="badges">
+        <section id="counters">
           <div class="page-header">
-            <h1>Badges</h1>
+            <h1>Counters</h1>
           </div>
 
           <table class="table table-bordered table-striped">
@@ -1285,50 +1285,17 @@
                   Default
                 </td>
                 <td>
-                  <span class="badge">1</span>
+                  <span class="counter">42</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>
-                  Danger
-                </td>
-                <td>
-                  <span class="badge badge-danger">6</span>
-                </td>
-                <td>
-                  <code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
+                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
                 </td>
               </tr>
             </tbody>
           </table>
 
           <h3>Easily collapsible</h3>
-          <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+          <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
         </section>
 
diff --git a/less/badges.less b/less/badges.less
deleted file mode 100644
index 5511bc81f..000000000
--- a/less/badges.less
+++ /dev/null
@@ -1,60 +0,0 @@
-//
-// Labels and badges
-// --------------------------------------------------
-
-
-// Base classes
-.badge {
-  display: inline-block;
-  padding: 2px 4px;
-  font-size: @font-size-base * .846;
-  font-weight: bold;
-  line-height: 14px; // ensure proper line-height if floated
-  color: #fff;
-  vertical-align: baseline;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @grayLight;
-  border-radius: 3px;
-
-  // Empty labels/badges collapse
-  &:empty {
-    display: none;
-  }
-}
-
-// Hover state, but only for links
-a.badge {
-  &:hover {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}
-
-// Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.badge {
-  // Important (red)
-  &-danger            { background-color: @state-error-text; }
-  &-danger[href]      { background-color: darken(@state-error-text, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: #f89406; }
-  &-warning[href]     { background-color: darken(#f89406, 10%); }
-  // Success (green)
-  &-success           { background-color: @state-success-text; }
-  &-success[href]     { background-color: darken(@state-success-text, 10%); }
-}
-
-// Quick fix for labels/badges in buttons
-.btn {
-  .badge {
-    position: relative;
-    top: -1px;
-  }
-}
-.btn-mini {
-  .badge {
-    top: 0;
-  }
-}
diff --git a/less/bootstrap.less b/less/bootstrap.less
index d40984230..0a4dd9ca5 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -49,7 +49,7 @@
 @import "alerts.less";
 @import "thumbnails.less";
 @import "media.less";
-@import "badges.less";
+@import "counters.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";
diff --git a/less/counters.less b/less/counters.less
new file mode 100644
index 000000000..6f9cc00fc
--- /dev/null
+++ b/less/counters.less
@@ -0,0 +1,48 @@
+//
+// Labels and badges
+// --------------------------------------------------
+
+
+// Base classes
+.counter {
+  display: inline-block;
+  padding: 2px 7px;
+  font-size: @font-size-base * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: @grayLight;
+  border-radius: 10px;
+  min-width: 10px;
+  text-align: center;
+
+  // Empty labels/badges collapse
+  &:empty {
+    display: none;
+  }
+}
+
+// Hover state, but only for links
+a.counter {
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Quick fix for labels/badges in buttons
+.btn {
+  .counter {
+    position: relative;
+    top: -1px;
+  }
+}
+.btn-mini {
+  .counter {
+    top: 0;
+  }
+}
-- 
cgit v1.2.3


From 964cb773838379319903bcf4b678addc07a55e98 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir <vickashmahabir@gmail.com>
Date: Fri, 18 Jan 2013 17:50:58 -0400
Subject: Make the counter example more meaningful

---
 docs/components.html                     | 2 +-
 docs/templates/pages/components.mustache | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components.html b/docs/components.html
index d432dda58..2040029a3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1354,7 +1354,7 @@
                   Default
                 </td>
                 <td>
-                  <span class="counter">42</span>
+                  <strong>Inbox</strong> <span class="counter">42</span>
                 </td>
                 <td>
                   <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 63f8c765b..0d326d02d 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1285,7 +1285,7 @@
                   Default
                 </td>
                 <td>
-                  <span class="counter">42</span>
+                  <strong>Inbox</strong> <span class="counter">42</span>
                 </td>
                 <td>
                   <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
-- 
cgit v1.2.3


From 67ec13a44c945c61735882ce7e78174ea9e32d74 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir <vickashmahabir@gmail.com>
Date: Fri, 18 Jan 2013 18:03:43 -0400
Subject: Counters example doesn't need to be a table

---
 docs/components.html                     | 28 ++++++----------------------
 docs/templates/pages/components.mustache | 28 ++++++----------------------
 2 files changed, 12 insertions(+), 44 deletions(-)

diff --git a/docs/components.html b/docs/components.html
index 2040029a3..eeb104168 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1340,29 +1340,13 @@
             <h1>Counters</h1>
           </div>
 
-          <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>
-                  <strong>Inbox</strong> <span class="counter">42</span>
-                </td>
-                <td>
-                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="bs-docs-example">
+            <a href="#">Inbox</a> <span class="counter">42</span>
+          </div>
 
+<pre class="prettyprint linenums">
+&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+</pre>
           <h3>Easily collapsible</h3>
           <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 0d326d02d..8bc15d88b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1271,29 +1271,13 @@
             <h1>Counters</h1>
           </div>
 
-          <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>
-                  <strong>Inbox</strong> <span class="counter">42</span>
-                </td>
-                <td>
-                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="bs-docs-example">
+            <a href="#">Inbox</a> <span class="counter">42</span>
+          </div>
 
+<pre class="prettyprint linenums">
+&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+</pre>
           <h3>Easily collapsible</h3>
           <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
-- 
cgit v1.2.3