uikit 3.13.10 → 3.13.11-dev.eb080f280
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 +29 -1
- package/dist/css/uikit-core-rtl.css +46 -8
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +46 -8
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +46 -6
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +46 -6
- 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 +7 -3
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +7 -3
- 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 +18 -11
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +18 -11
- 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 +18 -11
- 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 +2 -2
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +62 -30
- 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 +349 -253
- 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 +392 -259
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/sortable.js +2 -3
- package/src/js/components/tooltip.js +38 -3
- package/src/js/core/drop.js +20 -10
- package/src/js/core/navbar.js +18 -6
- package/src/js/core/scrollspy-nav.js +4 -9
- package/src/js/core/sticky.js +55 -21
- package/src/js/mixin/media.js +12 -9
- package/src/js/mixin/modal.js +6 -2
- package/src/js/mixin/parallax.js +5 -1
- package/src/js/mixin/position.js +24 -24
- package/src/js/uikit-core.js +0 -4
- package/src/js/util/lang.js +0 -4
- package/src/js/util/position.js +180 -125
- package/src/js/util/viewport.js +42 -22
- package/src/less/components/drop.less +0 -1
- package/src/less/components/dropdown.less +11 -1
- package/src/less/components/icon.less +3 -0
- package/src/less/components/nav.less +22 -0
- package/src/less/components/navbar.less +26 -2
- package/src/less/components/search.less +2 -0
- package/src/less/components/sticky.less +8 -3
- package/src/less/theme/dropdown.less +4 -0
- package/src/less/theme/nav.less +6 -0
- package/src/less/theme/navbar.less +4 -0
- package/src/less/theme/search.less +6 -0
- package/src/scss/components/drop.scss +0 -1
- package/src/scss/components/dropdown.scss +11 -1
- package/src/scss/components/icon.scss +3 -0
- package/src/scss/components/nav.scss +22 -0
- package/src/scss/components/navbar.scss +26 -2
- package/src/scss/components/search.scss +2 -0
- package/src/scss/components/sticky.scss +8 -3
- package/src/scss/mixins-theme.scss +5 -0
- package/src/scss/mixins.scss +5 -0
- package/src/scss/theme/dropdown.scss +4 -0
- package/src/scss/theme/nav.scss +6 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/theme/search.scss +6 -0
- package/src/scss/variables-theme.scss +5 -1
- package/src/scss/variables.scss +5 -1
- package/tests/animation.html +216 -214
- package/tests/dropdown.html +16 -2
- package/tests/nav.html +27 -0
- package/tests/navbar.html +55 -4
- package/tests/parallax.html +4 -4
- package/tests/position.html +38 -39
- package/tests/sticky-navbar.html +6 -6
- package/tests/sticky-parallax.html +23 -7
- package/tests/sticky.html +300 -49
- package/src/js/core/core.js +0 -25
package/tests/sticky.html
CHANGED
|
@@ -8,80 +8,311 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.container {
|
|
12
|
+
height: 700px;
|
|
13
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.test-height { height: 120vh;}
|
|
12
17
|
|
|
13
18
|
</style>
|
|
14
19
|
</head>
|
|
15
20
|
|
|
16
21
|
<body>
|
|
17
22
|
|
|
18
|
-
|
|
23
|
+
<!-- uk-position-relative is needed because of the test toolbar -->
|
|
24
|
+
<div class="uk-container uk-position-relative">
|
|
19
25
|
|
|
20
26
|
<h1>Sticky</h1>
|
|
21
27
|
|
|
22
|
-
<
|
|
23
|
-
<div class="uk-width-5-6">
|
|
24
|
-
<div class="viewport uk-margin">
|
|
25
|
-
<div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
|
|
26
|
-
<div>
|
|
28
|
+
<h2>Position Top</h2>
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
<div class="container uk-margin">
|
|
31
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
32
|
+
<div>
|
|
29
33
|
|
|
30
|
-
|
|
31
|
-
<
|
|
34
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container">
|
|
35
|
+
start: 0<br>
|
|
36
|
+
end: !.container
|
|
37
|
+
</div>
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
</div>
|
|
40
|
+
<div>
|
|
34
41
|
|
|
35
|
-
|
|
36
|
-
|
|
42
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 100%; end: !.container">
|
|
43
|
+
start: 100%<br>
|
|
44
|
+
end: !.container
|
|
45
|
+
</div>
|
|
37
46
|
|
|
38
|
-
|
|
47
|
+
</div>
|
|
48
|
+
<div>
|
|
39
49
|
|
|
40
|
-
|
|
41
|
-
<
|
|
50
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 200; end: 500">
|
|
51
|
+
start: 200<br>
|
|
52
|
+
end: 500
|
|
53
|
+
</div>
|
|
42
54
|
|
|
43
|
-
|
|
55
|
+
</div>
|
|
56
|
+
<div>
|
|
44
57
|
|
|
45
|
-
|
|
46
|
-
<
|
|
58
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: 20vh; end: 50vh">
|
|
59
|
+
start: 20vh<br>
|
|
60
|
+
end: 50vh
|
|
61
|
+
</div>
|
|
47
62
|
|
|
48
|
-
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
49
66
|
|
|
50
|
-
|
|
51
|
-
<div>
|
|
67
|
+
<h2>Position Bottom</h2>
|
|
52
68
|
|
|
53
|
-
|
|
69
|
+
<div class="container uk-margin">
|
|
70
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
71
|
+
<div>
|
|
54
72
|
|
|
55
|
-
|
|
73
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; end: !.container">
|
|
74
|
+
position: bottom<br>
|
|
75
|
+
start: 0<br>
|
|
76
|
+
end: !.container
|
|
56
77
|
</div>
|
|
78
|
+
|
|
57
79
|
</div>
|
|
80
|
+
<div>
|
|
58
81
|
|
|
59
|
-
|
|
82
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 100%; end: !.container">
|
|
83
|
+
position: bottom<br>
|
|
84
|
+
start: 100%<br>
|
|
85
|
+
end: !.container
|
|
86
|
+
</div>
|
|
60
87
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<div>
|
|
88
|
+
</div>
|
|
89
|
+
<div>
|
|
64
90
|
|
|
65
|
-
|
|
91
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 200; end: 500">
|
|
92
|
+
position: bottom<br>
|
|
93
|
+
start: 200<br>
|
|
94
|
+
end: 500
|
|
95
|
+
</div>
|
|
66
96
|
|
|
67
|
-
|
|
97
|
+
</div>
|
|
98
|
+
<div>
|
|
99
|
+
|
|
100
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; start: 20vh; end: 50vh">
|
|
101
|
+
position: bottom<br>
|
|
102
|
+
start: 20vh<br>
|
|
103
|
+
end: 50vh
|
|
68
104
|
</div>
|
|
105
|
+
|
|
69
106
|
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<h2>Offset</h2>
|
|
111
|
+
|
|
112
|
+
<div class="container uk-margin">
|
|
113
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
114
|
+
<div>
|
|
115
|
+
|
|
116
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50%; end: !.container">
|
|
117
|
+
position: top<br>
|
|
118
|
+
offset: 50%<br>
|
|
119
|
+
end: !.container
|
|
120
|
+
</div>
|
|
70
121
|
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
|
|
125
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="offset: 50vh; end: !.container">
|
|
126
|
+
position: top<br>
|
|
127
|
+
offset: 50vh<br>
|
|
128
|
+
end: !.container
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</div>
|
|
132
|
+
<div>
|
|
133
|
+
|
|
134
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50%; end: !.container">
|
|
135
|
+
position: bottom<br>
|
|
136
|
+
offset: -50%<br>
|
|
137
|
+
end: !.container
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
</div>
|
|
141
|
+
<div>
|
|
142
|
+
|
|
143
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="position: bottom; offset: -50vh; end: !.container">
|
|
144
|
+
position: bottom<br>
|
|
145
|
+
offset: -50vh<br>
|
|
146
|
+
end: !.container
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
71
150
|
</div>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<h2>Animation, Show On Up, Media and Target Offset</h2>
|
|
154
|
+
|
|
155
|
+
<div class="container uk-margin">
|
|
156
|
+
<div class="uk-grid uk-grid-small uk-child-width-1-4">
|
|
157
|
+
<div>
|
|
158
|
+
|
|
159
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="start: !.container; end: !.container ~ h2; animation: uk-animation-slide-top">
|
|
160
|
+
start: !.container<br>
|
|
161
|
+
end: !.container ~ h2<br>
|
|
162
|
+
animation: uk-animation-slide-top
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
</div>
|
|
166
|
+
<div>
|
|
167
|
+
|
|
168
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container ~ h2; show-on-up: true; animation: uk-animation-slide-top">
|
|
169
|
+
end: !.container ~ h2<br>
|
|
170
|
+
show-on-up: true<br>
|
|
171
|
+
animation: uk-animation-slide-top
|
|
172
|
+
</div>
|
|
77
173
|
|
|
78
|
-
|
|
79
|
-
|
|
174
|
+
</div>
|
|
175
|
+
<div>
|
|
176
|
+
|
|
177
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="end: !.container; media: 640">
|
|
178
|
+
end: !.container<br>
|
|
179
|
+
media: 640
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
</div>
|
|
183
|
+
<div>
|
|
184
|
+
|
|
185
|
+
<div class="uk-card uk-card-primary uk-card-body uk-card-small" uk-sticky="target-offset: 20; end: !.container ~ h2">
|
|
186
|
+
target-offset: 20<br>
|
|
187
|
+
end: !.container ~ h2
|
|
188
|
+
<p>
|
|
189
|
+
<a class="uk-button uk-button-default" href="#js-paragraph">Jump to Paragraph</a>
|
|
190
|
+
</p>
|
|
80
191
|
</div>
|
|
192
|
+
|
|
81
193
|
</div>
|
|
82
194
|
</div>
|
|
83
195
|
</div>
|
|
84
196
|
|
|
197
|
+
<p id="js-paragraph" class="uk-margin-large-top">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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
198
|
+
|
|
199
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
200
|
+
|
|
201
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
202
|
+
|
|
203
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
204
|
+
|
|
205
|
+
<p class="uk-margin-large-bottom">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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
206
|
+
|
|
207
|
+
<h2>Oversized Content</h2>
|
|
208
|
+
|
|
209
|
+
<div class="uk-margin">
|
|
210
|
+
<div class="uk-grid">
|
|
211
|
+
<div class="uk-width-1-4">
|
|
212
|
+
|
|
213
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="end: !.uk-grid">
|
|
214
|
+
|
|
215
|
+
<h3>Position Top 1</h3>
|
|
216
|
+
|
|
217
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
218
|
+
|
|
219
|
+
<h3>Position Top 2</h3>
|
|
220
|
+
|
|
221
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
222
|
+
|
|
223
|
+
<h3>Position Top 3</h3>
|
|
224
|
+
|
|
225
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
</div>
|
|
230
|
+
<div class="uk-width-1-2">
|
|
231
|
+
|
|
232
|
+
<h2>Heading 1</h2>
|
|
233
|
+
|
|
234
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
235
|
+
|
|
236
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
237
|
+
|
|
238
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
239
|
+
|
|
240
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
241
|
+
|
|
242
|
+
<h2>Heading 2</h2>
|
|
243
|
+
|
|
244
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
245
|
+
|
|
246
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
247
|
+
|
|
248
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
249
|
+
|
|
250
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
251
|
+
|
|
252
|
+
<h2>Heading 3</h2>
|
|
253
|
+
|
|
254
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
255
|
+
|
|
256
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
257
|
+
|
|
258
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
259
|
+
|
|
260
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
261
|
+
|
|
262
|
+
<h2>Heading 4</h2>
|
|
263
|
+
|
|
264
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
265
|
+
|
|
266
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
267
|
+
|
|
268
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
269
|
+
|
|
270
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
271
|
+
|
|
272
|
+
</div>
|
|
273
|
+
<div class="uk-width-1-4">
|
|
274
|
+
|
|
275
|
+
<div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; end: !.uk-grid">
|
|
276
|
+
|
|
277
|
+
<h3>Position Bottom 1</h3>
|
|
278
|
+
|
|
279
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
280
|
+
|
|
281
|
+
<h3>Position Bottom 2</h3>
|
|
282
|
+
|
|
283
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
284
|
+
|
|
285
|
+
<h3>Position Bottom 3</h3>
|
|
286
|
+
|
|
287
|
+
<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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
288
|
+
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<h2>Overflow Flip</h2>
|
|
296
|
+
|
|
297
|
+
<div class="uk-margin">
|
|
298
|
+
<select id="js-height-switcher" class="uk-select uk-form-width-small">
|
|
299
|
+
<option value="uk-height-large">Smaller than Viewport</option>
|
|
300
|
+
<option value="test-height">Lager than Viewport</option>
|
|
301
|
+
</select>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<div class="js-overflow-flip uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-large uk-position-z-index-negative " uk-sticky="overflow-flip: true; end: 100%">
|
|
305
|
+
overflow-flip: true<br>
|
|
306
|
+
end: 100%
|
|
307
|
+
</div>
|
|
308
|
+
<div class="js-overflow-flip uk-background-muted uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-large">Cover previous section.<br>Reveal next section.</div>
|
|
309
|
+
<div class="js-overflow-flip uk-background-primary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-large uk-position-z-index-negative " uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
|
|
310
|
+
position: bottom<br>
|
|
311
|
+
overflow-flip: true<br>
|
|
312
|
+
start: -100%<br>
|
|
313
|
+
end: end: 0
|
|
314
|
+
</div>
|
|
315
|
+
|
|
85
316
|
<h2>JavaScript Options</h2>
|
|
86
317
|
|
|
87
318
|
<div class="uk-overflow-auto">
|
|
@@ -97,27 +328,33 @@
|
|
|
97
328
|
<tbody>
|
|
98
329
|
<tr>
|
|
99
330
|
<td><code>position</code></td>
|
|
100
|
-
<td>`top`|`bottom
|
|
331
|
+
<td>`top`|`bottom`</td>
|
|
101
332
|
<td>`top`</td>
|
|
102
|
-
<td>The position the element should be stuck to
|
|
333
|
+
<td>The position the element should be stuck to.</td>
|
|
103
334
|
</tr>
|
|
104
335
|
<tr>
|
|
105
|
-
<td><code>
|
|
106
|
-
<td>
|
|
336
|
+
<td><code>start</code></td>
|
|
337
|
+
<td>Length|CSS Selector</td>
|
|
107
338
|
<td>0</td>
|
|
108
|
-
<td>The top
|
|
339
|
+
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the referenced element's bottom border and the elements top border.</td>
|
|
109
340
|
</tr>
|
|
110
341
|
<tr>
|
|
111
|
-
<td><code>
|
|
112
|
-
<td>
|
|
342
|
+
<td><code>end</code></td>
|
|
343
|
+
<td>Length|CSS Selector|Boolean</td>
|
|
113
344
|
<td>false</td>
|
|
114
|
-
<td>The
|
|
345
|
+
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the referenced element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.</td>
|
|
115
346
|
</tr>
|
|
116
347
|
<tr>
|
|
117
348
|
<td><code>offset</code></td>
|
|
118
|
-
<td>
|
|
349
|
+
<td>Length</td>
|
|
119
350
|
<td>0</td>
|
|
120
|
-
<td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and
|
|
351
|
+
<td>The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
|
|
352
|
+
</tr>
|
|
353
|
+
<tr>
|
|
354
|
+
<td><code>overflow-flip</code></td>
|
|
355
|
+
<td>Boolean</td>
|
|
356
|
+
<td>false</td>
|
|
357
|
+
<td>Flip the Sticky's position option if the element oveflows the viewport</td>
|
|
121
358
|
</tr>
|
|
122
359
|
<tr>
|
|
123
360
|
<td><code>animation</code></td>
|
|
@@ -157,9 +394,9 @@
|
|
|
157
394
|
</tr>
|
|
158
395
|
<tr>
|
|
159
396
|
<td><code>target-offset</code></td>
|
|
160
|
-
<td>
|
|
397
|
+
<td>false, Length</td>
|
|
161
398
|
<td>false</td>
|
|
162
|
-
<td>Initially make sure that the Sticky is not over a
|
|
399
|
+
<td>Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. `false` will disable this behavior.</td>
|
|
163
400
|
</tr>
|
|
164
401
|
</tbody>
|
|
165
402
|
</table>
|
|
@@ -167,5 +404,19 @@
|
|
|
167
404
|
|
|
168
405
|
</div>
|
|
169
406
|
|
|
407
|
+
<script>
|
|
408
|
+
|
|
409
|
+
var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
|
|
410
|
+
|
|
411
|
+
UIkit.util.on('#js-height-switcher', 'change', function () {
|
|
412
|
+
var value = this.value;
|
|
413
|
+
UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
|
|
414
|
+
UIkit.util.removeClass(table, options);
|
|
415
|
+
UIkit.util.addClass(table, value);
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
</script>
|
|
420
|
+
|
|
170
421
|
</body>
|
|
171
422
|
</html>
|
package/src/js/core/core.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { css, inBrowser, on, toMs } from 'uikit-util';
|
|
2
|
-
|
|
3
|
-
export default function () {
|
|
4
|
-
if (!inBrowser) {
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
let started = 0;
|
|
9
|
-
on(
|
|
10
|
-
document,
|
|
11
|
-
'animationstart',
|
|
12
|
-
({ target }) => {
|
|
13
|
-
if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
|
|
14
|
-
started++;
|
|
15
|
-
css(document.documentElement, 'overflowX', 'hidden');
|
|
16
|
-
setTimeout(() => {
|
|
17
|
-
if (!--started) {
|
|
18
|
-
css(document.documentElement, 'overflowX', '');
|
|
19
|
-
}
|
|
20
|
-
}, toMs(css(target, 'animationDuration')) + 100);
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
true
|
|
24
|
-
);
|
|
25
|
-
}
|