uikit 3.13.7-dev.04818b8b8 → 3.13.8-dev.06ac04d2b

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 (71) hide show
  1. package/CHANGELOG.md +19 -1
  2. package/dist/css/uikit-core-rtl.css +34 -5
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +34 -5
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +34 -3
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +34 -3
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +12 -10
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +12 -10
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +12 -10
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +59 -29
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +172 -176
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +209 -180
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +5 -5
  43. package/src/js/components/tooltip.js +38 -3
  44. package/src/js/core/accordion.js +1 -1
  45. package/src/js/core/drop.js +10 -6
  46. package/src/js/core/height-match.js +10 -15
  47. package/src/js/core/navbar.js +1 -1
  48. package/src/js/mixin/media.js +11 -9
  49. package/src/js/mixin/position.js +22 -24
  50. package/src/js/util/position.js +128 -129
  51. package/src/less/components/dropdown.less +11 -1
  52. package/src/less/components/nav.less +22 -0
  53. package/src/less/components/navbar.less +22 -2
  54. package/src/less/theme/dropdown.less +2 -0
  55. package/src/less/theme/nav.less +4 -0
  56. package/src/less/theme/navbar.less +2 -0
  57. package/src/scss/components/dropdown.scss +11 -1
  58. package/src/scss/components/nav.scss +22 -0
  59. package/src/scss/components/navbar.scss +22 -2
  60. package/src/scss/mixins-theme.scss +4 -0
  61. package/src/scss/mixins.scss +4 -0
  62. package/src/scss/theme/dropdown.scss +2 -0
  63. package/src/scss/theme/nav.scss +4 -0
  64. package/src/scss/theme/navbar.scss +2 -0
  65. package/src/scss/variables-theme.scss +5 -1
  66. package/src/scss/variables.scss +5 -1
  67. package/tests/drop.html +0 -6
  68. package/tests/dropdown.html +18 -10
  69. package/tests/nav.html +27 -0
  70. package/tests/navbar.html +18 -4
  71. package/tests/position.html +38 -39
@@ -48,6 +48,7 @@
48
48
  @nav-default-item-color: @global-muted-color;
49
49
  @nav-default-item-hover-color: @global-color;
50
50
  @nav-default-item-active-color: @global-emphasis-color;
51
+ @nav-default-subtitle-font-size: @global-small-font-size;
51
52
  @nav-default-header-color: @global-emphasis-color;
52
53
  @nav-default-divider-border-width: @global-border-width;
53
54
  @nav-default-divider-border: @global-border;
@@ -60,6 +61,7 @@
60
61
  @nav-primary-item-color: @global-muted-color;
61
62
  @nav-primary-item-hover-color: @global-color;
62
63
  @nav-primary-item-active-color: @global-emphasis-color;
64
+ @nav-primary-subtitle-font-size: @global-medium-font-size;
63
65
  @nav-primary-header-color: @global-emphasis-color;
64
66
  @nav-primary-divider-border-width: @global-border-width;
65
67
  @nav-primary-divider-border: @global-border;
@@ -207,6 +209,15 @@ ul.uk-nav-sub {
207
209
  .hook-nav-default-item-active();
208
210
  }
209
211
 
212
+ /*
213
+ * Subtitle
214
+ */
215
+
216
+ .uk-nav-default .uk-nav-subtitle {
217
+ font-size: @nav-default-subtitle-font-size;
218
+ .hook-nav-default-subtitle();
219
+ }
220
+
210
221
  /*
211
222
  * Header
212
223
  */
@@ -266,6 +277,15 @@ ul.uk-nav-sub {
266
277
  .hook-nav-primary-item-active();
267
278
  }
268
279
 
280
+ /*
281
+ * Subtitle
282
+ */
283
+
284
+ .uk-nav-primary .uk-nav-subtitle {
285
+ font-size: @nav-primary-subtitle-font-size;
286
+ .hook-nav-primary-subtitle();
287
+ }
288
+
269
289
  /*
270
290
  * Header
271
291
  */
