weseek__growi/src/client/styles/scss/_comment_kibela.scss

.kibela {
  /* Comment section */
  %comment-section {
    position: relative;
    padding: 1em;

    // speech balloon
    &:before {
      position: absolute;
      top: 1.5em;
      left: -1em;
      display: block;
      width: 0;
      height: 0;
      content: '';
      border-top: 20px solid transparent;
      border-right: 20px solid #e6e9ec;
      border-bottom: 20px solid transparent;
      border-left: 20px solid transparent;
      border-left-width: 0;

      @include media-breakpoint-down(xs) {
        top: 1em;
      }
    }
  }

  %picture {
    float: left;
    width: 3em;
    height: 3em;
    margin-top: 0.8em;

    @include media-breakpoint-down(xs) {
      width: 2em;
      height: 2em;
    }
  }

  .page-comments-row {
    margin: 10px 0px;
  }

  .page-comments {
    h4 {
      margin-bottom: 1em;
    }
  }
  .page-comment {
    position: relative;

    // ユーザー名
    .page-comment-creator {
      margin-top: -0.5em;
      margin-bottom: 0.5em;
      font-weight: bold;
    }

    // ユーザーアイコン
    .picture {
      @extend %picture;
    }

    // コメントセクション
    .page-comment-main {
      @extend %comment-section;
      margin-left: 4.5em;
      background: #e6e9ec;
      border-radius: 0.35em;
    }

    // コメント本文
    .page-comment-body {
      margin-bottom: 0.5em;
      word-wrap: break-word;
    }
  }

  /*
   * reply
   */
  .page-comment-reply {
    margin-top: 1em;
  }
  // remove margin after hidden replies
  .page-comments-hidden-replies + .page-comment-reply {
    margin-top: 0;
  }
  .page-comment-reply,
  .page-comment-reply-form {
    margin-right: 15px;
    margin-left: 6em;
  }
  // reply button
  .btn.btn-comment-reply {
    width: 120px;
    margin-top: 0.5em;
    margin-right: 15px;

    border-top: none;
    border-right: none;
    border-left: none;
  }

  // display cheatsheet for comment form only
  .comment-form {
    .editor-cheatsheet {
      display: none;
    }

    position: relative;
    margin-top: 1em;

    // user icon
    .picture {
      @extend %picture;
    }

    // seciton
    .comment-form-main {
      @extend %comment-section;
      margin-left: 4.5em;
      @include media-breakpoint-down(xs) {
        margin-left: 3.5em;
      }
      background: #e6e9ec;
      border-radius: 0.35em;
      .CodeMirror {
        border: 0px;
      }
    }

    // textarea
    .comment-write {
      margin-bottom: 0.5em;
    }
    .comment-form-comment {
      height: 80px;
      &:focus,
      &:not(:invalid) {
        height: 180px;
        transition: height 0.2s ease-out;
      }
    }
    .CodeMirror {
      border: 0px !important;
    }

    //// TODO: migrate to Bootstrap 4
    // use @include media-breakpoint-*
    // #page-editor {
    //   @media (max-width: $screen-sm) {
    //     .desc-long {
    //       display: none;
    //     }
    //   }
    // }
    // @media screen and (max-width: 1400px) {
    //   .desc-long {
    //     display: none;
    //   }
    //   @media screen and (max-width: 570px) {
    //     .gfm-cheatsheet {
    //       display: none;
    //     }
    //   }
    // }
  }
}