quickedit.module.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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: transparent;
  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. width: 320px;
  86. z-index: 100;
  87. }
  88. .quickedit-toolbar-container > .quickedit-toolbar-pointer,
  89. .quickedit-toolbar-container > .quickedit-toolbar-lining {
  90. display: none;
  91. }
  92. .quickedit-form-container {
  93. position: relative;
  94. padding: 0;
  95. border: 0;
  96. margin: 0;
  97. vertical-align: baseline;
  98. z-index: 100;
  99. }
  100. .quickedit-toolgroup.ops {
  101. float: right; /* LTR */
  102. }
  103. [dir="rtl"] .quickedit-toolgroup.ops {
  104. float: left;
  105. }
  106. .quickedit-toolbar-label {
  107. overflow: hidden;
  108. }
  109. #quickedit-toolbar-fence {
  110. bottom: 0;
  111. left: 0;
  112. right: 0;
  113. top: 0;
  114. position: fixed;
  115. z-index: -1;
  116. }