framework/less/forum/PostStream.less
2015-09-16 17:04:35 +09:30

96 lines
1.7 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);
}