mirror of
https://github.com/flarum/framework.git
synced 2024-12-14 08:03:37 +08:00
543b136f7c
- If the fadeIn animation is specified on the PostStream class itself, any time we add/remove another animation, it will redo fadeIn. To avoid this, we move fadeIn into it's own css class, which is applied, and then immediately removed after the animation is completed to ensure it only runs once. - The "fix" for flashItem was actually broken, as it resulted in 'flash' never being removed, so we never went back to .PostStream's fadeIn. We adjust flashItem to ensure that '.flash' is removed. We also remove 'fadeIn' in case it hasn't yet been removed in oncreate.
109 lines
1.9 KiB
Plaintext
109 lines
1.9 KiB
Plaintext
// ------------------------------------
|
|
// Stream
|
|
|
|
.PostStream {
|
|
@media @tablet-up {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.PostStream-item {
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid @control-bg;
|
|
|
|
@media @phone {
|
|
margin: 0 -15px;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {opacity: 0.5}
|
|
50% {opacity: 1}
|
|
100% {opacity: 0.5}
|
|
}
|
|
@-webkit-keyframes blink {
|
|
0% {opacity: 0.5}
|
|
50% {opacity: 1}
|
|
100% {opacity: 0.5}
|
|
}
|
|
.LoadingPost {
|
|
.animation(blink 1s linear);
|
|
.animation-iteration-count(infinite);
|
|
}
|
|
.fakeText {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background: @control-bg;
|
|
height: 12px;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border-radius: @border-radius;
|
|
|
|
.Post-header & {
|
|
height: 16px;
|
|
width: 150px;
|
|
|
|
@media @phone {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.PostStream-timeGap {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: @muted-color;
|
|
padding: 20px 20px 20px @avatar-column-width;
|
|
font-size: 12px;
|
|
|
|
@media @phone {
|
|
margin: 0 -15px;
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
|
|
// .item.highlight .post {
|
|
// &:before {
|
|
// content: "";
|
|
// position: absolute;
|
|
// left: -30px;
|
|
// top: -5px;
|
|
// bottom: -5px;
|
|
// width: 5px;
|
|
// border-radius: @border-radius;
|
|
// background: @fl-primary-color;
|
|
// }
|
|
// }
|
|
@-webkit-keyframes pulsate {
|
|
0% {-webkit-transform: scale(1)}
|
|
50% {-webkit-transform: scale(1.02)}
|
|
100% {-webkit-transform: scale(1)}
|
|
}
|
|
@keyframes pulsate {
|
|
0% {transform: scale(1)}
|
|
50% {transform: scale(1.02)}
|
|
100% {transform: scale(1)}
|
|
}
|
|
.pulsate {
|
|
.animation(pulsate 1s ease-in-out);
|
|
.animation-iteration-count(infinite);
|
|
}
|
|
.flash {
|
|
.animation(pulsate 0.2s ease-in-out);
|
|
.animation-iteration-count(1);
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {opacity: 0}
|
|
100% {opacity: 1}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {opacity: 0}
|
|
100% {opacity: 1}
|
|
}
|
|
.fadeIn {
|
|
.animation(fadeIn 0.4s ease-in-out);
|
|
.animation-iteration-count(1);
|
|
}
|