adding #8

public/components.html

@@ -200,6 +200,23 @@
             </div>
         </div>
 
+        <div class="grid">
+            <div class="col-12">
+                <h2>
+                    Progress
+                </h2>
+                <div class="content m-last-child-0 m-bottom-4">
+<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
+    &#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
+&#x3C;/div&#x3E;
+</code>
+                </div>
+                <div class="progress">
+                    <div class="progress__inner" style="width: 20%;"></div>
+                </div>
+            </div>
+        </div>
+
         <div class="grid">
             <div class="col-12">
                 <h2>Loading</h2>

public/plain-ui.css

@@ -1631,15 +1631,6 @@
  *  border
  *
  */
-/**
- *  core
- *
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
 /**
  *  normalize
  *
@@ -1759,7 +1750,7 @@ textarea {
 }
 
 fieldset {
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 
 button,
@@ -1826,7 +1817,7 @@ hr {
   overflow: visible;
   border: 0;
   border-top: 1px solid var(--border);
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 
 progress {
@@ -1874,11 +1865,11 @@ samp {
    */
 }
 .content p {
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 @media only screen and (min-width: 992px) {
   .content p {
-    margin: 0.6rem 0 1.2rem;
+    margin: 0 0 1.2rem;
   }
 }
 .content a,
@@ -1930,13 +1921,13 @@ samp {
 .content ol,
 .content ul {
   padding: 0;
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 @media only screen and (min-width: 992px) {
   .content dl,
 .content ol,
 .content ul {
-    margin: 0.6rem 0 1.2rem;
+    margin: 0 0 1.2rem;
   }
 }
 .content ol,
@@ -1973,12 +1964,12 @@ samp {
   border: 1px solid var(--border);
   border-radius: 2px;
   background-color: var(--background);
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
   padding: 0.6rem 0.8rem;
 }
 @media only screen and (min-width: 992px) {
   .content code {
-    margin: 0.6rem 0 1.2rem;
+    margin: 0 0 1.2rem;
   }
 }
 @media only screen and (min-width: 992px) {
@@ -2017,7 +2008,7 @@ h6, .h6 {
   font-family: "IBM Plex Mono", sans-serif;
   font-weight: bold;
   line-height: 1.2;
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 h1.highlight, .h1.highlight,
 h2.highlight, .h2.highlight,
@@ -2134,7 +2125,7 @@ h6, .h6 {
   color: var(--text);
   border-radius: 2px;
   transition: background-color 0.1s;
-  margin-bottom: 0.5rem;
+  margin: 0 0 1rem;
   padding: 0 1.3rem;
   min-height: 2.8rem;
   width: 100%;
@@ -2239,7 +2230,7 @@ h6, .h6 {
  *
  */
 .field-group {
-  margin: 0.5rem 0 1rem;
+  margin: 0 0 1rem;
 }
 .field-group--valid input.field-text, .field-group--valid textarea.field-text {
   border-color: var(--success);
@@ -2486,6 +2477,27 @@ svg.field-choice__checked {
   border-left-width: 12px;
 }
 
+/**
+ *  <div class="progress">
+ *     <div class="progress__inner" style="width: 20%"></div>
+ *  </div>
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/plain-ui
+ *
+ */
+.progress {
+  height: 40px;
+  width: 100%;
+  border: 1px solid var(--border);
+}
+.progress__inner {
+  height: 100%;
+  border: 1px solid var(--background-contrast);
+  background-color: var(--background);
+}
+
 /**
  *  <figure class="media-figure">
  *      <img class="media__img" src="https://via.placeholder.com/150" />

src/scss/_components.scss

@@ -1,14 +0,0 @@
-@import
-    'components/badge',
-    'components/button',
-    'components/field',
-    'components/icon',
-    'components/hero',
-    'components/tabs',
-    'components/panel',
-    'components/media',
-    'components/table',
-    'components/slider',
-    'components/bar',
-    'components/modal',
-    'components/loading';

src/scss/_core.scss

@@ -1,14 +0,0 @@
-/**
- *  core
- *
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-
-@import
-    'core/normalize',
-    'core/content',
-    'core/heading';

src/scss/_helpers.scss

@@ -1,6 +0,0 @@
-@import
-    'helpers/core',
-    'helpers/sizing',
-    'helpers/spacing',
-    'helpers/colors',
-    'helpers/typography';

src/scss/_layouts.scss

@@ -1,3 +0,0 @@
-@import
-    'layouts/masonry',
-    'layouts/flex';

src/scss/_variables.scss

@@ -118,9 +118,9 @@ $colors: (
  *
  */
 
-$margin: 0.5rem 0 1rem !default;
+$margin: 0 0 1rem !default;
 $margin-breakpoints: (
-    $breakpoint__md: 0.6rem 0 1.2rem
+    $breakpoint__md: 0 0 1.2rem
 ) !default;
 
 

src/scss/components/_button.scss

@@ -57,7 +57,8 @@
     border-radius: $border-radius;
     transition: background-color 0.1s;
 
-    margin-bottom: 0.5rem;
+    margin: $margin;
+    
     padding: 0 1.3rem;
     min-height: 2.8rem;
     width: 100%;

src/scss/components/_progress.scss

@@ -1,6 +1,11 @@
 /**
+ *  <div class="progress">
+ *     <div class="progress__inner" style="width: 20%"></div>
+ *  </div>
  *
- *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/plain-ui
  *
  */
 
@@ -8,10 +13,11 @@
     height: 40px;
     width: 100%;
 
-    border: 1px solid var(--primary);
+    border: $border;
 
     &__inner {
-        margin: 1px;
         height: 100%;
+        border: 1px solid var(--background-contrast);
+        background-color: var(--background);
     }
 }

src/scss/plain-ui.scss

@@ -7,8 +7,30 @@
     'mixins',
     'variables',
 
-    'core',
+    'core/normalize',
+    'core/content',
+    'core/heading',
 
-    'components',
+    'components/badge',
-    'layouts',
+    'components/button',
-    'helpers';
+    'components/field',
+    'components/icon',
+    'components/hero',
+    'components/tabs',
+    'components/panel',
+    'components/progress',
+    'components/media',
+    'components/table',
+    'components/slider',
+    'components/bar',
+    'components/modal',
+    'components/loading',
+
+    'layouts/masonry',
+    'layouts/flex',
+
+    'helpers/core',
+    'helpers/sizing',
+    'helpers/spacing',
+    'helpers/colors',
+    'helpers/typography';