feat: add icon component, and progress group

Author: mrholek

scss/_icon.scss

@@ -0,0 +1,28 @@
+.c-icon {
+  display: inline-block;
+  color: inherit;
+  text-align: center;
+  fill: currentColor;
+  &:not(.c-icon-c-s):not(.c-icon-custom-size) {
+    @include icon-size($icon-size-base);
+
+    // TODO: create variable with a range
+    @for $i from 2 through 9 {
+      &.c-icon-#{$i}xl {
+        @include icon-size($i * ($icon-size-xl / 1.5));
+      }
+    }
+
+    &.c-icon-xl {
+      @include icon-size($icon-size-xl);
+    }
+
+    &.c-icon-lg {
+      @include icon-size($icon-size-lg);
+    }
+
+    &.c-icon-sm {
+      @include icon-size($icon-size-sm);
+    }
+  }
+}

scss/_mixins.scss

@@ -28,6 +28,7 @@
 @import "mixins/list-group";
 @import "mixins/forms";
 @import "mixins/table-variants";
+@import "mixins/icon";
 
 // Skins
 @import "mixins/border-radius";

scss/_progress.scss

@@ -43,3 +43,68 @@
     }
   }
 }
+
+.progress-xs {
+  height: 4px;
+}
+
+.progress-sm {
+  height: 8px;
+}
+
+// White progress bar
+.progress.progress-white {
+  background-color: rgba(255, 255, 255, .2);
+  .progress-bar {
+    background-color: $white;
+  }
+}
+
+//TODO: move all values to variables.scss
+.progress-group {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: $spacer;
+}
+
+.progress-group-prepend {
+  flex: 0 0 100px;
+  align-self: center;
+}
+
+.progress-group-icon {
+  font-size: $font-size-lg;
+  margin: 0 $spacer 0 ($spacer * .25);
+
+  // @include ltr {
+  //   margin: 0 $spacer 0 ($spacer * .25);
+  // }
+  // @include rtl {
+  //   margin: 0 ($spacer * .25) 0 $spacer;
+  // }
+}
+
+.progress-group-text {
+  font-size: $font-size-sm;
+  color: $gray-700;
+}
+
+.progress-group-header {
+  display: flex;
+  flex-basis: 100%;
+  align-items: flex-end;
+  margin-bottom: ($spacer * .25);
+}
+
+.progress-group-bars {
+  flex-grow: 1;
+  align-self: center;
+
+  .progress:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.progress-group-header + .progress-group-bars {
+  flex-basis: 100%;
+}

scss/_variables.scss

@@ -525,6 +525,12 @@ $list-inline-padding:         .5rem !default;
 
 $mark-bg:                     #fcf8e3 !default;
 
+// Icons
+$icon-size-base:  1rem !default;
+$icon-size-sm:    $icon-size-base * .875 !default;
+$icon-size-lg:    $icon-size-base * 1.25 !default;
+$icon-size-xl:    $icon-size-base * 1.5 !default;
+
 
 // Tables
 //

scss/coreui.scss

@@ -44,6 +44,7 @@
 @import "carousel";
 @import "spinners";
 @import "header";
+@import "icon";
 @import "sidebar";
 
 // Helpers

scss/mixins/_icon.scss

@@ -0,0 +1,6 @@
+// Icon sizes
+@mixin icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+  font-size: $icon-size;
+}