github.com/hernad/nomad@v1.6.112/ui/app/styles/charts/distribution-bar.scss (about)

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