uikit 3.13.10 → 3.13.11-dev.1296bb84c

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 (100) hide show
  1. package/CHANGELOG.md +33 -1
  2. package/dist/css/uikit-core-rtl.css +49 -8
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +49 -8
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +49 -6
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +49 -6
  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 +7 -3
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +7 -3
  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 +21 -12
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +21 -12
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +2 -2
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +21 -12
  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 +2 -2
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +62 -30
  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 +422 -299
  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 +469 -307
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/slider.js +1 -1
  44. package/src/js/components/sortable.js +2 -3
  45. package/src/js/components/tooltip.js +38 -3
  46. package/src/js/core/cover.js +27 -14
  47. package/src/js/core/drop.js +40 -11
  48. package/src/js/core/height-match.js +1 -1
  49. package/src/js/core/margin.js +9 -2
  50. package/src/js/core/navbar.js +18 -6
  51. package/src/js/core/scrollspy-nav.js +6 -11
  52. package/src/js/core/sticky.js +55 -21
  53. package/src/js/mixin/media.js +12 -9
  54. package/src/js/mixin/modal.js +6 -2
  55. package/src/js/mixin/parallax.js +8 -3
  56. package/src/js/mixin/position.js +24 -24
  57. package/src/js/uikit-core.js +0 -4
  58. package/src/js/util/lang.js +34 -42
  59. package/src/js/util/position.js +180 -125
  60. package/src/js/util/viewport.js +42 -22
  61. package/src/less/components/drop.less +0 -1
  62. package/src/less/components/dropdown.less +11 -1
  63. package/src/less/components/icon.less +3 -0
  64. package/src/less/components/nav.less +23 -0
  65. package/src/less/components/navbar.less +26 -2
  66. package/src/less/components/search.less +2 -0
  67. package/src/less/components/sticky.less +8 -3
  68. package/src/less/components/utility.less +1 -0
  69. package/src/less/theme/dropdown.less +4 -0
  70. package/src/less/theme/nav.less +6 -0
  71. package/src/less/theme/navbar.less +4 -0
  72. package/src/less/theme/search.less +6 -0
  73. package/src/scss/components/drop.scss +0 -1
  74. package/src/scss/components/dropdown.scss +11 -1
  75. package/src/scss/components/icon.scss +3 -0
  76. package/src/scss/components/nav.scss +23 -0
  77. package/src/scss/components/navbar.scss +26 -2
  78. package/src/scss/components/search.scss +2 -0
  79. package/src/scss/components/sticky.scss +8 -3
  80. package/src/scss/components/utility.scss +1 -0
  81. package/src/scss/mixins-theme.scss +5 -0
  82. package/src/scss/mixins.scss +5 -0
  83. package/src/scss/theme/dropdown.scss +4 -0
  84. package/src/scss/theme/nav.scss +6 -0
  85. package/src/scss/theme/navbar.scss +4 -0
  86. package/src/scss/theme/search.scss +6 -0
  87. package/src/scss/variables-theme.scss +5 -1
  88. package/src/scss/variables.scss +5 -1
  89. package/tests/alert.html +1 -1
  90. package/tests/animation.html +216 -214
  91. package/tests/drop.html +154 -80
  92. package/tests/dropdown.html +16 -2
  93. package/tests/nav.html +27 -0
  94. package/tests/navbar.html +56 -5
  95. package/tests/parallax.html +5 -5
  96. package/tests/position.html +38 -39
  97. package/tests/sticky-navbar.html +6 -6
  98. package/tests/sticky-parallax.html +29 -13
  99. package/tests/sticky.html +300 -49
  100. package/src/js/core/core.js +0 -25
@@ -29,6 +29,7 @@
29
29
 
30
30
  @dropdown-nav-item-color: @global-muted-color;
31
31
  @dropdown-nav-item-hover-color: @global-color;
32
+ @dropdown-nav-subtitle-font-size: @global-small-font-size;
32
33
  @dropdown-nav-header-color: @global-emphasis-color;
33
34
  @dropdown-nav-divider-border-width: @global-border-width;
34
35
  @dropdown-nav-divider-border: @global-border;
@@ -74,7 +75,6 @@
74
75
  ========================================================================== */
75
76
 
76
77
  .uk-dropdown-nav {
77
- white-space: nowrap;
78
78
  .hook-dropdown-nav();
79
79
  }
80
80
 
@@ -94,6 +94,15 @@
94
94
  .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
+ .hook-dropdown-nav-subtitle();
104
+ }
105
+
97
106
  /*
98
107
  * Header
99
108
  */