@@ -340,12 +360,14 @@ ul.uk-nav-sub {
340
360
  .hook-nav-default-item() {}
341
361
  .hook-nav-default-item-hover() {}
342
362
  .hook-nav-default-item-active() {}
363
+ .hook-nav-default-subtitle() {}
343
364
  .hook-nav-default-header() {}
344
365
  .hook-nav-default-divider() {}
345
366
  .hook-nav-primary() {}
346
367
  .hook-nav-primary-item() {}
347
368
  .hook-nav-primary-item-hover() {}
348
369
  .hook-nav-primary-item-active() {}
370
+ .hook-nav-primary-subtitle() {}
349
371
  .hook-nav-primary-header() {}
350
372
  .hook-nav-primary-divider() {}
351
373
  .hook-nav-dividers() {}
@@ -66,11 +66,12 @@
66
66
 
67
67
  @navbar-dropdown-dropbar-margin-top: 0px;
68
68
  @navbar-dropdown-dropbar-margin-bottom: @navbar-dropdown-dropbar-margin-top;
69
- @navbar-dropdown-dropbar-padding: @navbar-nav-item-padding-horizontal;
69
+ @navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
70
70
 
71
71
  @navbar-dropdown-nav-item-color: @global-muted-color;
72
72
  @navbar-dropdown-nav-item-hover-color: @global-color;
73
73
  @navbar-dropdown-nav-item-active-color: @global-emphasis-color;
74
+ @navbar-dropdown-nav-subtitle-font-size: @global-small-font-size;
74
75
  @navbar-dropdown-nav-header-color: @global-emphasis-color;
75
76
  @navbar-dropdown-nav-divider-border-width: @global-border-width;
76
77
  @navbar-dropdown-nav-divider-border: @global-border;
@@ -393,6 +394,7 @@
393
394
  * 1. Set position
394
395
  * 2. Bottom padding for dropbar
395
396
  * 3. Horizontal padding
397
+ * 4. Reset padding if aligned to boundary
396
398
  */
397
399
 
398
400
  .uk-navbar-dropdown-dropbar {
@@ -400,10 +402,18 @@
400
402
  --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
401
403
  /* 2 */
402
404
  margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
403
- padding: @navbar-dropdown-dropbar-padding;
405
+ /* 3 */
406
+ padding-left: @navbar-dropdown-dropbar-padding-horizontal;
407
+ padding-right: @navbar-dropdown-dropbar-padding-horizontal;
404
408
  .hook-navbar-dropdown-dropbar();
405
409
  }
406
410
 
411
+ /* 4 */
412
+ .uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
413
+ padding-left: 0;
414
+ padding-right: 0;
415
+ }
416
+
407
417
 
408
418
  /* Dropdown Nav
409
419
  * Adopts `uk-nav`
@@ -434,6 +444,15 @@
434
444
  .hook-navbar-dropdown-nav-item-active();
435
445
  }
436
446
 
447
+ /*
448
+ * Subtitle
449
+ */
450
+
451
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
452
+ font-size: @navbar-dropdown-nav-subtitle-font-size;
453
+ .hook-navbar-dropdown-nav-subtitle();
454
+ }
455
+
437
456
  /*
438
457
  * Header
439
458
  */
@@ -502,6 +521,7 @@
502
521
  .hook-navbar-dropdown-nav-item() {}
503
522
  .hook-navbar-dropdown-nav-item-hover() {}
504
523
  .hook-navbar-dropdown-nav-item-active() {}
524
+ .hook-navbar-dropdown-nav-subtitle() {}
505
525
  .hook-navbar-dropdown-nav-header() {}
506
526
  .hook-navbar-dropdown-nav-divider() {}
507
527
  .hook-navbar-dropbar(){}
@@ -34,6 +34,8 @@
34
34
 
35
35
  .hook-dropdown-nav-item-hover() {}
36
36
 
37
+ .hook-dropdown-nav-subtitle() {}
38
+
37
39
  .hook-dropdown-nav-header() {}
38
40
 
39
41
  .hook-dropdown-nav-divider() {}
@@ -49,6 +49,8 @@
49
49
 
