12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- /**
- * admin_menu_icons
- */
- // Import global variables.
- @import "variables";
- // Most icons are embedded SVG. Icons are embedded using Grunticon. We are using
- // the original SVG icons from Drupal core, however the width and height
- // attribute have been replaced with a viewBox attribute so we can scale them
- // properly with CSS. Embedded SVG has the advantage of being styled with CSS,
- // and by using Grunticon JS loading we negate most of the bloat and overhead
- // associated with embedding SVG files. For the buttons (orientation toggles &
- // menu click handles), and for sub-menu indicators we use a custom font icon
- // that is tiny and only includes four icons. We rotate and color these in CSS
- // as required.
- #toolbar-administration {
- .toolbar-icon {
- padding: 0 .25em 0 0;
- }
- // Top level icons.
- .toolbar-bar {
- .toolbar-tab {
- .toolbar-tab__items-wrapper {
- .toolbar-icon {
- fill: $tab-color ;
- top: 0.1em;
- }
- .toolbar-icon-menu {
- width: 0.875em;
- }
- a,
- button {
- &:hover,
- &:active,
- &.is-active {
- .toolbar-icon {
- fill: $tab-active-color;
- }
- }
- }
- }
- }
- }
- @media only screen and (max-width: 24em) {
- // Toolbar-themes module cannot hide the text, so instead we remove the
- // icons and other redundant tabs in narrow screens.
- .toolbar-bar .home-toolbar-tab,
- .toolbar-bar .tour-toolbar-tab,
- .toolbar-bar .toolbar-tab__items-wrapper .toolbar-icon {
- display: none;
- }
- }
- // Main menu icons.
- .toolbar-menu {
- a {
- fill: $tray-color;
- &:hover,
- &:focus,
- &:active,
- &.is-active {
- fill: $tray-active;
- }
- &.is-active[href="/"] {
- fill: $tray-color;
- }
- &:hover,
- &:focus,
- &:active {
- &[href="/"] {
- fill: $tray-active;
- }
- }
- }
- }
- }
|