From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: [PATCH] namespace progress bars and labels classes --- docs/assets/css/bootstrap.css | 20 +++++------ docs/components.html | 42 +++++++++++------------- docs/templates/pages/components.mustache | 42 +++++++++++------------- less/labels.less | 8 ++--- less/progress-bars.less | 12 +++---- 5 files changed, 58 insertions(+), 66 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e09e58a822..a17a4475dd 100644 --- a/docs/assets/css/bootstrap.css +++ b/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); diff --git a/docs/components.html b/docs/components.html index f9f8db0579..52483572ee 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1007,34 +1007,34 @@ - New + New - <span class="label success">New</span> + <span class="label label-success">New</span> - Warning + Warning - <span class="label warning">Warning</span> + <span class="label label-warning">Warning</span> - Important + Important - <span class="label important">Important</span> + <span class="label label-important">Important</span> - Info + Info - <span class="label info">Info</span> + <span class="label label-info">Info</span> @@ -1307,12 +1307,12 @@

Striped

Uses a gradient to create a striped effect.

-
+ 
-<div class="progress info
-     striped">
+<div class="progress progress-info
+     progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
@@ -1321,12 +1321,12 @@
     

       
Animated

       
Takes the striped example and animates it.

-      

+      

         

       

 
-<div class="progress danger
-     striped active">
+<div class="progress progress-danger
+     progress-striped active">
   <div class="bar"
        style="width: 40%;"></div>
 </div>
@@ -1338,18 +1338,18 @@
   

     

       
Additional colors

-      
Progress bars utilize some of the same classes as buttons and alert messages for quick styling.

+      
Progress bars utilize some of the same class names as buttons and alerts for similar styling.

       
    
-        
  • .info
    • 
-        
  • .success
    • 
-        
  • .danger
    • 
+        
  • .progress-info
    • 
+        
  • .progress-success
    • 
+        
  • .progress-danger
    • 
       

       
Alternatively, you can customize the LESS files and roll your own colors and sizes.

     

     

       
Behavior

       
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

-      
If you use the .active class, your .striped progress bars will animate the stripes left to right.

+      
If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

     

     

       
Browser support

@@ -1398,10 +1398,6 @@
 
 
 
-
-
-
-