uikit-sass-rails 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/CHANGELOG.md +5 -0
  4. data/LICENSE.md +155 -0
  5. data/README.md +78 -0
  6. data/lib/uikit-sass-rails.rb +1 -0
  7. data/lib/uikit/sass/rails.rb +2 -0
  8. data/lib/uikit/sass/rails/engine.rb +12 -0
  9. data/lib/uikit/sass/rails/version.rb +7 -0
  10. data/uikit-sass-rails.gemspec +24 -0
  11. data/vendor/assets/fonts/fontawesome-webfont.eot +0 -0
  12. data/vendor/assets/fonts/fontawesome-webfont.svg +504 -0
  13. data/vendor/assets/fonts/fontawesome-webfont.ttf +0 -0
  14. data/vendor/assets/fonts/fontawesome-webfont.woff +0 -0
  15. data/vendor/assets/javascripts/uikit.js +14 -0
  16. data/vendor/assets/javascripts/uikit/addons/autocomplete.js +306 -0
  17. data/vendor/assets/javascripts/uikit/addons/datepicker.js +365 -0
  18. data/vendor/assets/javascripts/uikit/addons/form-password.js +62 -0
  19. data/vendor/assets/javascripts/uikit/addons/form-select.js +62 -0
  20. data/vendor/assets/javascripts/uikit/addons/htmleditor.js +594 -0
  21. data/vendor/assets/javascripts/uikit/addons/nestable.js +574 -0
  22. data/vendor/assets/javascripts/uikit/addons/notify.js +177 -0
  23. data/vendor/assets/javascripts/uikit/addons/pagination.js +146 -0
  24. data/vendor/assets/javascripts/uikit/addons/search.js +90 -0
  25. data/vendor/assets/javascripts/uikit/addons/sortable.js +494 -0
  26. data/vendor/assets/javascripts/uikit/addons/sticky.js +130 -0
  27. data/vendor/assets/javascripts/uikit/addons/timepicker.js +163 -0
  28. data/vendor/assets/javascripts/uikit/addons/upload.js +239 -0
  29. data/vendor/assets/javascripts/uikit/uikit.js +2573 -0
  30. data/vendor/assets/stylesheets/extra/font-awesome.scss +16 -0
  31. data/vendor/assets/stylesheets/uikit.scss +5 -0
  32. data/vendor/assets/stylesheets/uikit/addons/uikit.addons.scss +1326 -0
  33. data/vendor/assets/stylesheets/uikit/addons/uikit.almost-flat.addons.scss +1423 -0
  34. data/vendor/assets/stylesheets/uikit/addons/uikit.gradient.addons.scss +1445 -0
  35. data/vendor/assets/stylesheets/uikit/almost-flat.scss +5 -0
  36. data/vendor/assets/stylesheets/uikit/gradient.scss +5 -0
  37. data/vendor/assets/stylesheets/uikit/uikit.almost-flat.scss +8207 -0
  38. data/vendor/assets/stylesheets/uikit/uikit.gradient.scss +8264 -0
  39. data/vendor/assets/stylesheets/uikit/uikit.scss +7874 -0
  40. metadata +100 -0
