drupal/core/modules/toolbar/css/toolbar.module.css

/**
 * @file toolbar.module.css
 *
 *
 * Aggressive resets so we can achieve a consistent look in hostile CSS
 * environments.
 */
html.js #toolbar-administration,
html .toolbar * {
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
html.js #toolbar-administration {
  font-size: small;
  line-height: 1;
}
html.js .toolbar {
  left: 0; /* LTR */
  position: absolute;
  top: 0;
  width: 100%;
}
html.js[dir="rtl"] .toolbar {
   left: auto;
   right: 0;
 }

/**
 * Very specific overrides for Drupal system CSS.
 */
.toolbar li,
.toolbar .menu li,
.toolbar .item-list,
.toolbar .item-list li,
.toolbar .menu li.expanded {
  list-style-type: none;
  list-style-image: none;
}
.toolbar .menu li {
  padding-top: 0;
}
.js .toolbar .bar .tab,
.js .toolbar .menu li {
  display: block;
}
.js .toolbar .bar .tab,
.js .toolbar .horizontal .tab  {
  float: left; /* LTR */
}
.js[dir="rtl"] .toolbar .bar .tab,
.js[dir="rtl"] .toolbar .horizontal .tab {
  float: right;
}
.js .toolbar a {
  display: block;
  line-height: 1;
}
/**
 * Administration menu.
 */
.js .toolbar .bar {
  left: 0; /* LTR */
  position: absolute;
  top: 0;
  z-index: 1250;
  width: 100%;
}
.js[dir="rtl"] .toolbar .bar {
  left: auto;
  right: 0;
}
@media only screen {
  .js .toolbar .bar .tab,
  .js .toolbar .tray li {
    float: none; /* LTR */
  }
  .js[dir="rtl"] .toolbar .bar .tab,
  .js[dir="rtl"] .toolbar .tray li {
    float: none;
  }
}
@media only screen and (min-width: 16.5em) {
  .js .toolbar .bar .tab,
  .js .toolbar .horizontal li {
    float: left; /* LTR */
  }
  .js[dir="rtl"] .toolbar .bar .tab,
  .js[dir="rtl"] .toolbar .horizontal li {
    float: right;
  }
}
@media only screen and (min-width: 28.125em) {
  .js .toolbar .bar {
    position: fixed;
  }
}

/**
 * Toolbar tray.
 */
.js .toolbar .tray {
  display: none;
  position: fixed;
}
/* Make vertical toolbar tray scroll with page for touch devices. */
.touch .toolbar .tray {
  position: absolute;
}
.toolbar .tray {
  z-index: 1200;
}
.toolbar .horizontal {
  width: 100%;
}
.toolbar .vertical,
.toolbar .vertical > .lining:before {
  bottom: 0;
  width: 240px;
  width: 15rem;
}
.toolbar .vertical {
  left: -100%; /* LTR */
  position: absolute;
}
[dir="rtl"] .toolbar .vertical {
  left: auto;
  right: -100%;
}
.toolbar .horizontal {
  left: 0; /* LTR */
  height: 0;
  /* Set one higher than the contextual links gear. */
  z-index: 1000;
}
[dir="rtl"] .toolbar .horizontal {
  left: auto;
  right: 0;
}
.toolar .tray .lining {
  position: relative;
}
.toolbar .vertical > .lining,
.toolbar .vertical > .lining:before {
  left: -100%; /* LTR */
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}
[dir="rtl"] .toolbar .vertical > .lining,
[dir="rtl"] .toolbar .vertical > .lining:before {
  left: auto;
  right: -100%;
}
.toolbar .vertical > .lining:before {
  bottom: 0;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: '';
  display: none;
  height: 100%;
  /* Support for devices that do not support position fixed. */
  position: absolute;
  position: fixed;
  top: 0;
  z-index: -1;
}
.toolbar .tray.active {
  display: block;
}
.toolbar .horizontal.active {
  height: auto;
}
.toolbar .vertical.active,
.toolbar .vertical.active > .lining {
  bottom: 0;
  left: 0; /* LTR */
  top: 0;
}
[dir="rtl"] .toolbar .vertical.active,
[dir="rtl"] .toolbar .vertical.active > .lining {
  left: auto;
  right: 0;
}
/* Make vertical toolbar tray scroll with page for touch devices. */
.touch .toolbar .vertical.active,
.touch .toolbar .vertical.active > .lining {
  bottom: auto;
  top: auto;
}
.toolbar .horizontal .menu li ul {
  display: none;
}
@media only screen {
  .toolbar .vertical,
  .toolbar .vertical > .lining:before {
    bottom: auto;
    width: 100%;
  }
}

@media only screen and (min-width: 16.5em) {
  .toolbar .vertical {
    bottom: 0;
  }
  .toolbar .vertical,
  .toolbar .vertical > .lining:before {
    width: 240px;
    width: 15rem;
  }
  .toolbar .vertical.active > .lining:before {
    display: block;
    left: -1px; /* LTR */
  }
  [dir="rtl"] .toolbar .vertical.active > .lining:before {
    left: auto;
    right: -1px;
  }
}
@media only screen and (min-width: 28.125em) {
  .toolbar .tray.horizontal {
    position: fixed;
  }
}
/**
 * At larger screen sizes, the tray pushes the page content.
 */
@media only screen and (min-width: 38.125em) {
  body.toolbar-tray-open.toolbar-vertical {
    margin-left: 240px; /* LTR */
    margin-left: 15rem; /* LTR */
  }
  [dir="rtl"] body.toolbar-tray-open.toolbar-vertical {
    margin-left: 0;
    margin-right: 240px;
    margin-right: 15rem;
  }
}
/**
 * ToolBar tray orientation toggle.
 *
 * Hide the orientation toggle from browsers that do not interpret
 * media queries. They get a standard horizontal toolbar.
 */
.toolbar .horizontal .toggle-orientation {
  display: none;
}
@media only screen {
  .toolbar .tray .toggle-orientation {
    display: none;
  }
}
@media only screen and (min-width: 16.5em)   {
  .toolbar .tray .toggle-orientation {
    display: block;
  }
}
.toolbar .horizontal .toggle-orientation {
  bottom: 0;
  position: absolute;
  right: 0; /* LTR */
  top: 0;
}
[dir="rtl"] .toolbar .horizontal .toggle-orientation {
  left: 0;
  right: auto;
}
.toolbar .vertical .toggle-orientation {
  float: right; /* LTR */
  width: 100%;
}
[dir="rtl"] .toolbar .vertical .toggle-orientation {
  float: left;
}