adding modal

dist/index.html

@@ -164,6 +164,33 @@
             </div>
         </div>
 
+        <div class="grid">
+            <div class="col-12">
+                <h2>Modal</h2>
+                <div class="modal">
+                    <div class="modal__inner">
+                        <div class="modal__title t-center">
+                            <svg class="icon fill-white" aria-hidden="true">
+                                <use xlink:href="symbol-defs.svg#icon-close"></use>
+                            </svg>
+                            Delete
+                        </div>
+                        <div class="modal__body">
+                            Do you really wan't to delete all files?
+                        </div>
+                        <div class="modal__footer">
+                            <button class="button button--danger">
+                                Confirm
+                            </button>
+                            <button class="button float-right">
+                                Reject
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="grid">
             <div class="col-12">
                 <h2>Field</h2>
@@ -297,7 +324,7 @@
     </div>
 
     <div class="hero">
-        <img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
+        <img style="max-height: 400px;" src="/image.jpg" />
     </div>
 
     <div class="container">
@@ -307,7 +334,7 @@
             </div>
             <div class="col-12">
                 <figure class="figure">
-                    <img class="media" src="https://via.placeholder.com/150" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -331,7 +358,7 @@
         <div class="slider__inner">
             <div class="slider__item w-col-12">
                 <figure class="figure w-col-12">
-                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -339,7 +366,7 @@
             </div>
             <div class="slider__item w-col-12">
                 <figure class="figure w-col-12">
-                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -347,7 +374,7 @@
             </div>
             <div class="slider__item w-col-12">
                 <figure class="figure w-col-12">
-                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -355,7 +382,7 @@
             </div>
             <div class="slider__item w-col-12">
                 <figure class="figure w-col-12">
-                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -363,7 +390,7 @@
             </div>
             <div class="slider__item w-col-12">
                 <figure class="figure w-col-12">
-                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <img class="media" src="/image.jpg" />
                     <figcaption class="figure__caption">
                         food truck yr franzen pabst
                     </figcaption>
@@ -376,29 +403,26 @@
         <div class="grid">
             <div class="col-12">
                 <h2>Masonry</h3>
-            </div>
-            <div class="col-12">
                 <div class="masonry">
                     <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
+                        <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                     <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
+                        <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                     <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
+                        <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                     <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
+                        <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                     <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
+                        <img class="media object-fit-cover h-100" src="/image.jpg" />
                     </figure>
                 </div>
             </div>
         </div>
     </div>
-    </div>
 
 </body>
 

dist/plain-ui.css

