first commit

web/common/static/bootstrap-v4/scss/_progress.scss

@@ -0,0 +1,156 @@
+//
+// 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] {
+  // IE10 uses `color` to set the bar background-color
+  color: #0074d9;
+  // Remove Firefox and Opera border
+  border: 0;
+  // Reset the default appearance
+  appearance: none;
+}
+.progress[value]::-webkit-progress-bar {
+  background-color: #eee;
+  @include border-radius($border-radius);
+  @include 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;
+  border-bottom-left-radius: $border-radius;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}
+
+// 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);
+//     .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;
+//     border-bottom-left-radius: $border-radius;
+//   }
+//   .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;
+//     border-bottom-right-radius: $border-radius;
+//   }
+// }
+
+// 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;
+    @include border-radius($border-radius);
+    @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  }
+  .progress-bar {
+    display: inline-block;
+    height: $spacer-y;
+    text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
+    background-color: #0074d9;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+  .progress[width^="0"] {
+    min-width: 2rem;
+    color: $gray-light;
+    background-color: transparent;
+    background-image: none;
+  }
+  .progress[width="100%"] {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $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;
+}
+// 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);
+}