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

     1  .chart-vertical-annotation {
     2    position: absolute;
     3    height: 100%;
     4  
     5    &.is-staggered {
     6      height: calc(100% + 15px);
     7    }
     8  
     9    .indicator {
    10      color: $grey;
    11      display: block;
    12      width: 20px;
    13      height: 20px;
    14      padding: 0;
    15      border: none;
    16      border-radius: 100%;
    17      background: transparent;
    18      margin-left: -10px;
    19      margin-top: -10px;
    20      cursor: pointer;
    21      pointer-events: auto;
    22  
    23      &.is-active {
    24        box-shadow: inset 0 0 0 2px $blue;
    25      }
    26  
    27      .icon {
    28        width: 100%;
    29        height: 100%;
    30      }
    31    }
    32  
    33    @each $name, $pair in $colors {
    34      $color: nth($pair, 1);
    35  
    36      &.is-#{$name} .indicator {
    37        color: $color;
    38  
    39        &:hover,
    40        &.is-hovered {
    41          color: darken($color, 2.5%);
    42        }
    43      }
    44    }
    45  
    46    .line {
    47      position: absolute;
    48      left: 0;
    49      top: 8px;
    50      width: 1px;
    51      height: calc(100% - 8px);
    52      background: $grey;
    53      z-index: -1;
    54    }
    55  }
    56  
    57  .chart-horizontal-annotation {
    58    position: absolute;
    59    width: 100%;
    60  
    61    .indicator {
    62      transform: translateY(-50%);
    63      display: block;
    64      border: none;
    65      border-radius: 100px;
    66      background: $red;
    67      color: $white;
    68      font-weight: $weight-semibold;
    69      font-size: $size-7;
    70      margin-left: 10px;
    71      pointer-events: auto;
    72    }
    73  
    74    .line {
    75      position: absolute;
    76      left: 0;
    77      top: 0;
    78      height: 1px;
    79      width: 100%;
    80      background: $red;
    81      z-index: -1;
    82    }
    83  }