mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 12:47:14 +01:00
58 lines
745 B
SCSS
58 lines
745 B
SCSS
|
.global-alert {
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
background-color: #33A4E7;
|
||
|
|
||
|
.msg {
|
||
|
width: 100%;
|
||
|
display: block;
|
||
|
color: white;
|
||
|
font-size: 12px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.global-alert.hidden {
|
||
|
animation: alertHidden .5s ease forwards;
|
||
|
}
|
||
|
|
||
|
.global-alert.visible {
|
||
|
animation: alert .5s ease forwards;
|
||
|
}
|
||
|
|
||
|
/* Animation */
|
||
|
@keyframes alert {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
top: -50px;
|
||
|
padding: 0px;
|
||
|
line-height: 12px;
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
top: 0;
|
||
|
padding: 8px;
|
||
|
line-height: 12px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes alertHidden {
|
||
|
0% {
|
||
|
top: 0;
|
||
|
opacity: 1;
|
||
|
padding: 8px;
|
||
|
line-height: 12px;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
top: -50px;
|
||
|
padding: 0px;
|
||
|
line-height: 0px;
|
||
|
}
|
||
|
}
|