toolbar-menu.css

Same filename in other branches
  1. 10 core/modules/navigation/css/components/toolbar-menu.css

Admin Toolbar menus styles.

File

core/modules/navigation/css/components/toolbar-menu.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. /* cspell:ignore csvg cpath wght */

  8. /**

  9.  * @file

  10.  * Admin Toolbar menus styles.

  11.  */

  12. .toolbar-menu {

  13.   display: grid;

  14.   margin: 0;

  15.   padding: 0;

  16.   list-style-type: none;

  17.   gap: var(--admin-toolbar-space-4);

  18. }

  19. [class*="toolbar-menu--level-"] {

  20.   display: none;

  21. }

  22. [data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {

  23.   display: grid;

  24. }

  25. .toolbar-menu__item {

  26.   display: grid;

  27. }

  28. .toolbar-menu__item--level-1 {

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

  30. }

  31. .toolbar-menu__item--level-1:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {

  32.   background: var(--admin-toolbar-color-gray-050);

  33. }

  34. .toolbar-menu--level-2 {

  35.   padding-block-end: var(--admin-toolbar-space-12);

  36.   box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);

  37. }

  38. [dir="rtl"] .toolbar-menu--level-2 {

  39.   box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);

  40. }

  41. .toolbar-menu__link {

  42.   position: relative;

  43.   display: flex;

  44.   align-items: center;

  45.   justify-content: space-between;

  46.   box-sizing: border-box;

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

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

  49.   cursor: pointer;

  50.   text-align: start;

  51.   -webkit-text-decoration: none;

  52.   text-decoration: none;

  53.   letter-spacing: var(--admin-toolbar-letter-spacing-0-06);

  54.   word-break: break-word;

  55.   color: var(--admin-toolbar-color-gray-800);

  56.   border: none;

  57.   background-color: transparent;

  58.   font-family: inherit;

  59.   font-size: var(--admin-toolbar-font-size-info-xs);

  60.   line-height: var(--admin-toolbar-line-height-info-xs);

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

  62.   inline-size: 100%;

  63.   gap: var(--admin-toolbar-space-8);

  64. }

  65. .toolbar-menu__link:has(+ .toolbar-menu .is-active) {

  66.   color: var(--admin-toolbar-color-gray-950);

  67. }

  68. .toolbar-menu__link.current {

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

  70. }

  71. .toolbar-menu__link.current::after {

  72.   position: absolute;

  73.   z-index: 1;

  74.   inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);

  75.   inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);

  76.   content: "";

  77.   border-radius: 50%;

  78.   background-color: currentColor;

  79.   inline-size: var(--admin-toolbar-space-8);

  80.   block-size: var(--admin-toolbar-space-8);

  81. }

  82. .toolbar-menu__link:focus {

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

  84.   outline-offset: -2px;

  85.   background-color: transparent;

  86. }

  87. .toolbar-menu__link:hover {

  88.   color: var(--admin-toolbar-color-blue-700);

  89.   background-color: transparent;

  90. }

  91. .toolbar-menu__link:hover::before {

  92.   position: absolute;

  93.   z-index: 1;

  94.   inset-block-start: 0;

  95.   inset-inline-start: 0;

  96.   content: "";

  97.   background-color: currentColor;

  98.   inline-size: var(--admin-toolbar-space-8);

  99.   block-size: 100%;

  100. }

  101. .toolbar-menu__link[aria-expanded]::after {

  102.   flex-shrink: 0;

  103.   margin-inline-start: auto;

  104.   content: "";

  105.   transition: transform var(--admin-toolbar-transition);

  106.   transform: rotate(90deg);

  107.   background-color: currentColor;

  108.   block-size: var(--admin-toolbar-space-16);

  109.   inline-size: var(--admin-toolbar-space-16);

  110.   -webkit-mask-size: var(--admin-toolbar-space-16);

  111.   mask-size: var(--admin-toolbar-space-16);

  112.   -webkit-mask-repeat: no-repeat;

  113.   mask-repeat: no-repeat;

  114.   -webkit-mask-position: center center;

  115.   mask-position: center center;

  116.   -webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");

  117.   mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");

  118. }

  119. [dir="rtl"] .toolbar-menu__link[aria-expanded]::after {

  120.   transform: rotate(90deg);

  121. }

  122. @media (forced-colors: active) {

  123.   .toolbar-menu__link[aria-expanded]::after {

  124.     background: canvastext;

  125.   }

  126. }

  127. .toolbar-menu__link[aria-expanded="true"]::after {

  128.   transform: rotate(-90deg);

  129. }

  130. [dir="rtl"] .toolbar-menu__link[aria-expanded="true"]::after {

  131.   transform: rotate(-90deg);

  132. }

  133. .toolbar-menu__link--3 {

  134.   padding-inline-start: var(--admin-toolbar-space-32);

  135.   font-size: var(--admin-toolbar-font-size-info-xs);

  136.   line-height: var(--admin-toolbar-line-height-info-xs);

  137.   font-variation-settings: "wght" 500;

  138. }

  139. .toolbar-menu__link--3::after {

  140.   position: absolute;

  141.   z-index: 1;

  142.   inset-block-start: 50%;

  143.   inset-inline-start: 0;

  144.   content: "";

  145.   background-color: var(--admin-toolbar-color-gray-100);

  146.   inline-size: var(--admin-toolbar-space-20);

  147.   block-size: 1px;

  148. }

  149. .toolbar-menu__link--3:hover::after {

  150.   background-color: currentColor;

  151. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.