@@ -138,6 +147,7 @@
138
147
  .hook-dropdown-nav() {}
139
148
  .hook-dropdown-nav-item() {}
140
149
  .hook-dropdown-nav-item-hover() {}
150
+ .hook-dropdown-nav-subtitle() {}
141
151
  .hook-dropdown-nav-header() {}
142
152
  .hook-dropdown-nav-divider() {}
143
153
  .hook-dropdown-misc() {}
@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
130
130
 
131
131
  /*
132
132
  * Link
133
+ * 1. Allow text within link
133
134
  */
134
135
 
135
136
  .uk-icon-link {
136
137
  color: @icon-link-color;
138
+ /* 1 */
139
+ text-decoration: none !important;
137
140
  .hook-icon-link();
138
141
  }
139
142
 
@@ -5,6 +5,7 @@
5
5
  //
6
6
  // Sub-objects: `uk-nav-header`
7
7
  // `uk-nav-divider`
8
+ // `uk-nav-subtitle`
8
9
  // `uk-nav-sub`
9
10
  //
10
11
  // Modifiers: `uk-nav-parent-icon`
@@ -48,6 +49,7 @@
48
49
  @nav-default-item-color: @global-muted-color;
49
50
  @nav-default-item-hover-color: @global-color;
50
51
  @nav-default-item-active-color: @global-emphasis-color;
52
+ @nav-default-subtitle-font-size: @global-small-font-size;
51
53
  @nav-default-header-color: @global-emphasis-color;
52
54
  @nav-default-divider-border-width: @global-border-width;
53
55
  @nav-default-divider-border: @global-border;
@@ -60,6 +62,7 @@
60
62
  @nav-primary-item-color: @global-muted-color;
61
63
  @nav-primary-item-hover-color: @global-color;
62
64
  @nav-primary-item-active-color: @global-emphasis-color;
65
+ @nav-primary-subtitle-font-size: @global-medium-font-size;
63
66
  @nav-primary-header-color: @global-emphasis-color;
64
67
  @nav-primary-divider-border-width: @global-border-width;
65
68
  @nav-primary-divider-border: @global-border;
@@ -207,6 +210,15 @@ ul.uk-nav-sub {
207
210
  .hook-nav-default-item-active();
208
211
  }
209
212
 
213
+ /*
214
+ * Subtitle
215
+ */
216
+
217
+ .uk-nav-default .uk-nav-subtitle {
218
+ font-size: @nav-default-subtitle-font-size;
219
+ .hook-nav-default-subtitle();
220
+ }
221
+
210
222
  /*
211
223
  * Header
212
224
  */
@@ -266,6 +278,15 @@ ul.uk-nav-sub {
266
278
  .hook-nav-primary-item-active();
267
279
  }
268
280
 
281
+ /*
282
+ * Subtitle
283
+ */
284
+
285
+ .uk-nav-primary .uk-nav-subtitle {
286
+ font-size: @nav-primary-subtitle-font-size;
287
+ .hook-nav-primary-subtitle();
288
+ }
289
+
269
290
  /*
270
291
  * Header
271
292
  */
@@ -340,12 +361,14 @@ ul.uk-nav-sub {
340
361
  .hook-nav-default-item() {}
341
362
  .hook-nav-default-item-hover() {}
342
363
  .hook-nav-default-item-active() {}
364
+ .hook-nav-default-subtitle() {}
343
365
  .hook-nav-default-header() {}
344
366
  .hook-nav-default-divider() {}
345
367
  .hook-nav-primary() {}
346
368
  .hook-nav-primary-item() {}
347
369
  .hook-nav-primary-item-hover() {}
348
370
  .hook-nav-primary-item-active() {}
371
+ .hook-nav-primary-subtitle() {}
349
372
  .hook-nav-primary-header() {}
350
373
  .hook-nav-primary-divider() {}
351
374
  .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;
@@ -316,6 +317,17 @@
316
317
  }
317
318
 
318
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
319
331
  /* Style modifiers
320
332
  ========================================================================== */
321
333
 
@@ -400,7 +412,9 @@
400
412
  --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
401
413
  /* 2 */
402
414
  margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
403
- padding: @navbar-dropdown-dropbar-padding;
415
+ /* 3 */
416
+ padding-left: @navbar-dropdown-dropbar-padding-horizontal;
417
+ padding-right: @navbar-dropdown-dropbar-padding-horizontal;
404
418
  .hook-navbar-dropdown-dropbar();
405
419
  }
406
420
 
@@ -434,6 +448,15 @@
434
448
  .hook-navbar-dropdown-nav-item-active();
