github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/charts/colors.scss (about)

     1  $queued: $grey-lighter;
     2  $starting: $grey-lighter;
     3  $running: $primary;
     4  $complete: $nomad-green-dark;
     5  $failed: $danger;
     6  $lost: $dark;
     7  
     8  .chart {
     9    .queued {
    10      fill: $queued;
    11    }
    12  
    13    .starting,
    14    .pending {
    15      .layer-0 {
    16        fill: $starting;
    17      }
    18  
    19      .layer-1 {
    20        fill: url(#diagonal-stripe-3);
    21        fill-opacity: 0.2;
    22      }
    23    }
    24  
    25    .running {
    26      fill: $running;
    27    }
    28  
    29    .complete {
    30      fill: $complete;
    31    }
    32  
    33    .failed {
    34      fill: $failed;
    35    }
    36  
    37    .lost {
    38      fill: $lost;
    39    }
    40  }
    41  
    42  .color-swatch {
    43    display: inline-block;
    44    height: 1rem;
    45    width: 1rem;
    46    margin-right: 0.25rem;
    47    vertical-align: middle;
    48    border-radius: $radius;
    49  
    50    &.is-wide {
    51      width: 2rem;
    52    }
    53  
    54    $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple, $red;
    55    @for $i from 1 through length($color-sequence) {
    56      &.swatch-#{$i - 1} {
    57        background: nth($color-sequence, $i);
    58      }
    59    }
    60  
    61    &.queued {
    62      box-shadow: inset 0 0 0 1px rgba($black, 0.3);
    63      background: $queued;
    64    }
    65  
    66    &.starting,
    67    &.pending {
    68      background: repeating-linear-gradient(
    69        -45deg,
    70        $starting,
    71        $starting 3px,
    72        darken($starting, 25%) 3px,
    73        darken($starting, 25%) 6px
    74      );
    75    }
    76  
    77    &.running {
    78      background: $running;
    79    }
    80  
    81    &.complete {
    82      background: $complete;
    83    }
    84  
    85    &.failed {
    86      background: $failed;
    87    }
    88  
    89    &.lost {
    90      background: $lost;
    91    }
    92  
    93    @each $name, $pair in $colors {
    94      $color: nth($pair, 1);
    95  
    96      &.is-#{$name} {
    97        background: $color;
    98      }
    99    }
   100  }