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 }