toolbar.icons.theme.css

Same filename in this branch
  1. main core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  2. main core/themes/claro/css/theme/toolbar.icons.theme.css
  3. main core/themes/admin/css/theme/toolbar.icons.theme.css
  4. main core/themes/default_admin/css/theme/toolbar.icons.theme.css
  5. main core/modules/toolbar/css/claro/theme/toolbar.icons.theme.css
  6. main core/modules/toolbar/css/default_admin/theme/toolbar.icons.theme.css
Same filename and directory in other branches
  1. 10 core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  2. 10 core/themes/claro/css/theme/toolbar.icons.theme.css
  3. 11.x core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  4. 11.x core/themes/claro/css/theme/toolbar.icons.theme.css
  5. 11.x core/modules/toolbar/css/toolbar.icons.theme.css
  6. 10 core/modules/toolbar/css/toolbar.icons.theme.css
  7. 9 core/themes/stable9/css/toolbar/toolbar.icons.theme.css
  8. 9 core/themes/claro/css/theme/toolbar.icons.theme.css
  9. 9 core/themes/stable/css/toolbar/toolbar.icons.theme.css
  10. 9 core/modules/toolbar/css/toolbar.icons.theme.css
  11. 8.9.x core/themes/stable/css/toolbar/toolbar.icons.theme.css
  12. 8.9.x core/modules/toolbar/css/toolbar.icons.theme.css
  13. 11.x core/themes/admin/css/theme/toolbar.icons.theme.css
  14. 11.x core/themes/default_admin/css/theme/toolbar.icons.theme.css
  15. 11.x core/modules/toolbar/css/claro/theme/toolbar.icons.theme.css
  16. 11.x core/modules/toolbar/css/default_admin/theme/toolbar.icons.theme.css

Styling for toolbar module icons.

File

View on git.drupalcode.org

