amazeui/less/comment.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                      Comment
//
// Description:               Define style for comment
//
// Component:                 `.am-comment`
//
// Sub-objects:               `.am-comment-avatar`
//                            `.am-comment-main`
//                            `.am-comment-hd`
//                            `.am-comment-title`
//                            `.am-comment-meta`
//                            `.am-comment-author`
//                            `.am-comment-bd`
//
// Modifiers:                 `.am-comment-flip`
//                            `.am-comment-primary`
//                            `.am-comment-secondary`
//                            `.am-comment-success`
//                            `.am-comment-warning`
//                            `.am-comment-danger`
//
// =============================================================================


/* ==========================================================================
   Component: Comment
 ============================================================================ */

.@{ns}comment {
  .clearfix();
  .hook-comment;
}

.@{ns}comment-avatar {
  float: left;
  .square(@comment-avatar-size);
  border-radius: 50%;
  border: 1px solid transparent;

  @media @medium-up {
    .square(@comment-avatar-size * 1.5);
  }

  .hook-comment-avatar;
}

.@{ns}comment-main {
  position: relative;
  margin-left: @comment-main-margin;
  border: 1px solid @comment-border-color;
  border-radius: @global-radius;

  &:before,
  &:after {
    position: absolute;
    top: 10px;
    left: -8px;
    right: 100%;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    border-style: solid solid outset;
    border-width: 8px 8px 8px 0;
    pointer-events: none;
  }

  &:before {
    border-right-color: @comment-border-color;
    z-index: 1;
  }

  &:after {
    border-right-color: @comment-hd-bg-color;
    margin-left: 1px;
    z-index: 2;
  }

  @media @medium-up {
    margin-left: @comment-main-margin-md-up;
  }

  .hook-comment-main;
}

.@{ns}comment-hd {
  background: @comment-hd-bg-color;
  border-bottom: 1px solid #eee;
  display: flex;

  .hook-comment-hd;
}

.@{ns}comment-title {
  margin: 0 0 @comment-title-margin-btm 0;
  font-size: @comment-title-font-size;
  line-height: @comment-title-line-height;

  .hook-comment-title;
}

.@{ns}comment-meta {
  flex: 1;
  padding: 10px 15px;
  font-size: @comment-meta-font-size;
  color: @comment-meta-color;
  line-height: @comment-meta-line-height;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  a {
    color: @comment-meta-color;
  }

  .hook-comment-meta;
}

.@{ns}comment-author {
  font-weight: bold;
  color: @comment-meta-color;
  .hook-comment-author;
}

.@{ns}comment-bd {
  padding: @comment-bd-padding;
  overflow: hidden;

  & > :last-child {
    margin-bottom: 0;
  }

  .hook-comment-bd;
}

// comment footer
.@{ns}comment-footer {
  padding: 0 @comment-bd-padding 5px;

  .@{ns}comment-actions {
    a + a {
      margin-left: 5px;
    }
  }

  .hook-comment-footer;
}

// comment actions: in header or footer
.@{ns}comment-actions {
  font-size: @comment-meta-font-size;
  color: @comment-meta-color;

  a {
    display: inline-block;
    padding: 10px 5px;
    line-height: 1;
    color: @comment-meta-color;
    opacity: .7;

    &:hover {
      color: @global-primary;
      opacity: 1;
    }
  }

  .@{ns}comment-hd & {
    padding-right: .5rem;
  }

  .hook-comment-actions;
}


// Modifiers
// ========================================================================

.@{ns}comment-flip {
  .@{ns}comment-avatar {
    float: right;
  }

  .@{ns}comment-main {
    margin-left: auto;
    margin-right: @comment-main-margin;

    @media @medium-up {
      margin-right: @comment-main-margin-md-up;
    }

    &:before,
    &:after {
      left: auto;
      right: -8px;
      border-width: 8px 0 8px 8px;
    }

    &:before {
      border-left-color: @comment-border-color;
    }

    &:after {
      border-left-color: @comment-hd-bg-color;
      margin-right: 1px;
      margin-left: auto;
    }
  }
}


// Highlight mixin
// =============================================================================

.comment-highlight-variant(@border-color: @global-primary) {
  .@{ns}comment-avatar {
    border-color: @border-color;
  }

  .@{ns}comment-main {
    border-color: @border-color;
    &:before {
      border-right-color: @border-color;
    }
  }

  // Highlight and flip
  &.@{ns}comment-flip .@{ns}comment-main {
    &:before {
      border-left-color: @border-color;
      border-right-color: transparent;
    }

    &:after {
      border-left-color: @comment-hd-bg-color;
    }
  }
}

.@{ns}comment-primary {
  .comment-highlight-variant(@global-primary);
  .hook-comment-primary;
}

.@{ns}comment-secondary,
.@{ns}comment-highlight {
  .comment-highlight-variant(@comment-hl-border-color);
  .hook-comment-secondary;
}

.@{ns}comment-success {
  .comment-highlight-variant(@global-success);
  .hook-comment-success;
}

.@{ns}comment-warning {
  .comment-highlight-variant(@global-warning);
  .hook-comment-warning;
}

.@{ns}comment-danger {
  .comment-highlight-variant(@global-danger);
  .hook-comment-danger;
}


// Comments list
// =============================================================================

.@{ns}comments-list {
  padding: 0;
  list-style: none;
}

.@{ns}comments-list .@{ns}comment {
  margin: @comment-list-margin-top 0 0 0;
  list-style: none;
}


@media @medium-up {
  .@{ns}comments-list-flip {
    .@{ns}comment-main {
      margin-right: 64px;
    }
    .@{ns}comment-flip .@{ns}comment-main {
      margin-left: 64px;
    }
  }
}


// Hooks
// =============================================================================

.hook-comment() {}
.hook-comment-avatar() {}
.hook-comment-main() {}
.hook-comment-hd() {}
.hook-comment-title() {}
.hook-comment-meta() {}
.hook-comment-author() {}
.hook-comment-bd() {}
.hook-comment-footer() {}
.hook-comment-actions() {}

.hook-comment-primary() {}
.hook-comment-secondary() {}
.hook-comment-success() {}
.hook-comment-warning() {}
.hook-comment-danger() {}