adding new release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tentakelfabrik/plain-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Simple UI Framework for Building Apps and Websites",
   "repository": {
     "type": "git",

public/components.html

@@ -17,11 +17,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 
@@ -152,6 +166,24 @@
                     </button>
                 </div>
 
+                <div>
+                    <button class="button button--full">
+                        full
+                    </button>
+                    <button class="button button--full button--danger">
+                        danger
+                    </button>
+                    <button class="button button--full button--success">
+                        success
+                    </button>
+                    <button class="button button--full button--warning">
+                        warning
+                    </button>
+                    <button class="button button--full button--info">
+                        info
+                    </button>
+                </div>
+
                 <div>
                     <button class="button button--outline">
                         outline
@@ -178,6 +210,12 @@
                         <input class="field-text" />
                     </label>
                 </div>
+                <div class="field-group">
+                    <label class="field-label">
+                        Message
+                        <textarea class="field-text"></textarea>
+                    </label>
+                </div>
 
                 <div class="content">
 <code>&#x3C;div class=&#x22;field-group field-group--valid&#x22;&#x3E;
@@ -498,7 +536,7 @@
                             </svg>
                             Delete
                         </div>
-                        <div class="modal__body">
+                        <div class="modal__body center">
                             Do you really wan't to delete all files?
                         </div>
                         <div class="modal__footer">
@@ -845,6 +883,72 @@
                         </a>
                     </div>
                 </div>
+
+                <!-- toast -->
+                <h2 class="m-top-5">
+                    Toast
+                </h2>
+                <div class="content">
+<code>&#x3C;div class=&#x22;toast-wrapper&#x22;&#x3E;
+    &#x3C;div class=&#x22;toast&#x22;&#x3E;
+        &#x3C;div class=&#x22;toast__icon&#x22;&#x3E;
+            &#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
+                &#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-warning&#x22;&#x3E;&#x3C;/use&#x3E;
+            &#x3C;/svg&#x3E;
+        &#x3C;/div&#x3E;
+        &#x3C;div class=&#x22;toast__body&#x22;&#x3E;
+
+        &#x3C;/div&#x3E;
+        &#x3C;div class=&#x22;toast__button&#x22;&#x3E;
+            &#x3C;svg class=&#x22;icon fill-text-contrast&#x22; aria-hidden=&#x22;true&#x22;&#x3E;
+                &#x3C;use xlink:href=&#x22;/symbol-defs.svg#icon-close&#x22;&#x3E;&#x3C;/use&#x3E;
+            &#x3C;/svg&#x3E;
+        &#x3C;/div&#x3E;
+    &#x3C;/div&#x3E;
+&#x3C;/div&#x3E;
+</code>
+</div>
+
+                <script type="text/javascript">
+                    function addToast() {
+                        document.querySelector('#toast').style.display = 'block'
+
+                        setTimeout(function() {
+                            document.querySelector('#toast .toast').classList.add('toast--animation')
+                        }, 100)
+                    }
+
+                    function closeToast() {
+                        setTimeout(function() {
+                            document.querySelector('#toast').style.display = 'none'
+                        }, 1000)
+
+                        document.querySelector('#toast .toast').classList.remove('toast--animation')
+                    }
+                </script>
+
+                <button class="button" onclick="addToast()">
+                    Click me!
+                </button>
+
+                <div id="toast" class="toast-wrapper" style="display: none;">
+                    <div class="toast toast--danger">
+                        <div class="toast__icon">
+                            <svg class="icon fill-text-contrast" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-warning"></use>
+                            </svg>
+                        </div>
+                        <div class="toast__body">
+                            Warning! Action not Working!
+                        </div>
+                        <button class="toast__button" onclick="closeToast()">
+                            <svg class="icon fill-text-contrast" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-close"></use>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
             </div>
         </div>
     </div>

public/helpers.html

@@ -14,11 +14,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 

public/impressum.html

@@ -17,11 +17,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 

public/imprint.html

@@ -17,11 +17,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 

public/index.html

@@ -17,7 +17,7 @@
         <div class="bar">
             <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
             <div class="bar__main justify-end">

public/layout.html

@@ -15,11 +15,25 @@
 
     <header class="header">
         <div class="bar">
-            <div class="bar__main">
+            <div class="bar__start">
                 <h1 class="m-top-4 m-bottom-4 h4">
-                    Plain UI 0.2
+                    Plain UI 0.3
                 </h1>
             </div>
+            <div class="bar__main justify-end">
+                <a class="button button--small m-bottom-0" href="#">
+                    Github
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-github"></use>
+                    </svg>
+                </a>
+                <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
+                    Gitea
+                    <svg class="m-left-3 icon fill-text" aria-hidden="true">
+                        <use xlink:href="symbol-defs.svg#icon-gitea"></use>
+                    </svg>
+                </a>
+            </div>
         </div>
     </header>
 

src/scss/_variables.scss

@@ -142,5 +142,5 @@ $padding-breakpoints: (
  *
  */
 
-$border-radius: 2px;
-$border: 1px solid var(--border);
+$border-radius: 2px !default;
+$border: 1px solid var(--border) !default;

src/scss/components/_button.scss

@@ -26,6 +26,26 @@
     }
 }
 
