admin_menu_icons.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * admin_menu_icons
  3. */
  4. // Import global variables.
  5. @import "variables";
  6. // Most icons are embedded SVG. Icons are embedded using Grunticon. We are using
  7. // the original SVG icons from Drupal core, however the width and height
  8. // attribute have been replaced with a viewBox attribute so we can scale them
  9. // properly with CSS. Embedded SVG has the advantage of being styled with CSS,
  10. // and by using Grunticon JS loading we negate most of the bloat and overhead
  11. // associated with embedding SVG files. For the buttons (orientation toggles &
  12. // menu click handles), and for sub-menu indicators we use a custom font icon
  13. // that is tiny and only includes four icons. We rotate and color these in CSS
  14. // as required.
  15. #toolbar-administration {
  16. .toolbar-icon {
  17. padding: 0 .25em 0 0;
  18. }
  19. // Top level icons.
  20. .toolbar-bar {
  21. .toolbar-tab {
  22. .toolbar-tab__items-wrapper {
  23. .toolbar-icon {
  24. fill: $tab-color ;
  25. top: 0.1em;
  26. }
  27. .toolbar-icon-menu {
  28. width: 0.875em;
  29. }
  30. a,
  31. button {
  32. &:hover,
  33. &:active,
  34. &.is-active {
  35. .toolbar-icon {
  36. fill: $tab-active-color;
  37. }
  38. }
  39. }
  40. }
  41. }
  42. }
  43. @media only screen and (max-width: 24em) {
  44. // Toolbar-themes module cannot hide the text, so instead we remove the
  45. // icons and other redundant tabs in narrow screens.
  46. .toolbar-bar .home-toolbar-tab,
  47. .toolbar-bar .tour-toolbar-tab,
  48. .toolbar-bar .toolbar-tab__items-wrapper .toolbar-icon {
  49. display: none;
  50. }
  51. }
  52. // Main menu icons.
  53. .toolbar-menu {
  54. a {
  55. fill: $tray-color;
  56. &:hover,
  57. &:focus,
  58. &:active,
  59. &.is-active {
  60. fill: $tray-active;
  61. }
  62. &.is-active[href="/"] {
  63. fill: $tray-color;
  64. }
  65. &:hover,
  66. &:focus,
  67. &:active {
  68. &[href="/"] {
  69. fill: $tray-active;
  70. }
  71. }
  72. }
  73. }
  74. }