You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
plain-ui/src/scss/components/_toast.scss

127 lines
2.6 KiB

/**
* <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, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
@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;
}
}
}