Badges, navs, and more

dist/css/bootstrap.css

@@ -2988,7 +2988,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a {
   position: relative;
   display: block;
-  padding: 10px 15px;
+  padding: .5em 1em;
+  line-height: 1.5;
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -3903,29 +3904,34 @@ a.label:focus {
   background-color: #c9302c;
 }
 .badge {
+  position: relative;
+  top: -.1em;
   display: inline-block;
-  min-width: 10px;
+  padding-right: .6em;
-  padding: 3px 7px;
+  padding-left: .6em;
-  font-size: .85rem;
+  font-size: .75em;
   font-weight: bold;
-  line-height: 1;
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  vertical-align: baseline;
   background-color: #818a91;
-  border-radius: 10px;
+  border-radius: 2em;
+  /*  .btn & {
+    position: relative;
+    top: -1px;
+  }
+*/
 }
 .badge:empty {
   display: none;
 }
-.btn .badge {
+.badge.pull-left,
-  position: relative;
+.badge.pull-right {
-  top: -1px;
+  top: .2em;
 }
 .btn-xs .badge {
-  top: 0;
+  /*top: 0;*/
-  padding: 1px 5px;
+  /*padding: 1px 5px;*/
 }
 a.badge:hover,
 a.badge:focus {

docs/_includes/components/badges.html

@@ -43,9 +43,20 @@
       </li>
     </ul>
     <br>
-    <button class="btn btn-primary" type="button">
+    <p>
-      Messages <span class="badge">4</span>
+      <button class="btn btn-primary btn-lg" type="button">
-    </button>
+        Large button <span class="badge">4</span>
+      </button>
+      <button class="btn btn-primary" type="button">
+        Button <span class="badge">4</span>
+      </button>
+      <button class="btn btn-primary btn-sm" type="button">
+        Small button <span class="badge">4</span>
+      </button>
+      <button class="btn btn-primary btn-xs" type="button">
+        Extra small <span class="badge">4</span>
+      </button>
+    </p>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked" role="tablist">

docs/assets/css/src/docs.css

@@ -949,32 +949,41 @@ h1[id] {
 
 .bs-example {
   position: relative;
-  padding-top: 3rem;
+  padding: 1.5rem;
   margin-top: 1rem;
+  margin-bottom: -1rem;
+  border: solid #f7f7f9;
+  border-width: .2rem 0 0;
 }
 /* Echo out a label for the example */
 .bs-example:before {
   position: absolute;
   top: 0;
-  display: inline-block;
+  display: none;
-  padding: .5rem .75rem;
+  padding: .4rem .75rem;
-  font-size: .8rem;
+  font-size: .75rem;
   font-weight: bold;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .1rem;
   content: "Example";
-  background-color: #818a91;
+  background-color: #eb4c82;
   border-radius: .2rem;
 }
 
 /* Tweak display of the code snippets when following an example */
 .bs-example + .highlight:before {
-  position: absolute;
+/*  position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
+*/}
+
+@media (min-width: 480px) {
+  .bs-example {
+    border-width: .2rem;
+  }
 }
 
 /* Undo width of container */

docs/assets/js/src/application.js

@@ -57,7 +57,7 @@
     // }, 100)
 
     // theme toggler
-    ;(function () {
+    (function () {
       var stylesheetLink = $('#bs-theme-stylesheet')
       var themeBtn = $('.bs-docs-theme-toggle')
 
@@ -81,7 +81,7 @@
           localStorage.removeItem('previewTheme')
         }
       })
-    })();
+    })
 
     // Tooltip and popover demos
     $('.tooltip-demo').tooltip({

docs/dist/css/bootstrap.css

@@ -2988,7 +2988,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a {
   position: relative;
   display: block;
-  padding: 10px 15px;
+  padding: .5em 1em;
+  line-height: 1.5;
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -3903,29 +3904,34 @@ a.label:focus {
   background-color: #c9302c;
 }
 .badge {
+  position: relative;
+  top: -.1em;
   display: inline-block;
-  min-width: 10px;
+  padding-right: .6em;
-  padding: 3px 7px;
+  padding-left: .6em;
-  font-size: .85rem;
+  font-size: .75em;
   font-weight: bold;
-  line-height: 1;
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  vertical-align: baseline;
   background-color: #818a91;
-  border-radius: 10px;
+  border-radius: 2em;
+  /*  .btn & {
+    position: relative;
+    top: -1px;
+  }
+*/
 }
 .badge:empty {
   display: none;
 }
-.btn .badge {
+.badge.pull-left,
-  position: relative;
+.badge.pull-right {
-  top: -1px;
+  top: .2em;
 }
 .btn-xs .badge {
-  top: 0;
+  /*top: 0;*/
-  padding: 1px 5px;
+  /*padding: 1px 5px;*/
 }
 a.badge:hover,
 a.badge:focus {

less/badges.less

@@ -5,16 +5,16 @@
 
 // Base class
 .badge {
+  position: relative;
+  top: -.1em;
   display: inline-block;
-  min-width: 10px;
+  padding-left: .6em;
-  padding: 3px 7px;
+  padding-right: .6em;
-  font-size: @font-size-small;
+  font-size: .75em;
   font-weight: @badge-font-weight;
   color: @badge-color;
-  line-height: @badge-line-height;
-  vertical-align: baseline;
-  white-space: nowrap;
   text-align: center;
+  white-space: nowrap;
   background-color: @badge-bg;
   .border-radius(@badge-border-radius);
 
@@ -23,14 +23,20 @@
     display: none;
   }
 
+  &.pull-left,
+  &.pull-right {
+    top: .2em;
+  }
+
   // Quick fix for badges in buttons
-  .btn & {
+/*  .btn & {
     position: relative;
     top: -1px;
   }
+*/
   .btn-xs & {
-    top: 0;
+    /*top: 0;*/
-    padding: 1px 5px;
+    /*padding: 1px 5px;*/
   }
 
   // Hover state, but only for links

less/navs.less

@@ -20,6 +20,8 @@
       position: relative;
       display: block;
       padding: @nav-link-padding;
+      line-height: @line-height-base;
+
       &:hover,
       &:focus {
         text-decoration: none;

less/variables.less

@@ -369,7 +369,7 @@
 //##
 
 //=== Shared nav styles
-@nav-link-padding:                          10px 15px;
+@nav-link-padding:                          .5em 1em;
 @nav-link-hover-bg:                         @gray-lighter;
 
 @nav-disabled-link-color:                   @gray-light;
@@ -675,7 +675,7 @@
 
 @badge-font-weight:           bold;
 @badge-line-height:           1;
-@badge-border-radius:         10px;
+@badge-border-radius:         2em;
 
 
 //== Breadcrumbs