adding #9

dist/example/index.html

@@ -117,6 +117,7 @@
 @include crispy__modal();
 @include crispy__overlay();
 @include crispy__panel();
+@include crispy__progress();
 @include crispy__table();</code></pre>
                 <p>For Custom Variables add a File before importing Crispy,</p>
                 <pre class="code"><code>@import
@@ -367,7 +368,7 @@
                     To change Color you can use "icon-color-*".
                 </p>
                 <h4 class="h6">Html:</h4>
-                <pre class="code"><code>&lt;svg class=&quot;icon text-size-small&quot;&gt;
+                <pre class="code"><code>&lt;svg class=&quot;icon icon-color-danger&quot;&gt;
     &lt;use xlink:href=&quot;symbol-defs.svg#icon-minus&quot;&gt;&lt;/use&gt;
 &lt;/svg&gt;</code></pre>
                 <div class="panel">
@@ -394,6 +395,20 @@
                     </div>
                 </div>
 
+                <!-- components / progress -->
+                <h3 class="h4 margin-top-2 margin-bottom-0">
+                    Progress
+                </h3>
+                <h4 class="h6">Html:</h4>
+                <pre class="code"><code>&lt;div class=&quot;progress&quot;&gt;
+    &lt;div class=&quot;progress__inner&quot; style=&quot;width: 80%&quot;&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                <div class="progress">
+                    <div class="progress__inner" style="width: 80%">
+                    </div>
+                </div>
+
 				<!-- components / modal -->
 				<h3 class="h4 margin-top-3 margin-bottom-0">
                     Modal

src/_mixins.scss

@@ -51,8 +51,6 @@
  *
  *
  *
- *
- *
  */
 @mixin crispy__media-xs() {
     @media only screen and (min-width:$crispy__xs) {

src/components/_progress.scss

@@ -0,0 +1,30 @@
+/**
+ * componente: progress
+ *
+ * <div class="progress">
+ *     <div class="progress__inner" style="width: 80%">
+ *
+ *     </div>
+ * </div>
+ *
+ * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
+ *
+ */
+
+$crispy__progress__height: 30px;
+$crispy__progress__background-color: $crispy__color-primary;
+$crispy__progress__border__width: 1px;
+$crispy__progress__border__color: $crispy__color-border;
+
+@mixin crispy__progress {
+    .progress {
+        border: $crispy__progress__border__width solid $crispy__progress__border__color;
+
+        &__inner {
+            height: $crispy__progress__height;
+            background-color: $crispy__progress__background-color;
+        }
+    }
+}

src/crispy.scss

@@ -19,5 +19,6 @@
     'components/modal',
     'components/overlay',
     'components/panel',
+    'components/progress',
     'components/table',
     'components/field';

src/crispy_all.scss

@@ -5,6 +5,7 @@
 @include crispy__modifiers();
 @include crispy__button();
 @include crispy__code();
+@include crispy__progress();
 @include crispy__field();
 @include crispy__group();
 @include crispy__heading();