adding modal

3 years ago · 5c19f27149
--- a/dist/image.jpg
+++ b/dist/image.jpg
--- a/dist/index.html
+++ b/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>

--- a/dist/plain-ui.css
+++ b/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%;
--- a/src/scss/components/_modal.scss
+++ b/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: '';
        }
    }
 }
--- a/src/scss/helpers/_colors.scss
+++ b/src/scss/helpers/_colors.scss
--- a/src/scss/helpers/_core.scss
+++ b/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;
        }
    }

    /**
     *
     *
--- a/src/scss/helpers/_media.scss
+++ b/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;
 }
--- a/src/scss/helpers/_sizing.scss
+++ b/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;
    }
 }
--- a/src/scss/helpers/_spacing.scss
+++ b/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;
    }
 }
--- a/src/scss/plain-ui.scss
+++ b/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();