github.com/blixtra/nomad@v0.7.2-0.20171221000451-da9a1d7bb050/ui/app/styles/charts/distribution-bar.scss (about)

     1  .chart.distribution-bar {
     2    display: block;
     3    height: 100%;
     4  
     5    svg {
     6      display: inline-block;
     7      height: 100%;
     8      width: 100%;
     9  
    10      .bars {
    11        rect {
    12          transition: opacity 0.3s ease-in-out;
    13          opacity: 1;
    14        }
    15  
    16        .inactive {
    17          opacity: 0.2;
    18        }
    19  
    20        .target {
    21          opacity: 0;
    22        }
    23  
    24        $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple,
    25          $red;
    26  
    27        @for $i from 1 through length($color-sequence) {
    28          .slice-#{$i - 1} {
    29            fill: nth($color-sequence, $i);
    30          }
    31        }
    32      }
    33    }
    34  
    35    &.split-view {
    36      display: flex;
    37      flex-direction: row;
    38      align-items: center;
    39  
    40      svg {
    41        width: 50%;
    42        height: 30px;
    43      }
    44  
    45      .legend {
    46        list-style: none;
    47        width: 50%;
    48        padding: 1.5em;
    49        display: flex;
    50        flex-direction: row;
    51        flex-wrap: wrap;
    52        align-items: center;
    53        justify-content: center;
    54  
    55        li {
    56          display: block;
    57          background-color: transparent;
    58          transition: background-color 0.1s ease-in-out;
    59          border: 1px solid $grey-blue;
    60          padding: 0.25em 0.75em;
    61          margin: 0.25em;
    62          border-radius: $radius;
    63  
    64          // Ensure two columns, but don't use the full width
    65          width: 35%;
    66  
    67          .label,
    68          .value {
    69            display: inline;
    70            font-weight: $weight-normal;
    71          }
    72  
    73          &.is-active {
    74            background-color: rgba($info, 0.1);
    75          }
    76  
    77          &.is-empty {
    78            color: darken($grey-blue, 20%);
    79            border: none;
    80  
    81            .label {
    82              color: darken($grey-blue, 20%);
    83            }
    84          }
    85        }
    86      }
    87    }
    88  }