mochawesome-local-screenshots/src/less/_quick-summary.less

A Gorgeous HTML/CSS Reporter for Mocha.js - updated with local screenshot management

// Quick Summary

// Mixins
.qsColor(@color) {
  color: @color;
  &.active {
    border-color: @color;
  }
}

.qsHover(@color) {
  @color-dark: darken(@color, 11%);
  @color-light: lighten(@color, 40%);

  &:hover {
    border-color: @color;
  }
  &.active:hover {
    color: @color-dark;
    border-color: @color-dark;
  }
}

.quick-summary-cnt {
  display: none;
  float: right;
}

.quick-summary {
  .clearfix();
  .opacity(0);
  .transition(opacity .2s ease-out);
  margin: 11px -8px 0 0;
}

.qs-item {
  .fontCondNormal();
  .user-select(none);
  cursor: default;
  font-size: 18px;
  margin: 0 8px;
  border-bottom: 1px solid transparent;
  float: left;
}

// Filter Btns
.qs-item[data-filter] {
  .transition(border .2s ease-out);
}

// Icons / Colors
.qs-item {
  &:before {
    .ma-icon();
    top: 1px;
    font-size: 15px;
    margin-right: 4px;
  }
  &.summary-suites {
    .qsColor(@gray-lighter);
    .fontIcon(@ma-icon-suites);
    &:before {
      margin-right: 6px;
    }
  }
  &.summary-tests {
    .qsColor(@gray-lighter);
    .fontIcon(@ma-icon-tests);
  }
  &.summary-passes {
    .qsColor(@brand-success);
    .qsHover(@brand-success);
    .fontIcon(@ma-icon-passed);
  }
  &.summary-failures {
    .qsColor(@brand-danger);
    .qsHover(@brand-danger);
    .fontIcon(@ma-icon-failed);
  }
  &.summary-pending {
    .qsColor(@brand-info);
    .qsHover(@brand-info);
    .fontIcon(@ma-icon-pending);
    &:before {
      top: 2px;
      margin-right: 1px;
    }
  }
  &.summary-duration {
    .qsColor(@gray-lighter);
    .fontIcon(@ma-icon-duration);
    &:before {
      top: 0;
    }
    span {
      font-size: 14px;
    }
  }
}

// Showing Quick Summary
.show-quick-summary {
  .quick-summary {
    .opacity(1);
  }
  .qs-item[data-filter] {
    cursor: pointer;
  }
}

// Tablet 768 and up
@media (min-width: @screen-sm-min) {
  .quick-summary-cnt {
    display: block;
  }
}