www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/css/toolbar/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
  20 @media print {
  21   #toolbar-administration {
  22     display: none;
  23   }
  24 }
  25 .toolbar-loading #toolbar-administration {
  26   overflow: hidden;
  27 }
  28 /**
  29  * Very specific overrides for Drupal system CSS.
  30  */
  31 .toolbar li,
  32 .toolbar .item-list,
  33 .toolbar .item-list li,
  34 .toolbar .menu-item,
  35 .toolbar .menu-item--expanded {
  36   list-style-type: none;
  37   list-style-image: none;
  38 }
  39 .toolbar .menu-item {
  40   padding-top: 0;
  41 }
  42 .toolbar .toolbar-bar .toolbar-tab,
  43 .toolbar .menu-item {
  44   display: block;
  45 }
  46 .toolbar .toolbar-bar .toolbar-tab.hidden {
  47   display: none;
  48 }
  49 .toolbar a {
  50   display: block;
  51   line-height: 1;
  52 }
  53
  54 /**
  55  * Administration menu.
  56  */
  57 .toolbar .toolbar-bar,
  58 .toolbar .toolbar-tray {
  59   position: relative;
  60   z-index: 1250;
  61 }
  62 .toolbar-horizontal .toolbar-tray {
  63   position: fixed;
  64   width: 100%;
  65   left: 0;
  66 }
  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 {
  72   left: 0;
  73   position: absolute;
  74   right: 0;
  75   top: 0;
  76 }
  77 .toolbar-oriented .toolbar-tray {
  78   left: 0;
  79   position: absolute;
  80   right: 0;
  81 }
  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 {
  86     position: relative;
  87     display: block;
  88     z-index: -999;
  89     visibility: hidden;
  90     width: 1px;
  91   }
  92   .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
  93     width: 999em;
  94   }
  95   .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
  96     display: block;
  97   }
  98 }
  99
 100 /* Layer the bar just above the trays and above contextual link triggers. */
 101 .toolbar-oriented .toolbar-bar {
 102   z-index: 502;
 103 }
 104 /* Position the admin toolbar fixed when the configured standard breakpoint is
 105  * active. */
 106 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
 107   position: fixed;
 108 }
 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 {
 113   bottom: 0;
 114   width: 240px;
 115   width: 15rem;
 116 }
 117
 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
 120  * disabled. */
 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 */
 125 }
 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 {
 129   float: right;
 130 }
 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. */
 133 @media only screen {
 134   .toolbar .toolbar-bar .toolbar-tab,
 135   .toolbar .toolbar-tray-horizontal li {
 136     float: none; /* LTR */
 137   }
 138   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 139   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
 140     float: none;
 141   }
 142 }
 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
 145  * media queries. */
 146 @media (min-width: 16.5em) {
 147   .toolbar .toolbar-bar .toolbar-tab,
 148   .toolbar .toolbar-tray-horizontal li {
 149     float: left; /* LTR */
 150   }
 151   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 152   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
 153     float: right;
 154   }
 155 }
 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 */
 161 }
 162 [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
 163 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
 164   float: right;
 165 }
 166
 167 /**
 168  * Toolbar tray.
 169  */
 170 .toolbar .toolbar-tray {
 171   display: none;
 172   z-index: 501;
 173 }
 174 .toolbar-oriented .toolbar-tray-vertical {
 175   left: -100%; /* LTR */
 176   position: absolute;
 177   width: 240px;
 178   width: 15rem;
 179 }
 180 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
 181   left: auto;
 182   right: -100%;
 183 }
 184 .toolbar .toolbar-tray-vertical > .toolbar-lining {
 185   min-height: 100%;
 186 }
 187 .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
 188   width: 100%;
 189 }
 190 .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
 191   bottom: 0;
 192   content: '';
 193   display: block;
 194   left: 0; /* LTR */
 195   position: fixed;
 196   top: 0;
 197   width: 240px;
 198   width: 14rem;
 199   z-index: -1;
 200 }
 201 [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
 202   left: auto;
 203   right: 0;
 204 }
 205 /* Layer the links just above the toolbar-tray. */
 206 .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
 207   position: relative;
 208   z-index: 502;
 209 }
 210 /* Hide secondary menus when the tray is horizontal. */
 211 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
 212   display: none;
 213 }
 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.
 217  */
 218 .toolbar .toolbar-tray-vertical.is-active,
 219 body.toolbar-fixed .toolbar .toolbar-tray-vertical {
 220   height: 100%;
 221   overflow-x: hidden;
 222   overflow-y: auto;
 223   position: fixed;
 224 }
 225 .toolbar .toolbar-tray.is-active {
 226   display: block;
 227 }
 228 /* Bring the tray into the viewport. By default it is just off-screen. */
 229 .toolbar-oriented .toolbar-tray-vertical.is-active {
 230   left: 0; /* LTR */
 231 }
 232 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
 233   left: auto;
 234   right: 0;
 235 }
 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 */
 241 }
 242
 243 @media print {
 244   body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 245     margin-left: 0;
 246   }
 247 }
 248 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 249   margin-left: auto;
 250   margin-right: 240px;
 251   margin-right: 15rem;
 252 }
 253
 254 @media print {
 255   [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 256     margin-right: 0;
 257   }
 258 }
 259 /**
 260  * ToolBar tray orientation toggle.
 261  */
 262 /* Hide the orientation toggle when the configured narrow breakpoint is not
 263  * active. */
 264 .toolbar .toolbar-tray .toolbar-toggle-orientation {
 265   display: none;
 266 }
 267 /* Show the orientation toggle when the configured narrow breakpoint is
 268  * active. */
 269 .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
 270   display: block;
 271 }
 272 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
 273   bottom: 0;
 274   position: absolute;
 275   right: 0; /* LTR */
 276   top: auto;
 277 }
 278 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
 279   left: 0;
 280   right: auto;
 281 }
 282 .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
 283   float: right; /* LTR */
 284   width: 100%;
 285 }
 286 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
 287   float: left;
 288 }
 289
 290 /**
 291  * Toolbar home button toggle.
 292  */
 293 .toolbar .toolbar-bar .home-toolbar-tab {
 294   display: none;
 295 }
 296 .path-admin .toolbar-bar .home-toolbar-tab {
 297   display: block;
 298 }