uikit 3.14.2-dev.404bdcedf → 3.14.2-dev.447aa311a
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 +85 -24
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +85 -24
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +88 -23
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +88 -23
- 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 +101 -22
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +101 -22
- 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 +17 -2
- 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 +135 -44
- 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 +222 -110
- 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 +238 -111
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/parallax.js +16 -1
- package/src/js/core/accordion.js +3 -3
- package/src/js/core/alert.js +1 -1
- package/src/js/core/drop.js +40 -20
- package/src/js/core/height-viewport.js +14 -9
- package/src/js/core/navbar.js +19 -18
- package/src/js/core/toggle.js +5 -8
- package/src/js/mixin/position.js +44 -23
- package/src/js/mixin/togglable.js +105 -24
- package/src/js/util/animation.js +1 -0
- package/src/js/util/viewport.js +2 -5
- package/src/less/components/drop.less +19 -5
- package/src/less/components/dropdown.less +21 -5
- package/src/less/components/margin.less +13 -14
- package/src/less/components/modal.less +19 -4
- package/src/less/components/nav.less +1 -1
- package/src/less/components/navbar.less +46 -19
- package/src/less/components/offcanvas.less +21 -21
- package/src/less/components/position.less +1 -1
- package/src/less/components/sticky.less +7 -0
- package/src/less/components/utility.less +1 -2
- package/src/less/theme/dropdown.less +11 -0
- package/src/less/theme/navbar.less +7 -0
- package/src/scss/components/drop.scss +19 -5
- package/src/scss/components/dropdown.scss +21 -5
- package/src/scss/components/margin.scss +13 -14
- package/src/scss/components/modal.scss +19 -4
- package/src/scss/components/nav.scss +1 -1
- package/src/scss/components/navbar.scss +35 -8
- package/src/scss/components/offcanvas.scss +21 -21
- package/src/scss/components/position.scss +1 -1
- package/src/scss/components/sticky.scss +7 -0
- package/src/scss/components/utility.scss +1 -2
- package/src/scss/mixins-theme.scss +8 -0
- package/src/scss/mixins.scss +2 -0
- package/src/scss/theme/dropdown.scss +8 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/variables-theme.scss +23 -10
- package/src/scss/variables.scss +22 -11
- package/tests/drop.html +145 -2
- package/tests/dropdown.html +228 -13
- package/tests/height-viewport.html +62 -0
- package/tests/navbar.html +321 -14
- package/tests/offcanvas.html +8 -8
- package/tests/sticky-navbar.html +132 -0
- package/tests/sticky-parallax.html +2 -1
- package/tests/sticky.html +5 -4
|
@@ -367,9 +367,11 @@ $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !defaul
|
|
|
367
367
|
$global-z-index: 1000 !default;
|
|
368
368
|
$drop-z-index: $global-z-index + 20 !default;
|
|
369
369
|
$drop-margin: $global-margin !default;
|
|
370
|
+
$drop-viewport-margin: 15px !default;
|
|
370
371
|
$drop-width: 300px !default;
|
|
371
372
|
$dropdown-z-index: $global-z-index + 20 !default;
|
|
372
373
|
$dropdown-margin: $global-small-margin !default;
|
|
374
|
+
$dropdown-viewport-margin: 15px !default;
|
|
373
375
|
$dropdown-min-width: 200px !default;
|
|
374
376
|
$dropdown-padding: 25px !default;
|
|
375
377
|
$dropdown-background: $global-background !default;
|
|
@@ -650,13 +652,19 @@ $modal-padding-vertical-s: 50px !default;
|
|
|
650
652
|
$modal-dialog-width: 600px !default;
|
|
651
653
|
$modal-dialog-background: $global-background !default;
|
|
652
654
|
$modal-container-width: 1200px !default;
|
|
653
|
-
$modal-body-padding-horizontal:
|
|
654
|
-
$modal-body-padding-vertical:
|
|
655
|
-
$modal-
|
|
655
|
+
$modal-body-padding-horizontal: 20px !default;
|
|
656
|
+
$modal-body-padding-vertical: 20px !default;
|
|
657
|
+
$modal-body-padding-horizontal-s: $global-gutter !default;
|
|
658
|
+
$modal-body-padding-vertical-s: $global-gutter !default;
|
|
659
|
+
$modal-header-padding-horizontal: 20px !default;
|
|
656
660
|
$modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
|
|
661
|
+
$modal-header-padding-horizontal-s: $global-gutter !default;
|
|
662
|
+
$modal-header-padding-vertical-s: ($modal-header-padding-horizontal-s * 0.5) !default;
|
|
657
663
|
$modal-header-background: $modal-dialog-background !default;
|
|
658
|
-
$modal-footer-padding-horizontal:
|
|
664
|
+
$modal-footer-padding-horizontal: 20px !default;
|
|
659
665
|
$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
|
|
666
|
+
$modal-footer-padding-horizontal-s: $global-gutter !default;
|
|
667
|
+
$modal-footer-padding-vertical-s: ($modal-footer-padding-horizontal-s * 0.5) !default;
|
|
660
668
|
$modal-footer-background: $modal-dialog-background !default;
|
|
661
669
|
$modal-title-font-size: $global-xlarge-font-size !default;
|
|
662
670
|
$modal-title-line-height: 1.3 !default;
|
|
@@ -745,10 +753,13 @@ $navbar-toggle-hover-color: $global-color !default;
|
|
|
745
753
|
$navbar-subtitle-font-size: $global-small-font-size !default;
|
|
746
754
|
$navbar-dropdown-z-index: $global-z-index + 20 !default;
|
|
747
755
|
$navbar-dropdown-margin: 15px !default;
|
|
756
|
+
$navbar-dropdown-shift-margin: 0 !default;
|
|
757
|
+
$navbar-dropdown-viewport-margin: 15px !default;
|
|
748
758
|
$navbar-dropdown-width: 200px !default;
|
|
749
759
|
$navbar-dropdown-padding: 25px !default;
|
|
750
760
|
$navbar-dropdown-background: $global-background !default;
|
|
751
761
|
$navbar-dropdown-color: $global-color !default;
|
|
762
|
+
$navbar-dropdown-color-mode: none !default;
|
|
752
763
|
$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
|
|
753
764
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
754
765
|
$navbar-dropdown-dropbar-margin-top: 0px !default;
|
|
@@ -790,16 +801,16 @@ $notification-message-warning-color: $global-warning-background !default;
|
|
|
790
801
|
$notification-message-danger-color: $global-danger-background !default;
|
|
791
802
|
$offcanvas-z-index: $global-z-index !default;
|
|
792
803
|
$offcanvas-bar-width: 270px !default;
|
|
793
|
-
$offcanvas-bar-padding-vertical:
|
|
794
|
-
$offcanvas-bar-padding-horizontal:
|
|
804
|
+
$offcanvas-bar-padding-vertical: 20px !default;
|
|
805
|
+
$offcanvas-bar-padding-horizontal: 20px !default;
|
|
795
806
|
$offcanvas-bar-background: $global-secondary-background !default;
|
|
796
807
|
$offcanvas-bar-color-mode: light !default;
|
|
797
|
-
$offcanvas-bar-width-
|
|
798
|
-
$offcanvas-bar-padding-vertical-
|
|
799
|
-
$offcanvas-bar-padding-horizontal-
|
|
808
|
+
$offcanvas-bar-width-s: 350px !default;
|
|
809
|
+
$offcanvas-bar-padding-vertical-s: $global-gutter !default;
|
|
810
|
+
$offcanvas-bar-padding-horizontal-s: $global-gutter !default;
|
|
800
811
|
$offcanvas-close-position: 5px !default;
|
|
801
812
|
$offcanvas-close-padding: 5px !default;
|
|
802
|
-
$offcanvas-close-position-
|
|
813
|
+
$offcanvas-close-position-s: 10px !default;
|
|
803
814
|
$offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
804
815
|
$overlay-padding-horizontal: $global-gutter !default;
|
|
805
816
|
$overlay-padding-vertical: $global-gutter !default;
|
|
@@ -1131,6 +1142,7 @@ $dotnav-item-onclick-border: transparent !default;
|
|
|
1131
1142
|
$dotnav-item-active-border: transparent !default;
|
|
1132
1143
|
$dropdown-nav-font-size: $global-small-font-size !default;
|
|
1133
1144
|
$dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
1145
|
+
$dropdown-stretch-background: $global-muted-background !default;
|
|
1134
1146
|
$form-range-thumb-border-width: $global-border-width !default;
|
|
1135
1147
|
$form-range-thumb-border: darken($global-border, 10%) !default;
|
|
1136
1148
|
$form-range-track-border-radius: 500px !default;
|
|
@@ -1164,6 +1176,7 @@ $nav-default-font-size: $global-small-font-size !default;
|
|
|
1164
1176
|
$navbar-nav-item-text-transform: uppercase !default;
|
|
1165
1177
|
$navbar-dropdown-nav-font-size: $global-small-font-size !default;
|
|
1166
1178
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
1179
|
+
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
1167
1180
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
1168
1181
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
1169
1182
|
$navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
|
package/src/scss/variables.scss
CHANGED
|
@@ -366,9 +366,11 @@ $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !defaul
|
|
|
366
366
|
$global-z-index: 1000 !default;
|
|
367
367
|
$drop-z-index: $global-z-index + 20 !default;
|
|
368
368
|
$drop-margin: $global-margin !default;
|
|
369
|
+
$drop-viewport-margin: 15px !default;
|
|
369
370
|
$drop-width: 300px !default;
|
|
370
371
|
$dropdown-z-index: $global-z-index + 20 !default;
|
|
371
372
|
$dropdown-margin: $global-small-margin !default;
|
|
373
|
+
$dropdown-viewport-margin: 15px !default;
|
|
372
374
|
$dropdown-min-width: 200px !default;
|
|
373
375
|
$dropdown-padding: 15px !default;
|
|
374
376
|
$dropdown-background: $global-muted-background !default;
|
|
@@ -648,13 +650,19 @@ $modal-padding-vertical-s: 50px !default;
|
|
|
648
650
|
$modal-dialog-width: 600px !default;
|
|
649
651
|
$modal-dialog-background: $global-background !default;
|
|
650
652
|
$modal-container-width: 1200px !default;
|
|
651
|
-
$modal-body-padding-horizontal:
|
|
652
|
-
$modal-body-padding-vertical:
|
|
653
|
-
$modal-
|
|
653
|
+
$modal-body-padding-horizontal: 20px !default;
|
|
654
|
+
$modal-body-padding-vertical: 20px !default;
|
|
655
|
+
$modal-body-padding-horizontal-s: $global-gutter !default;
|
|
656
|
+
$modal-body-padding-vertical-s: $global-gutter !default;
|
|
657
|
+
$modal-header-padding-horizontal: 20px !default;
|
|
654
658
|
$modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
|
|
659
|
+
$modal-header-padding-horizontal-s: $global-gutter !default;
|
|
660
|
+
$modal-header-padding-vertical-s: ($modal-header-padding-horizontal-s * 0.5) !default;
|
|
655
661
|
$modal-header-background: $global-muted-background !default;
|
|
656
|
-
$modal-footer-padding-horizontal:
|
|
662
|
+
$modal-footer-padding-horizontal: 20px !default;
|
|
657
663
|
$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
|
|
664
|
+
$modal-footer-padding-horizontal-s: $global-gutter !default;
|
|
665
|
+
$modal-footer-padding-vertical-s: ($modal-footer-padding-horizontal-s * 0.5) !default;
|
|
658
666
|
$modal-footer-background: $global-muted-background !default;
|
|
659
667
|
$modal-title-font-size: $global-xlarge-font-size !default;
|
|
660
668
|
$modal-title-line-height: 1.3 !default;
|
|
@@ -742,11 +750,14 @@ $navbar-toggle-color: $global-muted-color !default;
|
|
|
742
750
|
$navbar-toggle-hover-color: $global-color !default;
|
|
743
751
|
$navbar-subtitle-font-size: $global-small-font-size !default;
|
|
744
752
|
$navbar-dropdown-z-index: $global-z-index + 20 !default;
|
|
745
|
-
$navbar-dropdown-margin:
|
|
753
|
+
$navbar-dropdown-margin: 0 !default;
|
|
754
|
+
$navbar-dropdown-shift-margin: 0 !default;
|
|
755
|
+
$navbar-dropdown-viewport-margin: 15px !default;
|
|
746
756
|
$navbar-dropdown-width: 200px !default;
|
|
747
757
|
$navbar-dropdown-padding: 15px !default;
|
|
748
758
|
$navbar-dropdown-background: $global-muted-background !default;
|
|
749
759
|
$navbar-dropdown-color: $global-color !default;
|
|
760
|
+
$navbar-dropdown-color-mode: none !default;
|
|
750
761
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
751
762
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
752
763
|
$navbar-dropdown-dropbar-margin-top: 0px !default;
|
|
@@ -788,16 +799,16 @@ $notification-message-warning-color: $global-warning-background !default;
|
|
|
788
799
|
$notification-message-danger-color: $global-danger-background !default;
|
|
789
800
|
$offcanvas-z-index: $global-z-index !default;
|
|
790
801
|
$offcanvas-bar-width: 270px !default;
|
|
791
|
-
$offcanvas-bar-padding-vertical:
|
|
792
|
-
$offcanvas-bar-padding-horizontal:
|
|
802
|
+
$offcanvas-bar-padding-vertical: 20px !default;
|
|
803
|
+
$offcanvas-bar-padding-horizontal: 20px !default;
|
|
793
804
|
$offcanvas-bar-background: $global-secondary-background !default;
|
|
794
805
|
$offcanvas-bar-color-mode: light !default;
|
|
795
|
-
$offcanvas-bar-width-
|
|
796
|
-
$offcanvas-bar-padding-vertical-
|
|
797
|
-
$offcanvas-bar-padding-horizontal-
|
|
806
|
+
$offcanvas-bar-width-s: 350px !default;
|
|
807
|
+
$offcanvas-bar-padding-vertical-s: $global-gutter !default;
|
|
808
|
+
$offcanvas-bar-padding-horizontal-s: $global-gutter !default;
|
|
798
809
|
$offcanvas-close-position: 5px !default;
|
|
799
810
|
$offcanvas-close-padding: 5px !default;
|
|
800
|
-
$offcanvas-close-position-
|
|
811
|
+
$offcanvas-close-position-s: 10px !default;
|
|
801
812
|
$offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
802
813
|
$overlay-padding-horizontal: $global-gutter !default;
|
|
803
814
|
$overlay-padding-vertical: $global-gutter !default;
|
package/tests/drop.html
CHANGED
|
@@ -92,7 +92,14 @@
|
|
|
92
92
|
|
|
93
93
|
<div class="uk-inline">
|
|
94
94
|
<button class="uk-button uk-button-default" type="button">Hover only</button>
|
|
95
|
-
<div uk-drop="mode: hover;
|
|
95
|
+
<div uk-drop="mode: hover; animate-out: true;">
|
|
96
|
+
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="uk-inline">
|
|
101
|
+
<button class="uk-button uk-button-default" type="button">Out Animation</button>
|
|
102
|
+
<div uk-drop="animate-out: true">
|
|
96
103
|
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
97
104
|
</div>
|
|
98
105
|
</div>
|
|
@@ -400,6 +407,136 @@
|
|
|
400
407
|
|
|
401
408
|
</div>
|
|
402
409
|
|
|
410
|
+
<h2>Stretch</h2>
|
|
411
|
+
|
|
412
|
+
<div class="uk-margin" uk-margin>
|
|
413
|
+
|
|
414
|
+
<div class="uk-inline">
|
|
415
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
|
|
416
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true">
|
|
417
|
+
<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
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
<div class="uk-inline">
|
|
422
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
|
|
423
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
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>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<div class="uk-inline">
|
|
429
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
|
|
430
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
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>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
<div class="uk-inline">
|
|
436
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
|
|
437
|
+
<div uk-drop="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
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>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
</div>
|
|
443
|
+
|
|
444
|
+
<div class="uk-margin" uk-margin>
|
|
445
|
+
|
|
446
|
+
<div class="uk-inline">
|
|
447
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
|
|
448
|
+
<div uk-drop="pos: top-stretch; animate-out: true">
|
|
449
|
+
<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
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
|
|
453
|
+
<div class="uk-inline">
|
|
454
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
|
|
455
|
+
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide">
|
|
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>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
|
|
460
|
+
<div class="uk-inline">
|
|
461
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
|
|
462
|
+
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide-left">
|
|
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>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
|
|
467
|
+
<div class="uk-inline">
|
|
468
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
|
|
469
|
+
<div uk-drop="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
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>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="uk-margin" uk-margin>
|
|
477
|
+
|
|
478
|
+
<div class="uk-inline">
|
|
479
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
|
|
480
|
+
<div uk-drop="pos: left-stretch; animate-out: true">
|
|
481
|
+
<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
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
<div class="uk-inline">
|
|
486
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
|
|
487
|
+
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide">
|
|
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>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<div class="uk-inline">
|
|
493
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
|
|
494
|
+
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
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>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
|
|
499
|
+
<div class="uk-inline">
|
|
500
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
|
|
501
|
+
<div uk-drop="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
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>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<div class="uk-margin" uk-margin>
|
|
509
|
+
|
|
510
|
+
<div class="uk-inline">
|
|
511
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
|
|
512
|
+
<div uk-drop="pos: right-stretch; animate-out: true">
|
|
513
|
+
<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
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
|
|
517
|
+
<div class="uk-inline">
|
|
518
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
|
|
519
|
+
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide">
|
|
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>
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
|
|
524
|
+
<div class="uk-inline">
|
|
525
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
|
|
526
|
+
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
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>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<div class="uk-inline">
|
|
532
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
|
|
533
|
+
<div uk-drop="pos: right-stretch; animate-out: true; animation: slide-right">
|
|
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>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
|
|
538
|
+
</div>
|
|
539
|
+
|
|
403
540
|
<h2>JavaScript Options</h2>
|
|
404
541
|
|
|
405
542
|
<div class="uk-overflow-auto">
|
|
@@ -476,8 +613,14 @@
|
|
|
476
613
|
<tr>
|
|
477
614
|
<td><code>animation</code></td>
|
|
478
615
|
<td>String</td>
|
|
616
|
+
<td>'uk-animation-fade'</td>
|
|
617
|
+
<td>The space separated names of animations to use. (Comma separate for animation out)</td>
|
|
618
|
+
</tr>
|
|
619
|
+
<tr>
|
|
620
|
+
<td><code>animate-out</code></td>
|
|
621
|
+
<td>Boolean</td>
|
|
479
622
|
<td>false</td>
|
|
480
|
-
<td>
|
|
623
|
+
<td>Use animation when closing the Drop.</td>
|
|
481
624
|
</tr>
|
|
482
625
|
<tr>
|
|
483
626
|
<td><code>duration</code></td>
|
package/tests/dropdown.html
CHANGED
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
<div class="uk-margin" uk-margin>
|
|
79
79
|
|
|
80
80
|
<div class="uk-inline">
|
|
81
|
-
<button class="uk-button uk-button-default" type="button">Hover</button>
|
|
81
|
+
<button class="uk-button uk-button-default" type="button">Hover, Click</button>
|
|
82
82
|
<div uk-dropdown>
|
|
83
83
|
<ul class="uk-nav uk-dropdown-nav">
|
|
84
84
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
</div>
|
|
100
100
|
|
|
101
101
|
<div class="uk-inline">
|
|
102
|
-
<button class="uk-button uk-button-default" type="button">Click</button>
|
|
102
|
+
<button class="uk-button uk-button-default" type="button">Click only</button>
|
|
103
103
|
<div uk-dropdown="mode: click">
|
|
104
104
|
<ul class="uk-nav uk-dropdown-nav">
|
|
105
105
|
<li class="uk-active"><a href="#">Active</a></li>
|
|
@@ -119,6 +119,38 @@
|
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
121
121
|
|
|
122
|
+
<div class="uk-inline">
|
|
123
|
+
<button class="uk-button uk-button-default" type="button">Hover only</button>
|
|
124
|
+
<div uk-dropdown="mode: hover">
|
|
125
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
126
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
127
|
+
<li class="uk-parent">
|
|
128
|
+
<a href="#">Parent</a>
|
|
129
|
+
<ul class="uk-nav-sub">
|
|
130
|
+
<li><a href="#">Sub item</a></li>
|
|
131
|
+
<li><a href="#">Sub item</a></li>
|
|
132
|
+
</ul>
|
|
133
|
+
</li>
|
|
134
|
+
<li class="uk-nav-header">Header</li>
|
|
135
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
136
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
137
|
+
<li class="uk-nav-divider"></li>
|
|
138
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
139
|
+
</ul>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="uk-inline">
|
|
144
|
+
<button class="uk-button uk-button-default" type="button">Out Animation</button>
|
|
145
|
+
<div uk-dropdown="animate-out: true">
|
|
146
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
147
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
148
|
+
<li><a href="#">Item</a></li>
|
|
149
|
+
<li><a href="#">Item</a></li>
|
|
150
|
+
</ul>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
122
154
|
<div class="uk-inline">
|
|
123
155
|
<button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
|
|
124
156
|
<div uk-dropdown="mode: click">
|
|
@@ -151,17 +183,6 @@
|
|
|
151
183
|
</div>
|
|
152
184
|
</div>
|
|
153
185
|
|
|
154
|
-
<div class="uk-inline">
|
|
155
|
-
<button class="uk-button uk-button-default" type="button">Hover only</button>
|
|
156
|
-
<div uk-dropdown="mode: hover; delay-hide: 0">
|
|
157
|
-
<ul class="uk-nav uk-dropdown-nav">
|
|
158
|
-
<li class="uk-active"><a href="#">Active</a></li>
|
|
159
|
-
<li><a href="#">Item</a></li>
|
|
160
|
-
<li><a href="#">Item</a></li>
|
|
161
|
-
</ul>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
186
|
<div class="uk-inline">
|
|
166
187
|
<button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
|
|
167
188
|
<button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
|
|
@@ -352,6 +373,200 @@
|
|
|
352
373
|
</div>
|
|
353
374
|
</div>
|
|
354
375
|
|
|
376
|
+
<h2>Stretch</h2>
|
|
377
|
+
|
|
378
|
+
<div class="uk-margin" uk-margin>
|
|
379
|
+
|
|
380
|
+
<div class="uk-inline">
|
|
381
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
|
|
382
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true">
|
|
383
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
384
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
385
|
+
<li><a href="#">Item</a></li>
|
|
386
|
+
<li><a href="#">Item</a></li>
|
|
387
|
+
</ul>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<div class="uk-inline">
|
|
392
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
|
|
393
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
|
|
394
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
395
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
396
|
+
<li><a href="#">Item</a></li>
|
|
397
|
+
<li><a href="#">Item</a></li>
|
|
398
|
+
</ul>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
<div class="uk-inline">
|
|
403
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
|
|
404
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
|
|
405
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
406
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
407
|
+
<li><a href="#">Item</a></li>
|
|
408
|
+
<li><a href="#">Item</a></li>
|
|
409
|
+
</ul>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<div class="uk-inline">
|
|
414
|
+
<button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
|
|
415
|
+
<div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
|
|
416
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
417
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
418
|
+
<li><a href="#">Item</a></li>
|
|
419
|
+
<li><a href="#">Item</a></li>
|
|
420
|
+
</ul>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
</div>
|
|
425
|
+
|
|
426
|
+
<div class="uk-margin" uk-margin>
|
|
427
|
+
|
|
428
|
+
<div class="uk-inline">
|
|
429
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
|
|
430
|
+
<div uk-dropdown="pos: top-stretch; animate-out: true">
|
|
431
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
432
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
433
|
+
<li><a href="#">Item</a></li>
|
|
434
|
+
<li><a href="#">Item</a></li>
|
|
435
|
+
</ul>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
|
|
439
|
+
<div class="uk-inline">
|
|
440
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
|
|
441
|
+
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
|
|
442
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
443
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
444
|
+
<li><a href="#">Item</a></li>
|
|
445
|
+
<li><a href="#">Item</a></li>
|
|
446
|
+
</ul>
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
|
|
450
|
+
<div class="uk-inline">
|
|
451
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
|
|
452
|
+
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
|
|
453
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
454
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
455
|
+
<li><a href="#">Item</a></li>
|
|
456
|
+
<li><a href="#">Item</a></li>
|
|
457
|
+
</ul>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
|
|
461
|
+
<div class="uk-inline">
|
|
462
|
+
<button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
|
|
463
|
+
<div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
|
|
464
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
465
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
466
|
+
<li><a href="#">Item</a></li>
|
|
467
|
+
<li><a href="#">Item</a></li>
|
|
468
|
+
</ul>
|
|
469
|
+
</div>
|
|
470
|
+
</div>
|
|
471
|
+
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
<div class="uk-margin" uk-margin>
|
|
475
|
+
|
|
476
|
+
<div class="uk-inline">
|
|
477
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
|
|
478
|
+
<div uk-dropdown="pos: left-stretch; animate-out: true">
|
|
479
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
480
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
481
|
+
<li><a href="#">Item</a></li>
|
|
482
|
+
<li><a href="#">Item</a></li>
|
|
483
|
+
</ul>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
|
|
487
|
+
<div class="uk-inline">
|
|
488
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
|
|
489
|
+
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
|
|
490
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
491
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
492
|
+
<li><a href="#">Item</a></li>
|
|
493
|
+
<li><a href="#">Item</a></li>
|
|
494
|
+
</ul>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<div class="uk-inline">
|
|
499
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
|
|
500
|
+
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
|
|
501
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
502
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
503
|
+
<li><a href="#">Item</a></li>
|
|
504
|
+
<li><a href="#">Item</a></li>
|
|
505
|
+
</ul>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
|
|
509
|
+
<div class="uk-inline">
|
|
510
|
+
<button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
|
|
511
|
+
<div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
|
|
512
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
513
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
514
|
+
<li><a href="#">Item</a></li>
|
|
515
|
+
<li><a href="#">Item</a></li>
|
|
516
|
+
</ul>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
|
|
520
|
+
</div>
|
|
521
|
+
|
|
522
|
+
<div class="uk-margin" uk-margin>
|
|
523
|
+
|
|
524
|
+
<div class="uk-inline">
|
|
525
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
|
|
526
|
+
<div uk-dropdown="pos: right-stretch; animate-out: true">
|
|
527
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
528
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
529
|
+
<li><a href="#">Item</a></li>
|
|
530
|
+
<li><a href="#">Item</a></li>
|
|
531
|
+
</ul>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<div class="uk-inline">
|
|
536
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
|
|
537
|
+
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
|
|
538
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
539
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
540
|
+
<li><a href="#">Item</a></li>
|
|
541
|
+
<li><a href="#">Item</a></li>
|
|
542
|
+
</ul>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="uk-inline">
|
|
547
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
|
|
548
|
+
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
|
|
549
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
550
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
551
|
+
<li><a href="#">Item</a></li>
|
|
552
|
+
<li><a href="#">Item</a></li>
|
|
553
|
+
</ul>
|
|
554
|
+
</div>
|
|
555
|
+
</div>
|
|
556
|
+
|
|
557
|
+
<div class="uk-inline">
|
|
558
|
+
<button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
|
|
559
|
+
<div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
|
|
560
|
+
<ul class="uk-nav uk-dropdown-nav">
|
|
561
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
562
|
+
<li><a href="#">Item</a></li>
|
|
563
|
+
<li><a href="#">Item</a></li>
|
|
564
|
+
</ul>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
|
|
568
|
+
</div>
|
|
569
|
+
|
|
355
570
|
<h2>JavaScript Options</h2>
|
|
356
571
|
|
|
357
572
|
<div class="uk-overflow-auto">
|