comparison core/themes/stable/css/toolbar/toolbar.module.css @ 0:4c8ae668cc8c

Initial import (non-working)

+/**
+ * @file toolbar.module.css
+ *
+ *
+ * Aggressive resets so we can achieve a consistent look in hostile CSS
+ * environments.
+ */
+#toolbar-administration,
+#toolbar-administration * {
+  box-sizing: border-box;
+}
+#toolbar-administration {
+  font-size: small;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+@media print {
+  #toolbar-administration {
+    display: none;
+  }
+}
+.toolbar-loading #toolbar-administration {
+  overflow: hidden;
+}
+/**
+ * Very specific overrides for Drupal system CSS.
+ */
+.toolbar li,
+.toolbar .item-list,
+.toolbar .item-list li,
+.toolbar .menu-item,
+.toolbar .menu-item--expanded {
+  list-style-type: none;
+  list-style-image: none;
+}
+.toolbar .menu-item {
+  padding-top: 0;
+}
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .menu-item {
+  display: block;
+}
+.toolbar .toolbar-bar .toolbar-tab.hidden {
+  display: none;
+}
+.toolbar a {
+  display: block;
+  line-height: 1;
+}
+
+/**
+ * Administration menu.
+ */
+.toolbar .toolbar-bar,
+.toolbar .toolbar-tray {
+  position: relative;
+  z-index: 1250;
+}
+.toolbar-horizontal .toolbar-tray {
+  position: fixed;
+  width: 100%;
+  left: 0;
+}
+/* Position the admin toolbar absolutely when the configured standard breakpoint
+ * is active. The toolbar container, that contains the bar and the trays, is
+ * position absolutely so that it scrolls with the page. Otherwise, on smaller
+ * screens, the components of the admin toolbar are positioned statically. */
+.toolbar-oriented .toolbar-bar {
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.toolbar-oriented .toolbar-tray {
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup
+ * style to avoid extra reflow & flicker. */
+@media (min-width: 61em) {
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray {
+    position: relative;
+    display: block;
+    z-index: -999;
+    visibility: hidden;
+    width: 1px;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .toolbar-tab:last-child .toolbar-tray .toolbar-lining {
+    width: 999em;
+  }
+  .toolbar-loading.toolbar-horizontal .toolbar .toolbar-bar .home-toolbar-tab + .toolbar-tab .toolbar-tray {
+    display: block;
+  }
+}
+
+/* Layer the bar just above the trays and above contextual link triggers. */
+.toolbar-oriented .toolbar-bar {
+  z-index: 502;
+}
+/* Position the admin toolbar fixed when the configured standard breakpoint is
+ * active. */
+body.toolbar-fixed .toolbar-oriented .toolbar-bar {
+  position: fixed;
+}
+/* When the configured narrow breakpoint is active, the toolbar is sized to wrap
+ * around the trays in order to provide a context for scrolling tray content
+ * that is taller than the viewport. */
+body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
+  bottom: 0;
+  width: 240px;
+  width: 15rem;
+}
+
+/* Present the admin toolbar tabs horizontally as a default on user agents that
+ * do not understand media queries or on user agents where JavaScript is
+ * disabled. */
+.toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+.toolbar .toolbar-bar .toolbar-tab,
+.toolbar .toolbar-tray-horizontal li {
+  float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,
+[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+  float: right;
+}
+/* Present the admin toolbar tabs vertically by default on user agents that
+ * that understand media queries. This will be the small screen default. */
+@media only screen {
+  .toolbar .toolbar-bar .toolbar-tab,
+  .toolbar .toolbar-tray-horizontal li {
+    float: none; /* LTR */
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+    float: none;
+  }
+}
+/* This min-width media query is meant to provide basic horizontal layout to
+ * the main menu tabs when JavaScript is disabled on user agents that understand
+ * media queries. */
+@media (min-width: 16.5em) {
+  .toolbar .toolbar-bar .toolbar-tab,
+  .toolbar .toolbar-tray-horizontal li {
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
+  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {
+    float: right;
+  }
+}
+/* Present the admin toolbar tabs horizontally when the configured narrow
+ * breakpoint is active. */
+.toolbar-oriented .toolbar-bar .toolbar-tab,
+.toolbar-oriented .toolbar-tray-horizontal li {
+  float: left; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
+  float: right;
+}
+
+/**
+ * Toolbar tray.
+ */
+.toolbar .toolbar-tray {
+  display: none;
+  z-index: 501;
+}
+.toolbar-oriented .toolbar-tray-vertical {
+  left: -100%; /* LTR */
+  position: absolute;
+  width: 240px;
+  width: 15rem;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {
+  left: auto;
+  right: -100%;
+}
+.toolbar .toolbar-tray-vertical > .toolbar-lining {
+  min-height: 100%;
+}
+.toolbar .toolbar-tray-vertical > .toolbar-lining:before {
+  width: 100%;
+}
+.toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before {
+  bottom: 0;
+  content: '';
+  display: block;
+  left: 0; /* LTR */
+  position: fixed;
+  top: 0;
+  width: 240px;
+  width: 14rem;
+  z-index: -1;
+}
+[dir="rtl"] .toolbar .toolbar-tray-vertical > .toolbar-lining:before {
+  left: auto;
+  right: 0;
+}
+/* Layer the links just above the toolbar-tray. */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+  position: relative;
+  z-index: 502;
+}
+/* Hide secondary menus when the tray is horizontal. */
+.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
+  display: none;
+}
+/* When the configured standard breakpoint is active and the tray is in a
+ * vertical position, the tray does not scroll with the page. The contents of
+ * the tray scroll within the confines of the viewport.
+ */
+.toolbar .toolbar-tray-vertical.is-active,
+body.toolbar-fixed .toolbar .toolbar-tray-vertical {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+}
+.toolbar .toolbar-tray.is-active {
+  display: block;
+}
+/* Bring the tray into the viewport. By default it is just off-screen. */
+.toolbar-oriented .toolbar-tray-vertical.is-active {
+  left: 0; /* LTR */
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
+  left: auto;
+  right: 0;
+}
+/* When the configured standard breakpoint is active, the tray appears to push
+ * the page content away from the edge of the viewport. */
+body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+  margin-left: 240px; /* LTR */
+  margin-left: 15rem; /* LTR */
+}
+@media print {
+  body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+    margin-left: 0;
+  }
+}
+[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+  margin-left: auto;
+  margin-left: auto;
+  margin-right: 240px;
+  margin-right: 15rem;
+}
+@media print {
+  [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
+    margin-right: 0;
+  }
+}
+/**
+ * ToolBar tray orientation toggle.
+ */
+/* Hide the orientation toggle when the configured narrow breakpoint is not
+ * active. */
+.toolbar .toolbar-tray .toolbar-toggle-orientation {
+  display: none;
+}
+/* Show the orientation toggle when the configured narrow breakpoint is
+ * active. */
+.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {
+  display: block;
+}
+.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+  bottom: 0;
+  position: absolute;
+  right: 0; /* LTR */
+  top: auto;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
+  left: 0;
+  right: auto;
+}
+.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+  float: right; /* LTR */
+  width: 100%;
+}
+[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
+  float: left;
+}
+
+/**
+ * Toolbar home button toggle.
+ */
+.toolbar .toolbar-bar .home-toolbar-tab {
+  display: none;
+}
+.path-admin .toolbar-bar .home-toolbar-tab {
+  display: block;
+}