github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/charts/topo-viz-node.scss (about)

     1  .topo-viz-node {
     2    display: block;
     3  
     4    .label {
     5      font-weight: $weight-normal;
     6    }
     7  
     8    .chart {
     9      display: inline-block;
    10      height: 100%;
    11      width: 100%;
    12      overflow: visible;
    13  
    14      .node-background {
    15        fill: $white-ter;
    16        stroke-width: 1;
    17        stroke: $grey-lighter;
    18  
    19        &.is-interactive:hover {
    20          fill: $white;
    21          stroke: $grey-light;
    22        }
    23  
    24        &.is-selected,
    25        &.is-selected:hover {
    26          fill: $white;
    27          stroke: $grey;
    28        }
    29      }
    30  
    31      .dimension-background {
    32        fill: lighten($grey-lighter, 5%);
    33      }
    34  
    35      .dimensions.is-active {
    36        .bar {
    37          opacity: 0.2;
    38  
    39          &.is-active {
    40            opacity: 1;
    41          }
    42        }
    43      }
    44  
    45      .bar {
    46        cursor: pointer;
    47  
    48        &.is-selected,
    49        &.is-selected .layer-0 {
    50          stroke-width: 1px;
    51          stroke: $blue;
    52          fill: $blue-light;
    53        }
    54      }
    55  
    56      .label {
    57        text-anchor: middle;
    58        dominant-baseline: central;
    59        font-weight: $weight-normal;
    60        fill: $grey;
    61        pointer-events: none;
    62      }
    63    }
    64  
    65    .empty-text {
    66      fill: $red;
    67      transform: translate(50%, 50%);
    68  
    69      text {
    70        text-anchor: middle;
    71        dominant-baseline: central;
    72      }
    73    }
    74  
    75    & + .topo-viz-node {
    76      margin-top: 1em;
    77    }
    78  
    79    &.is-empty {
    80      .node-background {
    81        stroke: $red;
    82        stroke-width: 2;
    83        fill: $white;
    84      }
    85  
    86      .dimension-background {
    87        fill: none;
    88      }
    89    }
    90  }
    91  
    92  .flex-masonry-columns-2 > .flex-masonry-item > .topo-viz-node .chart,
    93  .flex-masonry-columns-2 > .flex-masonry-item > .topo-viz-node .label {
    94    width: calc(100% - 0.75em);
    95  }