You are here

Home » API reference » Toolbar Anti-flicker 9.3.x

toolbar.module.css in Toolbar Anti-flicker 9.3.x

Same filename and directory in other branches
  1. 8.3 css/toolbar/toolbar.module.css
  2. 8.2 css/toolbar/toolbar.module.css

toolbar.module.css

Aggressive resets so we can achieve a consistent look in hostile CSS environments.

File

css/toolbar/toolbar.module.css
View source 
  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 .toolbar-tray {

  62.   position: absolute;

  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. /* Flickering fix */

  118. body.toolbar-tray-open.toolbar-fixed.toolbar-vertical #toolbar-administration {

  119.   margin-left: -240px;

  120.   margin-left: -15rem;

  121. }

  122. 

  123. /* Present the admin toolbar tabs horizontally as a default on user agents that

  124.  * do not understand media queries or on user agents where JavaScript is

  125.  * disabled. */

  126. .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

  127. .toolbar .toolbar-bar .toolbar-tab,

  128. .toolbar .toolbar-tray-horizontal li {

  129.   float: left; /* LTR */

  130. }

  131. [dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

  132. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  133. [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

  134.   float: right;

  135. }

  136. /* Present the admin toolbar tabs vertically by default on user agents that

  137.  * that understand media queries. This will be the small screen default. */

  138. @media only screen {

  139.   .toolbar .toolbar-bar .toolbar-tab,

  140.   .toolbar .toolbar-tray-horizontal li {

  141.     float: none; /* LTR */

  142.   }

  143.   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  144.   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

  145.     float: none;

  146.   }

  147. }

  148. /* This min-width media query is meant to provide basic horizontal layout to

  149.  * the main menu tabs when JavaScript is disabled on user agents that understand

  150.  * media queries. */

  151. @media (min-width:16.5em) {

  152.   .toolbar .toolbar-bar .toolbar-tab,

  153.   .toolbar .toolbar-tray-horizontal li {

  154.     float: left; /* LTR */

  155.   }

  156.   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  157.   [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

  158.     float: right;

  159.   }

  160. }

  161. /* Present the admin toolbar tabs horizontally when the configured narrow

  162.  * breakpoint is active. */

  163. .toolbar-oriented .toolbar-bar .toolbar-tab,

  164. .toolbar-oriented .toolbar-tray-horizontal li {

  165.   float: left; /* LTR */

  166. }

  167. [dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,

  168. [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {

  169.   float: right;

  170. }

  171. 

  172. /**

  173.  * Toolbar tray.

  174.  */

  175. .toolbar .toolbar-tray {

  176.   display: none;

  177.   z-index: 501;

  178. }

  179. .toolbar-oriented .toolbar-tray-vertical {

  180.   left: -100%; /* LTR */

  181.   position: absolute;

  182.   width: 240px;

  183.   width: 15rem;

  184. }

  185. [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {

  186.   left: auto;

  187.   right: -100%;

  188. }

  189. .toolbar .toolbar-tray-vertical > .toolbar-lining {

  190.   min-height: 100%;

  191. }

  192. .toolbar .toolbar-tray-vertical > .toolbar-lining:before {

  193.   width: 100%;

  194. }

  195. .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {

  196.   bottom: 0;

  197.   content: '';

  198.   display: block;

  199.   left: 0; /* LTR */

  200.   position: fixed;

  201.   top: 0;

  202.   width: 240px;

  203.   width: 14rem;

  204.   z-index: -1;

  205. }

  206. [dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {

  207.   left: auto;

  208.   right: 0;

  209. }

  210. /* Layer the links just above the toolbar-tray. */

  211. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon{

  212.   position: relative;

  213.   z-index: 502;

  214. }

  215. /* Hide secondary menus when the tray is horizontal. */

  216. .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {

  217.   display: none;

  218. }

  219. /* When the configured standard breakpoint is active and the tray is in a

  220.  * vertical position, the tray does not scroll with the page. The contents of

  221.  * the tray scroll within the confines of the viewport.

  222.  */

  223. .toolbar .toolbar-tray-vertical.is-active,

  224. body.toolbar-fixed .toolbar .toolbar-tray-vertical {

  225.   height: 100%;

  226.   overflow-x: hidden;

  227.   overflow-y: auto;

  228.   position: fixed;

  229. }

  230. .toolbar .toolbar-tray.is-active {

  231.   display: block;

  232. }

  233. /* Bring the tray into the viewport. By default it is just off-screen. */

  234. .toolbar-oriented .toolbar-tray-vertical.is-active {

  235.   left: 0; /* LTR */

  236. }

  237. [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {

  238.   left: auto;

  239.   right: 0;

  240. }

  241. /* When the configured standard breakpoint is active, the tray appears to push

  242.  * the page content away from the edge of the viewport. */

  243. body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  244.   margin-left: 240px; /* LTR */

  245.   margin-left: 15rem; /* LTR */

  246. }

  247. @media print {

  248.   body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  249.     margin-left: 0;

  250.   }

  251. }

  252. [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  253.   margin-left: auto;

  254.   margin-left: auto;

  255.   margin-right: 240px;

  256.   margin-right: 15rem;

  257. }

  258. @media print {

  259.   [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  260.     margin-right: 0;

  261.   }

  262. }

  263. /**

  264.  * ToolBar tray orientation toggle.

  265.  */

  266. /* Hide the orientation toggle when the configured narrow breakpoint is not

  267.  * active. */

  268. .toolbar .toolbar-tray .toolbar-toggle-orientation {

  269.   display: none;

  270. }

  271. /* Show the orientation toggle when the configured narrow breakpoint is

  272.  * active. */

  273. .toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {

  274.   display: block;

  275. }

  276. .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  277.   bottom: 0;

  278.   position: absolute;

  279.   right: 0; /* LTR */

  280.   top: auto;

  281. }

  282. [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  283.   left: 0;

  284.   right: auto;

  285. }

  286. .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  287.   float: right; /* LTR */

  288.   width: 100%;

  289. }

  290. [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  291.   float: left;

  292. }

  293. 

  294. /**

  295.  * Toolbar home button toggle.

  296.  */

  297. .toolbar .toolbar-bar .home-toolbar-tab {

  298.   display: none;

  299. }

  300. .path-admin .toolbar-bar .home-toolbar-tab {

  301.   display: block;

  302. }