/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /* cspell:ignore csvg cpath wght */ /** * @file * Admin Toolbar menus styles. */ .toolbar-menu { display: grid; margin: 0; padding: 0; list-style-type: none; gap: var(--admin-toolbar-space-4); } [class*="toolbar-menu--level-"] { display: none; } [data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] { display: grid; } .toolbar-menu__item { display: grid; } .toolbar-menu__item--level-1 { border-radius: var(--admin-toolbar-space-8); } .toolbar-menu__item--level-1:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) { background: var(--admin-toolbar-color-gray-050); } .toolbar-menu--level-2 { padding-block-end: var(--admin-toolbar-space-12); box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100); } [dir="rtl"] .toolbar-menu--level-2 { box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100); } .toolbar-menu__link { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12); padding-block: var(--admin-toolbar-space-8); cursor: pointer; text-align: start; -webkit-text-decoration: none; text-decoration: none; letter-spacing: var(--admin-toolbar-letter-spacing-0-06); word-break: break-word; color: var(--admin-toolbar-color-gray-800); border: none; background-color: transparent; font-family: inherit; font-size: var(--admin-toolbar-font-size-info-xs); line-height: var(--admin-toolbar-line-height-info-xs); font-variation-settings: "wght" 600; inline-size: 100%; gap: var(--admin-toolbar-space-8); } .toolbar-menu__link:has(+ .toolbar-menu .is-active) { color: var(--admin-toolbar-color-gray-950); } .toolbar-menu__link.current { color: var(--admin-toolbar-color-gray-990); } .toolbar-menu__link.current::after { position: absolute; z-index: 1; inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2); inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5); content: ""; border-radius: 50%; background-color: currentColor; inline-size: var(--admin-toolbar-space-8); block-size: var(--admin-toolbar-space-8); } .toolbar-menu__link:focus { color: var(--admin-toolbar-color-gray-990); outline-offset: -2px; background-color: transparent; } .toolbar-menu__link:hover { color: var(--admin-toolbar-color-blue-700); background-color: transparent; } .toolbar-menu__link:hover::before { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 0; content: ""; background-color: currentColor; inline-size: var(--admin-toolbar-space-8); block-size: 100%; } .toolbar-menu__link[aria-expanded]::after { flex-shrink: 0; margin-inline-start: auto; content: ""; transition: transform var(--admin-toolbar-transition); transform: rotate(90deg); background-color: currentColor; block-size: var(--admin-toolbar-space-16); inline-size: var(--admin-toolbar-space-16); -webkit-mask-size: var(--admin-toolbar-space-16); mask-size: var(--admin-toolbar-space-16); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -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"); 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"); } [dir="rtl"] .toolbar-menu__link[aria-expanded]::after { transform: rotate(90deg); } @media (forced-colors: active) { .toolbar-menu__link[aria-expanded]::after { background: canvastext; } } .toolbar-menu__link[aria-expanded="true"]::after { transform: rotate(-90deg); } [dir="rtl"] .toolbar-menu__link[aria-expanded="true"]::after { transform: rotate(-90deg); } .toolbar-menu__link--3 { padding-inline-start: var(--admin-toolbar-space-32); font-size: var(--admin-toolbar-font-size-info-xs); line-height: var(--admin-toolbar-line-height-info-xs); font-variation-settings: "wght" 500; } .toolbar-menu__link--3::after { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 0; content: ""; background-color: var(--admin-toolbar-color-gray-100); inline-size: var(--admin-toolbar-space-20); block-size: 1px; } .toolbar-menu__link--3:hover::after { background-color: currentColor; }