github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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      display: flex;
    10      flex-direction: column;
    11      min-width: 120px;
    12  
    13      + .metric {
    14        margin-left: -1px;
    15      }
    16  
    17      &:first-child {
    18        border-top-left-radius: $radius;
    19        border-bottom-left-radius: $radius;
    20      }
    21  
    22      &:last-child {
    23        border-top-right-radius: $radius;
    24        border-bottom-right-radius: $radius;
    25      }
    26  
    27      @each $name, $pair in $colors {
    28        $color: nth($pair, 1);
    29        $color-invert: nth($pair, 2);
    30  
    31        &.is-#{$name} {
    32          border-color: $color;
    33          color: $color;
    34          background: lighten($color, 40%);
    35  
    36          .label {
    37            color: $color;
    38          }
    39        }
    40      }
    41  
    42      &.is-faded {
    43        color: $grey-blue;
    44        border-color: $grey-blue;
    45        background: $white;
    46  
    47        .label {
    48          color: $grey-blue;
    49        }
    50      }
    51  
    52      &.is-hollow {
    53        border-color: transparent;
    54        background: transparent;
    55      }
    56    }
    57  }
    58  
    59  .metric {
    60    text-align: center;
    61  
    62    .label {
    63      font-size: 1.1em;
    64      font-weight: $weight-semibold;
    65      margin-bottom: 0;
    66    }
    67  
    68    .value {
    69      font-size: 2em;
    70      margin-bottom: 0;
    71      line-height: 1;
    72    }
    73  }