zui/src/less/views/comment.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: comment.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Comments list view

.comments {
  > header {
    border-bottom: 1px solid @color-gray-lighter;

    > .alert {
      padding: @alert-padding/2 @alert-padding;
      margin-bottom: -10px;
    }
    h1, h2, h3 {
      margin: 10px 0;
      padding: 10px 0;
    }

    > .pull-right {}
  }

  > footer {
    padding-top: 10px;
    > .reply-form {
      > .avatar {
        display: block;
        width: 40px;
        height: 40px;
        float: left;
        margin-top: 10px;
      }
      > .avatar + .form { padding-left: 50px; }
    }
  }
}


.comment {
  padding: 10px 0;
  border-bottom: 1px solid @color-gray-lighter;

  .clearfix-mixin();
  > .avatar,
  > .content {
    display: block;
  }

  > .avatar {
    width: 40px;
    height: 40px;
    float: left;
    margin-top: 10px;
  }

  > .avatar + .content { padding-left: 50px; }

  > .content {
    > .text { margin-top: 5px; }

    > .actions {
      margin-top: 4px;
      > a {
        display: inline-block;
        color: @color-gray;

        + a {margin-left: 5px;}
      }
    }
  }

  &:hover {
    > .content {
      > .actions {
        > a { color: @link-color; }
      }
    }
  }

  > .comments-list {
    padding-left: 30px;
    margin-left: 20px;
    border-left: 1px dashed @color-gray-lighter;
    padding-top: 10px;
    padding-bottom: 0;
    > .comment {
      border: none;
      border-top: 1px solid @color-gray-lighter;

      &:last-child { padding-bottom: 0; }
    }
  }
}