uikit 3.14.2-dev.404bdcedf → 3.14.2-dev.447aa311a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/css/uikit-core-rtl.css +85 -24
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +85 -24
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +88 -23
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +88 -23
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +101 -22
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +101 -22
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +17 -2
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +1 -1
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +1 -1
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +135 -44
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +222 -110
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +238 -111
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/parallax.js +16 -1
- package/src/js/core/accordion.js +3 -3
- package/src/js/core/alert.js +1 -1
- package/src/js/core/drop.js +40 -20
- package/src/js/core/height-viewport.js +14 -9
- package/src/js/core/navbar.js +19 -18
- package/src/js/core/toggle.js +5 -8
- package/src/js/mixin/position.js +44 -23
- package/src/js/mixin/togglable.js +105 -24
- package/src/js/util/animation.js +1 -0
- package/src/js/util/viewport.js +2 -5
- package/src/less/components/drop.less +19 -5
- package/src/less/components/dropdown.less +21 -5
- package/src/less/components/margin.less +13 -14
- package/src/less/components/modal.less +19 -4
- package/src/less/components/nav.less +1 -1
- package/src/less/components/navbar.less +46 -19
- package/src/less/components/offcanvas.less +21 -21
- package/src/less/components/position.less +1 -1
- package/src/less/components/sticky.less +7 -0
- package/src/less/components/utility.less +1 -2
- package/src/less/theme/dropdown.less +11 -0
- package/src/less/theme/navbar.less +7 -0
- package/src/scss/components/drop.scss +19 -5
- package/src/scss/components/dropdown.scss +21 -5
- package/src/scss/components/margin.scss +13 -14
- package/src/scss/components/modal.scss +19 -4
- package/src/scss/components/nav.scss +1 -1
- package/src/scss/components/navbar.scss +35 -8
- package/src/scss/components/offcanvas.scss +21 -21
- package/src/scss/components/position.scss +1 -1
- package/src/scss/components/sticky.scss +7 -0
- package/src/scss/components/utility.scss +1 -2
- package/src/scss/mixins-theme.scss +8 -0
- package/src/scss/mixins.scss +2 -0
- package/src/scss/theme/dropdown.scss +8 -0
- package/src/scss/theme/navbar.scss +4 -0
- package/src/scss/variables-theme.scss +23 -10
- package/src/scss/variables.scss +22 -11
- package/tests/drop.html +145 -2
- package/tests/dropdown.html +228 -13
- package/tests/height-viewport.html +62 -0
- package/tests/navbar.html +321 -14
- package/tests/offcanvas.html +8 -8
- package/tests/sticky-navbar.html +132 -0
- package/tests/sticky-parallax.html +2 -1
- package/tests/sticky.html +5 -4
|
@@ -55,6 +55,13 @@
|
|
|
55
55
|
|
|
56
56
|
.uk-sticky.uk-animation-reverse { animation-duration: @sticky-reverse-animation-duration; }
|
|
57
57
|
|
|
58
|
+
/*
|
|
59
|
+
* Placeholder
|
|
60
|
+
* Make content clickable for sticky cover and reveal effects
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
.uk-sticky-placeholder { pointer-events: none; }
|
|
64
|
+
|
|
58
65
|
|
|
59
66
|
// Hooks
|
|
60
67
|
// ========================================================================
|
|
@@ -137,7 +137,6 @@
|
|
|
137
137
|
|
|
138
138
|
/*
|
|
139
139
|
* Enable scrollbars if content is clipped
|
|
140
|
-
* Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
|
|
141
140
|
*/
|
|
142
141
|
|
|
143
142
|
.uk-overflow-auto {
|
|
@@ -405,7 +404,7 @@
|
|
|
405
404
|
.hook-logo-hover();
|
|
406
405
|
}
|
|
407
406
|
|
|
408
|
-
.uk-logo > :where(img, svg, video) { display: block; }
|
|
407
|
+
.uk-logo > :where(img, svg, video) { display: inline-block; }
|
|
409
408
|
|
|
410
409
|
.uk-logo-inverse { display: none; }
|
|
411
410
|
|
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
|
|
21
21
|
@dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
|
|
22
22
|
|
|
23
|
+
@dropdown-stretch-background: @global-muted-background;
|
|
24
|
+
|
|
23
25
|
|
|
24
26
|
// Component
|
|
25
27
|
// ========================================================================
|
|
@@ -27,6 +29,15 @@
|
|
|
27
29
|
.hook-dropdown() { box-shadow: @dropdown-box-shadow; }
|
|
28
30
|
|
|
29
31
|
|
|
32
|
+
// Stretch modifier
|
|
33
|
+
// ========================================================================
|
|
34
|
+
|
|
35
|
+
.hook-dropdown-stretch() {
|
|
36
|
+
box-shadow: none;
|
|
37
|
+
background: @dropdown-stretch-background;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
|
|
30
41
|
// Nav
|
|
31
42
|
// ========================================================================
|
|
32
43
|
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
|
|
30
30
|
@navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
|
|
31
31
|
|
|
32
|
+
@navbar-dropdown-stretch-background: @global-muted-background;
|
|
33
|
+
|
|
32
34
|
@navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
|
|
33
35
|
|
|
34
36
|
@navbar-dropdown-grid-divider-border-width: @global-border-width;
|
|
@@ -102,6 +104,11 @@
|
|
|
102
104
|
|
|
103
105
|
.hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
|
|
104
106
|
|
|
107
|
+
.hook-navbar-dropdown-stretch() {
|
|
108
|
+
box-shadow: none;
|
|
109
|
+
background: @navbar-dropdown-stretch-background;
|
|
110
|
+
}
|
|
111
|
+
|
|
105
112
|
.hook-navbar-dropdown-dropbar() { box-shadow: none; }
|
|
106
113
|
|
|
107
114
|
|
|
@@ -3,10 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
// Component: `uk-drop`
|
|
5
5
|
//
|
|
6
|
-
// Modifiers: `uk-drop-
|
|
7
|
-
// `uk-drop-bottom-*`
|
|
8
|
-
// `uk-drop-left-*`
|
|
9
|
-
// `uk-drop-right-*`
|
|
6
|
+
// Modifiers: `uk-drop-stretch`
|
|
10
7
|
// `uk-drop-stack`
|
|
11
8
|
// `uk-drop-grid`
|
|
12
9
|
//
|
|
@@ -22,6 +19,7 @@
|
|
|
22
19
|
|
|
23
20
|
$drop-z-index: $global-z-index + 20 !default;
|
|
24
21
|
$drop-margin: $global-margin !default;
|
|
22
|
+
$drop-viewport-margin: 15px !default;
|
|
25
23
|
$drop-width: 300px !default;
|
|
26
24
|
|
|
27
25
|
|
|
@@ -42,7 +40,7 @@ $drop-width: 300px !default;
|
|
|
42
40
|
position: absolute;
|
|
43
41
|
z-index: $drop-z-index;
|
|
44
42
|
--uk-position-offset: #{$drop-margin};
|
|
45
|
-
--uk-position-viewport-offset:
|
|
43
|
+
--uk-position-viewport-offset: #{$drop-viewport-margin};
|
|
46
44
|
/* 3 */
|
|
47
45
|
box-sizing: border-box;
|
|
48
46
|
width: $drop-width;
|
|
@@ -52,6 +50,22 @@ $drop-width: 300px !default;
|
|
|
52
50
|
.uk-drop.uk-open { display: block; }
|
|
53
51
|
|
|
54
52
|
|
|
53
|
+
/* Stretch modifier
|
|
54
|
+
========================================================================== */
|
|
55
|
+
|
|
56
|
+
/*
|
|
57
|
+
* 1. Allow scrolling
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
.uk-drop-stretch {
|
|
61
|
+
--uk-position-offset: 0;
|
|
62
|
+
--uk-position-viewport-offset: 0;
|
|
63
|
+
/* 1 */
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
-webkit-overflow-scrolling: touch;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
55
69
|
/* Grid modifiers
|
|
56
70
|
========================================================================== */
|
|
57
71
|
|
|
@@ -5,10 +5,7 @@
|
|
|
5
5
|
//
|
|
6
6
|
// Adopted: `uk-dropdown-nav`
|
|
7
7
|
//
|
|
8
|
-
// Modifiers: `uk-dropdown-
|
|
9
|
-
// `uk-dropdown-bottom-*`
|
|
10
|
-
// `uk-dropdown-left-*`
|
|
11
|
-
// `uk-dropdown-right-*`
|
|
8
|
+
// Modifiers: `uk-dropdown-stretch`
|
|
12
9
|
// `uk-dropdown-stack`
|
|
13
10
|
// `uk-dropdown-grid`
|
|
14
11
|
//
|
|
@@ -22,6 +19,7 @@
|
|
|
22
19
|
|
|
23
20
|
$dropdown-z-index: $global-z-index + 20 !default;
|
|
24
21
|
$dropdown-margin: $global-small-margin !default;
|
|
22
|
+
$dropdown-viewport-margin: 15px !default;
|
|
25
23
|
$dropdown-min-width: 200px !default;
|
|
26
24
|
$dropdown-padding: 15px !default;
|
|
27
25
|
$dropdown-background: $global-muted-background !default;
|
|
@@ -55,7 +53,7 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
55
53
|
position: absolute;
|
|
56
54
|
z-index: $dropdown-z-index;
|
|
57
55
|
--uk-position-offset: #{$dropdown-margin};
|
|
58
|
-
--uk-position-viewport-offset:
|
|
56
|
+
--uk-position-viewport-offset: #{$dropdown-viewport-margin};
|
|
59
57
|
/* 3 */
|
|
60
58
|
box-sizing: border-box;
|
|
61
59
|
min-width: $dropdown-min-width;
|
|
@@ -71,6 +69,23 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
71
69
|
.uk-dropdown.uk-open { display: block; }
|
|
72
70
|
|
|
73
71
|
|
|
72
|
+
/* Stretch modifier
|
|
73
|
+
========================================================================== */
|
|
74
|
+
|
|
75
|
+
/*
|
|
76
|
+
* 1. Allow scrolling
|
|
77
|
+
*/
|
|
78
|
+
|
|
79
|
+
.uk-dropdown-stretch {
|
|
80
|
+
--uk-position-offset: 0;
|
|
81
|
+
--uk-position-viewport-offset: 0;
|
|
82
|
+
/* 1 */
|
|
83
|
+
overflow-y: auto;
|
|
84
|
+
-webkit-overflow-scrolling: touch;
|
|
85
|
+
@if(mixin-exists(hook-dropdown-stretch)) {@include hook-dropdown-stretch();}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
74
89
|
/* Nav
|
|
75
90
|
* Adopts `uk-nav`
|
|
76
91
|
========================================================================== */
|
|
@@ -145,6 +160,7 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
|
|
|
145
160
|
@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();}
|
|
146
161
|
|
|
147
162
|
// @mixin hook-dropdown(){}
|
|
163
|
+
// @mixin hook-dropdown-stretch(){}
|
|
148
164
|
// @mixin hook-dropdown-nav(){}
|
|
149
165
|
// @mixin hook-dropdown-nav-item(){}
|
|
150
166
|
// @mixin hook-dropdown-nav-item-hover(){}
|
|
@@ -193,20 +193,20 @@ $margin-xlarge-margin-l: $global-xlarge-margin !d
|
|
|
193
193
|
/* Remove
|
|
194
194
|
========================================================================== */
|
|
195
195
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
196
|
+
.uk-margin-remove { margin: 0 !important; }
|
|
197
|
+
.uk-margin-remove-top { margin-top: 0 !important; }
|
|
198
|
+
.uk-margin-remove-bottom { margin-bottom: 0 !important; }
|
|
199
|
+
.uk-margin-remove-left { margin-left: 0 !important; }
|
|
200
|
+
.uk-margin-remove-right { margin-right: 0 !important; }
|
|
201
|
+
|
|
202
|
+
.uk-margin-remove-vertical {
|
|
203
|
+
margin-top: 0 !important;
|
|
204
|
+
margin-bottom: 0 !important;
|
|
205
|
+
}
|
|
206
206
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
207
|
+
.uk-margin-remove-adjacent + *,
|
|
208
|
+
.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
|
|
209
|
+
.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
|
|
210
210
|
|
|
211
211
|
/* Phone landscape and bigger */
|
|
212
212
|
@media (min-width: $breakpoint-small) {
|
|
@@ -241,7 +241,6 @@ $margin-xlarge-margin-l: $global-xlarge-margin !d
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
|
|
244
|
-
|
|
245
244
|
// Hooks
|
|
246
245
|
// ========================================================================
|
|
247
246
|
|
|
@@ -40,15 +40,21 @@ $modal-dialog-background: $global-background !default;
|
|
|
40
40
|
|
|
41
41
|
$modal-container-width: 1200px !default;
|
|
42
42
|
|
|
43
|
-
$modal-body-padding-horizontal:
|
|
44
|
-
$modal-body-padding-vertical:
|
|
43
|
+
$modal-body-padding-horizontal: 20px !default;
|
|
44
|
+
$modal-body-padding-vertical: 20px !default;
|
|
45
|
+
$modal-body-padding-horizontal-s: $global-gutter !default;
|
|
46
|
+
$modal-body-padding-vertical-s: $global-gutter !default;
|
|
45
47
|
|
|
46
|
-
$modal-header-padding-horizontal:
|
|
48
|
+
$modal-header-padding-horizontal: 20px !default;
|
|
47
49
|
$modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
|
|
50
|
+
$modal-header-padding-horizontal-s: $global-gutter !default;
|
|
51
|
+
$modal-header-padding-vertical-s: ($modal-header-padding-horizontal-s * 0.5) !default;
|
|
48
52
|
$modal-header-background: $global-muted-background !default;
|
|
49
53
|
|
|
50
|
-
$modal-footer-padding-horizontal:
|
|
54
|
+
$modal-footer-padding-horizontal: 20px !default;
|
|
51
55
|
$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
|
|
56
|
+
$modal-footer-padding-horizontal-s: $global-gutter !default;
|
|
57
|
+
$modal-footer-padding-vertical-s: ($modal-footer-padding-horizontal-s * 0.5) !default;
|
|
52
58
|
$modal-footer-background: $global-muted-background !default;
|
|
53
59
|
|
|
54
60
|
$modal-title-font-size: $global-xlarge-font-size !default;
|
|
@@ -228,6 +234,15 @@ $modal-close-outside-hover-color: $global-inverse-color !default;
|
|
|
228
234
|
@if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();}
|
|
229
235
|
}
|
|
230
236
|
|
|
237
|
+
/* Phone landscape and bigger */
|
|
238
|
+
@media (min-width: $breakpoint-small) {
|
|
239
|
+
|
|
240
|
+
.uk-modal-body { padding: $modal-body-padding-vertical-s $modal-body-padding-horizontal-s; }
|
|
241
|
+
.uk-modal-header { padding: $modal-header-padding-vertical-s $modal-header-padding-horizontal-s; }
|
|
242
|
+
.uk-modal-footer { padding: $modal-footer-padding-vertical-s $modal-footer-padding-horizontal-s; }
|
|
243
|
+
|
|
244
|
+
}
|
|
245
|
+
|
|
231
246
|
/*
|
|
232
247
|
* Remove margin from the last-child
|
|
233
248
|
*/
|
|
@@ -282,7 +282,7 @@ ul.uk-nav-sub {
|
|
|
282
282
|
* Subtitle
|
|
283
283
|
*/
|
|
284
284
|
|
|
285
|
-
|
|
285
|
+
.uk-nav-primary .uk-nav-subtitle {
|
|
286
286
|
font-size: $nav-primary-subtitle-font-size;
|
|
287
287
|
@if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
|
|
288
288
|
}
|
|
@@ -58,11 +58,14 @@ $navbar-toggle-hover-color: $global-color !default;
|
|
|
58
58
|
$navbar-subtitle-font-size: $global-small-font-size !default;
|
|
59
59
|
|
|
60
60
|
$navbar-dropdown-z-index: $global-z-index + 20 !default;
|
|
61
|
-
$navbar-dropdown-margin:
|
|
61
|
+
$navbar-dropdown-margin: 0 !default;
|
|
62
|
+
$navbar-dropdown-shift-margin: 0 !default;
|
|
63
|
+
$navbar-dropdown-viewport-margin: 15px !default;
|
|
62
64
|
$navbar-dropdown-width: 200px !default;
|
|
63
65
|
$navbar-dropdown-padding: 15px !default;
|
|
64
66
|
$navbar-dropdown-background: $global-muted-background !default;
|
|
65
67
|
$navbar-dropdown-color: $global-color !default;
|
|
68
|
+
$navbar-dropdown-color-mode: none !default;
|
|
66
69
|
$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
|
|
67
70
|
$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
|
|
68
71
|
|
|
@@ -374,8 +377,8 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
374
377
|
position: absolute;
|
|
375
378
|
z-index: $navbar-dropdown-z-index;
|
|
376
379
|
--uk-position-offset: #{$navbar-dropdown-margin};
|
|
377
|
-
--uk-position-shift-offset:
|
|
378
|
-
--uk-position-viewport-offset:
|
|
380
|
+
--uk-position-shift-offset: #{$navbar-dropdown-shift-margin};
|
|
381
|
+
--uk-position-viewport-offset: #{$navbar-dropdown-viewport-margin};
|
|
379
382
|
/* 3 */
|
|
380
383
|
box-sizing: border-box;
|
|
381
384
|
width: $navbar-dropdown-width;
|
|
@@ -390,6 +393,10 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
390
393
|
/* Show */
|
|
391
394
|
.uk-navbar-dropdown.uk-open { display: block; }
|
|
392
395
|
|
|
396
|
+
|
|
397
|
+
@if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
|
|
398
|
+
@if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
|
|
399
|
+
|
|
393
400
|
/*
|
|
394
401
|
* Grid
|
|
395
402
|
* Adopts `uk-grid`
|
|
@@ -414,21 +421,40 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
414
421
|
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); }
|
|
415
422
|
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); }
|
|
416
423
|
|
|
424
|
+
/*
|
|
425
|
+
* Stretch modifier
|
|
426
|
+
* 1. Allow scrolling
|
|
427
|
+
*/
|
|
428
|
+
|
|
429
|
+
.uk-navbar-dropdown-stretch {
|
|
430
|
+
--uk-position-offset: 0;
|
|
431
|
+
--uk-position-shift-offset: 0;
|
|
432
|
+
--uk-position-viewport-offset: 0;
|
|
433
|
+
/* 1 */
|
|
434
|
+
overflow-y: auto;
|
|
435
|
+
-webkit-overflow-scrolling: touch;
|
|
436
|
+
@if(mixin-exists(hook-navbar-dropdown-stretch)) {@include hook-navbar-dropdown-stretch();}
|
|
437
|
+
}
|
|
438
|
+
|
|
417
439
|
/*
|
|
418
440
|
* Dropbar modifier
|
|
419
|
-
* 1.
|
|
420
|
-
* 2.
|
|
421
|
-
* 3.
|
|
441
|
+
* 1. Reset dropdown width to prevent to early shifting
|
|
442
|
+
* 2. Set position
|
|
443
|
+
* 3. Bottom padding for dropbar
|
|
444
|
+
* 4. Horizontal padding
|
|
422
445
|
*/
|
|
423
446
|
|
|
424
447
|
.uk-navbar-dropdown-dropbar {
|
|
425
448
|
/* 1 */
|
|
426
|
-
|
|
449
|
+
width: auto;
|
|
427
450
|
/* 2 */
|
|
428
|
-
|
|
451
|
+
--uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
|
|
429
452
|
/* 3 */
|
|
453
|
+
margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
|
|
454
|
+
/* 4 */
|
|
430
455
|
padding-left: $navbar-dropdown-dropbar-padding-horizontal;
|
|
431
456
|
padding-right: $navbar-dropdown-dropbar-padding-horizontal;
|
|
457
|
+
--uk-position-shift-offset: 0;
|
|
432
458
|
@if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
|
|
433
459
|
}
|
|
434
460
|
|
|
@@ -534,6 +560,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
|
|
|
534
560
|
// @mixin hook-navbar-transparent(){}
|
|
535
561
|
// @mixin hook-navbar-sticky(){}
|
|
536
562
|
// @mixin hook-navbar-dropdown(){}
|
|
563
|
+
// @mixin hook-navbar-dropdown-stretch(){}
|
|
537
564
|
// @mixin hook-navbar-dropdown-dropbar(){}
|
|
538
565
|
// @mixin hook-navbar-dropdown-nav(){}
|
|
539
566
|
// @mixin hook-navbar-dropdown-nav-item(){}
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
$offcanvas-z-index: $global-z-index !default;
|
|
27
27
|
|
|
28
28
|
$offcanvas-bar-width: 270px !default;
|
|
29
|
-
$offcanvas-bar-padding-vertical:
|
|
30
|
-
$offcanvas-bar-padding-horizontal:
|
|
29
|
+
$offcanvas-bar-padding-vertical: 20px !default;
|
|
30
|
+
$offcanvas-bar-padding-horizontal: 20px !default;
|
|
31
31
|
$offcanvas-bar-background: $global-secondary-background !default;
|
|
32
32
|
$offcanvas-bar-color-mode: light !default;
|
|
33
33
|
|
|
34
|
-
$offcanvas-bar-width-
|
|
35
|
-
$offcanvas-bar-padding-vertical-
|
|
36
|
-
$offcanvas-bar-padding-horizontal-
|
|
34
|
+
$offcanvas-bar-width-s: 350px !default;
|
|
35
|
+
$offcanvas-bar-padding-vertical-s: $global-gutter !default;
|
|
36
|
+
$offcanvas-bar-padding-horizontal-s: $global-gutter !default;
|
|
37
37
|
|
|
38
38
|
$offcanvas-close-position: 5px !default;
|
|
39
39
|
$offcanvas-close-padding: 5px !default;
|
|
40
40
|
|
|
41
|
-
$offcanvas-close-position-
|
|
41
|
+
$offcanvas-close-position-s: 10px !default;
|
|
42
42
|
|
|
43
43
|
$offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
44
44
|
|
|
@@ -99,13 +99,13 @@ $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
|
99
99
|
@if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
/*
|
|
103
|
-
@media (min-width: $breakpoint-
|
|
102
|
+
/* Phone landscape and bigger */
|
|
103
|
+
@media (min-width: $breakpoint-small) {
|
|
104
104
|
|
|
105
105
|
.uk-offcanvas-bar {
|
|
106
|
-
left: (-$offcanvas-bar-width-
|
|
107
|
-
width: $offcanvas-bar-width-
|
|
108
|
-
padding: $offcanvas-bar-padding-vertical-
|
|
106
|
+
left: (-$offcanvas-bar-width-s);
|
|
107
|
+
width: $offcanvas-bar-width-s;
|
|
108
|
+
padding: $offcanvas-bar-padding-vertical-s $offcanvas-bar-padding-horizontal-s;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
}
|
|
@@ -121,9 +121,9 @@ $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
/* Tablet landscape and bigger */
|
|
124
|
-
@media (min-width: $breakpoint-
|
|
124
|
+
@media (min-width: $breakpoint-small) {
|
|
125
125
|
|
|
126
|
-
.uk-offcanvas-flip .uk-offcanvas-bar { right: (-$offcanvas-bar-width-
|
|
126
|
+
.uk-offcanvas-flip .uk-offcanvas-bar { right: (-$offcanvas-bar-width-s); }
|
|
127
127
|
|
|
128
128
|
}
|
|
129
129
|
|
|
@@ -179,9 +179,9 @@ $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
|
179
179
|
.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width; }
|
|
180
180
|
|
|
181
181
|
/* Tablet landscape and bigger */
|
|
182
|
-
@media (min-width: $breakpoint-
|
|
182
|
+
@media (min-width: $breakpoint-small) {
|
|
183
183
|
|
|
184
|
-
.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-
|
|
184
|
+
.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-s; }
|
|
185
185
|
|
|
186
186
|
}
|
|
187
187
|
|
|
@@ -209,11 +209,11 @@ $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
/* Tablet landscape and bigger */
|
|
212
|
-
@media (min-width: $breakpoint-
|
|
212
|
+
@media (min-width: $breakpoint-small) {
|
|
213
213
|
|
|
214
214
|
.uk-offcanvas-close {
|
|
215
|
-
top: $offcanvas-close-position-
|
|
216
|
-
right: $offcanvas-close-position-
|
|
215
|
+
top: $offcanvas-close-position-s;
|
|
216
|
+
right: $offcanvas-close-position-s;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
219
|
}
|
|
@@ -304,11 +304,11 @@ $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
|
|
|
304
304
|
.uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width); }
|
|
305
305
|
|
|
306
306
|
/* Tablet landscape and bigger */
|
|
307
|
-
@media (min-width: $breakpoint-
|
|
307
|
+
@media (min-width: $breakpoint-small) {
|
|
308
308
|
|
|
309
|
-
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width-
|
|
309
|
+
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width-s; }
|
|
310
310
|
|
|
311
|
-
.uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width-
|
|
311
|
+
.uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width-s); }
|
|
312
312
|
|
|
313
313
|
}
|
|
314
314
|
|
|
@@ -218,7 +218,7 @@ $position-large-margin-l: 50px !default;
|
|
|
218
218
|
========================================================================== */
|
|
219
219
|
|
|
220
220
|
.uk-position-z-index { z-index: 1; }
|
|
221
|
-
|
|
221
|
+
.uk-position-z-index-zero { z-index: 0; }
|
|
222
222
|
.uk-position-z-index-negative { z-index: -1; }
|
|
223
223
|
|
|
224
224
|
|
|
@@ -55,6 +55,13 @@ $sticky-reverse-animation-duration: 0.2s !default;
|
|
|
55
55
|
|
|
56
56
|
.uk-sticky.uk-animation-reverse { animation-duration: $sticky-reverse-animation-duration; }
|
|
57
57
|
|
|
58
|
+
/*
|
|
59
|
+
* Placeholder
|
|
60
|
+
* Make content clickable for sticky cover and reveal effects
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
.uk-sticky-placeholder { pointer-events: none; }
|
|
64
|
+
|
|
58
65
|
|
|
59
66
|
// Hooks
|
|
60
67
|
// ========================================================================
|
|
@@ -137,7 +137,6 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
|
|
|
137
137
|
|
|
138
138
|
/*
|
|
139
139
|
* Enable scrollbars if content is clipped
|
|
140
|
-
* Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
|
|
141
140
|
*/
|
|
142
141
|
|
|
143
142
|
.uk-overflow-auto {
|
|
@@ -405,7 +404,7 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
|
|
|
405
404
|
@if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
|
|
406
405
|
}
|
|
407
406
|
|
|
408
|
-
.uk-logo > :where(img, svg, video) { display: block; }
|
|
407
|
+
.uk-logo > :where(img, svg, video) { display: inline-block; }
|
|
409
408
|
|
|
410
409
|
.uk-logo-inverse { display: none; }
|
|
411
410
|
|
|
@@ -806,6 +806,10 @@
|
|
|
806
806
|
}
|
|
807
807
|
@mixin hook-drop-misc(){}
|
|
808
808
|
@mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; }
|
|
809
|
+
@mixin hook-dropdown-stretch(){
|
|
810
|
+
box-shadow: none;
|
|
811
|
+
background: $dropdown-stretch-background;
|
|
812
|
+
}
|
|
809
813
|
@mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
|
|
810
814
|
@mixin hook-dropdown-nav-item(){}
|
|
811
815
|
@mixin hook-dropdown-nav-item-hover(){}
|
|
@@ -1750,6 +1754,10 @@
|
|
|
1750
1754
|
@mixin hook-navbar-transparent(){}
|
|
1751
1755
|
@mixin hook-navbar-sticky(){}
|
|
1752
1756
|
@mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
|
|
1757
|
+
@mixin hook-navbar-dropdown-stretch(){
|
|
1758
|
+
box-shadow: none;
|
|
1759
|
+
background: $navbar-dropdown-stretch-background;
|
|
1760
|
+
}
|
|
1753
1761
|
@mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
|
|
1754
1762
|
@mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
|
|
1755
1763
|
@mixin hook-navbar-dropdown-nav-item(){}
|
package/src/scss/mixins.scss
CHANGED
|
@@ -581,6 +581,7 @@
|
|
|
581
581
|
}
|
|
582
582
|
@mixin hook-drop-misc(){}
|
|
583
583
|
@mixin hook-dropdown(){}
|
|
584
|
+
@mixin hook-dropdown-stretch(){}
|
|
584
585
|
@mixin hook-dropdown-nav(){}
|
|
585
586
|
@mixin hook-dropdown-nav-item(){}
|
|
586
587
|
@mixin hook-dropdown-nav-item-hover(){}
|
|
@@ -1476,6 +1477,7 @@
|
|
|
1476
1477
|
@mixin hook-navbar-transparent(){}
|
|
1477
1478
|
@mixin hook-navbar-sticky(){}
|
|
1478
1479
|
@mixin hook-navbar-dropdown(){}
|
|
1480
|
+
@mixin hook-navbar-dropdown-stretch(){}
|
|
1479
1481
|
@mixin hook-navbar-dropdown-dropbar(){}
|
|
1480
1482
|
@mixin hook-navbar-dropdown-nav(){}
|
|
1481
1483
|
@mixin hook-navbar-dropdown-nav-item(){}
|
|
@@ -20,6 +20,8 @@ $dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
20
20
|
|
|
21
21
|
$dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
22
22
|
|
|
23
|
+
$dropdown-stretch-background: $global-muted-background !default;
|
|
24
|
+
|
|
23
25
|
|
|
24
26
|
// Component
|
|
25
27
|
// ========================================================================
|
|
@@ -27,6 +29,12 @@ $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !de
|
|
|
27
29
|
|
|
28
30
|
|
|
29
31
|
|
|
32
|
+
// Stretch modifier
|
|
33
|
+
// ========================================================================
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
30
38
|
// Nav
|
|
31
39
|
// ========================================================================
|
|
32
40
|
|
|
@@ -29,6 +29,8 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
29
29
|
|
|
30
30
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
31
31
|
|
|
32
|
+
$navbar-dropdown-stretch-background: $global-muted-background !default;
|
|
33
|
+
|
|
32
34
|
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
33
35
|
|
|
34
36
|
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
@@ -101,6 +103,8 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
|
|
|
101
103
|
|
|
102
104
|
|
|
103
105
|
|
|
106
|
+
|
|
107
|
+
|
|
104
108
|
// Dropdown nav
|
|
105
109
|
// ========================================================================
|
|
106
110
|
|