toolbar.icons.theme.pcss.css

Same filename in this branch
  1. 11.x core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
Same filename in other branches
  1. 9 core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
  2. 10 core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
  3. 10 core/modules/toolbar/css/toolbar.icons.theme.pcss.css

Styling for toolbar module icons.

File

core/modules/toolbar/css/toolbar.icons.theme.pcss.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. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {

  71.   filter: invert(100%);

  72. }

  73. 

  74. /**

  75.  * Top level icons.

  76.  */

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

  78.   background-image: url(../../../misc/icons/bebebe/hamburger.svg);

  79. }

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

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

  82.   background-image: url(../../../misc/icons/ffffff/hamburger.svg);

  83. }

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

  85.   background-image: url(../../../misc/icons/bebebe/questionmark-disc.svg);

  86. }

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

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

  89.   background-image: url(../../../misc/icons/ffffff/questionmark-disc.svg);

  90. }

  91. 

  92. /**

  93.  * Main menu icons.

  94.  */

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

  96.   background-image: url(../../../misc/icons/787878/file.svg);

  97. }

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

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

  100.   background-image: url(../../../misc/icons/000000/file.svg);

  101. }

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

  103.   background-image: url(../../../misc/icons/787878/orgchart.svg);

  104. }

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

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

  107.   background-image: url(../../../misc/icons/000000/orgchart.svg);

  108. }

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

  110.   background-image: url(../../../misc/icons/787878/paintbrush.svg);

  111. }

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

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

  114.   background-image: url(../../../misc/icons/000000/paintbrush.svg);

  115. }

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

  117.   background-image: url(../../../misc/icons/787878/people.svg);

  118. }

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

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

  121.   background-image: url(../../../misc/icons/000000/people.svg);

  122. }

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

  124.   background-image: url(../../../misc/icons/787878/puzzlepiece.svg);

  125. }

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

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

  128.   background-image: url(../../../misc/icons/000000/puzzlepiece.svg);

  129. }

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

  131.   background-image: url(../../../misc/icons/787878/wrench.svg);

  132. }

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

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

  135.   background-image: url(../../../misc/icons/000000/wrench.svg);

  136. }

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

  138.   background-image: url(../../../misc/icons/787878/barchart.svg);

  139. }

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

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

  142.   background-image: url(../../../misc/icons/000000/barchart.svg);

  143. }

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

  145.   background-image: url(../../../misc/icons/787878/questionmark-disc.svg);

  146. }

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

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

  149.   background-image: url(../../../misc/icons/000000/questionmark-disc.svg);

  150. }

  151. 

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

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

  154.     width: 4em;

  155.     margin-right: 0;

  156.     margin-left: 0;

  157.     padding-right: 0;

  158.     padding-left: 0;

  159.     text-indent: -9999px;

  160.   }

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

  162.     left: 0; /* LTR */

  163.     width: 100%;

  164.     background-size: 42% auto;

  165.   }

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

  167.     background-size: auto auto;

  168.   }

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

  170.     right: 0;

  171.     left: auto;

  172.   }

  173. }

  174. 

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

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

  177.     width: auto;

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

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

  180.     text-indent: 0;

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

  182.   }

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

  184.     padding-right: 2.75em;

  185.     padding-left: 1.3333em;

  186.     background-position: right center;

  187.   }

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

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

  190.     width: 20px;

  191.     background-size: 100% auto;

  192.   }

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

  194.     background-size: auto auto;

  195.   }

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

  197.     right: 0.6667em;

  198.     left: 0;

  199.   }

  200. }

  201. 

  202. /**

  203.  *  Accessibility/focus

  204.  */

  205. .toolbar-tab a:focus {

  206.   text-decoration: underline;

  207.   outline: none;

  208. }

  209. .toolbar-lining button:focus {

  210.   outline: none;

  211. }

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

  213. .toolbar-box a:focus {

  214.   outline: none;

  215.   background-color: #f5f5f5;

  216. }

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

  218.   text-decoration: underline;

  219. }

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

  221.   outline: none;

  222.   background-color: #f5f5f5;

  223. }

  224. 

  225. /**

  226.  * Handle.

  227.  */

  228. .toolbar .toolbar-icon.toolbar-handle {

  229.   width: 4em;

  230.   text-indent: -9999px;

  231. }

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

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

  234. }

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

  236.   right: 1.6667em;

  237.   left: auto;

  238. }

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

  240.   background-image: url(../../../misc/icons/5181c6/chevron-disc-down.svg);

  241. }

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

  243.   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);

  244. }

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

  246.   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);

  247.   background-size: 75%;

  248. }

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

  250.   background-image: url(../../../misc/icons/787878/twistie-up.svg);

  251.   background-size: 75%;

  252. }

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

  254.   background-image: url(../../../misc/icons/bebebe/chevron-disc-left.svg);

  255. }

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

  257.   background-image: url(../../../misc/icons/bebebe/chevron-disc-right.svg);

  258. }

  259. /**

  260.  * Orientation toggle.

  261.  */

  262. .toolbar .toolbar-toggle-orientation button {

  263.   width: 39px;

  264.   height: 39px;

  265.   padding: 0;

  266.   text-indent: -999em;

  267. }

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

  269.   right: 0;

  270.   left: 0;

  271.   margin: 0 auto;

  272. }

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

  274.   padding: 0;

  275. }

  276. /**

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

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

  279.  * specific targeting, setting and unsetting.

  280.  */

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

  282.   background-image: url(../../../misc/icons/bebebe/push-left.svg); /* LTR */

  283. }

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

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

  286.   background-image: url(../../../misc/icons/787878/push-left.svg); /* LTR */

  287. }

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

  289.   background-image: url(../../../misc/icons/bebebe/push-right.svg);

  290. }

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

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

  293.   background-image: url(../../../misc/icons/787878/push-right.svg);

  294. }

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

  296.   background-image: url(../../../misc/icons/bebebe/push-up.svg);

  297. }

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

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

  300.   background-image: url(../../../misc/icons/787878/push-up.svg);

  301. }

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