uikit-sass-rails 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
+ }