mochawesome-local-screenshots/src/less/_summary.less

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

// TEST SUMMARY

// Mixins
.summaryColor(@color) {
  .summary-count {
    color: @color;
  }
}

.summaryLink(@color) {
  @color-dark: darken(@color, 11%);
  .summary-label,
  .summary-label:after,
  .summary-count {
    .linkTransition();

    :hover& {
      color: @color;
    }

    .active& {
      .fontNormal();
      color: @color;
      border-bottom: 2px solid @color;
      &:hover {
        color: @color-dark;
      }
      @media (min-width: @screen-sm-min) {
        border: none;
      }
    }
  }
}

.summaryIcon(@icon) {
  .summary-count:before {
    content: @icon;
  }
}

// Base Summary Styles / Layout
.summary {
  position: fixed;
  width: 100%;
  top: @navbarHeight;
  padding: 8px 0;
  background: fade(@gray-lighter, 95%);
  z-index: 1030;
  .summary-col {
    .make-xs-column(4);
    .make-sm-column(2);
    &:nth-child(-n+3) {
      margin-bottom: 8px;
    }
  }
}

// Main Row Summary Styles
.summary-col {
  text-align: center;
}

.summary-label {
  .fontCondLight();
  color: @gray;
  text-transform: uppercase;
  display: none;
  margin: 0;
}

.summary-count {
  .fontCondNormal();
  display: inline;
  color: @gray-light;
  text-align: center;
  margin: 0;
  font-size: 27px;
  span {
    font-size: 21px;
  }
  &:before {
    .ma-icon();
    font-size: 20px;
    margin-right: 4px;
  }
}

// Filter Links
.summary-col[data-filter] {
  cursor: pointer;
}

// Colors / Icons
.summary-duration {
  .summaryIcon(@ma-icon-duration);
}
.summary-suites {
  .summaryIcon(@ma-icon-suites);
  .summaryColor(@gray-dark);
}
.summary-tests {
  .summaryIcon(@ma-icon-tests);
  .summaryColor(@gray-dark);
}
.summary-passes {
  .summaryIcon(@ma-icon-passed);
  .summaryColor(@brand-success);
  .summaryLink(@brand-success);
}
.summary-failures {
  .summaryIcon(@ma-icon-failed);
  .summaryColor(@brand-danger);
  .summaryLink(@brand-danger);
}
.summary-pending {
  .summaryIcon(@ma-icon-pending);
  .summaryColor(@brand-info);
  .summaryLink(@brand-info);
  &:before {
    top: 1px;
  }
}

// Tablet 768 and up
@media (min-width: @screen-sm-min) {
  .summary {
    position: static;
    padding-top: (@navbarHeight + 4);
  }
  .summary .summary-col {
    &:nth-child(-n+3) {
      margin-bottom: 0;
    }
  }
  .summary-count {
    display: block;
    font-size: 42px;
    &:before,
    span {
      display: none;
    }
  }
  .summary-label {
    display: inline-block;
    [data-filter] & {
      .fontIcon(@ma-icon-filter; after);
      &:after {
        .ma-icon();
        color: #ccc;
        top: 2px;
      }
    }
  }
}