50
50
  .hook-nav-default-item-active() {}
51
51
 
52
+ .hook-nav-default-subtitle() {}
53
+
52
54
  .hook-nav-default-header() {}
53
55
 
54
56
  .hook-nav-default-divider() {}
@@ -65,6 +67,8 @@
65
67
 
66
68
  .hook-nav-primary-item-active() {}
67
69
 
70
+ .hook-nav-primary-subtitle() {}
71
+
68
72
  .hook-nav-primary-header() {}
69
73
 
70
74
  .hook-nav-primary-divider() {}
@@ -109,6 +109,8 @@
109
109
 
110
110
  .hook-navbar-dropdown-nav-item-hover() {}
111
111
 
112
+ .hook-navbar-dropdown-nav-subtitle() {}
113
+
112
114
  .hook-navbar-dropdown-nav-header() {}
113
115
 
114
116
  .hook-navbar-dropdown-nav-divider() {}
@@ -29,6 +29,7 @@ $dropdown-color: $global-color !default;
29
29
 
30
30
  $dropdown-nav-item-color: $global-muted-color !default;
31
31
  $dropdown-nav-item-hover-color: $global-color !default;
32
+ $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
32
33
  $dropdown-nav-header-color: $global-emphasis-color !default;
33
34
  $dropdown-nav-divider-border-width: $global-border-width !default;
34
35
  $dropdown-nav-divider-border: $global-border !default;
@@ -74,7 +75,6 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
74
75
  ========================================================================== */
75
76
 
76
77
  .uk-dropdown-nav {
77
- white-space: nowrap;
78
78
  @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
79
79
  }
80
80
 
@@ -94,6 +94,15 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
94
94
  @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
95
95
  }
96
96
 
97
+ /*
98
+ * Subtitle
99
+ */
100
+
101
+ .uk-dropdown-nav .uk-nav-subtitle {
102
+ font-size: $dropdown-nav-subtitle-font-size;
103
+ @if(mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();}
104
+ }
105
+
97
106
  /*
98
107
  * Header
99
108
  */
@@ -138,6 +147,7 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
138
147
  // @mixin hook-dropdown-nav(){}
139
148
  // @mixin hook-dropdown-nav-item(){}
140
149
  // @mixin hook-dropdown-nav-item-hover(){}
150
+ // @mixin hook-dropdown-nav-subtitle(){}
141
151
  // @mixin hook-dropdown-nav-header(){}
142
152
  // @mixin hook-dropdown-nav-divider(){}
143
153
  // @mixin hook-dropdown-misc(){}
@@ -48,6 +48,7 @@ $nav-divider-margin-horizontal: 0 !default;
48
48
  $nav-default-item-color: $global-muted-color !default;
49
49
  $nav-default-item-hover-color: $global-color !default;
50
50
  $nav-default-item-active-color: $global-emphasis-color !default;
51
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
51
52
  $nav-default-header-color: $global-emphasis-color !default;
52
53
  $nav-default-divider-border-width: $global-border-width !default;
53
54
  $nav-default-divider-border: $global-border !default;
@@ -60,6 +61,7 @@ $nav-primary-item-line-height: $global-line-height !default;
60
61
  $nav-primary-item-color: $global-muted-color !default;
61
62
  $nav-primary-item-hover-color: $global-color !default;
62
63
  $nav-primary-item-active-color: $global-emphasis-color !default;
64
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
63
65
  $nav-primary-header-color: $global-emphasis-color !default;
64
66
  $nav-primary-divider-border-width: $global-border-width !default;
65
67
  $nav-primary-divider-border: $global-border !default;
@@ -207,6 +209,15 @@ ul.uk-nav-sub {
207
209
  @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
208
210
  }
209
211
 
212
+ /*
213
+ * Subtitle
214
+ */
215
+
216
+ .uk-nav-default .uk-nav-subtitle {
217
+ font-size: $nav-default-subtitle-font-size;
218
+ @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
219
+ }
220
+
210
221
  /*
211
222
  * Header
212
223
  */
