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