Release

2017-03-26 20:32:45 +02:00
parent abc1749b64
commit 3c9cb0fe3c
4674 changed files with 291225 additions and 0 deletions
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -0,0 +1,145 @@
+//
+// Progress animations
+//
+
+@keyframes progress-bar-stripes {
+  from { background-position: $spacer-y 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;
+}
+.progress[value] {
+  // Set overall background
+  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;
+  @include border-left-radius($progress-border-radius);
+}
+.progress[value]::-webkit-progress-value {
+  background-color: $progress-bar-color;
+  @include border-left-radius($progress-border-radius);
+}
+// Tweaks for full progress bar
+.progress[value="100"]::-moz-progress-bar {
+  @include border-right-radius($progress-border-radius);
+}
+.progress[value="100"]::-webkit-progress-value {
+  @include border-right-radius($progress-border-radius);
+}
+
+// Unfilled portion of the bar
+.progress[value]::-webkit-progress-bar {
+  background-color: $progress-bg;
+  @include border-radius($progress-border-radius);
+  @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 border-radius($progress-border-radius);
+  @include box-shadow($progress-box-shadow);
+}
+
+// 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: $progress-bg;
+    @include border-radius($progress-border-radius);
+    @include box-shadow($progress-box-shadow);
+  }
+  .progress-bar {
+    display: inline-block;
+    height: $spacer-y;
+    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
+    background-color: $progress-bar-color;
+    @include border-left-radius($progress-border-radius);
+  }
+  .progress[width="100%"] {
+    @include border-right-radius($progress-border-radius);
+  }
+}
+
+
+//
+// Striped
+//
+
+.progress-striped[value]::-webkit-progress-value {
+  @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;
+}
+// IE9
+@media screen and (min-width:0\0) {
+  .progress-bar-striped {
+    @include gradient-striped();
+    background-size: $spacer-y $spacer-y;
+  }
+}
+
+
+//
+// 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;
+}
+// IE9
+@media screen and (min-width:0\0) {
+  .progress-animated .progress-bar-striped {
+    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);
+}