uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.f2e3be255
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 +6 -0
- package/dist/css/uikit-core-rtl.css +41 -14
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +41 -14
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +41 -15
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +41 -15
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1 -1
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1 -1
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +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 +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +11 -3
- 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 +57 -20
- 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 +57 -20
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/images/backgrounds/nav-parent-close.svg +1 -1
- package/src/images/backgrounds/nav-parent-open.svg +1 -1
- package/src/images/backgrounds/navbar-parent-close.svg +3 -0
- package/src/images/backgrounds/navbar-parent-open.svg +3 -0
- package/src/js/core/navbar.js +44 -15
- package/src/js/mixin/position.js +16 -7
- package/src/less/components/dropdown.less +8 -0
- package/src/less/components/navbar.less +52 -13
- package/src/less/theme/navbar.less +4 -6
- package/src/scss/components/dropdown.scss +8 -0
- package/src/scss/components/nav.scss +2 -2
- package/src/scss/components/navbar.scss +52 -13
- package/src/scss/mixins-theme.scss +1 -4
- 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/navbar.html +281 -49
|
@@ -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;
|
|
@@ -721,8 +722,8 @@ $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
|
|
721
722
|
$nav-dividers-margin-top: 0 !default;
|
|
722
723
|
$nav-dividers-border-width: $global-border-width !default;
|
|
723
724
|
$nav-dividers-border: $global-border !default;
|
|
724
|
-
$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%
|
|
725
|
-
$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%
|
|
725
|
+
$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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
726
|
+
$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%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
726
727
|
$inverse-nav-parent-icon-color: $inverse-global-color !default;
|
|
727
728
|
$inverse-nav-default-item-color: $inverse-global-muted-color !default;
|
|
728
729
|
$inverse-nav-default-item-hover-color: $inverse-global-color !default;
|
|
@@ -753,7 +754,10 @@ $navbar-nav-item-font-family: $global-font-family !default;
|
|
|
753
754
|
$navbar-nav-item-hover-color: $global-color !default;
|
|
754
755
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
755
756
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
756
|
-
$navbar-
|
|
757
|
+
$navbar-parent-icon-width: 12px !default;
|
|
758
|
+
$navbar-parent-icon-height: 12px !default;
|
|
759
|
+
$navbar-parent-icon-color: $navbar-nav-item-color !default;
|
|
760
|
+
$navbar-item-padding-horizontal: 0 !default;
|
|
757
761
|
$navbar-item-color: $global-color !default;
|
|
758
762
|
$navbar-toggle-color: $global-muted-color !default;
|
|
759
763
|
$navbar-toggle-hover-color: $global-color !default;
|
|
@@ -769,8 +773,13 @@ $navbar-dropdown-color: $global-color !default;
|
|
|
769
773
|
$navbar-dropdown-color-mode: none !default;
|
|
770
774
|
$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
|
|
771
775
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
772
|
-
$navbar-dropdown-
|
|
773
|
-
$navbar-dropdown-
|
|
776
|
+
$navbar-dropdown-large-padding: 40px !default;
|
|
777
|
+
$navbar-dropdown-stretch-padding-top: 15px !default;
|
|
778
|
+
$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
|
|
779
|
+
$navbar-dropdown-stretch-padding-horizontal: 15px !default;
|
|
780
|
+
$navbar-dropdown-stretch-background: $global-background !default;
|
|
781
|
+
$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
|
|
782
|
+
$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
|
|
774
783
|
$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
775
784
|
$navbar-dropdown-nav-item-color: $global-muted-color !default;
|
|
776
785
|
$navbar-dropdown-nav-item-hover-color: $global-color !default;
|
|
@@ -784,6 +793,8 @@ $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
784
793
|
$navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
|
|
785
794
|
$navbar-dropbar-background: $navbar-dropdown-background !default;
|
|
786
795
|
$navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
796
|
+
$internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
797
|
+
$internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
787
798
|
$inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
|
|
788
799
|
$inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
|
|
789
800
|
$inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
|
|
@@ -1182,7 +1193,6 @@ $modal-close-full-background: $modal-dialog-background !default;
|
|
|
1182
1193
|
$navbar-nav-item-text-transform: uppercase !default;
|
|
1183
1194
|
$navbar-dropdown-nav-font-size: $global-small-font-size !default;
|
|
1184
1195
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
1185
|
-
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
1186
1196
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
1187
1197
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
1188
1198
|
$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;
|
|
@@ -719,8 +720,8 @@ $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
|
|
719
720
|
$nav-dividers-margin-top: 0 !default;
|
|
720
721
|
$nav-dividers-border-width: $global-border-width !default;
|
|
721
722
|
$nav-dividers-border: $global-border !default;
|
|
722
|
-
$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%
|
|
723
|
-
$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%
|
|
723
|
+
$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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
724
|
+
$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%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
724
725
|
$inverse-nav-parent-icon-color: $inverse-global-color !default;
|
|
725
726
|
$inverse-nav-default-item-color: $inverse-global-muted-color !default;
|
|
726
727
|
$inverse-nav-default-item-hover-color: $inverse-global-color !default;
|
|
@@ -751,7 +752,10 @@ $navbar-nav-item-font-family: $global-font-family !default;
|
|
|
751
752
|
$navbar-nav-item-hover-color: $global-color !default;
|
|
752
753
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
753
754
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
754
|
-
$navbar-
|
|
755
|
+
$navbar-parent-icon-width: 12px !default;
|
|
756
|
+
$navbar-parent-icon-height: 12px !default;
|
|
757
|
+
$navbar-parent-icon-color: $navbar-nav-item-color !default;
|
|
758
|
+
$navbar-item-padding-horizontal: 15px !default;
|
|
755
759
|
$navbar-item-color: $global-color !default;
|
|
756
760
|
$navbar-toggle-color: $global-muted-color !default;
|
|
757
761
|
$navbar-toggle-hover-color: $global-color !default;
|
|
@@ -767,8 +771,13 @@ $navbar-dropdown-color: $global-color !default;
|
|
|
767
771
|
$navbar-dropdown-color-mode: none !default;
|
|
768
772
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
769
773
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
770
|
-
$navbar-dropdown-
|
|
771
|
-
$navbar-dropdown-
|
|
774
|
+
$navbar-dropdown-large-padding: 40px !default;
|
|
775
|
+
$navbar-dropdown-stretch-padding-top: 15px !default;
|
|
776
|
+
$navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
|
|
777
|
+
$navbar-dropdown-stretch-padding-horizontal: 15px !default;
|
|
778
|
+
$navbar-dropdown-stretch-background: $global-background !default;
|
|
779
|
+
$navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
|
|
780
|
+
$navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
|
|
772
781
|
$navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
773
782
|
$navbar-dropdown-nav-item-color: $global-muted-color !default;
|
|
774
783
|
$navbar-dropdown-nav-item-hover-color: $global-color !default;
|
|
@@ -782,6 +791,8 @@ $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
782
791
|
$navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
|
|
783
792
|
$navbar-dropbar-background: $navbar-dropdown-background !default;
|
|
784
793
|
$navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
794
|
+
$internal-navbar-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
795
|
+
$internal-navbar-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%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%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
|
|
785
796
|
$inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
|
|
786
797
|
$inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
|
|
787
798
|
$inverse-navbar-nav-item-onclick-color: $inverse-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">
|
package/tests/dropdown.html
CHANGED
|
@@ -14,6 +14,13 @@
|
|
|
14
14
|
width: 100%;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
.scroll-container {
|
|
18
|
+
padding: 15px;
|
|
19
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
20
|
+
overflow: auto;
|
|
21
|
+
-webkit-overflow-scrolling: touch;
|
|
22
|
+
}
|
|
23
|
+
|
|
17
24
|
</style>
|
|
18
25
|
</head>
|
|
19
26
|
|
|
@@ -23,6 +30,13 @@
|
|
|
23
30
|
|
|
24
31
|
<h1>Dropdown</h1>
|
|
25
32
|
|
|
33
|
+
<div class="uk-margin">
|
|
34
|
+
<select id="js-size-switcher" class="uk-select uk-form-width-small">
|
|
35
|
+
<option value="">Default</option>
|
|
36
|
+
<option value="uk-dropdown-large">Large</option>
|
|
37
|
+
</select>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
26
40
|
<div uk-grid>
|
|
27
41
|
<div class="uk-width-1-4@m">
|
|
28
42
|
|
|
@@ -378,7 +392,7 @@
|
|
|
378
392
|
<div class="uk-margin" uk-margin>
|
|
379
393
|
|
|
380
394
|
<div class="uk-inline">
|
|
381
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
395
|
+
<button class="uk-button uk-button-default" type="button">Bottom Fade</button>
|
|
382
396
|
<div uk-dropdown="pos: bottom-stretch; animate-out: true">
|
|
383
397
|
<ul class="uk-nav uk-dropdown-nav">
|
|
384
398
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -389,7 +403,7 @@
|
|
|
389
403
|
</div>
|
|
390
404
|
|
|
391
405
|
<div class="uk-inline">
|
|
392
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
406
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide</button>
|
|
393
407
|
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
394
408
|
<ul class="uk-nav uk-dropdown-nav">
|
|
395
409
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -400,7 +414,7 @@
|
|
|
400
414
|
</div>
|
|
401
415
|
|
|
402
416
|
<div class="uk-inline">
|
|
403
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
417
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
|
|
404
418
|
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
405
419
|
<ul class="uk-nav uk-dropdown-nav">
|
|
406
420
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -411,7 +425,7 @@
|
|
|
411
425
|
</div>
|
|
412
426
|
|
|
413
427
|
<div class="uk-inline">
|
|
414
|
-
<button class="uk-button uk-button-default" type="button">Bottom
|
|
428
|
+
<button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
|
|
415
429
|
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
416
430
|
<ul class="uk-nav uk-dropdown-nav">
|
|
417
431
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -426,7 +440,7 @@
|
|
|
426
440
|
<div class="uk-margin" uk-margin>
|
|
427
441
|
|
|
428
442
|
<div class="uk-inline">
|
|
429
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
443
|
+
<button class="uk-button uk-button-default" type="button">Top Fade</button>
|
|
430
444
|
<div uk-dropdown="pos: top-stretch; animate-out: true">
|
|
431
445
|
<ul class="uk-nav uk-dropdown-nav">
|
|
432
446
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -437,7 +451,7 @@
|
|
|
437
451
|
</div>
|
|
438
452
|
|
|
439
453
|
<div class="uk-inline">
|
|
440
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
454
|
+
<button class="uk-button uk-button-default" type="button">Top Slide</button>
|
|
441
455
|
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
|
|
442
456
|
<ul class="uk-nav uk-dropdown-nav">
|
|
443
457
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -448,7 +462,7 @@
|
|
|
448
462
|
</div>
|
|
449
463
|
|
|
450
464
|
<div class="uk-inline">
|
|
451
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
465
|
+
<button class="uk-button uk-button-default" type="button">Top Slide Left</button>
|
|
452
466
|
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
|
|
453
467
|
<ul class="uk-nav uk-dropdown-nav">
|
|
454
468
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -459,7 +473,7 @@
|
|
|
459
473
|
</div>
|
|
460
474
|
|
|
461
475
|
<div class="uk-inline">
|
|
462
|
-
<button class="uk-button uk-button-default" type="button">Top
|
|
476
|
+
<button class="uk-button uk-button-default" type="button">Top Slide Right</button>
|
|
463
477
|
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
464
478
|
<ul class="uk-nav uk-dropdown-nav">
|
|
465
479
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -474,7 +488,7 @@
|
|
|
474
488
|
<div class="uk-margin" uk-margin>
|
|
475
489
|
|
|
476
490
|
<div class="uk-inline">
|
|
477
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
491
|
+
<button class="uk-button uk-button-default" type="button">Left Fade</button>
|
|
478
492
|
<div uk-dropdown="pos: left-stretch; animate-out: true">
|
|
479
493
|
<ul class="uk-nav uk-dropdown-nav">
|
|
480
494
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -485,7 +499,7 @@
|
|
|
485
499
|
</div>
|
|
486
500
|
|
|
487
501
|
<div class="uk-inline">
|
|
488
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
502
|
+
<button class="uk-button uk-button-default" type="button">Left Slide</button>
|
|
489
503
|
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
|
|
490
504
|
<ul class="uk-nav uk-dropdown-nav">
|
|
491
505
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -496,7 +510,7 @@
|
|
|
496
510
|
</div>
|
|
497
511
|
|
|
498
512
|
<div class="uk-inline">
|
|
499
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
513
|
+
<button class="uk-button uk-button-default" type="button">Left Slide Left</button>
|
|
500
514
|
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
501
515
|
<ul class="uk-nav uk-dropdown-nav">
|
|
502
516
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -507,7 +521,7 @@
|
|
|
507
521
|
</div>
|
|
508
522
|
|
|
509
523
|
<div class="uk-inline">
|
|
510
|
-
<button class="uk-button uk-button-default" type="button">Left
|
|
524
|
+
<button class="uk-button uk-button-default" type="button">Left Slide Right</button>
|
|
511
525
|
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
512
526
|
<ul class="uk-nav uk-dropdown-nav">
|
|
513
527
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -522,7 +536,7 @@
|
|
|
522
536
|
<div class="uk-margin" uk-margin>
|
|
523
537
|
|
|
524
538
|
<div class="uk-inline">
|
|
525
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
539
|
+
<button class="uk-button uk-button-default" type="button">Right Fade</button>
|
|
526
540
|
<div uk-dropdown="pos: right-stretch; animate-out: true">
|
|
527
541
|
<ul class="uk-nav uk-dropdown-nav">
|
|
528
542
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -533,7 +547,7 @@
|
|
|
533
547
|
</div>
|
|
534
548
|
|
|
535
549
|
<div class="uk-inline">
|
|
536
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
550
|
+
<button class="uk-button uk-button-default" type="button">Right Slide</button>
|
|
537
551
|
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
|
|
538
552
|
<ul class="uk-nav uk-dropdown-nav">
|
|
539
553
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -544,7 +558,7 @@
|
|
|
544
558
|
</div>
|
|
545
559
|
|
|
546
560
|
<div class="uk-inline">
|
|
547
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
561
|
+
<button class="uk-button uk-button-default" type="button">Right Slide Left</button>
|
|
548
562
|
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
549
563
|
<ul class="uk-nav uk-dropdown-nav">
|
|
550
564
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -555,7 +569,7 @@
|
|
|
555
569
|
</div>
|
|
556
570
|
|
|
557
571
|
<div class="uk-inline">
|
|
558
|
-
<button class="uk-button uk-button-default" type="button">Right
|
|
572
|
+
<button class="uk-button uk-button-default" type="button">Right Slide Right</button>
|
|
559
573
|
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
|
|
560
574
|
<ul class="uk-nav uk-dropdown-nav">
|
|
561
575
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -567,6 +581,65 @@
|
|
|
567
581
|
|
|
568
582
|
</div>
|
|
569
583
|
|
|
584
|
+
<div class="uk-child-width-1-4@m" uk-grid>
|
|
585
|
+
<div>
|
|
586
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
587
|
+
|
|
588
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
|
|
589
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true">
|
|
590
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
591
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
592
|
+
<li><a href="#">Item</a></li>
|
|
593
|
+
<li><a href="#">Item</a></li>
|
|
594
|
+
</ul>
|
|
595
|
+
</div>
|
|
596
|
+
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
<div>
|
|
600
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
601
|
+
|
|
602
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide</button></div>
|
|
603
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
604
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
605
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
606
|
+
<li><a href="#">Item</a></li>
|
|
607
|
+
<li><a href="#">Item</a></li>
|
|
608
|
+
</ul>
|
|
609
|
+
</div>
|
|
610
|
+
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
<div>
|
|
614
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
615
|
+
|
|
616
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
|
|
617
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
618
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
619
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
620
|
+
<li><a href="#">Item</a></li>
|
|
621
|
+
<li><a href="#">Item</a></li>
|
|
622
|
+
</ul>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
</div>
|
|
626
|
+
</div>
|
|
627
|
+
<div>
|
|
628
|
+
<div class="scroll-container uk-height-large uk-resize-vertical">
|
|
629
|
+
|
|
630
|
+
<div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
|
|
631
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
632
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
633
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
634
|
+
<li><a href="#">Item</a></li>
|
|
635
|
+
<li><a href="#">Item</a></li>
|
|
636
|
+
</ul>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
|
|
570
643
|
<h2>JavaScript Options</h2>
|
|
571
644
|
|
|
572
645
|
<div class="uk-overflow-auto">
|
|
@@ -658,5 +731,19 @@
|
|
|
658
731
|
|
|
659
732
|
</div>
|
|
660
733
|
|
|
734
|
+
<script>
|
|
735
|
+
|
|
736
|
+
var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
|
|
737
|
+
|
|
738
|
+
UIkit.util.on('#js-size-switcher', 'change', function () {
|
|
739
|
+
var value = this.value;
|
|
740
|
+
UIkit.util.$$('.uk-dropdown').forEach(function (table) {
|
|
741
|
+
UIkit.util.removeClass(table, options);
|
|
742
|
+
UIkit.util.addClass(table, value);
|
|
743
|
+
});
|
|
744
|
+
});
|
|
745
|
+
|
|
746
|
+
</script>
|
|
747
|
+
|
|
661
748
|
</body>
|
|
662
749
|
</html>
|