toolbar.theme.css

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

toolbar.theme.css

If Claro is the admin theme, this stylesheet will be used by the active theme even if the active theme is not Claro.

File

core/themes/claro/css/theme/toolbar.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. * @file toolbar.theme.css
  9. *
  10. * If Claro is the admin theme, this stylesheet will be used by the active theme
  11. * even if the active theme is not Claro.
  12. */
  13. .toolbar {
  14. font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
  15. /* Set base font size to 13px based on root ems. */
  16. font-size: 0.8125rem;
  17. -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  18. -o-tap-highlight-color: rgba(0, 0, 0, 0);
  19. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20. tap-highlight-color: rgba(0, 0, 0, 0);
  21. -moz-touch-callout: none;
  22. -o-touch-callout: none;
  23. -webkit-touch-callout: none;
  24. touch-callout: none;
  25. }
  26. .toolbar .toolbar-item {
  27. padding: 1em 1.3333em;
  28. cursor: pointer;
  29. text-decoration: none;
  30. line-height: 1em;
  31. }
  32. .toolbar .toolbar-item:hover,
  33. .toolbar .toolbar-item:focus {
  34. text-decoration: underline;
  35. }
  36. /**
  37. * Toolbar bar.
  38. */
  39. .toolbar .toolbar-bar {
  40. color: #ddd;
  41. background-color: #0f0f0f;
  42. box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  43. }
  44. [dir="rtl"] .toolbar .toolbar-bar {
  45. box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
  46. }
  47. .toolbar .toolbar-bar .toolbar-item {
  48. color: #fff;
  49. }
  50. .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
  51. font-weight: bold;
  52. }
  53. .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
  54. .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
  55. background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
  56. }
  57. .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
  58. background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
  59. }
  60. /**
  61. * Toolbar tray.
  62. */
  63. .toolbar .toolbar-tray {
  64. background-color: #fff;
  65. }
  66. .toolbar-horizontal .toolbar-tray > .toolbar-lining {
  67. padding-right: 5em; /* LTR */
  68. }
  69. [dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
  70. padding-right: 0;
  71. padding-left: 5em;
  72. }
  73. .toolbar .toolbar-tray-vertical {
  74. border-right: 1px solid #aaa; /* LTR */
  75. background-color: #f5f5f5;
  76. box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
  77. }
  78. [dir="rtl"] .toolbar .toolbar-tray-vertical {
  79. border-right: 0 none;
  80. border-left: 1px solid #aaa;
  81. box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
  82. }
  83. .toolbar-horizontal .toolbar-tray {
  84. border-bottom: 1px solid #aaa;
  85. box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
  86. }
  87. [dir="rtl"] .toolbar-horizontal .toolbar-tray {
  88. box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
  89. }
  90. .toolbar .toolbar-tray-horizontal .toolbar-tray {
  91. background-color: #f5f5f5;
  92. }
  93. .toolbar-tray a,
  94. .toolbar-tray a:visited {
  95. padding: 1em 1.3333em;
  96. cursor: pointer;
  97. text-decoration: none;
  98. color: #565656;
  99. }
  100. .toolbar-tray a:hover,
  101. .toolbar-tray a:active,
  102. .toolbar-tray a:focus,
  103. .toolbar-tray a.is-active {
  104. text-decoration: underline;
  105. color: #000;
  106. }
  107. .toolbar .toolbar-menu {
  108. background-color: #fff;
  109. }
  110. .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
  111. border-left: 1px solid #ddd; /* LTR */
  112. }
  113. [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
  114. border-right: 1px solid #ddd;
  115. border-left: 0 none;
  116. }
  117. .toolbar-horizontal .toolbar-tray .menu-item:last-child {
  118. border-right: 1px solid #ddd; /* LTR */
  119. }
  120. [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
  121. border-left: 1px solid #ddd;
  122. }
  123. .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
  124. border-top: 1px solid #ddd;
  125. }
  126. .toolbar .toolbar-tray-vertical .menu-item:last-child {
  127. border-bottom: 1px solid #ddd;
  128. }
  129. .toolbar .toolbar-tray-vertical .menu-item .menu-item {
  130. border: 0 none;
  131. }
  132. .toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
  133. border-top: 1px solid #ddd;
  134. border-bottom: 1px solid #ddd;
  135. }
  136. .toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
  137. border-bottom: 0;
  138. }
  139. .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
  140. margin-left: 0.25em; /* LTR */
  141. }
  142. [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
  143. margin-right: 0.25em;
  144. margin-left: 0;
  145. }
  146. .toolbar .toolbar-menu .toolbar-menu a {
  147. color: #434343;
  148. }
  149. /**
  150. * Orientation toggle.
  151. */
  152. .toolbar .toolbar-toggle-orientation {
  153. height: 100%;
  154. padding: 0;
  155. background-color: #f5f5f5;
  156. }
  157. .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  158. border-left: 1px solid #c9c9c9; /* LTR */
  159. }
  160. [dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  161. border-right: 1px solid #c9c9c9;
  162. border-left: 0 none;
  163. }
  164. .toolbar .toolbar-toggle-orientation > .toolbar-lining {
  165. float: right; /* LTR */
  166. }
  167. [dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
  168. float: left;
  169. }
  170. .toolbar .toolbar-toggle-orientation button {
  171. display: inline-block;
  172. cursor: pointer;
  173. }

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