3 * Styling for Quick Edit module.
9 .quickedit-field.quickedit-editable,
10 .quickedit-field .quickedit-editable {
11 box-shadow: 0 0 0 2px #74b7ff;
15 * Highlighted (hovered) editable.
17 .quickedit-field.quickedit-highlighted,
18 .quickedit-form.quickedit-highlighted,
19 .quickedit-field .quickedit-highlighted {
20 box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
22 .quickedit-field.quickedit-changed,
23 .quickedit-form.quickedit-changed,
24 .quickedit-field .quickedit-changed {
25 box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
27 .quickedit-editing.quickedit-validation-error,
28 .quickedit-form.quickedit-validation-error {
29 box-shadow: 0 0 0 1px #ee8b74, 0 0 0 2px #fa2209;
31 .quickedit-editing.quickedit-editor-is-popup {
34 .quickedit-form .form-item .error {
35 border: 1px solid #eea0a0;
39 * Default form styling overrides.
41 .quickedit-form form {
44 .quickedit-form .form-item {
47 .quickedit-form .form-wrapper {
54 .quickedit-animate-invisible {
57 .quickedit-animate-default {
58 -webkit-transition: all 0.4s ease;
59 transition: all 0.4s ease;
61 .quickedit-animate-slow {
62 -webkit-transition: all 0.6s ease;
63 transition: all 0.6s ease;
65 .quickedit-animate-delay-veryfast {
66 -webkit-transition-delay: 0.05s;
67 transition-delay: 0.05s;
69 .quickedit-animate-delay-fast {
70 -webkit-transition-delay: 0.2s;
71 transition-delay: 0.2s;
73 .quickedit-animate-disable-width {
74 -webkit-transition: width 0s;
77 .quickedit-animate-only-visibility {
78 -webkit-transition: opacity 0.2s ease;
79 transition: opacity 0.2s ease;
83 * In-place editors that don't use a popup.
85 .quickedit-validation-errors .messages.error {
86 box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, 0.5);
87 background-color: white;
91 * Styling specific to the 'form' in-place editor.
94 box-shadow: 0 0 30px 4px #4f4f4f;
95 background-color: white;
101 .quickedit-toolbar-container {
102 font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
105 -webkit-transition: all 1s;
108 .quickedit-toolbar-container > .quickedit-toolbar-content {
109 background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
110 background-image: linear-gradient(to bottom, #fff, #e4e4e4);
111 box-sizing: border-box;
115 -webkit-user-select: none;
116 -moz-user-select: none;
117 -ms-user-select: none;
121 .quickedit-toolbar-container > .quickedit-toolbar-pointer {
122 background-color: #e4e4e4;
124 box-shadow: 0 0 0 1px #818181, 0 0 0 4px rgba(150, 150, 150, 0.5);
127 left: 18px; /* LTR */
129 -webkit-transform: rotate(45deg);
130 -ms-transform: rotate(45deg);
131 transform: rotate(45deg);
135 [dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer {
139 .quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer {
143 .quickedit-toolbar-container > .quickedit-toolbar-lining {
145 box-shadow: 0 0 0 1px #818181, 0 3px 0 1px rgba(150, 150, 150, 0.5);
154 .quickedit-toolbar-label {
157 padding: 0.333em 0.4em;
158 text-overflow: ellipsis;
161 .quickedit-toolbar-label .field:after {
162 content: ' → '; /* LTR */
165 [dir="rtl"] .quickedit-toolbar-label .field:after {
169 /* The toolbar; these are not necessarily visible. */
171 font-family: 'Droid sans', 'Lucida Grande', sans-serif;
173 .quickedit-toolbar-entity {
174 padding: 0.1667em 0.2em;
180 .quickedit-toolbar-fullwidth {
183 .quickedit-toolgroup.wysiwyg-floated {
184 float: right; /* LTR */
186 [dir="rtl"] .quickedit-toolgroup.wysiwyg-floated {
189 .quickedit-toolgroup.wysiwyg-main {
192 padding-left: 0; /* LTR */
194 [dir="rtl"] .quickedit-toolgroup.wysiwyg-main {
203 background-color: #e4e4e4;
204 border: 1px solid #d2d2d2;
207 display: inline-block;
211 -webkit-transition: opacity 0.1s ease;
212 transition: opacity 0.1s ease;
214 .quickedit-button[aria-hidden="true"] {
218 .quickedit-button + .quickedit-button {
219 margin-left: 0.2em; /* LTR */
221 [dir="rtl"] .quickedit-button + .quickedit-button {
223 margin-right: 0.25em;
225 /* Button with icons. */
226 .quickedit-button:hover,
227 .quickedit-button:active {
228 background-color: #c8c8c8;
229 border: 1px solid #a0a0a0;
232 .quickedit-toolbar-container .quickedit-button.action-cancel {
233 background-color: transparent;
234 border: 1px solid transparent;
236 .quickedit-button.action-save {
238 background-color: #50a0e9;
239 background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
240 background-image: linear-gradient(to bottom, #50a0e9, #4481dc);
241 border: 1px solid transparent;
243 .quickedit-button.action-save:hover,
244 .quickedit-button.action-save:active {
245 border: 1px solid #a0a0a0;
247 .quickedit-button.action-saving,
248 .quickedit-button.action-saving:hover,
249 .quickedit-button.action-saving:active {
250 background-color: #e4e4e4;
251 background-image: none;
252 border-color: #d2d2d2;