uikit 3.14.4-dev.2dc50ec60 → 3.14.4-dev.3c3ec2cad
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 +39 -18
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +330 -78
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +330 -78
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +352 -107
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +352 -107
- 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 +98 -131
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +98 -131
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +4 -2
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +4 -5
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +4 -5
- 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 +4 -5
- 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 +104 -139
- 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 +531 -503
- package/dist/js/uikit-core.min.js +17 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +534 -504
- package/dist/js/uikit.min.js +17 -1
- package/package.json +11 -11
- package/src/images/components/navbar-toggle-icon.svg +25 -3
- package/src/js/api/hooks.js +5 -1
- package/src/js/api/state.js +2 -2
- package/src/js/components/notification.js +3 -1
- package/src/js/core/accordion.js +9 -17
- package/src/js/core/alert.js +35 -14
- package/src/js/core/drop.js +110 -82
- package/src/js/core/height-viewport.js +4 -2
- package/src/js/core/index.js +1 -1
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +30 -45
- package/src/js/core/offcanvas.js +8 -4
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +24 -26
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +90 -124
- package/src/js/util/animation.js +9 -7
- package/src/js/util/class.js +3 -1
- package/src/js/util/filter.js +3 -7
- package/src/js/util/position.js +136 -130
- package/src/js/util/style.js +4 -13
- package/src/js/util/viewport.js +3 -5
- package/src/less/components/_import.less +1 -0
- package/src/less/components/drop.less +1 -18
- package/src/less/components/dropbar.less +126 -0
- package/src/less/components/dropdown.less +11 -19
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +217 -33
- package/src/less/components/navbar.less +33 -54
- package/src/less/components/utility.less +10 -2
- package/src/less/theme/_import.less +1 -0
- package/src/less/theme/dropbar.less +44 -0
- package/src/less/theme/dropdown.less +0 -11
- package/src/less/theme/nav.less +45 -7
- package/src/less/theme/navbar.less +5 -36
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +126 -0
- package/src/scss/components/dropdown.scss +11 -19
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +166 -32
- package/src/scss/components/navbar.scss +33 -54
- package/src/scss/components/utility.scss +8 -1
- package/src/scss/mixins-theme.scss +83 -36
- package/src/scss/mixins.scss +79 -4
- package/src/scss/theme/_import.scss +1 -0
- package/src/scss/theme/dropbar.scss +44 -0
- package/src/scss/theme/dropdown.scss +0 -8
- package/src/scss/theme/nav.scss +43 -7
- package/src/scss/theme/navbar.scss +4 -8
- package/src/scss/variables-theme.scss +59 -18
- package/src/scss/variables.scss +47 -13
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +446 -416
- package/tests/dropbar.html +458 -0
- package/tests/dropdown.html +8 -470
- package/tests/filter.html +9 -12
- package/tests/flex.html +36 -36
- package/tests/form.html +1 -1
- package/tests/grid.html +22 -22
- package/tests/height.html +6 -6
- package/tests/index.html +127 -108
- package/tests/js/index.js +1 -4
- package/tests/lightbox.html +5 -5
- package/tests/list.html +8 -8
- package/tests/modal.html +13 -13
- package/tests/nav.html +121 -12
- package/tests/navbar.html +111 -226
- package/tests/offcanvas.html +10 -14
- package/tests/pagination.html +6 -6
- package/tests/parallax.html +1 -1
- package/tests/position.html +18 -16
- package/tests/progress.html +9 -9
- package/tests/scroll.html +7 -10
- package/tests/search.html +6 -6
- package/tests/slider.html +6 -5
- package/tests/slideshow.html +8 -8
- package/tests/sortable.html +6 -8
- package/tests/sticky-navbar.html +15 -15
- package/tests/sticky.html +8 -8
- package/tests/switcher.html +1 -1
- package/tests/tab.html +1 -1
- package/tests/table.html +7 -7
- package/tests/toggle.html +2 -2
- package/tests/tooltip.html +1 -1
- package/tests/upload.html +11 -11
- package/tests/utility.html +35 -16
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
//
|
|
4
4
|
// Component: `uk-nav`
|
|
5
5
|
//
|
|
6
|
-
// Sub-objects: `uk-nav-
|
|
6
|
+
// Sub-objects: `uk-nav-parent-icon`
|
|
7
|
+
// `uk-nav-header`
|
|
7
8
|
// `uk-nav-divider`
|
|
8
9
|
// `uk-nav-subtitle`
|
|
9
10
|
// `uk-nav-sub`
|
|
10
11
|
//
|
|
11
|
-
// Modifiers: `uk-nav-
|
|
12
|
-
// `uk-nav-default`
|
|
12
|
+
// Modifiers: `uk-nav-default`
|
|
13
13
|
// `uk-nav-primary`
|
|
14
14
|
// `uk-nav-center`,
|
|
15
15
|
// `uk-nav-divider`
|
|
@@ -33,9 +33,7 @@
|
|
|
33
33
|
@nav-sublist-deeper-padding-left: 15px;
|
|
34
34
|
@nav-sublist-item-padding-vertical: 2px;
|
|
35
35
|
|
|
36
|
-
@nav-parent-icon-
|
|
37
|
-
@nav-parent-icon-height: @nav-parent-icon-width;
|
|
38
|
-
@nav-parent-icon-color: @global-color;
|
|
36
|
+
@nav-parent-icon-margin-left: 4px;
|
|
39
37
|
|
|
40
38
|
@nav-header-padding-vertical: @nav-item-padding-vertical;
|
|
41
39
|
@nav-header-padding-horizontal: @nav-item-padding-horizontal;
|
|
@@ -76,7 +74,25 @@
|
|
|
76
74
|
@nav-primary-sublist-item-hover-color: @global-color;
|
|
77
75
|
@nav-primary-sublist-item-active-color: @global-emphasis-color;
|
|
78
76
|
|
|
79
|
-
@nav-
|
|
77
|
+
@nav-secondary-font-size: @global-font-size;
|
|
78
|
+
@nav-secondary-line-height: @global-line-height;
|
|
79
|
+
@nav-secondary-item-color: @global-emphasis-color;
|
|
80
|
+
@nav-secondary-item-hover-color: @global-emphasis-color;
|
|
81
|
+
@nav-secondary-item-active-color: @global-emphasis-color;
|
|
82
|
+
@nav-secondary-subtitle-font-size: @global-small-font-size;
|
|
83
|
+
@nav-secondary-subtitle-color: @global-muted-color;
|
|
84
|
+
@nav-secondary-subtitle-hover-color: @global-color;
|
|
85
|
+
@nav-secondary-subtitle-active-color: @global-emphasis-color;
|
|
86
|
+
@nav-secondary-header-color: @global-emphasis-color;
|
|
87
|
+
@nav-secondary-divider-border-width: @global-border-width;
|
|
88
|
+
@nav-secondary-divider-border: @global-border;
|
|
89
|
+
@nav-secondary-sublist-font-size: @global-small-font-size;
|
|
90
|
+
@nav-secondary-sublist-line-height: @global-line-height;
|
|
91
|
+
@nav-secondary-sublist-item-color: @global-muted-color;
|
|
92
|
+
@nav-secondary-sublist-item-hover-color: @global-color;
|
|
93
|
+
@nav-secondary-sublist-item-active-color: @global-emphasis-color;
|
|
94
|
+
|
|
95
|
+
@nav-dividers-margin-top: 5px;
|
|
80
96
|
@nav-dividers-border-width: @global-border-width;
|
|
81
97
|
@nav-dividers-border: @global-border;
|
|
82
98
|
|
|
@@ -146,7 +162,7 @@ ul.uk-nav-sub {
|
|
|
146
162
|
.uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
|
|
147
163
|
|
|
148
164
|
|
|
149
|
-
/* Parent icon
|
|
165
|
+
/* Parent icon
|
|
150
166
|
========================================================================== */
|
|
151
167
|
|
|
152
168
|
.uk-nav-parent-icon { margin-left: auto; }
|
|
@@ -322,6 +338,93 @@ ul.uk-nav-sub {
|
|
|
322
338
|
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: @nav-primary-sublist-item-active-color; }
|
|
323
339
|
|
|
324
340
|
|
|
341
|
+
/* Secondary modifier
|
|
342
|
+
========================================================================== */
|
|
343
|
+
|
|
344
|
+
.uk-nav-secondary {
|
|
345
|
+
font-size: @nav-secondary-font-size;
|
|
346
|
+
line-height: @nav-secondary-line-height;
|
|
347
|
+
.hook-nav-secondary();
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
/*
|
|
351
|
+
* Items
|
|
352
|
+
*/
|
|
353
|
+
|
|
354
|
+
.uk-nav-secondary > li > a {
|
|
355
|
+
|
|
356
|
+
color: @nav-secondary-item-color;
|
|
357
|
+
.hook-nav-secondary-item();
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Hover */
|
|
361
|
+
.uk-nav-secondary > li > a:hover {
|
|
362
|
+
color: @nav-secondary-item-hover-color;
|
|
363
|
+
.hook-nav-secondary-item-hover();
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
/* Active */
|
|
367
|
+
.uk-nav-secondary > li.uk-active > a {
|
|
368
|
+
color: @nav-secondary-item-active-color;
|
|
369
|
+
.hook-nav-secondary-item-active();
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/*
|
|
373
|
+
* Subtitle
|
|
374
|
+
*/
|
|
375
|
+
|
|
376
|
+
.uk-nav-secondary .uk-nav-subtitle {
|
|
377
|
+
font-size: @nav-secondary-subtitle-font-size;
|
|
378
|
+
color: @nav-secondary-subtitle-color;
|
|
379
|
+
.hook-nav-secondary-subtitle();
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Hover */
|
|
383
|
+
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
|
|
384
|
+
color: @nav-secondary-subtitle-hover-color;
|
|
385
|
+
.hook-nav-secondary-subtitle-hover();
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* Active */
|
|
389
|
+
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
|
|
390
|
+
color: @nav-secondary-subtitle-active-color;
|
|
391
|
+
.hook-nav-secondary-subtitle-active();
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/*
|
|
395
|
+
* Header
|
|
396
|
+
*/
|
|
397
|
+
|
|
398
|
+
.uk-nav-secondary .uk-nav-header {
|
|
399
|
+
color: @nav-secondary-header-color;
|
|
400
|
+
.hook-nav-secondary-header();
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/*
|
|
404
|
+
* Divider
|
|
405
|
+
*/
|
|
406
|
+
|
|
407
|
+
.uk-nav-secondary .uk-nav-divider {
|
|
408
|
+
border-top: @nav-secondary-divider-border-width solid @nav-secondary-divider-border;
|
|
409
|
+
.hook-nav-secondary-divider();
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/*
|
|
413
|
+
* Sublists
|
|
414
|
+
*/
|
|
415
|
+
|
|
416
|
+
.uk-nav-secondary .uk-nav-sub {
|
|
417
|
+
font-size: @nav-secondary-sublist-font-size;
|
|
418
|
+
line-height: @nav-secondary-sublist-line-height;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.uk-nav-secondary .uk-nav-sub a { color: @nav-secondary-sublist-item-color; }
|
|
422
|
+
|
|
423
|
+
.uk-nav-secondary .uk-nav-sub a:hover { color: @nav-secondary-sublist-item-hover-color; }
|
|
424
|
+
|
|
425
|
+
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @nav-secondary-sublist-item-active-color; }
|
|
426
|
+
|
|
427
|
+
|
|
325
428
|
/* Alignment modifier
|
|
326
429
|
========================================================================== */
|
|
327
430
|
|
|
@@ -339,13 +442,18 @@ ul.uk-nav-sub {
|
|
|
339
442
|
.uk-nav-center .uk-nav-sub,
|
|
340
443
|
.uk-nav-center .uk-nav-sub ul { padding-left: 0; }
|
|
341
444
|
|
|
342
|
-
/* Parent icon
|
|
343
|
-
.uk-nav-center .uk-nav-parent-icon { margin-left:
|
|
445
|
+
/* Parent icon */
|
|
446
|
+
.uk-nav-center .uk-nav-parent-icon { margin-left: @nav-parent-icon-margin-left; }
|
|
344
447
|
|
|
345
448
|
|
|
346
449
|
/* Style modifier
|
|
347
450
|
========================================================================== */
|
|
348
451
|
|
|
452
|
+
/*
|
|
453
|
+
* Divider
|
|
454
|
+
* Naming is in plural to prevent conflicts with divider sub object.
|
|
455
|
+
*/
|
|
456
|
+
|
|
349
457
|
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
|
350
458
|
margin-top: @nav-dividers-margin-top;
|
|
351
459
|
padding-top: @nav-dividers-margin-top;
|
|
@@ -360,7 +468,6 @@ ul.uk-nav-sub {
|
|
|
360
468
|
.hook-nav-misc();
|
|
361
469
|
|
|
362
470
|
.hook-nav-sub() {}
|
|
363
|
-
.hook-nav-parent-icon() {}
|
|
364
471
|
.hook-nav-header() {}
|
|
365
472
|
.hook-nav-divider() {}
|
|
366
473
|
.hook-nav-default() {}
|
|
@@ -377,6 +484,15 @@ ul.uk-nav-sub {
|
|
|
377
484
|
.hook-nav-primary-subtitle() {}
|
|
378
485
|
.hook-nav-primary-header() {}
|
|
379
486
|
.hook-nav-primary-divider() {}
|
|
487
|
+
.hook-nav-secondary() {}
|
|
488
|
+
.hook-nav-secondary-item() {}
|
|
489
|
+
.hook-nav-secondary-item-hover() {}
|
|
490
|
+
.hook-nav-secondary-item-active() {}
|
|
491
|
+
.hook-nav-secondary-subtitle() {}
|
|
492
|
+
.hook-nav-secondary-subtitle-hover() {}
|
|
493
|
+
.hook-nav-secondary-subtitle-active() {}
|
|
494
|
+
.hook-nav-secondary-header() {}
|
|
495
|
+
.hook-nav-secondary-divider() {}
|
|
380
496
|
.hook-nav-dividers() {}
|
|
381
497
|
.hook-nav-misc() {}
|
|
382
498
|
|
|
@@ -384,26 +500,37 @@ ul.uk-nav-sub {
|
|
|
384
500
|
// Inverse
|
|
385
501
|
// ========================================================================
|
|
386
502
|
|
|
387
|
-
@inverse-nav-
|
|
388
|
-
@inverse-nav-default-item-color:
|
|
389
|
-
@inverse-nav-default-item-
|
|
390
|
-
@inverse-nav-default-
|
|
391
|
-
@inverse-nav-default-
|
|
392
|
-
@inverse-nav-default-
|
|
393
|
-
@inverse-nav-default-sublist-item-color:
|
|
394
|
-
@inverse-nav-default-sublist-item-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
@inverse-nav-primary-item-color:
|
|
398
|
-
@inverse-nav-primary-item-
|
|
399
|
-
@inverse-nav-primary-
|
|
400
|
-
@inverse-nav-primary-
|
|
401
|
-
@inverse-nav-primary-
|
|
402
|
-
@inverse-nav-primary-sublist-item-color:
|
|
403
|
-
@inverse-nav-primary-sublist-item-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
@inverse-nav-
|
|
503
|
+
@inverse-nav-default-item-color: @inverse-global-muted-color;
|
|
504
|
+
@inverse-nav-default-item-hover-color: @inverse-global-color;
|
|
505
|
+
@inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
|
|
506
|
+
@inverse-nav-default-header-color: @inverse-global-emphasis-color;
|
|
507
|
+
@inverse-nav-default-divider-border: @inverse-global-border;
|
|
508
|
+
@inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
|
|
509
|
+
@inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
|
|
510
|
+
@inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
|
|
511
|
+
|
|
512
|
+
@inverse-nav-primary-item-color: @inverse-global-muted-color;
|
|
513
|
+
@inverse-nav-primary-item-hover-color: @inverse-global-color;
|
|
514
|
+
@inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
|
|
515
|
+
@inverse-nav-primary-header-color: @inverse-global-emphasis-color;
|
|
516
|
+
@inverse-nav-primary-divider-border: @inverse-global-border;
|
|
517
|
+
@inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
|
|
518
|
+
@inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
|
|
519
|
+
@inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
|
|
520
|
+
|
|
521
|
+
@inverse-nav-secondary-item-color: @inverse-global-emphasis-color;
|
|
522
|
+
@inverse-nav-secondary-item-hover-color: @inverse-global-emphasis-color;
|
|
523
|
+
@inverse-nav-secondary-item-active-color: @inverse-global-emphasis-color;
|
|
524
|
+
@inverse-nav-secondary-subtitle-color: @inverse-global-muted-color;
|
|
525
|
+
@inverse-nav-secondary-subtitle-hover-color: @inverse-global-color;
|
|
526
|
+
@inverse-nav-secondary-subtitle-active-color: @inverse-global-emphasis-color;
|
|
527
|
+
@inverse-nav-secondary-header-color: @inverse-global-emphasis-color;
|
|
528
|
+
@inverse-nav-secondary-divider-border: @inverse-global-border;
|
|
529
|
+
@inverse-nav-secondary-sublist-item-color: @inverse-global-muted-color;
|
|
530
|
+
@inverse-nav-secondary-sublist-item-hover-color: @inverse-global-color;
|
|
531
|
+
@inverse-nav-secondary-sublist-item-active-color: @inverse-global-emphasis-color;
|
|
532
|
+
|
|
533
|
+
@inverse-nav-dividers-border: @inverse-global-border;
|
|
407
534
|
|
|
408
535
|
.hook-inverse() {
|
|
409
536
|
|
|
@@ -477,18 +604,67 @@ ul.uk-nav-sub {
|
|
|
477
604
|
|
|
478
605
|
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
|
|
479
606
|
|
|
607
|
+
//
|
|
608
|
+
// Secondary
|
|
609
|
+
//
|
|
610
|
+
|
|
611
|
+
.uk-nav-secondary > li > a {
|
|
612
|
+
color: @inverse-nav-secondary-item-color;
|
|
613
|
+
.hook-inverse-nav-secondary-item();
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.uk-nav-secondary > li > a:hover {
|
|
617
|
+
color: @inverse-nav-secondary-item-hover-color;
|
|
618
|
+
.hook-inverse-nav-secondary-item-hover();
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.uk-nav-secondary > li.uk-active > a {
|
|
622
|
+
color: @inverse-nav-secondary-item-active-color;
|
|
623
|
+
.hook-inverse-nav-secondary-item-active();
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.uk-nav-secondary .uk-nav-subtitle {
|
|
627
|
+
color: @inverse-nav-secondary-subtitle-color;
|
|
628
|
+
.hook-inverse-nav-secondary-subtitle();
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
|
|
632
|
+
color: @inverse-nav-secondary-subtitle-hover-color;
|
|
633
|
+
.hook-inverse-nav-secondary-subtitle-hover();
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
|
|
637
|
+
color: @inverse-nav-secondary-subtitle-active-color;
|
|
638
|
+
.hook-inverse-nav-secondary-subtitle-active();
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.uk-nav-secondary .uk-nav-header {
|
|
642
|
+
color: @inverse-nav-secondary-header-color;
|
|
643
|
+
.hook-inverse-nav-secondary-header();
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.uk-nav-secondary .uk-nav-divider {
|
|
647
|
+
border-top-color: @inverse-nav-secondary-divider-border;
|
|
648
|
+
.hook-inverse-nav-secondary-divider();
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.uk-nav-secondary .uk-nav-sub a { color: @inverse-nav-secondary-sublist-item-color; }
|
|
652
|
+
|
|
653
|
+
.uk-nav-secondary .uk-nav-sub a:hover { color: @inverse-nav-secondary-sublist-item-hover-color; }
|
|
654
|
+
|
|
655
|
+
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @inverse-nav-secondary-sublist-item-active-color; }
|
|
656
|
+
|
|
480
657
|
//
|
|
481
658
|
// Dividers
|
|
482
659
|
//
|
|
483
660
|
|
|
484
661
|
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
|
485
662
|
border-top-color: @inverse-nav-dividers-border;
|
|
486
|
-
.hook-nav-dividers();
|
|
663
|
+
.hook-inverse-nav-dividers();
|
|
487
664
|
}
|
|
488
665
|
|
|
489
666
|
}
|
|
490
667
|
|
|
491
|
-
.hook-inverse-nav-parent-icon() {}
|
|
492
668
|
.hook-inverse-nav-default-item() {}
|
|
493
669
|
.hook-inverse-nav-default-item-hover() {}
|
|
494
670
|
.hook-inverse-nav-default-item-active() {}
|
|
@@ -499,4 +675,12 @@ ul.uk-nav-sub {
|
|
|
499
675
|
.hook-inverse-nav-primary-item-active() {}
|
|
500
676
|
.hook-inverse-nav-primary-header() {}
|
|
501
677
|
.hook-inverse-nav-primary-divider() {}
|
|
678
|
+
.hook-inverse-nav-secondary-item() {}
|
|
679
|
+
.hook-inverse-nav-secondary-item-hover() {}
|
|
680
|
+
.hook-inverse-nav-secondary-item-active() {}
|
|
681
|
+
.hook-inverse-nav-secondary-subtitle() {}
|
|
682
|
+
.hook-inverse-nav-secondary-subtitle-hover() {}
|
|
683
|
+
.hook-inverse-nav-secondary-subtitle-active() {}
|
|
684
|
+
.hook-inverse-nav-secondary-header() {}
|
|
685
|
+
.hook-inverse-nav-secondary-divider() {}
|
|
502
686
|
.hook-inverse-nav-dividers() {}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
// `uk-navbar-center-left`
|
|
11
11
|
// `uk-navbar-center-right`
|
|
12
12
|
// `uk-navbar-nav`
|
|
13
|
+
// `uk-navbar-parent-icon`
|
|
13
14
|
// `uk-navbar-item`
|
|
14
15
|
// `uk-navbar-toggle`
|
|
15
16
|
// `uk-navbar-subtitle`
|
|
@@ -76,20 +77,17 @@
|
|
|
76
77
|
@navbar-dropdown-large-shift-margin: 0;
|
|
77
78
|
@navbar-dropdown-large-padding: 40px;
|
|
78
79
|
|
|
79
|
-
@navbar-dropdown-
|
|
80
|
-
@navbar-dropdown-stretch-padding-bottom: @navbar-dropdown-stretch-padding-top;
|
|
81
|
-
@navbar-dropdown-stretch-padding-horizontal: 15px;
|
|
82
|
-
@navbar-dropdown-stretch-padding-horizontal-s: @global-gutter;
|
|
83
|
-
@navbar-dropdown-stretch-padding-horizontal-m: @global-medium-gutter;
|
|
84
|
-
@navbar-dropdown-stretch-background: @navbar-dropdown-background;
|
|
85
|
-
|
|
80
|
+
@navbar-dropdown-dropbar-shift-margin: 0;
|
|
86
81
|
@navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
|
|
87
82
|
@navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
|
|
88
|
-
@navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
|
|
89
83
|
@navbar-dropdown-dropbar-viewport-margin: 15px;
|
|
90
84
|
@navbar-dropdown-dropbar-viewport-margin-s: @global-gutter;
|
|
91
85
|
@navbar-dropdown-dropbar-viewport-margin-m: @global-medium-gutter;
|
|
92
86
|
|
|
87
|
+
@navbar-dropdown-dropbar-large-shift-margin: 0;
|
|
88
|
+
@navbar-dropdown-dropbar-large-padding-top: @navbar-dropdown-large-padding;
|
|
89
|
+
@navbar-dropdown-dropbar-large-padding-bottom: @navbar-dropdown-dropbar-large-padding-top;
|
|
90
|
+
|
|
93
91
|
@navbar-dropdown-nav-item-color: @global-muted-color;
|
|
94
92
|
@navbar-dropdown-nav-item-hover-color: @global-color;
|
|
95
93
|
@navbar-dropdown-nav-item-active-color: @global-emphasis-color;
|
|
@@ -101,7 +99,6 @@
|
|
|
101
99
|
@navbar-dropdown-nav-sublist-item-hover-color: @global-color;
|
|
102
100
|
@navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
|
|
103
101
|
|
|
104
|
-
@navbar-dropbar-background: @navbar-dropdown-background;
|
|
105
102
|
@navbar-dropbar-z-index: @global-z-index - 20;
|
|
106
103
|
|
|
107
104
|
|
|
@@ -397,7 +394,6 @@
|
|
|
397
394
|
/* 3 */
|
|
398
395
|
box-sizing: border-box;
|
|
399
396
|
width: @navbar-dropdown-width;
|
|
400
|
-
max-width: 100vw;
|
|
401
397
|
/* 4 */
|
|
402
398
|
padding: @navbar-dropdown-padding;
|
|
403
399
|
background: @navbar-dropdown-background;
|
|
@@ -408,6 +404,12 @@
|
|
|
408
404
|
/* Show */
|
|
409
405
|
.uk-navbar-dropdown.uk-open { display: block; }
|
|
410
406
|
|
|
407
|
+
/*
|
|
408
|
+
* Remove margin from the last-child
|
|
409
|
+
*/
|
|
410
|
+
|
|
411
|
+
.uk-navbar-dropdown > :last-child { margin-bottom: 0; }
|
|
412
|
+
|
|
411
413
|
// Color Mode
|
|
412
414
|
.uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
|
|
413
415
|
.uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
|
|
@@ -443,45 +445,7 @@
|
|
|
443
445
|
.uk-navbar-dropdown-large {
|
|
444
446
|
--uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
|
|
445
447
|
padding: @navbar-dropdown-large-padding;
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
/*
|
|
449
|
-
* Stretch modifier
|
|
450
|
-
* 1. Allow scrolling
|
|
451
|
-
* 2. Style
|
|
452
|
-
*/
|
|
453
|
-
|
|
454
|
-
.uk-navbar-dropdown-stretch {
|
|
455
|
-
--uk-position-offset: 0;
|
|
456
|
-
--uk-position-shift-offset: 0;
|
|
457
|
-
--uk-position-viewport-offset: 0;
|
|
458
|
-
/* 1 */
|
|
459
|
-
overflow-y: auto;
|
|
460
|
-
-webkit-overflow-scrolling: touch;
|
|
461
|
-
/* 2 */
|
|
462
|
-
padding: @navbar-dropdown-stretch-padding-top @navbar-dropdown-stretch-padding-horizontal @navbar-dropdown-stretch-padding-bottom @navbar-dropdown-stretch-padding-horizontal;
|
|
463
|
-
background: @navbar-dropdown-stretch-background;
|
|
464
|
-
.hook-navbar-dropdown-stretch();
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
/* Phone landscape and bigger */
|
|
468
|
-
@media (min-width: @breakpoint-small) {
|
|
469
|
-
|
|
470
|
-
.uk-navbar-dropdown-stretch {
|
|
471
|
-
padding-left: @navbar-dropdown-stretch-padding-horizontal-s;
|
|
472
|
-
padding-right: @navbar-dropdown-stretch-padding-horizontal-s;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
/* Tablet landscape and bigger */
|
|
478
|
-
@media (min-width: @breakpoint-medium) {
|
|
479
|
-
|
|
480
|
-
.uk-navbar-dropdown-stretch {
|
|
481
|
-
padding-left: @navbar-dropdown-stretch-padding-horizontal-m;
|
|
482
|
-
padding-right: @navbar-dropdown-stretch-padding-horizontal-m;
|
|
483
|
-
}
|
|
484
|
-
|
|
448
|
+
.hook-navbar-dropdown-large();
|
|
485
449
|
}
|
|
486
450
|
|
|
487
451
|
/*
|
|
@@ -497,8 +461,9 @@
|
|
|
497
461
|
/* 2 */
|
|
498
462
|
background: transparent;
|
|
499
463
|
/* 3 */
|
|
500
|
-
padding: @navbar-dropdown-dropbar-padding-top
|
|
501
|
-
--uk-position-
|
|
464
|
+
padding: @navbar-dropdown-dropbar-padding-top 0 @navbar-dropdown-dropbar-padding-bottom 0;
|
|
465
|
+
--uk-position-offset: 0;
|
|
466
|
+
--uk-position-shift-offset: @navbar-dropdown-dropbar-shift-margin;
|
|
502
467
|
--uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
|
|
503
468
|
.hook-navbar-dropdown-dropbar();
|
|
504
469
|
}
|
|
@@ -517,6 +482,12 @@
|
|
|
517
482
|
|
|
518
483
|
}
|
|
519
484
|
|
|
485
|
+
.uk-navbar-dropdown-dropbar-large {
|
|
486
|
+
--uk-position-shift-offset: @navbar-dropdown-dropbar-large-shift-margin;
|
|
487
|
+
padding-top: @navbar-dropdown-dropbar-large-padding-top;
|
|
488
|
+
padding-bottom: @navbar-dropdown-dropbar-large-padding-bottom;
|
|
489
|
+
.hook-navbar-dropdown-dropbar-large();
|
|
490
|
+
}
|
|
520
491
|
|
|
521
492
|
|
|
522
493
|
/* Dropdown Nav
|
|
@@ -589,12 +560,19 @@
|
|
|
589
560
|
/* Dropbar
|
|
590
561
|
========================================================================== */
|
|
591
562
|
|
|
563
|
+
/*
|
|
564
|
+
* 1. Reset dropbar
|
|
565
|
+
* 2. Width
|
|
566
|
+
*/
|
|
567
|
+
|
|
592
568
|
.uk-navbar-dropbar {
|
|
593
|
-
|
|
569
|
+
/* 1 */
|
|
570
|
+
display: block !important;
|
|
594
571
|
z-index: @navbar-dropbar-z-index;
|
|
572
|
+
padding: 0;
|
|
573
|
+
/* 2 */
|
|
595
574
|
left: 0;
|
|
596
575
|
right: 0;
|
|
597
|
-
background: @navbar-dropbar-background;
|
|
598
576
|
.hook-navbar-dropbar();
|
|
599
577
|
}
|
|
600
578
|
|
|
@@ -620,8 +598,9 @@
|
|
|
620
598
|
.hook-navbar-transparent() {}
|
|
621
599
|
.hook-navbar-sticky() {}
|
|
622
600
|
.hook-navbar-dropdown() {}
|
|
623
|
-
.hook-navbar-dropdown-
|
|
601
|
+
.hook-navbar-dropdown-large() {}
|
|
624
602
|
.hook-navbar-dropdown-dropbar() {}
|
|
603
|
+
.hook-navbar-dropdown-dropbar-large() {}
|
|
625
604
|
.hook-navbar-dropdown-nav() {}
|
|
626
605
|
.hook-navbar-dropdown-nav-item() {}
|
|
627
606
|
.hook-navbar-dropdown-nav-item-hover() {}
|
|
@@ -147,6 +147,13 @@
|
|
|
147
147
|
.uk-overflow-auto > :last-child { margin-bottom: 0; }
|
|
148
148
|
|
|
149
149
|
|
|
150
|
+
/* Box Sizing
|
|
151
|
+
========================================================================== */
|
|
152
|
+
|
|
153
|
+
.uk-box-sizing-content { box-sizing: content-box; }
|
|
154
|
+
.uk-box-sizing-border { box-sizing: border-box; }
|
|
155
|
+
|
|
156
|
+
|
|
150
157
|
/* Resize
|
|
151
158
|
========================================================================== */
|
|
152
159
|
|
|
@@ -413,7 +420,7 @@
|
|
|
413
420
|
.hook-logo-hover();
|
|
414
421
|
}
|
|
415
422
|
|
|
416
|
-
.uk-logo
|
|
423
|
+
.uk-logo :where(img, svg, video) { display: block; }
|
|
417
424
|
|
|
418
425
|
.uk-logo-inverse { display: none; }
|
|
419
426
|
|
|
@@ -525,7 +532,8 @@
|
|
|
525
532
|
.hook-inverse-logo-hover();
|
|
526
533
|
}
|
|
527
534
|
|
|
528
|
-
.uk-logo > :not(
|
|
535
|
+
.uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
|
|
536
|
+
.uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
|
|
529
537
|
.uk-logo-inverse { display: block; }
|
|
530
538
|
|
|
531
539
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Component: Dropbar
|
|
3
|
+
//
|
|
4
|
+
// ========================================================================
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// Variables
|
|
8
|
+
// ========================================================================
|
|
9
|
+
|
|
10
|
+
@dropbar-padding-top: 25px;
|
|
11
|
+
@dropbar-background: @global-background;
|
|
12
|
+
|
|
13
|
+
//
|
|
14
|
+
// New
|
|
15
|
+
//
|
|
16
|
+
|
|
17
|
+
@dropbar-top-box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05);
|
|
18
|
+
@dropbar-bottom-box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05);
|
|
19
|
+
@dropbar-left-box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05);
|
|
20
|
+
@dropbar-right-box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05);
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
// Component
|
|
24
|
+
// ========================================================================
|
|
25
|
+
|
|
26
|
+
.hook-dropbar() {}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// Direction modifier
|
|
30
|
+
// ========================================================================
|
|
31
|
+
|
|
32
|
+
.hook-dropbar-top() { box-shadow: @dropbar-top-box-shadow; }
|
|
33
|
+
|
|
34
|
+
.hook-dropbar-bottom() { box-shadow: @dropbar-bottom-box-shadow; }
|
|
35
|
+
|
|
36
|
+
.hook-dropbar-left() { box-shadow: @dropbar-left-box-shadow; }
|
|
37
|
+
|
|
38
|
+
.hook-dropbar-right() { box-shadow: @dropbar-right-box-shadow; }
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
// Miscellaneous
|
|
42
|
+
// ========================================================================
|
|
43
|
+
|
|
44
|
+
.hook-dropbar-misc() {}
|
|
@@ -20,8 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
@dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
|
|
22
22
|
|
|
23
|
-
@dropdown-stretch-background: @global-muted-background;
|
|
24
|
-
|
|
25
23
|
|
|
26
24
|
// Component
|
|
27
25
|
// ========================================================================
|
|
@@ -29,15 +27,6 @@
|
|
|
29
27
|
.hook-dropdown() { box-shadow: @dropdown-box-shadow; }
|
|
30
28
|
|
|
31
29
|
|
|
32
|
-
// Stretch modifier
|
|
33
|
-
// ========================================================================
|
|
34
|
-
|
|
35
|
-
.hook-dropdown-stretch() {
|
|
36
|
-
box-shadow: none;
|
|
37
|
-
background: @dropdown-stretch-background;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
30
|
// Nav
|
|
42
31
|
// ========================================================================
|
|
43
32
|
|