Browse Source

added progress scss

Daniel 3 years ago
parent
commit
d7a4f36b2f
3 changed files with 69 additions and 3 deletions
  1. 2 3
      src/scss/_custom-variables.scss
  2. 66 0
      src/scss/_progress-bars.scss
  3. 1 0
      src/scss/parts/_components.scss

+ 2 - 3
src/scss/_custom-variables.scss

@@ -149,10 +149,9 @@ $card-nav-link-padding-sm-y: .4rem !default;
 $card-nav-link-padding-sm-x: .8rem !default;
 $card-nav-link-padding-sm-x: .8rem !default;
 $card-img-size: $img-size-sm !default;
 $card-img-size: $img-size-sm !default;
 
 
-// Tables
+// PROGRESS BARS
 // --------------------------------------------------------
 // --------------------------------------------------------
-$table-cell-padding-y-lg:        .75rem !default;
-$table-cell-padding-x-lg:        .75rem !default;
+$progress-bar-border-radius: 1px !default;
 
 
 // Z-INDEX
 // Z-INDEX
 // --------------------------------------------------------
 // --------------------------------------------------------

+ 66 - 0
src/scss/_progress-bars.scss

@@ -0,0 +1,66 @@
+//
+// Component: Progress Bar
+//
+
+//General CSS
+.progress {
+  @include box-shadow(null);
+  @include border-radius($progress-bar-border-radius);
+
+  // Vertical bars
+  &.vertical {
+    display: inline-block;
+    height: 200px;
+    margin-right: 10px;
+    position: relative;
+    width: 30px;
+
+    > .progress-bar {
+      bottom: 0;
+      position: absolute;
+      width: 100%;
+    }
+
+    //Sizes
+    &.sm,
+    &.progress-sm {
+      width: 20px;
+    }
+
+    &.xs,
+    &.progress-xs {
+      width: 10px;
+    }
+
+    &.xxs,
+    &.progress-xxs {
+      width: 3px;
+    }
+  }
+}
+
+.progress-group {
+  margin-bottom: map-get($spacers, 2);
+}
+
+// size variation
+.progress-sm {
+  height: 10px;
+}
+
+.progress-xs {
+  height: 7px;
+}
+
+.progress-xxs {
+  height: 3px;
+}
+
+// Remove margins from progress bars when put in a table
+.table {
+  tr > td {
+    .progress {
+      margin: 0;
+    }
+  }
+}

+ 1 - 0
src/scss/parts/_components.scss

@@ -2,5 +2,6 @@
 // Part: Components
 // Part: Components
 //
 //
 
 
+@import "../progress-bars";
 @import "../cards";
 @import "../cards";
 @import "../table";
 @import "../table";