www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/toolbar/css/toolbar.module.css

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