aboutsummaryrefslogtreecommitdiff
path: root/less/_progress.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-08-04 15:36:41 -0700
committerMark Otto <[email protected]>2014-08-04 15:36:41 -0700
commitaf0921062fd6deb16d3406ab5e2489f3c69793d9 (patch)
treec0e99625dceaed5bd24b12a66b13a242c57995dd /less/_progress.less
parentef9e76c2c5fc587e8d5df043e1a0967c1f9de658 (diff)
downloadbootstrap-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.less170
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);
+}