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 }