+/**
+ *
+ *
+ */
+@mixin button-full-color($name)
+{
+    &--#{$name}.button--full {
+        background-color: var(--#{$name});
+
+        &:hover {
+            background-color: var(--background-contrast);
+            border-color: var(--#{$name});
+        }
+
+        &:focus, &:active {
+            outline: 2px solid var(--#{$name});
+        }
+    }
+}
+
 /**
  *
  *
@@ -58,7 +78,7 @@
     transition: background-color 0.1s;
 
     margin: $margin;
-    
+
     padding: 0 1.3rem;
     min-height: 2.8rem;
     width: 100%;
@@ -124,4 +144,19 @@
     @include button-outline-color('info', lighten($color__info, 20%));
     @include button-outline-color('warning', lighten($color__warning, 20%));
     @include button-outline-color('success', lighten($color__success, 20%));
+
+    &--full {
+        background-color: var(--active);
+        color: white;
+
+        &:hover {
+            background-color: var(--background-contrast);
+            color: var(--text);
+        }
+    }
+
+    @include button-full-color('danger');
+    @include button-full-color('info');
+    @include button-full-color('warning');
+    @include button-full-color('success');
 }

src/scss/components/_field.scss

@@ -63,6 +63,10 @@ input.field-text, textarea.field-text {
     padding: 0.8em 1.1em;
 }
 
+textarea.field-text {
+    height: 180px;
+}
+
 
 /**
  * field-choice

src/scss/components/_modal.scss

@@ -41,6 +41,7 @@
         transform: scale(0);
 
         max-width: 600px;
+        width: 100%;
     }
 
     &__title {

src/scss/components/_toast.scss

@@ -0,0 +1,126 @@
+/**
+ *  <div class="toast-wrapper">
+ *      <div class="toast">
+ *          <div class="toast__icon">
+ *               <svg class="icon fill-text-contrast" aria-hidden="true">
+ *                   <use xlink:href="/symbol-defs.svg#icon-warning"></use>
+ *               </svg>
+ *          </div>
+ *          <div class="toast__body">
+ *
+ *          </div>
+ *          <div class="toast__button">
+ *              <svg class="icon fill-text-contrast" aria-hidden="true">
+ *                   <use xlink:href="/symbol-defs.svg#icon-close"></use>
+ *              </svg>
+ *          </div>
+ *      </div>
+ *  </div>
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://gitea.com/tentakelfabrik/plain-ui
+ *
+ */
+
+@mixin toast-color($name)
+{
+    &--#{$name} {
+        background: var(--#{$name});
+
+        .toast__button {
+            background: var(--#{$name});
+        }
+    }
+}
+
+.toast {
+    display: flex;
+    background: var(--background);
+    border: 1px solid var(--border);
+
+    max-width: 800px;
+    width: max-content;
+    margin-top: 1.25rem;
+
+    position: relative;
+    left: calc(-100% - 2rem);
+    transition: left 0.1s;
+
+    // make sure only single item is clickable
+    pointer-events: auto;
+
+    &--animation {
+        left: 0;
+    }
+
+    &__body {
+        width: 100%;
+        padding: 1em 1.25em;
+    }
+
+    &__button {
+        border: 0;
+        appearance: none;
+        background: var(--background);
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &__body, &__button {
+        color: var(--text-contrast);
+    }
+
+    &__icon, &__button {
+        display: flex;
+        align-self: stretch;
+        align-items: center;
+        padding: 0 1em;
+
+        svg {
+            font-size: 2rem;
+        }
+    }
+
+    // adding colors
+    @include toast-color('danger');
+    @include toast-color('info');
+    @include toast-color('success');
+    @include toast-color('warning');
+
+    &-wrapper {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        margin: 2rem;
+
+        z-index: 30;
+
+        // make sure that conainter is not clickable
+        pointer-events: none;
+
+        // position modificators
+        &--right {
+            left: inherit;
+            right: 0;
+
+            .toast {
+                left: inherit;
+                right: calc(-100% - 2rem);
+                transition: right 0.1s;
+
+                &--animation {
+                    left: inherit;
+                    right: 0;
+                }
+            }
+        }
+
+        &--top {
+            bottom: inherit;
+            top: 0;
+        }
+    }
+}

src/scss/helpers/_spacing.scss

@@ -110,7 +110,10 @@ $spacing-steps: 10 !default;
 @each $direction in $spacing-direction
 {
     @include spacing('m', 'margin', 0, 0, $direction);
+    @include spacing_breakpoints('m', 'margin', 0, 0, $direction);
+
     @include spacing('m', 'margin', 1, 1px, $direction);
+    @include spacing_breakpoints('m', 'margin', 1, 1px, $direction);
 
     @for $i from 2 through $spacing-steps {
         $value: $spacing-gap * factor($i - 1) * 1rem;
@@ -131,7 +134,10 @@ $spacing-steps: 10 !default;
 @each $direction in $spacing-direction
 {
     @include spacing('p', 'padding', 0, 0, $direction);
+    @include spacing_breakpoints('p', 'padding', 0, 0, $direction);
+
     @include spacing('p', 'padding', 1, 1px, $direction);
+    @include spacing_breakpoints('p', 'padding', 1, 1px, $direction);
 
     @for $i from 0 through $spacing-steps {
         $value: $spacing-gap * factor($i - 1) * 1rem;

src/scss/helpers/_visibility.scss

@@ -106,4 +106,19 @@
 
 .visibility-collapse {
     visibility: collapse;
+}
+
+
+/**
+ *  Opacity
+ *
+ *
+ */
+
+$opacity-steps: 10;
+
+@for $i from 1 through $opacity-steps {
+    .opacity-#{ $i } {
+        opacity: ($i / 10);
+    }
 }

src/scss/plain-ui.scss

@@ -27,6 +27,7 @@
     'components/modal',
     'components/loading',
     'components/sidebar',
+    'components/toast',
 
     'layouts/masonry',
     'layouts/slider',