github.com/hernad/nomad@v1.6.112/ui/app/styles/charts/line-chart.scss (about)

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