namespace progress bars and labels classes

docs/assets/css/bootstrap.css

@@ -3003,16 +3003,16 @@ a.thumbnail:hover {
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.label.important {
+.label-important {
   background-color: #b94a48;
 }
-.label.warning {
+.label-warning {
   background-color: #f89406;
 }
-.label.success {
+.label-success {
   background-color: #468847;
 }
-.label.info {
+.label-info {
   background-color: #3a87ad;
 }
 @-webkit-keyframes progress-bar-stripes {
@@ -3105,7 +3105,7 @@ a.thumbnail:hover {
   -moz-animation: progress-bar-stripes 2s linear infinite;
   animation: progress-bar-stripes 2s linear infinite;
 }
-.progress.danger .bar {
+.progress-danger .bar {
   background-color: #dd514c;
   background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
   background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
@@ -3116,7 +3116,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
 }
-.progress.danger.striped .bar {
+.progress-danger.progress-striped .bar {
   background-color: #ee5f5b;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3125,7 +3125,7 @@ a.thumbnail:hover {
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
-.progress.success .bar {
+.progress-success .bar {
   background-color: #5eb95e;
   background-image: -moz-linear-gradient(top, #62c462, #57a957);
   background-image: -ms-linear-gradient(top, #62c462, #57a957);
@@ -3136,7 +3136,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
 }
-.progress.success.striped .bar {
+.progress-success.progress-striped .bar {
   background-color: #62c462;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3145,7 +3145,7 @@ a.thumbnail:hover {
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
-.progress.info .bar {
+.progress-info .bar {
   background-color: #4bb1cf;
   background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
   background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
@@ -3156,7 +3156,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
 }
-.progress.info.striped .bar {
+.progress-info.progress-striped .bar {
   background-color: #5bc0de;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

docs/components.html

@@ -1007,34 +1007,34 @@
       </tr>
       <tr>
         <td>
-          <span class="label success">New</span>
+          <span class="label label-success">New</span>
         </td>
         <td>
-          <code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;New&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label warning">Warning</span>
+          <span class="label label-warning">Warning</span>
         </td>
         <td>
-          <code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
+          <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label important">Important</span>
+          <span class="label label-important">Important</span>
         </td>
         <td>
-          <code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
+          <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label info">Info</span>
+          <span class="label label-info">Info</span>
         </td>
         <td>
-          <code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
+          <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
         </td>
       </tr>
     </tbody>
@@ -1307,12 +1307,12 @@
     <div class="span4">
       <h3>Striped</h3>
       <p>Uses a gradient to create a striped effect.</p>
-      <div class="progress info striped">
+      <div class="progress progress-info progress-striped">
         <div class="bar" style="width: 20%;"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress info
+&lt;div class="progress progress-info
-     striped"&gt;
+     progress-striped"&gt;
   &lt;div class="bar"
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1321,12 +1321,12 @@
     <div class="span4">
       <h3>Animated</h3>
       <p>Takes the striped example and animates it.</p>
-      <div class="progress danger active striped">
+      <div class="progress progress-danger progress-striped active">
         <div class="bar" style="width: 45%"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress danger
+&lt;div class="progress progress-danger
-     striped active"&gt;
+     progress-striped active"&gt;
   &lt;div class="bar"
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1338,18 +1338,18 @@
   <div class="row">
     <div class="span4">
       <h3>Additional colors</h3>
-      <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
+      <p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
       <ul>
-        <li><code>.info</code></li>
+        <li><code>.progress-info</code></li>
-        <li><code>.success</code></li>
+        <li><code>.progress-success</code></li>
-        <li><code>.danger</code></li>
+        <li><code>.progress-danger</code></li>
       </ul>
       <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
     </div>
     <div class="span4">
       <h3>Behavior</h3>
       <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
-      <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
+      <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
     </div>
     <div class="span4">
       <h3>Browser support</h3>
@@ -1398,10 +1398,6 @@
 </section>
 
 
-
-
-
-
      <!-- Footer
       ================================================== -->
       <footer class="footer">

docs/templates/pages/components.mustache

@@ -935,34 +935,34 @@
       </tr>
       <tr>
         <td>
-          <span class="label success">{{_i}}New{{/i}}</span>
+          <span class="label label-success">{{_i}}New{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label warning">{{_i}}Warning{{/i}}</span>
+          <span class="label label-warning">{{_i}}Warning{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label important">{{_i}}Important{{/i}}</span>
+          <span class="label label-important">{{_i}}Important{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label info">{{_i}}Info{{/i}}</span>
+          <span class="label label-info">{{_i}}Info{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
     </tbody>
@@ -1235,12 +1235,12 @@
     <div class="span4">
       <h3>{{_i}}Striped{{/i}}</h3>
       <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
-      <div class="progress info striped">
+      <div class="progress progress-info progress-striped">
         <div class="bar" style="width: 20%;"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress info
+&lt;div class="progress progress-info
-     striped"&gt;
+     progress-striped"&gt;
   &lt;div class="bar"
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1249,12 +1249,12 @@
     <div class="span4">
       <h3>{{_i}}Animated{{/i}}</h3>
       <p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
-      <div class="progress danger active striped">
+      <div class="progress progress-danger progress-striped active">
         <div class="bar" style="width: 45%"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress danger
+&lt;div class="progress progress-danger
-     striped active"&gt;
+     progress-striped active"&gt;
   &lt;div class="bar"
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1266,18 +1266,18 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Additional colors{{/i}}</h3>
-      <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
+      <p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
       <ul>
-        <li><code>.info</code></li>
+        <li><code>.progress-info</code></li>
-        <li><code>.success</code></li>
+        <li><code>.progress-success</code></li>
-        <li><code>.danger</code></li>
+        <li><code>.progress-danger</code></li>
       </ul>
       <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Behavior{{/i}}</h3>
       <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
-      <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
+      <p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Browser support{{/i}}</h3>
@@ -1324,7 +1324,3 @@
     </div><!--/span-->
   </div><!--/row-->
 </section>
-
-
-
-

less/labels.less

@@ -9,8 +9,8 @@
   text-transform: uppercase;
   background-color: @grayLight;
   .border-radius(3px);
-  &.important { background-color: @errorText; }
-  &.warning   { background-color: @orange; }
-  &.success   { background-color: @successText; }
-  &.info      { background-color: @infoText; }
 }
+.label-important { background-color: @errorText; }
+.label-warning   { background-color: @orange; }
+.label-success   { background-color: @successText; }
+.label-info      { background-color: @infoText; }

less/progress-bars.less

@@ -71,25 +71,25 @@
 // ------
 
 // Danger (red)
-.progress.danger .bar {
+.progress-danger .bar {
   #gradient > .vertical(#ee5f5b, #c43c35);
 }
-.progress.danger.striped .bar {
+.progress-danger.progress-striped .bar {
   #gradient > .striped(#ee5f5b);
 }
 
 // Success (green)
-.progress.success .bar {
+.progress-success .bar {
   #gradient > .vertical(#62c462, #57a957);
 }
-.progress.success.striped .bar {
+.progress-success.progress-striped .bar {
   #gradient > .striped(#62c462);
 }
 
 // Info (teal)
-.progress.info .bar {
+.progress-info .bar {
   #gradient > .vertical(#5bc0de, #339bb9);
 }
-.progress.info.striped .bar {
+.progress-info.progress-striped .bar {
   #gradient > .striped(#5bc0de);
 }