skyquake/plugins/composer/src/src/styles/TooltipManager.scss

   1
   2 $tooltip-arrow-width: 15px;
   3 $tooltip-background-color: #002b36;
   4 $tooltip-foreground-color: #93a1a1;
   5
   6 .tooltip-indicator {
   7         position: fixed;
   8         // TooltipManager.js will set top, left pragmatically
   9         z-index: 1;
  10         .tooltip-indicator-content {
  11                 position: relative;
  12                 display: block;
  13                 color: $tooltip-foreground-color;
  14                 background: $tooltip-background-color;
  15                 margin-left: -50%;
  16                 margin-right: 50%;
  17                 margin-top: 15px;
  18                 padding: 9px;
  19                 border-radius: 7px;
  20         }
  21         > i {
  22                 position: absolute;
  23                 top: 2px;
  24                 left: -15px;
  25                 // TooltipManager will set top, left pragmatically
  26                 &.arrow-up {
  27                         width: 0;
  28                         height: 0;
  29                         border-left: $tooltip-arrow-width solid transparent;
  30                         border-right: $tooltip-arrow-width solid transparent;
  31
  32                         border-bottom: $tooltip-arrow-width solid $tooltip-background-color;
  33                 }
  34         }
  35
  36         span {
  37                 val {
  38                         margin-left: 5px;
  39                         color: #eee8d5;
  40                 }
  41         }
  42 }