435
449
  }
436
450
 
451
+ /*
452
+ * Subtitle
453
+ */
454
+
455
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
456
+ font-size: @navbar-dropdown-nav-subtitle-font-size;
457
+ .hook-navbar-dropdown-nav-subtitle();
458
+ }
459
+
437
460
  /*
438
461
  * Header
439
462
  */
@@ -502,6 +525,7 @@
502
525
  .hook-navbar-dropdown-nav-item() {}
503
526
  .hook-navbar-dropdown-nav-item-hover() {}
504
527
  .hook-navbar-dropdown-nav-item-active() {}
528
+ .hook-navbar-dropdown-nav-subtitle() {}
505
529
  .hook-navbar-dropdown-nav-header() {}
506
530
  .hook-navbar-dropdown-nav-divider() {}
507
531
  .hook-navbar-dropbar(){}
@@ -154,6 +154,7 @@
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: @search-icon-color;
157
+ .hook-search-icon();
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@
294
295
  .hook-search-misc();
295
296
 
296
297
  .hook-search-input() {}
298
+ .hook-search-icon() {}
297
299
  .hook-search-default-input() {}
298
300
  .hook-search-default-input-focus() {}
299
301
  .hook-search-navbar-input() {}
@@ -24,10 +24,16 @@
24
24
  ========================================================================== */
25
25
 
26
26
  /*
27
- * Create position context so it's t the same like when fixed.
27
+ * 1. Create position context so it's t the same like when fixed.
28
+ * 2. More robust if padding and border are used and the sticky height is transitioned
28
29
  */
29
30
 
30
- .uk-sticky { position: relative; }
31
+ .uk-sticky {
32
+ /* 1 */
33
+ position: relative;
34
+ /* 2 */
35
+ box-sizing: border-box;
36
+ }
31
37
 
32
38
  /*
33
39
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
@@ -35,7 +41,6 @@
35
41
 
36
42
  .uk-sticky-fixed {
37
43
  z-index: @sticky-z-index;
38
- box-sizing: border-box;
39
44
  margin: 0 !important;
40
45
  /* 1 */
41
46
  -webkit-backface-visibility: hidden;
@@ -152,6 +152,7 @@
152
152
  ========================================================================== */
153
153
 
154
154
  .uk-resize { resize: both; }
155
+ .uk-resize-horizontal { resize: horizontal; }
155
156
  .uk-resize-vertical { resize: vertical; }
156
157
 
157
158
 
@@ -10,6 +10,8 @@
10
10
  @dropdown-padding: 25px;
11
11
  @dropdown-background: @global-background;
12
12
 
13
+ @dropdown-nav-subtitle-font-size: 12px;
14
+
13
15
  //
14
16
  // New
15
17
  //
@@ -34,6 +36,8 @@
34
36
 
35
37
  .hook-dropdown-nav-item-hover() {}
36
38
 
39
+ .hook-dropdown-nav-subtitle() {}
40
+
37
41
  .hook-dropdown-nav-header() {}
38
42
 
39
43
  .hook-dropdown-nav-divider() {}
@@ -7,6 +7,8 @@
7
7
  // Variables
8
8
  // ========================================================================
9
9
 
10
+ @nav-default-subtitle-font-size: 12px;
11
+
10
12
  //
11
13
  // New
12
14
  //
@@ -49,6 +51,8 @@
49
51
 
50
52
  .hook-nav-default-item-active() {}
51
53
 
54
+ .hook-nav-default-subtitle() {}
55
+
52
56
  .hook-nav-default-header() {}
53
57
 
54
58
  .hook-nav-default-divider() {}
@@ -65,6 +69,8 @@
65
69
 
66
70
  .hook-nav-primary-item-active() {}
67
71
 
72
+ .hook-nav-primary-subtitle() {}
73
+
68
74
  .hook-nav-primary-header() {}
69
75
 
70
76
  .hook-nav-primary-divider() {}
@@ -14,6 +14,8 @@
14
14
  @navbar-dropdown-background: @global-background;
15
15
  @navbar-dropdown-grid-gutter-horizontal: (@navbar-dropdown-padding * 2);
16
16
 
17
+ @navbar-dropdown-nav-subtitle-font-size: 12px;
18
+
17
19
  //
18
20
  // New
19
21
  //
@@ -109,6 +111,8 @@
109
111
 
110
112
  .hook-navbar-dropdown-nav-item-hover() {}
111
113
 
114
+ .hook-navbar-dropdown-nav-subtitle() {}
115
+
112
116
  .hook-navbar-dropdown-nav-header() {}
