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