uikit-sass-rails 1.0.0 → 1.1.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 (28) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +1 -1
  4. data/lib/uikit/sass/rails/version.rb +1 -1
  5. data/uikit-sass-rails.gemspec +2 -2
  6. data/vendor/assets/javascripts/uikit.js +1 -0
  7. data/vendor/assets/javascripts/uikit/addons/autocomplete.js +5 -6
  8. data/vendor/assets/javascripts/uikit/addons/cover.js +90 -0
  9. data/vendor/assets/javascripts/uikit/addons/datepicker.js +19 -5
  10. data/vendor/assets/javascripts/uikit/addons/form-password.js +2 -2
  11. data/vendor/assets/javascripts/uikit/addons/form-select.js +3 -3
  12. data/vendor/assets/javascripts/uikit/addons/htmleditor.js +35 -14
  13. data/vendor/assets/javascripts/uikit/addons/nestable.js +9 -8
  14. data/vendor/assets/javascripts/uikit/addons/notify.js +5 -2
  15. data/vendor/assets/javascripts/uikit/addons/pagination.js +3 -3
  16. data/vendor/assets/javascripts/uikit/addons/search.js +2 -2
  17. data/vendor/assets/javascripts/uikit/addons/sortable.js +48 -28
  18. data/vendor/assets/javascripts/uikit/addons/sticky.js +148 -37
  19. data/vendor/assets/javascripts/uikit/addons/timepicker.js +11 -9
  20. data/vendor/assets/javascripts/uikit/addons/upload.js +20 -6
  21. data/vendor/assets/javascripts/uikit/uikit.js +309 -288
  22. data/vendor/assets/stylesheets/uikit/addons/uikit.addons.scss +175 -62
  23. data/vendor/assets/stylesheets/uikit/addons/uikit.almost-flat.addons.scss +175 -62
  24. data/vendor/assets/stylesheets/uikit/addons/uikit.gradient.addons.scss +175 -62
  25. data/vendor/assets/stylesheets/uikit/uikit.almost-flat.scss +389 -132
  26. data/vendor/assets/stylesheets/uikit/uikit.gradient.scss +389 -132
  27. data/vendor/assets/stylesheets/uikit/uikit.scss +389 -132
  28. metadata +6 -5
@@ -1,4 +1,4 @@
1
- /*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
1
+ /*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2
2
 
3
3
  /* ========================================================================
4
4
  Component: Dotnav
@@ -149,21 +149,21 @@
149
149
  ========================================================================== */
150
150
  /*
151
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
152
+ * 2. Create position context
153
+ * 3. Prevent `inline-block` consequences
154
+ * 4. Corrects `max-width` behavior if padding and border are used
155
155
  */
156
156
 
