From b7f8ea99d527cbae6939540cc61eb2461e0f7559 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Sun, 12 Sep 2021 13:31:24 +0200 Subject: [PATCH] adding #30 --- public/components.html | 46 ++++++++++++++++ public/plain-ui.css | 93 ++++++++++++++++++++++++++++++++ src/scss/components/_toast.scss | 95 +++++++++++++++++++++++++++++++++ src/scss/plain-ui.scss | 1 + 4 files changed, 235 insertions(+) create mode 100644 src/scss/components/_toast.scss diff --git a/public/components.html b/public/components.html index a051eba..eed8117 100644 --- a/public/components.html +++ b/public/components.html @@ -851,6 +851,52 @@ + + +

+ Toast +

+ + + + + + + diff --git a/public/plain-ui.css b/public/plain-ui.css index c44bba0..4bd047e 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -2927,6 +2927,99 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after { } } +/** + *
+ *
+ *
+ * + *
+ *
+ * + *
+ *
+ * + *
+ *
+ *
+ * + * @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 * diff --git a/src/scss/components/_toast.scss b/src/scss/components/_toast.scss new file mode 100644 index 0000000..89bcd10 --- /dev/null +++ b/src/scss/components/_toast.scss @@ -0,0 +1,95 @@ +/** + *
+ *
+ *
+ * + *
+ *
+ * + *
+ *
+ * + *
+ *
+ *
+ * + * @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; + } +} diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 542f1a1..4182e6a 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -27,6 +27,7 @@ 'components/modal', 'components/loading', 'components/sidebar', + 'components/toast', 'layouts/masonry', 'layouts/slider',