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.
126 lines
2.6 KiB
126 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, 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;
|
|
}
|
|
}
|
|
}
|