github.com/manicqin/nomad@v0.9.5/ui/app/styles/components/metrics.scss (about)

     1  .metric-group {
     2    display: inline-flex;
     3    width: auto;
     4    align-items: flex-start;
     5  
     6    .metric {
     7      padding: 0.75em 1em;
     8      border: 1px solid $grey-blue;
     9      text-align: center;
    10      display: flex;
    11      flex-direction: column;
    12      min-width: 120px;
    13  
    14      + .metric {
    15        margin-left: -1px;
    16      }
    17  
    18      &:first-child {
    19        border-top-left-radius: $radius;
    20        border-bottom-left-radius: $radius;
    21      }
    22  
    23      &:last-child {
    24        border-top-right-radius: $radius;
    25        border-bottom-right-radius: $radius;
    26      }
    27  
    28      @each $name, $pair in $colors {
    29        $color: nth($pair, 1);
    30        $color-invert: nth($pair, 2);
    31  
    32        &.is-#{$name} {
    33          border-color: $color;
    34          color: $color;
    35          background: lighten($color, 40%);
    36  
    37          .label {
    38            color: $color;
    39          }
    40        }
    41      }
    42  
    43      &.is-faded {
    44        color: $grey-blue;
    45        border-color: $grey-blue;
    46        background: $white;
    47  
    48        .label {
    49          color: $grey-blue;
    50        }
    51      }
    52  
    53      .label {
    54        font-size: 1.1em;
    55        font-weight: $weight-semibold;
    56        margin-bottom: 0;
    57      }
    58  
    59      .value {
    60        font-size: 2em;
    61        margin-bottom: 0;
    62      }
    63    }
    64  }