Chris@0: /**
Chris@0:  * @file
Chris@0:  * Styling for toolbar module icons.
Chris@0:  */
Chris@0: 
Chris@0: .toolbar .toolbar-icon {
Chris@18:   position: relative;
Chris@0:   padding-left: 2.75em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-icon {
Chris@18:   padding-right: 2.75em;
Chris@0:   padding-left: 1.3333em;
Chris@0: }
Chris@0: .toolbar .toolbar-icon:before {
Chris@0:   position: absolute;
Chris@0:   top: 0;
Chris@18:   left: 0.6667em; /* LTR */
Chris@18:   display: block;
Chris@0:   width: 20px;
Chris@18:   height: 100%;
Chris@18:   content: "";
Chris@18:   background-color: transparent;
Chris@18:   background-repeat: no-repeat;
Chris@18:   background-attachment: scroll;
Chris@18:   background-position: center center;
Chris@18:   background-size: 100% auto;
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-icon:before {
Chris@18:   right: 0.6667em;
Chris@0:   left: auto;
Chris@0: }
Chris@0: .toolbar button.toolbar-icon {
Chris@18:   border: 0;
Chris@0:   background-color: transparent;
Chris@0:   font-size: 1em;
Chris@0: }
Chris@0: .toolbar .toolbar-menu ul .toolbar-icon {
Chris@0:   padding-left: 1.3333em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
Chris@18:   padding-right: 1.3333em;
Chris@0:   padding-left: 0;
Chris@0: }
Chris@0: .toolbar .toolbar-menu ul a.toolbar-icon:before {
Chris@0:   display: none;
Chris@0: }
Chris@0: .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
Chris@0:   padding-left: 2.75em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
Chris@18:   padding-right: 2.75em;
Chris@0:   padding-left: 0;
Chris@0: }
Chris@0: .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
Chris@0:   padding-left: 3.75em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
Chris@18:   padding-right: 3.75em;
Chris@0:   padding-left: 0;
Chris@0: }
Chris@0: 
Chris@0: .toolbar .toolbar-tray-vertical .toolbar-menu a {
Chris@18:   padding-right: 4em; /* LTR */
Chris@0:   padding-left: 2.75em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
Chris@18:   padding-right: 2.75em;
Chris@0:   padding-left: 4em;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Top level icons.
Chris@0:  */
Chris@0: .toolbar-bar .toolbar-icon-menu:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/hamburger.svg);
Chris@0: }
Chris@0: .toolbar-bar .toolbar-icon-menu:active:before,
Chris@0: .toolbar-bar .toolbar-icon-menu.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/hamburger.svg);
Chris@0: }
Chris@0: .toolbar-bar .toolbar-icon-help:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);
Chris@0: }
Chris@0: .toolbar-bar .toolbar-icon-help:active:before,
Chris@0: .toolbar-bar .toolbar-icon-help.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Main menu icons.
Chris@0:  */
Chris@0: .toolbar-icon-system-admin-content:before {
Chris@0:   background-image: url(../../../misc/icons/787878/file.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-content:active:before,
Chris@0: .toolbar-icon-system-admin-content.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/file.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-structure:before {
Chris@0:   background-image: url(../../../misc/icons/787878/orgchart.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-structure:active:before,
Chris@0: .toolbar-icon-system-admin-structure.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/orgchart.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-themes-page:before {
Chris@0:   background-image: url(../../../misc/icons/787878/paintbrush.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-themes-page:active:before,
Chris@0: .toolbar-icon-system-themes-page.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/paintbrush.svg);
Chris@0: }
Chris@0: .toolbar-icon-entity-user-collection:before {
Chris@0:   background-image: url(../../../misc/icons/787878/people.svg);
Chris@0: }
Chris@0: .toolbar-icon-entity-user-collection:active:before,
Chris@0: .toolbar-icon-entity-user-collection.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/people.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-modules-list:before {
Chris@0:   background-image: url(../../../misc/icons/787878/puzzlepiece.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-modules-list:active:before,
Chris@0: .toolbar-icon-system-modules-list.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/puzzlepiece.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-config:before {
Chris@0:   background-image: url(../../../misc/icons/787878/wrench.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-config:active:before,
Chris@0: .toolbar-icon-system-admin-config.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/wrench.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-reports:before {
Chris@0:   background-image: url(../../../misc/icons/787878/barchart.svg);
Chris@0: }
Chris@0: .toolbar-icon-system-admin-reports:active:before,
Chris@0: .toolbar-icon-system-admin-reports.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/barchart.svg);
Chris@0: }
Chris@0: .toolbar-icon-help-main:before {
Chris@0:   background-image: url(../../../misc/icons/787878/questionmark-disc.svg);
Chris@0: }
Chris@0: .toolbar-icon-help-main:active:before,
Chris@0: .toolbar-icon-help-main.is-active:before {
Chris@0:   background-image: url(../../../misc/icons/000000/questionmark-disc.svg);
Chris@0: }
Chris@0: 
Chris@0: @media only screen and (min-width: 16.5em) {
Chris@0:   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
Chris@18:     width: 4em;
Chris@18:     margin-right: 0;
Chris@0:     margin-left: 0;
Chris@18:     padding-right: 0;
Chris@0:     padding-left: 0;
Chris@0:     text-indent: -9999px;
Chris@0:   }
Chris@0:   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@0:     left: 0; /* LTR */
Chris@0:     width: 100%;
Chris@18:     background-size: 42% auto;
Chris@0:   }
Chris@0:   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@0:     background-size: auto auto;
Chris@0:   }
Chris@0:   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@18:     right: 0;
Chris@0:     left: auto;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: @media only screen and (min-width: 36em) {
Chris@0:   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
Chris@18:     width: auto;
Chris@18:     padding-right: 1.3333em; /* LTR */
Chris@18:     padding-left: 2.75em; /* LTR */
Chris@18:     text-indent: 0;
Chris@0:     background-position: left center; /* LTR */
Chris@0:   }
Chris@0:   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
Chris@18:     padding-right: 2.75em;
Chris@18:     padding-left: 1.3333em;
Chris@0:     background-position: right center;
Chris@0:   }
Chris@0:   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@0:     left: 0.6667em; /* LTR */
Chris@0:     width: 20px;
Chris@18:     background-size: 100% auto;
Chris@0:   }
Chris@0:   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@0:     background-size: auto auto;
Chris@0:   }
Chris@0:   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
Chris@18:     right: 0.6667em;
Chris@0:     left: 0;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  *  Accessibility/focus
Chris@0:  */
Chris@0: .toolbar-tab a:focus {
Chris@18:   text-decoration: underline;
Chris@0:   outline: none;
Chris@0: }
Chris@0: .toolbar-lining button:focus {
Chris@0:   outline: none;
Chris@0: }
Chris@0: .toolbar-tray-horizontal a:focus,
Chris@0: .toolbar-box a:focus {
Chris@0:   outline: none;
Chris@0:   background-color: #f5f5f5;
Chris@0: }
Chris@0: .toolbar-box a:hover:focus {
Chris@0:   text-decoration: underline;
Chris@0: }
Chris@0: .toolbar .toolbar-icon.toolbar-handle:focus {
Chris@0:   outline: none;
Chris@0:   background-color: #f5f5f5;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Handle.
Chris@0:  */
Chris@0: .toolbar .toolbar-icon.toolbar-handle {
Chris@0:   width: 4em;
Chris@0:   text-indent: -9999px;
Chris@0: }
Chris@0: .toolbar .toolbar-icon.toolbar-handle:before {
Chris@0:   left: 1.6667em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
Chris@18:   right: 1.6667em;
Chris@0:   left: auto;
Chris@0: }
Chris@0: .toolbar .toolbar-icon.toolbar-handle:before {
Chris@0:   background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);
Chris@0: }
Chris@0: .toolbar .toolbar-icon.toolbar-handle.open:before {
Chris@0:   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
Chris@0: }
Chris@0: .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
Chris@0:   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
Chris@0:   background-size: 75%;
Chris@0: }
Chris@0: .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
Chris@0:   background-image: url(../../../misc/icons/787878/twistie-up.svg);
Chris@0:   background-size: 75%;
Chris@0: }
Chris@0: .toolbar .toolbar-icon-escape-admin:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);
Chris@0: }
Chris@0: /**
Chris@0:  * Orientation toggle.
Chris@0:  */
Chris@0: .toolbar .toolbar-toggle-orientation button {
Chris@18:   width: 39px;
Chris@0:   height: 39px;
Chris@0:   padding: 0;
Chris@0:   text-indent: -999em;
Chris@0: }
Chris@0: .toolbar .toolbar-toggle-orientation button:before {
Chris@18:   right: 0;
Chris@0:   left: 0;
Chris@0:   margin: 0 auto;
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
Chris@0:   padding: 0;
Chris@0: }
Chris@0: /**
Chris@0:  * In order to support a hover effect on the SVG images, while also supporting
Chris@0:  * RTL text direction and no SVG support, this little icon requires some very
Chris@0:  * specific targeting, setting and unsetting.
Chris@0:  */
Chris@0: .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */
Chris@0: }
Chris@0: .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
Chris@0: .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
Chris@0:   background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/push-right.svg);
Chris@0: }
Chris@0: [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
Chris@0: [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
Chris@0:   background-image: url(../../../misc/icons/787878/push-right.svg);
Chris@0: }
Chris@0: .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
Chris@0:   background-image: url(../../../misc/icons/bebebe/push-up.svg);
Chris@0: }
Chris@0: .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
Chris@0: .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
Chris@0:   background-image: url(../../../misc/icons/787878/push-up.svg);
Chris@0: }