github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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, $red;
    25  
    26        @for $i from 1 through length($color-sequence) {
    27          .slice-#{$i - 1} {
    28            fill: nth($color-sequence, $i);
    29          }
    30        }
    31      }
    32    }
    33  
    34    &.split-view {
    35      display: flex;
    36      flex-direction: row;
    37      align-items: center;
    38  
    39      svg {
    40        width: 50%;
    41        height: 30px;
    42      }
    43  
    44      .legend {
    45        list-style: none;
    46        width: 50%;
    47        padding: 1.5em;
    48        display: flex;
    49        flex-direction: row;
    50        flex-wrap: wrap;
    51        align-items: center;
    52        justify-content: center;
    53  
    54        li {
    55          display: block;
    56          background-color: transparent;
    57          transition: background-color 0.1s ease-in-out;
    58          border: 1px solid $grey-blue;
    59          padding: 0.25em 0.75em;
    60          margin: 0.25em;
    61          border-radius: $radius;
    62  
    63          // Ensure two columns, but don't use the full width
    64          width: 35%;
    65  
    66          .label,
    67          .value {
    68            display: inline;
    69            font-weight: $weight-normal;
    70          }
    71  
    72          &.is-active {
    73            background-color: rgba($info, 0.1);
    74          }
    75  
    76          &.is-empty {
    77            color: darken($grey-blue, 20%);
    78            border: none;
    79  
    80            .label {
    81              color: darken($grey-blue, 20%);
    82            }
    83          }
    84        }
    85      }
    86    }
    87  }