/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ @mixin standard-gradient($class, $color) { linearGradient.#{$class} { > .start { stop-color: $color; stop-opacity: 0.6; } > .end { stop-color: $color; stop-opacity: 0.05; } } } .chart.line-chart { display: block; height: 100%; position: relative; &.with-annotations { margin-top: 2em; } & > svg { display: block; height: 100%; width: 100%; overflow: visible; } .hover-target { fill: transparent; stroke: transparent; } .line { fill: transparent; stroke-width: 1.25; } .area { fill: none; } .axis { line, path { stroke: $grey-blue; } 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; } @each $name, $pair in $colors { $color: nth($pair, 1); .area.is-#{$name} { .line { stroke: $color; } } linearGradient { &.is-#{$name} { > .start { stop-color: $color; stop-opacity: 0.6; } > .end { stop-color: $color; stop-opacity: 0.05; } } } } @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; } } } }