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.
- package/CHANGELOG.md +19 -1
- package/dist/css/uikit-core-rtl.css +34 -5
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +34 -5
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +34 -3
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +34 -3
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1 -1
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1 -1
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +12 -10
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +12 -10
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +12 -10
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +59 -29
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +172 -176
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +209 -180
- package/dist/js/uikit.min.js +1 -1
- package/package.json +5 -5
- package/src/js/components/tooltip.js +38 -3
- package/src/js/core/accordion.js +1 -1
- package/src/js/core/drop.js +10 -6
- package/src/js/core/height-match.js +10 -15
- package/src/js/core/navbar.js +1 -1
- package/src/js/mixin/media.js +11 -9
- package/src/js/mixin/position.js +22 -24
- package/src/js/util/position.js +128 -129
- package/src/less/components/dropdown.less +11 -1
- package/src/less/components/nav.less +22 -0
- package/src/less/components/navbar.less +22 -2
- package/src/less/theme/dropdown.less +2 -0
- package/src/less/theme/nav.less +4 -0
- package/src/less/theme/navbar.less +2 -0
- package/src/scss/components/dropdown.scss +11 -1
- package/src/scss/components/nav.scss +22 -0
- package/src/scss/components/navbar.scss +22 -2
- package/src/scss/mixins-theme.scss +4 -0
- package/src/scss/mixins.scss +4 -0
- package/src/scss/theme/dropdown.scss +2 -0
- package/src/scss/theme/nav.scss +4 -0
- package/src/scss/theme/navbar.scss +2 -0
- package/src/scss/variables-theme.scss +5 -1
- package/src/scss/variables.scss +5 -1
- package/tests/drop.html +0 -6
- package/tests/dropdown.html +18 -10
- package/tests/nav.html +27 -0
- package/tests/navbar.html +18 -4
- 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:
|
|
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
|
-
|
|
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(){}
|
package/src/less/theme/nav.less
CHANGED
|
@@ -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() {}
|
|
@@ -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:
|
|
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
|
-
|
|
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; }
|
package/src/scss/mixins.scss
CHANGED
|
@@ -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(){}
|
package/src/scss/theme/nav.scss
CHANGED
|
@@ -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;
|
package/src/scss/variables.scss
CHANGED
|
@@ -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>
|
package/tests/dropdown.html
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<h1>Dropdown</h1>
|
|
25
25
|
|
|
26
26
|
<div uk-grid>
|
|
27
|
-
<div class="uk-width-1-
|
|
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-
|
|
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>
|
|
388
|
-
<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">
|