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

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

// STATUS BAR

// Layout
.statusbar {
  // 2 Items
  .status-item {
    .make-xs-column(6);
    .make-sm-column(3);
    &:first-child {
      .make-sm-column-offset(6);
    }
  }
  // 3 Items
  &.has-failed-hooks:not(.has-skipped-tests),
  &.has-skipped-tests:not(.has-failed-hooks) {
    .status-item {
      .make-xs-column(4);
      .make-sm-column(3);
      &:first-child {
        .make-sm-column-offset(3);
      }
    }
  }
  // 4 Items
  &.has-failed-hooks.has-skipped-tests {
    .status-item {
      &:first-child {
        .make-sm-column-offset(0);
      }
    }
  }
}

.statusbar {
  position: fixed;
  width: 100%;
  top: (@navbarHeight + @summaryHeightStacked);
  padding: 4px 0;
  color: @gray;
  background: fade(#fff, 95%);
  border-bottom: 1px solid @gray-border;
  z-index: 1030;
  .transition(border .2s ease-out);

  .status-item {
    .fontCondNormal();
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    &:first-child {
      border: none;
    }
  }

  .status-item {
    &.danger {
      color: @brand-danger;
    }
    &.warning {
      color: @brand-warning;
    }
    &.success {
      color: @brand-success;
    }
  }
}

// Tablet 768 and up
@media (min-width: @screen-sm-min) {
  .statusbar {
    position: static;
    border-bottom: none;
  }
  .show-quick-summary .statusbar {
    position: fixed;
    top: @navbarHeight;
    width: 100%;
    border-bottom: 1px solid @gray-lighter;
    .status-item {
      font-size: 16px;
    }
  }
}