navbar.module.css in Navbar 7

navbar.module.css

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

File

css/navbar.module.css

/**
 * @file navbar.module.css
 *
 *
 * Aggressive resets so we can achieve a consistent look in hostile CSS
 * environments.
 */
#navbar-administration,
#navbar-administration *:not(select) {
  /* IE8 is the only browser we support that can't handle the :not
   * pseudo-selector. If users really want Navbar support in IE8 on sites with
   * themes that don't properly encapsulate their CSS, then they're going to
   * need to write that patch :) The reset is not strictly speaking, necessary.
   * It is provided as a convenience to protect again style bleed from themes
   * and modules that don't properly scope styling.
   *
   * The select element completely blows up if its properties are reset.
   */
  background-attachment: scroll;
  background-color: transparent;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  border: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  bottom: auto;
  color: black;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  direction: ltr;
  float: none;
  font-style: normal;
  font-weight: normal;
  height: auto;
  left: auto;
  letter-spacing: normal;
  line-height: 1;
  list-style: none;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  orphans: 2;
  outline: none;
  outline-color: invert;
  outline-style: none;
  outline-width: medium;
  overflow: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  position: static;
  right: auto;
  table-layout: auto;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  top: auto;
  vertical-align: baseline;
  visibility: visible;
  widows: 2;
  z-index: auto;
  unicode-bidi: normal;
  white-space: normal;
  width: auto;
  word-spacing: normal;
}

/* These styles will cascade. There is no need to star-select child elements. */
#navbar-administration {
  font-family: sans-serif;
  font-size: small;
}

#navbar-administration select,
#navbar-administration optgroup,
#navbar-administration option,
#navbar-administration button {
  color: black;
}

#navbar-administration select {
  background-image: none;
  border-radius: none;
  box-shadow: none;
  font-weight: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* Make select boxes look pretty in webkit */
#navbar-administration :-webkit-any(select) {
  -webkit-appearance: menulist-button;
  background-color: lightgray;
}

/* Make select boxes look pretty in Gecko */
#navbar-administration select {
  -moz-appearance: menulist-textfield;
  appearance: menulist-textfield;
  height: 2em;
  padding: 2px 1em 0 0;
}

/* tables still need 'cellspacing="0"' in the markup */
#navbar-administration table {
  border-collapse: collapse;
  border-spacing: 0;
}

#navbar-administration caption,
#navbar-administration th,
#navbar-administration td {
  text-align: left;
  font-weight: normal;
}

#navbar-administration blockquote:before,
#navbar-administration blockquote:after,
#navbar-administration q:before,
#navbar-administration q:after {
  content: "";
}

#navbar-administration blockquote,
#navbar-administration q {
  quotes: "" "";
}

#navbar-administration ul.navbar-menu {
  border: none;
  list-style: none;
  text-align: left; /* LTR */
}

/* @end */

/**
 * Very specific overrides for Drupal system CSS.
 */
#navbar-administration li,
#navbar-administration .navbar-menu li,
#navbar-administration .item-list,
#navbar-administration .item-list li,
#navbar-administration .navbar-menu li.expanded {
  list-style-type: none;
  list-style-image: none;
  padding: 0;
}
/* Override core system.menus.css */
#navbar-administration ul.navbar-menu li,
/* Override overzealous menu styling in themes. */
#navbar-administration .navbar-menu-root li {
  margin: 0;
}
#navbar-administration .navbar-menu li {
  padding-top: 0;
}
#navbar-administration .navbar-bar .navbar-tab,
#navbar-administration .navbar-menu li {
  display: block;
}
#navbar-administration .navbar-tab > *,
#navbar-administration .navbar-menu-item,
/* On behalf of shortcut module */
#navbar-administration .navbar-tray .edit-shortcuts {
  display: block;
  line-height: 1;
}

/**
 * Administration menu.
 */
#navbar-administration .navbar-bar,
#navbar-administration .navbar-tray {
  position: relative;
  z-index: 1250;
}
/* Position the admin navbar absolutely when the configured standard breakpoint
 * is active. The navbar 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 navbar are positioned statically. */
body.navbar-fixed #navbar-administration.navbar-oriented,
#navbar-administration.navbar-oriented .navbar-bar,
#navbar-administration.navbar-oriented .navbar-tray {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
/* Layer the bar just above the trays and above contextual link triggers. */
#navbar-administration.navbar-oriented .navbar-bar {
  z-index: 502;
}
/* Position the admin navbar fixed when the configured standard breakpoint is
 * active. */
