discourse/app/assets/stylesheets/common/admin/dashboard_next.scss

.dashboard-next {

  &.admin-contents {
    margin: 0;
  }

  .section-columns {
    display: flex;
    justify-content: space-between;

    @include small-width  {
      flex-direction: column;
    }

    .section-column {
      min-width: calc(50% - .5em);

      @include small-width  {
        min-width: 100%;

        &:last-child {
          order: 1;
        }

        &:first-child {
          order: 2;
        }
      }
    }

    .section-column:last-child {
      margin-left: .5em;
    }

    .section-column:first-child {
      margin-right: .5em;
    }

    @include small-width  {
      .section-column:last-child, .section-column:first-child {
        margin: 0;
      }
    }
  }

  .section {
    .section-title {
      h2 {
        margin: 0 .5em 0 0;
      }

      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $primary-low-mid;
      margin-bottom: .5em;
      padding-bottom: .5em;
    }

    .section-body {
      padding: 1em 0;
    }
  }

  .dashboard-table {
    margin-bottom: 1em;

    @include small-width  {
      table {
        tbody tr td {
          font-size: $font-down-2;
        }
      }
    }

    &.is-loading {
      height: 150px;
    }

    .table-title {
      align-items: center;
      display: flex;
      justify-content: space-between;

      h3 {
        margin: .5em 0;
      }
    }

    table {
      table-layout: fixed;

      thead {
        border: 1px solid $primary-low;        
        tr {
          background: $primary-low;
          th {
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }

      tbody {
        tr {
          td:first-child {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: normal;
          }

          td {
            border: 1px solid $primary-low;
            text-align: center;
          }

          td.value {
            i {
              display: none;
            }

            &.high-trending-up, &.trending-up {
              i.up {
                color: $success;
                display: inline;
              }
            }
            &.high-trending-down, &.trending-down {
              i.down {
                color: $danger;
                display: inline;
              }
            }
            &.no-change {
              i.down {
                display: inline;
                visibility: hidden;
              }
            }
          }
        }
      }
    }
  }

  .charts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .dashboard-mini-chart {
      max-width: calc(100% * (1/3));
      width: 100%;
      margin-bottom: 1em;
      flex-grow: 1;

      @include small-width  {
        max-width: 100%;
      }

      &.is-loading {
        height: 200px;
      }

      .loading-container.visible {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
      }

      .d-icon-question-circle {
        cursor: pointer;
      }

      .chart-title {
        align-items: center;
        display: flex;
        justify-content: space-between;

        h3 {
          margin: 1em 0;
        }
      }

      &.high-trending-up, &.trending-up {
        .chart-trend, .data-point {
          color: rgb(17, 141, 0);
        }
      }

      &.high-trending-down, &.trending-down {
        .chart-trend, .data-point {
          color: $danger;
        }
      }

      &.one-data-point {
        .chart-container {
          min-height: 150px;
          justify-content: center;
          align-items: center;
          display: flex;
        }

        .data-point {
          width: 100%;
          font-size: 6em;
          font-weight: bold;
          border-radius: 3px;
          background: rgba(200,220,240,0.3);
          text-align: center;
          padding: .5em 0;
        }
      }
    }

    @include small-width  {
      .dashboard-mini-chart {
        width: 100%;
      }
    }

    .chart-container {
      position: relative;
      padding: 0 1em 0 0;
    }

    .chart-trend {
      font-size: $font-up-3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin-right: 1em;
    }

    .chart-canvas {
      width: 100%;
      height: 100%;
    }
  }

  .misc {
    .durability {
      display: flex;
      justify-content: space-between;

      .durability-title {
        text-transform: capitalize;
      }
    }
  }
}