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

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .chart {
     7    position: relative;
     8  }
     9  
    10  .chart-tooltip {
    11    position: absolute;
    12    top: 0;
    13    display: none;
    14    background: $white;
    15    color: rgba($black, 0.6);
    16    border: 1px solid $grey;
    17    min-width: 150px;
    18    margin-top: -10px;
    19    transform: translate(-50%, -100%);
    20    transition: 0.2s top ease-out, 0.2s left ease-out;
    21    pointer-events: none;
    22    z-index: $z-tooltip;
    23  
    24    &.is-snappy {
    25      transition: 0.2s top ease-out, 0.05s left ease-out;
    26    }
    27  
    28    &::before {
    29      pointer-events: none;
    30      display: inline-block;
    31      content: '';
    32      width: 0;
    33      height: 0;
    34      border-top: 7px solid $grey;
    35      border-right: 7px solid transparent;
    36      border-left: 7px solid transparent;
    37      position: absolute;
    38      transform: translateX(-7px);
    39      left: 50%;
    40      bottom: -8px;
    41      z-index: $z-tooltip;
    42    }
    43  
    44    &::after {
    45      pointer-events: none;
    46      display: inline-block;
    47      content: '';
    48      width: 0;
    49      height: 0;
    50      border-top: 6px solid $white;
    51      border-right: 6px solid transparent;
    52      border-left: 6px solid transparent;
    53      position: absolute;
    54      transform: translateX(-6px);
    55      left: 50%;
    56      bottom: -6px;
    57      z-index: $z-tooltip;
    58    }
    59  
    60    &.active {
    61      display: block;
    62    }
    63  
    64    ol {
    65      list-style: none;
    66  
    67      &.is-static {
    68        .label {
    69          color: $black;
    70          background: $white;
    71        }
    72      }
    73    }
    74  
    75    ol > li {
    76      display: flex;
    77      flex-flow: row;
    78      flex-wrap: nowrap;
    79      justify-content: space-between;
    80      padding: 0.25rem 0.5rem;
    81      white-space: nowrap;
    82  
    83      span {
    84        display: inline-block;
    85      }
    86  
    87      .label {
    88        white-space: nowrap;
    89        font-weight: $weight-bold;
    90        color: $black;
    91        margin: 0;
    92  
    93        &.is-empty {
    94          color: rgba($grey, 0.6);
    95        }
    96      }
    97  
    98      .value {
    99        padding-left: 1em;
   100      }
   101  
   102      + li {
   103        border-top: 1px solid $grey-light;
   104      }
   105    }
   106  
   107    &.with-active-datum {
   108      li .label {
   109        color: rgba($black, 0.6);
   110      }
   111  
   112      li.is-active {
   113        color: $black;
   114        background: $white-ter;
   115  
   116        .label {
   117          color: $black;
   118        }
   119      }
   120    }
   121  }