diff options
Diffstat (limited to 'sources/samples/toolbarconfigurator/less/toolbarmodifier.less')
-rw-r--r-- | sources/samples/toolbarconfigurator/less/toolbarmodifier.less | 508 |
1 files changed, 508 insertions, 0 deletions
diff --git a/sources/samples/toolbarconfigurator/less/toolbarmodifier.less b/sources/samples/toolbarconfigurator/less/toolbarmodifier.less new file mode 100644 index 0000000..8aa5d08 --- /dev/null +++ b/sources/samples/toolbarconfigurator/less/toolbarmodifier.less | |||
@@ -0,0 +1,508 @@ | |||
1 | // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
2 | // For licensing, see LICENSE.html or http://cksource.com/ckeditor/license | ||
3 | |||
4 | @import "base.less"; | ||
5 | |||
6 | @modifier-group-hover-color: #fffbe3; | ||
7 | @modifier-group-active-color: #f0fafb; | ||
8 | |||
9 | @modifier-active-toolbar-color: darken( @modifier-group-hover-color, 10% ); | ||
10 | |||
11 | @modifier-toolbar-border-color: #ccc; | ||
12 | @modifier-toolbar-group-border-color: #ddd; | ||
13 | @modifier-toolbar-group-vpadding: 2px; | ||
14 | @modifier-toolbar-hgap: 5px; | ||
15 | |||
16 | @modifier-toolbar-button-color: #e7e7e7; | ||
17 | |||
18 | #toolbar .cke_toolbar { | ||
19 | pointer-events: none; | ||
20 | .user-select( none ); | ||
21 | cursor: default; | ||
22 | } | ||
23 | |||
24 | // Dim all but active toolbars if some is active. | ||
25 | .some-toolbar-active .cke_toolbar { | ||
26 | .opacity( .5 ); | ||
27 | } | ||
28 | |||
29 | .cke_toolbar.active { | ||
30 | position: relative; | ||
31 | |||
32 | // Active toolbar is always highlighted. | ||
33 | .opacity( 1 ); | ||
34 | |||
35 | &:after { | ||
36 | content: ''; | ||
37 | display: block; | ||
38 | position: absolute; | ||
39 | top: 0; | ||
40 | right: 6px; | ||
41 | bottom: 5px; | ||
42 | left: 0; | ||
43 | .border-radius( 5px ); | ||
44 | .box-shadow( 0px 0px 15px 3px @modifier-active-toolbar-color ); | ||
45 | } | ||
46 | |||
47 | .cke_toolgroup { | ||
48 | .box-shadow( none ); | ||
49 | border-color: darken( @modifier-active-toolbar-color, 40% ); | ||
50 | } | ||
51 | |||
52 | .cke_combo, | ||
53 | .cke_toolgroup { | ||
54 | position: relative; | ||
55 | z-index: 2; | ||
56 | } | ||
57 | |||
58 | .cke_combo_button { | ||
59 | .box-shadow( none ); | ||
60 | } | ||
61 | } | ||
62 | |||
63 | .unselectable { | ||
64 | .user-select( none ); | ||
65 | } | ||
66 | .toolbar { | ||
67 | padding: 5px 0; | ||
68 | margin-bottom: 2 * @sample-standard-vgap; | ||
69 | overflow: hidden; | ||
70 | background: #fff; | ||
71 | |||
72 | button.button-a { | ||
73 | &.cke_button { | ||
74 | cursor: pointer; | ||
75 | |||
76 | display: inline-block; | ||
77 | padding: 4px 6px; | ||
78 | outline: 0; | ||
79 | border: 1px solid #a6a6a6; | ||
80 | } | ||
81 | |||
82 | &.hidden { | ||
83 | display: none; | ||
84 | } | ||
85 | |||
86 | &.left { | ||
87 | float: left; | ||
88 | margin-right: 8px; | ||
89 | } | ||
90 | |||
91 | &.right { | ||
92 | float: right; | ||
93 | margin-left: 8px; | ||
94 | } | ||
95 | |||
96 | .highlight { | ||
97 | color: #ffefc1; | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | |||
102 | // Styles applied when configurator is hidden and code is being displayed (and vice-versa). | ||
103 | .configContainer.hidden, | ||
104 | .toolbarModifier.hidden, | ||
105 | .toolbarModifier-hints.hidden { | ||
106 | display: none; | ||
107 | } | ||
108 | |||
109 | .toolbarModifier :focus, | ||
110 | .toolbar button:focus, | ||
111 | .configContainer textarea.configCode:focus { | ||
112 | outline: none; | ||
113 | } | ||
114 | |||
115 | div.toolbarModifier { | ||
116 | padding: 0; | ||
117 | overflow: hidden; | ||
118 | width: 100%; | ||
119 | position: relative; | ||
120 | display: table; | ||
121 | border-collapse: collapse; | ||
122 | |||
123 | ::-moz-focus-inner { | ||
124 | border: 0; | ||
125 | } | ||
126 | |||
127 | .empty { | ||
128 | display: none; | ||
129 | } | ||
130 | |||
131 | &.empty-visible .empty { | ||
132 | display: table-row; | ||
133 | .opacity( 0.6 ); | ||
134 | } | ||
135 | |||
136 | // Give empty toolbar groups height similar to height of non empty groups. | ||
137 | // Non empty groups are stretched by contained toolbar buttons. | ||
138 | .empty > p { | ||
139 | line-height: 31px; | ||
140 | } | ||
141 | |||
142 | // List of toolbars. | ||
143 | & > ul { | ||
144 | padding: 0; | ||
145 | margin: 0; | ||
146 | border-top: 1px solid @modifier-toolbar-border-color; | ||
147 | width: 100%; | ||
148 | |||
149 | &[data-type="table-header"] { | ||
150 | display: table-header-group; | ||
151 | } | ||
152 | |||
153 | &[data-type="table-body"] { | ||
154 | display: table-row-group; | ||
155 | } | ||
156 | |||
157 | // Override global margins and paddings. | ||
158 | p { | ||
159 | padding: 0; | ||
160 | margin: 0; | ||
161 | } | ||
162 | |||
163 | // A single toolbar. | ||
164 | & > li { | ||
165 | display: table-row; | ||
166 | |||
167 | &[data-type="header"] { | ||
168 | font-weight: bold; | ||
169 | user-select: none; | ||
170 | cursor: default; | ||
171 | } | ||
172 | |||
173 | &[data-type="group"], | ||
174 | &[data-type="separator"] { | ||
175 | border-bottom: 1px solid @modifier-toolbar-border-color; | ||
176 | } | ||
177 | |||
178 | &[data-type="subgroup"] { | ||
179 | border-top: 1px solid #eee; | ||
180 | |||
181 | &:first-child { | ||
182 | border-top: none; | ||
183 | } | ||
184 | } | ||
185 | |||
186 | &[data-type="group"].active, | ||
187 | &[data-type="group"]:hover, | ||
188 | &[data-type="separator"].active, | ||
189 | &[data-type="separator"]:hover { | ||
190 | overflow: hidden; | ||
191 | z-index: 2; | ||
192 | } | ||
193 | |||
194 | &[data-type="group"].active, | ||
195 | &[data-type="separator"].active, | ||
196 | &[data-type="group"].active:hover, | ||
197 | &[data-type="separator"].active:hover { | ||
198 | background: @modifier-group-active-color; | ||
199 | } | ||
200 | |||
201 | &[data-type="group"]:hover, | ||
202 | &[data-type="separator"]:hover { | ||
203 | background: @modifier-group-hover-color; | ||
204 | } | ||
205 | |||
206 | &[data-type="separator"] { | ||
207 | &:after { | ||
208 | content: ''; | ||
209 | width: 100%; | ||
210 | } | ||
211 | |||
212 | background: #f5f5f5; | ||
213 | |||
214 | & > p { | ||
215 | padding: @modifier-toolbar-group-vpadding @modifier-toolbar-hgap; | ||
216 | } | ||
217 | } | ||
218 | |||
219 | & > p, & > ul { | ||
220 | display: table-cell; | ||
221 | vertical-align: middle; | ||
222 | } | ||
223 | |||
224 | // Note: this also controls the list of toolbar groups. | ||
225 | p { | ||
226 | padding-left: @modifier-toolbar-hgap; | ||
227 | min-width: 200px; | ||
228 | |||
229 | span { | ||
230 | white-space: nowrap; | ||
231 | cursor: default; | ||
232 | |||
233 | button { | ||
234 | font-size: 12.666px; | ||
235 | margin-right: 5px; | ||
236 | cursor: pointer; | ||
237 | background: #fff; | ||
238 | .border-radius( 5px ); | ||
239 | border: 1px solid #bbb; | ||
240 | padding: 0 7px; | ||
241 | line-height: 12px; | ||
242 | height: 20px; | ||
243 | |||
244 | &:not(.disabled) { | ||
245 | &:hover, | ||
246 | &:focus { | ||
247 | color: #fff; | ||
248 | background-color: @sample-top-navigation-background; | ||
249 | border-color: transparent; | ||
250 | } | ||
251 | } | ||
252 | |||
253 | &.move.disabled { | ||
254 | cursor: default; | ||
255 | .opacity( 0.2 ); | ||
256 | } | ||
257 | } | ||
258 | } | ||
259 | } | ||
260 | |||
261 | // List of toolbar groups. | ||
262 | ul { | ||
263 | border-collapse: collapse; | ||
264 | padding: 0; | ||
265 | width: 100%; | ||
266 | |||
267 | // A single toolbar group. | ||
268 | li { | ||
269 | display: table-row; | ||
270 | list-style-type: none; | ||
271 | // Resets slightly increased lists' lh which is bigger than button's height | ||
272 | // so it stretches columns. | ||
273 | line-height: 1; | ||
274 | |||
275 | &[data-type="subgroup"] { | ||
276 | border-top: 1px solid @modifier-toolbar-group-border-color; | ||
277 | |||
278 | &:first-child { | ||
279 | border-top: 0; | ||
280 | } | ||
281 | |||
282 | [data-type="button"] { | ||
283 | .border-radius( 3px ); | ||
284 | padding: 0 2px; | ||
285 | |||
286 | &:focus { | ||
287 | background: rgba(0, 0, 0, 0.04); | ||
288 | } | ||
289 | |||
290 | input { | ||
291 | vertical-align: middle; | ||
292 | } | ||
293 | } | ||
294 | } | ||
295 | |||
296 | & > p, & > ul { | ||
297 | display: table-cell; | ||
298 | vertical-align: middle; | ||
299 | } | ||
300 | |||
301 | // List of buttons in a group. | ||
302 | ul { | ||
303 | padding: 0; | ||
304 | |||
305 | // A single button in a group. | ||
306 | li { | ||
307 | padding: 0; | ||
308 | display: inline-block; | ||
309 | cursor: pointer; | ||
310 | margin: @modifier-toolbar-group-vpadding 5px @modifier-toolbar-group-vpadding 0; | ||
311 | |||
312 | // Enforce styles to save space. | ||
313 | .cke_combo_text { | ||
314 | cursor: pointer; | ||
315 | white-space: nowrap; | ||
316 | } | ||
317 | |||
318 | .cke_toolgroup, | ||
319 | .cke_combo_button { | ||
320 | cursor: pointer; | ||
321 | margin: 0; | ||
322 | vertical-align: middle; | ||
323 | border: 1px solid #ddd; | ||
324 | .font-size( .713 ); | ||
325 | } | ||
326 | } | ||
327 | } | ||
328 | } | ||
329 | } | ||
330 | } | ||
331 | } | ||
332 | |||
333 | & > .codemirror-wrapper { | ||
334 | overflow-y: auto; | ||
335 | } | ||
336 | |||
337 | // Advanced configurator: list of unused elements. | ||
338 | &-hints { | ||
339 | float: right; | ||
340 | width: 350px; | ||
341 | min-width: 150px; | ||
342 | overflow-y: auto; | ||
343 | margin-left: @sample-standard-hgap; | ||
344 | |||
345 | h3 { | ||
346 | .font-size( 1.13 ); | ||
347 | padding: .3*@sample-standard-vgap @sample-standard-hgap; | ||
348 | background: @sample-box-background-color; | ||
349 | border-bottom: 1px solid @sample-box-border-color; | ||
350 | margin-top: 0; | ||
351 | margin-bottom: @sample-standard-vgap; | ||
352 | } | ||
353 | |||
354 | dl { | ||
355 | //margin-top: 0; | ||
356 | margin-bottom: @sample-standard-vgap; | ||
357 | overflow: hidden; | ||
358 | |||
359 | .list-header { | ||
360 | font-weight: bold; | ||
361 | border: 0; | ||
362 | padding-bottom: .5*@sample-standard-vgap; | ||
363 | } | ||
364 | |||
365 | & > p { | ||
366 | text-align: center; | ||
367 | } | ||
368 | |||
369 | dt { | ||
370 | float: left; | ||
371 | width: 9em; | ||
372 | clear: both; | ||
373 | text-align: right; | ||
374 | border-top: 1px solid @sample-box-border-color; | ||
375 | padding-left: @sample-standard-hgap; | ||
376 | padding-right: .1em; | ||
377 | .box-sizing( border-box ); | ||
378 | |||
379 | code { | ||
380 | background: none; | ||
381 | border: none; | ||
382 | vertical-align: middle; | ||
383 | } | ||
384 | } | ||
385 | |||
386 | dd { | ||
387 | margin-left: 10em; | ||
388 | clear: right; | ||
389 | padding-right: @sample-standard-hgap; | ||
390 | |||
391 | code { | ||
392 | line-height: 2.2em; | ||
393 | } | ||
394 | |||
395 | &:after { | ||
396 | content: '\00a0'; | ||
397 | display: block; | ||
398 | clear: left; | ||
399 | float: right; | ||
400 | height: 0; | ||
401 | width: 0; | ||
402 | } | ||
403 | } | ||
404 | } | ||
405 | } | ||
406 | } | ||
407 | |||
408 | .toolbarModifier-hints, | ||
409 | .configContainer textarea.configCode, | ||
410 | .CodeMirror { | ||
411 | .border-radius( 3px ); | ||
412 | border: 1px solid #ccc; | ||
413 | .font-size( .813 ); | ||
414 | } | ||
415 | |||
416 | .configContainer textarea.configCode, | ||
417 | .CodeMirror pre, | ||
418 | .CodeMirror-linenumber { | ||
419 | .font-size( .813 ); | ||
420 | font-family: @sample-font-stack-monospace; | ||
421 | } | ||
422 | |||
423 | .CodeMirror pre { | ||
424 | border: none; | ||
425 | padding: 0; | ||
426 | margin: 0; | ||
427 | } | ||
428 | |||
429 | .configContainer textarea.configCode { | ||
430 | .box-sizing( border-box ); | ||
431 | color: @sample-text-color; | ||
432 | padding: 10px; | ||
433 | width: 100%; | ||
434 | min-height: 500px; | ||
435 | margin: 0; | ||
436 | resize: none; | ||
437 | outline: none; | ||
438 | -moz-tab-size: 4; | ||
439 | tab-size: 4; | ||
440 | white-space: pre; | ||
441 | word-wrap: normal; | ||
442 | overflow: auto; | ||
443 | } | ||
444 | |||
445 | .CodeMirror-hints.toolbar-modifier { | ||
446 | padding: 0; | ||
447 | color: @sample-text-color; | ||
448 | |||
449 | .CodeMirror-hint-active { | ||
450 | color: @sample-text-color; | ||
451 | background: @modifier-group-active-color; | ||
452 | } | ||
453 | |||
454 | .font-size( .875 ); | ||
455 | font-family: @sample-font-stack-monospace; | ||
456 | |||
457 | & > li:hover { | ||
458 | background: @modifier-group-hover-color; | ||
459 | } | ||
460 | } | ||
461 | |||
462 | /* Text modifier */ | ||
463 | #toolbarModifierWrapper { | ||
464 | margin-bottom: @sample-standard-vgap; | ||
465 | |||
466 | .invalid .CodeMirror { | ||
467 | background: #fff8f8; | ||
468 | border-color: red; | ||
469 | } | ||
470 | |||
471 | .CodeMirror { | ||
472 | // Autogrow. http://codemirror.net/demo/resize.html | ||
473 | height: auto; | ||
474 | // Complementory with std's CodeMirror-lines vertical padding. | ||
475 | // Not needed when we use lines number, but we can't due to a bug in CM. | ||
476 | padding: 0 @sample-standard-vgap/2; | ||
477 | } | ||
478 | } | ||
479 | |||
480 | .staticContainer { | ||
481 | position: fixed; | ||
482 | top: 0; | ||
483 | width: 100%; | ||
484 | z-index: 10; | ||
485 | |||
486 | > .grid-container { | ||
487 | max-width: 1044px + 2 * @grid-gutter-width; | ||
488 | |||
489 | .inner { | ||
490 | background: #fff; | ||
491 | |||
492 | .toolbar { | ||
493 | margin-bottom: 0; | ||
494 | } | ||
495 | } | ||
496 | } | ||
497 | } | ||
498 | |||
499 | // Help button to display information about configurator. | ||
500 | #help { | ||
501 | position: relative; | ||
502 | top: -15px; | ||
503 | left: -5px; | ||
504 | |||
505 | &-content { | ||
506 | display: none; | ||
507 | } | ||
508 | } | ||