Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: Extract display and animation properties from alert styling.

This commit is contained in:
Thomas Ip 2019-06-20 17:47:08 +08:00 committed by Tim Abbott
parent 25dbda1e53
commit 1fa82b9dea
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
static/styles/alerts.scss
View File

@ -1,10 +1,32 @@
/* general alert styling changes */
.alert {
.alert-display {
display: none;
&.show {
display: block;
}
}
.alert-animations {
&.show {
animation-name: fadeIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
&.fade-out {
animation-name: fadeOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.faded {
opacity: 0.7;
}
}
/* general alert styling changes */
.alert {
@extend .alert-display;
&#organization-status {
margin: 20px;
@ -25,6 +47,8 @@
z-index: 220;
.alert {
@extend .alert-animations;
font-size: 1rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
@ -42,22 +66,6 @@
border: 1px solid hsl(16, 60%, 45%);
box-shadow: 0 0 2px hsl(16, 60%, 45%);
&.show {
animation-name: fadeIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
&.fade-out {
animation-name: fadeOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.faded {
opacity: 0.7;
}
&::before {
position: absolute;
top: 10px;