96 lines
1.5 KiB
SCSS
96 lines
1.5 KiB
SCSS
.topo-viz-node {
|
|
display: block;
|
|
|
|
.label {
|
|
font-weight: $weight-normal;
|
|
}
|
|
|
|
.chart {
|
|
display: inline-block;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: visible;
|
|
|
|
.node-background {
|
|
fill: $white-ter;
|
|
stroke-width: 1;
|
|
stroke: $grey-lighter;
|
|
|
|
&.is-interactive:hover {
|
|
fill: $white;
|
|
stroke: $grey-light;
|
|
}
|
|
|
|
&.is-selected,
|
|
&.is-selected:hover {
|
|
fill: $white;
|
|
stroke: $grey;
|
|
}
|
|
}
|
|
|
|
.dimension-background {
|
|
fill: lighten($grey-lighter, 5%);
|
|
}
|
|
|
|
.dimensions.is-active {
|
|
.bar {
|
|
opacity: 0.2;
|
|
|
|
&.is-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
cursor: pointer;
|
|
|
|
&.is-selected,
|
|
&.is-selected .layer-0 {
|
|
stroke-width: 1px;
|
|
stroke: $blue;
|
|
fill: $blue-light;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
font-weight: $weight-normal;
|
|
fill: $grey;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.empty-text {
|
|
fill: $red;
|
|
transform: translate(50%, 50%);
|
|
|
|
text {
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
}
|
|
}
|
|
|
|
& + .topo-viz-node {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
&.is-empty {
|
|
.node-background {
|
|
stroke: $red;
|
|
stroke-width: 2;
|
|
fill: $white;
|
|
}
|
|
|
|
.dimension-background {
|
|
fill: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-masonry-columns-2 > .flex-masonry-item > .topo-viz-node .chart,
|
|
.flex-masonry-columns-2 > .flex-masonry-item > .topo-viz-node .label {
|
|
width: calc(100% - 0.75em);
|
|
}
|