open-nomad/ui/app/styles/charts/line-chart.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

119 lines
1.8 KiB
SCSS
Raw Normal View History

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
2021-02-26 03:30:55 +00:00
@mixin standard-gradient($class, $color) {
linearGradient.#{$class} {
> .start {
stop-color: $color;
stop-opacity: 0.6;
}
> .end {
stop-color: $color;
stop-opacity: 0.05;
}
}
}
2018-09-07 16:59:02 +00:00
.chart.line-chart {
display: block;
height: 100%;
position: relative;
2018-09-07 16:59:02 +00:00
&.with-annotations {
margin-top: 2em;
}
& > svg {
2018-09-07 16:59:02 +00:00
display: block;
height: 100%;
width: 100%;
overflow: visible;
}
.hover-target {
fill: transparent;
stroke: transparent;
}
2018-09-07 16:59:02 +00:00
.line {
fill: transparent;
stroke-width: 1.25;
}
.area {
fill: none;
2018-09-07 16:59:02 +00:00
}
.axis {
line,
path {
stroke: $grey-blue;
}
2018-09-10 21:38:20 +00:00
2018-09-07 16:59:02 +00:00
text {
fill: darken($grey-blue, 20%);
}
}
.gridlines {
path {
stroke-width: 0;
}
line {
stroke: lighten($grey-blue, 10%);
stroke-dasharray: 5 10;
}
}
.line-chart-annotations {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
2018-09-07 16:59:02 +00:00
@each $name, $pair in $colors {
$color: nth($pair, 1);
.area.is-#{$name} {
2018-09-07 16:59:02 +00:00
.line {
stroke: $color;
}
}
linearGradient {
&.is-#{$name} {
> .start {
stop-color: $color;
stop-opacity: 0.6;
}
> .end {
stop-color: $color;
stop-opacity: 0.05;
}
}
}
}
2021-02-26 03:30:55 +00:00
@each $name, $scale in $chart-scales {
@include standard-gradient($name, nth($scale, -1));
.area.#{$name} .line {
stroke: nth($scale, -1);
}
@each $color in $scale {
@include standard-gradient((#{$name}-#{index($scale, $color)}), $color);
.area.#{$name}-#{index($scale, $color)} .line {
stroke: $color;
}
}
}
2018-09-07 16:59:02 +00:00
}