Initial commit

2020-06-15 10:58:47 +08:00
commit 4f1dfe7564
8590 changed files with 1516878 additions and 0 deletions
@@ -0,0 +1,99 @@
+
+/**
+   *  Progress element styles
+   *
+   *  It needs:
+   *  - Height of the progress "bar".
+   *  - Border radius of the element.
+   *  - If it needs a white gradient over it.
+   *  - If bars needs a min width.
+   *
+   */
+
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "../old_common/mixins";
+
+@mixin progress-bar($h, $r, $grad, $min) {
+  div.progress-bar {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: $h;
+    overflow: hidden;
+    border-radius: $r;
+    background: #E5E5E5;
+
+    .bar-3,
+    .bar-2,
+    .bar-1,
+    .bar-0 {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      border-radius: $r;
+
+      @if $min {
+        min-width: $min;
+      }
+
+      @if $grad {
+        &::after {
+          @include position(0, 0, 0, 0);
+          @include background(linear-gradient(left, rgba(#FFF, 0.3), rgba(#FFF, 0)));
+          content: '';
+          position: absolute;
+          width: 100%;
+        }
+      }
+    }
+
+    // Blue dark
+    .bar-3 {
+      @include background(linear-gradient(#2C6E9C, #245D8C));
+      z-index: 3;
+    }
+
+    // Blue light
+    .bar-2 {
+      @include background(linear-gradient(#419EDE, #3486C9));
+      z-index: 2;
+    }
+
+    // Grey light
+    .bar-1 {
+      z-index: 1;
+      background: #E5E5E5;
+
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        @include position(0, 0, 0, auto);
+        content: '';
+        position: absolute;
+        border-right: 1px solid white;
+      }
+    }
+
+    // image pattern
+    .bar-0 {
+      @include background(image-url("layout/unassigned_bkg.png") repeat-x left 0);
+      z-index: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    // Danger and caution background
+    .danger {
+      @include background(linear-gradient(#FF5255, #CB2828));
+    }
+
+    .caution {
+      @include background(linear-gradient(#F8B85C, #F49000));
+    }
+  }
+}