github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-07 10:06:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

adding a few simple anmiations to the topic list loading message and modals

Browse Source
This commit is contained in:
Kris Aubuchon 2014-03-20 16:33:03 -04:00
parent 3fbb2cd728
commit ca4d211268
2 changed files with 67 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/desktop/discourse.scss
View File

@ -265,7 +265,7 @@ blockquote {
.spinner { .spinner {
width: 100px; width: 100px;
margin: 0 auto 30px auto; margin: 20px auto 30px auto;
background-color: #000; background-color: #000;
@include border-radius-all(10px); @include border-radius-all(10px);
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
@ -279,8 +279,35 @@ blockquote {
position: 10px 8px; position: 10px 8px;
size: 25px; size: 25px;
}; };
-webkit-animation: spinner .25s;
animation: spinner .25s;
} }
//loading spinner drop-in animation
@-webkit-keyframes spinner {
0% {
margin: 0px auto 30px auto;
opacity: 0;
}
100% {
margin: 20px auto 30px auto;
opacity: 1;
}
}@keyframes modal {
0% {
margin: 0px auto 30px auto;
opacity: 0;
}
100% {
margin: 20px auto 30px auto;
opacity: 1;
}
}
.avatar { .avatar {
@include border-radius-all(2px); @include border-radius-all(2px);
} }

45
app/assets/stylesheets/desktop/modal.scss
View File

@ -31,10 +31,22 @@
.modal-backdrop, .modal-backdrop,
.modal-backdrop.fade.in { .modal-backdrop.fade.in {
-webkit-animation: fade .25s;
animation: fade .25s;
opacity: 0.8; opacity: 0.8;
filter: alpha(opacity=80); filter: alpha(opacity=80);
} }
//fade in
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: .8}
}@keyframes fade {
from {opacity: 0}
to {opacity: .8}
}
.modal-outer-container { .modal-outer-container {
display:table; display:table;
width:100%; width:100%;
@ -79,16 +91,37 @@
box-shadow: 0 3px 7px rgba($primary_shadow_color, .8); box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
background-clip: padding-box; background-clip: padding-box;
} }
.modal.fade { .modal.in {
-webkit-transition: opacity .3s linear, top .3s ease-out; -webkit-animation: modal .25s;
transition: opacity .3s linear, top .3s ease-out; animation: modal .25s;
top: -25%;
} }
.modal.fade.in {
top: 50%; //fade in and animate up
@-webkit-keyframes modal {
0% {
margin-top: 100px;
opacity: 0;
}
100% {
margin-top: 0;
opacity: 1;
}
}@keyframes modal {
0% {
margin-top: 100px;
opacity: 0;
}
100% {
margin-top: 0;
opacity: 1;
}
} }
.modal-body { .modal-body {
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;