annotate core/modules/toolbar/css/toolbar.module.css @ 19:fa3358dc1485 tip

Add ndrum files
author Chris Cannam
date Wed, 28 Aug 2019 13:14:47 +0100
parents af1871eacc83
children
rev   line source
Chris@0 1 /**
Chris@0 2 * @file toolbar.module.css
Chris@0 3 *
Chris@0 4 *
Chris@0 5 * Aggressive resets so we can achieve a consistent look in hostile CSS
Chris@0 6 * environments.
Chris@0 7 */
Chris@0 8 #toolbar-administration,
Chris@0 9 #toolbar-administration * {
Chris@0 10 box-sizing: border-box;
Chris@0 11 }
Chris@0 12 #toolbar-administration {
Chris@0 13 margin: 0;
Chris@0 14 padding: 0;
Chris@0 15 vertical-align: baseline;
Chris@18 16 font-size: small;
Chris@18 17 line-height: 1;
Chris@0 18 }
Chris@14 19
Chris@0 20 @media print {
Chris@0 21 #toolbar-administration {
Chris@0 22 display: none;
Chris@0 23 }
Chris@0 24 }
Chris@0 25 .toolbar-loading #toolbar-administration {
Chris@0 26 overflow: hidden;
Chris@0 27 }
Chris@0 28 /**
Chris@0 29 * Very specific overrides for Drupal system CSS.
Chris@0 30 */
Chris@0 31 .toolbar li,
Chris@0 32 .toolbar .item-list,
Chris@0 33 .toolbar .item-list li,
Chris@0 34 .toolbar .menu-item,
Chris@0 35 .toolbar .menu-item--expanded {
Chris@0 36 list-style-type: none;
Chris@0 37 list-style-image: none;
Chris@0 38 }
Chris@0 39 .toolbar .menu-item {
Chris@0 40 padding-top: 0;
Chris@0 41 }
Chris@0 42 .toolbar .toolbar-bar .toolbar-tab,
Chris@0 43 .toolbar .menu-item {
Chris@0 44 display: block;
Chris@0 45 }
Chris@0 46 .toolbar .toolbar-bar .toolbar-tab.hidden {
Chris@0 47 display: none;
Chris@0 48 }
Chris@0 49 .toolbar a {
Chris@0 50 display: block;
Chris@0 51 line-height: 1;
Chris@0 52 }
Chris@0 53
Chris@0 54 /**
Chris@0 55 * Administration menu.
Chris@0 56 */
Chris@0 57 .toolbar .toolbar-bar,
Chris@0 58 .toolbar .toolbar-tray {
Chris@0 59 position: relative;
Chris@0 60 z-index: 1250;
Chris@0 61 }
Chris@0 62 .toolbar-horizontal .toolbar-tray {
Chris@0 63 position: fixed;
Chris@18 64 left: 0;
Chris@0 65 width: 100%;
Chris@0 66 }
Chris@0 67 /* Position the admin toolbar absolutely when the configured standard breakpoint
Chris@0 68 * is active. The toolbar container, that contains the bar and the trays, is
Chris@0 69 * position absolutely so that it scrolls with the page. Otherwise, on smaller
Chris@0 70 * screens, the components of the admin toolbar are positioned statically. */
Chris@0 71 .toolbar-oriented .toolbar-bar {
Chris@18 72 position: absolute;
Chris@18 73 top: 0;
Chris@18 74 right: 0;
Chris@0 75 left: 0;
Chris@18 76 }
Chris@18 77 .toolbar-oriented .toolbar-tray {
Chris@0 78 position: absolute;
Chris@0 79 right: 0;
Chris@0 80 left: 0;
Chris@0 81 }
Chris@0 82 /* .toolbar-loading is required by toolbar JavaScript to pre-render markup
Chris@0 83 * style to avoid extra reflow & flicker. */
Chris@0 84 @media (min-width: 61em) {
Chris@0 85 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
Chris@0 86 position: relative;
Chris@18 87 z-index: -999;
Chris@0 88 display: block;
Chris@0 89 visibility: hidden;
Chris@0 90 width: 1px;
Chris@0 91 }
Chris@0 92 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
Chris@0 93 width: 999em;
Chris@0 94 }
Chris@0 95 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
Chris@0 96 display: block;
Chris@0 97 }
Chris@0 98 }
Chris@0 99
Chris@0 100 /* Layer the bar just above the trays and above contextual link triggers. */
Chris@0 101 .toolbar-oriented .toolbar-bar {
Chris@0 102 z-index: 502;
Chris@0 103 }
Chris@0 104 /* Position the admin toolbar fixed when the configured standard breakpoint is
Chris@0 105 * active. */
Chris@0 106 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
Chris@0 107 position: fixed;
Chris@0 108 }
Chris@0 109 /* When the configured narrow breakpoint is active, the toolbar is sized to wrap
Chris@0 110 * around the trays in order to provide a context for scrolling tray content
Chris@0 111 * that is taller than the viewport. */
Chris@0 112 body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
Chris@0 113 bottom: 0;
Chris@0 114 width: 240px;
Chris@0 115 width: 15rem;
Chris@0 116 }
Chris@0 117
Chris@0 118 /* Present the admin toolbar tabs horizontally as a default on user agents that
Chris@0 119 * do not understand media queries or on user agents where JavaScript is
Chris@0 120 * disabled. */
Chris@0 121 .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
Chris@0 122 .toolbar .toolbar-bar .toolbar-tab,
Chris@0 123 .toolbar .toolbar-tray-horizontal li {
Chris@0 124 float: left; /* LTR */
Chris@0 125 }
Chris@0 126 [dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
Chris@0 127 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
Chris@0 128 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
Chris@0 129 float: right;
Chris@0 130 }
Chris@0 131 /* Present the admin toolbar tabs vertically by default on user agents that
Chris@0 132 * that understand media queries. This will be the small screen default. */
Chris@0 133 @media only screen {
Chris@0 134 .toolbar .toolbar-bar .toolbar-tab,
Chris@0 135 .toolbar .toolbar-tray-horizontal li {
Chris@0 136 float: none; /* LTR */
Chris@0 137 }
Chris@0 138 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
Chris@0 139 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
Chris@0 140 float: none;
Chris@0 141 }
Chris@0 142 }
Chris@0 143 /* This min-width media query is meant to provide basic horizontal layout to
Chris@0 144 * the main menu tabs when JavaScript is disabled on user agents that understand
Chris@0 145 * media queries. */
Chris@0 146 @media (min-width: 16.5em) {
Chris@0 147 .toolbar .toolbar-bar .toolbar-tab,
Chris@0 148 .toolbar .toolbar-tray-horizontal li {
Chris@0 149 float: left; /* LTR */
Chris@0 150 }
Chris@0 151 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
Chris@0 152 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
Chris@0 153 float: right;
Chris@0 154 }
Chris@0 155 }
Chris@0 156 /* Present the admin toolbar tabs horizontally when the configured narrow
Chris@0 157 * breakpoint is active. */
Chris@0 158 .toolbar-oriented .toolbar-bar .toolbar-tab,
Chris@0 159 .toolbar-oriented .toolbar-tray-horizontal li {
Chris@0 160 float: left; /* LTR */
Chris@0 161 }
Chris@0 162 [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
Chris@0 163 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
Chris@0 164 float: right;
Chris@0 165 }
Chris@0 166
Chris@0 167 /**
Chris@0 168 * Toolbar tray.
Chris@0 169 */
Chris@0 170 .toolbar .toolbar-tray {
Chris@18 171 z-index: 501;
Chris@0 172 display: none;
Chris@0 173 }
Chris@0 174 .toolbar-oriented .toolbar-tray-vertical {
Chris@18 175 position: absolute;
Chris@0 176 left: -100%; /* LTR */
Chris@0 177 width: 240px;
Chris@0 178 width: 15rem;
Chris@0 179 }
Chris@0 180 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
Chris@18 181 right: -100%;
Chris@0 182 left: auto;
Chris@0 183 }
Chris@0 184 .toolbar .toolbar-tray-vertical > .toolbar-lining {
Chris@0 185 min-height: 100%;
Chris@0 186 }
Chris@0 187 .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
Chris@0 188 width: 100%;
Chris@0 189 }
Chris@0 190 .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
Chris@18 191 position: fixed;
Chris@18 192 z-index: -1;
Chris@18 193 top: 0;
Chris@0 194 bottom: 0;
Chris@18 195 left: 0; /* LTR */
Chris@0 196 display: block;
Chris@0 197 width: 240px;
Chris@0 198 width: 14rem;
Chris@18 199 content: "";
Chris@0 200 }
Chris@0 201 [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
Chris@18 202 right: 0;
Chris@0 203 left: auto;
Chris@0 204 }
Chris@0 205 /* Layer the links just above the toolbar-tray. */
Chris@0 206 .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
Chris@0 207 position: relative;
Chris@0 208 z-index: 502;
Chris@0 209 }
Chris@0 210 /* Hide secondary menus when the tray is horizontal. */
Chris@0 211 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
Chris@0 212 display: none;
Chris@0 213 }
Chris@0 214 /* When the configured standard breakpoint is active and the tray is in a
Chris@0 215 * vertical position, the tray does not scroll with the page. The contents of
Chris@0 216 * the tray scroll within the confines of the viewport.
Chris@0 217 */
Chris@0 218 .toolbar .toolbar-tray-vertical.is-active,
Chris@0 219 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
Chris@18 220 position: fixed;
Chris@0 221 overflow-x: hidden;
Chris@0 222 overflow-y: auto;
Chris@18 223 height: 100%;
Chris@0 224 }
Chris@0 225 .toolbar .toolbar-tray.is-active {
Chris@0 226 display: block;
Chris@0 227 }
Chris@0 228 /* Bring the tray into the viewport. By default it is just off-screen. */
Chris@0 229 .toolbar-oriented .toolbar-tray-vertical.is-active {
Chris@0 230 left: 0; /* LTR */
Chris@0 231 }
Chris@0 232 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
Chris@18 233 right: 0;
Chris@0 234 left: auto;
Chris@0 235 }
Chris@0 236 /* When the configured standard breakpoint is active, the tray appears to push
Chris@0 237 * the page content away from the edge of the viewport. */
Chris@0 238 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
Chris@0 239 margin-left: 240px; /* LTR */
Chris@0 240 margin-left: 15rem; /* LTR */
Chris@0 241 }
Chris@14 242
Chris@0 243 @media print {
Chris@0 244 body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
Chris@0 245 margin-left: 0;
Chris@0 246 }
Chris@0 247 }
Chris@0 248 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
Chris@0 249 margin-right: 240px;
Chris@0 250 margin-right: 15rem;
Chris@18 251 margin-left: auto;
Chris@0 252 }
Chris@14 253
Chris@0 254 @media print {
Chris@0 255 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
Chris@0 256 margin-right: 0;
Chris@0 257 }
Chris@0 258 }
Chris@0 259 /**
Chris@0 260 * ToolBar tray orientation toggle.
Chris@0 261 */
Chris@0 262 /* Hide the orientation toggle when the configured narrow breakpoint is not
Chris@0 263 * active. */
Chris@0 264 .toolbar .toolbar-tray .toolbar-toggle-orientation {
Chris@0 265 display: none;
Chris@0 266 }
Chris@0 267 /* Show the orientation toggle when the configured narrow breakpoint is
Chris@0 268 * active. */
Chris@0 269 .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
Chris@0 270 display: block;
Chris@0 271 }
Chris@0 272 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
Chris@18 273 position: absolute;
Chris@18 274 top: auto;
Chris@18 275 right: 0; /* LTR */
Chris@0 276 bottom: 0;
Chris@0 277 }
Chris@0 278 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
Chris@18 279 right: auto;
Chris@0 280 left: 0;
Chris@0 281 }
Chris@0 282 .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
Chris@0 283 float: right; /* LTR */
Chris@0 284 width: 100%;
Chris@0 285 }
Chris@0 286 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
Chris@0 287 float: left;
Chris@0 288 }
Chris@0 289
Chris@0 290 /**
Chris@0 291 * Toolbar home button toggle.
Chris@0 292 */
Chris@0 293 .toolbar .toolbar-bar .home-toolbar-tab {
Chris@0 294 display: none;
Chris@0 295 }
Chris@0 296 .path-admin .toolbar-bar .home-toolbar-tab {
Chris@0 297 display: block;
Chris@0 298 }