uikit 3.8.0 → 3.9.0

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 (77) hide show
  1. package/{.eslintrc.js → .eslintrc.json} +5 -5
  2. package/CHANGELOG.md +21 -0
  3. package/build/{.eslintrc.js → .eslintrc.json} +5 -5
  4. package/build/build.js +59 -80
  5. package/build/icons.js +2 -11
  6. package/build/less.js +23 -38
  7. package/build/package.json +4 -0
  8. package/build/prefix.js +38 -94
  9. package/build/publishDev.js +11 -18
  10. package/build/release.js +34 -60
  11. package/build/scope.js +49 -84
  12. package/build/scss.js +14 -16
  13. package/build/util.js +107 -81
  14. package/dist/css/uikit-core-rtl.css +10 -10
  15. package/dist/css/uikit-core-rtl.min.css +1 -1
  16. package/dist/css/uikit-core.css +10 -10
  17. package/dist/css/uikit-core.min.css +1 -1
  18. package/dist/css/uikit-rtl.css +10 -10
  19. package/dist/css/uikit-rtl.min.css +1 -1
  20. package/dist/css/uikit.css +10 -10
  21. package/dist/css/uikit.min.css +1 -1
  22. package/dist/js/components/countdown.js +1 -1
  23. package/dist/js/components/countdown.min.js +1 -1
  24. package/dist/js/components/filter.js +1 -1
  25. package/dist/js/components/filter.min.js +1 -1
  26. package/dist/js/components/lightbox-panel.js +1 -1
  27. package/dist/js/components/lightbox-panel.min.js +1 -1
  28. package/dist/js/components/lightbox.js +1 -1
  29. package/dist/js/components/lightbox.min.js +1 -1
  30. package/dist/js/components/notification.js +1 -1
  31. package/dist/js/components/notification.min.js +1 -1
  32. package/dist/js/components/parallax.js +1 -1
  33. package/dist/js/components/parallax.min.js +1 -1
  34. package/dist/js/components/slider-parallax.js +1 -1
  35. package/dist/js/components/slider-parallax.min.js +1 -1
  36. package/dist/js/components/slider.js +1 -1
  37. package/dist/js/components/slider.min.js +1 -1
  38. package/dist/js/components/slideshow-parallax.js +1 -1
  39. package/dist/js/components/slideshow-parallax.min.js +1 -1
  40. package/dist/js/components/slideshow.js +1 -1
  41. package/dist/js/components/slideshow.min.js +1 -1
  42. package/dist/js/components/sortable.js +1 -1
  43. package/dist/js/components/sortable.min.js +1 -1
  44. package/dist/js/components/tooltip.js +1 -1
  45. package/dist/js/components/tooltip.min.js +1 -1
  46. package/dist/js/components/upload.js +1 -1
  47. package/dist/js/components/upload.min.js +1 -1
  48. package/dist/js/uikit-core.js +23 -14
  49. package/dist/js/uikit-core.min.js +2 -2
  50. package/dist/js/uikit-icons.js +1 -1
  51. package/dist/js/uikit-icons.min.js +1 -1
  52. package/dist/js/uikit.js +23 -14
  53. package/dist/js/uikit.min.js +2 -2
  54. package/package.json +15 -14
  55. package/src/js/util/event.js +7 -7
  56. package/src/js/util/viewport.js +13 -7
  57. package/src/less/components/base.less +7 -4
  58. package/src/less/components/card.less +7 -7
  59. package/src/less/components/form-range.less +1 -1
  60. package/src/less/components/notification.less +1 -1
  61. package/src/less/components/padding.less +1 -1
  62. package/src/less/components/spinner.less +2 -2
  63. package/src/less/components/table.less +3 -3
  64. package/src/less/components/transition.less +4 -4
  65. package/src/less/components/utility.less +4 -4
  66. package/src/scss/components/base.scss +7 -4
  67. package/src/scss/components/card.scss +7 -7
  68. package/src/scss/components/form-range.scss +1 -1
  69. package/src/scss/components/notification.scss +1 -1
  70. package/src/scss/components/padding.scss +1 -1
  71. package/src/scss/components/spinner.scss +2 -2
  72. package/src/scss/components/table.scss +3 -3
  73. package/src/scss/components/transition.scss +4 -4
  74. package/src/scss/components/utility.scss +4 -4
  75. package/src/scss/variables-theme.scss +16 -13
  76. package/src/scss/variables.scss +16 -13
  77. package/tests/scroll.html +65 -1
