uikit 3.14.4-dev.6a00f7fe6 → 3.14.4-dev.7db3661de
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 +24 -0
- package/dist/css/uikit-core-rtl.css +146 -77
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +146 -77
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +143 -78
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +143 -78
- 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 +115 -24
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +115 -24
- 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 +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 +22 -7
- 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 +22 -7
- 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 +26 -19
- 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 +765 -647
- 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 +1593 -1458
- 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/drop.js +7 -0
- package/src/js/core/height-viewport.js +14 -6
- package/src/js/core/icon.js +16 -0
- package/src/js/core/index.js +2 -0
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +44 -15
- package/src/js/core/offcanvas.js +1 -47
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/sticky.js +8 -9
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/modal.js +90 -4
- package/src/js/mixin/position.js +27 -11
- package/src/js/mixin/slider-drag.js +20 -8
- package/src/js/mixin/togglable.js +8 -17
- package/src/js/util/dimensions.js +6 -6
- package/src/js/util/position.js +1 -0
- package/src/js/util/style.js +4 -13
- package/src/js/util/viewport.js +20 -36
- package/src/less/components/dropdown.less +14 -0
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +37 -44
- package/src/less/components/navbar.less +108 -24
- package/src/less/components/utility.less +21 -4
- package/src/less/theme/nav.less +3 -15
- package/src/less/theme/navbar.less +7 -7
- package/src/scss/components/dropdown.scss +14 -0
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +36 -32
- package/src/scss/components/navbar.scss +96 -24
- package/src/scss/components/utility.scss +19 -3
- package/src/scss/mixins-theme.scss +18 -20
- package/src/scss/mixins.scss +16 -15
- package/src/scss/theme/nav.scss +3 -15
- package/src/scss/theme/navbar.scss +6 -3
- package/src/scss/variables-theme.scss +27 -15
- package/src/scss/variables.scss +27 -13
- package/tests/drop.html +72 -16
- package/tests/dropdown.html +103 -16
- package/tests/index.html +3 -3
- package/tests/nav.html +20 -87
- package/tests/navbar.html +2128 -1133
- package/tests/offcanvas.html +8 -8
- package/tests/utility.html +19 -0
- package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/src/scss/theme/nav.scss
CHANGED
|
@@ -7,14 +7,10 @@
|
|
|
7
7
|
// Variables
|
|
8
8
|
// ========================================================================
|
|
9
9
|
|
|
10
|
-
$nav-default-subtitle-font-size: 12px !default;
|
|
11
|
-
|
|
12
|
-
//
|
|
13
|
-
// New
|
|
14
|
-
//
|
|
15
|
-
|
|
16
10
|
$nav-default-font-size: $global-small-font-size !default;
|
|
17
11
|
|
|
12
|
+
$nav-default-subtitle-font-size: 12px !default;
|
|
13
|
+
|
|
18
14
|
|
|
19
15
|
// Sublists
|
|
20
16
|
// ========================================================================
|
|
@@ -22,12 +18,6 @@ $nav-default-font-size: $global-small-font-size !defaul
|
|
|
22
18
|
// @mixin hook-nav-sub(){}
|
|
23
19
|
|
|
24
20
|
|
|
25
|
-
// Parent icon modifier
|
|
26
|
-
// ========================================================================
|
|
27
|
-
|
|
28
|
-
// @mixin hook-nav-parent-icon(){}
|
|
29
|
-
|
|
30
|
-
|
|
31
21
|
// Header
|
|
32
22
|
// ========================================================================
|
|
33
23
|
|
|
@@ -43,7 +33,7 @@ $nav-default-font-size: $global-small-font-size !defaul
|
|
|
43
33
|
// Default style modifier
|
|
44
34
|
// ========================================================================
|
|
45
35
|
|
|
46
|
-
|
|
36
|
+
// @mixin hook-nav-default(){}
|
|
47
37
|
|
|
48
38
|
// @mixin hook-nav-default-item(){}
|
|
49
39
|
|
|
@@ -91,8 +81,6 @@ $nav-default-font-size: $global-small-font-size !defaul
|
|
|
91
81
|
// Inverse
|
|
92
82
|
// ========================================================================
|
|
93
83
|
|
|
94
|
-
// @mixin hook-inverse-nav-parent-icon(){}
|
|
95
|
-
|
|
96
84
|
// @mixin hook-inverse-nav-default-item(){}
|
|
97
85
|
// @mixin hook-inverse-nav-default-item-hover(){}
|
|
98
86
|
// @mixin hook-inverse-nav-default-item-active(){}
|
|
@@ -7,11 +7,16 @@
|
|
|
7
7
|
// Variables
|
|
8
8
|
// ========================================================================
|
|
9
9
|
|
|
10
|
-
$navbar-
|
|
10
|
+
$navbar-gap: 30px !default;
|
|
11
|
+
|
|
12
|
+
$navbar-nav-gap: 30px !default;
|
|
13
|
+
|
|
11
14
|
$navbar-nav-item-padding-horizontal: 0 !default;
|
|
12
15
|
|
|
13
16
|
$navbar-nav-item-font-size: $global-small-font-size !default;
|
|
14
17
|
|
|
18
|
+
$navbar-item-padding-horizontal: 0 !default;
|
|
19
|
+
|
|
15
20
|
$navbar-dropdown-margin: 15px !default;
|
|
16
21
|
$navbar-dropdown-padding: 25px !default;
|
|
17
22
|
$navbar-dropdown-background: $global-background !default;
|
|
@@ -29,8 +34,6 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
29
34
|
|
|
30
35
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
31
36
|
|
|
32
|
-
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
33
|
-
|
|
34
37
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
35
38
|
|
|
36
39
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
@@ -376,6 +376,7 @@ $dropdown-min-width: 200px !default;
|
|
|
376
376
|
$dropdown-padding: 25px !default;
|
|
377
377
|
$dropdown-background: $global-background !default;
|
|
378
378
|
$dropdown-color: $global-color !default;
|
|
379
|
+
$dropdown-large-padding: 40px !default;
|
|
379
380
|
$dropdown-nav-item-color: $global-muted-color !default;
|
|
380
381
|
$dropdown-nav-item-hover-color: $global-color !default;
|
|
381
382
|
$dropdown-nav-subtitle-font-size: 12px !default;
|
|
@@ -680,9 +681,6 @@ $nav-sublist-padding-vertical: 5px !default;
|
|
|
680
681
|
$nav-sublist-padding-left: 15px !default;
|
|
681
682
|
$nav-sublist-deeper-padding-left: 15px !default;
|
|
682
683
|
$nav-sublist-item-padding-vertical: 2px !default;
|
|
683
|
-
$nav-parent-icon-width: ($global-line-height * 1em) !default;
|
|
684
|
-
$nav-parent-icon-height: $nav-parent-icon-width !default;
|
|
685
|
-
$nav-parent-icon-color: $global-color !default;
|
|
686
684
|
$nav-header-padding-vertical: $nav-item-padding-vertical !default;
|
|
687
685
|
$nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
|
|
688
686
|
$nav-header-font-size: $global-small-font-size !default;
|
|
@@ -690,6 +688,8 @@ $nav-header-text-transform: uppercase !default;
|
|
|
690
688
|
$nav-header-margin-top: $global-margin !default;
|
|
691
689
|
$nav-divider-margin-vertical: 5px !default;
|
|
692
690
|
$nav-divider-margin-horizontal: 0 !default;
|
|
691
|
+
$nav-default-font-size: $global-small-font-size !default;
|
|
692
|
+
$nav-default-line-height: $global-line-height !default;
|
|
693
693
|
$nav-default-item-color: $global-muted-color !default;
|
|
694
694
|
$nav-default-item-hover-color: $global-color !default;
|
|
695
695
|
$nav-default-item-active-color: $global-emphasis-color !default;
|
|
@@ -697,11 +697,13 @@ $nav-default-subtitle-font-size: 12px !default;
|
|
|
697
697
|
$nav-default-header-color: $global-emphasis-color !default;
|
|
698
698
|
$nav-default-divider-border-width: $global-border-width !default;
|
|
699
699
|
$nav-default-divider-border: $global-border !default;
|
|
700
|
+
$nav-default-sublist-font-size: $nav-default-font-size !default;
|
|
701
|
+
$nav-default-sublist-line-height: $nav-default-line-height !default;
|
|
700
702
|
$nav-default-sublist-item-color: $global-muted-color !default;
|
|
701
703
|
$nav-default-sublist-item-hover-color: $global-color !default;
|
|
702
704
|
$nav-default-sublist-item-active-color: $global-emphasis-color !default;
|
|
703
|
-
$nav-primary-
|
|
704
|
-
$nav-primary-
|
|
705
|
+
$nav-primary-font-size: $global-large-font-size !default;
|
|
706
|
+
$nav-primary-line-height: $global-line-height !default;
|
|
705
707
|
$nav-primary-item-color: $global-muted-color !default;
|
|
706
708
|
$nav-primary-item-hover-color: $global-color !default;
|
|
707
709
|
$nav-primary-item-active-color: $global-emphasis-color !default;
|
|
@@ -709,15 +711,14 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
|
|
|
709
711
|
$nav-primary-header-color: $global-emphasis-color !default;
|
|
710
712
|
$nav-primary-divider-border-width: $global-border-width !default;
|
|
711
713
|
$nav-primary-divider-border: $global-border !default;
|
|
714
|
+
$nav-primary-sublist-font-size: $global-medium-font-size !default;
|
|
715
|
+
$nav-primary-sublist-line-height: $global-line-height !default;
|
|
712
716
|
$nav-primary-sublist-item-color: $global-muted-color !default;
|
|
713
717
|
$nav-primary-sublist-item-hover-color: $global-color !default;
|
|
714
718
|
$nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
|
715
|
-
$nav-dividers-margin-top:
|
|
719
|
+
$nav-dividers-margin-top: 5px !default;
|
|
716
720
|
$nav-dividers-border-width: $global-border-width !default;
|
|
717
721
|
$nav-dividers-border: $global-border !default;
|
|
718
|
-
$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;
|
|
719
|
-
$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;
|
|
720
|
-
$inverse-nav-parent-icon-color: $inverse-global-color !default;
|
|
721
722
|
$inverse-nav-default-item-color: $inverse-global-muted-color !default;
|
|
722
723
|
$inverse-nav-default-item-hover-color: $inverse-global-color !default;
|
|
723
724
|
$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
|
|
@@ -736,9 +737,10 @@ $inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default;
|
|
|
736
737
|
$inverse-nav-primary-sublist-item-active-color: $inverse-global-emphasis-color !default;
|
|
737
738
|
$inverse-nav-dividers-border: $inverse-global-border !default;
|
|
738
739
|
$navbar-background: $global-muted-background !default;
|
|
740
|
+
$navbar-gap: 30px !default;
|
|
739
741
|
$navbar-color-mode: none !default;
|
|
742
|
+
$navbar-nav-gap: 30px !default;
|
|
740
743
|
$navbar-nav-item-height: 80px !default;
|
|
741
|
-
$navbar-nav-item-gap: 30px !default;
|
|
742
744
|
$navbar-nav-item-padding-horizontal: 0 !default;
|
|
743
745
|
$navbar-nav-item-color: $global-muted-color !default;
|
|
744
746
|
$navbar-nav-item-font-size: $global-small-font-size !default;
|
|
@@ -746,7 +748,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
|
|
|
746
748
|
$navbar-nav-item-hover-color: $global-color !default;
|
|
747
749
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
748
750
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
749
|
-
$navbar-
|
|
751
|
+
$navbar-parent-icon-margin-left: 4px !default;
|
|
752
|
+
$navbar-item-padding-horizontal: 0 !default;
|
|
750
753
|
$navbar-item-color: $global-color !default;
|
|
751
754
|
$navbar-toggle-color: $global-muted-color !default;
|
|
752
755
|
$navbar-toggle-hover-color: $global-color !default;
|
|
@@ -762,9 +765,20 @@ $navbar-dropdown-color: $global-color !default;
|
|
|
762
765
|
$navbar-dropdown-color-mode: none !default;
|
|
763
766
|
$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
|
|
764
767
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
765
|
-
$navbar-dropdown-
|
|
766
|
-
$navbar-dropdown-
|
|
768
|
+
$navbar-dropdown-large-shift-margin: 0 !default;
|
|
769
|
+
$navbar-dropdown-large-padding: 40px !default;
|
|
770
|
+
$navbar-dropdown-stretch-padding-top: 15px !default;
|
|
771
|
+
$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
|
|
772
|
+
$navbar-dropdown-stretch-padding-horizontal: 15px !default;
|
|
773
|
+
$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
|
|
774
|
+
$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
|
|
775
|
+
$navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
|
|
776
|
+
$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
|
|
777
|
+
$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
|
|
767
778
|
$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
779
|
+
$navbar-dropdown-dropbar-viewport-margin: 15px !default;
|
|
780
|
+
$navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
|
|
781
|
+
$navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
|
|
768
782
|
$navbar-dropdown-nav-item-color: $global-muted-color !default;
|
|
769
783
|
$navbar-dropdown-nav-item-hover-color: $global-color !default;
|
|
770
784
|
$navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
|
|
@@ -1172,11 +1186,9 @@ $modal-footer-border-width: $global-border-width !default;
|
|
|
1172
1186
|
$modal-footer-border: $global-border !default;
|
|
1173
1187
|
$modal-close-full-padding: $global-margin !default;
|
|
1174
1188
|
$modal-close-full-background: $modal-dialog-background !default;
|
|
1175
|
-
$nav-default-font-size: $global-small-font-size !default;
|
|
1176
1189
|
$navbar-nav-item-text-transform: uppercase !default;
|
|
1177
1190
|
$navbar-dropdown-nav-font-size: $global-small-font-size !default;
|
|
1178
1191
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
1179
|
-
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
1180
1192
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
1181
1193
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
1182
1194
|
$navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
|
package/src/scss/variables.scss
CHANGED
|
@@ -375,6 +375,7 @@ $dropdown-min-width: 200px !default;
|
|
|
375
375
|
$dropdown-padding: 15px !default;
|
|
376
376
|
$dropdown-background: $global-muted-background !default;
|
|
377
377
|
$dropdown-color: $global-color !default;
|
|
378
|
+
$dropdown-large-padding: 40px !default;
|
|
378
379
|
$dropdown-nav-item-color: $global-muted-color !default;
|
|
379
380
|
$dropdown-nav-item-hover-color: $global-color !default;
|
|
380
381
|
$dropdown-nav-subtitle-font-size: $global-small-font-size !default;
|
|
@@ -678,9 +679,6 @@ $nav-sublist-padding-vertical: 5px !default;
|
|
|
678
679
|
$nav-sublist-padding-left: 15px !default;
|
|
679
680
|
$nav-sublist-deeper-padding-left: 15px !default;
|
|
680
681
|
$nav-sublist-item-padding-vertical: 2px !default;
|
|
681
|
-
$nav-parent-icon-width: ($global-line-height * 1em) !default;
|
|
682
|
-
$nav-parent-icon-height: $nav-parent-icon-width !default;
|
|
683
|
-
$nav-parent-icon-color: $global-color !default;
|
|
684
682
|
$nav-header-padding-vertical: $nav-item-padding-vertical !default;
|
|
685
683
|
$nav-header-padding-horizontal: $nav-item-padding-horizontal !default;
|
|
686
684
|
$nav-header-font-size: $global-small-font-size !default;
|
|
@@ -688,6 +686,8 @@ $nav-header-text-transform: uppercase !default;
|
|
|
688
686
|
$nav-header-margin-top: $global-margin !default;
|
|
689
687
|
$nav-divider-margin-vertical: 5px !default;
|
|
690
688
|
$nav-divider-margin-horizontal: 0 !default;
|
|
689
|
+
$nav-default-font-size: $global-font-size !default;
|
|
690
|
+
$nav-default-line-height: $global-line-height !default;
|
|
691
691
|
$nav-default-item-color: $global-muted-color !default;
|
|
692
692
|
$nav-default-item-hover-color: $global-color !default;
|
|
693
693
|
$nav-default-item-active-color: $global-emphasis-color !default;
|
|
@@ -695,11 +695,13 @@ $nav-default-subtitle-font-size: $global-small-font-size !default;
|
|
|
695
695
|
$nav-default-header-color: $global-emphasis-color !default;
|
|
696
696
|
$nav-default-divider-border-width: $global-border-width !default;
|
|
697
697
|
$nav-default-divider-border: $global-border !default;
|
|
698
|
+
$nav-default-sublist-font-size: $nav-default-font-size !default;
|
|
699
|
+
$nav-default-sublist-line-height: $nav-default-line-height !default;
|
|
698
700
|
$nav-default-sublist-item-color: $global-muted-color !default;
|
|
699
701
|
$nav-default-sublist-item-hover-color: $global-color !default;
|
|
700
702
|
$nav-default-sublist-item-active-color: $global-emphasis-color !default;
|
|
701
|
-
$nav-primary-
|
|
702
|
-
$nav-primary-
|
|
703
|
+
$nav-primary-font-size: $global-large-font-size !default;
|
|
704
|
+
$nav-primary-line-height: $global-line-height !default;
|
|
703
705
|
$nav-primary-item-color: $global-muted-color !default;
|
|
704
706
|
$nav-primary-item-hover-color: $global-color !default;
|
|
705
707
|
$nav-primary-item-active-color: $global-emphasis-color !default;
|
|
@@ -707,15 +709,14 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
|
|
|
707
709
|
$nav-primary-header-color: $global-emphasis-color !default;
|
|
708
710
|
$nav-primary-divider-border-width: $global-border-width !default;
|
|
709
711
|
$nav-primary-divider-border: $global-border !default;
|
|
712
|
+
$nav-primary-sublist-font-size: $global-medium-font-size !default;
|
|
713
|
+
$nav-primary-sublist-line-height: $global-line-height !default;
|
|
710
714
|
$nav-primary-sublist-item-color: $global-muted-color !default;
|
|
711
715
|
$nav-primary-sublist-item-hover-color: $global-color !default;
|
|
712
716
|
$nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
|
713
|
-
$nav-dividers-margin-top:
|
|
717
|
+
$nav-dividers-margin-top: 5px !default;
|
|
714
718
|
$nav-dividers-border-width: $global-border-width !default;
|
|
715
719
|
$nav-dividers-border: $global-border !default;
|
|
716
|
-
$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;
|
|
717
|
-
$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;
|
|
718
|
-
$inverse-nav-parent-icon-color: $inverse-global-color !default;
|
|
719
720
|
$inverse-nav-default-item-color: $inverse-global-muted-color !default;
|
|
720
721
|
$inverse-nav-default-item-hover-color: $inverse-global-color !default;
|
|
721
722
|
$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default;
|
|
@@ -734,9 +735,10 @@ $inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default;
|
|
|
734
735
|
$inverse-nav-primary-sublist-item-active-color: $inverse-global-emphasis-color !default;
|
|
735
736
|
$inverse-nav-dividers-border: $inverse-global-border !default;
|
|
736
737
|
$navbar-background: $global-muted-background !default;
|
|
738
|
+
$navbar-gap: 0px !default;
|
|
737
739
|
$navbar-color-mode: none !default;
|
|
740
|
+
$navbar-nav-gap: 0px !default;
|
|
738
741
|
$navbar-nav-item-height: 80px !default;
|
|
739
|
-
$navbar-nav-item-gap: 0px !default;
|
|
740
742
|
$navbar-nav-item-padding-horizontal: 15px !default;
|
|
741
743
|
$navbar-nav-item-color: $global-muted-color !default;
|
|
742
744
|
$navbar-nav-item-font-size: $global-font-size !default;
|
|
@@ -744,7 +746,8 @@ $navbar-nav-item-font-family: $global-font-family !default;
|
|
|
744
746
|
$navbar-nav-item-hover-color: $global-color !default;
|
|
745
747
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
746
748
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
747
|
-
$navbar-
|
|
749
|
+
$navbar-parent-icon-margin-left: 4px !default;
|
|
750
|
+
$navbar-item-padding-horizontal: 15px !default;
|
|
748
751
|
$navbar-item-color: $global-color !default;
|
|
749
752
|
$navbar-toggle-color: $global-muted-color !default;
|
|
750
753
|
$navbar-toggle-hover-color: $global-color !default;
|
|
@@ -760,9 +763,20 @@ $navbar-dropdown-color: $global-color !default;
|
|
|
760
763
|
$navbar-dropdown-color-mode: none !default;
|
|
761
764
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
762
765
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
763
|
-
$navbar-dropdown-
|
|
764
|
-
$navbar-dropdown-
|
|
766
|
+
$navbar-dropdown-large-shift-margin: 0 !default;
|
|
767
|
+
$navbar-dropdown-large-padding: 40px !default;
|
|
768
|
+
$navbar-dropdown-stretch-padding-top: 15px !default;
|
|
769
|
+
$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
|
|
770
|
+
$navbar-dropdown-stretch-padding-horizontal: 15px !default;
|
|
771
|
+
$navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
|
|
772
|
+
$navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
|
|
773
|
+
$navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
|
|
774
|
+
$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
|
|
775
|
+
$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
|
|
765
776
|
$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
777
|
+
$navbar-dropdown-dropbar-viewport-margin: 15px !default;
|
|
778
|
+
$navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
|
|
779
|
+
$navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
|
|
766
780
|
$navbar-dropdown-nav-item-color: $global-muted-color !default;
|
|
767
781
|
$navbar-dropdown-nav-item-hover-color: $global-color !default;
|
|
768
782
|
$navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
|
package/tests/drop.html
CHANGED
|
@@ -17,6 +17,13 @@
|
|
|
17
17
|
|
|
18
18
|
.boundary-overflow { width: 250%; }
|
|
19
19
|
|
|
20
|
+
.scroll-container {
|
|
21
|
+
padding: 15px;
|
|
22
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
23
|
+
overflow: auto;
|
|
24
|
+
-webkit-overflow-scrolling: touch;
|
|
25
|
+
}
|
|
26
|
+
|
|
20
27
|
</style>
|
|
21
28
|
</head>
|
|
22
29
|
|
|
@@ -412,28 +419,28 @@
|
|
|
412
419
|
<div class="uk-margin" uk-margin>
|
|
413
420
|
|
|
414
421
|
<div class="uk-inline">
|
|
415
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
422
|
+
<button class="uk-button uk-button-default" type="button">Bottom Fade</button>
|
|
416
423
|
<div uk-drop="pos: bottom-stretch; animate-out: true">
|
|
417
424
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
418
425
|
</div>
|
|
419
426
|
</div>
|
|
420
427
|
|
|
421
428
|
<div class="uk-inline">
|
|
422
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
429
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide</button>
|
|
423
430
|
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
424
431
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
425
432
|
</div>
|
|
426
433
|
</div>
|
|
427
434
|
|
|
428
435
|
<div class="uk-inline">
|
|
429
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
436
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
|
|
430
437
|
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
431
438
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
432
439
|
</div>
|
|
433
440
|
</div>
|
|
434
441
|
|
|
435
442
|
<div class="uk-inline">
|
|
436
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
443
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
|
|
437
444
|
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
438
445
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
439
446
|
</div>
|
|
@@ -444,28 +451,28 @@
|
|
|
444
451
|
<div class="uk-margin" uk-margin>
|
|
445
452
|
|
|
446
453
|
<div class="uk-inline">
|
|
447
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
454
|
+
<button class="uk-button uk-button-default" type="button">Top Fade</button>
|
|
448
455
|
<div uk-drop="pos: top-stretch; animate-out: true">
|
|
449
456
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
450
457
|
</div>
|
|
451
458
|
</div>
|
|
452
459
|
|
|
453
460
|
<div class="uk-inline">
|
|
454
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
461
|
+
<button class="uk-button uk-button-default" type="button">Top Slide</button>
|
|
455
462
|
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide">
|
|
456
463
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
457
464
|
</div>
|
|
458
465
|
</div>
|
|
459
466
|
|
|
460
467
|
<div class="uk-inline">
|
|
461
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
468
|
+
<button class="uk-button uk-button-default" type="button">Top Slide Left</button>
|
|
462
469
|
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide-left">
|
|
463
470
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
464
471
|
</div>
|
|
465
472
|
</div>
|
|
466
473
|
|
|
467
474
|
<div class="uk-inline">
|
|
468
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
475
|
+
<button class="uk-button uk-button-default" type="button">Top Slide Right</button>
|
|
469
476
|
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
470
477
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
471
478
|
</div>
|
|
@@ -476,28 +483,28 @@
|
|
|
476
483
|
<div class="uk-margin" uk-margin>
|
|
477
484
|
|
|
478
485
|
<div class="uk-inline">
|
|
479
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
486
|
+
<button class="uk-button uk-button-default" type="button">Left Fade</button>
|
|
480
487
|
<div uk-drop="pos: left-stretch; animate-out: true">
|
|
481
488
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
482
489
|
</div>
|
|
483
490
|
</div>
|
|
484
491
|
|
|
485
492
|
<div class="uk-inline">
|
|
486
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
493
|
+
<button class="uk-button uk-button-default" type="button">Left Slide</button>
|
|
487
494
|
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide">
|
|
488
495
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
489
496
|
</div>
|
|
490
497
|
</div>
|
|
491
498
|
|
|
492
499
|
<div class="uk-inline">
|
|
493
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
500
|
+
<button class="uk-button uk-button-default" type="button">Left Slide Left</button>
|
|
494
501
|
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
495
502
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
496
503
|
</div>
|
|
497
504
|
</div>
|
|
498
505
|
|
|
499
506
|
<div class="uk-inline">
|
|
500
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
507
|
+
<button class="uk-button uk-button-default" type="button">Left Slide Right</button>
|
|
501
508
|
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
502
509
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
503
510
|
</div>
|
|
@@ -508,28 +515,28 @@
|
|
|
508
515
|
<div class="uk-margin" uk-margin>
|
|
509
516
|
|
|
510
517
|
<div class="uk-inline">
|
|
511
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
518
|
+
<button class="uk-button uk-button-default" type="button">Right Fade</button>
|
|
512
519
|
<div uk-drop="pos: right-stretch; animate-out: true">
|
|
513
520
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
514
521
|
</div>
|
|
515
522
|
</div>
|
|
516
523
|
|
|
517
524
|
<div class="uk-inline">
|
|
518
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
525
|
+
<button class="uk-button uk-button-default" type="button">Right Slide</button>
|
|
519
526
|
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
|
|
520
527
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
521
528
|
</div>
|
|
522
529
|
</div>
|
|
523
530
|
|
|
524
531
|
<div class="uk-inline">
|
|
525
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
532
|
+
<button class="uk-button uk-button-default" type="button">Right Slide Left</button>
|
|
526
533
|
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
527
534
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
528
535
|
</div>
|
|
529
536
|
</div>
|
|
530
537
|
|
|
531
538
|
<div class="uk-inline">
|
|
532
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
539
|
+
<button class="uk-button uk-button-default" type="button">Right Slide Right</button>
|
|
533
540
|
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide-right">
|
|
534
541
|
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
535
542
|
</div>
|
|
@@ -537,6 +544,49 @@
|
|
|
537
544
|
|
|
538
545
|
</div>
|
|
539
546
|
|
|
547
|
+
<div class="uk-child-width-1-4@m" uk-grid>
|
|
548
|
+
<div>
|
|
549
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
550
|
+
|
|
551
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
|
|
552
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true">
|
|
553
|
+
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
554
|
+
</div>
|
|
555
|
+
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
<div>
|
|
559
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
560
|
+
|
|
561
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
|
|
562
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
563
|
+
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
<div>
|
|
569
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
570
|
+
|
|
571
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
|
|
572
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
573
|
+
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
</div>
|
|
577
|
+
</div>
|
|
578
|
+
<div>
|
|
579
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
580
|
+
|
|
581
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
|
|
582
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
583
|
+
<div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
584
|
+
</div>
|
|
585
|
+
|
|
586
|
+
</div>
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
589
|
+
|
|
540
590
|
<h2>JavaScript Options</h2>
|
|
541
591
|
|
|
542
592
|
<div class="uk-overflow-auto">
|
|
@@ -622,6 +672,12 @@
|
|
|
622
672
|
<td>false</td>
|
|
623
673
|
<td>Use animation when closing the Drop.</td>
|
|
624
674
|
</tr>
|
|
675
|
+
<tr>
|
|
676
|
+
<td><code>bg-scroll</code></td>
|
|
677
|
+
<td>Boolean</td>
|
|
678
|
+
<td>true</td>
|
|
679
|
+
<td>Allow background scrolling while drop is opened.</td>
|
|
680
|
+
</tr>
|
|
625
681
|
<tr>
|
|
626
682
|
<td><code>duration</code></td>
|
|
627
683
|
<td>Number</td>
|