tooltip.pcss.css

Tooltip styles.

File

core/modules/navigation/css/components/tooltip.pcss.css

View source 
  1. /* cspell:ignore wght */

  2. /**

  3.  * @file

  4.  * Tooltip styles.

  5.  */

  6. 

  7. @import "../base/media-queries.pcss.css";

  8. 

  9. .toolbar-tooltip {

  10.   position: fixed;

  11.   z-index: var(--admin-toolbar-z-index-tooltip);

  12.   display: none;

  13.   padding-inline: var(--admin-toolbar-space-12);

  14.   padding-block: var(--admin-toolbar-space-8);

  15.   color: var(--admin-toolbar-color-white);

  16.   border-radius: var(--admin-toolbar-space-8);

  17.   background-color: var(--admin-toolbar-color-gray-990);

  18.   font-size: var(--admin-toolbar-font-size-info-sm);

  19.   font-variation-settings: "wght" 600;

  20.   line-height: var(--admin-toolbar-line-height-info-sm);

  21. }

  22. 

  23. @media (--admin-toolbar-desktop) {

  24.   [data-drupal-tooltip]:hover + .toolbar-tooltip,

  25.   [data-drupal-tooltip]:focus + .toolbar-tooltip {

  26.     display: block;

  27.   }

  28. }

  29. 

  30. [data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {

  31.   display: none;

  32. }