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.
Files changed (89) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/css/uikit-core-rtl.css +85 -24
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +85 -24
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +88 -23
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +88 -23
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +101 -22
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +101 -22
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +17 -2
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +135 -44
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +222 -110
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +238 -111
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/parallax.js +16 -1
  44. package/src/js/core/accordion.js +3 -3
  45. package/src/js/core/alert.js +1 -1
  46. package/src/js/core/drop.js +40 -20
  47. package/src/js/core/height-viewport.js +14 -9
  48. package/src/js/core/navbar.js +19 -18
  49. package/src/js/core/toggle.js +5 -8
  50. package/src/js/mixin/position.js +44 -23
  51. package/src/js/mixin/togglable.js +105 -24
  52. package/src/js/util/animation.js +1 -0
  53. package/src/js/util/viewport.js +2 -5
  54. package/src/less/components/drop.less +19 -5
  55. package/src/less/components/dropdown.less +21 -5
  56. package/src/less/components/margin.less +13 -14
  57. package/src/less/components/modal.less +19 -4
  58. package/src/less/components/nav.less +1 -1
  59. package/src/less/components/navbar.less +46 -19
  60. package/src/less/components/offcanvas.less +21 -21
  61. package/src/less/components/position.less +1 -1
  62. package/src/less/components/sticky.less +7 -0
  63. package/src/less/components/utility.less +1 -2
  64. package/src/less/theme/dropdown.less +11 -0
  65. package/src/less/theme/navbar.less +7 -0
  66. package/src/scss/components/drop.scss +19 -5
  67. package/src/scss/components/dropdown.scss +21 -5
  68. package/src/scss/components/margin.scss +13 -14
  69. package/src/scss/components/modal.scss +19 -4
  70. package/src/scss/components/nav.scss +1 -1
  71. package/src/scss/components/navbar.scss +35 -8
  72. package/src/scss/components/offcanvas.scss +21 -21
  73. package/src/scss/components/position.scss +1 -1
  74. package/src/scss/components/sticky.scss +7 -0
  75. package/src/scss/components/utility.scss +1 -2
  76. package/src/scss/mixins-theme.scss +8 -0
  77. package/src/scss/mixins.scss +2 -0
  78. package/src/scss/theme/dropdown.scss +8 -0
  79. package/src/scss/theme/navbar.scss +4 -0
  80. package/src/scss/variables-theme.scss +23 -10
  81. package/src/scss/variables.scss +22 -11
  82. package/tests/drop.html +145 -2
  83. package/tests/dropdown.html +228 -13
  84. package/tests/height-viewport.html +62 -0
  85. package/tests/navbar.html +321 -14
  86. package/tests/offcanvas.html +8 -8
  87. package/tests/sticky-navbar.html +132 -0
  88. package/tests/sticky-parallax.html +2 -1
  89. 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-top-*`
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: 10;
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-top-*`
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: 10;
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
- .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
- }
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
- .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; }
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: $global-gutter !default;
44
- $modal-body-padding-vertical: $global-gutter !default;
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: $global-gutter !default;
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: $global-gutter !default;
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
- .uk-nav-primary .uk-nav-subtitle {
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: 0px !default;
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: 0;
378
- --uk-position-viewport-offset: 10;
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. Set position
420
- * 2. Bottom padding for dropbar
421
- * 3. Horizontal padding
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
- --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
449
+ width: auto;
427
450
  /* 2 */
428
- margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
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: $global-margin !default;
30
- $offcanvas-bar-padding-horizontal: $global-margin !default;
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-m: 350px !default;
35
- $offcanvas-bar-padding-vertical-m: $global-medium-gutter !default;
36
- $offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default;
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-m: 20px !default;
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
- /* Tablet landscape and bigger */
103
- @media (min-width: $breakpoint-medium) {
102
+ /* Phone landscape and bigger */
103
+ @media (min-width: $breakpoint-small) {
104
104
 
105
105
  .uk-offcanvas-bar {
106
- left: (-$offcanvas-bar-width-m);
107
- width: $offcanvas-bar-width-m;
108
- padding: $offcanvas-bar-padding-vertical-m $offcanvas-bar-padding-horizontal-m;
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-medium) {
124
+ @media (min-width: $breakpoint-small) {
125
125
 
126
- .uk-offcanvas-flip .uk-offcanvas-bar { right: (-$offcanvas-bar-width-m); }
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-medium) {
182
+ @media (min-width: $breakpoint-small) {
183
183
 
184
- .uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-m; }
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-medium) {
212
+ @media (min-width: $breakpoint-small) {
213
213
 
214
214
  .uk-offcanvas-close {
215
- top: $offcanvas-close-position-m;
216
- right: $offcanvas-close-position-m;
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-medium) {
307
+ @media (min-width: $breakpoint-small) {
308
308
 
309
- :not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width-m; }
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-m); }
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(){}
@@ -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