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;
20 #toolbar-administration {
26 * Very specific overrides for Drupal system CSS.
30 .toolbar .item-list li,
32 .toolbar .menu-item--expanded {
33 list-style-type: none;
34 list-style-image: none;
39 .toolbar .toolbar-bar .toolbar-tab,
43 .toolbar .toolbar-bar .toolbar-tab.hidden {
52 * Administration menu.
54 .toolbar .toolbar-bar,
55 .toolbar .toolbar-tray {
59 /* Position the admin toolbar absolutely when the configured standard breakpoint
60 * is active. The toolbar container, that contains the bar and the trays, is
61 * position absolutely so that it scrolls with the page. Otherwise, on smaller
62 * screens, the components of the admin toolbar are positioned statically. */
63 body.toolbar-fixed .toolbar-oriented,
64 .toolbar-oriented .toolbar-bar,
65 .toolbar-oriented .toolbar-tray {
71 /* Layer the bar just above the trays and above contextual link triggers. */
72 .toolbar-oriented .toolbar-bar {
75 /* Position the admin toolbar fixed when the configured standard breakpoint is
77 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
80 /* When the configured narrow breakpoint is active, the toolbar is sized to wrap
81 * around the trays in order to provide a context for scrolling tray content
82 * that is taller than the viewport. */
83 body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
88 /* Present the admin toolbar tabs horizontally as a default on user agents that
89 * do not understand media queries or on user agents where JavaScript is
91 .toolbar .toolbar-bar .toolbar-tab,
92 .toolbar .toolbar-tray-horizontal li {
93 float: left; /* LTR */
95 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
96 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
99 /* Present the admin toolbar tabs vertically by default on user agents that
100 * that understand media queries. This will be the small screen default. */
102 .toolbar .toolbar-bar .toolbar-tab,
103 .toolbar .toolbar-tray-horizontal li {
104 float: none; /* LTR */
106 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
107 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
111 /* This min-width media query is meant to provide basic horizontal layout to
112 * the main menu tabs when JavaScript is disabled on user agents that understand
114 @media (min-width:16.5em) {
115 .toolbar .toolbar-bar .toolbar-tab,
116 .toolbar .toolbar-tray-horizontal li {
117 float: left; /* LTR */
119 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
120 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
124 /* Present the admin toolbar tabs horizontally when the configured narrow
125 * breakpoint is active. */
126 .toolbar-oriented .toolbar-bar .toolbar-tab,
127 .toolbar-oriented .toolbar-tray-horizontal li {
128 float: left; /* LTR */
130 [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
131 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
138 .toolbar .toolbar-tray {
142 .toolbar-oriented .toolbar-tray-vertical {
143 left: -100%; /* LTR */
148 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
152 .toolbar .toolbar-tray-vertical > .toolbar-lining {
155 .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
158 .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
169 [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
173 /* Layer the links just above the toolbar-tray. */
174 .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon{
178 /* Hide secondary menus when the tray is horizontal. */
179 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
182 /* When the configured standard breakpoint is active and the tray is in a
183 * horizontal position, the tray is fixed to the top of the viewport and does
184 * not scroll with the page contents. */
185 body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
188 /* When the configured standard breakpoint is active and the tray is in a
189 * vertical position, the tray does not scroll with the page. The contents of
190 * the tray scroll within the confines of the viewport. */
191 .toolbar .toolbar-tray-vertical.is-active,
192 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
198 .toolbar .toolbar-tray.is-active {
201 /* Bring the tray into the viewport. By default it is just off-screen. */
202 .toolbar-oriented .toolbar-tray-vertical.is-active {
205 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
209 /* When the configured standard breakpoint is active, the tray appears to push
210 * the page content away from the edge of the viewport. */
211 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
212 margin-left: 240px; /* LTR */
213 margin-left: 15rem; /* LTR */
216 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
220 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
227 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
232 * ToolBar tray orientation toggle.
234 /* Hide the orientation toggle when the configured narrow breakpoint is not
236 .toolbar .toolbar-tray .toolbar-toggle-orientation {
239 /* Show the orientation toggle when the configured narrow breakpoint is
241 .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
244 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
250 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
254 .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
255 float: right; /* LTR */
258 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {