toolbar.icons.theme.css

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

Styling for toolbar module icons.

File

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

View source 
  1. /**

  2.  * @file

  3.  * Styling for toolbar module icons.

  4.  */

  5. 

  6. .toolbar .toolbar-icon {

  7.   position: relative;

  8.   padding-left: 2.75em; /* LTR */

  9. }

  10. [dir="rtl"] .toolbar .toolbar-icon {

  11.   padding-right: 2.75em;

  12.   padding-left: 1.3333em;

  13. }

  14. .toolbar .toolbar-icon:before {

  15.   position: absolute;

  16.   top: 0;

  17.   left: 0.6667em; /* LTR */

  18.   display: block;

  19.   width: 20px;

  20.   height: 100%;

  21.   content: "";

  22.   background-color: transparent;

  23.   background-repeat: no-repeat;

  24.   background-attachment: scroll;

  25.   background-position: center center;

  26.   background-size: 100% auto;

  27. }

  28. [dir="rtl"] .toolbar .toolbar-icon:before {

  29.   right: 0.6667em;

  30.   left: auto;

  31. }

  32. .toolbar button.toolbar-icon {

  33.   border: 0;

  34.   background-color: transparent;

  35.   font-size: 1em;

  36. }

  37. .toolbar .toolbar-menu ul .toolbar-icon {

  38.   padding-left: 1.3333em; /* LTR */

  39. }

  40. [dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {

  41.   padding-right: 1.3333em;

  42.   padding-left: 0;

  43. }

  44. .toolbar .toolbar-menu ul a.toolbar-icon:before {

  45.   display: none;

  46. }

  47. .toolbar .toolbar-tray-vertical .toolbar-menu ul a {

  48.   padding-left: 2.75em; /* LTR */

  49. }

  50. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {

  51.   padding-right: 2.75em;

  52.   padding-left: 0;

  53. }

  54. .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {

  55.   padding-left: 3.75em; /* LTR */

  56. }

  57. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {

  58.   padding-right: 3.75em;

  59.   padding-left: 0;

  60. }

  61. 

  62. .toolbar .toolbar-tray-vertical .toolbar-menu a {

  63.   padding-right: 4em; /* LTR */

  64.   padding-left: 2.75em; /* LTR */

  65. }

  66. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {

  67.   padding-right: 2.75em;

  68.   padding-left: 4em;

  69. }

  70. 

  71. /**

  72.  * Top level icons.

  73.  */

  74. .toolbar-bar .toolbar-icon-menu:before {

  75.   background-image: url(../../images/core/icons/bebebe/hamburger.svg);

  76. }

  77. .toolbar-bar .toolbar-icon-menu:active:before,

  78. .toolbar-bar .toolbar-icon-menu.is-active:before {

  79.   background-image: url(../../images/core/icons/ffffff/hamburger.svg);

  80. }

  81. .toolbar-bar .toolbar-icon-help:before {

  82.   background-image: url(../../images/core/icons/bebebe/questionmark-disc.svg);

  83. }

  84. .toolbar-bar .toolbar-icon-help:active:before,

  85. .toolbar-bar .toolbar-icon-help.is-active:before {

  86.   background-image: url(../../images/core/icons/ffffff/questionmark-disc.svg);

  87. }

  88. 

  89. /**

  90.  * Main menu icons.

  91.  */

  92. .toolbar-icon-system-admin-content:before {

  93.   background-image: url(../../images/core/icons/787878/file.svg);

  94. }

  95. .toolbar-icon-system-admin-content:active:before,

  96. .toolbar-icon-system-admin-content.is-active:before {

  97.   background-image: url(../../images/core/icons/000000/file.svg);

  98. }

  99. .toolbar-icon-system-admin-structure:before {

  100.   background-image: url(../../images/core/icons/787878/orgchart.svg);

  101. }

  102. .toolbar-icon-system-admin-structure:active:before,

  103. .toolbar-icon-system-admin-structure.is-active:before {

  104.   background-image: url(../../images/core/icons/000000/orgchart.svg);

  105. }

  106. .toolbar-icon-system-themes-page:before {

  107.   background-image: url(../../images/core/icons/787878/paintbrush.svg);

  108. }

  109. .toolbar-icon-system-themes-page:active:before,

  110. .toolbar-icon-system-themes-page.is-active:before {

  111.   background-image: url(../../images/core/icons/000000/paintbrush.svg);

  112. }

  113. .toolbar-icon-entity-user-collection:before {

  114.   background-image: url(../../images/core/icons/787878/people.svg);

  115. }

  116. .toolbar-icon-entity-user-collection:active:before,

  117. .toolbar-icon-entity-user-collection.is-active:before {

  118.   background-image: url(../../images/core/icons/000000/people.svg);

  119. }

  120. .toolbar-icon-system-modules-list:before {

  121.   background-image: url(../../images/core/icons/787878/puzzlepiece.svg);

  122. }

  123. .toolbar-icon-system-modules-list:active:before,

  124. .toolbar-icon-system-modules-list.is-active:before {

  125.   background-image: url(../../images/core/icons/000000/puzzlepiece.svg);

  126. }

  127. .toolbar-icon-system-admin-config:before {

  128.   background-image: url(../../images/core/icons/787878/wrench.svg);

  129. }

  130. .toolbar-icon-system-admin-config:active:before,

  131. .toolbar-icon-system-admin-config.is-active:before {

  132.   background-image: url(../../images/core/icons/000000/wrench.svg);

  133. }

  134. .toolbar-icon-system-admin-reports:before {

  135.   background-image: url(../../images/core/icons/787878/barchart.svg);

  136. }

  137. .toolbar-icon-system-admin-reports:active:before,

  138. .toolbar-icon-system-admin-reports.is-active:before {

  139.   background-image: url(../../images/core/icons/000000/barchart.svg);

  140. }

  141. .toolbar-icon-help-main:before {

  142.   background-image: url(../../images/core/icons/787878/questionmark-disc.svg);

  143. }

  144. .toolbar-icon-help-main:active:before,

  145. .toolbar-icon-help-main.is-active:before {

  146.   background-image: url(../../images/core/icons/000000/questionmark-disc.svg);

  147. }

  148. 

  149. @media only screen and (min-width: 16.5em) {

  150.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {

  151.     width: 4em;

  152.     margin-right: 0;

  153.     margin-left: 0;

  154.     padding-right: 0;

  155.     padding-left: 0;

  156.     text-indent: -9999px;

  157.   }

  158.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  159.     left: 0; /* LTR */

  160.     width: 100%;

  161.     background-size: 42% auto;

  162.   }

  163.   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  164.     background-size: auto auto;

  165.   }

  166.   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  167.     right: 0;

  168.     left: auto;

  169.   }

  170. }

  171. 

  172. @media only screen and (min-width: 36em) {

  173.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {

  174.     width: auto;

  175.     padding-right: 1.3333em; /* LTR */

  176.     padding-left: 2.75em; /* LTR */

  177.     text-indent: 0;

  178.     background-position: left center; /* LTR */

  179.   }

  180.   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {

  181.     padding-right: 2.75em;

  182.     padding-left: 1.3333em;

  183.     background-position: right center;

  184.   }

  185.   .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  186.     left: 0.6667em; /* LTR */

  187.     width: 20px;

  188.     background-size: 100% auto;

  189.   }

  190.   .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  191.     background-size: auto auto;

  192.   }

  193.   [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {

  194.     right: 0.6667em;

  195.     left: 0;

  196.   }

  197. }

  198. 

  199. /**

  200.  *  Accessibility/focus

  201.  */

  202. .toolbar-tab a:focus {

  203.   text-decoration: underline;

  204.   outline: none;

  205. }

  206. .toolbar-lining button:focus {

  207.   outline: none;

  208. }

  209. .toolbar-tray-horizontal a:focus,

  210. .toolbar-box a:focus {

  211.   outline: none;

  212.   background-color: #f5f5f5;

  213. }

  214. .toolbar-box a:hover:focus {

  215.   text-decoration: underline;

  216. }

  217. .toolbar .toolbar-icon.toolbar-handle:focus {

  218.   outline: none;

  219.   background-color: #f5f5f5;

  220. }

  221. 

  222. /**

  223.  * Handle.

  224.  */

  225. .toolbar .toolbar-icon.toolbar-handle {

  226.   width: 4em;

  227.   text-indent: -9999px;

  228. }

  229. .toolbar .toolbar-icon.toolbar-handle:before {

  230.   left: 1.6667em; /* LTR */

  231. }

  232. [dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {

  233.   right: 1.6667em;

  234.   left: auto;

  235. }

  236. .toolbar .toolbar-icon.toolbar-handle:before {

  237.   background-image: url(../../images/core/icons/5181c6/chevron-disc-down.svg);

  238. }

  239. .toolbar .toolbar-icon.toolbar-handle.open:before {

  240.   background-image: url(../../images/core/icons/787878/chevron-disc-up.svg);

  241. }

  242. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {

  243.   background-image: url(../../images/core/icons/5181c6/twistie-down.svg);

  244.   background-size: 75%;

  245. }

  246. .toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {

  247.   background-image: url(../../images/core/icons/787878/twistie-up.svg);

  248.   background-size: 75%;

  249. }

  250. .toolbar .toolbar-icon-escape-admin:before {

  251.   background-image: url(../../images/core/icons/bebebe/chevron-disc-left.svg);

  252. }

  253. [dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {

  254.   background-image: url(../../images/core/icons/bebebe/chevron-disc-right.svg);

  255. }

  256. /**

  257.  * Orientation toggle.

  258.  */

  259. .toolbar .toolbar-toggle-orientation button {

  260.   width: 39px;

  261.   height: 39px;

  262.   padding: 0;

  263.   text-indent: -999em;

  264. }

  265. .toolbar .toolbar-toggle-orientation button:before {

  266.   right: 0;

  267.   left: 0;

  268.   margin: 0 auto;

  269. }

  270. [dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {

  271.   padding: 0;

  272. }

  273. /**

  274.  * In order to support a hover effect on the SVG images, while also supporting

  275.  * RTL text direction and no SVG support, this little icon requires some very

  276.  * specific targeting, setting and unsetting.

  277.  */

  278. .toolbar .toolbar-toggle-orientation [value="vertical"]:before {

  279.   background-image: url(../../images/core/icons/bebebe/push-left.svg); /* LTR */

  280. }

  281. .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,

  282. .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {

  283.   background-image: url(../../images/core/icons/787878/push-left.svg); /* LTR */

  284. }

  285. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {

  286.   background-image: url(../../images/core/icons/bebebe/push-right.svg);

  287. }

  288. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,

  289. [dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {

  290.   background-image: url(../../images/core/icons/787878/push-right.svg);

  291. }

  292. .toolbar .toolbar-toggle-orientation [value="horizontal"]:before {

  293.   background-image: url(../../images/core/icons/bebebe/push-up.svg);

  294. }

  295. .toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,

  296. .toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {

  297.   background-image: url(../../images/core/icons/787878/push-up.svg);

  298. }

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