settings_tray.toolbar.css

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

Visual styling for the toolbar when Settings Tray module is enabled.

File

core/themes/stable9/css/settings_tray/settings_tray.toolbar.css

View source
  1. /**
  2. * @file
  3. * Visual styling for the toolbar when Settings Tray module is enabled.
  4. */
  5. /* @todo Move this into toolbar when module is not experimental:
  6. * https://www.drupal.org/node/2784593.
  7. */
  8. /* Style the edit mode toolbar and tabs. */
  9. #toolbar-bar.js-settings-tray-edit-mode {
  10. background-color: #fff;
  11. }
  12. #toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
  13. color: #999;
  14. }
  15. #toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
  16. color: #333;
  17. }
  18. /* Style both the edit and editing states of the contextual links toggle tab. */
  19. .toolbar-icon-edit.toolbar-item {
  20. color: #eee;
  21. background-color: #0066a1;
  22. background-image: linear-gradient(to bottom, #0066a1, #005b98);
  23. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  24. font-weight: 700;
  25. -webkit-font-smoothing: antialiased;
  26. }
  27. .toolbar-icon-edit.toolbar-item.is-active {
  28. color: #fff;
  29. background-color: #0a7bc1;
  30. background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
  31. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  32. font-weight: 700;
  33. -webkit-font-smoothing: antialiased;
  34. }
  35. .toolbar-tab:hover > .toolbar-icon-edit,
  36. .toolbar-icon-edit:focus .toolbar-item {
  37. color: #fff;
  38. border-color: #1e5c90;
  39. outline: none;
  40. background-color: #0a7bc1;
  41. background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
  42. }
  43. .toolbar-icon.toolbar-icon-edit.toolbar-item:before,
  44. button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  45. background-image: url(../../../../misc/icons/bebebe/pencil.svg);
  46. }
  47. .toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
  48. button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
  49. background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  50. }
  51. .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  52. background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  53. }
  54. #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  55. background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  56. }
  57. #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
  58. color: #fff;
  59. }
  60. #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  61. background-image: linear-gradient(to bottom, #0a6fb4, #0a65aa);
  62. }

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