@@ -0,0 +1,16 @@
1
+ //= depend_on_asset "fontawesome-webfont.eot"
2
+ //= depend_on_asset "fontawesome-webfont.svg"
3
+ //= depend_on_asset "fontawesome-webfont.ttf"
4
+ //= depend_on_asset "fontawesome-webfont.woff"
5
+
6
+ @font-face {
7
+ font-family: "FontAwesome";
8
+ src: font-url("fontawesome-webfont.eot");
9
+ src: font-url("fontawesome-webfont.eot");
10
+ src: font-url("fontawesome-webfont.eot?#iefix") format("embedded-opentype"),
11
+ font-url("fontawesome-webfont.woff") format("woff"),
12
+ font-url("fontawesome-webfont.ttf") format("truetype"),
13
+ font-url("fontawesome-webfont.svg#fontcustom") format("svg");
14
+ font-weight: normal;
15
+ font-style: normal;
16
+ }
@@ -0,0 +1,5 @@
1
+ @charset "UTF-8";
2
+
3
+ @import "extra/font-awesome";
4
+ @import "uikit/uikit";
5
+ @import "uikit/addons/uikit.addons";
@@ -0,0 +1,1326 @@
1
+ /*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2
+
3
+ /* ========================================================================
4
+ Component: Dotnav
5
+ ========================================================================== */
6
+ /*
7
+ * 1. Remove default list style
8
+ * 2. Remove whitespace between child elements when using `inline-block`
9
+ */
10
+
11
+ .uk-dotnav {
12
+ /* 1 */
13
+ padding: 0;
14
+ list-style: none;
15
+ /* 2 */
16
+ font-size: 0.001px;
17
+ > li {
18
+ display: inline-block;
19
+ /* 1 */
20
+ font-size: 1rem;
21
+ /* 2 */
22
+ vertical-align: top;
23
+ &:nth-child(n+2) {
24
+ margin-left: 15px;
25
+ }
26
+ > a {
27
+ display: inline-block;
28
+ -moz-box-sizing: content-box;
29
+ box-sizing: content-box;
30
+ width: 20px;
31
+ height: 20px;
32
+ border-radius: 50%;
33
+ background: rgba(50, 50, 50, 0.1);
34
+ /* 1 */
35
+ vertical-align: top;
36
+ /* 2 */
37
+ overflow: hidden;
38
+ text-indent: -999%;
39
+ &:hover, &:focus {
40
+ background: rgba(50, 50, 50, 0.4);
41
+ /* 2 */
42
+ outline: none;
43
+ }
44
+ &:active {
45
+ background: rgba(50, 50, 50, 0.6);
46
+ }
47
+ }
48
+ &.uk-active > a {
49
+ background: rgba(50, 50, 50, 0.4);
50
+ }
51
+ }
52
+ }
53
+
54
+ /* Items
55
+ ========================================================================== */
56
+ /*
57
+ * 1. Reset whitespace hack
58
+ * 2. Remove the gap at the bottom of it container
59
+ */
60
+
61
+ /*
62
+ * Items
63
+ * 1. Remove the gap at the bottom of it container
64
+ * 2. Hide text if present
65
+ */
66
+
67
+ /*
68
+ * Hover
69
+ * 1. Apply hover style also to focus state
70
+ * 2. Remove default focus style
71
+ */
72
+
73
+ /* OnClick */
74
+
75
+ /* Active */
76
+
77
+ /* Modifier: 'dotnav-vertical'
78
+ ========================================================================== */
79
+
80
+ .uk-dotnav-vertical > li {
81
+ display: block;
82
+ &:nth-child(n+2) {
83
+ margin-left: 0;
84
+ margin-top: 15px;
85
+ }
86
+ }
87
+
88
+ /* ========================================================================
89
+ Component: Slidenav
90
+ ========================================================================== */
91
+ /*
92
+ * 1. Required for `a` elements
93
+ * 2. Dimension
94
+ * 3. Style
95
+ */
96
+
97
+ .uk-slidenav {
98
+ /* 1 */
99
+ display: inline-block;
100
+ /* 2 */
101
+ -moz-box-sizing: border-box;
102
+ box-sizing: border-box;
103
+ width: 60px;
104
+ height: 60px;
105
+ /* 3 */
106
+ line-height: 60px;
107
+ color: rgba(50, 50, 50, 0.4);
108
+ font-size: 60px;
109
+ text-align: center;
110
+ &:hover, &:focus {
111
+ /* 2 */
112
+ outline: none;
113
+ /* 3 */
114
+ text-decoration: none;
115
+ /* 4 */
116
+ color: rgba(50, 50, 50, 0.7);
117
+ cursor: pointer;
118
+ }
119
+ &:active {
120
+ color: rgba(50, 50, 50, 0.9);
121
+ }
122
+ }
123
+
124
+ /*
125
+ * Hover
126
+ * 1. Apply hover style also to focus state
127
+ * 2. Remove default focus style
128
+ * 3. Required for `a` elements
129
+ * 4. Style
130
+ */
131
+
132
+ /* Active */
133
+
134
+ /*
135
+ * Icons
136
+ */
137
+
138
+ .uk-slidenav-previous:before {
139
+ content: "\f104";
140
+ font-family: FontAwesome;
141
+ }
142
+
143
+ .uk-slidenav-next:before {
144
+ content: "\f105";
145
+ font-family: FontAwesome;
146
+ }
147
+
148
+ /* Sub-object: `uk-slidenav-position`
149
+ ========================================================================== */
150
+ /*
151
+ * 1. Container width fits its content
152
+ * 2. Corrects max-width behavior (3.) if padding and border are used
153
+ * 3. Responsive behavior
154
+ * 4. Create position context for dropdowns
155
+ */
156
+
157
+ .uk-slidenav-position {
158
+ /* 1 */
159
+ display: inline-block;
160
+ /* 2 */
161
+ -moz-box-sizing: border-box;
162
+ box-sizing: border-box;
163
+ /* 3 */
164
+ max-width: 100%;
165
+ /* 4 */
166
+ position: relative;
167
+ .uk-slidenav {
168
+ display: none;
169
+ position: absolute;
170
+ top: 50%;
171
+ margin-top: -30px;
172
+ }
173
+ &:hover .uk-slidenav {
174
+ display: block;
175
+ }
176
+ .uk-slidenav-previous {
177
+ left: 20px;
178
+ }
179
+ .uk-slidenav-next {
180
+ right: 20px;
181
+ }
182
+ }
183
+
184
+ /*
185
+ * Center vertically
186
+ */
187
+
188
+ /* ========================================================================
189
+ Component: Form advanced
190
+ Note: Only works in Webkit at the moment
191
+ ========================================================================== */
192
+ /*
193
+ * 1. Style
194
+ * 2. Makes box more robust so it clips the child element
195
+ * 3. Vertical alignment
196
+ * 4. Remove default style
197
+ * 5. Fix black background on iOS
198
+ */
199
+
200
+ .uk-form input {
201
+ &[type="radio"], &[type="checkbox"] {
202
+ /* 1 */
203
+ display: inline-block;
204
+ height: 14px;
205
+ width: 14px;
206
+ border: 1px solid #aaaaaa;
207
+ /* 2 */
208
+ overflow: hidden;
209
+ /* 3 */
210
+ margin-top: -4px;
211
+ vertical-align: middle;
212
+ /* 4 */
213
+ -webkit-appearance: none;
214
+ outline: 0;
215
+ /* 5 */
216
+ background: transparent;
217
+ }
218
+ &[type="radio"] {
219
+ border-radius: 50%;
220
+ }
221
+ &[type=checkbox]:checked:before {
222
+ display: block;
223
+ }
224
+ &[type=radio]:checked:before {
225
+ display: block;
226
+ content: '';
227
+ width: 8px;
228
+ height: 8px;
229
+ margin: 2px auto 0;
230
+ border-radius: 50%;
231
+ background: #00a8e6;
232
+ }
233
+ &[type=checkbox]:checked:before {
234
+ content: "\f00c";
235
+ font-family: FontAwesome;
236
+ font-size: 12px;
237
+ -webkit-font-smoothing: antialiased;
238
+ text-align: center;
239
+ line-height: 12px;
240
+ color: #00a8e6;
241
+ }
242
+ &[type=radio]:disabled, &[type=checkbox]:disabled {
243
+ border-color: #dddddd;
244
+ }
245
+ &[type=radio]:disabled:checked:before {
246
+ background-color: #aaaaaa;
247
+ }
248
+ &[type=checkbox]:disabled:checked:before {
249
+ color: #aaaaaa;
250
+ }
251
+ }
252
+
253
+ /* Radio */
254
+
255
+ /*
256
+ * Checked
257
+ */
258
+
259
+ /* Radio */
260
+
261
+ /* Checkbox */
262
+
263
+ /*
264
+ * Disabled
265
+ */
266
+
267
+ /* ========================================================================
268
+ Component: Form file
269
+ ========================================================================== */
270
+ /*
271
+ * 1. Behave like form elements
272
+ * 2. Create position context for dropdowns
273
+ * 3. Clip content
274
+ */
275
+
276
+ .uk-form-file {
277
+ /* 1 */
278
+ display: inline-block;
279
+ vertical-align: middle;
280
+ /* 2 */
281
+ position: relative;
282
+ /* 3 */
283
+ overflow: hidden;
284
+ input[type="file"] {
285
+ position: absolute;
286
+ top: 0;
287
+ z-index: 1;
288
+ width: 100%;
289
+ opacity: 0;
290
+ cursor: pointer;
291
+ /* 1 */
292
+ left: 0;
293
+ /* 2 */
294
+ font-size: 500px;
295
+ }
296
+ }
297
+
298
+ /*
299
+ * 1. Required for Firefox
300
+ * 2. Expand height and required for the cursor
301
+ */
302
+
303
+ /* ========================================================================
304
+ Component: Form password
305
+ ========================================================================== */
306
+
307
+ .uk-form-password {
308
+ position: relative;
309
+ display: inline-block;
310
+ max-width: 100%;
311
+ }
312
+
313
+ .uk-form-password-toggle {
314
+ display: block;
315
+ position: absolute;
316
+ top: 50%;
317
+ right: 10px;
318
+ margin-top: -6px;
319
+ font-size: 13px;
320
+ line-height: 13px;
321
+ color: #999999;
322
+ &:hover {
323
+ color: #999999;
324
+ text-decoration: none;
325
+ }
326
+ }
327
+
328
+ .uk-form-password > input {
329
+ padding-right: 50px !important;
330
+ }
331
+
332
+ /* ========================================================================
333
+ Component: Form select
334
+ ========================================================================== */
335
+ /*
336
+ * 1. Behave like form elements
337
+ * 2. Create position context for dropdowns
338
+ * 3. Clip content
339
+ */
340
+
341
+ .uk-form-select {
342
+ /* 1 */
343
+ display: inline-block;
344
+ vertical-align: middle;
345
+ /* 2 */
346
+ position: relative;
347
+ /* 3 */
348
+ overflow: hidden;
349
+ select {
350
+ position: absolute;
351
+ top: 0;
352
+ z-index: 1;
353
+ width: 100%;
354
+ height: 100%;
355
+ opacity: 0;
356
+ cursor: pointer;
357
+ /* 1 */
358
+ left: 0;
359
+ /* 2 */
360
+ -webkit-appearance: none;
361
+ }
362
+ }
363
+
364
+ /*
365
+ * 1. Required for Firefox
366
+ * 1. Required for Webkit to make `height` work
367
+ */
368
+
369
+ /* ========================================================================
370
+ Component: Placeholder
371
+ ========================================================================== */
372
+
373
+ .uk-placeholder {
374
+ margin-bottom: 15px;
375
+ padding: 20px;
376
+ border: 1px dashed #dddddd;
377
+ background: #fafafa;
378
+ color: #444444;
379
+ }
380
+
381
+ /*
382
+ * Add margin if adjacent element
383
+ */
384
+
385
+ * + .uk-placeholder {
386
+ margin-top: 15px;
387
+ }
388
+
389
+ /*
390
+ * Remove margin from the last-child
391
+ */
392
+
393
+ .uk-placeholder > :last-child {
394
+ margin-bottom: 0;
395
+ }
396
+
397
+ /* Modifier: `uk-placeholder-large`
398
+ ========================================================================== */
399
+
400
+ .uk-placeholder-large {
401
+ padding-top: 80px;
402
+ padding-bottom: 80px;
403
+ }
404
+
405
+ /* ========================================================================
406
+ Component: Autocomplete
407
+ ========================================================================== */
408
+ /*
409
+ * 1. Behave like form elements
410
+ * 2. Create position context for dropdowns
411
+ */
412
+
413
+ .uk-autocomplete {
414
+ /* 1 */
415
+ display: inline-block;
416
+ vertical-align: middle;
417
+ /* 2 */
418
+ position: relative;
419
+ }
420
+
421
+ /* Nav modifier `uk-nav-autocomplete`
422
+ ========================================================================== */
423
+ /*
424
+ * Items
425
+ */
426
+
427
+ .uk-nav-autocomplete {
428
+ > li {
429
+ > a {
430
+ color: #444444;
431
+ }
432
+ &.uk-active > a {
433
+ background: #00a8e6;
434
+ color: #ffffff;
435
+ /* 1 */
436
+ outline: none;
437
+ }
438
+ }
439
+ .uk-nav-header {
440
+ color: #999999;
441
+ }
442
+ .uk-nav-divider {
443
+ border-top: 1px solid #dddddd;
444
+ }
445
+ }
446
+
447
+ /*
448
+ * Active
449
+ * 1. Remove default focus style
450
+ */
451
+
452
+ /*
453
+ * Sub-object: `uk-nav-header`
454
+ */
455
+
456
+ /*
457
+ * Sub-object: `uk-nav-divider`
458
+ */
459
+
460
+ /* ========================================================================
461
+ Component: Datepicker
462
+ ========================================================================== */
463
+ /*
464
+ * Reset dropdown width
465
+ */
466
+
467
+ .uk-datepicker {
468
+ width: auto;
469
+ }
470
+
471
+ /* Sub-object: `uk-datepicker-nav`
472
+ ========================================================================== */
473
+
474
+ .uk-datepicker-nav {
475
+ margin-bottom: 15px;
476
+ text-align: center;
477
+ line-height: 20px;
478
+ &:before {
479
+ content: " ";
480
+ display: table;
481
+ }
482
+ &:after {
483
+ content: " ";
484
+ display: table;
485
+ clear: both;
486
+ }
487
+ a {
488
+ color: #444444;
489
+ text-decoration: none;
490
+ &:hover {
491
+ color: #444444;
492
+ }
493
+ }
494
+ }
495
+
496
+ /*
497
+ * Micro clearfix
498
+ */
499
+
500
+ /*
501
+ * Previous and next navigation
502
+ */
503
+
504
+ .uk-datepicker-previous {
505
+ float: left;
506
+ }
507
+
508
+ .uk-datepicker-next {
509
+ float: right;
510
+ }
511
+
512
+ .uk-datepicker-previous:after, .uk-datepicker-next:after {
513
+ width: 20px;
514
+ font-family: FontAwesome;
515
+ }
516
+
517
+ .uk-datepicker-previous:after {
518
+ content: "\f053";
519
+ }
520
+
521
+ .uk-datepicker-next:after {
522
+ content: "\f054";
523
+ }
524
+
525
+ /* Sub-object: `uk-datepicker-heading`
526
+ ========================================================================== */
527
+ /* Sub-object: `uk-datepicker-table`
528
+ ========================================================================== */
529
+ /* Block element behavior */
530
+
531
+ .uk-datepicker-table {
532
+ width: 100%;
533
+ th, td {
534
+ padding: 2px;
535
+ }
536
+ th {
537
+ font-size: 12px;
538
+ }
539
+ a {
540
+ display: block;
541
+ width: 26px;
542
+ line-height: 24px;
543
+ text-align: center;
544
+ color: #444444;
545
+ text-decoration: none;
546
+ }
547
+ }
548
+
549
+ /*
550
+ * Item
551
+ */
552
+
553
+ /*
554
+ * Sub-object: `uk-datepicker-table-muted`
555
+ */
556
+
557
+ a.uk-datepicker-table-muted {
558
+ color: #999999;
559
+ }
560
+
561
+ /*
562
+ * Hover
563
+ * 1. Apply hover style also to focus state
564
+ * 2. Remove default focus style
565
+ */
566
+
567
+ .uk-datepicker-table a {
568
+ &:hover, &:focus {
569
+ background-color: #dddddd;
570
+ color: #444444;
571
+ /* 2 */
572
+ outline: none;
573
+ }
574
+ &:active {
575
+ background-color: #cccccc;
576
+ color: #444444;
577
+ }
578
+ &.uk-active {
579
+ background: #00a8e6;
580
+ color: #ffffff;
581
+ }
582
+ }
583
+
584
+ /* OnClick */
585
+
586
+ /*
587
+ * Active
588
+ */
589
+
590
+ /* ========================================================================
591
+ Component: HTML editor
592
+ ========================================================================== */
593
+ /* Sub-object `uk-htmleditor-navbar`
594
+ ========================================================================== */
595
+
596
+ .uk-htmleditor-navbar {
597
+ background: #eeeeee;
598
+ &:before {
599
+ content: " ";
600
+ display: table;
601
+ }
602
+ &:after {
603
+ content: " ";
604
+ display: table;
605
+ clear: both;
606
+ }
607
+ }
608
+
609
+ /*
610
+ * Micro clearfix
611
+ */
612
+
613
+ /* Sub-object `uk-htmleditor-navbar-nav`
614
+ ========================================================================== */
615
+
616
+ .uk-htmleditor-navbar-nav {
617
+ margin: 0;
618
+ padding: 0;
619
+ list-style: none;
620
+ float: left;
621
+ > li {
622
+ float: left;
623
+ > a {
624
+ display: block;
625
+ -moz-box-sizing: border-box;
626
+ box-sizing: border-box;
627
+ text-decoration: none;
628
+ /* 1 */
629
+ height: 40px;
630
+ padding: 0 15px;
631
+ line-height: 40px;
632
+ /* 2 */
633
+ color: #444444;
634
+ font-size: 11px;
635
+ cursor: pointer;
636
+ }
637
+ &:hover > a {
638
+ background-color: #f5f5f5;
639
+ color: #444444;
640
+ outline: none;
641
+ /* 2 */
642
+ }
643
+ > a {
644
+ &:focus {
645
+ background-color: #f5f5f5;
646
+ color: #444444;
647
+ outline: none;
648
+ /* 2 */
649
+ }
650
+ &:active {
651
+ background-color: #dddddd;
652
+ color: #444444;
653
+ }
654
+ }
655
+ &.uk-active > a {
656
+ background-color: #f5f5f5;
657
+ color: #444444;
658
+ }
659
+ }
660
+ }
661
+
662
+ /*
663
+ * 1. Dimensions
664
+ * 2. Style
665
+ */
666
+
667
+ /*
668
+ * Hover
669
+ * 1. Apply hover style also to focus state
670
+ * 2. Remove default focus style
671
+ */
672
+
673
+ /* OnClick */
674
+
675
+ /* Active */
676
+
677
+ /* Sub-object: `uk-htmleditor-navbar-flip`
678
+ ========================================================================== */
679
+
680
+ .uk-htmleditor-navbar-flip {
681
+ float: right;
682
+ }
683
+
684
+ /* Sub-object for special buttons
685
+ ========================================================================== */
686
+
687
+ [data-mode='split'] {
688
+ .uk-htmleditor-button-code, .uk-htmleditor-button-preview {
689
+ display: none;
690
+ }
691
+ }
692
+
693
+ /* Sub-object `uk-htmleditor-content`
694
+ ========================================================================== */
695
+
696
+ .uk-htmleditor-content {
697
+ border-left: 1px solid #dddddd;
698
+ border-right: 1px solid #dddddd;
699
+ border-bottom: 1px solid #dddddd;
700
+ background: #ffffff;
701
+ &:before {
702
+ content: " ";
703
+ display: table;
704
+ }
705
+ &:after {
706
+ content: " ";
707
+ display: table;
708
+ clear: both;
709
+ }
710
+ }
711
+
712
+ /*
713
+ * Micro clearfix
714
+ */
715
+
716
+ /* Modifier `uk-htmleditor-fullscreen`
717
+ ========================================================================== */
718
+
719
+ .uk-htmleditor-fullscreen {
720
+ position: fixed;
721
+ top: 0;
722
+ left: 0;
723
+ right: 0;
724
+ bottom: 0;
725
+ z-index: 990;
726
+ .uk-htmleditor-content {
727
+ position: absolute;
728
+ top: 40px;
729
+ left: 0;
730
+ right: 0;
731
+ bottom: 0;
732
+ }
733
+ .uk-icon-expand:before {
734
+ content: "\f066";
735
+ }
736
+ }
737
+
738
+ /* Sub-objects `uk-htmleditor-code` and `uk-htmleditor-preview`
739
+ ========================================================================== */
740
+
741
+ .uk-htmleditor-code {
742
+ -moz-box-sizing: border-box;
743
+ box-sizing: border-box;
744
+ }
745
+
746
+ .uk-htmleditor-preview {
747
+ -moz-box-sizing: border-box;
748
+ box-sizing: border-box;
749
+ padding: 20px;
750
+ overflow-y: scroll;
751
+ }
752
+
753
+ /*
754
+ * Tab view
755
+ */
756
+
757
+ [data-mode='tab'] {
758
+ &[data-active-tab='code'] .uk-htmleditor-preview, &[data-active-tab='preview'] .uk-htmleditor-code {
759
+ display: none;
760
+ }
761
+ }
762
+
763
+ /*
764
+ * Split view
765
+ */
766
+
767
+ [data-mode='split'] {
768
+ .uk-htmleditor-code, .uk-htmleditor-preview {
769
+ float: left;
770
+ width: 50%;
771
+ }
772
+ .uk-htmleditor-code {
773
+ border-right: 1px solid #eeeeee;
774
+ }
775
+ }
776
+
777
+ /* CodeMirror modifications
778
+ ========================================================================== */
779
+
780
+ .uk-htmleditor .CodeMirror {
781
+ padding: 10px;
782
+ -moz-box-sizing: border-box;
783
+ box-sizing: border-box;
784
+ }
785
+
786
+ /* ========================================================================
787
+ Component: Nestable
788
+ ========================================================================== */
789
+
790
+ .uk-nestable {
791
+ padding: 0;
792
+ list-style: none;
793
+ }
794
+
795
+ /* Sub-object `uk-nestable-list`
796
+ ========================================================================== */
797
+
798
+ .uk-nestable-list {
799
+ margin: 0;
800
+ padding-left: 40px;
801
+ list-style: none;
802
+ }
803
+
804
+ /* Sub-modifier `uk-nestable-list-dragged`
805
+ ========================================================================== */
806
+
807
+ .uk-nestable-list-dragged {
808
+ position: absolute;
809
+ z-index: 1050;
810
+ padding-left: 0;
811
+ pointer-events: none;
812
+ }
813
+
814
+ /* Sub-object `uk-nestable-item`
815
+ ========================================================================== */
816
+
817
+ .uk-nestable-item {
818
+ margin-bottom: 10px;
819
+ padding: 5px;
820
+ background: #f5f5f5;
821
+ }
822
+
823
+ /* Sub-object `uk-nestable-placeholder`
824
+ * The placeholder which marks the drop area
825
+ ========================================================================== */
826
+
827
+ .uk-nestable-placeholder {
828
+ -moz-box-sizing: border-box;
829
+ box-sizing: border-box;
830
+ margin-bottom: 10px;
831
+ border: 1px dashed #dddddd;
832
+ }
833
+
834
+ /* Sub-object `uk-nestable-empty`
835
+ * The style of an empty list
836
+ ========================================================================== */
837
+
838
+ .uk-nestable-empty {
839
+ min-height: 40px;
840
+ }
841
+
842
+ /* Sub-object `uk-nestable-handle`
843
+ ========================================================================== */
844
+
845
+ .uk-nestable-handle {
846
+ display: inline-block;
847
+ font-size: 18px;
848
+ color: #dddddd;
849
+ &:hover {
850
+ cursor: move;
851
+ }
852
+ &:after {
853
+ content: "\f0c9";
854
+ font-family: FontAwesome;
855
+ }
856
+ }
857
+
858
+ /* Hover */
859
+
860
+ /* Icon */
861
+
862
+ /* Sub-object `uk-nestable-moving`
863
+ ========================================================================== */
864
+
865
+ .uk-nestable-moving {
866
+ cursor: move;
867
+ * {
868
+ cursor: move;
869
+ }
870
+ }
871
+
872
+ /* Sub-object `[data-action='toggle']`
873
+ ========================================================================== */
874
+ /* Hidden by default */
875
+
876
+ [data-nestable-action='toggle'] {
877
+ display: inline-block;
878
+ color: #999999;
879
+ visibility: hidden;
880
+ &:hover {
881
+ color: #444444;
882
+ cursor: pointer;
883
+ }
884
+ &:after {
885
+ content: "\f147";
886
+ font-family: FontAwesome;
887
+ }
888
+ }
889
+
890
+ /* Hover */
891
+
892
+ /* Icon */
893
+
894
+ /*
895
+ * Show if nested
896
+ */
897
+
898
+ .uk-parent > .uk-nestable-item [data-nestable-action='toggle'] {
899
+ visibility: visible;
900
+ }
901
+
902
+ /*
903
+ * Collapsed
904
+ */
905
+
906
+ .uk-collapsed {
907
+ > .uk-nestable-item [data-nestable-action='toggle']:after {
908
+ content: "\f196";
909
+ }
910
+ .uk-nestable-list {
911
+ display: none;
912
+ }
913
+ }
914
+
915
+ /* ========================================================================
916
+ Component: Notify
917
+ ========================================================================== */
918
+ /*
919
+ * Message container for positioning
920
+ */
921
+
922
+ .uk-notify {
923
+ position: fixed;
924
+ top: 10px;
925
+ left: 10px;
926
+ z-index: 1040;
927
+ -moz-box-sizing: border-box;
928
+ box-sizing: border-box;
929
+ width: 350px;
930
+ }
931
+
932
+ /* Position modifiers
933
+ ========================================================================== */
934
+
935
+ .uk-notify-top-right, .uk-notify-bottom-right {
936
+ left: auto;
937
+ right: 10px;
938
+ }
939
+
940
+ .uk-notify-top-center, .uk-notify-bottom-center {
941
+ left: 50%;
942
+ margin-left: -175px;
943
+ }
944
+
945
+ .uk-notify-bottom-left, .uk-notify-bottom-right, .uk-notify-bottom-center {
946
+ top: auto;
947
+ bottom: 10px;
948
+ }
949
+
950
+ /* Responsiveness
951
+ ========================================================================== */
952
+ /* Phones portrait and smaller */
953
+ @media (max-width: 479px) {
954
+ /*
955
+ * Fit in small screen
956
+ */
957
+ .uk-notify {
958
+ left: 10px;
959
+ right: 10px;
960
+ width: auto;
961
+ margin: 0;
962
+ }
963
+ }
964
+
965
+ /* Sub-object: `uk-notify-message`
966
+ ========================================================================== */
967
+
968
+ .uk-notify-message {
969
+ position: relative;
970
+ margin-bottom: 10px;
971
+ padding: 15px;
972
+ background: #444444;
973
+ color: #ffffff;
974
+ font-size: 16px;
975
+ line-height: 22px;
976
+ cursor: pointer;
977
+ > .uk-close {
978
+ visibility: hidden;
979
+ float: right;
980
+ }
981
+ &:hover > .uk-close {
982
+ visibility: visible;
983
+ }
984
+ }
985
+
986
+ /* Close in notify
987
+ ========================================================================== */
988
+
989
+ /* Modifier: `uk-alert-info`
990
+ ========================================================================== */
991
+
992
+ .uk-notify-message-primary {
993
+ background: #ebf7fd;
994
+ color: #2d7091;
995
+ }
996
+
997
+ /* Modifier: `uk-alert-success`
998
+ ========================================================================== */
999
+
1000
+ .uk-notify-message-success {
1001
+ background: #f2fae3;
1002
+ color: #659f13;
1003
+ }
1004
+
1005
+ /* Modifier: `uk-notify-message-warning`
1006
+ ========================================================================== */
1007
+
1008
+ .uk-notify-message-warning {
1009
+ background: #fffceb;
1010
+ color: #e28327;
1011
+ }
1012
+
1013
+ /* Modifier: `uk-notify-message-danger`
1014
+ ========================================================================== */
1015
+
1016
+ .uk-notify-message-danger {
1017
+ background: #fff1f0;
1018
+ color: #d85030;
1019
+ }
1020
+
1021
+ /* ========================================================================
1022
+ Component: Search
1023
+ ========================================================================== */
1024
+ /*
1025
+ * 1. Create position context for dropdowns
1026
+ * 2. Needed for `form` element
1027
+ */
1028
+
1029
+ .uk-search {
1030
+ display: inline-block;
1031
+ /* 1 */
1032
+ position: relative;
1033
+ /* 2 */
1034
+ margin: 0;
1035
+ &:before {
1036
+ content: "\f002";
1037
+ position: absolute;
1038
+ top: 0;
1039
+ left: 0;
1040
+ width: 30px;
1041
+ line-height: 30px;
1042
+ text-align: center;
1043
+ font-family: FontAwesome;
1044
+ font-size: 14px;
1045
+ color: rgba(0, 0, 0, 0.2);
1046
+ }
1047
+ }
1048
+
1049
+ /*
1050
+ * Icon
1051
+ */
1052
+
1053
+ /* Sub-object `uk-search-field`
1054
+ ========================================================================== */
1055
+ /*
1056
+ * 1. Needed to reset iOS `input[type="search"]` appearance
1057
+ */
1058
+
1059
+ .uk-search-field {
1060
+ width: 120px;
1061
+ height: 30px;
1062
+ padding: 0 30px;
1063
+ border: 1px solid rgba(0, 0, 0, 0);
1064
+ background: rgba(0, 0, 0, 0);
1065
+ color: #444444;
1066
+ -webkit-transition: all linear 0.2s;
1067
+ transition: all linear 0.2s;
1068
+ /* 1 */
1069
+ border-radius: 0;
1070
+ }
1071
+
1072
+ /*
1073
+ * Needed to reset iOS `input[type="search"]` appearance
1074
+ * Higher specificity to override appearance set by normalize.less
1075
+ */
1076
+
1077
+ input.uk-search-field {
1078
+ -webkit-appearance: none;
1079
+ }
1080
+
1081
+ /* Placeholder */
1082
+
1083
+ .uk-search-field {
1084
+ &:-ms-input-placeholder, &::-moz-placeholder, &::-webkit-input-placeholder {
1085
+ color: #999999;
1086
+ }
1087
+ &::-ms-clear {
1088
+ display: none;
1089
+ }
1090
+ &:focus {
1091
+ outline: 0;
1092
+ width: 180px;
1093
+ }
1094
+ }
1095
+
1096
+ /* Removes cancel button in IE10 */
1097
+
1098
+ /* Focus */
1099
+
1100
+ /* Focus + active */
1101
+
1102
+ .uk-search.uk-active .uk-search-field {
1103
+ width: 180px;
1104
+ }
1105
+
1106
+ /* Sub-object `uk-search-close`
1107
+ ========================================================================== */
1108
+ /*
1109
+ * 1. Required for `button` elements
1110
+ * 2. Needed for Safari
1111
+ */
1112
+
1113
+ .uk-search-close {
1114
+ display: none;
1115
+ position: absolute;
1116
+ top: 0;
1117
+ right: 0;
1118
+ width: 30px;
1119
+ line-height: 30px;
1120
+ text-align: center;
1121
+ font-size: 14px;
1122
+ color: rgba(0, 0, 0, 0.2);
1123
+ /* 1. */
1124
+ padding: 0;
1125
+ border: 0;
1126
+ -webkit-appearance: none;
1127
+ /* 2. */
1128
+ background: transparent;
1129
+ }
1130
+
1131
+ .uk-loading > .uk-search-close, .uk-active > .uk-search-close {
1132
+ display: block;
1133
+ }
1134
+
1135
+ /*
1136
+ * Icon
1137
+ */
1138
+
1139
+ .uk-search-close:after {
1140
+ display: block;
1141
+ content: "\f00d";
1142
+ font-family: FontAwesome;
1143
+ }
1144
+
1145
+ /* Loading icon */
1146
+
1147
+ .uk-loading > .uk-search-close:after {
1148
+ content: "\f110";
1149
+ -webkit-animation: uk-spin 2s infinite linear;
1150
+ animation: uk-spin 2s infinite linear;
1151
+ }
1152
+
1153
+ /* Dropdown modifier: `uk-dropdown-search`
1154
+ ========================================================================== */
1155
+
1156
+ .uk-dropdown-search {
1157
+ width: 300px;
1158
+ margin-top: 0;
1159
+ background: #f5f5f5;
1160
+ color: #444444;
1161
+ }
1162
+
1163
+ .uk-open > .uk-dropdown-search {
1164
+ -webkit-animation: uk-slide-top-fixed 0.2s ease-in-out;
1165
+ animation: uk-slide-top-fixed 0.2s ease-in-out;
1166
+ }
1167
+
1168
+ /*
1169
+ * Dependency `uk-navbar-flip`
1170
+ */
1171
+
1172
+ .uk-navbar-flip .uk-dropdown-search {
1173
+ margin-top: 5px;
1174
+ margin-right: -15px;
1175
+ }
1176
+
1177
+ /* Nav modifier `uk-nav-search`
1178
+ ========================================================================== */
1179
+ /*
1180
+ * Items
1181
+ */
1182
+
1183
+ .uk-nav-search {
1184
+ > li {
1185
+ > a {
1186
+ color: #444444;
1187
+ }
1188
+ &.uk-active > a {
1189
+ background: #00a8e6;
1190
+ color: #ffffff;
1191
+ /* 1 */
1192
+ outline: none;
1193
+ }
1194
+ }
1195
+ .uk-nav-header {
1196
+ color: #999999;
1197
+ }
1198
+ .uk-nav-divider {
1199
+ border-top: 1px solid #dddddd;
1200
+ }
1201
+ ul a {
1202
+ color: #0077dd;
1203
+ &:hover {
1204
+ color: #005599;
1205
+ }
1206
+ }
1207
+ }
1208
+
1209
+ /*
1210
+ * Active
1211
+ * 1. Remove default focus style
1212
+ */
1213
+
1214
+ /*
1215
+ * Sub-object: `uk-nav-header`
1216
+ */
1217
+
1218
+ /*
1219
+ * Sub-object: `uk-nav-divider`
1220
+ */
1221
+
1222
+ /*
1223
+ * Nested items
1224
+ */
1225
+
1226
+ /* Search in offcanvas
1227
+ ========================================================================== */
1228
+
1229
+ .uk-offcanvas {
1230
+ .uk-search {
1231
+ display: block;
1232
+ margin: 20px 15px;
1233
+ &:before {
1234
+ color: #777777;
1235
+ }
1236
+ }
1237
+ .uk-search-field {
1238
+ width: 100%;
1239
+ border-color: rgba(0, 0, 0, 0);
1240
+ background: #1a1a1a;
1241
+ color: #cccccc;
1242
+ &:-ms-input-placeholder, &::-moz-placeholder, &::-webkit-input-placeholder {
1243
+ color: #777777;
1244
+ }
1245
+ }
1246
+ }
1247
+
1248
+ /* ========================================================================
1249
+ Component: Sortable
1250
+ ========================================================================== */
1251
+
1252
+ .uk-sortable {
1253
+ position: relative;
1254
+ > * {
1255
+ -moz-user-select: none;
1256
+ -webkit-user-select: none;
1257
+ -ms-user-select: none;
1258
+ user-select: none;
1259
+ * {
1260
+ -webkit-user-drag: none;
1261
+ user-drag: none;
1262
+ }
1263
+ }
1264
+ }
1265
+
1266
+ /*
1267
+ * Makes text unselectable
1268
+ */
1269
+
1270
+ /*
1271
+ * Prevents images and links from being dragged (default browser behavior)
1272
+ * Currently only works in Webkit
1273
+ */
1274
+
1275
+ /* Sub-modifier `uk-sortable-dragged`
1276
+ ========================================================================== */
1277
+
1278
+ .uk-sortable-dragged {
1279
+ position: absolute;
1280
+ z-index: 1050;
1281
+ pointer-events: none;
1282
+ }
1283
+
1284
+ /* Sub-modifier `uk-sortable-placeholder`
1285
+ ========================================================================== */
1286
+
1287
+ .uk-sortable-placeholder {
1288
+ opacity: 0;
1289
+ }
1290
+
1291
+ /* Sub-modifier `uk-sortable-over`
1292
+ * Only if `warp:true`
1293
+ ========================================================================== */
1294
+
1295
+ .uk-sortable-over {
1296
+ opacity: 0.3;
1297
+ }
1298
+
1299
+ /* Sub-object `uk-nestable-moving`
1300
+ ========================================================================== */
1301
+
1302
+ .uk-sortable-moving {
1303
+ cursor: move;
1304
+ * {
1305
+ cursor: move;
1306
+ }
1307
+ }
1308
+
1309
+ /* ========================================================================
1310
+ Component: Sticky
1311
+ ========================================================================== */
1312
+
1313
+ .uk-sticky {
1314
+ z-index: 980;
1315
+ }
1316
+
1317
+ /* ========================================================================
1318
+ Component: Upload
1319
+ ========================================================================== */
1320
+ /*
1321
+ * Create a box-shadow when dragging a file over the upload area
1322
+ */
1323
+
1324
+ .uk-dragover {
1325
+ box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
1326
+ }