@@ -266,6 +277,15 @@ ul.uk-nav-sub {
266
277
  @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
267
278
  }
268
279
 
280
+ /*
281
+ * Subtitle
282
+ */
283
+
284
+ .uk-nav-primary .uk-nav-subtitle {
285
+ font-size: $nav-primary-subtitle-font-size;
286
+ @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
287
+ }
288
+
269
289
  /*
270
290
  * Header
271
291
  */
@@ -340,12 +360,14 @@ ul.uk-nav-sub {
340
360
  // @mixin hook-nav-default-item(){}
341
361
  // @mixin hook-nav-default-item-hover(){}
342
362
  // @mixin hook-nav-default-item-active(){}
363
+ // @mixin hook-nav-default-subtitle(){}
343
364
  // @mixin hook-nav-default-header(){}
344
365
  // @mixin hook-nav-default-divider(){}
345
366
  // @mixin hook-nav-primary(){}
346
367
  // @mixin hook-nav-primary-item(){}
347
368
  // @mixin hook-nav-primary-item-hover(){}
348
369
  // @mixin hook-nav-primary-item-active(){}
370
+ // @mixin hook-nav-primary-subtitle(){}
349
371
  // @mixin hook-nav-primary-header(){}
350
372
  // @mixin hook-nav-primary-divider(){}
351
373
  // @mixin hook-nav-dividers(){}
@@ -66,11 +66,12 @@ $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-ho
66
66
 
67
67
  $navbar-dropdown-dropbar-margin-top: 0px !default;
68
68
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
69
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
69
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
70
70
 
71
71
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
72
72
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
73
73
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
74
+ $navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
74
75
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
75
76
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
76
77
  $navbar-dropdown-nav-divider-border: $global-border !default;
@@ -393,6 +394,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
393
394
  * 1. Set position
394
395
  * 2. Bottom padding for dropbar
395
396
  * 3. Horizontal padding
397
+ * 4. Reset padding if aligned to boundary
396
398
  */
397
399
 
398
400
  .uk-navbar-dropdown-dropbar {
@@ -400,10 +402,18 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
400
402
  --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
401
403
  /* 2 */
402
404
  margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
403
- padding: $navbar-dropdown-dropbar-padding;
405
+ /* 3 */
406
+ padding-left: $navbar-dropdown-dropbar-padding-horizontal;
407
+ padding-right: $navbar-dropdown-dropbar-padding-horizontal;
404
408
  @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
405
409
  }
406
410
 
411
+ /* 4 */
412
+ .uk-navbar-dropdown-dropbar.uk-navbar-dropdown-boundary {
413
+ padding-left: 0;
414
+ padding-right: 0;
415
+ }
416
+
407
417
 
408
418
  /* Dropdown Nav
409
419
  * Adopts `uk-nav`
@@ -434,6 +444,15 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
434
444
  @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
435
445
  }
436
446
 
447
+ /*
448
+ * Subtitle
449
+ */
450
+
451
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
452
+ font-size: $navbar-dropdown-nav-subtitle-font-size;
453
+ @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
454
+ }
455
+
437
456
  /*
438
457
  * Header
439
458
  */
@@ -502,6 +521,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
502
521
  // @mixin hook-navbar-dropdown-nav-item(){}
503
522
  // @mixin hook-navbar-dropdown-nav-item-hover(){}
504
523
  // @mixin hook-navbar-dropdown-nav-item-active(){}
524
+ // @mixin hook-navbar-dropdown-nav-subtitle(){}
505
525
  // @mixin hook-navbar-dropdown-nav-header(){}
506
526
  // @mixin hook-navbar-dropdown-nav-divider(){}
507
527
  // @mixin hook-navbar-dropbar(){}
@@ -809,6 +809,7 @@
809
809
  @mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
810
810
  @mixin hook-dropdown-nav-item(){}
811
811
  @mixin hook-dropdown-nav-item-hover(){}
812
+ @mixin hook-dropdown-nav-subtitle(){}
812
813
  @mixin hook-dropdown-nav-header(){}
813
814
  @mixin hook-dropdown-nav-divider(){}
814
815
  @mixin hook-dropdown-misc(){}
@@ -1706,12 +1707,14 @@
1706
1707
  @mixin hook-nav-default-item(){}
1707
1708
  @mixin hook-nav-default-item-hover(){}
1708
1709
  @mixin hook-nav-default-item-active(){}
1710
+ @mixin hook-nav-default-subtitle(){}
1709
1711
  @mixin hook-nav-default-header(){}
1710
1712
  @mixin hook-nav-default-divider(){}
1711
1713
  @mixin hook-nav-primary(){}
1712
1714
  @mixin hook-nav-primary-item(){}
1713
1715
  @mixin hook-nav-primary-item-hover(){}
1714
1716
  @mixin hook-nav-primary-item-active(){}
1717
+ @mixin hook-nav-primary-subtitle(){}
1715
1718
  @mixin hook-nav-primary-header(){}
1716
1719
  @mixin hook-nav-primary-divider(){}
1717
1720
  @mixin hook-nav-dividers(){}
@@ -1752,6 +1755,7 @@
1752
1755
  @mixin hook-navbar-dropdown-nav-item(){}
1753
1756
  @mixin hook-navbar-dropdown-nav-item-hover(){}
1754
1757
  @mixin hook-navbar-dropdown-nav-item-active(){}
1758
+ @mixin hook-navbar-dropdown-nav-subtitle(){}
1755
1759
  @mixin hook-navbar-dropdown-nav-header(){}
1756
1760
  @mixin hook-navbar-dropdown-nav-divider(){}
1757
1761
  @mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }
@@ -584,6 +584,7 @@
584
584
  @mixin hook-dropdown-nav(){}
585
585
  @mixin hook-dropdown-nav-item(){}
586
586
  @mixin hook-dropdown-nav-item-hover(){}
587
+ @mixin hook-dropdown-nav-subtitle(){}
587
588
  @mixin hook-dropdown-nav-header(){}
588
589
  @mixin hook-dropdown-nav-divider(){}
589
590
  @mixin hook-dropdown-misc(){}
@@ -1436,12 +1437,14 @@
1436
1437
  @mixin hook-nav-default-item(){}
1437
1438
  @mixin hook-nav-default-item-hover(){}
1438
1439
  @mixin hook-nav-default-item-active(){}
1440
+ @mixin hook-nav-default-subtitle(){}
1439
1441
  @mixin hook-nav-default-header(){}
1440
1442
  @mixin hook-nav-default-divider(){}
1441
1443
  @mixin hook-nav-primary(){}
1442
1444
  @mixin hook-nav-primary-item(){}
1443
1445
  @mixin hook-nav-primary-item-hover(){}
1444
1446
  @mixin hook-nav-primary-item-active(){}
1447
+ @mixin hook-nav-primary-subtitle(){}
1445
1448
  @mixin hook-nav-primary-header(){}
1446
1449
  @mixin hook-nav-primary-divider(){}
1447
1450
  @mixin hook-nav-dividers(){}
@@ -1478,6 +1481,7 @@
1478
1481
  @mixin hook-navbar-dropdown-nav-item(){}
1479
1482
  @mixin hook-navbar-dropdown-nav-item-hover(){}
1480
1483
  @mixin hook-navbar-dropdown-nav-item-active(){}
1484
+ @mixin hook-navbar-dropdown-nav-subtitle(){}
1481
1485
  @mixin hook-navbar-dropdown-nav-header(){}
1482
1486
  @mixin hook-navbar-dropdown-nav-divider(){}
1483
1487
  @mixin hook-navbar-dropbar(){}
@@ -34,6 +34,8 @@ $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !de
34
34
 
35
35
  // @mixin hook-dropdown-nav-item-hover(){}
36
36
 
37
+ // @mixin hook-dropdown-nav-subtitle(){}
38
+
37
39
  // @mixin hook-dropdown-nav-header(){}
38
40
 
39
41
  // @mixin hook-dropdown-nav-divider(){}
