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

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

// SUITE

.filterActive(@color) {
  border-color: @color;
}

.filters-active {
  .suite-data-wrap,
  .suite-chart-wrap {
    display: none;
  }
  &.filter-passed .suite.has-passed,
  &.filter-failed .suite.has-failed,
  &.filter-pending .suite.has-pending {
    .suite-data-wrap,
    .suite-chart-wrap {
      display: block;
    }
  }
}

// Nesting Styles
.suite-wrap {

  > .suite > .suite-wrap {
    margin-left: 0;
    margin-right: 0;
  }

  .suite .suite {
    margin: 10px;
  }
}

// Layout
.suite {
  .clearfix();
  .make-row();
}
.suite-test-wrap {
  .make-xs-column(12);
}
.suite-data-wrap {
  .clearfix();
}

// Suite Base
.suite {
  position: relative;
  border: 1px solid @gray-border;
  padding: 8px 0 10px 0;
  border-radius: 4px;
  margin-bottom: 10px;

  .suite-title {
    padding: 0 70px 0 10px;
    margin: 0;
    .fontSlabNormal();
  }

  .suite-filename {
    .fontLight();
    color: @gray-light;
    margin-top: 4px;
    padding: 0 10px;
  }
}

.details > .suite-wrap > .suite {
  border: none;
}

// Suite Chart
.suite-chart-wrap {
  .square(50px);
  position: absolute;
  top: 12px;
  right: 12px;
}

// Suite Chart Legend
.suite-summary {
  .fontCondNormal();
  .clearfix();
  font-size: 18px;
  padding: 0 15px;
}

.suite-summary-item {
  .transition(border .2s ease-out);
  float: left;
  margin: 0 10px;
  color: @gray-dark;
  border-bottom: 1px solid transparent;
  &:first-child {
    margin-left: 0;
  }
  &:before {
    .ma-icon();
    font-size: 15px;
    top: 1px;
    margin-right: 2px;
  }
  &.tests {
    .fontIcon(@ma-icon-tests);
  }
  &.passed {
    .fontIcon(@ma-icon-passed);
    color: @brand-success;
    &:before {
      color: @brand-success;
    }
  }
  &.failed {
    .fontIcon(@ma-icon-failed);
    color: @brand-danger;
    &:before {
      color: @brand-danger;
    }
  }
  &.pending {
    .fontIcon(@ma-icon-pending);
    color: @brand-info;
    &:before {
      color: @brand-info;
      top: 2px;
    }
  }
  &.duration {
    .fontIcon(@ma-icon-duration);
    &:before {
      color: @gray-light;
    }
  }

  // Filter Styles
  .filter-passed & {
    &.passed {
      .filterActive(@brand-success);
    }
  }
  .filter-failed & {
    &.failed {
      .filterActive(@brand-danger);
    }
  }
  .filter-pending & {
    &.pending {
      .filterActive(@brand-info);
    }
  }
}

// Suite Test
.suite-test-wrap {
  .suite-test-header {
    padding: 4px 8px 6px 8px;
    cursor: pointer;
    border-top: 1px solid @list-group-border;
    border-bottom: 1px solid @list-group-border;
    .suite-test-header-title {
      .fontSlabNormal();
      font-size: 16px;
      color: #ccc;
      margin: 0;
      .linkTransition();

      &:after {
        .transition(transform .2s ease-out);
        .ma-icon();
        content: @ma-icon-right-chevron;
        position: absolute;
        font-size: 20px;
        right: 15px;
        .rotate(90deg);
      }
    }
    &.collapsed {
      .suite-test-header-title:after {
        .rotate(0);
      }
    }
    &:hover .suite-test-header-title {
      color: @gray-dark;
    }
  }
  .test-list {
    margin-bottom: 0;
  }
}

// Tablet 768 and up
@media (min-width: @screen-sm-min) {
  .details > .suite-wrap > .suite {
    border: 1px solid @gray-border;
  }
  .suite-chart-wrap {
    .square(65px);
  }
}