@@ -1981,6 +1981,526 @@ dt {
  *
  *
  */
+/**
+ *  Sizing
+ *
+ *  Width and Height Classes,
+ *  Sizes with percentage will calculate with the Reflex Grid
+ *
+ *
+ */
+.w-0 {
+  width: 0;
+}
+
+.h-0 {
+  height: 0;
+}
+
+.w-1 {
+  width: 1px;
+}
+
+.h-1 {
+  height: 1px;
+}
+
+.w-col-1 {
+  width: 8.3333333333%;
+}
+
+.h-col-1 {
+  height: 8.3333333333%;
+}
+
+.w-col-2 {
+  width: 16.6666666667%;
+}
+
+.h-col-2 {
+  height: 16.6666666667%;
+}
+
+.w-col-3 {
+  width: 25%;
+}
+
+.h-col-3 {
+  height: 25%;
+}
+
+.w-col-4 {
+  width: 33.3333333333%;
+}
+
+.h-col-4 {
+  height: 33.3333333333%;
+}
+
+.w-col-5 {
+  width: 41.6666666667%;
+}
+
+.h-col-5 {
+  height: 41.6666666667%;
+}
+
+.w-col-6 {
+  width: 50%;
+}
+
+.h-col-6 {
+  height: 50%;
+}
+
+.w-col-7 {
+  width: 58.3333333333%;
+}
+
+.h-col-7 {
+  height: 58.3333333333%;
+}
+
+.w-col-8 {
+  width: 66.6666666667%;
+}
+
+.h-col-8 {
+  height: 66.6666666667%;
+}
+
+.w-col-9 {
+  width: 75%;
+}
+
+.h-col-9 {
+  height: 75%;
+}
+
+.w-col-10 {
+  width: 83.3333333333%;
+}
+
+.h-col-10 {
+  height: 83.3333333333%;
+}
+
+.w-col-11 {
+  width: 91.6666666667%;
+}
+
+.h-col-11 {
+  height: 91.6666666667%;
+}
+
+.w-col-12 {
+  width: 100%;
+}
+
+.h-col-12 {
+  height: 100%;
+}
+
+.w-1 {
+  width: 0.5rem;
+}
+
+.w-2 {
+  width: 1rem;
+}
+
+.w-3 {
+  width: 1.5rem;
+}
+
+.w-4 {
+  width: 2rem;
+}
+
+.w-5 {
+  width: 2.5rem;
+}
+
+.w-6 {
+  width: 3rem;
+}
+
+.w-7 {
+  width: 3.5rem;
+}
+
+.w-8 {
+  width: 4rem;
+}
+
+.w-9 {
+  width: 4.5rem;
+}
+
+.w-10 {
+  width: 5rem;
+}
+
+.w-11 {
+  width: 5.5rem;
+}
+
+.w-12 {
+  width: 6rem;
+}
+
+.w-13 {
+  width: 6.5rem;
+}
+
+.w-14 {
+  width: 7rem;
+}
+
+.w-15 {
+  width: 7.5rem;
+}
+
+.w-16 {
+  width: 8rem;
+}
+
+.w-17 {
+  width: 8.5rem;
+}
+
+.w-18 {
+  width: 9rem;
+}
+
+.w-19 {
+  width: 9.5rem;
+}
+
+.w-20 {
+  width: 10rem;
+}
+
+.w-21 {
+  width: 10.5rem;
+}
+
+.w-22 {
+  width: 11rem;
+}
+
+.w-23 {
+  width: 11.5rem;
+}
+
+.w-24 {
+  width: 12rem;
+}
+
+.w-25 {
+  width: 12.5rem;
+}
+
+.w-26 {
+  width: 13rem;
+}
+
+.w-27 {
+  width: 13.5rem;
+}
+
+.w-28 {
+  width: 14rem;
+}
+
+.w-29 {
+  width: 14.5rem;
+}
+
+.w-30 {
+  width: 15rem;
+}
+
+.w-31 {
+  width: 15.5rem;
+}
+
+.w-32 {
+  width: 16rem;
+}
+
+.w-33 {
+  width: 16.5rem;
+}
+
+.w-34 {
+  width: 17rem;
+}
+
+.w-35 {
+  width: 17.5rem;
+}
+
+.w-36 {
+  width: 18rem;
+}
+
+.w-37 {
+  width: 18.5rem;
+}
+
+.w-38 {
+  width: 19rem;
+}
+
+.w-39 {
+  width: 19.5rem;
+}
+
+.w-40 {
+  width: 20rem;
+}
+
+.w-41 {
+  width: 20.5rem;
+}
+
+.w-42 {
+  width: 21rem;
+}
+
+.w-43 {
+  width: 21.5rem;
+}
+
+.w-44 {
+  width: 22rem;
+}
+
+.w-45 {
+  width: 22.5rem;
+}
+
+.w-46 {
+  width: 23rem;
+}
+
+.w-47 {
+  width: 23.5rem;
+}
+
+.w-48 {
+  width: 24rem;
+}
+
+.w-49 {
+  width: 24.5rem;
+}
+
+.w-50 {
+  width: 25rem;
+}
+
+.h-1 {
+  height: 0.5rem;
+}
+
+.h-2 {
+  height: 1rem;
+}
+
+.h-3 {
+  height: 1.5rem;
+}
+
+.h-4 {
+  height: 2rem;
+}
+
+.h-5 {
+  height: 2.5rem;
+}
+
+.h-6 {
+  height: 3rem;
+}
+
+.h-7 {
+  height: 3.5rem;
+}
+
+.h-8 {
+  height: 4rem;
+}
+
+.h-9 {
+  height: 4.5rem;
+}
+
+.h-10 {
+  height: 5rem;
+}
+
+.h-11 {
+  height: 5.5rem;
+}
+
+.h-12 {
+  height: 6rem;
+}
+
+.h-13 {
+  height: 6.5rem;
+}
+
+.h-14 {
+  height: 7rem;
+}
+
+.h-15 {
+  height: 7.5rem;
+}
+
+.h-16 {
+  height: 8rem;
+}
+
+.h-17 {
+  height: 8.5rem;
+}
+
+.h-18 {
+  height: 9rem;
+}
+
+.h-19 {
+  height: 9.5rem;
+}
+
+.h-20 {
+  height: 10rem;
+}
+
+.h-21 {
+  height: 10.5rem;
+}
+
+.h-22 {
+  height: 11rem;
+}
+
+.h-23 {
+  height: 11.5rem;
+}
+
+.h-24 {
+  height: 12rem;
+}
+
+.h-25 {
+  height: 12.5rem;
+}
+
+.h-26 {
+  height: 13rem;
+}
+
+.h-27 {
+  height: 13.5rem;
+}
+
+.h-28 {
+  height: 14rem;
+}
+
+.h-29 {
+  height: 14.5rem;
+}
+
+.h-30 {
+  height: 15rem;
+}
+
+.h-31 {
+  height: 15.5rem;
+}
+
+.h-32 {
+  height: 16rem;
+}
+
+.h-33 {
+  height: 16.5rem;
+}
+
+.h-34 {
+  height: 17rem;
+}
+
+.h-35 {
+  height: 17.5rem;
+}
+
+.h-36 {
+  height: 18rem;
+}
+
+.h-37 {
+  height: 18.5rem;
+}
+
+.h-38 {
+  height: 19rem;
+}
+
+.h-39 {
+  height: 19.5rem;
+}
+
+.h-40 {
+  height: 20rem;
+}
+
+.h-41 {
+  height: 20.5rem;
+}
+
+.h-42 {
+  height: 21rem;
+}
+
+.h-43 {
+  height: 21.5rem;
+}
+
+.h-44 {
+  height: 22rem;
+}
+
+.h-45 {
+  height: 22.5rem;
+}
+
+.h-46 {
+  height: 23rem;
+}
+
+.h-47 {
+  height: 23.5rem;
+}
+
+.h-48 {
+  height: 24rem;
+}
+
+.h-49 {
+  height: 24.5rem;
+}
+
+.h-50 {
+  height: 25rem;
+}
+
 /**
  *
  *
@@ -2048,6 +2568,15 @@ dt {
  *
  *
  */
+/**
+ *  <figure class="media-figure">
+ *      <img class="media__img" src="https://via.placeholder.com/150" />
+ *      <figcaption class="media-figure__caption">
+ *          food truck yr franzen pabst
+ *      </figcaption>
+ *  </figure>
+ *
+ */
 /**
  *  masonry
  *
@@ -3682,6 +4211,54 @@ body {
   width: 100%;
 }
 
+.w-1 {
+  width: 1em;
+}
+
+.w-2 {
+  width: 2em;
+}
+
+.w-3 {
+  width: 3em;
+}
+
+.w-4 {
+  width: 4em;
+}
+
+.w-5 {
+  width: 5em;
+}
+
+.w-6 {
+  width: 6em;
+}
+
+.w-7 {
+  width: 7em;
+}
+
+.w-8 {
+  width: 8em;
+}
+
+.w-9 {
+  width: 9em;
+}
+
+.w-10 {
+  width: 10em;
+}
+
+.w-11 {
+  width: 11em;
+}
+
+.w-12 {
+  width: 12em;
+}
+
 /**
  *
  *
@@ -4314,6 +4891,53 @@ img.media {
   border-bottom-width: 1px;
 }
 
+.modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 1em;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal__inner {
+  position: relative;
+  z-index: 21;
+  max-width: 500px;
+}
+.modal__inner .button {
+  color: white;
+  background-color: transparent;
+}
+.modal__title {
+  font-size: 2rem;
+  text-align: center;
+  white-space: pre-line;
+  margin-bottom: 2rem;
+}
+.modal__title .icon {
+  font-size: 3rem;
+}
+.modal__title, .modal__body {
+  color: white;
+}
+.modal__body {
+  margin-bottom: 1.5rem;
+}
+.modal:before {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.87);
+  z-index: 19;
+  content: "";
+}
+
 .masonry {
   display: flex;
   width: 100%;

src/scss/components/_modal.scss

@@ -0,0 +1,70 @@
+/**
+ *  <figure class="media-figure">
+ *      <img class="media__img" src="https://via.placeholder.com/150" />
+ *      <figcaption class="media-figure__caption">
+ *          food truck yr franzen pabst
+ *      </figcaption>
+ *  </figure>
+ *
+ */
+
+@mixin plain-ui__component__modal()
+{
+    .modal {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+
+        padding: 1em;
+        z-index: 20;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &__inner {
+            position: relative;
+            z-index: 21;
+
+            max-width: 500px;
+
+            .button {
+                color: white;
+                background-color: transparent;
+            }
+        }
+
+        &__title {
+            font-size: 2rem;
+            text-align: center;
+            white-space: pre-line;
+
+            margin-bottom: 2rem;
+
+            .icon {
+                font-size: 3rem;
+            }
+        }
+
+        &__title, &__body {
+            color: white;
+        }
+
+        &__body {
+            margin-bottom: 1.5rem;
+        }
+
+        &:before {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,.87);
+            z-index: 19;
+            content: '';
+        }
+    }
+}

