app/assets/stylesheets/sections/_topics.scss
//
// Topics
//
.topic-box {
font-size: 1.05rem;
}
.topic__avatar,
.comment__avatar {
display: none;
@media (min-width: 480px) {
display: block;
flex-basis: 13%;
}
@include media-breakpoint-up(md) {
flex-basis: 7%;
}
}
.topic__body,
.topic__info,
.comment__body {
flex-basis: 100%
}
.topic-separator {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.topic-event-data {
padding-bottom: .7rem;
border-bottom: 1px solid $gray-300;
}
.latest-topics__buttons {
margin-top: -.25rem;
margin-bottom: 1.15rem;
@media (min-width: 568px) {
margin-bottom: 1.5rem;
}
}
.all-topics-btn,
.new-topic-btn {
display: block;
max-width: 100%;
@media (min-width: 568px) {
display: inline-block;
max-width: auto;
}
}
.all-topics-btn {
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;
@media (min-width: 568px) {
margin-bottom: initial;
margin-left: initial;
margin-right: .5rem;
}
}
.new-topic-btn--latest-topics {
margin-left: 1rem;
margin-right: 1rem;
@media (min-width: 568px) {
margin-left: initial;
margin-right: initial;
}
}
.new-topic-btn--topics-index {
margin-left: .03rem;
margin-right: .03rem;
@media (min-width: 568px) {
margin-left: initial;
margin-right: initial;
}
}
.topics-index__list {
hr:nth-last-child(1) {
display: none;
}
}
.topics-index .pagination {
margin-bottom: 0;
}
// Comments
.comment-separator__line {
padding: .75rem;
flex-basis: 10.4%;
border-right: 3px solid $gray-300;
@include media-breakpoint-up(md) {
flex-basis: 7%;
}
@include media-breakpoint-up(lg) {
flex-basis: 6%;
}
@include media-breakpoint-up(xl) {
flex-basis: 5.6%;
}
}
.comment-box--event {
margin-top: 1.75rem;
}