core/modules/toolbar/css/toolbar.icons.theme.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Styling for toolbar module icons.

  11.  */

  12. 

  13. .toolbar .toolbar-icon {

  14.   position: relative;

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

  16. }

  17. 

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

  19.   padding-right: 2.75em;

  20.   padding-left: 1.3333em;

  21. }

  22. 

  23. .toolbar .toolbar-icon::before {

  24.   position: absolute;

  25.   top: 0;

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

  27.   display: block;

  28.   width: 20px;

  29.   height: 100%;

  30.   content: "";

  31.   background-color: transparent;

  32.   background-repeat: no-repeat;

  33.   background-attachment: scroll;

  34.   background-position: center center;

  35.   background-size: 100% auto;

  36. }

  37. 

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

  39.   right: 0.6667em;

  40.   left: auto;

  41. }

  42. 

  43. .toolbar button.toolbar-icon {

  44.   border: 0;

  45.   background-color: transparent;

  46.   font-size: 1em;

  47. }

  48. 

  49. .toolbar .toolbar-menu ul .toolbar-icon {

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

  51. }

  52. 

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

  54.   padding-right: 1.3333em;

  55.   padding-left: 0;

  56. }

  57. 

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

  59.   display: none;

  60. }

  61. 

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

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

  64. }

  65. 

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

  67.   padding-right: 2.75em;

  68.   padding-left: 0;

  69. }

  70. 

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

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

  73. }

  74. 

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

  76.   padding-right: 3.75em;

  77.   padding-left: 0;

  78. }

  79. 

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

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

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

  83. }

  84. 

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

  86.   padding-right: 2.75em;

  87.   padding-left: 4em;

  88. }

  89. 

  90. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {

  91.   filter: invert(100%);

  92. }

  93. 

  94. /**

  95.  * Top level icons.

  96.  */

  97. 

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

  99.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");

  100. }

  101. 

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

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

  104.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");

  105. }

  106. 

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

  108.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");

  109. }

  110. 

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

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

  113.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");

  114. }

  115. 

  116. .toolbar-bar .toolbar-icon-user::before {

  117.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M1 15c-.275 0-.498-.225-.496-.5 0 0 .007-.746 1.071-1.512 1.138-.818 2.347-.969 3.308-1.498s.954-1.299.925-2.115c-.019-.543-.112-.657-.489-1.392-.556-1.084-.709-2.021-.791-2.823-.127-1.252.011-3.035.86-4.001.847-.964 2.114-1.104 2.114-1.104l.5-.055.498.055s1.266.14 2.113 1.104c.85.966.988 2.75.859 4.001-.08.802-.234 1.739-.791 2.823-.377.734-.476.849-.488 1.392-.029.816-.035 1.586.926 2.115s2.17.68 3.307 1.498c1.064.766 1.072 1.512 1.072 1.512.002.275-.221.5-.496.5h-14.002z'/%3e%3c/svg%3e");

  118. }

  119. 

  120. .toolbar-bar .toolbar-icon-user:active::before,

  121. .toolbar-bar .toolbar-icon-user.is-active::before {

  122.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M1 15c-.275 0-.498-.225-.496-.5 0 0 .007-.746 1.071-1.512 1.138-.818 2.347-.969 3.308-1.498s.954-1.299.925-2.115c-.019-.543-.112-.657-.489-1.392-.556-1.084-.709-2.021-.791-2.823-.127-1.252.011-3.035.86-4.001.847-.964 2.114-1.104 2.114-1.104l.5-.055.498.055s1.266.14 2.113 1.104c.85.966.988 2.75.859 4.001-.08.802-.234 1.739-.791 2.823-.377.734-.476.849-.488 1.392-.029.816-.035 1.586.926 2.115s2.17.68 3.307 1.498c1.064.766 1.072 1.512 1.072 1.512.002.275-.221.5-.496.5h-14.002z'/%3e%3c/svg%3e");

  123. }

  124. 

  125. .toolbar-bar .toolbar-icon-edit::before {

  126.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23bebebe' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23bebebe' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

  127. }

  128. 

  129. .toolbar-bar .toolbar-icon-edit:active::before,

  130. .toolbar-bar .toolbar-icon-edit.is-active::before {

  131.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

  132. }

  133. 

  134. /**

  135.  * Main menu icons.

  136.  */

  137. 

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

  139.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");

  140. }

  141. 

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

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

  144.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");

  145. }

  146. 

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

  148.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");

  149. }

  150. 

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

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

  153.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");

  154. }

  155. 

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

  157.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");

  158. }

  159. 

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

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

  162.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");

  163. }

  164. 

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

  166.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");

  167. }

  168. 

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

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

  171.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");

  172. }

  173. 

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

  175.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");

  176. }

  177. 

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

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

  180.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");

  181. }

  182. 

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

  184.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");

  185. }

  186. 

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

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

  189.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");

  190. }

  191. 

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

  193.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");

  194. }

  195. 

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

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

  198.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");

  199. }

  200. 

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

  202.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");

  203. }

  204. 

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

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

  207.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");

  208. }

  209. 

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

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

  212.     width: 4em;

  213.     margin-right: 0;

  214.     margin-left: 0;

  215.     padding-right: 0;

  216.     padding-left: 0;

  217.     text-indent: -9999px;

  218.   }

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

  220.     left: 0; /* LTR */

  221.     width: 100%;

  222.     background-size: 42% auto;

  223.   }

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

  225.     background-size: auto auto;

  226.   }

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

  228.     right: 0;

  229.     left: auto;

  230.   }

  231. }

  232. 

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

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

  235.     width: auto;

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

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

  238.     text-indent: 0;

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

  240.   }

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

  242.     padding-right: 2.75em;

  243.     padding-left: 1.3333em;

  244.     background-position: right center;

  245.   }

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

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

  248.     width: 20px;

  249.     background-size: 100% auto;

  250.   }

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

  252.     background-size: auto auto;

  253.   }

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

  255.     right: 0.6667em;

  256.     left: 0;

  257.   }

  258. }

  259. 

  260. /**

  261.  *  Accessibility/focus

  262.  */

  263. 

  264. .toolbar-tab a:focus {

  265.   -webkit-text-decoration: underline;

  266.   text-decoration: underline;

  267.   outline: none;

  268. }

  269. 

  270. .toolbar-lining button:focus {

  271.   outline: none;

  272. }

  273. 

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

  275. .toolbar-box a:focus {

  276.   outline: none;

  277.   background-color: #f5f5f5;

  278. }

  279. 

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

  281.   -webkit-text-decoration: underline;

  282.   text-decoration: underline;

  283. }

  284. 

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

  286.   outline: none;

  287.   background-color: #f5f5f5;

  288. }

  289. 

  290. /**

  291.  * Handle.

  292.  */

  293. 

  294. .toolbar .toolbar-icon.toolbar-handle {

  295.   width: 4em;

  296.   text-indent: -9999px;

  297. }

  298. 

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

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

  301. }

  302. 

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

  304.   right: 1.6667em;

  305.   left: auto;

  306. }

  307. 

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

  309.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M8.002 1c-3.869 0-7.002 3.134-7.002 7s3.133 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.459 6.336l-4.105 4.105c-.196.189-.515.189-.708 0l-4.107-4.105c-.194-.194-.194-.513 0-.707l.977-.978c.194-.194.513-.194.707 0l2.422 2.421c.192.195.513.195.708 0l2.422-2.42c.188-.194.512-.194.707 0l.977.977c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");

  310. }

  311. 

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

  313.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.867 0-7.002 3.134-7.002 7s3.135 7 7.002 7 7-3.134 7-7-3.133-7-7-7zm4.462 8.37l-.979.979c-.19.19-.516.19-.707 0l-2.422-2.419c-.196-.194-.515-.194-.708 0l-2.423 2.417c-.194.193-.513.193-.707 0l-.977-.976c-.194-.194-.194-.514 0-.707l4.106-4.106c.193-.194.515-.194.708 0l4.109 4.105c.19.192.19.513 0 .707z'/%3e%3c/svg%3e");

  314. }

  315. 

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

  317.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z'/%3e%3c/svg%3e");

  318.   background-size: 75%;

  319. }

  320. 

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

  322.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z'/%3e%3c/svg%3e");

  323.   background-size: 75%;

  324. }

  325. 

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

  327.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.133-7.002 7 0 3.865 3.134 7 7.002 7 3.865 0 7-3.135 7-7 0-3.867-3.135-7-7-7zm2.348 10.482l-.977.977c-.195.193-.514.193-.707 0l-4.108-4.105c-.194-.195-.194-.514 0-.708l4.108-4.105c.193-.194.512-.194.707 0l.979.977c.191.194.191.513 0 .707l-2.422 2.421c-.195.194-.195.515 0 .708l2.419 2.421c.196.19.196.512.001.707z'/%3e%3c/svg%3e");

  328. }

  329. 

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

  331.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.135-7.002 7 0 3.867 3.134 7 7.002 7 3.865 0 7-3.133 7-7 0-3.865-3.135-7-7-7zm3.441 7.357l-4.106 4.104c-.194.191-.514.191-.708 0l-.978-.979c-.194-.193-.194-.518 0-.707l2.423-2.421c.195-.195.195-.514 0-.708l-2.422-2.421c-.194-.194-.194-.513 0-.707l.977-.977c.194-.194.514-.194.708 0l4.106 4.108c.191.194.191.515 0 .708z'/%3e%3c/svg%3e");

  332. }

  333. 

  334. /**

  335.  * Orientation toggle.

  336.  */

  337. 

  338. .toolbar .toolbar-toggle-orientation button {

  339.   width: 39px;

  340.   height: 39px;

  341.   padding: 0;

  342.   text-indent: -999em;

  343. }

  344. 

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

  346.   right: 0;

  347.   left: 0;

  348.   margin: 0 auto;

  349. }

  350. 

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

  352.   padding: 0;

  353. }

  354. 

  355. /**

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

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

  358.  * specific targeting, setting and unsetting.

  359.  */

  360. 

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

  362.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */

  363. }

  364. 

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

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

  367.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */

  368. }

  369. 

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

  371.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");

  372. }

  373. 

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

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

  376.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");

  377. }

  378. 

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

  380.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");

  381. }

  382. 

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

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

  385.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");

  386. }

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