@@ -49,6 +49,8 @@ $nav-default-font-size: $global-small-font-size !defaul
49
49
 
50
50
  // @mixin hook-nav-default-item-active(){}
51
51
 
52
+ // @mixin hook-nav-default-subtitle(){}
53
+
52
54
  // @mixin hook-nav-default-header(){}
53
55
 
54
56
  // @mixin hook-nav-default-divider(){}
@@ -65,6 +67,8 @@ $nav-default-font-size: $global-small-font-size !defaul
65
67
 
66
68
  // @mixin hook-nav-primary-item-active(){}
67
69
 
70
+ // @mixin hook-nav-primary-subtitle(){}
71
+
68
72
  // @mixin hook-nav-primary-header(){}
69
73
 
70
74
  // @mixin hook-nav-primary-divider(){}
@@ -105,6 +105,8 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
105
105
 
106
106
  // @mixin hook-navbar-dropdown-nav-item-hover(){}
107
107
 
108
+ // @mixin hook-navbar-dropdown-nav-subtitle(){}
109
+
108
110
  // @mixin hook-navbar-dropdown-nav-header(){}
109
111
 
110
112
  // @mixin hook-navbar-dropdown-nav-divider(){}
@@ -376,6 +376,7 @@ $dropdown-background: $global-background !default;
376
376
  $dropdown-color: $global-color !default;
377
377
  $dropdown-nav-item-color: $global-muted-color !default;
378
378
  $dropdown-nav-item-hover-color: $global-color !default;
379
+ $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
379
380
  $dropdown-nav-header-color: $global-emphasis-color !default;
380
381
  $dropdown-nav-divider-border-width: $global-border-width !default;
381
382
  $dropdown-nav-divider-border: $global-border !default;
@@ -684,6 +685,7 @@ $nav-divider-margin-horizontal: 0 !default;
684
685
  $nav-default-item-color: $global-muted-color !default;
685
686
  $nav-default-item-hover-color: $global-color !default;
686
687
  $nav-default-item-active-color: $global-emphasis-color !default;
688
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
687
689
  $nav-default-header-color: $global-emphasis-color !default;
688
690
  $nav-default-divider-border-width: $global-border-width !default;
689
691
  $nav-default-divider-border: $global-border !default;
@@ -695,6 +697,7 @@ $nav-primary-item-line-height: $global-line-height !default;
695
697
  $nav-primary-item-color: $global-muted-color !default;
696
698
  $nav-primary-item-hover-color: $global-color !default;
697
699
  $nav-primary-item-active-color: $global-emphasis-color !default;
700
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
698
701
  $nav-primary-header-color: $global-emphasis-color !default;
699
702
  $nav-primary-divider-border-width: $global-border-width !default;
700
703
  $nav-primary-divider-border: $global-border !default;
@@ -748,10 +751,11 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default
748
751
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
749
752
  $navbar-dropdown-dropbar-margin-top: 0px !default;
750
753
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
751
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
754
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
752
755
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
753
756
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
754
757
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
758
+ $navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
755
759
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
756
760
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
757
761
  $navbar-dropdown-nav-divider-border: $global-border !default;
@@ -375,6 +375,7 @@ $dropdown-background: $global-muted-background !default;
375
375
  $dropdown-color: $global-color !default;
376
376
  $dropdown-nav-item-color: $global-muted-color !default;
377
377
  $dropdown-nav-item-hover-color: $global-color !default;
378
+ $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
378
379
  $dropdown-nav-header-color: $global-emphasis-color !default;
379
380
  $dropdown-nav-divider-border-width: $global-border-width !default;
380
381
  $dropdown-nav-divider-border: $global-border !default;
@@ -682,6 +683,7 @@ $nav-divider-margin-horizontal: 0 !default;
682
683
  $nav-default-item-color: $global-muted-color !default;
683
684
  $nav-default-item-hover-color: $global-color !default;
684
685
  $nav-default-item-active-color: $global-emphasis-color !default;
686
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
685
687
  $nav-default-header-color: $global-emphasis-color !default;
686
688
  $nav-default-divider-border-width: $global-border-width !default;
