lujanfernaud/prevy

View on GitHub
app/assets/stylesheets/sections/_topics.scss

Summary

Maintainability
Test Coverage
//
// 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;
}