/** * @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 { --sidebar-width: 64px; .admin-toolbar-expanded & { --sidebar-width: 264px; } } /** * 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; top: 0; left: 0; width: var(--sidebar-width); } /** * The Admin toolbar component. */ .admin-toolbar { display: flex; flex-direction: column; box-sizing: border-box; border-inline-end: 1px solid #aaa; background-color: white; border-inline-end: 1px solid var(--color-gray-100); font-size: var(--font-size-base); inline-size: var(--sidebar-width); position: fixed; height: 100vh; z-index: 501; padding-inline: var(--space-xs); padding-block-start: var(--space-xs); overflow-y: scroll; @media only screen and (max-height: 300px) { min-height: 20rem; } & ~ .dialog-off-canvas-main-canvas { // Gin Custom start --------------------- @include mq(medium) { margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width)); transition: margin-inline-start 0.2s linear; } // Gin Custom end ------------------------ } .admin-toolbar-expanded & { overflow-y: auto; } // Gin Custom start --------------------- // *:focus { // outline: 4px solid var(--color-focus); // } // Gin Custom end ------------------------ } /* @todo: Correct the class name with a BEM modifier. */ .admin-toolbar-expanded .admin-toolbar { /* Sticky section at the bottom */ & .admin-toolbar__sticky-section { padding-inline: var(--space-xs); } & .admin-toolbar__content, /* Menu