sanger/sequencescape

/* This file contains the styling for shared components
 * Please ensure you keep it commented
 */

/* Background colours for different environments */
.bg-production {
  background-color: $production;
}
.bg-training {
  background-color: $training;
}
.bg-staging {
  background-color: $staging;
}
.bg-development {
  background-color: $development;
}

/* A Summary table presents simple key-value pairs */
.table-summary th {
  text-align: right;
}
.table-summary th:after {
  content: ":";
}

/* Dense Information tables use smaller fonts */
table.table-dense-information {
  font-size: smaller;
  @extend .table-sm;
}

div.batch-summary-events {
  .receptacle {
    @extend .text-muted;
    @extend .font-weight-light;
    font-size: 50%;
  }
  dl {
    @extend .card-body;
    @extend .row;
    flex: none;
    dt {
      @extend .col-5;
      text-align: right;
    }
    dd {
      @extend .col-5;
    }
  }
}

/* main-row encompasses the bulk of the application */
.main-row {
  margin-bottom: 10px;
}

.loading-bar-container {
  @extend .progress;
  .loading-bar {
    width: 100%;
    @extend .progress-bar;
    @extend .progress-bar-striped;
    @extend .progress-bar-animated;
  }
}
.loading-bar-placeholder {
  margin: 11px 0;
}

.formtastic label.ft-label {
  width: 25%;
}
.formtastic input[type="file"] {
  display: inline-block;
}

.formtastic .boolean label.ft-label {
  width: auto;
}
.formtastic input.btn {
  padding: 6px 12px;
}

.card-style-feature {
  @extend .bg-primary;
  @extend .text-white;
}

.card-style-filters {
  @extend .bg-light;
}

.card-style-uniform {
  min-height: 8.5em; // title and 2 lines of description
}

// Apply basic button formatting to all buttons
// Specific styles will override the default due to CSS specificity rules
input[type="submit"] {
  @extend .btn-primary;
  @extend .btn;
}

.link-panel {
  @extend .list-group;
  @extend .list-group-flush;
  a {
    @extend .list-group-item;
    @extend .list-group-item-action;
  }
}

/* A collapsible info panel, which may contain tabulated data
 * A more semantic representation of bootstrap panels */
section.info-panel {
  @extend .card;
  //  @extend .card-default;

  header {
    @extend .card-header;

    .counter {
      @extend .badge;
    }

    .show-hide {
      float: right;
    }
  }

  table {
    @extend .table;
    @extend .table-sm;
    @extend .table-striped;

    caption {
      @extend .card-body;
    }
  }
}

.card-style-error_report {
  @extend .bg-danger;
  @extend .text-white;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @extend .card-title;
  }
  a {
    @extend .card-link;
    @extend .text-light;
  }
  ul {
    @extend .list-unstyled;

    dl {
      @extend .list-inline;
      margin-bottom: 0;

      dt,
      dd {
        @extend .list-inline-item;
      }
    }
  }
  .clash-description {
    margin-left: 2em;
  }
}

nav.toc {
  @extend .card;
  @extend .col-md-2;

  ul {
    @extend .link-list;
  }
}

.pagination {
  li {
    @extend .page-item;
    a {
      @extend .page-link;
    }
    span {
      @extend .page-link;
    }
  }
}

dl.order-summary {
  @extend .row;
  dt {
    @extend .col-2;
    text-align: right;
  }
  dd {
    @extend .col-10;
  }
}

dl.descriptive-list-inline {
  dt {
    display: inline;
    margin-right: 0.5em;
  }
  dd {
    display: inline;
    margin-right: 1em;
  }
}

// Apply the standard spacing
.ss-card {
  @extend .card;
  @extend .mb-3;
}

// Apply slight x-padding for badge separation from other badges
// and content.
.ss-badge {
  @extend .badge;
  @extend .mx-1;
}

.ss-badge-lg {
  @extend .ss-badge;
  font-size: 95%;
  font-weight: 500;
}

// State-colour extensions
// These extend the bootstrap classes to cover our states
.badge-building {
  @extend .badge-info;
}
.badge-cancelled {
  @extend .badge-secondary;
}
.badge-failed {
  @extend .badge-danger;
}
.badge-pending {
  @extend .badge-warning;
}
.badge-processing {
  @extend .badge-primary;
}
.badge-ready {
  @extend .badge-success;
}
.badge-active {
  @extend .badge-success;
}
.badge-inactive {
  @extend .badge-danger;
}
.badge-completed {
  @extend .badge-info;
}
.badge-discarded {
  @extend .badge-secondary;
}
.badge-released {
  @extend .badge-success;
}
.badge-started {
  @extend .badge-primary;
}
.badge-passed {
  @extend .badge-success;
}
.table-error {
  @extend .table-danger;
}

.btn-default {
  @extend .btn-primary;
}

.property_edit_info {
  @extend .badge;
  @extend .badge-light;
}

// Request progress bars
.request_progress {
  .request_progress_header {
    @extend .row;
    @extend .align-items-center;

    .request_type_name,
    .request_progress_totals {
      @extend .col-2;
      @extend .h6;
    }
    .request_type_name {
      text-align: right;
    }
    .key {
      @extend .col-8;
    }
  }
  .request_progress_section {
    @extend .row;
    margin-bottom: 0.2em;

    .request_type_name,
    .request_progress_totals {
      @extend .col-2;
      @extend .align-self-center;
    }
    .bar-container {
      @extend .col-8;
      @extend .align-self-center;
    }
    .request_type_name {
      text-align: right;
    }
  }
  .progress-state-cancelled {
    @extend .bg-warning;
  }
  .progress-state-failed {
    @extend .bg-danger;
  }
  .progress-state-started {
    @extend .bg-info;
  }
  .progress-state-passed {
    @extend .bg-success;
  }
  .progress-state-other {
    @extend .bg-primary;
  }

  .key {
    span {
      @extend .badge;
      @extend .text-white;
    }
  }
}

.external_help:before {
  @extend .fas;
  //@extend .fa-book;
  content: fa-content($fa-var-book);
  padding-right: 0.5em;
}

.asset-audit-details {
  dl {
    // Don't apply the styles to the top level.
    dl {
      @extend .row;
      dt {
        @extend .col-2;
      }
      dd {
        @extend .col-10;
      }
    }
  }
}