Takumon/mean-blog

.article {
  box-sizing: border-box;
  padding: 0;
  transition: 0.5s;
  border-bottom: 1px dotted #ccc;
  background: white;
  position: relative;
  border-radius: 2px;
  box-shadow: 1px 1px 10px -1px rgba(0,0,0,.4);

  &__header {
    cursor: pointer;
    background: #5e6371;
    display: flex;
    position: relative;
    color: white;

    &:hover {
      opacity: 0.9;
    }
    &:focus {
      outline: 0;
    }
  }


  &__avator {
    margin: 12px;
    box-sizing: border-box;
  }

  &__avator-icon {
    height: 42px;
    width: 42px;
    background: white;
    border-radius: 4px;
    image-rendering: -webkit-optimize-contrast;
  }

  &__subtitle {
    margin: 12px;
    margin-left: 0px;
  }

  &__author-name {
    white-space: nowrap;
  }

  &__date {
    font-size: 0.6em;
    white-space: nowrap;
  }

  &__created-or-updated {
    font-size: 0.4em;
  }

  &__title-wrapper {
    margin: 12px;
    margin-left: 0;
    border-left: solid 1px gray;
    padding-left: 12px;
  }

  &__title {
    height: 100%;
    color: #ffffff;
    font-size: 1.2em;
  }

  &__main {
    padding: 12px;
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
    position: relative;
    bottom: 0;
    height: 180px;
    overflow: hidden;

    &:after {
      content  : "";
      position : absolute;
      z-index  : 1;
      left     : 0;
      pointer-events   : none;
      background-image : linear-gradient(to bottom,
                        rgba(255,255,255, 0),
                        rgba(255,255,255, 1) 90%);
      width    : 100%;
      height: 4em;
      bottom   : 0;
    }
  }

  &__operation {
    margin: 0 8px;
    border-top: #d4d4d4 1px solid;
  }

  &__operation-btn {
    color: #606060;
    font-weight: bold;
    &:hover {
      text-decoration: underline;
    }
  }

  &__comments {
    width: 100%;
    border-top: 1px solid #d4d4d4;
  }

  &__comments-detail {
    padding: 12px;
    background: #fdfdfd;
    border-top: 1px solid #d4d4d4;
    position: relative;

    &__close-btn {
      color: #3f51b5;
      height: 24px;
      width: 24px;
      line-height: 0;
      position: absolute;
      right: 12px;

      $parent: &;

      &_top {
        @extend #{$parent};
        top: 12px;

        &:hover {
          background-color: #B8BFE0;
        }
      }

      &_bottom {
        @extend #{$parent};
        bottom: 24px;
        &.is-login {
          //　コメント欄分上に配置
          bottom: 252px;
        }

        &:hover {
          background-color: #B8BFE0;
        }
      }
    }
  }

  &__comment-editor {
    width: 100%;
  }

}


.plain-text-body {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  color: #24292e;
  margin: 0;
}


.comments {
  padding: 12px;
  background: #fdfdfd;
  box-sizing: border-box;
  display: flex;
  position: relative;

  &__count-icon {
    font-size: 0.8em;
  }

  &__count {
    white-space: nowrap;
    font-size: 16px;
    line-height: 36px;
    height: 36px;
    color: #606060;
    width: 72px;
    box-sizing: border-box;
    text-align: center;

    $parent: &;

    &_vote {
      @extend #{$parent};
      border-right: 1px solid #d4d4d4;

      $parent: &;
      &_link {
        @extend #{$parent};
        color: #3f51b5;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }

  &__count-unit {
    font-size: 0.7em;
  }

  &__main {
    display: flex;
    flex-wrap: wrap;
    margin-top: -12px;
  }

  &__comment {
    margin-top: 12px;
    line-height: 0;
    display: flex;

    &__user {
      width: 36px;
      height: 36px;
      box-shadow: grey 0 0 1px 0px;
      margin-right: 12px;
      background: white;
      border-radius: 3px;
      image-rendering: -webkit-optimize-contrast;
      cursor: pointer;
      $parent: &;

      &_reply {
        @extend #{$parent};
        margin-top: 11px;
        width: 24px;
        height: 24px;
        box-shadow: #a2a7b3 0 0 1px 0px;
        margin-right: 6px;
      }
    }
  }

  &__reply {
    display:flex;
    position: relative;
    margin-left: -6px;
    margin-right: 8px;

    &:before {
      content: '';
      display: block;
      height: 1px;
      background: #d4d4e8;
      top: 6px;
      right: 0px;
      left: -2px;
      position: absolute;
    }

    &:after {
      content: '';
      display: block;
      width: 1px;
      background: #d4d4e8;
      top: 6px;
      bottom: 0;
      right: 0px;
      position: absolute;
    }
  }

  &__operation {
    height: 24px;
    flex: 1 1 auto;
    display: flex;

    &__spacer {
      flex: 1 1 auto;
    }
    &__show-editor-btn {
      line-height: 1;
      height: 100%;
      display: block;
      color: #606060;
    }

    &__show-detail-btn {
      color: #3f51b5;
      height: 24px;
      width: 24px;
      line-height: 0;

      &:hover {
        background-color: #B8BFE0;
      }
    }
  }

}


.comment-editor {
  background: #fdfdfd;
  padding: 12px;
  box-sizing: border-box;
  border-top: 1px #d4d4d4 solid;
  display: flex;
  flex-direction: column;
  position: relative;

  &__main {
    display: flex;
  }

  &__author-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    margin-right: 12px;
    box-sizing: border-box;
    box-shadow: #2f2f2f 0 0 1px 0;
    align-self: flex-start;
  }

  &__textarea-wrapper {
    flex: 1;
    font-size: 14px;
    margin-bottom: -12px;

    &__textarea {
      font-size: 12px;
      box-sizing: border-box;
      line-height: 16px;
      padding: 4px;
      background: #fbfbfb;
      resize: none;

      height: 60px;
    }
  }

  &__operation {
    display: flex;

    &__spacer {
      flex: 1 1 auto;
    }
    &__cancel-btn {
      margin-right: 12px;
    }
    &__register-btn {
    }
  }
}