quickedit.module.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. /**
  2. * @file
  3. * Generic base styles for Quick Edit module.
  4. *
  5. * Note: every class is prefixed with "quickedit-" to prevent collisions with
  6. * modules or themes. In Edit module-specific DOM subtrees, this is not
  7. * necessary.
  8. */
  9. /**
  10. * Editable.
  11. */
  12. .quickedit-editable {
  13. z-index: 98;
  14. position: relative;
  15. cursor: pointer;
  16. }
  17. .quickedit-editable:focus {
  18. outline: none;
  19. }
  20. /**
  21. * Highlighted (hovered) editable.
  22. */
  23. .quickedit-editable.quickedit-highlighted {
  24. z-index: 99;
  25. }
  26. .quickedit-validation-errors > .messages {
  27. margin-left: 0;
  28. margin-right: 0;
  29. }
  30. .quickedit-validation-errors > .messages > ul {
  31. list-style: none;
  32. margin: 0;
  33. padding: 0;
  34. }
  35. /**
  36. * In-place editors that don't use a popup.
  37. */
  38. .quickedit-validation-errors {
  39. z-index: 300;
  40. position: relative;
  41. }
  42. .quickedit-validation-errors .messages.error {
  43. position: absolute;
  44. top: 6px;
  45. left: -5px; /* LTR */
  46. margin: 0;
  47. border: none;
  48. }
  49. [dir="rtl"] .quickedit-validation-errors .messages.error {
  50. left: auto;
  51. right: -5px;
  52. }
  53. /**
  54. * Styling specific to the 'form' in-place editor.
  55. */
  56. #quickedit_backstage {
  57. display: none;
  58. }
  59. .quickedit-form {
  60. position: absolute;
  61. z-index: 300;
  62. max-width: 35em;
  63. }
  64. .quickedit-form .placeholder {
  65. min-height: 22px;
  66. }
  67. /**
  68. * Default form styling overrides.
  69. */
  70. .quickedit-form .form-wrapper .form-wrapper {
  71. margin: inherit;
  72. }
  73. .quickedit-form .form-actions {
  74. display: none;
  75. }
  76. .quickedit-form input {
  77. max-width: 100%;
  78. }
  79. /**
  80. * Entity toolbar.
  81. */
  82. .quickedit-toolbar-container {
  83. max-width: 100%;
  84. position: absolute;
  85. max-width: 320px;
  86. width: 320px;
  87. z-index: 100;
  88. }
  89. .quickedit-toolbar-container > .quickedit-toolbar-pointer,
  90. .quickedit-toolbar-container > .quickedit-toolbar-lining {
  91. display: none;
  92. }
  93. .quickedit-form-container {
  94. position: relative;
  95. padding: 0;
  96. border: 0;
  97. margin: 0;
  98. vertical-align: baseline;
  99. z-index: 100;
  100. }
  101. .quickedit-toolgroup.ops {
  102. float: right; /* LTR */
  103. }
  104. [dir="rtl"] .quickedit-toolgroup.ops {
  105. float: left;
  106. }
  107. .quickedit-toolbar-label {
  108. overflow: hidden;
  109. }
  110. #quickedit-toolbar-fence {
  111. bottom: 0;
  112. left: 0;
  113. right: 0;
  114. top: 0;
  115. position: fixed;
  116. z-index: -1;
  117. }