/* * 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: 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-800); 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-gray-990); } @media (min-width: 64rem) { .admin-toolbar__expand-button { display: flex; } } .admin-toolbar__expand-button-chevron { flex-shrink: 0; fill: currentColor; width: calc(1 * var(--admin-toolbar-rem)); height: calc(1 * var(--admin-toolbar-rem)); transition: opacity var(--admin-toolbar-transition), rotate var(--admin-toolbar-transition); opacity: 0; } [data-admin-toolbar-transitions] .admin-toolbar__expand-button-chevron { opacity: 1; } [dir="rtl"] .admin-toolbar__expand-button-chevron { rotate: 180deg; } .admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron { rotate: 180deg; } [dir="rtl"] :is(.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron) { rotate: 0deg; } .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: rgb(0, 0, 0, 0.14); } :where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay { display: block; } @media (min-width: 64rem) { .admin-toolbar-overlay { display: none; } }