/** * @file toolbar.module.css * * * Aggressive resets so we can achieve a consistent look in hostile CSS * environments. */ #toolbar-administration, #toolbar-administration * { box-sizing: border-box; } #toolbar-administration { font-size: small; line-height: 1; margin: 0; padding: 0; vertical-align: baseline; } @media print { #toolbar-administration { display: none; } } .toolbar-loading #toolbar-administration { overflow: hidden; } /** * Very specific overrides for Drupal system CSS. */ .toolbar li, .toolbar .item-list, .toolbar .item-list li, .toolbar .menu-item, .toolbar .menu-item--expanded { list-style-type: none; list-style-image: none; } .toolbar .menu-item { padding-top: 0; } .toolbar .toolbar-bar .toolbar-tab, .toolbar .menu-item { display: block; } .toolbar .toolbar-bar .toolbar-tab.hidden { display: none; } .toolbar a { display: block; line-height: 1; } /** * Administration menu. */ .toolbar .toolbar-bar, .toolbar .toolbar-tray { position: relative; z-index: 1250; } .toolbar-horizontal .toolbar-tray { position: fixed; width: 100%; left: 0; } /* Position the admin toolbar absolutely when the configured standard breakpoint * is active. The toolbar container, that contains the bar and the trays, is * position absolutely so that it scrolls with the page. Otherwise, on smaller * screens, the components of the admin toolbar are positioned statically. */ .toolbar-oriented .toolbar-bar { left: 0; position: absolute; right: 0; top: 0; } .toolbar-oriented .toolbar-tray { left: 0; position: absolute; right: 0; } /* .toolbar-loading is required by toolbar JavaScript to pre-render markup * style to avoid extra reflow & flicker. */ @media (min-width: 61em) { .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray { position: relative; display: block; z-index: -999; visibility: hidden; width: 1px; } .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining { width: 999em; } .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray { display: block; } } /* Layer the bar just above the trays and above contextual link triggers. */ .toolbar-oriented .toolbar-bar { z-index: 502; } /* Position the admin toolbar fixed when the configured standard breakpoint is * active. */ body.toolbar-fixed .toolbar-oriented .toolbar-bar { position: fixed; } /* When the configured narrow breakpoint is active, the toolbar is sized to wrap * around the trays in order to provide a context for scrolling tray content * that is taller than the viewport. */ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { bottom: 0; width: 240px; width: 15rem; } /* Present the admin toolbar tabs horizontally as a default on user agents that * do not understand media queries or on user agents where JavaScript is * disabled. */ .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li, .toolbar .toolbar-bar .toolbar-tab, .toolbar .toolbar-tray-horizontal li { float: left; /* LTR */ } [dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li, [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab, [dir="rtl"] .toolbar .toolbar-tray-horizontal li { float: right; } /* Present the admin toolbar tabs vertically by default on user agents that * that understand media queries. This will be the small screen default. */ @media only screen { .toolbar .toolbar-bar .toolbar-tab, .toolbar .toolbar-tray-horizontal li { float: none; /* LTR */ } [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab, [dir="rtl"] .toolbar .toolbar-tray-horizontal li { float: none; } } /* This min-width media query is meant to provide basic horizontal layout to * the main menu tabs when JavaScript is disabled on user agents that understand * media queries. */ @media (min-width: 16.5em) { .toolbar .toolbar-bar .toolbar-tab, .toolbar .toolbar-tray-horizontal li { float: left; /* LTR */ } [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab, [dir="rtl"] .toolbar .toolbar-tray-horizontal li { float: right; } } /* Present the admin toolbar tabs horizontally when the configured narrow * breakpoint is active. */ .toolbar-oriented .toolbar-bar .toolbar-tab, .toolbar-oriented .toolbar-tray-horizontal li { float: left; /* LTR */ } [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab, [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li { float: right; } /** * Toolbar tray. */ .toolbar .toolbar-tray { display: none; z-index: 501; } .toolbar-oriented .toolbar-tray-vertical { left: -100%; /* LTR */ position: absolute; width: 240px; width: 15rem; } [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical { left: auto; right: -100%; } .toolbar .toolbar-tray-vertical > .toolbar-lining { min-height: 100%; } .toolbar .toolbar-tray-vertical > .toolbar-lining:before { width: 100%; } .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before { bottom: 0; content: ''; display: block; left: 0; /* LTR */ position: fixed; top: 0; width: 240px; width: 14rem; z-index: -1; } [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before { left: auto; right: 0; } /* Layer the links just above the toolbar-tray. */ .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon { position: relative; z-index: 502; } /* Hide secondary menus when the tray is horizontal. */ .toolbar-oriented .toolbar-tray-horizontal .menu-item ul { display: none; } /* When the configured standard breakpoint is active and the tray is in a * vertical position, the tray does not scroll with the page. The contents of * the tray scroll within the confines of the viewport. */ .toolbar .toolbar-tray-vertical.is-active, body.toolbar-fixed .toolbar .toolbar-tray-vertical { height: 100%; overflow-x: hidden; overflow-y: auto; position: fixed; } .toolbar .toolbar-tray.is-active { display: block; } /* Bring the tray into the viewport. By default it is just off-screen. */ .toolbar-oriented .toolbar-tray-vertical.is-active { left: 0; /* LTR */ } [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active { left: auto; right: 0; } /* When the configured standard breakpoint is active, the tray appears to push * the page content away from the edge of the viewport. */ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { margin-left: 240px; /* LTR */ margin-left: 15rem; /* LTR */ } @media print { body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { margin-left: 0; } } [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { margin-left: auto; margin-left: auto; margin-right: 240px; margin-right: 15rem; } @media print { [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { margin-right: 0; } } /** * ToolBar tray orientation toggle. */ /* Hide the orientation toggle when the configured narrow breakpoint is not * active. */ .toolbar .toolbar-tray .toolbar-toggle-orientation { display: none; } /* Show the orientation toggle when the configured narrow breakpoint is * active. */ .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation { display: block; } .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation { bottom: 0; position: absolute; right: 0; /* LTR */ top: auto; } [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation { left: 0; right: auto; } .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation { float: right; /* LTR */ width: 100%; } [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation { float: left; } /** * Toolbar home button toggle. */ .toolbar .toolbar-bar .home-toolbar-tab { display: none; } .path-admin .toolbar-bar .home-toolbar-tab { display: block; }