2 * @file toolbar.module.css
5 * Aggressive resets so we can achieve a consistent look in hostile CSS
8 #toolbar-administration,
9 #toolbar-administration * {
10 box-sizing: border-box;
12 #toolbar-administration {
17 vertical-align: baseline;
21 #toolbar-administration {
25 .toolbar-loading #toolbar-administration {
29 * Very specific overrides for Drupal system CSS.
33 .toolbar .item-list li,
35 .toolbar .menu-item--expanded {
36 list-style-type: none;
37 list-style-image: none;
42 .toolbar .toolbar-bar .toolbar-tab,
46 .toolbar .toolbar-bar .toolbar-tab.hidden {
55 * Administration menu.
57 .toolbar .toolbar-bar,
58 .toolbar .toolbar-tray {
62 .toolbar-horizontal .toolbar-tray {
67 /* Position the admin toolbar absolutely when the configured standard breakpoint
68 * is active. The toolbar container, that contains the bar and the trays, is
69 * position absolutely so that it scrolls with the page. Otherwise, on smaller
70 * screens, the components of the admin toolbar are positioned statically. */
71 .toolbar-oriented .toolbar-bar {
77 .toolbar-oriented .toolbar-tray {
82 /* .toolbar-loading is required by toolbar JavaScript to pre-render markup
83 * style to avoid extra reflow & flicker. */
84 @media (min-width: 61em) {
85 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
92 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
95 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
100 /* Layer the bar just above the trays and above contextual link triggers. */
101 .toolbar-oriented .toolbar-bar {
104 /* Position the admin toolbar fixed when the configured standard breakpoint is
106 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
109 /* When the configured narrow breakpoint is active, the toolbar is sized to wrap
110 * around the trays in order to provide a context for scrolling tray content
111 * that is taller than the viewport. */
112 body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
118 /* Present the admin toolbar tabs horizontally as a default on user agents that
119 * do not understand media queries or on user agents where JavaScript is
121 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
122 .toolbar .toolbar-bar .toolbar-tab,
123 .toolbar .toolbar-tray-horizontal li {
124 float: left; /* LTR */
126 [dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
127 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
128 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
131 /* Present the admin toolbar tabs vertically by default on user agents that
132 * that understand media queries. This will be the small screen default. */
134 .toolbar .toolbar-bar .toolbar-tab,
135 .toolbar .toolbar-tray-horizontal li {
136 float: none; /* LTR */
138 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
139 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
143 /* This min-width media query is meant to provide basic horizontal layout to
144 * the main menu tabs when JavaScript is disabled on user agents that understand
146 @media (min-width: 16.5em) {
147 .toolbar .toolbar-bar .toolbar-tab,
148 .toolbar .toolbar-tray-horizontal li {
149 float: left; /* LTR */
151 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
152 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
156 /* Present the admin toolbar tabs horizontally when the configured narrow
157 * breakpoint is active. */
158 .toolbar-oriented .toolbar-bar .toolbar-tab,
159 .toolbar-oriented .toolbar-tray-horizontal li {
160 float: left; /* LTR */
162 [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
163 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
170 .toolbar .toolbar-tray {
174 .toolbar-oriented .toolbar-tray-vertical {
175 left: -100%; /* LTR */
180 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
184 .toolbar .toolbar-tray-vertical > .toolbar-lining {
187 .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
190 .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
201 [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
205 /* Layer the links just above the toolbar-tray. */
206 .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
210 /* Hide secondary menus when the tray is horizontal. */
211 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
214 /* When the configured standard breakpoint is active and the tray is in a
215 * vertical position, the tray does not scroll with the page. The contents of
216 * the tray scroll within the confines of the viewport.
218 .toolbar .toolbar-tray-vertical.is-active,
219 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
225 .toolbar .toolbar-tray.is-active {
228 /* Bring the tray into the viewport. By default it is just off-screen. */
229 .toolbar-oriented .toolbar-tray-vertical.is-active {
232 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
236 /* When the configured standard breakpoint is active, the tray appears to push
237 * the page content away from the edge of the viewport. */
238 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
239 margin-left: 240px; /* LTR */
240 margin-left: 15rem; /* LTR */
244 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
248 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
255 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
260 * ToolBar tray orientation toggle.
262 /* Hide the orientation toggle when the configured narrow breakpoint is not
264 .toolbar .toolbar-tray .toolbar-toggle-orientation {
267 /* Show the orientation toggle when the configured narrow breakpoint is
269 .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
272 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
278 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
282 .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
283 float: right; /* LTR */
286 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
291 * Toolbar home button toggle.
293 .toolbar .toolbar-bar .home-toolbar-tab {
296 .path-admin .toolbar-bar .home-toolbar-tab {