From d53af49afea5af5ac2c3cf74f0f5439b58021198 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 1 Feb 2013 16:21:38 -0800 Subject: Refactor colors and progress bars * Buttons and progress bars now make use of more semantic global @brand- colors * Progress bars have been rewritten to reduce the number of possible selectors * Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS --- docs/assets/css/bootstrap.css | 60 ++++++++------------- docs/components.html | 90 ++++++++++++++++---------------- docs/templates/pages/components.mustache | 90 ++++++++++++++++---------------- 3 files changed, 111 insertions(+), 129 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d534985d9..d67148b13 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4102,7 +4102,7 @@ a.counter:hover { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } -.progress .bar { +.progress-bar { float: left; width: 0; height: 100%; @@ -4110,9 +4110,7 @@ a.counter:hover { color: #fff; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #149bdf; - /*#gradient > .vertical(#149bdf, #0480be);*/ - + background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; @@ -4124,8 +4122,8 @@ a.counter:hover { transition: width 0.6s ease; } -.progress-striped .bar { - background-color: #149bdf; +.progress-striped .progress-bar { + background-color: #428bca; 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); background-image: -moz-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); @@ -4137,7 +4135,7 @@ a.counter:hover { background-size: 40px 40px; } -.progress.active .bar { +.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; @@ -4145,16 +4143,12 @@ a.counter:hover { animation: progress-bar-stripes 2s linear infinite; } -.progress-danger .bar, -.progress .bar-danger { - background-color: #ee5f5b; - /*#gradient > .vertical(#ee5f5b, #c43c35);*/ - +.progress-bar-danger { + background-color: #d9534f; } -.progress-danger.progress-striped .bar, -.progress-striped .bar-danger { - background-color: #ee5f5b; +.progress-striped .progress-bar-danger { + background-color: #d9534f; 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); background-image: -moz-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); @@ -4162,16 +4156,12 @@ a.counter:hover { 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 .bar-success { - background-color: #62c462; - /*#gradient > .vertical(#62c462, #57a957);*/ - +.progress-bar-success { + background-color: #5cb85c; } -.progress-success.progress-striped .bar, -.progress-striped .bar-success { - background-color: #62c462; +.progress-striped .progress-bar-success { + background-color: #5cb85c; 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); background-image: -moz-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); @@ -4179,16 +4169,12 @@ a.counter:hover { 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 .bar-info { - background-color: #5bc0de; - /*#gradient > .vertical(#5bc0de, #339bb9);*/ - +.progress-bar-warning { + background-color: #f0ad4e; } -.progress-info.progress-striped .bar, -.progress-striped .bar-info { - background-color: #5bc0de; +.progress-striped .progress-bar-warning { + background-color: #f0ad4e; 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); background-image: -moz-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); @@ -4196,16 +4182,12 @@ a.counter:hover { 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-warning .bar, -.progress .bar-warning { - background-color: #fbb450; - /*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/ - +.progress-bar-info { + background-color: #5bc0de; } -.progress-warning.progress-striped .bar, -.progress-striped .bar-warning { - background-color: #fbb450; +.progress-striped .progress-bar-info { + 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); background-image: -moz-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 a79ce01fd..4293e43bf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1614,7 +1614,7 @@ ================================================== -->
-

Progress bars For loading, redirecting, or action status

+

Progress bars

Examples and markup

@@ -1623,12 +1623,12 @@

Default progress bar with a vertical gradient.

-
+ 
 <div class="progress">
-  <div class="bar" style="width: 60%;"></div>
+  <div class="progress-bar" style="width: 60%;"></div>
 </div>
@@ -1636,12 +1636,12 @@

Uses a gradient to create a striped effect. Not available in IE8.

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

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

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

Place multiple bars into the same .progress to stack them.

-
-
-
+
+
+ 
 <div class="progress">
-  <div class="bar bar-success" style="width: 35%;"></div>
-  <div class="bar bar-warning" style="width: 20%;"></div>
-  <div class="bar bar-danger" style="width: 10%;"></div>
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
 </div>
@@ -1684,62 +1684,62 @@

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+ 
-<div class="progress progress-info">
-  <div class="bar" style="width: 20%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
 </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+ 
-<div class="progress progress-info progress-striped">
-  <div class="bar" style="width: 20%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success progress-striped">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning progress-striped">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger progress-striped">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
 </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 788801eab..7f8729487 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1546,7 +1546,7 @@ ================================================== -->
-

Progress bars For loading, redirecting, or action status

+

Progress bars

Examples and markup

@@ -1555,12 +1555,12 @@

Default progress bar with a vertical gradient.

-
+ 
 <div class="progress">
-  <div class="bar" style="width: 60%;"></div>
+  <div class="progress-bar" style="width: 60%;"></div>
 </div>
@@ -1568,12 +1568,12 @@

Uses a gradient to create a striped effect. Not available in IE8.

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

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

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

Place multiple bars into the same .progress to stack them.

-
-
-
+
+
+ 
 <div class="progress">
-  <div class="bar bar-success" style="width: 35%;"></div>
-  <div class="bar bar-warning" style="width: 20%;"></div>
-  <div class="bar bar-danger" style="width: 10%;"></div>
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
 </div>
@@ -1616,62 +1616,62 @@

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+ 
-<div class="progress progress-info">
-  <div class="bar" style="width: 20%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
 </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+ 
-<div class="progress progress-info progress-striped">
-  <div class="bar" style="width: 20%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success progress-striped">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning progress-striped">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger progress-striped">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
 </div>
-- cgit v1.2.3