uikit 3.21.14-dev.028df7be8 → 3.21.14-dev.2e8a07c7e
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 +34 -0
- package/dist/css/uikit-core-rtl.css +233 -85
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +233 -85
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +237 -81
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +237 -81
- 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 +2 -11
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +425 -126
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +442 -131
- 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 +2 -2
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +2 -2
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +17 -27
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +2 -2
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +22 -33
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +3 -3
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +8 -12
- 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 +225 -221
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +20 -17
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +644 -530
- package/dist/js/uikit.min.js +1 -1
- package/package.json +2 -2
- package/src/images/icons/arrow-down-arrow-up.svg +6 -0
- package/src/images/icons/arrow-down.svg +3 -3
- package/src/images/icons/arrow-left.svg +3 -3
- package/src/images/icons/arrow-right.svg +3 -3
- package/src/images/icons/arrow-up-right.svg +3 -3
- package/src/images/icons/arrow-up.svg +3 -3
- package/src/images/icons/close-circle.svg +5 -0
- package/src/images/icons/cloud-download.svg +4 -4
- package/src/images/icons/cloud-upload.svg +4 -4
- package/src/images/icons/download.svg +4 -4
- package/src/images/icons/expand.svg +5 -5
- package/src/images/icons/link-external.svg +4 -4
- package/src/images/icons/pull.svg +4 -4
- package/src/images/icons/push.svg +3 -3
- package/src/images/icons/shrink.svg +5 -5
- package/src/images/icons/sign-in.svg +4 -3
- package/src/images/icons/sign-out.svg +4 -3
- package/src/images/icons/sorting.svg +6 -0
- package/src/images/icons/upload.svg +4 -4
- package/src/js/api/events.js +15 -14
- package/src/js/api/instance.js +1 -1
- package/src/js/components/internal/lightbox-animations.js +2 -1
- package/src/js/components/internal/slideshow-animations.js +5 -5
- package/src/js/components/lightbox-panel.js +180 -45
- package/src/js/components/lightbox.js +59 -6
- package/src/js/components/slideshow.js +1 -2
- package/src/js/components/sortable.js +2 -2
- package/src/js/core/grid.js +1 -1
- package/src/js/core/icon.js +2 -2
- package/src/js/core/img.js +3 -5
- package/src/js/core/navbar.js +6 -2
- package/src/js/core/scrollspy-nav.js +1 -1
- package/src/js/core/svg.js +8 -10
- package/src/js/core/video.js +4 -3
- package/src/js/mixin/internal/slideshow-animations.js +1 -6
- package/src/js/mixin/modal.js +1 -4
- package/src/js/mixin/slider-drag.js +5 -6
- package/src/js/mixin/slider-nav.js +1 -1
- package/src/js/mixin/slider.js +11 -13
- package/src/js/mixin/slideshow.js +1 -1
- package/src/js/mixin/togglable.js +7 -2
- package/src/js/util/dom.js +3 -1
- package/src/js/util/filter.js +3 -1
- package/src/js/util/player.js +0 -4
- package/src/less/components/background.less +1 -9
- package/src/less/components/breadcrumb.less +6 -2
- package/src/less/components/button.less +1 -1
- package/src/less/components/form-range.less +52 -0
- package/src/less/components/form.less +1 -1
- package/src/less/components/lightbox.less +57 -89
- package/src/less/components/margin.less +14 -0
- package/src/less/components/search.less +49 -23
- package/src/less/components/sticky.less +1 -10
- package/src/less/components/totop.less +1 -1
- package/src/less/components/transition.less +4 -4
- package/src/less/components/visibility.less +3 -2
- package/src/less/theme/form-range.less +12 -0
- package/src/less/theme/lightbox.less +2 -20
- package/src/less/theme/search.less +24 -10
- package/src/scss/components/background.scss +1 -9
- package/src/scss/components/breadcrumb.scss +6 -2
- package/src/scss/components/button.scss +1 -1
- package/src/scss/components/form-range.scss +12 -0
- package/src/scss/components/form.scss +1 -1
- package/src/scss/components/lightbox.scss +50 -77
- package/src/scss/components/margin.scss +13 -0
- package/src/scss/components/search.scss +30 -12
- package/src/scss/components/sticky.scss +1 -10
- package/src/scss/components/totop.scss +1 -1
- package/src/scss/components/transition.scss +4 -4
- package/src/scss/components/visibility.scss +3 -2
- package/src/scss/mixins-theme.scss +51 -12
- package/src/scss/mixins.scss +45 -6
- package/src/scss/theme/form-range.scss +10 -0
- package/src/scss/theme/lightbox.scss +2 -20
- package/src/scss/theme/search.scss +10 -6
- package/src/scss/variables-theme.scss +32 -20
- package/src/scss/variables.scss +29 -24
- package/tests/badge.html +2 -2
- package/tests/base.html +1 -1
- package/tests/breadcrumb.html +23 -5
- package/tests/card.html +24 -24
- package/tests/dropbar.html +15 -15
- package/tests/dropdown.html +6 -6
- package/tests/dropnav.html +100 -100
- package/tests/icon.html +8 -0
- package/tests/index.html +15 -15
- package/tests/lightbox.html +379 -28
- package/tests/margin.html +19 -0
- package/tests/nav.html +21 -21
- package/tests/navbar.html +292 -292
- package/tests/offcanvas.html +27 -27
- package/tests/placeholder.html +2 -2
- package/tests/slider.html +0 -1
- package/tests/slideshow.html +1 -1
- package/tests/sortable.html +5 -5
- package/tests/sticky-navbar.html +114 -114
- package/tests/transition.html +2 -1
package/tests/index.html
CHANGED
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
</ul>
|
|
33
33
|
</li>
|
|
34
34
|
<li class="uk-nav-header">Header</li>
|
|
35
|
-
<li><a href="#"><span class="uk-margin-
|
|
36
|
-
<li><a href="#"><span class="uk-margin-
|
|
35
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
|
|
36
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
37
37
|
<li class="uk-nav-divider"></li>
|
|
38
|
-
<li><a href="#"><span class="uk-margin-
|
|
38
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
39
39
|
</ul>
|
|
40
40
|
</div>
|
|
41
41
|
</li>
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
</ul>
|
|
53
53
|
</li>
|
|
54
54
|
<li class="uk-nav-header">Header</li>
|
|
55
|
-
<li><a href="#"><span class="uk-margin-
|
|
56
|
-
<li><a href="#"><span class="uk-margin-
|
|
55
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
|
|
56
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
57
57
|
<li class="uk-nav-divider"></li>
|
|
58
|
-
<li><a href="#"><span class="uk-margin-
|
|
58
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
59
59
|
</ul>
|
|
60
60
|
</div>
|
|
61
61
|
</li>
|
|
@@ -123,10 +123,10 @@
|
|
|
123
123
|
</ul>
|
|
124
124
|
</li>
|
|
125
125
|
<li class="uk-nav-header">Header</li>
|
|
126
|
-
<li><a href="#"><span class="uk-margin-
|
|
127
|
-
<li><a href="#"><span class="uk-margin-
|
|
126
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
|
|
127
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
128
128
|
<li class="uk-nav-divider"></li>
|
|
129
|
-
<li><a href="#"><span class="uk-margin-
|
|
129
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
130
130
|
</ul>
|
|
131
131
|
</div>
|
|
132
132
|
</div>
|
|
@@ -290,10 +290,10 @@
|
|
|
290
290
|
</ul>
|
|
291
291
|
</li>
|
|
292
292
|
<li class="uk-nav-header">Header</li>
|
|
293
|
-
<li><a href="#"><span class="uk-margin-
|
|
294
|
-
<li><a href="#"><span class="uk-margin-
|
|
293
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
|
|
294
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
295
295
|
<li class="uk-nav-divider"></li>
|
|
296
|
-
<li><a href="#"><span class="uk-margin-
|
|
296
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
297
297
|
</ul>
|
|
298
298
|
|
|
299
299
|
<div class="uk-card uk-card-body uk-card-default uk-card-hover">
|
|
@@ -878,10 +878,10 @@
|
|
|
878
878
|
</ul>
|
|
879
879
|
</li>
|
|
880
880
|
<li class="uk-nav-header">Header</li>
|
|
881
|
-
<li><a href="#"><span class="uk-margin-
|
|
882
|
-
<li><a href="#"><span class="uk-margin-
|
|
881
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
|
|
882
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
|
|
883
883
|
<li class="uk-nav-divider"></li>
|
|
884
|
-
<li><a href="#"><span class="uk-margin-
|
|
884
|
+
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
|
|
885
885
|
</ul>
|
|
886
886
|
|
|
887
887
|
<h3>Title</h3>
|
package/tests/lightbox.html
CHANGED
|
@@ -14,22 +14,39 @@
|
|
|
14
14
|
|
|
15
15
|
<h1>Lightbox</h1>
|
|
16
16
|
|
|
17
|
-
<h2>Animations</h2>
|
|
18
|
-
|
|
19
17
|
<div class="uk-margin">
|
|
20
18
|
<select id="js-animation-switcher" class="uk-select uk-form-width-small" aria-label="Animation switcher">
|
|
21
19
|
<option value="slide">Slide</option>
|
|
22
20
|
<option value="fade">Fade</option>
|
|
23
21
|
<option value="scale">Scale</option>
|
|
24
22
|
</select>
|
|
23
|
+
<select id="js-bg-close-switcher" class="uk-select uk-form-width-small" aria-label="Bg close switcher">
|
|
24
|
+
<option value="1">Close bg</option>
|
|
25
|
+
<option value="0">Don't close bg</option>
|
|
26
|
+
</select>
|
|
27
|
+
<select id="js-delay-controls-switcher" class="uk-select uk-form-width-small" aria-label="Delay controls switcher">
|
|
28
|
+
<option value="3000">Delay controls</option>
|
|
29
|
+
<option value="0">Always controls</option>
|
|
30
|
+
</select>
|
|
31
|
+
<select id="js-counter-switcher" class="uk-select uk-form-width-small" aria-label="Counter switcher">
|
|
32
|
+
<option value="0">Hide counter</option>
|
|
33
|
+
<option value="1">Show Counter</option>
|
|
34
|
+
</select>
|
|
35
|
+
<select id="js-video-autoplay-switcher" class="uk-select uk-form-width-small" aria-label="Video autoplay switcher">
|
|
36
|
+
<option value="0">No video autoplay</option>
|
|
37
|
+
<option value="1">Video autoplay</option>
|
|
38
|
+
<option value="inline">Video inline (Autoplay, Mute, Loop, No Controls)</option>
|
|
39
|
+
</select>
|
|
25
40
|
</div>
|
|
26
41
|
|
|
27
|
-
<
|
|
42
|
+
<h2>Sizes</h2>
|
|
43
|
+
|
|
44
|
+
<div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox>
|
|
28
45
|
<div>
|
|
29
46
|
|
|
30
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute">
|
|
47
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
|
|
31
48
|
<figure>
|
|
32
|
-
<img src="images/
|
|
49
|
+
<img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
33
50
|
<figcaption class="uk-margin-small-top">900x600</figcaption>
|
|
34
51
|
</figure>
|
|
35
52
|
</a>
|
|
@@ -37,9 +54,9 @@
|
|
|
37
54
|
</div>
|
|
38
55
|
<div>
|
|
39
56
|
|
|
40
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500">
|
|
57
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
|
|
41
58
|
<figure>
|
|
42
|
-
<img src="images/
|
|
59
|
+
<img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
43
60
|
<figcaption class="uk-margin-small-top">700x500</figcaption>
|
|
44
61
|
</figure>
|
|
45
62
|
</a>
|
|
@@ -47,9 +64,9 @@
|
|
|
47
64
|
</div>
|
|
48
65
|
<div>
|
|
49
66
|
|
|
50
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200">
|
|
67
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
|
|
51
68
|
<figure>
|
|
52
|
-
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
69
|
+
<img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
53
70
|
<figcaption class="uk-margin-small-top">1800x1200</figcaption>
|
|
54
71
|
</figure>
|
|
55
72
|
</a>
|
|
@@ -57,9 +74,9 @@
|
|
|
57
74
|
</div>
|
|
58
75
|
<div>
|
|
59
76
|
|
|
60
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000">
|
|
77
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
|
|
61
78
|
<figure>
|
|
62
|
-
<img src="images/
|
|
79
|
+
<img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
63
80
|
<figcaption class="uk-margin-small-top">1000x2000</figcaption>
|
|
64
81
|
</figure>
|
|
65
82
|
</a>
|
|
@@ -67,34 +84,209 @@
|
|
|
67
84
|
</div>
|
|
68
85
|
<div>
|
|
69
86
|
|
|
70
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500">
|
|
87
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
|
|
71
88
|
<figure>
|
|
72
|
-
<img src="images/
|
|
89
|
+
<img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
73
90
|
<figcaption class="uk-margin-small-top">2000x500</figcaption>
|
|
74
91
|
</figure>
|
|
75
92
|
</a>
|
|
76
93
|
|
|
77
94
|
</div>
|
|
95
|
+
<div>
|
|
96
|
+
|
|
97
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
|
|
98
|
+
<figure>
|
|
99
|
+
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
|
|
100
|
+
<figcaption class="uk-margin-small-top">Video</figcaption>
|
|
101
|
+
</figure>
|
|
102
|
+
</a>
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
|
|
107
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
|
|
108
|
+
<figure>
|
|
109
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
110
|
+
<figcaption class="uk-margin-small-top">YouTube</figcaption>
|
|
111
|
+
</figure>
|
|
112
|
+
</a>
|
|
113
|
+
|
|
114
|
+
</div>
|
|
115
|
+
<div>
|
|
116
|
+
|
|
117
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
|
|
118
|
+
<figure>
|
|
119
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
120
|
+
<figcaption class="uk-margin-small-top">Vimeo</figcaption>
|
|
121
|
+
</figure>
|
|
122
|
+
</a>
|
|
123
|
+
|
|
124
|
+
</div>
|
|
125
|
+
<div>
|
|
126
|
+
|
|
127
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
|
|
128
|
+
<figure>
|
|
129
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
130
|
+
<figcaption class="uk-margin-small-top">Iframe</figcaption>
|
|
131
|
+
</figure>
|
|
132
|
+
</a>
|
|
133
|
+
|
|
134
|
+
</div>
|
|
78
135
|
</div>
|
|
79
136
|
|
|
80
|
-
<h2>
|
|
137
|
+
<h2>Thumbnav</h2>
|
|
138
|
+
|
|
139
|
+
<div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="nav: thumbnav; slidenav: false">
|
|
140
|
+
<div>
|
|
141
|
+
|
|
142
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
|
|
143
|
+
<figure>
|
|
144
|
+
<img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
145
|
+
<figcaption class="uk-margin-small-top">900x600</figcaption>
|
|
146
|
+
</figure>
|
|
147
|
+
</a>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
150
|
+
<div>
|
|
151
|
+
|
|
152
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
|
|
153
|
+
<figure>
|
|
154
|
+
<img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
155
|
+
<figcaption class="uk-margin-small-top">700x500</figcaption>
|
|
156
|
+
</figure>
|
|
157
|
+
</a>
|
|
81
158
|
|
|
82
|
-
|
|
159
|
+
</div>
|
|
83
160
|
<div>
|
|
84
161
|
|
|
85
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/
|
|
162
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
|
|
163
|
+
<figure>
|
|
164
|
+
<img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
165
|
+
<figcaption class="uk-margin-small-top">1800x1200</figcaption>
|
|
166
|
+
</figure>
|
|
167
|
+
</a>
|
|
168
|
+
|
|
169
|
+
</div>
|
|
170
|
+
<div>
|
|
171
|
+
|
|
172
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
|
|
173
|
+
<figure>
|
|
174
|
+
<img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
175
|
+
<figcaption class="uk-margin-small-top">1000x2000</figcaption>
|
|
176
|
+
</figure>
|
|
177
|
+
</a>
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
<div>
|
|
181
|
+
|
|
182
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
|
|
183
|
+
<figure>
|
|
184
|
+
<img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
185
|
+
<figcaption class="uk-margin-small-top">2000x500</figcaption>
|
|
186
|
+
</figure>
|
|
187
|
+
</a>
|
|
188
|
+
|
|
189
|
+
</div>
|
|
190
|
+
<div>
|
|
191
|
+
|
|
192
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
|
|
193
|
+
<figure>
|
|
194
|
+
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
|
|
195
|
+
<figcaption class="uk-margin-small-top">Video</figcaption>
|
|
196
|
+
</figure>
|
|
197
|
+
</a>
|
|
198
|
+
|
|
199
|
+
</div>
|
|
200
|
+
<div>
|
|
201
|
+
|
|
202
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
|
|
203
|
+
<figure>
|
|
204
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
205
|
+
<figcaption class="uk-margin-small-top">YouTube</figcaption>
|
|
206
|
+
</figure>
|
|
207
|
+
</a>
|
|
208
|
+
|
|
209
|
+
</div>
|
|
210
|
+
<div>
|
|
211
|
+
|
|
212
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
|
|
86
213
|
<figure>
|
|
87
214
|
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
88
|
-
<figcaption class="uk-margin-small-top">
|
|
215
|
+
<figcaption class="uk-margin-small-top">Vimeo</figcaption>
|
|
89
216
|
</figure>
|
|
90
217
|
</a>
|
|
91
218
|
|
|
92
219
|
</div>
|
|
93
220
|
<div>
|
|
94
221
|
|
|
95
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://
|
|
222
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
|
|
96
223
|
<figure>
|
|
97
224
|
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
225
|
+
<figcaption class="uk-margin-small-top">Iframe</figcaption>
|
|
226
|
+
</figure>
|
|
227
|
+
</a>
|
|
228
|
+
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<h2>Dotnav</h2>
|
|
233
|
+
|
|
234
|
+
<div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="nav: dotnav; slidenav: false">
|
|
235
|
+
<div>
|
|
236
|
+
|
|
237
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
|
|
238
|
+
<figure>
|
|
239
|
+
<img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
240
|
+
<figcaption class="uk-margin-small-top">900x600</figcaption>
|
|
241
|
+
</figure>
|
|
242
|
+
</a>
|
|
243
|
+
|
|
244
|
+
</div>
|
|
245
|
+
<div>
|
|
246
|
+
|
|
247
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
|
|
248
|
+
<figure>
|
|
249
|
+
<img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
250
|
+
<figcaption class="uk-margin-small-top">700x500</figcaption>
|
|
251
|
+
</figure>
|
|
252
|
+
</a>
|
|
253
|
+
|
|
254
|
+
</div>
|
|
255
|
+
<div>
|
|
256
|
+
|
|
257
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
|
|
258
|
+
<figure>
|
|
259
|
+
<img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
260
|
+
<figcaption class="uk-margin-small-top">1800x1200</figcaption>
|
|
261
|
+
</figure>
|
|
262
|
+
</a>
|
|
263
|
+
|
|
264
|
+
</div>
|
|
265
|
+
<div>
|
|
266
|
+
|
|
267
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
|
|
268
|
+
<figure>
|
|
269
|
+
<img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
270
|
+
<figcaption class="uk-margin-small-top">1000x2000</figcaption>
|
|
271
|
+
</figure>
|
|
272
|
+
</a>
|
|
273
|
+
|
|
274
|
+
</div>
|
|
275
|
+
<div>
|
|
276
|
+
|
|
277
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
|
|
278
|
+
<figure>
|
|
279
|
+
<img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
280
|
+
<figcaption class="uk-margin-small-top">2000x500</figcaption>
|
|
281
|
+
</figure>
|
|
282
|
+
</a>
|
|
283
|
+
|
|
284
|
+
</div>
|
|
285
|
+
<div>
|
|
286
|
+
|
|
287
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
|
|
288
|
+
<figure>
|
|
289
|
+
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
|
|
98
290
|
<figcaption class="uk-margin-small-top">Video</figcaption>
|
|
99
291
|
</figure>
|
|
100
292
|
</a>
|
|
@@ -102,7 +294,7 @@
|
|
|
102
294
|
</div>
|
|
103
295
|
<div>
|
|
104
296
|
|
|
105
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube">
|
|
297
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
|
|
106
298
|
<figure>
|
|
107
299
|
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
108
300
|
<figcaption class="uk-margin-small-top">YouTube</figcaption>
|
|
@@ -112,7 +304,7 @@
|
|
|
112
304
|
</div>
|
|
113
305
|
<div>
|
|
114
306
|
|
|
115
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo">
|
|
307
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
|
|
116
308
|
<figure>
|
|
117
309
|
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
118
310
|
<figcaption class="uk-margin-small-top">Vimeo</figcaption>
|
|
@@ -122,7 +314,7 @@
|
|
|
122
314
|
</div>
|
|
123
315
|
<div>
|
|
124
316
|
|
|
125
|
-
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe">
|
|
317
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
|
|
126
318
|
<figure>
|
|
127
319
|
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
128
320
|
<figcaption class="uk-margin-small-top">Iframe</figcaption>
|
|
@@ -130,7 +322,117 @@
|
|
|
130
322
|
</a>
|
|
131
323
|
|
|
132
324
|
</div>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<h2>Template</h2>
|
|
328
|
+
|
|
329
|
+
<template id="js-lightbox-template">
|
|
330
|
+
<div class="uk-lightbox uk-overflow-hidden">
|
|
331
|
+
<div class="uk-lightbox-items"></div>
|
|
332
|
+
<div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
|
|
333
|
+
<button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="uk-position-bottom uk-position-medium uk-text-center uk-transition-fade" uk-inverse>
|
|
336
|
+
<div class="uk-grid-small uk-width-auto uk-flex-inline uk-flex-middle" uk-grid>
|
|
337
|
+
<div><a class="uk-lightbox-slidenav" href uk-slidenav-previous uk-lightbox-item="previous"></a></div>
|
|
338
|
+
<div><div class="uk-lightbox-counter"></div></div>
|
|
339
|
+
<div><a class="uk-lightbox-slidenav" href uk-slidenav-next uk-lightbox-item="next"></a></div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</template>
|
|
133
344
|
|
|
345
|
+
<div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="counter: true; template: #js-lightbox-template">
|
|
346
|
+
<div>
|
|
347
|
+
|
|
348
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
|
|
349
|
+
<figure>
|
|
350
|
+
<img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
351
|
+
<figcaption class="uk-margin-small-top">900x600</figcaption>
|
|
352
|
+
</figure>
|
|
353
|
+
</a>
|
|
354
|
+
|
|
355
|
+
</div>
|
|
356
|
+
<div>
|
|
357
|
+
|
|
358
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
|
|
359
|
+
<figure>
|
|
360
|
+
<img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
361
|
+
<figcaption class="uk-margin-small-top">700x500</figcaption>
|
|
362
|
+
</figure>
|
|
363
|
+
</a>
|
|
364
|
+
|
|
365
|
+
</div>
|
|
366
|
+
<div>
|
|
367
|
+
|
|
368
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
|
|
369
|
+
<figure>
|
|
370
|
+
<img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
371
|
+
<figcaption class="uk-margin-small-top">1800x1200</figcaption>
|
|
372
|
+
</figure>
|
|
373
|
+
</a>
|
|
374
|
+
|
|
375
|
+
</div>
|
|
376
|
+
<div>
|
|
377
|
+
|
|
378
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
|
|
379
|
+
<figure>
|
|
380
|
+
<img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
381
|
+
<figcaption class="uk-margin-small-top">1000x2000</figcaption>
|
|
382
|
+
</figure>
|
|
383
|
+
</a>
|
|
384
|
+
|
|
385
|
+
</div>
|
|
386
|
+
<div>
|
|
387
|
+
|
|
388
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
|
|
389
|
+
<figure>
|
|
390
|
+
<img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
|
|
391
|
+
<figcaption class="uk-margin-small-top">2000x500</figcaption>
|
|
392
|
+
</figure>
|
|
393
|
+
</a>
|
|
394
|
+
|
|
395
|
+
</div>
|
|
396
|
+
<div>
|
|
397
|
+
|
|
398
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
|
|
399
|
+
<figure>
|
|
400
|
+
<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop uk-video="automute: true"></video>
|
|
401
|
+
<figcaption class="uk-margin-small-top">Video</figcaption>
|
|
402
|
+
</figure>
|
|
403
|
+
</a>
|
|
404
|
+
|
|
405
|
+
</div>
|
|
406
|
+
<div>
|
|
407
|
+
|
|
408
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
|
|
409
|
+
<figure>
|
|
410
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
411
|
+
<figcaption class="uk-margin-small-top">YouTube</figcaption>
|
|
412
|
+
</figure>
|
|
413
|
+
</a>
|
|
414
|
+
|
|
415
|
+
</div>
|
|
416
|
+
<div>
|
|
417
|
+
|
|
418
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
|
|
419
|
+
<figure>
|
|
420
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
421
|
+
<figcaption class="uk-margin-small-top">Vimeo</figcaption>
|
|
422
|
+
</figure>
|
|
423
|
+
</a>
|
|
424
|
+
|
|
425
|
+
</div>
|
|
426
|
+
<div>
|
|
427
|
+
|
|
428
|
+
<a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
|
|
429
|
+
<figure>
|
|
430
|
+
<img src="images/photo.jpg" width="400" height="267" alt="">
|
|
431
|
+
<figcaption class="uk-margin-small-top">Iframe</figcaption>
|
|
432
|
+
</figure>
|
|
433
|
+
</a>
|
|
434
|
+
|
|
435
|
+
</div>
|
|
134
436
|
</div>
|
|
135
437
|
|
|
136
438
|
<h2>Dynamic lightbox</h2>
|
|
@@ -178,9 +480,33 @@
|
|
|
178
480
|
</tr>
|
|
179
481
|
<tr>
|
|
180
482
|
<td><code>video-autoplay</code></td>
|
|
483
|
+
<td>Boolean, String</td>
|
|
484
|
+
<td>false</td>
|
|
485
|
+
<td>Lightbox videos autoplay. A value of `inline` will autoplay the video, muted and without controls.</td>
|
|
486
|
+
</tr>
|
|
487
|
+
<tr>
|
|
488
|
+
<td><code>counter</code></td>
|
|
181
489
|
<td>Boolean</td>
|
|
182
490
|
<td>false</td>
|
|
183
|
-
<td>
|
|
491
|
+
<td>Show counter.</td>
|
|
492
|
+
</tr>
|
|
493
|
+
<tr>
|
|
494
|
+
<td><code>nav</code></td>
|
|
495
|
+
<td>Boolean, String</td>
|
|
496
|
+
<td>false</td>
|
|
497
|
+
<td>The nav to use. (dotnav, thumbnav)</td>
|
|
498
|
+
</tr>
|
|
499
|
+
<tr>
|
|
500
|
+
<td><code>slidenav</code></td>
|
|
501
|
+
<td>Boolean</td>
|
|
502
|
+
<td>true</td>
|
|
503
|
+
<td>Show slidenav.</td>
|
|
504
|
+
</tr>
|
|
505
|
+
<tr>
|
|
506
|
+
<td><code>delay-controls</code></td>
|
|
507
|
+
<td>Number</td>
|
|
508
|
+
<td>3000</td>
|
|
509
|
+
<td>Delay time before controls fade out in ms. Setting `0` will prevent hiding controls.</td>
|
|
184
510
|
</tr>
|
|
185
511
|
<tr>
|
|
186
512
|
<td><code>toggle</code></td>
|
|
@@ -225,9 +551,27 @@
|
|
|
225
551
|
</tr>
|
|
226
552
|
<tr>
|
|
227
553
|
<td><code>video-autoplay</code></td>
|
|
554
|
+
<td>Boolean, String</td>
|
|
555
|
+
<td>false</td>
|
|
556
|
+
<td>Lightbox videos autoplay. A value of `inline` will autoplay the video, muted and without controls.</td>
|
|
557
|
+
</tr>
|
|
558
|
+
<tr>
|
|
559
|
+
<td><code>counter</code></td>
|
|
228
560
|
<td>Boolean</td>
|
|
229
561
|
<td>false</td>
|
|
230
|
-
<td>
|
|
562
|
+
<td>Show counter.</td>
|
|
563
|
+
</tr>
|
|
564
|
+
<tr>
|
|
565
|
+
<td><code>nav</code></td>
|
|
566
|
+
<td>Boolean, String</td>
|
|
567
|
+
<td>false</td>
|
|
568
|
+
<td>The nav to use. (dotnav, thumbnav)</td>
|
|
569
|
+
</tr>
|
|
570
|
+
<tr>
|
|
571
|
+
<td><code>slidenav</code></td>
|
|
572
|
+
<td>Boolean</td>
|
|
573
|
+
<td>true</td>
|
|
574
|
+
<td>Show slidenav.</td>
|
|
231
575
|
</tr>
|
|
232
576
|
<tr>
|
|
233
577
|
<td><code>velocity</code></td>
|
|
@@ -263,7 +607,7 @@
|
|
|
263
607
|
<td><code>delay-controls</code></td>
|
|
264
608
|
<td>Number</td>
|
|
265
609
|
<td>3000</td>
|
|
266
|
-
<td>Delay time before controls fade out in ms.</td>
|
|
610
|
+
<td>Delay time before controls fade out in ms. Setting `0` will prevent hiding controls.</td>
|
|
267
611
|
</tr>
|
|
268
612
|
<tr>
|
|
269
613
|
<td><code>i18n</code></td>
|
|
@@ -287,6 +631,11 @@
|
|
|
287
631
|
</tr>
|
|
288
632
|
</thead>
|
|
289
633
|
<tbody>
|
|
634
|
+
<tr>
|
|
635
|
+
<td><code>counter</code></td>
|
|
636
|
+
<td>%s / %s</td>
|
|
637
|
+
<td>Counter indicator for current slide.</td>
|
|
638
|
+
</tr>
|
|
290
639
|
<tr>
|
|
291
640
|
<td><code>next</code></td>
|
|
292
641
|
<td>Next Slide</td>
|
|
@@ -315,11 +664,13 @@
|
|
|
315
664
|
|
|
316
665
|
<script>
|
|
317
666
|
|
|
318
|
-
const {
|
|
667
|
+
const {attr, $$, on} = UIkit.util;
|
|
319
668
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
669
|
+
for (const attribute of ['animation', 'bg-close', 'delay-controls', 'counter', 'video-autoplay']) {
|
|
670
|
+
on(`#js-${attribute}-switcher`, 'change', e =>
|
|
671
|
+
attr($$('[uk-lightbox]'), attribute, e.target.value)
|
|
672
|
+
);
|
|
673
|
+
}
|
|
323
674
|
|
|
324
675
|
on('#js-lightbox', 'click', (e) => {
|
|
325
676
|
e.preventDefault();
|