152 lines
6.2 KiB
CSS
152 lines
6.2 KiB
CSS
/*
|
|
* 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;
|
|
}
|