convert to scss

1 files changed, 166 insertions, 0 deletions

diff --git a/scss/_progress.scss b/scss/_progress.scss
new file mode 100644
index 0000000000..ccfda15f52
--- /dev/null
+++ b/scss/_progress.scss
@@ -0,0 +1,166 @@
+/*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;
+  @include border-radius($border-radius-base);
+  @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-base;
+  border-bottom-left-radius: $border-radius-base;
+}
+.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;
+    @include border-radius($border-radius-base);
+    @include 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 {
+  @include gradient-striped();
+  background-size: $line-height-computed $line-height-computed;
+}
+.progress-striped[value]::-moz-progress-bar {
+  @include gradient-striped();
+  background-size: $line-height-computed $line-height-computed;
+}
+@media screen and ("min-width:0\0") {
+  .progress-bar-striped {
+    @include 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 {
+  @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);
+}