uikit 3.14.4-dev.17d2f2727 → 3.14.4-dev.2dc50ec60
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 +7 -0
- package/dist/css/uikit-core-rtl.css +62 -46
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +62 -46
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +62 -47
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +62 -47
- 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 +7 -5
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +6 -14
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +6 -14
- 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 +1 -1
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +1 -1
- 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 +1 -1
- 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 +3 -3
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +23 -16
- 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 +100 -56
- 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 +108 -62
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
- package/src/images/components/nav-parent-icon.svg +3 -0
- package/src/images/components/navbar-parent-icon.svg +3 -0
- package/src/js/components/filter.js +5 -3
- package/src/js/components/sortable.js +2 -3
- package/src/js/core/height-viewport.js +3 -1
- package/src/js/core/icon.js +16 -0
- package/src/js/core/index.js +2 -0
- package/src/js/core/navbar.js +44 -15
- package/src/js/core/sticky.js +8 -9
- package/src/js/mixin/position.js +24 -7
- package/src/js/mixin/togglable.js +8 -17
- package/src/js/util/position.js +1 -0
- package/src/js/util/viewport.js +2 -27
- package/src/less/components/dropdown.less +8 -0
- package/src/less/components/nav.less +3 -26
- package/src/less/components/navbar.less +95 -14
- package/src/less/theme/navbar.less +4 -6
- package/src/scss/components/dropdown.scss +8 -0
- package/src/scss/components/nav.scss +3 -15
- package/src/scss/components/navbar.scss +83 -14
- package/src/scss/mixins-theme.scss +13 -17
- package/src/scss/mixins.scss +12 -13
- package/src/scss/theme/navbar.scss +3 -2
- package/src/scss/variables-theme.scss +16 -6
- package/src/scss/variables.scss +16 -5
- package/tests/drop.html +66 -16
- package/tests/dropdown.html +103 -16
- package/tests/index.html +3 -3
- package/tests/nav.html +20 -87
- package/tests/navbar.html +283 -56
- package/tests/offcanvas.html +8 -8
- package/src/images/backgrounds/nav-parent-close.svg +0 -3
|
@@ -51,7 +51,9 @@
|
|
|
51
51
|
@navbar-nav-item-onclick-color: @global-emphasis-color;
|
|
52
52
|
@navbar-nav-item-active-color: @global-emphasis-color;
|
|
53
53
|
|
|
54
|
-
@navbar-
|
|
54
|
+
@navbar-parent-icon-margin-left: 4px;
|
|
55
|
+
|
|
56
|
+
@navbar-item-padding-horizontal: 15px;
|
|
55
57
|
@navbar-item-color: @global-color;
|
|
56
58
|
|
|
57
59
|
@navbar-toggle-color: @global-muted-color;
|
|
@@ -71,9 +73,22 @@
|
|
|
71
73
|
@navbar-dropdown-grid-gutter-horizontal: @global-gutter;
|
|
72
74
|
@navbar-dropdown-grid-gutter-vertical: @navbar-dropdown-grid-gutter-horizontal;
|
|
73
75
|
|
|
74
|
-
@navbar-dropdown-
|
|
75
|
-
@navbar-dropdown-
|
|
76
|
+
@navbar-dropdown-large-shift-margin: 0;
|
|
77
|
+
@navbar-dropdown-large-padding: 40px;
|
|
78
|
+
|
|
79
|
+
@navbar-dropdown-stretch-padding-top: 15px;
|
|
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
|
+
|
|
86
|
+
@navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
|
|
87
|
+
@navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
|
|
76
88
|
@navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
|
|
89
|
+
@navbar-dropdown-dropbar-viewport-margin: 15px;
|
|
90
|
+
@navbar-dropdown-dropbar-viewport-margin-s: @global-gutter;
|
|
91
|
+
@navbar-dropdown-dropbar-viewport-margin-m: @global-medium-gutter;
|
|
77
92
|
|
|
78
93
|
@navbar-dropdown-nav-item-color: @global-muted-color;
|
|
79
94
|
@navbar-dropdown-nav-item-hover-color: @global-color;
|
|
@@ -227,7 +242,6 @@
|
|
|
227
242
|
/* 3 */
|
|
228
243
|
box-sizing: border-box;
|
|
229
244
|
min-height: @navbar-nav-item-height;
|
|
230
|
-
padding: 0 @navbar-nav-item-padding-horizontal;
|
|
231
245
|
/* 4 */
|
|
232
246
|
font-size: @navbar-nav-item-font-size;
|
|
233
247
|
font-family: @navbar-nav-item-font-family;
|
|
@@ -240,6 +254,7 @@
|
|
|
240
254
|
*/
|
|
241
255
|
|
|
242
256
|
.uk-navbar-nav > li > a {
|
|
257
|
+
padding: 0 @navbar-nav-item-padding-horizontal;
|
|
243
258
|
color: @navbar-nav-item-color;
|
|
244
259
|
.hook-navbar-nav-item();
|
|
245
260
|
}
|
|
@@ -268,6 +283,14 @@
|
|
|
268
283
|
}
|
|
269
284
|
|
|
270
285
|
|
|
286
|
+
/* Parent icon modifier
|
|
287
|
+
========================================================================== */
|
|
288
|
+
|
|
289
|
+
.uk-navbar-parent-icon { margin-left: @navbar-parent-icon-margin-left; }
|
|
290
|
+
|
|
291
|
+
.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
|
|
292
|
+
|
|
293
|
+
|
|
271
294
|
/* Item
|
|
272
295
|
========================================================================== */
|
|
273
296
|
|
|
@@ -288,6 +311,7 @@
|
|
|
288
311
|
========================================================================== */
|
|
289
312
|
|
|
290
313
|
.uk-navbar-toggle {
|
|
314
|
+
padding: 0 @navbar-item-padding-horizontal;
|
|
291
315
|
color: @navbar-toggle-color;
|
|
292
316
|
.hook-navbar-toggle();
|
|
293
317
|
}
|
|
@@ -384,7 +408,7 @@
|
|
|
384
408
|
/* Show */
|
|
385
409
|
.uk-navbar-dropdown.uk-open { display: block; }
|
|
386
410
|
|
|
387
|
-
|
|
411
|
+
// Color Mode
|
|
388
412
|
.uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
|
|
389
413
|
.uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
|
|
390
414
|
|
|
@@ -412,43 +436,88 @@
|
|
|
412
436
|
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
|
|
413
437
|
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }
|
|
414
438
|
|
|
439
|
+
/*
|
|
440
|
+
* Size modifier
|
|
441
|
+
*/
|
|
442
|
+
|
|
443
|
+
.uk-navbar-dropdown-large {
|
|
444
|
+
--uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
|
|
445
|
+
padding: @navbar-dropdown-large-padding;
|
|
446
|
+
}
|
|
447
|
+
|
|
415
448
|
/*
|
|
416
449
|
* Stretch modifier
|
|
417
450
|
* 1. Allow scrolling
|
|
451
|
+
* 2. Style
|
|
418
452
|
*/
|
|
419
453
|
|
|
420
|
-
|
|
454
|
+
.uk-navbar-dropdown-stretch {
|
|
421
455
|
--uk-position-offset: 0;
|
|
422
456
|
--uk-position-shift-offset: 0;
|
|
423
457
|
--uk-position-viewport-offset: 0;
|
|
424
458
|
/* 1 */
|
|
425
459
|
overflow-y: auto;
|
|
426
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;
|
|
427
464
|
.hook-navbar-dropdown-stretch();
|
|
428
465
|
}
|
|
429
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
|
+
|
|
485
|
+
}
|
|
486
|
+
|
|
430
487
|
/*
|
|
431
488
|
* Dropbar modifier
|
|
432
489
|
* 1. Reset dropdown width to prevent to early shifting
|
|
433
|
-
* 2.
|
|
434
|
-
* 3.
|
|
435
|
-
* 4. Horizontal padding
|
|
490
|
+
* 2. Reset style
|
|
491
|
+
* 3. Padding
|
|
436
492
|
*/
|
|
437
493
|
|
|
438
494
|
.uk-navbar-dropdown-dropbar {
|
|
439
495
|
/* 1 */
|
|
440
496
|
width: auto;
|
|
441
497
|
/* 2 */
|
|
442
|
-
|
|
498
|
+
background: transparent;
|
|
443
499
|
/* 3 */
|
|
444
|
-
|
|
445
|
-
/* 4 */
|
|
446
|
-
padding-left: @navbar-dropdown-dropbar-padding-horizontal;
|
|
447
|
-
padding-right: @navbar-dropdown-dropbar-padding-horizontal;
|
|
500
|
+
padding: @navbar-dropdown-dropbar-padding-top @navbar-dropdown-dropbar-padding-horizontal @navbar-dropdown-dropbar-padding-bottom @navbar-dropdown-dropbar-padding-horizontal;
|
|
448
501
|
--uk-position-shift-offset: 0;
|
|
502
|
+
--uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
|
|
449
503
|
.hook-navbar-dropdown-dropbar();
|
|
450
504
|
}
|
|
451
505
|
|
|
506
|
+
/* Phone landscape and bigger */
|
|
507
|
+
@media (min-width: @breakpoint-small) {
|
|
508
|
+
|
|
509
|
+
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-s; }
|
|
510
|
+
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* Tablet landscape and bigger */
|
|
514
|
+
@media (min-width: @breakpoint-medium) {
|
|
515
|
+
|
|
516
|
+
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-m; }
|
|
517
|
+
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
|
|
452
521
|
|
|
453
522
|
/* Dropdown Nav
|
|
454
523
|
* Adopts `uk-nav`
|
|
@@ -577,6 +646,10 @@
|
|
|
577
646
|
|
|
578
647
|
.hook-inverse() {
|
|
579
648
|
|
|
649
|
+
//
|
|
650
|
+
// Nav Item
|
|
651
|
+
//
|
|
652
|
+
|
|
580
653
|
.uk-navbar-nav > li > a {
|
|
581
654
|
color: @inverse-navbar-nav-item-color;
|
|
582
655
|
.hook-inverse-navbar-nav-item();
|
|
@@ -598,11 +671,19 @@
|
|
|
598
671
|
.hook-inverse-navbar-nav-item-active();
|
|
599
672
|
}
|
|
600
673
|
|
|
674
|
+
//
|
|
675
|
+
// Item
|
|
676
|
+
//
|
|
677
|
+
|
|
601
678
|
.uk-navbar-item {
|
|
602
679
|
color: @inverse-navbar-item-color;
|
|
603
680
|
.hook-inverse-navbar-item();
|
|
604
681
|
}
|
|
605
682
|
|
|
683
|
+
//
|
|
684
|
+
// Toggle
|
|
685
|
+
//
|
|
686
|
+
|
|
606
687
|
.uk-navbar-toggle {
|
|
607
688
|
color: @inverse-navbar-toggle-color;
|
|
608
689
|
.hook-inverse-navbar-toggle();
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
@navbar-gap: 30px;
|
|
11
11
|
|
|
12
12
|
@navbar-nav-gap: 30px;
|
|
13
|
+
|
|
13
14
|
@navbar-nav-item-padding-horizontal: 0;
|
|
14
15
|
|
|
15
16
|
@navbar-nav-item-font-size: @global-small-font-size;
|
|
16
17
|
|
|
18
|
+
@navbar-item-padding-horizontal: 0;
|
|
19
|
+
|
|
17
20
|
@navbar-dropdown-margin: 15px;
|
|
18
21
|
@navbar-dropdown-padding: 25px;
|
|
19
22
|
@navbar-dropdown-background: @global-background;
|
|
@@ -31,8 +34,6 @@
|
|
|
31
34
|
|
|
32
35
|
@navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
|
|
33
36
|
|
|
34
|
-
@navbar-dropdown-stretch-background: @global-muted-background;
|
|
35
|
-
|
|
36
37
|
@navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
|
|
37
38
|
|
|
38
39
|
@navbar-dropdown-grid-divider-border-width: @global-border-width;
|
|
@@ -106,10 +107,7 @@
|
|
|
106
107
|
|
|
107
108
|
.hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
|
|
108
109
|
|
|
109
|
-
.hook-navbar-dropdown-stretch() {
|
|
110
|
-
box-shadow: none;
|
|
111
|
-
background: @navbar-dropdown-stretch-background;
|
|
112
|
-
}
|
|
110
|
+
.hook-navbar-dropdown-stretch() { box-shadow: none; }
|
|
113
111
|
|
|
114
112
|
.hook-navbar-dropdown-dropbar() { box-shadow: none; }
|
|
115
113
|
|
|
@@ -25,6 +25,8 @@ $dropdown-padding: 15px !default;
|
|
|
25
25
|
$dropdown-background: $global-muted-background !default;
|
|
26
26
|
$dropdown-color: $global-color !default;
|
|
27
27
|
|
|
28
|
+
$dropdown-large-padding: 40px !default;
|
|
29
|
+
|
|
28
30
|
$dropdown-nav-item-color: $global-muted-color !default;
|
|
29
31
|
$dropdown-nav-item-hover-color: $global-color !default;
|
|
30
32
|
$dropdown-nav-subtitle-font-size: $global-small-font-size !default;
|
|
@@ -69,6 +71,12 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
69
71
|
.uk-dropdown.uk-open { display: block; }
|
|
70
72
|
|
|
71
73
|
|
|
74
|
+
/* Size modifier
|
|
75
|
+
========================================================================== */
|
|
76
|
+
|
|
77
|
+
.uk-dropdown-large { padding: $dropdown-large-padding; }
|
|
78
|
+
|
|
79
|
+
|
|
72
80
|
/* Stretch modifier
|
|
73
81
|
========================================================================== */
|
|
74
82
|
|
|
@@ -80,9 +80,6 @@ $nav-dividers-margin-top: 0 !default;
|
|
|
80
80
|
$nav-dividers-border-width: $global-border-width !default;
|
|
81
81
|
$nav-dividers-border: $global-border !default;
|
|
82
82
|
|
|
83
|
-
$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
84
|
-
$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
85
|
-
|
|
86
83
|
|
|
87
84
|
/* ========================================================================
|
|
88
85
|
Component: Nav
|
|
@@ -152,18 +149,9 @@ ul.uk-nav-sub {
|
|
|
152
149
|
/* Parent icon modifier
|
|
153
150
|
========================================================================== */
|
|
154
151
|
|
|
155
|
-
.uk-nav-parent-icon
|
|
156
|
-
content: "";
|
|
157
|
-
width: $nav-parent-icon-width;
|
|
158
|
-
height: $nav-parent-icon-height;
|
|
159
|
-
margin-left: auto;
|
|
160
|
-
@include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color);
|
|
161
|
-
background-repeat: no-repeat;
|
|
162
|
-
background-position: 50% 50%;
|
|
163
|
-
@if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();}
|
|
164
|
-
}
|
|
152
|
+
.uk-nav-parent-icon { margin-left: auto; }
|
|
165
153
|
|
|
166
|
-
.uk-nav
|
|
154
|
+
.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
|
|
167
155
|
|
|
168
156
|
|
|
169
157
|
/* Header
|
|
@@ -352,7 +340,7 @@ ul.uk-nav-sub {
|
|
|
352
340
|
.uk-nav-center .uk-nav-sub ul { padding-left: 0; }
|
|
353
341
|
|
|
354
342
|
/* Parent icon modifier */
|
|
355
|
-
.uk-nav-center.uk-nav-parent-icon
|
|
343
|
+
.uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
|
|
356
344
|
|
|
357
345
|
|
|
358
346
|
/* Style modifier
|
|
@@ -51,7 +51,9 @@ $navbar-nav-item-hover-color: $global-color !default;
|
|
|
51
51
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
52
52
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
53
53
|
|
|
54
|
-
$navbar-
|
|
54
|
+
$navbar-parent-icon-margin-left: 4px !default;
|
|
55
|
+
|
|
56
|
+
$navbar-item-padding-horizontal: 15px !default;
|
|
55
57
|
$navbar-item-color: $global-color !default;
|
|
56
58
|
|
|
57
59
|
$navbar-toggle-color: $global-muted-color !default;
|
|
@@ -71,9 +73,22 @@ $navbar-dropdown-color-mode: none !default;
|
|
|
71
73
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
72
74
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
73
75
|
|
|
74
|
-
$navbar-dropdown-
|
|
75
|
-
$navbar-dropdown-
|
|
76
|
+
$navbar-dropdown-large-shift-margin: 0 !default;
|
|
77
|
+
$navbar-dropdown-large-padding: 40px !default;
|
|
78
|
+
|
|
79
|
+
$navbar-dropdown-stretch-padding-top: 15px !default;
|
|
80
|
+
$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
|
|
81
|
+
$navbar-dropdown-stretch-padding-horizontal: 15px !default;
|
|
82
|
+
$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
|
|
83
|
+
$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
|
|
84
|
+
$navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
|
|
85
|
+
|
|
86
|
+
$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
|
|
87
|
+
$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
|
|
76
88
|
$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
89
|
+
$navbar-dropdown-dropbar-viewport-margin: 15px !default;
|
|
90
|
+
$navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
|
|
91
|
+
$navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
|
|
77
92
|
|
|
78
93
|
$navbar-dropdown-nav-item-color: $global-muted-color !default;
|
|
79
94
|
$navbar-dropdown-nav-item-hover-color: $global-color !default;
|
|
@@ -227,7 +242,6 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
227
242
|
/* 3 */
|
|
228
243
|
box-sizing: border-box;
|
|
229
244
|
min-height: $navbar-nav-item-height;
|
|
230
|
-
padding: 0 $navbar-nav-item-padding-horizontal;
|
|
231
245
|
/* 4 */
|
|
232
246
|
font-size: $navbar-nav-item-font-size;
|
|
233
247
|
font-family: $navbar-nav-item-font-family;
|
|
@@ -240,6 +254,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
240
254
|
*/
|
|
241
255
|
|
|
242
256
|
.uk-navbar-nav > li > a {
|
|
257
|
+
padding: 0 $navbar-nav-item-padding-horizontal;
|
|
243
258
|
color: $navbar-nav-item-color;
|
|
244
259
|
@if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
|
|
245
260
|
}
|
|
@@ -268,6 +283,14 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
268
283
|
}
|
|
269
284
|
|
|
270
285
|
|
|
286
|
+
/* Parent icon modifier
|
|
287
|
+
========================================================================== */
|
|
288
|
+
|
|
289
|
+
.uk-navbar-parent-icon { margin-left: $navbar-parent-icon-margin-left; }
|
|
290
|
+
|
|
291
|
+
.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
|
|
292
|
+
|
|
293
|
+
|
|
271
294
|
/* Item
|
|
272
295
|
========================================================================== */
|
|
273
296
|
|
|
@@ -288,6 +311,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
288
311
|
========================================================================== */
|
|
289
312
|
|
|
290
313
|
.uk-navbar-toggle {
|
|
314
|
+
padding: 0 $navbar-item-padding-horizontal;
|
|
291
315
|
color: $navbar-toggle-color;
|
|
292
316
|
@if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
|
|
293
317
|
}
|
|
@@ -384,7 +408,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
384
408
|
/* Show */
|
|
385
409
|
.uk-navbar-dropdown.uk-open { display: block; }
|
|
386
410
|
|
|
387
|
-
|
|
411
|
+
// Color Mode
|
|
388
412
|
@if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
|
|
389
413
|
@if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
|
|
390
414
|
|
|
@@ -412,43 +436,88 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
412
436
|
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); }
|
|
413
437
|
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); }
|
|
414
438
|
|
|
439
|
+
/*
|
|
440
|
+
* Size modifier
|
|
441
|
+
*/
|
|
442
|
+
|
|
443
|
+
.uk-navbar-dropdown-large {
|
|
444
|
+
--uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
|
|
445
|
+
padding: $navbar-dropdown-large-padding;
|
|
446
|
+
}
|
|
447
|
+
|
|
415
448
|
/*
|
|
416
449
|
* Stretch modifier
|
|
417
450
|
* 1. Allow scrolling
|
|
451
|
+
* 2. Style
|
|
418
452
|
*/
|
|
419
453
|
|
|
420
|
-
|
|
454
|
+
.uk-navbar-dropdown-stretch {
|
|
421
455
|
--uk-position-offset: 0;
|
|
422
456
|
--uk-position-shift-offset: 0;
|
|
423
457
|
--uk-position-viewport-offset: 0;
|
|
424
458
|
/* 1 */
|
|
425
459
|
overflow-y: auto;
|
|
426
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;
|
|
427
464
|
@if(mixin-exists(hook-navbar-dropdown-stretch)) {@include hook-navbar-dropdown-stretch();}
|
|
428
465
|
}
|
|
429
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
|
+
|
|
485
|
+
}
|
|
486
|
+
|
|
430
487
|
/*
|
|
431
488
|
* Dropbar modifier
|
|
432
489
|
* 1. Reset dropdown width to prevent to early shifting
|
|
433
|
-
* 2.
|
|
434
|
-
* 3.
|
|
435
|
-
* 4. Horizontal padding
|
|
490
|
+
* 2. Reset style
|
|
491
|
+
* 3. Padding
|
|
436
492
|
*/
|
|
437
493
|
|
|
438
494
|
.uk-navbar-dropdown-dropbar {
|
|
439
495
|
/* 1 */
|
|
440
496
|
width: auto;
|
|
441
497
|
/* 2 */
|
|
442
|
-
|
|
498
|
+
background: transparent;
|
|
443
499
|
/* 3 */
|
|
444
|
-
|
|
445
|
-
/* 4 */
|
|
446
|
-
padding-left: $navbar-dropdown-dropbar-padding-horizontal;
|
|
447
|
-
padding-right: $navbar-dropdown-dropbar-padding-horizontal;
|
|
500
|
+
padding: $navbar-dropdown-dropbar-padding-top $navbar-dropdown-dropbar-padding-horizontal $navbar-dropdown-dropbar-padding-bottom $navbar-dropdown-dropbar-padding-horizontal;
|
|
448
501
|
--uk-position-shift-offset: 0;
|
|
502
|
+
--uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
|
|
449
503
|
@if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
|
|
450
504
|
}
|
|
451
505
|
|
|
506
|
+
/* Phone landscape and bigger */
|
|
507
|
+
@media (min-width: $breakpoint-small) {
|
|
508
|
+
|
|
509
|
+
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-s}; }
|
|
510
|
+
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* Tablet landscape and bigger */
|
|
514
|
+
@media (min-width: $breakpoint-medium) {
|
|
515
|
+
|
|
516
|
+
.uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-m}; }
|
|
517
|
+
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
|
|
452
521
|
|
|
453
522
|
/* Dropdown Nav
|
|
454
523
|
* Adopts `uk-nav`
|
|
@@ -1269,17 +1269,6 @@
|
|
|
1269
1269
|
}
|
|
1270
1270
|
@mixin hook-inverse-component-nav(){
|
|
1271
1271
|
|
|
1272
|
-
//
|
|
1273
|
-
// Parent icon modifier
|
|
1274
|
-
//
|
|
1275
|
-
|
|
1276
|
-
.uk-nav-parent-icon > .uk-parent > a::after {
|
|
1277
|
-
@include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
|
|
1278
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1279
|
-
}
|
|
1280
|
-
|
|
1281
|
-
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
|
|
1282
|
-
|
|
1283
1272
|
//
|
|
1284
1273
|
// Default
|
|
1285
1274
|
//
|
|
@@ -1362,6 +1351,10 @@
|
|
|
1362
1351
|
}
|
|
1363
1352
|
@mixin hook-inverse-component-navbar(){
|
|
1364
1353
|
|
|
1354
|
+
//
|
|
1355
|
+
// Nav Item
|
|
1356
|
+
//
|
|
1357
|
+
|
|
1365
1358
|
.uk-navbar-nav > li > a {
|
|
1366
1359
|
color: $inverse-navbar-nav-item-color;
|
|
1367
1360
|
@if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
|
|
@@ -1383,11 +1376,19 @@
|
|
|
1383
1376
|
@if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
|
|
1384
1377
|
}
|
|
1385
1378
|
|
|
1379
|
+
//
|
|
1380
|
+
// Item
|
|
1381
|
+
//
|
|
1382
|
+
|
|
1386
1383
|
.uk-navbar-item {
|
|
1387
1384
|
color: $inverse-navbar-item-color;
|
|
1388
1385
|
@if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
|
|
1389
1386
|
}
|
|
1390
1387
|
|
|
1388
|
+
//
|
|
1389
|
+
// Toggle
|
|
1390
|
+
//
|
|
1391
|
+
|
|
1391
1392
|
.uk-navbar-toggle {
|
|
1392
1393
|
color: $inverse-navbar-toggle-color;
|
|
1393
1394
|
@if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
|
|
@@ -1704,7 +1705,6 @@
|
|
|
1704
1705
|
@mixin hook-modal-close-full-hover(){}
|
|
1705
1706
|
@mixin hook-modal-misc(){}
|
|
1706
1707
|
@mixin hook-nav-sub(){}
|
|
1707
|
-
@mixin hook-nav-parent-icon(){}
|
|
1708
1708
|
@mixin hook-nav-header(){}
|
|
1709
1709
|
@mixin hook-nav-divider(){}
|
|
1710
1710
|
@mixin hook-nav-default(){}
|
|
@@ -1723,7 +1723,6 @@
|
|
|
1723
1723
|
@mixin hook-nav-primary-divider(){}
|
|
1724
1724
|
@mixin hook-nav-dividers(){}
|
|
1725
1725
|
@mixin hook-nav-misc(){}
|
|
1726
|
-
@mixin hook-inverse-nav-parent-icon(){}
|
|
1727
1726
|
@mixin hook-inverse-nav-default-item(){}
|
|
1728
1727
|
@mixin hook-inverse-nav-default-item-hover(){}
|
|
1729
1728
|
@mixin hook-inverse-nav-default-item-active(){}
|
|
@@ -1754,10 +1753,7 @@
|
|
|
1754
1753
|
@mixin hook-navbar-transparent(){}
|
|
1755
1754
|
@mixin hook-navbar-sticky(){}
|
|
1756
1755
|
@mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
|
|
1757
|
-
@mixin hook-navbar-dropdown-stretch(){
|
|
1758
|
-
box-shadow: none;
|
|
1759
|
-
background: $navbar-dropdown-stretch-background;
|
|
1760
|
-
}
|
|
1756
|
+
@mixin hook-navbar-dropdown-stretch(){ box-shadow: none; }
|
|
1761
1757
|
@mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
|
|
1762
1758
|
@mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
|
|
1763
1759
|
@mixin hook-navbar-dropdown-nav-item(){}
|
package/src/scss/mixins.scss
CHANGED
|
@@ -1020,17 +1020,6 @@
|
|
|
1020
1020
|
}
|
|
1021
1021
|
@mixin hook-inverse-component-nav(){
|
|
1022
1022
|
|
|
1023
|
-
//
|
|
1024
|
-
// Parent icon modifier
|
|
1025
|
-
//
|
|
1026
|
-
|
|
1027
|
-
.uk-nav-parent-icon > .uk-parent > a::after {
|
|
1028
|
-
@include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
|
|
1029
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
|
-
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
|
|
1033
|
-
|
|
1034
1023
|
//
|
|
1035
1024
|
// Default
|
|
1036
1025
|
//
|
|
@@ -1113,6 +1102,10 @@
|
|
|
1113
1102
|
}
|
|
1114
1103
|
@mixin hook-inverse-component-navbar(){
|
|
1115
1104
|
|
|
1105
|
+
//
|
|
1106
|
+
// Nav Item
|
|
1107
|
+
//
|
|
1108
|
+
|
|
1116
1109
|
.uk-navbar-nav > li > a {
|
|
1117
1110
|
color: $inverse-navbar-nav-item-color;
|
|
1118
1111
|
@if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
|
|
@@ -1134,11 +1127,19 @@
|
|
|
1134
1127
|
@if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
|
|
1135
1128
|
}
|
|
1136
1129
|
|
|
1130
|
+
//
|
|
1131
|
+
// Item
|
|
1132
|
+
//
|
|
1133
|
+
|
|
1137
1134
|
.uk-navbar-item {
|
|
1138
1135
|
color: $inverse-navbar-item-color;
|
|
1139
1136
|
@if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
|
|
1140
1137
|
}
|
|
1141
1138
|
|
|
1139
|
+
//
|
|
1140
|
+
// Toggle
|
|
1141
|
+
//
|
|
1142
|
+
|
|
1142
1143
|
.uk-navbar-toggle {
|
|
1143
1144
|
color: $inverse-navbar-toggle-color;
|
|
1144
1145
|
@if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
|
|
@@ -1431,7 +1432,6 @@
|
|
|
1431
1432
|
@mixin hook-modal-close-full-hover(){}
|
|
1432
1433
|
@mixin hook-modal-misc(){}
|
|
1433
1434
|
@mixin hook-nav-sub(){}
|
|
1434
|
-
@mixin hook-nav-parent-icon(){}
|
|
1435
1435
|
@mixin hook-nav-header(){}
|
|
1436
1436
|
@mixin hook-nav-divider(){}
|
|
1437
1437
|
@mixin hook-nav-default(){}
|
|
@@ -1450,7 +1450,6 @@
|
|
|
1450
1450
|
@mixin hook-nav-primary-divider(){}
|
|
1451
1451
|
@mixin hook-nav-dividers(){}
|
|
1452
1452
|
@mixin hook-nav-misc(){}
|
|
1453
|
-
@mixin hook-inverse-nav-parent-icon(){}
|
|
1454
1453
|
@mixin hook-inverse-nav-default-item(){}
|
|
1455
1454
|
@mixin hook-inverse-nav-default-item-hover(){}
|
|
1456
1455
|
@mixin hook-inverse-nav-default-item-active(){}
|
|
@@ -10,10 +10,13 @@
|
|
|
10
10
|
$navbar-gap: 30px !default;
|
|
11
11
|
|
|
12
12
|
$navbar-nav-gap: 30px !default;
|
|
13
|
+
|
|
13
14
|
$navbar-nav-item-padding-horizontal: 0 !default;
|
|
14
15
|
|
|
15
16
|
$navbar-nav-item-font-size: $global-small-font-size !default;
|
|
16
17
|
|
|
18
|
+
$navbar-item-padding-horizontal: 0 !default;
|
|
19
|
+
|
|
17
20
|
$navbar-dropdown-margin: 15px !default;
|
|
18
21
|
$navbar-dropdown-padding: 25px !default;
|
|
19
22
|
$navbar-dropdown-background: $global-background !default;
|
|
@@ -31,8 +34,6 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
31
34
|
|
|
32
35
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
33
36
|
|
|
34
|
-
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
35
|
-
|
|
36
37
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
37
38
|
|
|
38
39
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|