diff options
| author | Mark Otto <[email protected]> | 2014-08-04 15:36:41 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-08-04 15:36:41 -0700 |
| commit | af0921062fd6deb16d3406ab5e2489f3c69793d9 (patch) | |
| tree | c0e99625dceaed5bd24b12a66b13a242c57995dd /less/_progress.less | |
| parent | ef9e76c2c5fc587e8d5df043e1a0967c1f9de658 (diff) | |
| download | bootstrap-af0921062fd6deb16d3406ab5e2489f3c69793d9.tar.xz bootstrap-af0921062fd6deb16d3406ab5e2489f3c69793d9.zip | |
rename imported files to preface with underscore; rerun grunt dist
Diffstat (limited to 'less/_progress.less')
| -rw-r--r-- | less/_progress.less | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/less/_progress.less b/less/_progress.less new file mode 100644 index 000000000..4c34dbee9 --- /dev/null +++ b/less/_progress.less @@ -0,0 +1,170 @@ +/*csslint empty-rules: false, important: true*/ + +// +// Progress bars +// -------------------------------------------------- + + +// +// Progress animations +// + +@-webkit-keyframes progress-bar-stripes { + from { background-position: @line-height-computed 0; } + to { background-position: 0 0; } +} + +@keyframes progress-bar-stripes { + from { background-position: @line-height-computed 0; } + to { background-position: 0 0; } +} + + +// +// Basic progress bar +// + +.progress { + display: block; + width: 100%; + height: @line-height-computed; + margin-bottom: @line-height-computed; +} +.progress[value] { + // Reset the default appearance + appearance: none; + // Remove Firefox and Opera border + border: 0; + // IE10 uses `color` to set the bar background-color + color: #0074d9; +} +.progress[value]::-webkit-progress-bar { + background-color: #eee; + .border-radius(@border-radius-base); + .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); +} +.progress[value]::-webkit-progress-value::before { + content: attr(value); +} +.progress[value]::-webkit-progress-value { + background-color: #0074d9; + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; +} +.progress[value="0"]::-webkit-progress-value { + color: @gray-light; + min-width: 2rem; + background-color: transparent; + background-image: none; +} +.progress[value="100"]::-webkit-progress-value { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; +} + +// Firefox styles must be entirely separate or it busts Webkit styles. +/* Commented out for now because linter. +@-moz-document url-prefix() { + .progress[value] { + background-color: #eee; + .border-radius(@border-radius-base); + .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + } + .progress[value]::-moz-progress-bar { + background-color: #0074d9; + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + .progress[value="0"]::-moz-progress-bar { + color: @gray-light; + min-width: 2rem; + background-color: transparent; + background-image: none; + } + .progress[value="100"]::-moz-progress-bar { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } +} +*/ +// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. +@media screen and (~"min-width:0\0") { + .progress { + background-color: #eee; + .border-radius(@border-radius-base); + .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + } + .progress-bar { + display: inline-block; + height: @line-height-computed; + text-indent: -999rem; // Simulate hiding of value as in native `<progress>` + background-color: #0074d9; + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + .progress[width^="0"] { + color: @gray-light; + min-width: 2rem; + background-color: transparent; + background-image: none; + } + .progress[width="100%"] { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } +} + + +// +// Striped +// + +.progress-striped[value]::-webkit-progress-value { + #gradient > .striped(); + background-size: @line-height-computed @line-height-computed; +} +.progress-striped[value]::-moz-progress-bar { + #gradient > .striped(); + background-size: @line-height-computed @line-height-computed; +} +@media screen and (~"min-width:0\0") { + .progress-bar-striped { + #gradient > .striped(); + background-size: @line-height-computed @line-height-computed; + } +} + + +// +// 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; +} +@media screen and (~"min-width:0\0") { + .progress-animated .progress-bar-striped { + animation: progress-bar-stripes 2s linear infinite; + } +} + + +// +// Variations +// + +.progress-success { + .progress-variant(@progress-bar-success-bg); +} +.progress-info { + .progress-variant(@progress-bar-info-bg); +} +.progress-warning { + .progress-variant(@progress-bar-warning-bg); +} +.progress-danger { + .progress-variant(@progress-bar-danger-bg); +} |
