github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/charts/tooltip.scss (about)

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