From a0141aa38e74108b4b5f805f8af65cb618236823 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2016 14:56:28 -0800 Subject: [PATCH] Rewrite progress component without element - element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary. --- docs/components/progress.md | 138 +++++++++++++++++++++++++++--------- scss/_mixins.scss | 1 - scss/_progress.scss | 97 ++++--------------------- scss/_variables.scss | 19 +++-- scss/mixins/_progress.scss | 16 ----- 5 files changed, 124 insertions(+), 147 deletions(-) delete mode 100644 scss/mixins/_progress.scss diff --git a/docs/components/progress.md b/docs/components/progress.md index d137fad140..29436c365f 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -5,71 +5,139 @@ description: Documentation and examples for using Bootstrap progress bars. group: components --- -Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support. +Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Example +## How it works -To caption a progress bar, simply add a `
` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `` element using the `aria-describedby` attribute. +Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. + +- We use the `.progress` as a wrapper to indicate the max value of the progress bar. +- We use the inner `.progress-bar` to indicate the progress so far. +- The `.progress-bar` requires an inline style or custom CSS to set their width. +- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. + +Put that all together, and you have the following examples. {% example html %} - -
Reticulating splines… 0%
- - -
Reticulating splines… 25%
- - -
Reticulating splines… 50%
- - -
Reticulating splines… 75%
- - -
Reticulating splines… 100%
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endexample %} -## Contextual alternatives +## Customizing -Progress bars use some of the same button and alert classes for consistent styles. +Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. + +### Labels + +Add labels to your progress bars by placing text within the `.progress-bar`. {% example html %} - - - - +
+
25%
+
+{% endexample %} + +### Height + +We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. + +{% example html %} +
+
+
+
+
+
+{% endexample %} + +### Backgrounds + +Use background utility classes to change the appearance of individual progress bars. + +{% example html %} +
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %} + +### Multiple bars + +Include multiple progress bars in a progress component if you need. + +{% example html %} +
+
+
+
+
{% endexample %} ### Striped -Uses a gradient to create a striped effect. +Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. {% example html %} - - - - - +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endexample %} ### Animated stripes -The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations. +The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. -**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). +**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations.
- -
{% highlight html %} - +
+
+
{% endhighlight %} diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 19bf4d41f3..d207a335b2 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -43,7 +43,6 @@ @import "mixins/list-group"; @import "mixins/nav-divider"; @import "mixins/forms"; -@import "mixins/progress"; @import "mixins/table-row"; // // Skins diff --git a/scss/_progress.scss b/scss/_progress.scss index 800138cdc2..02e4c3bd2d 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,103 +1,32 @@ -// // Progress animations -// - @keyframes progress-bar-stripes { - from { background-position: $spacer-y 0; } + from { background-position: $progress-height 0; } to { background-position: 0 0; } } - -// // Basic progress bar -// - .progress { - display: block; - width: 100%; - height: $spacer-y; // todo: make a new var for this - margin-bottom: $spacer-y; + display: flex; overflow: hidden; // force rounded corners by cropping it -} -.progress[value] { - // Set overall background + font-size: $progress-font-size; + line-height: $progress-height; + text-align: center; background-color: $progress-bg; - // Remove Firefox and Opera border - border: 0; - // Reset the default appearance - appearance: none; - // Set overall border radius @include border-radius($progress-border-radius); } - -// Filled-in portion of the bar -.progress[value]::-ms-fill { - background-color: $progress-bar-color; - // Remove right-hand border of value bar from IE10+/Edge - border: 0; -} -.progress[value]::-moz-progress-bar { - background-color: $progress-bar-color; -} -.progress[value]::-webkit-progress-value { - background-color: $progress-bar-color; +.progress-bar { + height: $progress-height; + color: $progress-bar-color; + background-color: $progress-bar-bg; } -// Unfilled portion of the bar -.progress[value]::-webkit-progress-bar { - background-color: $progress-bg; - @include box-shadow($progress-box-shadow); -} -base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only -.progress[value] { - background-color: $progress-bg; - @include box-shadow($progress-box-shadow); -} - - -// // Striped -// - -.progress-striped[value]::-webkit-progress-value { +.progress-bar-striped { @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-moz-progress-bar { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-ms-fill { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; + background-size: $progress-height $progress-height; } - -// // Animated -// - -.progress-animated[value]::-webkit-progress-value { - animation: progress-bar-stripes 2s linear infinite; -} -.progress-animated[value]::-moz-progress-bar { - animation: progress-bar-stripes 2s linear infinite; -} - - -// -// Variations -// - -.progress-success { - @include progress-variant($progress-bar-success-bg); -} -.progress-info { - @include progress-variant($progress-bar-info-bg); -} -.progress-warning { - @include progress-variant($progress-bar-warning-bg); -} -.progress-danger { - @include progress-variant($progress-bar-danger-bg); +.progress-bar-animated { + animation: progress-bar-stripes $progress-bar-animation-timing; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 948ac0354a..4e95bb1ed4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -852,17 +852,14 @@ $alert-danger-border: $state-danger-border !default; // Progress bars -$progress-bg: $gray-lighter !default; -$progress-bar-color: $brand-primary !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; - -$progress-bar-bg: $brand-primary !default; -$progress-bar-success-bg: $brand-success !default; -$progress-bar-warning-bg: $brand-warning !default; -$progress-bar-danger-bg: $brand-danger !default; -$progress-bar-info-bg: $brand-info !default; - +$progress-height: 1rem !default; +$progress-font-size: .75rem !default; +$progress-bg: $gray-lighter !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: $brand-primary !default; +$progress-bar-animation-timing: 1s linear infinite !default; // List group diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss deleted file mode 100644 index 5674679867..0000000000 --- a/scss/mixins/_progress.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Progress bars - -@mixin progress-variant($color) { - &[value]::-webkit-progress-value { - background-color: $color; - } - - &[value]::-moz-progress-bar { - background-color: $color; - } - - // IE10+, Microsoft Edge - &[value]::-ms-fill { - background-color: $color; - } -}