initiatived21/d21

View on GitHub
client/app/assets/stylesheets/aleut/components/_components.comment.scss

Summary

Maintainability
Test Coverage
/*------------------------------------*\
    #COMMENT
\*------------------------------------*/

/**
 * Pledge questions and answers
 */

.c-comment {
}

.c-comment__question, .c-comment__answer {
  margin-bottom: $spacing--small;
  position: relative;
  min-height: $comment-avatar-size;
  @include clearfix;
}

.c-comment__question-text, .c-comment__answer-text {
  padding: $spacing--tiny $spacing--small;
  border-radius: 5px;
}

.c-comment__question-text {
  margin-left: $comment-avatar-size + $spacing--small;

  background-color: $light-gray;
}

.c-comment__answer-text {
  float: right;
  margin-right: $comment-avatar-size + $spacing--small;

  color: $white;
  background-color: $primary-color-lighter;
}

.c-comment__question-avatar {
  position: absolute;
  top: 0;
  left: 0;
}

.c-comment__answer-avatar {
  position: absolute;
  top: 0;
  right: 0;
}

.c-comment__answer-form {
  margin-bottom: $spacing--small;
}

.c-comment:last-of-type > .c-comment__answer-form {
  margin-bottom: 0;
}

.c-comment__submit {
  @include media-query(m) {
    width: 100%;
  }
}