src/scss/helpers/_core.scss

@@ -54,6 +54,14 @@
         }
     }
 
+    $plain-ui__width: 12;
+
+    @for $i from 1 through $plain-ui__width {
+        .w-#{$i} {
+            width: #{$i}em;
+        }
+    }
+
     /**
      *
      *

src/scss/helpers/_media.scss

@@ -0,0 +1,19 @@
+.object-contain	{
+    object-fit: contain;
+}
+
+.object-cover {
+    object-fit: cover;
+}
+
+.object-fill {
+    object-fit: fill;
+}
+
+.object-none {
+    object-fit: none;
+}
+
+.object-scale-down {
+    object-fit: scale-down;
+}

src/scss/helpers/_sizing.scss

@@ -0,0 +1,37 @@
+/**
+ *  Sizing
+ *
+ *  Width and Height Classes,
+ *  Sizes with percentage will calculate with the Reflex Grid
+ *
+ *
+ */
+
+$plain-ui__helpers__height-steps: 50;
+
+.w-0 { width: 0; }
+.h-0 { height: 0; }
+.w-1 { width: 1px;}
+.h-1 { height: 1px; }
+
+@for $i from 1 through $reflex-columns {
+    .w-col-#{$i} {
+        width: percentage(($i / $reflex-columns));
+    }
+
+    .h-col-#{$i} {
+        height: percentage(($i / $reflex-columns));
+    }
+}
+
+@for $i from 1 through $plain-ui__helpers__height-steps {
+    .w-#{$i} {
+        width: #{($i * 0.5)}rem;
+    }
+}
+
+@for $i from 1 through $plain-ui__helpers__height-steps {
+    .h-#{$i} {
+        height: #{($i * 0.5)}rem;
+    }
+}