body.navbar-fixed #navbar-administration.navbar-oriented .navbar-bar {
  position: fixed;
}
/* When the configured narrow breakpoint is active, the navbar is sized to wrap
 * around the trays in order to provide a context for scrolling tray content
 * that is taller than the viewport. */
body.navbar-tray-open.navbar-fixed.navbar-vertical #navbar-administration.navbar-oriented {
  bottom: 0;
  width: 240px;
  width: 15rem;
}
/* Present the admin navbar tabs horizontally as a default on user agents that
 * do not understand media queries or on user agents where JavaScript is
 * disabled. */
#navbar-administration .navbar-bar .navbar-tab,
#navbar-administration .navbar-tray-horizontal li {
  float: left; /* LTR */
}
/* Present the admin navbar tabs vertically by default on user agents that
 * that understand media queries. This will be the small screen default. */
@media only screen {
  #navbar-administration .navbar-bar .navbar-tab,
  #navbar-administration .navbar-tray-horizontal li {
    float: none; /* LTR */
  }
}
/* 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) {
  #navbar-administration .navbar-bar .navbar-tab,
  #navbar-administration .navbar-tray-horizontal li {
    float: left; /* LTR */
  }
}
/* Present the admin navbar tabs horizontally when the configured narrow
 * breakpoint is active. */
#navbar-administration.navbar-oriented .navbar-bar .navbar-tab,
#navbar-administration.navbar-oriented .navbar-tray-horizontal li {
  float: left; /* LTR */
}

/**
 * Navbar tray.
 */
#navbar-administration .navbar-tray {
  display: none;
  z-index: 501;
}
#navbar-administration.navbar-oriented .navbar-tray-vertical {
  left: -100%; /* LTR */
  position: absolute;
  width: 240px;
  width: 15rem;
}
#navbar-administration .navbar-tray-vertical > .navbar-lining {
  min-height: 100%;
}
#navbar-administration .navbar-tray-vertical > .navbar-lining:before {
  width: 100%;
}
#navbar-administration.navbar-oriented .navbar-tray-vertical > .navbar-lining:before {
  bottom: 0;
  content: '';
  display: block;
  left: 0; /* LTR */
  position: fixed;
  top: 0;
  width: 240px;
  width: 14rem;
  z-index: -1;
}
/* Hide secondary menus when the tray is horizontal. */
#navbar-administration.navbar-oriented .navbar-tray-horizontal .navbar-menu li ul {
  display: none;
}
/* When the configured standard breakpoint is active and the tray is in a
 * horizontal position, the tray is fixed to the top of the viewport and does
 * not scroll with the page contents. */
body.navbar-fixed #navbar-administration .navbar-tray-horizontal {
  position: fixed;
}
/* 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. */
body.navbar-fixed #navbar-administration .navbar-tray-vertical {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
}
#navbar-administration .navbar-tray.navbar-active {
  display: block;
}
/* Bring the tray into the viewport. By default it is just off-screen. */
#navbar-administration.navbar-oriented .navbar-tray-vertical.navbar-active {
  left: 0; /* LTR */
}
/* When the configured standard breakpoint is active, the tray appears to push
 * the page content away from the edge of the viewport. */
body.navbar-tray-open.navbar-vertical.navbar-fixed {
  margin-left: 240px; /* LTR */
  margin-left: 15rem; /* LTR */
}

/**
 * ToolBar tray orientation toggle.
 */
/* Hide the orientation toggle when the configured narrow breakpoint is not
 * active. */
#navbar-administration .navbar-tray .navbar-toggle-orientation {
  display: none;
}
/* Show the orientation toggle when the configured narrow breakpoint is
 * active. */
#navbar-administration.navbar-oriented .navbar-tray .navbar-toggle-orientation {
  display: block;
}
#navbar-administration.navbar-oriented .navbar-tray-horizontal .navbar-toggle-orientation {
  bottom: 0;
  position: absolute;
  right: 0; /* LTR */
  top: auto;
}
#navbar-administration.navbar-oriented .navbar-tray-vertical .navbar-toggle-orientation {
  float: right; /* LTR */
  width: 100%;
}