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
  25 /**
  26  * Very specific overrides for Drupal system CSS.
  27  */
  28 .toolbar li,
  29 .toolbar .item-list,
  30 .toolbar .item-list li,
  31 .toolbar .menu-item,
  32 .toolbar .menu-item--expanded {
  33   list-style-type: none;
  34   list-style-image: none;
  35 }
  36 .toolbar .menu-item {
  37   padding-top: 0;
  38 }
  39 .toolbar .toolbar-bar .toolbar-tab,
  40 .toolbar .menu-item {
  41   display: block;
  42 }
  43 .toolbar .toolbar-bar .toolbar-tab.hidden {
  44   display: none;
  45 }
  46 .toolbar a {
  47   display: block;
  48   line-height: 1;
  49 }
  50
  51 /**
  52  * Administration menu.
  53  */
  54 .toolbar .toolbar-bar,
  55 .toolbar .toolbar-tray {
  56   position: relative;
  57   z-index: 1250;
  58 }
  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 {
  66   left: 0;
  67   position: absolute;
  68   right: 0;
  69   top: 0;
  70 }
  71 /* Layer the bar just above the trays and above contextual link triggers. */
  72 .toolbar-oriented .toolbar-bar {
  73   z-index: 502;
  74 }
  75 /* Position the admin toolbar fixed when the configured standard breakpoint is
  76  * active. */
  77 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
  78   position: fixed;
  79 }
  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 {
  84   bottom: 0;
  85   width: 240px;
  86   width: 15rem;
  87 }
  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
  90  * disabled. */
  91 .toolbar .toolbar-bar .toolbar-tab,
  92 .toolbar .toolbar-tray-horizontal li {
  93   float: left; /* LTR */
  94 }
  95 [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
  96 [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
  97   float: right;
  98 }
  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. */
 101 @media only screen {
 102   .toolbar .toolbar-bar .toolbar-tab,
 103   .toolbar .toolbar-tray-horizontal li {
 104     float: none; /* LTR */
 105   }
 106   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 107   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
 108     float: none;
 109   }
 110 }
 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
 113  * media queries. */
 114 @media (min-width:16.5em) {
 115   .toolbar .toolbar-bar .toolbar-tab,
 116   .toolbar .toolbar-tray-horizontal li {
 117     float: left; /* LTR */
 118   }
 119   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
 120   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
 121     float: right;
 122   }
 123 }
 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 */
 129 }
 130 [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
 131 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
 132   float: right;
 133 }
 134
 135 /**
 136  * Toolbar tray.
 137  */
 138 .toolbar .toolbar-tray {
 139   display: none;
 140   z-index: 501;
 141 }
 142 .toolbar-oriented .toolbar-tray-vertical {
 143   left: -100%; /* LTR */
 144   position: absolute;
 145   width: 240px;
 146   width: 15rem;
 147 }
 148 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
 149   left: auto;
 150   right: -100%;
 151 }
 152 .toolbar .toolbar-tray-vertical > .toolbar-lining {
 153   min-height: 100%;
 154 }
 155 .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
 156   width: 100%;
 157 }
 158 .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
 159   bottom: 0;
 160   content: '';
 161   display: block;
 162   left: 0; /* LTR */
 163   position: fixed;
 164   top: 0;
 165   width: 240px;
 166   width: 14rem;
 167   z-index: -1;
 168 }
 169 [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
 170   left: auto;
 171   right: 0;
 172 }
 173 /* Layer the links just above the toolbar-tray. */
 174 .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon{
 175   position: relative;
 176   z-index: 502;
 177 }
 178 /* Hide secondary menus when the tray is horizontal. */
 179 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
 180   display: none;
 181 }
 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 {
 186   position: fixed;
 187 }
 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 {
 193   height: 100%;
 194   overflow-x: hidden;
 195   overflow-y: auto;
 196   position: fixed;
 197 }
 198 .toolbar .toolbar-tray.is-active {
 199   display: block;
 200 }
 201 /* Bring the tray into the viewport. By default it is just off-screen. */
 202 .toolbar-oriented .toolbar-tray-vertical.is-active {
 203   left: 0; /* LTR */
 204 }
 205 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
 206   left: auto;
 207   right: 0;
 208 }
 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 */
 214 }
 215 @media print {
 216   body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 217     margin-left: 0;
 218   }
 219 }
 220 [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 221   margin-left: auto;
 222   margin-left: auto;
 223   margin-right: 240px;
 224   margin-right: 15rem;
 225 }
 226 @media print {
 227   [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 228     margin-right: 0;
 229   }
 230 }
 231 /**
 232  * ToolBar tray orientation toggle.
 233  */
 234 /* Hide the orientation toggle when the configured narrow breakpoint is not
 235  * active. */
 236 .toolbar .toolbar-tray .toolbar-toggle-orientation {
 237   display: none;
 238 }
 239 /* Show the orientation toggle when the configured narrow breakpoint is
 240  * active. */
 241 .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
 242   display: block;
 243 }
 244 .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
 245   bottom: 0;
 246   position: absolute;
 247   right: 0; /* LTR */
 248   top: auto;
 249 }
 250 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
 251   left: 0;
 252   right: auto;
 253 }
 254 .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
 255   float: right; /* LTR */
 256   width: 100%;
 257 }
 258 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
 259   float: left;
 260 }