113
117
 
114
118
  .hook-navbar-dropdown-nav-divider() {}
@@ -25,6 +25,12 @@
25
25
  .hook-search-input() {}
26
26
 
27
27
 
28
+ // Icon
29
+ // ========================================================================
30
+
31
+ .hook-search-icon() {}
32
+
33
+
28
34
  // Default modifiers
29
35
  // ========================================================================
30
36
 
@@ -45,7 +45,6 @@ $drop-width: 300px !default;
45
45
  /* 3 */
46
46
  box-sizing: border-box;
47
47
  width: $drop-width;
48
- max-width: 100vw;
49
48
  }
50
49
 
51
50
  /* Show */
@@ -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(){}
@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
130
130
 
131
131
  /*
132
132
  * Link
133
+ * 1. Allow text within link
133
134
  */
134
135
 
135
136
  .uk-icon-link {
136
137
  color: $icon-link-color;
138
+ /* 1 */
139
+ text-decoration: none !important;
137
140
  @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
138
141
  }
139
142
 
@@ -5,6 +5,7 @@
5
5
  //
6
6
  // Sub-objects: `uk-nav-header`
7
7
  // `uk-nav-divider`
8
+ // `uk-nav-subtitle`
8
9
  // `uk-nav-sub`
9
10
  //
10
11
  // Modifiers: `uk-nav-parent-icon`
@@ -48,6 +49,7 @@ $nav-divider-margin-horizontal: 0 !default;
48
49
  $nav-default-item-color: $global-muted-color !default;
49
50
  $nav-default-item-hover-color: $global-color !default;
50
51
  $nav-default-item-active-color: $global-emphasis-color !default;
52
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
51
53
  $nav-default-header-color: $global-emphasis-color !default;
52
54
  $nav-default-divider-border-width: $global-border-width !default;
53
55
  $nav-default-divider-border: $global-border !default;
@@ -60,6 +62,7 @@ $nav-primary-item-line-height: $global-line-height !default;
60
62
  $nav-primary-item-color: $global-muted-color !default;
61
63
  $nav-primary-item-hover-color: $global-color !default;
62
64
  $nav-primary-item-active-color: $global-emphasis-color !default;
65
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
63
66
  $nav-primary-header-color: $global-emphasis-color !default;
64
67
  $nav-primary-divider-border-width: $global-border-width !default;
65
68
  $nav-primary-divider-border: $global-border !default;
@@ -207,6 +210,15 @@ ul.uk-nav-sub {
207
210
  @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
208
211
  }
209
212
 
213
+ /*
214
+ * Subtitle
215
+ */
216
+
217
+ .uk-nav-default .uk-nav-subtitle {
218
+ font-size: $nav-default-subtitle-font-size;
219
+ @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
220
+ }
221
+
210
222
  /*
211
223
  * Header
212
224
  */
@@ -266,6 +278,15 @@ ul.uk-nav-sub {
266
278
  @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
267
279
  }
268
280
 
281
+ /*
282
+ * Subtitle
283
+ */
284
+
285
+ .uk-nav-primary .uk-nav-subtitle {
286
+ font-size: $nav-primary-subtitle-font-size;
287
+ @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
288
+ }
289
+
269
290
  /*
270
291
  * Header
271
292
  */
@@ -340,12 +361,14 @@ ul.uk-nav-sub {
340
361
  // @mixin hook-nav-default-item(){}
341
362
  // @mixin hook-nav-default-item-hover(){}
342
363
  // @mixin hook-nav-default-item-active(){}
364
+ // @mixin hook-nav-default-subtitle(){}
343
365
  // @mixin hook-nav-default-header(){}
344
366
  // @mixin hook-nav-default-divider(){}
345
367
  // @mixin hook-nav-primary(){}
346
368
  // @mixin hook-nav-primary-item(){}
347
369
  // @mixin hook-nav-primary-item-hover(){}
348
370
  // @mixin hook-nav-primary-item-active(){}
371
+ // @mixin hook-nav-primary-subtitle(){}
349
372
  // @mixin hook-nav-primary-header(){}
350
373
  // @mixin hook-nav-primary-divider(){}
351
374
  // @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;
@@ -316,6 +317,17 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
316
317
  }
317
318
 
318
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
319
331
  /* Style modifiers
320
332
  ========================================================================== */
321
333
 
@@ -400,7 +412,9 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
400
412
  --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
401
413
  /* 2 */
402
414
  margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