687
689
  $nav-default-divider-border: $global-border !default;
@@ -693,6 +695,7 @@ $nav-primary-item-line-height: $global-line-height !default;
693
695
  $nav-primary-item-color: $global-muted-color !default;
694
696
  $nav-primary-item-hover-color: $global-color !default;
695
697
  $nav-primary-item-active-color: $global-emphasis-color !default;
698
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
696
699
  $nav-primary-header-color: $global-emphasis-color !default;
697
700
  $nav-primary-divider-border-width: $global-border-width !default;
698
701
  $nav-primary-divider-border: $global-border !default;
@@ -746,10 +749,11 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
746
749
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
747
750
  $navbar-dropdown-dropbar-margin-top: 0px !default;
748
751
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
749
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
752
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
750
753
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
751
754
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
752
755
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
756
+ $navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
753
757
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
754
758
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
755
759
  $navbar-dropdown-nav-divider-border: $global-border !default;
package/tests/drop.html CHANGED
@@ -395,12 +395,6 @@
395
395
  <td>true</td>
396
396
  <td>Automatic Drop flip.</td>
397
397
  </tr>
398
- <tr>
399
- <td><code>cls</code></td>
400
- <td>String</td>
401
- <td>'uk-drop'</td>
402
- <td>The Drop container class.</td>
403
- </tr>
404
398
  <tr>
405
399
  <td><code>offset</code></td>
406
400
  <td>Number</td>
@@ -24,7 +24,7 @@
24
24
  <h1>Dropdown</h1>
25
25
 
26
26
  <div uk-grid>
27
- <div class="uk-width-1-3@m">
27
+ <div class="uk-width-1-4@m">
28
28
 
29
29
  <div class="uk-dropdown test">
30
30
 
@@ -59,7 +59,21 @@
59
59
  </div>
60
60
 
61
61
  </div>
62
- <div class="uk-width-2-3@m">
62
+ <div class="uk-width-1-4@m">
63
+
64
+ <div class="uk-dropdown test">
65
+
66
+ <ul class="uk-nav uk-dropdown-nav">
67
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
68
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
69
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
70
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
71
+ </ul>
72
+
73
+ </div>
74
+
75
+ </div>
76
+ <div class="uk-width-1-2@m">
63
77
 
64
78
  <div class="uk-margin" uk-margin>
65
79
 
@@ -384,8 +398,8 @@
384
398
  <tr>
385
399
  <td><code>boundary</code></td>
386
400
  <td>CSS selector</td>
387
- <td>window</td>
388
- <td>Referenced element to keep Dropdown's visibility.</td>
401
+ <td>true</td>
402
+ <td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
389
403
  </tr>
390
404
  <tr>
391
405
  <td><code>boundary-align</code></td>
@@ -399,12 +413,6 @@
399
413
  <td>true</td>
400
414
  <td>Automatic Dropdown flip.</td>
401
415
  </tr>
402
- <tr>
403
- <td><code>cls</code></td>
404
- <td>String</td>
405
- <td>'uk-dropdown'</td>
406
- <td>The Dropdown container class.</td>
407
- </tr>
408
416
  <tr>
409
417
  <td><code>offset</code></td>
410
418
  <td>Number</td>
package/tests/nav.html CHANGED
@@ -287,6 +287,33 @@
287
287
  </div>
288
288
  </div>
289
289
 
290
+ <div class="uk-child-width-1-4@m" uk-grid>
291
+ <div>
292
+
293
+ <h2>Default</h2>
294
+
295
+ <ul class="uk-nav uk-nav-default">
296
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
297
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
298
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
299
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
300
+ </ul>
301
+
302
+ </div>
303
+ <div>
304
+
305
+ <h2>Primary</h2>
306
+
307
+ <ul class="uk-nav uk-nav-primary">
308
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
309
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
310
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
311
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
312
+ </ul>
313
+
314
+ </div>
315
+ </div>
316
+
290
317
  <h2>JavaScript Options</h2>
291
318
 
292
319
  <table class="uk-table uk-table-striped">