uikit 3.16.22 → 3.16.23-dev.a371e7b76
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 +9 -1
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +9 -1
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +9 -1
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +9 -1
- 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 +1 -1
- 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 +4 -3
- 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 +4 -3
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/util/dimensions.js +1 -1
- package/src/less/components/navbar.less +10 -0
- package/src/scss/components/navbar.scss +10 -0
- package/tests/dropbar.html +1 -1
- package/tests/sticky-navbar.html +210 -0
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "uikit",
|
|
3
3
|
"title": "UIkit",
|
|
4
4
|
"description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
|
|
5
|
-
"version": "3.16.
|
|
5
|
+
"version": "3.16.23-dev.a371e7b76",
|
|
6
6
|
"main": "dist/js/uikit.js",
|
|
7
7
|
"style": "dist/css/uikit.css",
|
|
8
8
|
"sideEffects": [
|
|
@@ -61,7 +61,7 @@ export function offset(element, coordinates) {
|
|
|
61
61
|
element,
|
|
62
62
|
prop,
|
|
63
63
|
coordinates[prop] -
|
|
64
|
-
currentOffset[prop] +
|
|
64
|
+
Math.round(currentOffset[prop] * 1000) / 1000 + // round to 3 digits because css top property is 3 digits precise, while getBoundingClientRect() is 4 digits precise
|
|
65
65
|
toFloat(pos === 'absolute' && value === 'auto' ? position(element)[prop] : value)
|
|
66
66
|
)
|
|
67
67
|
);
|
|
@@ -557,6 +557,16 @@
|
|
|
557
557
|
.hook-navbar-dropbar();
|
|
558
558
|
}
|
|
559
559
|
|
|
560
|
+
/*
|
|
561
|
+
* Create navbar placeholder space if dropbar is behind navbar
|
|
562
|
+
*/
|
|
563
|
+
|
|
564
|
+
.uk-navbar-dropbar-behind::before {
|
|
565
|
+
content: "";
|
|
566
|
+
display: block;
|
|
567
|
+
height: @navbar-nav-item-height;
|
|
568
|
+
}
|
|
569
|
+
|
|
560
570
|
|
|
561
571
|
// Hooks
|
|
562
572
|
// ========================================================================
|
|
@@ -510,6 +510,16 @@ $navbar-nav-gap: 0px !default; // Must have a un
|
|
|
510
510
|
@if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
+
/*
|
|
514
|
+
* Create navbar placeholder space if dropbar is behind navbar
|
|
515
|
+
*/
|
|
516
|
+
|
|
517
|
+
.uk-navbar-dropbar-behind::before {
|
|
518
|
+
content: "";
|
|
519
|
+
display: block;
|
|
520
|
+
height: $navbar-nav-item-height;
|
|
521
|
+
}
|
|
522
|
+
|
|
513
523
|
|
|
514
524
|
// Hooks
|
|
515
525
|
// ========================================================================
|
package/tests/dropbar.html
CHANGED
|
@@ -505,7 +505,7 @@
|
|
|
505
505
|
<nav class="uk-navbar-container uk-navbar-transparent uk-position-z-index" uk-navbar>
|
|
506
506
|
<div class="uk-navbar-left">
|
|
507
507
|
|
|
508
|
-
<a class="uk-navbar-item uk-logo" href="#">
|
|
508
|
+
<a class="uk-navbar-item uk-logo" href="#">Behind</a>
|
|
509
509
|
|
|
510
510
|
</div>
|
|
511
511
|
<div class="uk-navbar-right">
|
package/tests/sticky-navbar.html
CHANGED
|
@@ -630,5 +630,215 @@
|
|
|
630
630
|
|
|
631
631
|
</div>
|
|
632
632
|
|
|
633
|
+
<div id="sticky-transparent-dropbar-behind" class="uk-section-secondary uk-preserve-color" style="background-image: url('images/light.jpg');">
|
|
634
|
+
|
|
635
|
+
<div class="tm-header">
|
|
636
|
+
<div class="uk-blend-difference" uk-sticky="end: #sticky-transparent-dropbar-behind; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
637
|
+
<nav class="uk-navbar-container uk-navbar-transparent">
|
|
638
|
+
<div class="uk-container uk-container-expand">
|
|
639
|
+
<div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
640
|
+
<div class="uk-navbar-left">
|
|
641
|
+
|
|
642
|
+
<a class="uk-navbar-item uk-logo" href="#">Sticky + Transparent + Dropbar Behind</a>
|
|
643
|
+
|
|
644
|
+
<ul class="uk-navbar-nav">
|
|
645
|
+
<li class="uk-active"><a href="">Active</a></li>
|
|
646
|
+
<li>
|
|
647
|
+
<a href="">Parent</a>
|
|
648
|
+
<div class="uk-navbar-dropdown">
|
|
649
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
650
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
651
|
+
<li class="uk-parent">
|
|
652
|
+
<a href="#">Parent</a>
|
|
653
|
+
<ul class="uk-nav-sub">
|
|
654
|
+
<li><a href="#">Sub item</a></li>
|
|
655
|
+
<li><a href="#">Sub item</a></li>
|
|
656
|
+
</ul>
|
|
657
|
+
</li>
|
|
658
|
+
<li class="uk-nav-header">Header</li>
|
|
659
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
660
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
661
|
+
<li class="uk-nav-divider"></li>
|
|
662
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
663
|
+
</ul>
|
|
664
|
+
</div>
|
|
665
|
+
</li>
|
|
666
|
+
<li>
|
|
667
|
+
<a href="">Parent</a>
|
|
668
|
+
<div class="uk-navbar-dropdown">
|
|
669
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
670
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
671
|
+
<li class="uk-parent">
|
|
672
|
+
<a href="#">Parent</a>
|
|
673
|
+
<ul class="uk-nav-sub">
|
|
674
|
+
<li><a href="#">Sub item</a></li>
|
|
675
|
+
<li><a href="#">Sub item</a></li>
|
|
676
|
+
</ul>
|
|
677
|
+
</li>
|
|
678
|
+
<li class="uk-nav-header">Header</li>
|
|
679
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
680
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
681
|
+
<li class="uk-nav-divider"></li>
|
|
682
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
683
|
+
</ul>
|
|
684
|
+
</div>
|
|
685
|
+
</li>
|
|
686
|
+
<li><a href="">Item</a></li>
|
|
687
|
+
</ul>
|
|
688
|
+
|
|
689
|
+
</div>
|
|
690
|
+
<div class="uk-navbar-right">
|
|
691
|
+
|
|
692
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
693
|
+
<div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar-behind uk-position-z-index" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind .tm-header; bg-scroll: false;">
|
|
694
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
695
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
696
|
+
<li class="uk-parent">
|
|
697
|
+
<a href="#">Parent</a>
|
|
698
|
+
<ul class="uk-nav-sub">
|
|
699
|
+
<li><a href="#">Sub item</a></li>
|
|
700
|
+
<li><a href="#">Sub item</a></li>
|
|
701
|
+
</ul>
|
|
702
|
+
</li>
|
|
703
|
+
<li class="uk-nav-header">Header</li>
|
|
704
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
705
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
706
|
+
<li class="uk-nav-divider"></li>
|
|
707
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
708
|
+
</ul>
|
|
709
|
+
</div>
|
|
710
|
+
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
</nav>
|
|
715
|
+
</div>
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<div class="uk-section">
|
|
719
|
+
<div class="uk-container">
|
|
720
|
+
|
|
721
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
722
|
+
|
|
723
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
724
|
+
|
|
725
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
726
|
+
|
|
727
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
728
|
+
|
|
729
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
730
|
+
|
|
731
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
732
|
+
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
|
|
736
|
+
</div>
|
|
737
|
+
|
|
738
|
+
<div id="sticky-transparent-dropbar-above" class="uk-section-secondary uk-preserve-color" style="background-image: url('images/light.jpg');">
|
|
739
|
+
|
|
740
|
+
<div class="tm-header">
|
|
741
|
+
<div class="uk-blend-difference" uk-sticky="end: #sticky-transparent-dropbar-above; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
|
742
|
+
<nav class="uk-navbar-container uk-navbar-transparent">
|
|
743
|
+
<div class="uk-container uk-container-expand">
|
|
744
|
+
<div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
745
|
+
<div class="uk-navbar-left">
|
|
746
|
+
|
|
747
|
+
<a class="uk-navbar-item uk-logo" href="#">Sticky + Transparent + Dropbar Above</a>
|
|
748
|
+
|
|
749
|
+
<ul class="uk-navbar-nav">
|
|
750
|
+
<li class="uk-active"><a href="">Active</a></li>
|
|
751
|
+
<li>
|
|
752
|
+
<a href="">Parent</a>
|
|
753
|
+
<div class="uk-navbar-dropdown">
|
|
754
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
755
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
756
|
+
<li class="uk-parent">
|
|
757
|
+
<a href="#">Parent</a>
|
|
758
|
+
<ul class="uk-nav-sub">
|
|
759
|
+
<li><a href="#">Sub item</a></li>
|
|
760
|
+
<li><a href="#">Sub item</a></li>
|
|
761
|
+
</ul>
|
|
762
|
+
</li>
|
|
763
|
+
<li class="uk-nav-header">Header</li>
|
|
764
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
765
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
766
|
+
<li class="uk-nav-divider"></li>
|
|
767
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
768
|
+
</ul>
|
|
769
|
+
</div>
|
|
770
|
+
</li>
|
|
771
|
+
<li>
|
|
772
|
+
<a href="">Parent</a>
|
|
773
|
+
<div class="uk-navbar-dropdown">
|
|
774
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
775
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
776
|
+
<li class="uk-parent">
|
|
777
|
+
<a href="#">Parent</a>
|
|
778
|
+
<ul class="uk-nav-sub">
|
|
779
|
+
<li><a href="#">Sub item</a></li>
|
|
780
|
+
<li><a href="#">Sub item</a></li>
|
|
781
|
+
</ul>
|
|
782
|
+
</li>
|
|
783
|
+
<li class="uk-nav-header">Header</li>
|
|
784
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
785
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
786
|
+
<li class="uk-nav-divider"></li>
|
|
787
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
788
|
+
</ul>
|
|
789
|
+
</div>
|
|
790
|
+
</li>
|
|
791
|
+
<li><a href="">Item</a></li>
|
|
792
|
+
</ul>
|
|
793
|
+
|
|
794
|
+
</div>
|
|
795
|
+
<div class="uk-navbar-right">
|
|
796
|
+
|
|
797
|
+
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
|
|
798
|
+
<div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar-behind uk-position-z-index" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-above .tm-header; bg-scroll: false;">
|
|
799
|
+
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
800
|
+
<li class="uk-active"><a href="#">Active</a></li>
|
|
801
|
+
<li class="uk-parent">
|
|
802
|
+
<a href="#">Parent</a>
|
|
803
|
+
<ul class="uk-nav-sub">
|
|
804
|
+
<li><a href="#">Sub item</a></li>
|
|
805
|
+
<li><a href="#">Sub item</a></li>
|
|
806
|
+
</ul>
|
|
807
|
+
</li>
|
|
808
|
+
<li class="uk-nav-header">Header</li>
|
|
809
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
|
|
810
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
811
|
+
<li class="uk-nav-divider"></li>
|
|
812
|
+
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
813
|
+
</ul>
|
|
814
|
+
</div>
|
|
815
|
+
|
|
816
|
+
</div>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
</nav>
|
|
820
|
+
</div>
|
|
821
|
+
</div>
|
|
822
|
+
|
|
823
|
+
<div class="uk-section">
|
|
824
|
+
<div class="uk-container">
|
|
825
|
+
|
|
826
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
827
|
+
|
|
828
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
829
|
+
|
|
830
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
831
|
+
|
|
832
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
833
|
+
|
|
834
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
835
|
+
|
|
836
|
+
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
837
|
+
|
|
838
|
+
</div>
|
|
839
|
+
</div>
|
|
840
|
+
|
|
841
|
+
</div>
|
|
842
|
+
|
|
633
843
|
</body>
|
|
634
844
|
</html>
|