adding #30

public/components.html

@@ -851,6 +851,52 @@
                         </a>
                     </div>
                 </div>
+
+                <!-- toast -->
+                <h2 class="m-top-5">
+                    Toast
+                </h2>
+
+                <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/plain-ui.css

@@ -2927,6 +2927,99 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
   }
 }
 
+/**
+ *  <div class="toast-wrapper">
+ *      <div class="toast">
+ *          <div class="toast__icon">
+ *
+ *          </div>
+ *          <div class="toast__body">
+ *
+ *          </div>
+ *          <div class="toast__button">
+ *
+ *          </div>
+ *      </div>
+ *  </div>
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://gitea.com/tentakelfabrik/plain-ui
+ *
+ */
+.toast {
+  display: flex;
+  background: var(--background);
+  border: 1px solid var(--border);
+  max-width: 800px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  margin-top: 1.25rem;
+  position: relative;
+  left: calc(-100% - 2rem);
+  transition: left 0.1s;
+}
+.toast--animation {
+  left: 0;
+}
+.toast__body {
+  width: 100%;
+  padding: 1em 1.25em;
+}
+.toast__button {
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--background);
+}
+.toast__button:hover {
+  cursor: pointer;
+}
+.toast__body, .toast__button {
+  color: var(--text-contrast);
+}
+.toast__icon, .toast__button {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  padding: 0 1em;
+}
+.toast__icon svg, .toast__button svg {
+  font-size: 2rem;
+}
+.toast--danger {
+  background: var(--danger);
+}
+.toast--danger .toast__button {
+  background: var(--danger);
+}
+.toast--info {
+  background: var(--info);
+}
+.toast--info .toast__button {
+  background: var(--info);
+}
+.toast--success {
+  background: var(--success);
+}
+.toast--success .toast__button {
+  background: var(--success);
+}
+.toast--warning {
+  background: var(--warning);
+}
+.toast--warning .toast__button {
+  background: var(--warning);
+}
+.toast-wrapper {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  margin: 2rem;
+}
+
 /**
  *  masonry
  *

src/scss/components/_toast.scss

@@ -0,0 +1,95 @@
+/**
+ *  <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;
+
+    &--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;
+        }
+    }
+
+    @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;
+    }
+}

src/scss/plain-ui.scss

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