quickedit.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * @file
  3. * Override Quick Edit's entity toolbar style on the Drupal front-end.
  4. *
  5. * I.e. loaded by Quick Edit on the front-end, despite this being a back-end theme.
  6. */
  7. /**
  8. * The Mediteran style guide prescribes softer corners.
  9. */
  10. .quickedit-toolbar-container > .quickedit-toolbar-content,
  11. .quickedit-toolbar-container > .quickedit-toolbar-lining {
  12. border-radius: 4px;
  13. }
  14. .quickedit-button {
  15. border-radius: 3px;
  16. }
  17. /**
  18. * Entity toolbar's "save" button must be styled like a Mediteran primary button.
  19. */
  20. .quickedit-button.action-save,
  21. .quickedit-button.action-saving {
  22. border-color: #1e5c90;
  23. background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  24. background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  25. color: #fff;
  26. text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  27. font-weight: 700;
  28. -webkit-font-smoothing: antialiased;
  29. margin-top: 2px;
  30. }
  31. .quickedit-button.action-save:hover,
  32. .quickedit-button.action-save:focus,
  33. .quickedit-button.action-saving:hover,
  34. .quickedit-button.action-saving:focus {
  35. background-color: #2369a6;
  36. background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  37. background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  38. border-color: #1e5c90;
  39. color: #fff;
  40. }
  41. .quickedit-button.action-save:hover,
  42. .quickedit-button.action-save:focus,
  43. .quickedit-button.action-saving:hover,
  44. .quickedit-button.action-saving:focus {
  45. box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
  46. }
  47. .quickedit-button.action-save:active,
  48. .quickedit-button.action-saving:active {
  49. background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  50. background-image: linear-gradient(to bottom, #08639b, #0071b8);
  51. border-color: #144b78;
  52. box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
  53. }
  54. /**
  55. * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
  56. * so we must compensate for that to achieve vertically centered positioning.
  57. */
  58. .quickedit .icon-close:before {
  59. top: 8px;
  60. }