github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/charts/line-chart.scss (about)

     1  @mixin standard-gradient($class, $color) {
     2    linearGradient.#{$class} {
     3      > .start {
     4        stop-color: $color;
     5        stop-opacity: 0.6;
     6      }
     7  
     8      > .end {
     9        stop-color: $color;
    10        stop-opacity: 0.05;
    11      }
    12    }
    13  }
    14  
    15  .chart.line-chart {
    16    display: block;
    17    height: 100%;
    18    position: relative;
    19  
    20    &.with-annotations {
    21      margin-top: 2em;
    22    }
    23  
    24    & > svg {
    25      display: block;
    26      height: 100%;
    27      width: 100%;
    28      overflow: visible;
    29    }
    30  
    31    .hover-target {
    32      fill: transparent;
    33      stroke: transparent;
    34    }
    35  
    36    .line {
    37      fill: transparent;
    38      stroke-width: 1.25;
    39    }
    40  
    41    .area {
    42      fill: none;
    43    }
    44  
    45    .axis {
    46      line,
    47      path {
    48        stroke: $grey-blue;
    49      }
    50  
    51      text {
    52        fill: darken($grey-blue, 20%);
    53      }
    54    }
    55  
    56    .gridlines {
    57      path {
    58        stroke-width: 0;
    59      }
    60  
    61      line {
    62        stroke: lighten($grey-blue, 10%);
    63        stroke-dasharray: 5 10;
    64      }
    65    }
    66  
    67    .line-chart-annotations {
    68      position: absolute;
    69      width: 100%;
    70      height: 100%;
    71      left: 0;
    72      top: 0;
    73      pointer-events: none;
    74    }
    75  
    76    @each $name, $pair in $colors {
    77      $color: nth($pair, 1);
    78  
    79      .area.is-#{$name} {
    80        .line {
    81          stroke: $color;
    82        }
    83      }
    84  
    85      linearGradient {
    86        &.is-#{$name} {
    87          > .start {
    88            stop-color: $color;
    89            stop-opacity: 0.6;
    90          }
    91  
    92          > .end {
    93            stop-color: $color;
    94            stop-opacity: 0.05;
    95          }
    96        }
    97      }
    98    }
    99  
   100    @each $name, $scale in $chart-scales {
   101      @include standard-gradient($name, nth($scale, -1));
   102      .area.#{$name} .line {
   103        stroke: nth($scale, -1);
   104      }
   105  
   106      @each $color in $scale {
   107        @include standard-gradient((#{$name}-#{index($scale, $color)}), $color);
   108        .area.#{$name}-#{index($scale, $color)} .line {
   109          stroke: $color;
   110        }
   111      }
   112    }
   113  }