/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /* cspell:ignore csvg cpath */ /** * @file * Admin Toolbar styles. */ /** * Sidebar width is attached to the element because it's used as a * fallback value to the margin-inline-start property of the layout container. */ body { --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem)); --admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem)); } [data-admin-toolbar="expanded"] body { --admin-toolbar-sidebar-width: 80vw; } @media (min-width: 35rem) { [data-admin-toolbar="expanded"] body { --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem)); } } /* We apply transitions after page load to avoid shifts. */ [data-admin-toolbar-transitions] .admin-toolbar { transition: transform var(--admin-toolbar-transition); } @media (min-width: 64rem) { [data-admin-toolbar-transitions] .admin-toolbar { transition: width var(--admin-toolbar-transition); } :is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas { transition: margin-inline-start var(--admin-toolbar-transition); } } /** * This zero height div has the [data-offset-left] attribute for * Drupal.displace() to measure. It purposefully does not have any transitions * because we want Drupal.displace() to measure the width immediately */ .admin-toolbar__displace-placeholder { position: absolute; inset-block-start: 0; inset-inline-start: 0; } @media (min-width: 64rem) { .admin-toolbar__displace-placeholder { width: var(--admin-toolbar-sidebar-width); } } /** * The Admin toolbar component. */ .admin-toolbar { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--admin-toolbar-z-index); display: flex; flex-direction: column; block-size: 100vh; transform: translateX(-100%); background-color: var(--admin-toolbar-color-white); font-family: var(--admin-toolbar-font-family); inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px); } [dir="rtl"] .admin-toolbar { right: 0; transform: translateX(100%); } @media (min-width: 64rem) { [dir="rtl"] .admin-toolbar { transform: none; } } @media (min-width: 64rem) { .admin-toolbar ~ .dialog-off-canvas-main-canvas { margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)); } [dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) { margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)); } } [data-admin-toolbar="expanded"] .admin-toolbar { transform: none; } @media (min-width: 64rem) { .admin-toolbar { block-size: calc(100vh - var(--drupal-displace-offset-top, 0px)); transform: none; inset-block-start: var(--drupal-displace-offset-top, 0); } } @media only screen and (max-height: 18.75rem) { .admin-toolbar { min-height: 20rem; } } .admin-toolbar__back-button { display: none; flex-grow: 0; } .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button { display: flex; } @media (min-width: 64rem) { .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button { display: none; } } .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo { display: none; } @media (min-width: 64rem) { .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo { display: inline-flex; } } .admin-toolbar__close-button { flex-grow: 0; justify-self: end; margin-inline-start: auto; } @media (min-width: 64rem) { .admin-toolbar__close-button { display: none; } } .admin-toolbar__expand-button { display: none; align-items: center; justify-content: center; width: calc(2.25 * var(--admin-toolbar-rem)); height: calc(2.25 * var(--admin-toolbar-rem)); margin-inline-start: calc(0.125 * var(--admin-toolbar-rem)); cursor: pointer; color: var(--admin-toolbar-color-gray-500); border: 1px solid var(--admin-toolbar-color-gray-300); border-radius: 50%; background-color: transparent; } .admin-toolbar__expand-button:hover { color: var(--admin-toolbar-color-blue-700); } .admin-toolbar__expand-button::before { display: block; flex-shrink: 0; width: calc(1 * var(--admin-toolbar-rem)); height: calc(1 * var(--admin-toolbar-rem)); content: ""; transition: opacity var(--admin-toolbar-transition), transform var(--admin-toolbar-transition); opacity: 0; background-color: currentColor; mask-repeat: no-repeat; mask-position: center center; mask-size: 100% auto; 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"); } [data-admin-toolbar-transitions] .admin-toolbar__expand-button::before { opacity: 1; } [dir="rtl"] .admin-toolbar__expand-button::before { transform: rotate(180deg); } @media (forced-colors: active) { .admin-toolbar__expand-button::before { background: canvastext; } } .admin-toolbar__expand-button[aria-expanded="true"]::before { transform: rotate(180deg); } [dir="rtl"] .admin-toolbar__expand-button[aria-expanded="true"]::before { transform: none; } @media (min-width: 64rem) { .admin-toolbar__expand-button { display: flex; } } .admin-toolbar__header { position: sticky; z-index: var(--admin-toolbar-z-index-header); inset-block-start: 0; display: flex; align-items: center; justify-content: space-between; margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1); padding-block-start: var(--admin-toolbar-space-16); background-color: var(--admin-toolbar-color-white); } .admin-toolbar__header + .toolbar-block { margin-block-start: calc(var(--admin-toolbar-space-10) * -1); } @media (min-width: 64rem) { .admin-toolbar__header + .toolbar-block { margin-block-start: 0; } } @media (min-width: 64rem) { .admin-toolbar__header:not(:has(.admin-toolbar__logo)) { display: none; } } @media (min-width: 64rem) { .admin-toolbar__header { position: static; align-items: start; margin-block-start: revert; padding-block-start: revert; padding-block-end: 0; } } .admin-toolbar__item { flex: 1 0 100%; } .admin-toolbar__logo { display: inline-flex; overflow: hidden; border-radius: var(--admin-toolbar-space-8); } .admin-toolbar__logo:hover { background-color: transparent; } .admin-toolbar__logo img { display: block; max-width: var(--admin-toolbar-space-40); } /** * Scroll wrapper for Mobile. */ .admin-toolbar__scroll-wrapper { display: flex; overflow-y: auto; flex-direction: column; height: 100%; background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)); background-color: var(--admin-toolbar-color-white); background-repeat: no-repeat; background-attachment: local, scroll; background-position-y: 3rem; background-size: 100% 2.5rem, 100% 1rem; } @media (min-width: 64rem) { .admin-toolbar__scroll-wrapper { display: contents; overflow-y: unset; background: none; } } /** * Content region. * Region where most of the content will be printed. */ .admin-toolbar__content { display: grid; gap: var(--admin-toolbar-space-12); padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16); padding-inline: var(--admin-toolbar-space-16); border-inline-end: 1px solid var(--admin-toolbar-color-gray-100); } @media (min-width: 64rem) { .admin-toolbar__content { display: flex; overflow-x: hidden; overflow-y: auto; flex-direction: column; flex-grow: 1; padding-block-start: var(--admin-toolbar-space-16); background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)), radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%; background-color: var(--admin-toolbar-color-white); background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; background-size: 100% 2.5rem, 100% 2.5rem, 100% 1rem, 100% 1rem; } } /** * Sticky bottom region. * Region with less used items and button for collapse. */ .admin-toolbar__footer { z-index: var(--admin-toolbar-z-index-footer); display: grid; gap: var(--admin-toolbar-space-4); margin-block-start: auto; padding: var(--admin-toolbar-space-16); border-block-start: 1px solid var(--admin-toolbar-color-gray-200); border-inline-end: 1px solid var(--admin-toolbar-color-gray-100); } .admin-toolbar__footer > .toolbar-block:last-of-type { margin-block-end: var(--admin-toolbar-space-12); } @media (min-width: 64rem) { .admin-toolbar__footer { --admin-toolbar-z-index-footer: -1; position: sticky; bottom: 0; background-color: var(--admin-toolbar-color-white); } } /** * Sidebar toggle. */ .admin-toolbar__toggle { display: none; } @media (min-width: 64rem) { .admin-toolbar__toggle { display: flex; } } [data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip), [data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:focus + .admin-toolbar__tooltip) { display: none; } /** * Element is used to overlay the content when Toolbar is expanded in smaller devices. * It is created in the template templates/navigation.html.twig. */ .admin-toolbar-overlay { position: fixed; z-index: var(--admin-toolbar-z-index-overlay); inset-block-start: 0; inset-inline-start: 0; display: none; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.14); } :where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay { display: block; } @media (min-width: 64rem) { .admin-toolbar-overlay { display: none; } }