github.com/hernad/nomad@v1.6.112/ui/app/styles/charts/topo-viz-node.scss (about)

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