onion/sass/ascribe_global_notification...

64 lines
1.1 KiB
SCSS

.ascribe-global-notification {
background-color: #212121;
color: white;
display: table;
height: 3.5em;
left: 0;
position: fixed;
transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
width: 100%;
z-index: 9999;
}
.ascribe-global-notification-off {
bottom: -3.5em;
}
.ascribe-global-notification-on {
bottom: 0;
}
.ascribe-global-notification > div,
.ascribe-global-notification-bubble > div {
display: table-cell;
font-size: 1.25em;
padding-right: 3em;
text-align: right;
vertical-align: middle;
}
.ascribe-global-notification-bubble {
background-color: #212121;
border-radius: 2px;
bottom: 3em;
color: white;
display: table;
height: 3.5em;
position: fixed;
right: -50em;
transition: 1s right ease;
z-index: 9999;
> div {
padding: .75em 1.5em;
}
}
.ascribe-global-notification-bubble-off {
right: -100em;
}
.ascribe-global-notification-bubble-on {
right: 3.5em;
}
.ascribe-global-notification-danger {
background-color: #d9534f;
}
.ascribe-global-notification-success {
background-color: rgba(2, 182, 163, 1);
}