index.scss

@import "~@carbon/themes/scss/themes";
$carbon--theme: $carbon--theme--g10;
@include carbon--theme();

@import "~@carbon/layout/scss/convert";
$carbon--grid-breakpoints: (
  sm: (
    columns: 4,
    margin: 0,
    width: carbon--rem(320px),
  ),
  md: (
    columns: 8,
    margin: carbon--rem(16px),
    width: carbon--rem(672px),
  ),
  lg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1056px),
  ),
  xlg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1312px),
  ),
  max: (
    columns: 16,
    margin: carbon--rem(24px),
    width: carbon--rem(1850px),
  ),
);
@import "~carbon-components/scss/globals/scss/styles.scss";
@import "~@carbon/colors/scss/mixins";
@include carbon--colors();

// @see https://www.carbondesignsystem.com/guidelines/typography/code/
@import "~@carbon/type/scss/type";

@import "~@carbon/type/scss/font-face/mono";
@import "~@carbon/type/scss/font-face/sans";
@import "~@carbon/type/scss/font-face/serif";

@import "~@carbon/type/scss/classes";
@include carbon--type-classes();
@import "~@carbon/type/scss/styles";

@include carbon--type-reset();
@include carbon--font-face-mono();
@include carbon--font-face-sans();
@include carbon--font-face-serif();

.bx--header__action.bx--btn--icon-only.bx--tooltip__trigger {
  justify-content: center;
}

body {
  font-family: carbon--font-family("sans"), sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Header */
header.bx--header {
  .bx--header__name {
    img {
      max-height: 75%;
      margin-right: 7px;
    }
  }
  .bx--form-item {
    .bx--date-picker-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: auto;
      label {
        padding-right: $spacing-03;
        color: white;
        display: block;
        white-space: nowrap;
        margin-bottom: 0;
        margin-right: $spacing-03;
      }
      + .bx--date-picker-container {
        margin-left: $spacing-07;
      }
    }
  }
  .bx--header-panel--expanded {
    width: 27rem;
    hr {
      width: 24rem;
    }
    .import-action {
      display: flex;
      flex-direction: column;
      .bx--btn-set {
        button {
          max-width: 12.5rem;
        }
      }
    }
  }
}

/* Start tiles */
.page {
  h1 {
    margin-bottom: $spacing-07;
    margin-left: $spacing-07;
    @include carbon--type-style("expressive-heading-06");
  }
  .tiles {
    .table-tile {
      margin-bottom: $spacing-07;
    }
    .bx--tile {
      margin-bottom: $spacing-07;
      h3 {
        @include carbon--type-style("expressive-heading-04");
        display: flex;
        align-items: center;
        svg {
          margin-right: $spacing-04;
        }
        svg + svg {
          margin-left: -$spacing-03;
        }
        &.p-left {
          padding-left: $spacing-06;
        }
        &.m-bottom {
          margin-bottom: $spacing-03;
        }
      }
      &.empty {
        h3 {
          margin-bottom: $spacing-03;
          @include carbon--type-style("expressive-heading-02");
        }
        .text {
          display: flex;
          align-items: center;
        }
      }
      &.combined-tile-stats-diagram {
        h3 {
          padding-left: $spacing-06;
          margin-bottom: $spacing-07;
        }
      }
      &.table-combined {
        padding-left: 0;
        padding-bottom: 0;
        h3 {
          margin-left: $spacing-05;
          margin-bottom: $spacing-07;
        }
        .bx--data-table-container {
          border-right: 1px solid $carbon--gray-20;
        }
        .bx--content-switcher {
          margin-bottom: $spacing-07;
          margin-left: $spacing-05;
          // @todo Why do I need to do this?
          button {
            border-bottom: 0.0625rem solid var(--cds-border-inverse, #161616);
            border-top: 0.0625rem solid var(--cds-border-inverse, #161616);
            &:first-child {
              border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
            }
            &:last-child {
              border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
            }
          }
        }
        .content {
          .bx--data-table-container {
            margin-right: -1rem;
            padding-top: 0;
          }
          @include carbon--breakpoint-down("xlg") {
            flex-direction: column-reverse;
          }
        }
      }
    }
  }
}

.diagram {
  svg,
  text {
    font-family: carbon--font-family("mono"), monospace !important;
    word-spacing: -3px;
  }
}

/* App Header */
header.bx--header {
  .bx--header-panel {
    .import-action {
      margin: $spacing-04 0;
    }
    .import-data {
    }
  }
}

.bx--pagination {
  .bx--pagination__left {
    padding-left: 0;
  }
}

.bx--tile.stat-tile-container.normal {
  padding-top: 2rem;
}

.stats {
  align-items: flex-end;
  padding-left: $spacing-06;
  &.normal {
    padding-top: $spacing-05;
  }
  &.compact {
    width: 100%;
    align-items: baseline;
    margin-bottom: -$spacing-06;
    h3.heading {
      margin-bottom: $spacing-07;
      @include carbon--breakpoint-up("max") {
        margin-bottom: $spacing-05;
      }
    }
  }
  .stat-tile {
    &.normal {
      margin-bottom: $spacing-07;
      .heading {
        margin-bottom: $spacing-02;
      }
      .value {
        margin-bottom: $spacing-02;
      }
    }
    &.compact {
      margin-bottom: $spacing-06;
      .value {
        white-space: nowrap;
        @include carbon--type-style("productive-heading-04");
        @include carbon--breakpoint-up("max") {
          @include carbon--type-style("productive-heading-05");
        }
      }
      .heading {
        margin-bottom: $spacing-02;
      }
      .date {
        margin-bottom: $spacing-02;
        margin-right: $spacing-03;
        sub {
          font-size: 0.75em;
        }
      }
    }
  }
}

.diagram-tooltip {
  font-family: carbon--font-family("mono"), monospace;
}