toolbar-menu.pcss.css

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

Admin Toolbar menus styles.

File

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

View source
  1. /* cspell:ignore csvg cpath wght */
  2. /**
  3. * @file
  4. * Admin Toolbar menus styles.
  5. */
  6. @import "../base/media-queries.pcss.css";
  7. .toolbar-menu {
  8. display: grid;
  9. margin: 0;
  10. padding: 0;
  11. list-style-type: none;
  12. gap: var(--admin-toolbar-space-4);
  13. }
  14. [class*="toolbar-menu--level-"] {
  15. display: none;
  16. }
  17. [data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
  18. display: grid;
  19. }
  20. .toolbar-menu__item {
  21. display: grid;
  22. }
  23. .toolbar-menu__item--level-1 {
  24. border-radius: var(--admin-toolbar-space-8);
  25. &:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
  26. background: var(--admin-toolbar-color-gray-050);
  27. }
  28. }
  29. .toolbar-menu--level-2 {
  30. padding-block-end: var(--admin-toolbar-space-12);
  31. box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
  32. [dir="rtl"]
  33. }
  34. .toolbar-menu__link {
  35. position: relative;
  36. display: flex;
  37. align-items: center;
  38. justify-content: space-between;
  39. box-sizing: border-box;
  40. padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
  41. padding-block: var(--admin-toolbar-space-8);
  42. cursor: pointer;
  43. text-align: start;
  44. text-decoration: none;
  45. letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
  46. word-break: break-word;
  47. color: var(--admin-toolbar-color-gray-800);
  48. border: none;
  49. background-color: transparent;
  50. font-family: inherit;
  51. font-size: var(--admin-toolbar-font-size-info-xs);
  52. line-height: var(--admin-toolbar-line-height-info-xs);
  53. font-variation-settings: "wght" 600;
  54. inline-size: 100%;
  55. gap: var(--admin-toolbar-space-8);
  56. &:has(+ .toolbar-menu .is-active) {
  57. color: var(--admin-toolbar-color-gray-950);
  58. }
  59. &.current {
  60. color: var(--admin-toolbar-color-gray-990);
  61. &::after {
  62. position: absolute;
  63. z-index: 1;
  64. inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
  65. inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
  66. content: "";
  67. border-radius: 50%;
  68. background-color: currentColor;
  69. inline-size: var(--admin-toolbar-space-8);
  70. block-size: var(--admin-toolbar-space-8);
  71. }
  72. }
  73. &:focus {
  74. color: var(--admin-toolbar-color-gray-990);
  75. outline-offset: -2px;
  76. background-color: transparent;
  77. }
  78. &:hover {
  79. color: var(--admin-toolbar-color-blue-700);
  80. background-color: transparent;
  81. &::before {
  82. position: absolute;
  83. z-index: 1;
  84. inset-block-start: 0;
  85. inset-inline-start: 0;
  86. content: "";
  87. background-color: currentColor;
  88. inline-size: var(--admin-toolbar-space-8);
  89. block-size: 100%;
  90. }
  91. }
  92. &[aria-expanded] {
  93. &::after {
  94. flex-shrink: 0;
  95. margin-inline-start: auto;
  96. content: "";
  97. transition: transform var(--admin-toolbar-transition);
  98. transform: rotate(90deg);
  99. background-color: currentColor;
  100. block-size: var(--admin-toolbar-space-16);
  101. inline-size: var(--admin-toolbar-space-16);
  102. mask-size: var(--admin-toolbar-space-16);
  103. mask-repeat: no-repeat;
  104. mask-position: center center;
  105. mask-image: url(../../assets/icons/chevron.svg);
  106. [dir="rtl"]
  107. @media (--forced-colors) {
  108. background: canvastext;
  109. }
  110. }
  111. }
  112. &[aria-expanded="true"] {
  113. &::after {
  114. transform: rotate(-90deg);
  115. [dir="rtl"]
  116. }
  117. }
  118. }
  119. .toolbar-menu__link--3 {
  120. padding-inline-start: var(--admin-toolbar-space-32);
  121. font-size: var(--admin-toolbar-font-size-info-xs);
  122. line-height: var(--admin-toolbar-line-height-info-xs);
  123. font-variation-settings: "wght" 500;
  124. &::after {
  125. position: absolute;
  126. z-index: 1;
  127. inset-block-start: 50%;
  128. inset-inline-start: 0;
  129. content: "";
  130. background-color: var(--admin-toolbar-color-gray-100);
  131. inline-size: var(--admin-toolbar-space-20);
  132. block-size: 1px;
  133. }
  134. &:hover {
  135. &::after {
  136. background-color: currentColor;
  137. }
  138. }
  139. }

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