toolbar.icons.theme.css

Same filename in this branch
  1. 9 core/themes/claro/css/theme/toolbar.icons.theme.css
  2. 9 core/themes/stable/css/toolbar/toolbar.icons.theme.css
  3. 9 core/modules/toolbar/css/toolbar.icons.theme.css
Same filename in other branches
  1. 8.9.x core/themes/stable/css/toolbar/toolbar.icons.theme.css
  2. 8.9.x core/modules/toolbar/css/toolbar.icons.theme.css
  3. 10 core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  4. 10 core/themes/claro/css/theme/toolbar.icons.theme.css
  5. 10 core/modules/toolbar/css/toolbar.icons.theme.css
  6. 11.x core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  7. 11.x core/themes/claro/css/theme/toolbar.icons.theme.css
  8. 11.x core/modules/toolbar/css/toolbar.icons.theme.css

Styling for toolbar module icons.

File

core/themes/stable9/css/toolbar/toolbar.icons.theme.css

View source
  1. /**
  2. * @file
  3. * Styling for toolbar module icons.
  4. */
  5. .toolbar .toolbar-icon {
  6. position: relative;
  7. padding-left: 2.75em; /* LTR */
  8. }
  9. [dir="rtl"] .toolbar .toolbar-icon {
  10. padding-right: 2.75em;
  11. padding-left: 1.3333em;
  12. }
  13. .toolbar .toolbar-icon:before {
  14. position: absolute;
  15. top: 0;
  16. left: 0.6667em; /* LTR */
  17. display: block;
  18. width: 20px;
  19. height: 100%;
  20. content: "";
  21. background-color: transparent;
  22. background-repeat: no-repeat;
  23. background-attachment: scroll;
  24. background-position: center center;
  25. background-size: 100% auto;
  26. }
  27. [dir="rtl"] .toolbar .toolbar-icon:before {
  28. right: 0.6667em;
  29. left: auto;
  30. }
  31. .toolbar button.toolbar-icon {
  32. border: 0;
  33. background-color: transparent;
  34. font-size: 1em;
  35. }
  36. .toolbar .toolbar-menu ul .toolbar-icon {
  37. padding-left: 1.3333em; /* LTR */
  38. }
  39. [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
  40. padding-right: 1.3333em;
  41. padding-left: 0;
  42. }
  43. .toolbar .toolbar-menu ul a.toolbar-icon:before {
  44. display: none;
  45. }
  46. .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
  47. padding-left: 2.75em; /* LTR */
  48. }
  49. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
  50. padding-right: 2.75em;
  51. padding-left: 0;
  52. }
  53. .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
  54. padding-left: 3.75em; /* LTR */
  55. }
  56. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
  57. padding-right: 3.75em;
  58. padding-left: 0;
  59. }
  60. .toolbar .toolbar-tray-vertical .toolbar-menu a {
  61. padding-right: 4em; /* LTR */
  62. padding-left: 2.75em; /* LTR */
  63. }
  64. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
  65. padding-right: 2.75em;
  66. padding-left: 4em;
  67. }
  68. /**
  69. * Top level icons.
  70. */
  71. .toolbar-bar .toolbar-icon-menu:before {
  72. background-image: url(../../../../misc/icons/bebebe/hamburger.svg);
  73. }
  74. .toolbar-bar .toolbar-icon-menu:active:before,
  75. .toolbar-bar .toolbar-icon-menu.is-active:before {
  76. background-image: url(../../../../misc/icons/ffffff/hamburger.svg);
  77. }
  78. .toolbar-bar .toolbar-icon-help:before {
  79. background-image: url(../../../../misc/icons/bebebe/questionmark-disc.svg);
  80. }
  81. .toolbar-bar .toolbar-icon-help:active:before,
  82. .toolbar-bar .toolbar-icon-help.is-active:before {
  83. background-image: url(../../../../misc/icons/ffffff/questionmark-disc.svg);
  84. }
  85. /**
  86. * Main menu icons.
  87. */
  88. .toolbar-icon-system-admin-content:before {
  89. background-image: url(../../../../misc/icons/787878/file.svg);
  90. }
  91. .toolbar-icon-system-admin-content:active:before,
  92. .toolbar-icon-system-admin-content.is-active:before {
  93. background-image: url(../../../../misc/icons/000000/file.svg);
  94. }
  95. .toolbar-icon-system-admin-structure:before {
  96. background-image: url(../../../../misc/icons/787878/orgchart.svg);
  97. }
  98. .toolbar-icon-system-admin-structure:active:before,
  99. .toolbar-icon-system-admin-structure.is-active:before {
  100. background-image: url(../../../../misc/icons/000000/orgchart.svg);
  101. }
  102. .toolbar-icon-system-themes-page:before {
  103. background-image: url(../../../../misc/icons/787878/paintbrush.svg);
  104. }
  105. .toolbar-icon-system-themes-page:active:before,
  106. .toolbar-icon-system-themes-page.is-active:before {
  107. background-image: url(../../../../misc/icons/000000/paintbrush.svg);
  108. }
  109. .toolbar-icon-entity-user-collection:before {
  110. background-image: url(../../../../misc/icons/787878/people.svg);
  111. }
  112. .toolbar-icon-entity-user-collection:active:before,
  113. .toolbar-icon-entity-user-collection.is-active:before {
  114. background-image: url(../../../../misc/icons/000000/people.svg);
  115. }
  116. .toolbar-icon-system-modules-list:before {
  117. background-image: url(../../../../misc/icons/787878/puzzlepiece.svg);
  118. }
  119. .toolbar-icon-system-modules-list:active:before,
  120. .toolbar-icon-system-modules-list.is-active:before {
  121. background-image: url(../../../../misc/icons/000000/puzzlepiece.svg);
  122. }
  123. .toolbar-icon-system-admin-config:before {
  124. background-image: url(../../../../misc/icons/787878/wrench.svg);
  125. }
  126. .toolbar-icon-system-admin-config:active:before,
  127. .toolbar-icon-system-admin-config.is-active:before {
  128. background-image: url(../../../../misc/icons/000000/wrench.svg);
  129. }
  130. .toolbar-icon-system-admin-reports:before {
  131. background-image: url(../../../../misc/icons/787878/barchart.svg);
  132. }
  133. .toolbar-icon-system-admin-reports:active:before,
  134. .toolbar-icon-system-admin-reports.is-active:before {
  135. background-image: url(../../../../misc/icons/000000/barchart.svg);
  136. }
  137. .toolbar-icon-help-main:before {
  138. background-image: url(../../../../misc/icons/787878/questionmark-disc.svg);
  139. }
  140. .toolbar-icon-help-main:active:before,
  141. .toolbar-icon-help-main.is-active:before {
  142. background-image: url(../../../../misc/icons/000000/questionmark-disc.svg);
  143. }
  144. @media only screen and (min-width: 16.5em) {
  145. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
  146. width: 4em;
  147. margin-right: 0;
  148. margin-left: 0;
  149. padding-right: 0;
  150. padding-left: 0;
  151. text-indent: -9999px;
  152. }
  153. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  154. left: 0; /* LTR */
  155. width: 100%;
  156. background-size: 42% auto;
  157. }
  158. .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  159. background-size: auto auto;
  160. }
  161. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  162. right: 0;
  163. left: auto;
  164. }
  165. }
  166. @media only screen and (min-width: 36em) {
  167. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
  168. width: auto;
  169. padding-right: 1.3333em; /* LTR */
  170. padding-left: 2.75em; /* LTR */
  171. text-indent: 0;
  172. background-position: left center; /* LTR */
  173. }
  174. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
  175. padding-right: 2.75em;
  176. padding-left: 1.3333em;
  177. background-position: right center;
  178. }
  179. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  180. left: 0.6667em; /* LTR */
  181. width: 20px;
  182. background-size: 100% auto;
  183. }
  184. .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  185. background-size: auto auto;
  186. }
  187. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
  188. right: 0.6667em;
  189. left: 0;
  190. }
  191. }
  192. /**
  193. * Accessibility/focus
  194. */
  195. .toolbar-tab a:focus {
  196. text-decoration: underline;
  197. outline: none;
  198. }
  199. .toolbar-lining button:focus {
  200. outline: none;
  201. }
  202. .toolbar-tray-horizontal a:focus,
  203. .toolbar-box a:focus {
  204. outline: none;
  205. background-color: #f5f5f5;
  206. }
  207. .toolbar-box a:hover:focus {
  208. text-decoration: underline;
  209. }
  210. .toolbar .toolbar-icon.toolbar-handle:focus {
  211. outline: none;
  212. background-color: #f5f5f5;
  213. }
  214. /**
  215. * Handle.
  216. */
  217. .toolbar .toolbar-icon.toolbar-handle {
  218. width: 4em;
  219. text-indent: -9999px;
  220. }
  221. .toolbar .toolbar-icon.toolbar-handle:before {
  222. left: 1.6667em; /* LTR */
  223. }
  224. [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
  225. right: 1.6667em;
  226. left: auto;
  227. }
  228. .toolbar .toolbar-icon.toolbar-handle:before {
  229. background-image: url(../../../../misc/icons/5181c6/chevron-disc-down.svg);
  230. }
  231. .toolbar .toolbar-icon.toolbar-handle.open:before {
  232. background-image: url(../../../../misc/icons/787878/chevron-disc-up.svg);
  233. }
  234. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
  235. background-image: url(../../../../misc/icons/5181c6/twistie-down.svg);
  236. background-size: 75%;
  237. }
  238. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
  239. background-image: url(../../../../misc/icons/787878/twistie-up.svg);
  240. background-size: 75%;
  241. }
  242. .toolbar .toolbar-icon-escape-admin:before {
  243. background-image: url(../../../../misc/icons/bebebe/chevron-disc-left.svg);
  244. }
  245. [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
  246. background-image: url(../../../../misc/icons/bebebe/chevron-disc-right.svg);
  247. }
  248. /**
  249. * Orientation toggle.
  250. */
  251. .toolbar .toolbar-toggle-orientation button {
  252. width: 39px;
  253. height: 39px;
  254. padding: 0;
  255. text-indent: -999em;
  256. }
  257. .toolbar .toolbar-toggle-orientation button:before {
  258. right: 0;
  259. left: 0;
  260. margin: 0 auto;
  261. }
  262. [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
  263. padding: 0;
  264. }
  265. /**
  266. * In order to support a hover effect on the SVG images, while also supporting
  267. * RTL text direction and no SVG support, this little icon requires some very
  268. * specific targeting, setting and unsetting.
  269. */
  270. .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
  271. background-image: url(../../../../misc/icons/bebebe/push-left.svg); /* LTR */
  272. }
  273. .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
  274. .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
  275. background-image: url(../../../../misc/icons/787878/push-left.svg); /* LTR */
  276. }
  277. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
  278. background-image: url(../../../../misc/icons/bebebe/push-right.svg);
  279. }
  280. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
  281. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
  282. background-image: url(../../../../misc/icons/787878/push-right.svg);
  283. }
  284. .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
  285. background-image: url(../../../../misc/icons/bebebe/push-up.svg);
  286. }
  287. .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
  288. .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
  289. background-image: url(../../../../misc/icons/787878/push-up.svg);
  290. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.