package/src/scss/variables.scss CHANGED
@@ -142,7 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
142
142
  $base-pre-line-height: 1.5 !default;
143
143
  $base-pre-font-family: $base-code-font-family !default;
144
144
  $base-pre-color: $global-color !default;
145
+ $base-focus-outline-width: 2px !default;
146
+ $base-focus-outline-style: dotted !default;
145
147
  $base-focus-outline: $global-emphasis-color !default;
148
+ $base-focus-outline-offset: 1px !default;
146
149
  $base-selection-background: #39f !default;
147
150
  $base-selection-color: $global-inverse-color !default;
148
151
  $inverse-base-color: $inverse-global-color !default;
@@ -243,13 +246,13 @@ $card-body-padding-vertical: $global-gutter !default;
243
246
  $card-body-padding-horizontal-l: $global-medium-gutter !default;
244
247
  $card-body-padding-vertical-l: $global-medium-gutter !default;
245
248
  $card-header-padding-horizontal: $global-gutter !default;
246
- $card-header-padding-vertical: round($global-gutter / 2) !default;
249
+ $card-header-padding-vertical: round(($global-gutter / 2)) !default;
247
250
  $card-header-padding-horizontal-l: $global-medium-gutter !default;
248
- $card-header-padding-vertical-l: round($global-medium-gutter / 2) !default;
251
+ $card-header-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
249
252
  $card-footer-padding-horizontal: $global-gutter !default;
250
253
  $card-footer-padding-vertical: ($global-gutter / 2) !default;
251
254
  $card-footer-padding-horizontal-l: $global-medium-gutter !default;
252
- $card-footer-padding-vertical-l: round($global-medium-gutter / 2) !default;
255
+ $card-footer-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
253
256
  $card-title-font-size: $global-large-font-size !default;
254
257
  $card-title-line-height: 1.4 !default;
255
258
  $card-badge-top: 15px !default;
@@ -277,16 +280,16 @@ $card-secondary-color-mode: light !default;
277
280
  $card-small-body-padding-horizontal: $global-margin !default;
278
281
  $card-small-body-padding-vertical: $global-margin !default;
279
282
  $card-small-header-padding-horizontal: $global-margin !default;
280
- $card-small-header-padding-vertical: round($global-margin / 1.5) !default;
283
+ $card-small-header-padding-vertical: round(($global-margin / 1.5)) !default;
281
284
  $card-small-footer-padding-horizontal: $global-margin !default;
282
- $card-small-footer-padding-vertical: round($global-margin / 1.5) !default;
285
+ $card-small-footer-padding-vertical: round(($global-margin / 1.5)) !default;
283
286
  $global-large-gutter: 70px !default;
284
287
  $card-large-body-padding-horizontal-l: $global-large-gutter !default;
285
288
  $card-large-body-padding-vertical-l: $global-large-gutter !default;
286
289
  $card-large-header-padding-horizontal-l: $global-large-gutter !default;
287
- $card-large-header-padding-vertical-l: round($global-large-gutter / 2) !default;
290
+ $card-large-header-padding-vertical-l: round(($global-large-gutter / 2)) !default;
288
291
  $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
289
- $card-large-footer-padding-vertical-l: round($global-large-gutter / 2) !default;
292
+ $card-large-footer-padding-vertical-l: round(($global-large-gutter / 2)) !default;
290
293
  $inverse-card-badge-background: $inverse-global-primary-background !default;
291
294
  $inverse-card-badge-color: $inverse-global-inverse-color !default;
292
295
  $close-color: $global-muted-color !default;
@@ -796,7 +799,7 @@ $overlay-primary-color-mode: light !default;
796
799
  $padding-padding: $global-gutter !default;
797
800
  $padding-padding-l: $global-medium-gutter !default;
798
801
  $padding-small-padding: $global-small-gutter !default;
799
- $padding-large-padding: $global-gutter !default;
802
+ $padding-large-padding: $global-medium-gutter !default;
800
803
  $padding-large-padding-l: $global-large-gutter !default;
