github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/charts/line-chart.scss (about)

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