1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 |
|
5 | .#{$css-prefix}notification {
|
6 | width: 384px;
|
7 | position: fixed;
|
8 | z-index: 1010;
|
9 | padding: 0;
|
10 | margin: 0;
|
11 | .#{$css-prefix}message {
|
12 | margin-bottom: 16px;
|
13 | overflow: hidden;
|
14 | }
|
15 | }
|
16 |
|
17 | .#{$css-prefix}notification-fade-leave {
|
18 | animation-duration: 300ms;
|
19 | animation-play-state: paused;
|
20 | animation-fill-mode: both;
|
21 | animation-timing-function: ease;
|
22 | }
|
23 |
|
24 | .#{$css-prefix}notification-fade-leave.#{$css-prefix}notification-fade-leave-active {
|
25 | animation-name: NotificationFadeOut;
|
26 | animation-play-state: running;
|
27 | }
|
28 |
|
29 | @keyframes NotificationFadeOut {
|
30 | 0% {
|
31 | max-height: 150px;
|
32 | margin-bottom: 16px;
|
33 | opacity: 1;
|
34 | }
|
35 | 100% {
|
36 | max-height: 0;
|
37 | margin-bottom: 0;
|
38 | padding-top: 0;
|
39 | padding-bottom: 0;
|
40 | opacity: 0;
|
41 | }
|
42 | }
|