157
157
  .uk-slidenav-position {
158
158
  /* 1 */
159
159
  display: inline-block;
160
160
  /* 2 */
161
- -moz-box-sizing: border-box;
162
- box-sizing: border-box;
161
+ position: relative;
163
162
  /* 3 */
164
163
  max-width: 100%;
165
164
  /* 4 */
166
- position: relative;
165
+ -moz-box-sizing: border-box;
166
+ box-sizing: border-box;
167
167
  .uk-slidenav {
168
168
  display: none;
169
169
  position: absolute;
@@ -303,10 +303,18 @@
303
303
  /* ========================================================================
304
304
  Component: Form password
305
305
  ========================================================================== */
306
+ /*
307
+ * 1. Container width fits its content
308
+ * 2. Create position context
309
+ * 3. Prevent `inline-block` consequences
310
+ */
306
311
 
307
312
  .uk-form-password {
308
- position: relative;
313
+ /* 1 */
309
314
  display: inline-block;
315
+ /* 2 */
316
+ position: relative;
317
+ /* 3 */
310
318
  max-width: 100%;
311
319
  }
312
320
 
@@ -406,16 +414,21 @@
406
414
  Component: Autocomplete
407
415
  ========================================================================== */
408
416
  /*
409
- * 1. Behave like form elements
410
- * 2. Create position context for dropdowns
417
+ * 1. Container width fits its content
418
+ * 2. Create position context
419
+ * 3. Prevent `inline-block` consequences
420
+ * 4. Remove the gap between the container and its child element
411
421
  */
412
422
 
413
423
  .uk-autocomplete {
414
424
  /* 1 */
415
425
  display: inline-block;
416
- vertical-align: middle;
417
426
  /* 2 */
418
427
  position: relative;
428
+ /* 3 */
429
+ max-width: 100%;
430
+ /* 4 */
431
+ vertical-align: middle;
419
432
  }
420
433
 
421
434
  /* Nav modifier `uk-nav-autocomplete`
@@ -461,11 +474,20 @@
461
474
  Component: Datepicker
462
475
  ========================================================================== */
463
476
  /*
464
- * Reset dropdown width
477
+ * 1. Reset dropdown width
478
+ * 2. Set animation
479
+ * 3. Needed for scale animation
465
480
  */
466
481
 
467
482
  .uk-datepicker {
483
+ /* 1 */
468
484
  width: auto;
485
+ /* 2 */
486
+ -webkit-animation: uk-fade 0.2s ease-in-out;
487
+ animation: uk-fade 0.2s ease-in-out;
488
+ /* 3 */
489
+ -webkit-transform-origin: 0 0;
490
+ transform-origin: 0 0;
469
491
  }
470
492
 
471
493
  /* Sub-object: `uk-datepicker-nav`
@@ -748,6 +770,7 @@ a.uk-datepicker-table-muted {
748
770
  box-sizing: border-box;
749
771
  padding: 20px;
750
772
  overflow-y: scroll;
773
+ position: relative;
751
774
  }
752
775
 
753
776
  /*
@@ -774,6 +797,17 @@ a.uk-datepicker-table-muted {
774
797
  }
775
798
  }
776
799
 
800
+ /* Sub-object `uk-htmleditor-iframe`
801
+ ========================================================================== */
802
+
803
+ .uk-htmleditor-iframe {
804
+ position: absolute;
805
+ top: 0;
806
+ left: 0;
807
+ width: 100%;
808
+ height: 100%;
809
+ }
810
+
777
811
  /* CodeMirror modifications
778
812
  ========================================================================== */
779
813
 
@@ -1059,7 +1093,7 @@ a.uk-datepicker-table-muted {
1059
1093
  .uk-search-field {
1060
1094
  width: 120px;
1061
1095
  height: 30px;
1062
- padding: 0 30px;
1096
+ padding: 0 0 0 30px;
1063
1097
  border: 1px solid rgba(0, 0, 0, 0);
1064
1098
  background: rgba(0, 0, 0, 0);
1065
1099
  color: #444444;
@@ -1103,53 +1137,6 @@ input.uk-search-field {
1103
1137
  width: 180px;
1104
1138
  }
1105
1139
 
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
1140
  /* Dropdown modifier: `uk-dropdown-search`
1154
1141
  ========================================================================== */
1155
1142
 
@@ -1309,11 +1296,31 @@ input.uk-search-field {
1309
1296
  /* ========================================================================
1310
1297
  Component: Sticky
1311
1298
  ========================================================================== */
1299
+ /*
1300
+ * 1. More robust if padding and border are used
1301
+ */
1312
1302
 
1313
- .uk-sticky {
1314
- z-index: 980;
1303
+ [data-uk-sticky] {
1304
+ &.uk-active {
1305
+ z-index: 980;
1306
+ /* 1 */
1307
+ -moz-box-sizing: border-box;
1308
+ box-sizing: border-box;
1309
+ }
1310
+ &[class*='uk-animation-'] {
1311
+ -webkit-animation-duration: 0.15s;
1312
+ animation-duration: 0.15s;
1313
+ }
1314
+ &.uk-animation-reverse {
1315
+ -webkit-animation-duration: 0.04s;
1316
+ animation-duration: 0.04s;
1317
+ }
1315
1318
  }
1316
1319
 
1320
+ /*
1321
+ * Faster animations
1322
+ */
1323
+
1317
1324
  /* ========================================================================
1318
1325
  Component: Upload
1319
1326
  ========================================================================== */
@@ -1323,4 +1330,110 @@ input.uk-search-field {
1323
1330
 
1324
1331
  .uk-dragover {
1325
1332
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
1333
+ }
1334
+
1335
+ /* ========================================================================
1336
+ Component: Flex
1337
+ ========================================================================== */
1338
+
1339
+ .uk-flex {
1340
+ display: -ms-flexbox;
1341
+ display: -webkit-flex;
1342
+ display: flex;
1343
+ }
1344
+
1345
+ /* Alignment
1346
+ ========================================================================== */
1347
+ /*
1348
+ * Vertical alignment
1349
+ * Default value is `stretch`
1350
+ */
1351
+
1352
+ .uk-flex-top {
1353
+ -ms-flex-align: start;
1354
+ -webkit-align-items: flex-start;
1355
+ align-items: flex-start;
1356
+ }
1357
+
1358
+ .uk-flex-middle {
1359
+ -ms-flex-align: center;
1360
+ -webkit-align-items: center;
1361
+ align-items: center;
1362
+ }
1363
+
1364
+ .uk-flex-bottom {
1365
+ -ms-flex-align: end;
1366
+ -webkit-align-items: flex-end;
1367
+ align-items: flex-end;
1368
+ }
1369
+
1370
+ /*
1371
+ * Horizontal alignment
1372
+ * Default value is `flex-start`
1373
+ */
1374
+
1375
+ .uk-flex-center {
1376
+ -ms-flex-pack: center;
1377
+ -webkit-justify-content: center;
1378
+ justify-content: center;
1379
+ }
1380
+
1381
+ .uk-flex-right {
1382
+ -ms-flex-pack: end;
1383
+ -webkit-justify-content: flex-end;
1384
+ justify-content: flex-end;
1385
+ }
1386
+
1387
+ /* ========================================================================
1388
+ Component: Cover
1389
+ ========================================================================== */
1390
+ /*
1391
+ * Background image always covers and centers its element
1392
+ */
1393
+
1394
+ .uk-cover-background {
1395
+ background-position: 50% 50%;
1396
+ background-size: cover;
1397
+ background-repeat: no-repeat;
1398
+ }
1399
+
1400
+ /*
1401
+ * Emulates image cover, works with video and image elements
1402
+ * 1. Parent container which clips resized object
1403
+ * 2. Resizes the object to always covers its container
1404
+ * 3. Reset the responsive image CSS
1405
+ * 4. Center object
1406
+ */
1407
+ /* 1 */
1408
+
1409
+ .uk-cover {
1410
+ overflow: hidden;
1411
+ }
1412
+
1413
+ .uk-cover-object {
1414
+ /* 2 */
1415
+ width: auto;
1416
+ height: auto;
1417
+ min-width: 100%;
1418
+ min-height: 100%;
1419
+ /* 3 */
1420
+ max-width: none;
1421
+ /* 4 */
1422
+ position: relative;
1423
+ left: 50%;
1424
+ top: 50%;
1425
+ -webkit-transform: translate(-50%, -50%);
1426
+ transform: translate(-50%, -50%);
1427
+ }
1428
+
1429
+ /*
1430
+ * To center iframes use `data-uk-cover` JavaScript
1431
+ */
1432
+
1433
+ [data-uk-cover] {
1434
+ position: relative;
1435
+ left: 50%;
1436
+ top: 50%;
1437
+ -webkit-transform: translate(-50%, -50%);
1438
+ transform: translate(-50%, -50%);
1326
1439
  }
@@ -1,4 +1,4 @@
1
- /*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
1
+ /*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2
2
 
3
3
  /* ========================================================================
4
4
  Component: Dotnav
@@ -153,21 +153,21 @@
153
153
  ========================================================================== */
154
154
  /*
155
155
  * 1. Container width fits its content
156
- * 2. Corrects max-width behavior (3.) if padding and border are used
157
- * 3. Responsive behavior
158
- * 4. Create position context for dropdowns
156
+ * 2. Create position context
157
+ * 3. Prevent `inline-block` consequences
158
+ * 4. Corrects `max-width` behavior if padding and border are used
159
159
  */
160
160
 
161
161
  .uk-slidenav-position {
162
162
  /* 1 */
163
163
  display: inline-block;
164
164
  /* 2 */
165
- -moz-box-sizing: border-box;
166
- box-sizing: border-box;
165
+ position: relative;
167
166
  /* 3 */
168
167
  max-width: 100%;
169
168
  /* 4 */
170
- position: relative;
169
+ -moz-box-sizing: border-box;
170
+ box-sizing: border-box;
171
171
  .uk-slidenav {
172
172
  display: none;
173
173
  position: absolute;
@@ -307,10 +307,18 @@
307
307
  /* ========================================================================
308
308
  Component: Form password
309
309
  ========================================================================== */
310
+ /*
311
+ * 1. Container width fits its content
312
+ * 2. Create position context
313
+ * 3. Prevent `inline-block` consequences
314
+ */
310
315
 
311
316
  .uk-form-password {
312
- position: relative;
317
+ /* 1 */
313
318
  display: inline-block;
319
+ /* 2 */
320
+ position: relative;
321
+ /* 3 */
314
322
  max-width: 100%;
315
323
  }
316
324
 
@@ -410,16 +418,21 @@
410
418
  Component: Autocomplete
411
419
  ========================================================================== */
412
420
  /*
413
- * 1. Behave like form elements
414
- * 2. Create position context for dropdowns
421
+ * 1. Container width fits its content
422
+ * 2. Create position context
423
+ * 3. Prevent `inline-block` consequences
424
+ * 4. Remove the gap between the container and its child element
415
425
  */
416
426
 
417
427
  .uk-autocomplete {
418
428
  /* 1 */
419
429
  display: inline-block;
420
- vertical-align: middle;
421
430
  /* 2 */
422
431
  position: relative;
432
+ /* 3 */
433
+ max-width: 100%;
434
+ /* 4 */
435
+ vertical-align: middle;
423
436
  }
424
437
 
425
438
  /* Nav modifier `uk-nav-autocomplete`
@@ -467,11 +480,20 @@
467
480
  Component: Datepicker
468
481
  ========================================================================== */
469
482
  /*
470
- * Reset dropdown width
483
+ * 1. Reset dropdown width
484
+ * 2. Set animation
485
+ * 3. Needed for scale animation
471
486
  */
472
487
 
473
488
  .uk-datepicker {
489
+ /* 1 */
474
490
  width: auto;
491
+ /* 2 */
492
+ -webkit-animation: uk-fade 0.2s ease-in-out;
493
+ animation: uk-fade 0.2s ease-in-out;
494
+ /* 3 */
495
+ -webkit-transform-origin: 0 0;
496
+ transform-origin: 0 0;
475
497
  }
476
498
 
477
499
  /* Sub-object: `uk-datepicker-nav`
@@ -786,6 +808,7 @@ a.uk-datepicker-table-muted {
786
808
  box-sizing: border-box;
787
809
  padding: 20px;
788
810
  overflow-y: scroll;
811
+ position: relative;
789
812
  }
790
813
 
791
814
  /*
@@ -812,6 +835,17 @@ a.uk-datepicker-table-muted {
812
835
  }
813
836
  }
814
837
 
838
+ /* Sub-object `uk-htmleditor-iframe`
839
+ ========================================================================== */
840
+
841
+ .uk-htmleditor-iframe {
842
+ position: absolute;
843
+ top: 0;
844
+ left: 0;
845
+ width: 100%;
846
+ height: 100%;
847
+ }
848
+
815
849
  /* CodeMirror modifications
816
850
  ========================================================================== */
817
851
 
@@ -1154,7 +1188,7 @@ a.uk-datepicker-table-muted {
1154
1188
  .uk-search-field {
1155
1189
  width: 120px;
1156
1190
  height: 30px;
1157
- padding: 0 30px;
1191
+ padding: 0 0 0 30px;
1158
1192
  border: 1px solid rgba(0, 0, 0, 0);
1159
1193
  background: rgba(0, 0, 0, 0);
1160
1194
  color: #444444;
@@ -1198,53 +1232,6 @@ input.uk-search-field {
1198
1232
  width: 180px;
1199
1233
  }
1200
1234
 
1201
- /* Sub-object `uk-search-close`
1202
- ========================================================================== */
1203
- /*
1204
- * 1. Required for `button` elements
1205
- * 2. Needed for Safari
1206
- */
1207
-
1208
- .uk-search-close {
1209
- display: none;
1210
- position: absolute;
1211
- top: 0;
1212
- right: 0;
1213
- width: 30px;
1214
- line-height: 30px;
1215
- text-align: center;
1216
- font-size: 14px;
1217
- color: rgba(0, 0, 0, 0.2);
1218
- /* 1. */
1219
- padding: 0;
1220
- border: 0;
1221
- -webkit-appearance: none;
1222
- /* 2. */
1223
- background: transparent;
1224
- }
1225
-
1226
- .uk-loading > .uk-search-close, .uk-active > .uk-search-close {
1227
- display: block;
1228
- }
1229
-
1230
- /*
1231
- * Icon
1232
- */
1233
-
1234
- .uk-search-close:after {
1235
- display: block;
1236
- content: "\f00d";
1237
- font-family: FontAwesome;
1238
- }
1239
-
1240
- /* Loading icon */
1241
-
1242
- .uk-loading > .uk-search-close:after {
1243
- content: "\f110";
1244
- -webkit-animation: uk-spin 2s infinite linear;
1245
- animation: uk-spin 2s infinite linear;
1246
- }
1247
-
1248
1235
  /* Dropdown modifier: `uk-dropdown-search`
1249
1236
  ========================================================================== */
1250
1237
 
@@ -1406,11 +1393,31 @@ input.uk-search-field {
1406
1393
  /* ========================================================================
1407
1394
  Component: Sticky
1408
1395
  ========================================================================== */
1396
+ /*
1397
+ * 1. More robust if padding and border are used
1398
+ */
1409
1399
 
1410
- .uk-sticky {
1411
- z-index: 980;
1400
+ [data-uk-sticky] {
1401
+ &.uk-active {
1402
+ z-index: 980;
1403
+ /* 1 */
1404
+ -moz-box-sizing: border-box;
1405
+ box-sizing: border-box;
1406
+ }
1407
+ &[class*='uk-animation-'] {
1408
+ -webkit-animation-duration: 0.15s;
1409
+ animation-duration: 0.15s;
1410
+ }
1411
+ &.uk-animation-reverse {
1412
+ -webkit-animation-duration: 0.04s;
1413
+ animation-duration: 0.04s;
1414
+ }
1412
1415
  }
1413
1416
 
1417
+ /*
1418
+ * Faster animations
1419
+ */
1420
+
1414
1421
  /* ========================================================================
1415
1422
  Component: Upload
1416
1423
  ========================================================================== */
@@ -1420,4 +1427,110 @@ input.uk-search-field {
1420
1427
 
1421
1428
  .uk-dragover {
1422
1429
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
1430
+ }
1431
+
1432
+ /* ========================================================================
1433
+ Component: Flex
1434
+ ========================================================================== */
1435
+
1436
+ .uk-flex {
1437
+ display: -ms-flexbox;
1438
+ display: -webkit-flex;
1439
+ display: flex;
1440
+ }
1441
+
1442
+ /* Alignment
1443
+ ========================================================================== */
1444
+ /*
1445
+ * Vertical alignment
1446
+ * Default value is `stretch`
1447
+ */
1448
+
1449
+ .uk-flex-top {
1450
+ -ms-flex-align: start;
1451
+ -webkit-align-items: flex-start;
1452
+ align-items: flex-start;
1453
+ }
1454
+
1455
+ .uk-flex-middle {
1456
+ -ms-flex-align: center;
1457
+ -webkit-align-items: center;
1458
+ align-items: center;
1459
+ }
1460
+
1461
+ .uk-flex-bottom {
1462
+ -ms-flex-align: end;
1463
+ -webkit-align-items: flex-end;
1464
+ align-items: flex-end;
1465
+ }
1466
+
1467
+ /*
1468
+ * Horizontal alignment
1469
+ * Default value is `flex-start`
1470
+ */
1471
+
1472
+ .uk-flex-center {
1473
+ -ms-flex-pack: center;
1474
+ -webkit-justify-content: center;
1475
+ justify-content: center;
1476
+ }
1477
+
1478
+ .uk-flex-right {
1479
+ -ms-flex-pack: end;
1480
+ -webkit-justify-content: flex-end;
1481
+ justify-content: flex-end;
1482
+ }
1483
+
1484
+ /* ========================================================================
1485
+ Component: Cover
1486
+ ========================================================================== */
1487
+ /*
1488
+ * Background image always covers and centers its element
1489
+ */
1490
+
1491
+ .uk-cover-background {
1492
+ background-position: 50% 50%;
1493
+ background-size: cover;
1494
+ background-repeat: no-repeat;
1495
+ }
1496
+
1497
+ /*
1498
+ * Emulates image cover, works with video and image elements
1499
+ * 1. Parent container which clips resized object
1500
+ * 2. Resizes the object to always covers its container
1501
+ * 3. Reset the responsive image CSS
1502
+ * 4. Center object
1503
+ */
1504
+ /* 1 */
1505
+
1506
+ .uk-cover {
1507
+ overflow: hidden;
1508
+ }
1509
+
1510
+ .uk-cover-object {
1511
+ /* 2 */
1512
+ width: auto;
1513
+ height: auto;
1514
+ min-width: 100%;
1515
+ min-height: 100%;
1516
+ /* 3 */
1517
+ max-width: none;
1518
+ /* 4 */
1519
+ position: relative;
1520
+ left: 50%;
1521
+ top: 50%;
1522
+ -webkit-transform: translate(-50%, -50%);
1523
+ transform: translate(-50%, -50%);
1524
+ }
1525
+
1526
+ /*
1527
+ * To center iframes use `data-uk-cover` JavaScript
1528
+ */
1529
+
1530
+ [data-uk-cover] {
1531
+ position: relative;
1532
+ left: 50%;
1533
+ top: 50%;
1534
+ -webkit-transform: translate(-50%, -50%);
1535
+ transform: translate(-50%, -50%);
1423
1536
  }