[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /* Accessible tooltip component. Markup from wp_get_tooltip(). */
   3  
   4  .wp-tooltip {
   5      display: inline-flex;
   6      align-items: center;
   7  }
   8  
   9  /* Toggle and close buttons. */
  10  .wp-tooltip .wp-tooltip__toggle,
  11  .wp-tooltip .wp-tooltip__close {
  12      display: inline-flex;
  13      align-items: center;
  14      justify-content: center;
  15      width: 24px;
  16      height: 24px;
  17      padding: 0;
  18      border: 0;
  19      border-radius: 2px;
  20      background: none;
  21      color: #50575e;
  22      cursor: pointer;
  23  }
  24  
  25  .wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:hover,
  26  .wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled])) .wp-tooltip__toggle:focus,
  27  .wp-tooltip .wp-tooltip__close:hover,
  28  .wp-tooltip .wp-tooltip__close:focus {
  29      color: var(--wp-admin-theme-color, #3858e9);
  30  }
  31  
  32  /*
  33   * `:where()` keeps the wrapper out of the specificity total, so buttons
  34   * passed into a tooltip keep control of their own focus ring.
  35   */
  36  :where(.wp-tooltip:not(:has(button[aria-disabled="true"],button[disabled]))) .wp-tooltip__toggle:focus,
  37  .wp-tooltip .wp-tooltip__close:focus {
  38      outline: 2px solid transparent;
  39      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
  40  }
  41  
  42  .wp-tooltip .wp-tooltip__toggle .dashicons {
  43      width: 20px;
  44      height: 20px;
  45      font-size: 20px;
  46  }
  47  
  48  .wp-tooltip .wp-tooltip__close .dashicons {
  49      width: 18px;
  50      height: 18px;
  51      font-size: 18px;
  52  }
  53  
  54  /* Bubble. No position here, so it falls back to the UA's centered popover without anchoring. */
  55  .wp-tooltip .wp-tooltip__bubble {
  56      max-width: min(280px, calc(100vw - 32px));
  57      margin: auto;
  58      padding: 12px 16px;
  59      overflow: visible;
  60      border: 1px solid #c3c4c7;
  61      border-radius: 4px;
  62      background: #fff;
  63      color: #1d2327;
  64      font-size: 13px;
  65      font-weight: 400;
  66      line-height: 1.5;
  67      text-align: right;
  68      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  69  }
  70  
  71  .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble,
  72  .wp-tooltip .wp-tooltip__hint {
  73      background: #000;
  74      color: #f0f0f0;
  75      text-align: center;
  76      padding: 4px 8px;
  77      line-height: 1.4;
  78  }
  79  
  80  .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint) .wp-tooltip__text {
  81      display: block;
  82      padding-inline-end: 24px;
  83  }
  84  
  85  .wp-tooltip .wp-tooltip__close {
  86      position: absolute;
  87      top: 6px;
  88      inset-inline-end: 6px;
  89  }
  90  
  91  /* Anchor the bubble above its toggle, with a downward arrow. */
  92  @supports (anchor-name: --a) {
  93      .wp-tooltip .wp-tooltip__bubble {
  94          position-area: top;
  95          margin: 0 0 8px;
  96          position-try-fallbacks: flip-block, flip-inline;
  97      }
  98  
  99      .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble,
 100      .wp-tooltip .wp-tooltip__hint {
 101          margin: 0;
 102      }
 103  
 104      /* Arrow: gray border (::before) under a white fill (::after). */
 105      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before,
 106      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after {
 107          content: "";
 108          position: absolute;
 109          top: 100%;
 110          right: 50%;
 111          width: 0;
 112          height: 0;
 113          border: 8px solid transparent;
 114          border-bottom: 0;
 115      }
 116  
 117      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before {
 118          margin-right: -8px;
 119          border-top-color: #c3c4c7;
 120      }
 121  
 122      .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after {
 123          margin-right: -7px;
 124          border-width: 7px;
 125          border-bottom: 0;
 126          border-top-color: #fff;
 127      }
 128  }