toolbar.icons.css

toolbar.icons.css

File

drupal/core/modules/toolbar/css/toolbar.icons.css
View source
  1. /**
  2. * @file toolbar.icons.css
  3. */
  4. .toolbar .icon {
  5. padding-left: 2.75em; /* LTR */
  6. position: relative;
  7. }
  8. .toolbar .icon:before {
  9. background-attachment: scroll;
  10. background-color: transparent;
  11. background-position: center center;
  12. background-repeat: no-repeat;
  13. content: '';
  14. display: block;
  15. height: 100%;
  16. left: 0.6667em; /* LTR */
  17. position: absolute;
  18. top: 0;
  19. width: 20px;
  20. }
  21. .toolbar button.icon {
  22. background-color: transparent;
  23. border: 0;
  24. font-size: 1em;
  25. }
  26. .toolbar .menu ul .icon {
  27. padding-left: 1.3333em; /* LTR */
  28. }
  29. .toolbar .menu ul a.icon:before {
  30. display: none;
  31. }
  32. .toolbar .vertical .menu ul {
  33. margin-left: 1.5em; /* LTR */
  34. }
  35. .toolbar .vertical .menu ul ul {
  36. margin-left: 0.75em; /* LTR */
  37. }
  38. /**
  39. * Top level icons
  40. */
  41. .icon-home:before {
  42. background-image: url("../images/icon-home.png");
  43. }
  44. .icon-home:active:before,
  45. .icon-home.active:before {
  46. background-image: url("../images/icon-home-active.png");
  47. }
  48. .icon-menu:before {
  49. background-image: url("../images/icon-menu.png");
  50. }
  51. .icon-menu:active:before,
  52. .icon-menu.active:before {
  53. background-image: url("../images/icon-menu-active.png");
  54. }
  55. /**
  56. * Main menu icons.
  57. */
  58. .icon-content:before {
  59. background-image: url("../images/icon-content.png");
  60. }
  61. .icon-content:active:before,
  62. .icon-content.active:before {
  63. background-image: url("../images/icon-content-active.png");
  64. }
  65. .icon-structure:before {
  66. background-image: url("../images/icon-structure.png");
  67. }
  68. .icon-structure:active:before,
  69. .icon-structure.active:before {
  70. background-image: url("../images/icon-structure-active.png");
  71. }
  72. .icon-appearance:before {
  73. background-image: url("../images/icon-appearance.png");
  74. }
  75. .icon-appearance:active:before,
  76. .icon-appearance.active:before {
  77. background-image: url("../images/icon-appearance-active.png");
  78. }
  79. .icon-people:before {
  80. background-image: url("../images/icon-people.png");
  81. }
  82. .icon-people:active:before,
  83. .icon-people.active:before {
  84. background-image: url("../images/icon-people-active.png");
  85. }
  86. .icon-extend:before {
  87. background-image: url("../images/icon-extend.png");
  88. }
  89. .icon-extend:active:before,
  90. .icon-extend.active:before {
  91. background-image: url("../images/icon-extend-active.png");
  92. }
  93. .icon-configuration:before {
  94. background-image: url("../images/icon-configuration.png");
  95. }
  96. .icon-configuration:active:before,
  97. .icon-configuration.active:before {
  98. background-image: url("../images/icon-configuration-active.png");
  99. }
  100. .icon-reports:before {
  101. background-image: url("../images/icon-reports.png");
  102. }
  103. .icon-reports:active:before,
  104. .icon-reports.active:before {
  105. background-image: url("../images/icon-reports-active.png");
  106. }
  107. .icon-help:before {
  108. background-image: url("../images/icon-help.png");
  109. }
  110. .icon-help:active:before,
  111. .icon-help.active:before {
  112. background-image: url("../images/icon-help-active.png");
  113. }
  114. @media only screen and (min-width: 16.5em) {
  115. .toolbar .bar .icon {
  116. margin-left: 0;
  117. margin-right: 0;
  118. padding-left: 0;
  119. padding-right: 0;
  120. text-indent: -9999px;
  121. width: 4em;
  122. }
  123. .toolbar .bar .icon:before {
  124. left: 0; /* LTR */
  125. width: 100%;
  126. }
  127. }
  128. @media only screen and (min-width: 36em) {
  129. .toolbar .bar .icon {
  130. background-position: left center; /* LTR */
  131. padding-left: 2.75em; /* LTR */
  132. padding-right: 1.3333em; /* LTR */
  133. text-indent: 0;
  134. width: auto;
  135. }
  136. .toolbar .bar .icon:before {
  137. left: 0.6667em; /* LTR */
  138. width: 20px;
  139. }
  140. }