uikit 3.14.3 → 3.14.4-dev.0097ef093
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 +25 -0
- package/dist/css/uikit-core-rtl.css +100 -31
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +100 -31
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +103 -46
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +103 -46
- 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 +189 -26
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +189 -26
- 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 +135 -34
- 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 +801 -617
- 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 +801 -617
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/core/accordion.js +3 -3
- package/src/js/core/alert.js +1 -1
- package/src/js/core/drop.js +47 -20
- package/src/js/core/height-viewport.js +14 -9
- package/src/js/core/navbar.js +11 -9
- package/src/js/core/offcanvas.js +1 -47
- package/src/js/core/switcher.js +1 -1
- package/src/js/mixin/modal.js +90 -4
- package/src/js/mixin/position.js +44 -13
- package/src/js/mixin/togglable.js +105 -24
- package/src/js/util/animation.js +1 -0
- package/src/js/util/viewport.js +21 -10
- 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 +23 -5
- package/src/less/components/navbar.less +56 -25
- package/src/less/components/offcanvas.less +21 -21
- package/src/less/components/position.less +1 -1
- package/src/less/components/utility.less +0 -1
- package/src/less/theme/dropdown.less +11 -0
- package/src/less/theme/nav.less +3 -7
- package/src/less/theme/navbar.less +12 -12
- 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 +23 -5
- package/src/scss/components/navbar.scss +45 -14
- package/src/scss/components/offcanvas.scss +21 -21
- package/src/scss/components/position.scss +1 -1
- package/src/scss/components/utility.scss +0 -1
- package/src/scss/mixins-theme.scss +9 -13
- package/src/scss/mixins.scss +2 -0
- package/src/scss/theme/dropdown.scss +8 -0
- package/src/scss/theme/nav.scss +3 -7
- package/src/scss/theme/navbar.scss +9 -0
- package/src/scss/variables-theme.scss +35 -14
- package/src/scss/variables.scss +33 -13
- package/tests/drop.html +151 -2
- package/tests/dropdown.html +228 -13
- package/tests/height-viewport.html +62 -0
- package/tests/navbar.html +325 -18
- package/tests/offcanvas.html +8 -8
- package/tests/sticky-navbar.html +132 -0
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;
|
|
@@ -680,6 +688,8 @@ $nav-header-text-transform: uppercase !default;
|
|
|
680
688
|
$nav-header-margin-top: $global-margin !default;
|
|
681
689
|
$nav-divider-margin-vertical: 5px !default;
|
|
682
690
|
$nav-divider-margin-horizontal: 0 !default;
|
|
691
|
+
$nav-default-font-size: $global-font-size !default;
|
|
692
|
+
$nav-default-line-height: $global-line-height !default;
|
|
683
693
|
$nav-default-item-color: $global-muted-color !default;
|
|
684
694
|
$nav-default-item-hover-color: $global-color !default;
|
|
685
695
|
$nav-default-item-active-color: $global-emphasis-color !default;
|
|
@@ -687,11 +697,13 @@ $nav-default-subtitle-font-size: $global-small-font-size !default;
|
|
|
687
697
|
$nav-default-header-color: $global-emphasis-color !default;
|
|
688
698
|
$nav-default-divider-border-width: $global-border-width !default;
|
|
689
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;
|
|
690
702
|
$nav-default-sublist-item-color: $global-muted-color !default;
|
|
691
703
|
$nav-default-sublist-item-hover-color: $global-color !default;
|
|
692
704
|
$nav-default-sublist-item-active-color: $global-emphasis-color !default;
|
|
693
|
-
$nav-primary-
|
|
694
|
-
$nav-primary-
|
|
705
|
+
$nav-primary-font-size: $global-large-font-size !default;
|
|
706
|
+
$nav-primary-line-height: $global-line-height !default;
|
|
695
707
|
$nav-primary-item-color: $global-muted-color !default;
|
|
696
708
|
$nav-primary-item-hover-color: $global-color !default;
|
|
697
709
|
$nav-primary-item-active-color: $global-emphasis-color !default;
|
|
@@ -699,6 +711,8 @@ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
|
|
|
699
711
|
$nav-primary-header-color: $global-emphasis-color !default;
|
|
700
712
|
$nav-primary-divider-border-width: $global-border-width !default;
|
|
701
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;
|
|
702
716
|
$nav-primary-sublist-item-color: $global-muted-color !default;
|
|
703
717
|
$nav-primary-sublist-item-hover-color: $global-color !default;
|
|
704
718
|
$nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
|
@@ -726,7 +740,9 @@ $inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default;
|
|
|
726
740
|
$inverse-nav-primary-sublist-item-active-color: $inverse-global-emphasis-color !default;
|
|
727
741
|
$inverse-nav-dividers-border: $inverse-global-border !default;
|
|
728
742
|
$navbar-background: $global-muted-background !default;
|
|
743
|
+
$navbar-gap: 0px !default;
|
|
729
744
|
$navbar-color-mode: none !default;
|
|
745
|
+
$navbar-nav-gap: 0px !default;
|
|
730
746
|
$navbar-nav-item-height: 80px !default;
|
|
731
747
|
$navbar-nav-item-padding-horizontal: 15px !default;
|
|
732
748
|
$navbar-nav-item-color: $global-muted-color !default;
|
|
@@ -735,16 +751,20 @@ $navbar-nav-item-font-family: $global-font-family !default;
|
|
|
735
751
|
$navbar-nav-item-hover-color: $global-color !default;
|
|
736
752
|
$navbar-nav-item-onclick-color: $global-emphasis-color !default;
|
|
737
753
|
$navbar-nav-item-active-color: $global-emphasis-color !default;
|
|
754
|
+
$navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
|
|
738
755
|
$navbar-item-color: $global-color !default;
|
|
739
756
|
$navbar-toggle-color: $global-muted-color !default;
|
|
740
757
|
$navbar-toggle-hover-color: $global-color !default;
|
|
741
758
|
$navbar-subtitle-font-size: $global-small-font-size !default;
|
|
742
759
|
$navbar-dropdown-z-index: $global-z-index + 20 !default;
|
|
743
|
-
$navbar-dropdown-margin:
|
|
760
|
+
$navbar-dropdown-margin: 0 !default;
|
|
761
|
+
$navbar-dropdown-shift-margin: 0 !default;
|
|
762
|
+
$navbar-dropdown-viewport-margin: 15px !default;
|
|
744
763
|
$navbar-dropdown-width: 200px !default;
|
|
745
764
|
$navbar-dropdown-padding: 15px !default;
|
|
746
765
|
$navbar-dropdown-background: $global-muted-background !default;
|
|
747
766
|
$navbar-dropdown-color: $global-color !default;
|
|
767
|
+
$navbar-dropdown-color-mode: none !default;
|
|
748
768
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
749
769
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
750
770
|
$navbar-dropdown-dropbar-margin-top: 0px !default;
|
|
@@ -786,16 +806,16 @@ $notification-message-warning-color: $global-warning-background !default;
|
|
|
786
806
|
$notification-message-danger-color: $global-danger-background !default;
|
|
787
807
|
$offcanvas-z-index: $global-z-index !default;
|
|
788
808
|
$offcanvas-bar-width: 270px !default;
|
|
789
|
-
$offcanvas-bar-padding-vertical:
|
|
790
|
-
$offcanvas-bar-padding-horizontal:
|
|
809
|
+
$offcanvas-bar-padding-vertical: 20px !default;
|
|
810
|
+
$offcanvas-bar-padding-horizontal: 20px !default;
|
|
791
811
|
$offcanvas-bar-background: $global-secondary-background !default;
|
|
792
812
|
$offcanvas-bar-color-mode: light !default;
|
|
793
|
-
$offcanvas-bar-width-
|
|
794
|
-
$offcanvas-bar-padding-vertical-
|
|
795
|
-
$offcanvas-bar-padding-horizontal-
|
|
813
|
+
$offcanvas-bar-width-s: 350px !default;
|
|
814
|
+
$offcanvas-bar-padding-vertical-s: $global-gutter !default;
|
|
815
|
+
$offcanvas-bar-padding-horizontal-s: $global-gutter !default;
|
|
796
816
|
$offcanvas-close-position: 5px !default;
|
|
797
817
|
$offcanvas-close-padding: 5px !default;
|
|
798
|
-
$offcanvas-close-position-
|
|
818
|
+
$offcanvas-close-position-s: 10px !default;
|
|
799
819
|
$offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
800
820
|
$overlay-padding-horizontal: $global-gutter !default;
|
|
801
821
|
$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,20 @@
|
|
|
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>
|
|
624
|
+
</tr>
|
|
625
|
+
<tr>
|
|
626
|
+
<td><code>bg-scroll</code></td>
|
|
627
|
+
<td>Boolean</td>
|
|
628
|
+
<td>true</td>
|
|
629
|
+
<td>Allow background scrolling while drop is opened.</td>
|
|
481
630
|
</tr>
|
|
482
631
|
<tr>
|
|
483
632
|
<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">
|
|
@@ -138,6 +138,68 @@
|
|
|
138
138
|
</div>
|
|
139
139
|
</div>
|
|
140
140
|
|
|
141
|
+
<div class="uk-child-width-1-6@m uk-light" uk-grid style="height: 600px; overflow: auto;">
|
|
142
|
+
<div>
|
|
143
|
+
|
|
144
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
|
|
145
|
+
<h1>CSS</h1>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
<div>
|
|
150
|
+
|
|
151
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
|
|
152
|
+
<h1>JS</h1>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
</div>
|
|
156
|
+
<div>
|
|
157
|
+
|
|
158
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
|
|
159
|
+
<div>
|
|
160
|
+
<h1>JS</h1>
|
|
161
|
+
<div>top: true</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
</div>
|
|
166
|
+
<div>
|
|
167
|
+
|
|
168
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
|
|
169
|
+
<div>
|
|
170
|
+
<h1>JS</h1>
|
|
171
|
+
<div>top: true</div>
|
|
172
|
+
<div>bottom: true</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
|
|
177
|
+
|
|
178
|
+
</div>
|
|
179
|
+
<div>
|
|
180
|
+
|
|
181
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
|
|
182
|
+
<div>
|
|
183
|
+
<h1>JS</h1>
|
|
184
|
+
<div>top: true</div>
|
|
185
|
+
<div>bottom: 10%</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
</div>
|
|
190
|
+
<div>
|
|
191
|
+
|
|
192
|
+
<div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
|
|
193
|
+
<div>
|
|
194
|
+
<h1>JS</h1>
|
|
195
|
+
<div>top: true</div>
|
|
196
|
+
<div>bottom: 50px</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
141
203
|
<h2>JavaScript Options</h2>
|
|
142
204
|
|
|
143
205
|
<div class="uk-overflow-auto">
|