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

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