adding #9

3 years ago · bdcd8c18dc
--- a/dist/index.html
+++ b/dist/index.html
@ -4,8 +4,8 @@
 <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
    <meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
    <title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
    <meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="plain-ui.css">
 </head>
@ -27,9 +27,19 @@
        </div>
    </header>

    <div class="container">
    <div class="container m-top-7">
        <div class="grid">
            <div class="col-12">

                <p>
                    <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
                </p>

                <div class="">
                    <a href=""></a>
                    <a href="https://gitea.teantakelfabrik.de/"></a>
                </div>

                <h2>Buttons</h2>
                <button class="button">
                    Default
@ -124,6 +134,19 @@
            </div>
        </div>

        <div class="grid">
            <div class="col-12">
                <h2>Loading</h2>
                <div>
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="col-12">

--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
--- a/src/scss/components/_loading.scss
+++ b/src/scss/components/_loading.scss
@ -4,7 +4,49 @@
 *
 */

@mixin component__loading()
 $plain-ui__loading__background-color: $plain-ui__danger-light !default;

@mixin plain-ui__component__loading()
 {
    .loading {
        height: 60px;
        width: 47px;
        margin: 0 auto;

        display: flex;
        align-items: center;

        span {
            display: block;
            width: 15px;
            height: 80px;

            background: $plain-ui__loading__background-color;

            animation-name: plain-ui__loading-animation;
            animation-duration: 0.5s;
            animation-iteration-count: infinite;

            animation-delay: 0.15s;

            border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
            border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);

            &:first-child {
                margin-right: 1px;
                animation-delay: 0s;
            }

            &:last-child {
                margin-left: 1px;
                animation-delay: 0.3s;
            }
        }
    }

    @keyframes plain-ui__loading-animation {
        0%   {  height: 60px; }
        50%  {  height: 40px; }
        100% {  height: 60px; }
    }
 }
--- a/src/scss/helpers/_core.scss
+++ b/src/scss/helpers/_core.scss
@ -43,24 +43,7 @@
        }
    }

    /**
     *
     *
     */

    @for $i from 1 through $reflex-columns {
        .w-col-#{$i} {
            width: percentage(($i / $reflex-columns));
        }
    }

    $plain-ui__width: 12;

    @for $i from 1 through $plain-ui__width {
        .w-#{$i} {
            width: #{$i}em;
        }
    }

    /**
     *
@ -134,7 +117,7 @@
    }

    @each $name, $font-size in $plain-ui__font-sizes {
        .text-size-#{$name} {
        .t-size-#{$name} {
            font-size: $font-size !important;
            //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
        }
--- a/src/scss/helpers/_spacing.scss
+++ b/src/scss/helpers/_spacing.scss
@ -27,7 +27,6 @@ $plain-ui__helpers__spacing-steps: 10 !default;
    @for $i from 2 through $plain-ui__helpers__spacing-steps {
        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('m', 'margin', $direction, $i, $value);
        //@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
    }
 }

@ -39,6 +38,5 @@ $plain-ui__helpers__spacing-steps: 10 !default;
    @for $i from 0 through $plain-ui__helpers__spacing-steps {
        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
        @include spacing('p', 'padding', $direction, $i, $value);
        //@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
    }
 }
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@ -8,10 +8,6 @@
    'variables',
    'core',

    'helpers/core',
    'helpers/sizing',
    'helpers/spacing',

    'components/badge',
    'components/button',
    'components/field',
@ -24,9 +20,14 @@
    'components/slider',
    'components/bar',
    'components/modal',
    'components/loading',

    'layout/masonry',
    'layout/flex';
    'layout/flex',

    'helpers/core',
    'helpers/sizing',
    'helpers/spacing';

@include plain-ui__core();
@include plain-ui__helpers__core();
@ -46,5 +47,6 @@
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__component__loading();

@include plain-ui__layout__masonry();