403
- padding: $navbar-dropdown-dropbar-padding;
415
+ /* 3 */
416
+ padding-left: $navbar-dropdown-dropbar-padding-horizontal;
417
+ padding-right: $navbar-dropdown-dropbar-padding-horizontal;
404
418
  @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
405
419
  }
406
420
 
@@ -434,6 +448,15 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
434
448
  @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
435
449
  }
436
450
 
451
+ /*
452
+ * Subtitle
453
+ */
454
+
455
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
456
+ font-size: $navbar-dropdown-nav-subtitle-font-size;
457
+ @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
458
+ }
459
+
437
460
  /*
438
461
  * Header
439
462
  */
@@ -502,6 +525,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
502
525
  // @mixin hook-navbar-dropdown-nav-item(){}
503
526
  // @mixin hook-navbar-dropdown-nav-item-hover(){}
504
527
  // @mixin hook-navbar-dropdown-nav-item-active(){}
528
+ // @mixin hook-navbar-dropdown-nav-subtitle(){}
505
529
  // @mixin hook-navbar-dropdown-nav-header(){}
506
530
  // @mixin hook-navbar-dropdown-nav-divider(){}
507
531
  // @mixin hook-navbar-dropbar(){}
@@ -154,6 +154,7 @@ $search-toggle-hover-color: $global-color !default;
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: $search-icon-color;
157
+ @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@ $search-toggle-hover-color: $global-color !default;
294
295
  @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
295
296
 
296
297
  // @mixin hook-search-input(){}
298
+ // @mixin hook-search-icon(){}
297
299
  // @mixin hook-search-default-input(){}
298
300
  // @mixin hook-search-default-input-focus(){}
299
301
  // @mixin hook-search-navbar-input(){}
@@ -24,10 +24,16 @@ $sticky-reverse-animation-duration: 0.2s !default;
24
24
  ========================================================================== */
25
25
 
26
26
  /*
27
- * Create position context so it's t the same like when fixed.
27
+ * 1. Create position context so it's t the same like when fixed.
28
+ * 2. More robust if padding and border are used and the sticky height is transitioned
28
29
  */
29
30
 
30
- .uk-sticky { position: relative; }
31
+ .uk-sticky {
32
+ /* 1 */
33
+ position: relative;
34
+ /* 2 */
35
+ box-sizing: border-box;
36
+ }
31
37
 
32
38
  /*
33
39
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
@@ -35,7 +41,6 @@ $sticky-reverse-animation-duration: 0.2s !default;
35
41
 
36
42
  .uk-sticky-fixed {
37
43
  z-index: $sticky-z-index;
38
- box-sizing: border-box;
39
44
  margin: 0 !important;
40
45
  /* 1 */
41
46
  -webkit-backface-visibility: hidden;
@@ -152,6 +152,7 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
152
152
  ========================================================================== */
153
153
 
154
154
  .uk-resize { resize: both; }
155
+ .uk-resize-horizontal { resize: horizontal; }
155
156
  .uk-resize-vertical { resize: vertical; }
156
157
 
157
158
 
@@ -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; }
@@ -1839,6 +1843,7 @@
1839
1843
  @mixin hook-progress-bar(){}
1840
1844
  @mixin hook-progress-misc(){}
1841
1845
  @mixin hook-search-input(){}
1846
+ @mixin hook-search-icon(){}
1842
1847
  @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
1843
1848
  @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
1844
1849
  @mixin hook-search-navbar-input(){}
@@ -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(){}
@@ -1525,6 +1529,7 @@
1525
1529
  @mixin hook-progress-bar(){}
1526
1530
  @mixin hook-progress-misc(){}
1527
1531
  @mixin hook-search-input(){}
1532
+ @mixin hook-search-icon(){}
1528
1533
  @mixin hook-search-default-input(){}
1529
1534
  @mixin hook-search-default-input-focus(){}
1530
1535
  @mixin hook-search-navbar-input(){}
@@ -10,6 +10,8 @@
10
10
  $dropdown-padding: 25px !default;
11
11
  $dropdown-background: $global-background !default;
12
12
 
13
+ $dropdown-nav-subtitle-font-size: 12px !default;
14
+
13
15
  //
14
16
  // New
15
17
  //
@@ -34,6 +36,8 @@ $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !de
34
36
 
35
37
  // @mixin hook-dropdown-nav-item-hover(){}
36
38
 
39
+ // @mixin hook-dropdown-nav-subtitle(){}
40
+
37
41
  // @mixin hook-dropdown-nav-header(){}
38
42
 
39
43
  // @mixin hook-dropdown-nav-divider(){}