801
804
  $pagination-margin-horizontal: 0 !default;
802
805
  $pagination-item-padding-vertical: 5px !default;
@@ -885,7 +888,7 @@ $sortable-placeholder-opacity: 0 !default;
885
888
  $sortable-empty-height: 50px !default;
886
889
  $spinner-size: 30px !default;
887
890
  $spinner-stroke-width: 1 !default;
888
- $spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default;
891
+ $spinner-radius: floor((($spinner-size - $spinner-stroke-width) / 2)) !default;
889
892
  $spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
890
893
  $spinner-duration: 1.4s !default;
891
894
  $sticky-z-index: $global-z-index - 20 !default;
@@ -1039,11 +1042,11 @@ $dropcap-margin-right: 10px !default;
1039
1042
  $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
1040
1043
  $logo-font-size: $global-large-font-size !default;
1041
1044
  $logo-font-family: $global-font-family !default;
1042
- $logo-color: $global-color !default;
1043
- $logo-hover-color: $global-color !default;
1045
+ $logo-color: $global-emphasis-color !default;
1046
+ $logo-hover-color: $global-emphasis-color !default;
1044
1047
  $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default;
1045
- $inverse-logo-color: $inverse-global-color !default;
1046
- $inverse-logo-hover-color: $inverse-global-color !default;
1048
+ $inverse-logo-color: $inverse-global-emphasis-color !default;
1049
+ $inverse-logo-hover-color: $inverse-global-emphasis-color !default;
1047
1050
  $deprecated: false !default;
1048
1051
  $breakpoint-small: 640px !default;
1049
1052
  $breakpoint-medium: 960px !default;
package/tests/scroll.html CHANGED
@@ -6,6 +6,15 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
7
  <title>Scroll - UIkit tests</title>
8
8
  <script src="js/test.js"></script>
9
+ <script>
10
+
11
+ UIkit.util.on(document, 'change', '#offset', function (e) {
12
+ UIkit.util.$$('[uk-scroll]').forEach(function (el) {
13
+ el.setAttribute('data-offset', e.target.value);
14
+ })
15
+ })
16
+
17
+ </script>
9
18
  </head>
10
19
 
11
20
  <body>
@@ -14,12 +23,67 @@
14
23
 
15
24
  <h1>Scroll</h1>
16
25
 
26
+ <div class="uk-margin">
27
+ <label class="uk-form-label" for="offset">Offset</label>
28
+ <div class="uk-form-controls">
29
+ <input class="uk-input uk-form-width-small" id="offset" type="text" value="0">
30
+ </div>
31
+ </div>
17
32
  <a class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down!</a>
33
+ <a class="uk-button uk-button-default" href="#second-card" uk-scroll>Go to second card!</a>
34
+ <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
18
35
  <a id="js-top-callback" class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down with callback!</a>
19
36
 
20
- <div style="height: 2000px;"></div>
37
+ <div class="uk-flex uk-flex-column uk-flex-center" style="height: 2000px;">
38
+
39
+ <div class="uk-overflow-auto" style="height: 300px;">
40
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
41
+ <h3 class="uk-card-title">1</h3>
42
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
43
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
44
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
45
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
46
+ </div>
47
+ <div id="second-card" class="uk-card uk-card-primary uk-card-hover uk-card-body">
48
+ <h3 class="uk-card-title">2</h3>
49
+ <div class="uk-overflow-auto" style="height: 250px;">
50
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
51
+ <h3 class="uk-card-title">Nested 1</h3>
52
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
53
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
54
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
55
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
56
+ </div>
57
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
58
+ <h3 class="uk-card-title">Nested 2</h3>
59
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
60
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
61
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
62
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
63
+ </div>
64
+ <div id="nested-card" class="uk-card uk-card-default uk-card-hover uk-card-body">
65
+ <h3 class="uk-card-title">Nested 3</h3>
66
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
67
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
68
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
69
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
74
+ <h3 class="uk-card-title">3</h3>
75
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
76
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
77
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
78
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
79
+ </div>
80
+ </div>
81
+
82
+
83
+ </div>
21
84
 
22
85
  <a id="bottom" class="uk-button uk-button-default" href="#" uk-scroll>Go Up!</a>
86
+ <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
23
87
 
24
88
  <script>
25
89