astuto/app/javascript/stylesheets/components/Comments.scss

.commentsContainer {
  @extend .my-3;

  .newCommentForm {
    @extend
      .d-flex,
      .flex-column,
      .my-3;

    .commentBodyForm {
      @extend .d-flex;
    }

    .commentIsUpdateForm {
      @extend
        .d-flex,
        .justify-content-between,
        .mt-3;

      margin-left: 48px;
    }

    .currentUserAvatar {
      @extend
        .gravatar,
        .align-self-end,
        .mr-2;
    }

    .newCommentBody {
      @extend
        .form-control,
        .w-100,
        .p-2,
        .mr-2;

      height: 80px;
      
      border: thin solid grey;
      border-radius: 4px;

      resize: none;
    }

    .submitCommentButton {
      @extend
        .align-self-end;

      box-sizing: border-box;
      width: 120px;
      height: 40px;
    }
  }

  .commentsTitle {
    @extend
      .text-secondary,
      .text-uppercase,
      .font-weight-lighter,
      .my-2;
  }

  .commentList > .commentList {
    padding-left: 32px;
  }

  .comment {
    @extend
      .my-4;

    .commentHeader {
      @extend .titleText;

      .commentAuthor {
        @extend .ml-2;

        vertical-align: middle;
      }

      .postUpdateBadge {
        @extend
          .badge,
          .badgeLight,
          .ml-2;
      }
    }

    .commentBody {
      @extend .my-2;

      p { @extend .m-0; }
    }

    .commentFooter {
      font-size: 14px;

      .commentLink {
        color: $astuto-black;

        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}