github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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        .clickable {
    17          cursor: pointer;
    18        }
    19  
    20        .inactive {
    21          opacity: 0.2;
    22        }
    23  
    24        .target {
    25          opacity: 0;
    26        }
    27  
    28        $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple,
    29          $red;
    30  
    31        @for $i from 1 through length($color-sequence) {
    32          .slice-#{$i - 1} {
    33            fill: nth($color-sequence, $i);
    34          }
    35        }
    36      }
    37    }
    38  
    39    &.split-view {
    40      display: flex;
    41      flex-direction: row;
    42      align-items: center;
    43  
    44      svg {
    45        width: 50%;
    46        height: 30px;
    47      }
    48  
    49      .legend {
    50        list-style: none;
    51        width: 50%;
    52        padding: 1.5em;
    53        display: flex;
    54        flex-direction: row;
    55        flex-wrap: wrap;
    56        align-items: center;
    57        justify-content: center;
    58  
    59        li {
    60          display: block;
    61          background-color: transparent;
    62          transition: background-color 0.1s ease-in-out;
    63          padding: 0.25em 0.75em;
    64          margin: 0.25em;
    65          border-radius: $radius;
    66  
    67          // Ensure two columns, but don't use the full width
    68          width: 35%;
    69  
    70          .legend-item {
    71            display: flex;
    72            align-items: center;
    73  
    74            .color-swatch {
    75              margin-right: 0.5rem;
    76            }
    77  
    78            .text {
    79              flex-grow: 1;
    80  
    81              .label,
    82              .value {
    83                display: inline;
    84                font-weight: $weight-normal;
    85              }
    86            }
    87  
    88            .icon {
    89              width: 1.2rem;
    90              height: 1.2rem;
    91            }
    92          }
    93  
    94          &.is-active {
    95            background-color: rgba($info, 0.1);
    96          }
    97  
    98          &.is-clickable {
    99            a {
   100              display: block;
   101            }
   102  
   103            &:not(.is-empty) {
   104              &:hover {
   105                background-color: rgba($info, 0.1);
   106              }
   107            }
   108          }
   109  
   110          &.is-empty {
   111            color: darken($grey-blue, 20%);
   112  
   113            .label {
   114              color: darken($grey-blue, 20%);
   115            }
   116          }
   117  
   118          // Prevent Orphaned last-elements in the list
   119          // from being visually centered
   120          &:nth-child(2n + 1):last-child {
   121            margin-right: calc(35% + 0.75em);
   122          }
   123        }
   124      }
   125    }
   126  }