src/scss/helpers/_spacing.scss

@@ -0,0 +1,40 @@
+$plain-ui__spacing-direction: (
+    'top',
+    'bottom',
+    'left',
+    'right'
+);
+
+@each $direction in $plain-ui__spacing-direction {
+
+    @include spacing('m', 'margin', $direction, 0, 0);
+    @include spacing('m', 'margin', $direction, 1, 1px);
+
+    @for $i from 0 through $plain-ui__helpers__spacing-steps {
+        @include spacing($class, $style, $direction, $name, $plain-ui__helpers__spacing-gap * factor($i))
+        @include plain-ui__media-breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
+    }
+}
+
+@each $direction in $plain-ui__spacing-direction {
+
+    @include spacing('p', 'padding', $direction, 0, 0);
+    @include spacing('p', 'padding', $direction, 1, 1px);
+
+    @for $i from 0 through $plain-ui__helpers__spacing-steps {
+        .p-#{$direction}-#{$i} {
+            padding-#{$direction}: ($plain-ui__helpers__spacing-gap * factor($i)) !important;
+
+            @if $i > 0 {
+                @include plain-ui__media-breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
+            }
+        }
+    }
+}
+
+@mixin spacing($class, $style, $direction, $name, $value, $breakpoints)
+{
+    .#{$class}-#{$direction}-#{$name} {
+        #{$style}-#{$direction}: $value;
+    }
+}

src/scss/plain-ui.scss

@@ -9,6 +9,7 @@
     'core',
 
     'helpers/core',
+    'helpers/sizing',
 
     'components/badge',
     'components/button',
@@ -21,6 +22,7 @@
     'components/table',
     'components/slider',
     'components/bar',
+    'components/modal',
 
     'layout/masonry',
     'layout/flex';
@@ -42,5 +44,6 @@
 @include plain-ui__component__slider();
 @include plain-ui__component__bar();
 @include plain-ui__component__tabs();
+@include plain-ui__component__modal();
 
 @include plain-ui__layout__masonry();