uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

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 (200) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/build/prefix.js +1 -1
  3. package/build/publishDev.js +1 -1
  4. package/build/release.js +2 -2
  5. package/build/scope.js +1 -1
  6. package/build/scss.js +1 -1
  7. package/dist/css/uikit-core-rtl.css +892 -802
  8. package/dist/css/uikit-core-rtl.min.css +1 -1
  9. package/dist/css/uikit-core.css +892 -802
  10. package/dist/css/uikit-core.min.css +1 -1
  11. package/dist/css/uikit-rtl.css +893 -803
  12. package/dist/css/uikit-rtl.min.css +1 -1
  13. package/dist/css/uikit.css +893 -803
  14. package/dist/css/uikit.min.css +1 -1
  15. package/dist/js/components/countdown.js +1 -1
  16. package/dist/js/components/countdown.min.js +1 -1
  17. package/dist/js/components/filter.js +1 -1
  18. package/dist/js/components/filter.min.js +1 -1
  19. package/dist/js/components/lightbox-panel.js +133 -132
  20. package/dist/js/components/lightbox-panel.min.js +1 -1
  21. package/dist/js/components/lightbox.js +134 -133
  22. package/dist/js/components/lightbox.min.js +1 -1
  23. package/dist/js/components/marquee.js +179 -0
  24. package/dist/js/components/marquee.min.js +1 -0
  25. package/dist/js/components/notification.js +1 -1
  26. package/dist/js/components/notification.min.js +1 -1
  27. package/dist/js/components/parallax.js +8 -12
  28. package/dist/js/components/parallax.min.js +1 -1
  29. package/dist/js/components/slider-parallax.js +8 -12
  30. package/dist/js/components/slider-parallax.min.js +1 -1
  31. package/dist/js/components/slider.js +41 -25
  32. package/dist/js/components/slider.min.js +1 -1
  33. package/dist/js/components/slideshow-parallax.js +8 -12
  34. package/dist/js/components/slideshow-parallax.min.js +1 -1
  35. package/dist/js/components/slideshow.js +71 -102
  36. package/dist/js/components/slideshow.min.js +1 -1
  37. package/dist/js/components/sortable.js +1 -1
  38. package/dist/js/components/sortable.min.js +1 -1
  39. package/dist/js/components/tooltip.js +19 -19
  40. package/dist/js/components/tooltip.min.js +1 -1
  41. package/dist/js/components/upload.js +1 -1
  42. package/dist/js/components/upload.min.js +1 -1
  43. package/dist/js/uikit-core.js +754 -262
  44. package/dist/js/uikit-core.min.js +1 -1
  45. package/dist/js/uikit-icons.js +1 -1
  46. package/dist/js/uikit-icons.min.js +1 -1
  47. package/dist/js/uikit.js +629 -374
  48. package/dist/js/uikit.min.js +1 -1
  49. package/package.json +2 -2
  50. package/src/js/api/component.js +2 -3
  51. package/src/js/api/observables.js +2 -4
  52. package/src/js/api/options.js +6 -3
  53. package/src/js/api/props.js +1 -4
  54. package/src/js/api/state.js +7 -8
  55. package/src/js/components/index.js +1 -0
  56. package/src/js/components/internal/lightbox-animations.js +7 -26
  57. package/src/js/components/internal/slideshow-animations.js +15 -62
  58. package/src/js/components/lightbox-panel.js +121 -96
  59. package/src/js/components/lightbox.js +5 -8
  60. package/src/js/components/marquee.js +123 -0
  61. package/src/js/components/tooltip.js +4 -2
  62. package/src/js/core/accordion.js +78 -29
  63. package/src/js/core/drop.js +5 -4
  64. package/src/js/core/dropnav.js +3 -3
  65. package/src/js/core/grid.js +5 -19
  66. package/src/js/core/height-match.js +1 -2
  67. package/src/js/core/margin.js +3 -0
  68. package/src/js/core/overflow-fade.js +5 -5
  69. package/src/js/core/sticky.js +1 -1
  70. package/src/js/core/switcher.js +24 -44
  71. package/src/js/core/video.js +172 -15
  72. package/src/js/mixin/connect.js +57 -0
  73. package/src/js/mixin/internal/slideshow-animations.js +5 -13
  74. package/src/js/mixin/internal/slideshow-transitioner.js +2 -2
  75. package/src/js/mixin/modal.js +4 -3
  76. package/src/js/mixin/parallax.js +1 -4
  77. package/src/js/mixin/position.js +1 -1
  78. package/src/js/mixin/scroll-driven.js +57 -0
  79. package/src/js/mixin/slider-nav.js +1 -1
  80. package/src/js/mixin/slider-parallax.js +9 -38
  81. package/src/js/mixin/togglable.js +13 -14
  82. package/src/js/util/attr.js +7 -7
  83. package/src/js/util/class.js +1 -1
  84. package/src/js/util/dom.js +3 -4
  85. package/src/js/util/lang.js +1 -1
  86. package/src/js/util/player.js +4 -4
  87. package/src/js/util/style.js +10 -15
  88. package/src/js/util/viewport.js +22 -25
  89. package/src/less/components/_import.less +6 -1
  90. package/src/less/components/base.less +1 -1
  91. package/src/less/components/button.less +1 -1
  92. package/src/less/components/dropcap.less +71 -0
  93. package/src/less/components/floating-shadow.less +65 -0
  94. package/src/less/components/form.less +5 -5
  95. package/src/less/components/grid.less +57 -64
  96. package/src/less/components/logo.less +94 -0
  97. package/src/less/components/margin.less +81 -81
  98. package/src/less/components/marquee.less +133 -0
  99. package/src/less/components/nav.less +1 -1
  100. package/src/less/components/padding.less +9 -9
  101. package/src/less/components/utility.less +0 -157
  102. package/src/less/theme/_import.less +5 -1
  103. package/src/less/theme/dropcap.less +29 -0
  104. package/src/less/theme/floating-shadow.less +20 -0
  105. package/src/less/theme/logo.less +29 -0
  106. package/src/less/theme/marquee.less +14 -0
  107. package/src/less/theme/utility.less +0 -32
  108. package/src/scss/components/_import.scss +6 -1
  109. package/src/scss/components/base.scss +1 -1
  110. package/src/scss/components/button.scss +1 -1
  111. package/src/scss/components/dropcap.scss +63 -0
  112. package/src/scss/components/floating-shadow.scss +62 -0
  113. package/src/scss/components/form.scss +5 -5
  114. package/src/scss/components/grid.scss +57 -64
  115. package/src/scss/components/logo.scss +75 -0
  116. package/src/scss/components/margin.scss +81 -81
  117. package/src/scss/components/marquee.scss +136 -0
  118. package/src/scss/components/nav.scss +1 -1
  119. package/src/scss/components/padding.scss +9 -9
  120. package/src/scss/components/utility.scss +0 -128
  121. package/src/scss/mixins-theme.scss +41 -32
  122. package/src/scss/mixins.scss +38 -29
  123. package/src/scss/variables-theme.scss +14 -9
  124. package/src/scss/variables.scss +14 -9
  125. package/tests/accordion.html +77 -10
  126. package/tests/alert.html +1 -1
  127. package/tests/align.html +5 -5
  128. package/tests/animation.html +4 -4
  129. package/tests/article.html +7 -7
  130. package/tests/background.html +2 -2
  131. package/tests/badge.html +1 -1
  132. package/tests/base.html +2 -2
  133. package/tests/button.html +1 -1
  134. package/tests/card.html +15 -15
  135. package/tests/close.html +2 -2
  136. package/tests/comment.html +9 -9
  137. package/tests/container.html +2 -2
  138. package/tests/countdown.html +21 -21
  139. package/tests/cover.html +3 -3
  140. package/tests/description-list.html +1 -1
  141. package/tests/divider.html +3 -3
  142. package/tests/dotnav.html +1 -1
  143. package/tests/drop.html +7 -7
  144. package/tests/dropbar.html +5 -5
  145. package/tests/dropcap.html +26 -0
  146. package/tests/dropdown.html +1 -1
  147. package/tests/dropnav.html +18 -18
  148. package/tests/filter.html +3 -3
  149. package/tests/floating-shadow.html +44 -0
  150. package/tests/form.html +14 -14
  151. package/tests/grid.html +41 -47
  152. package/tests/heading.html +2 -2
  153. package/tests/height-viewport.html +4 -4
  154. package/tests/height.html +5 -5
  155. package/tests/icon.html +8 -8
  156. package/tests/image.html +6 -6
  157. package/tests/index.html +13 -13
  158. package/tests/js/index.js +1 -1
  159. package/tests/leader.html +5 -5
  160. package/tests/lightbox.html +6 -6
  161. package/tests/link.html +1 -1
  162. package/tests/list.html +4 -4
  163. package/tests/logo.html +84 -0
  164. package/tests/margin.html +7 -7
  165. package/tests/marker.html +3 -3
  166. package/tests/marquee.html +617 -0
  167. package/tests/modal.html +3 -3
  168. package/tests/nav.html +5 -5
  169. package/tests/navbar.html +27 -27
  170. package/tests/notification.html +2 -2
  171. package/tests/offcanvas.html +12 -12
  172. package/tests/overlay.html +3 -3
  173. package/tests/padding.html +1 -1
  174. package/tests/pagination.html +3 -3
  175. package/tests/parallax.html +1 -1
  176. package/tests/position.html +6 -6
  177. package/tests/scrollspy.html +12 -12
  178. package/tests/search.html +5 -5
  179. package/tests/section.html +17 -17
  180. package/tests/slidenav.html +3 -3
  181. package/tests/slider.html +5 -5
  182. package/tests/slideshow.html +3 -3
  183. package/tests/sortable.html +15 -15
  184. package/tests/sticky-navbar.html +4 -4
  185. package/tests/sticky-parallax.html +3 -3
  186. package/tests/sticky.html +3 -3
  187. package/tests/svg.html +3 -2
  188. package/tests/switcher.html +6 -6
  189. package/tests/tab.html +4 -4
  190. package/tests/text.html +3 -3
  191. package/tests/tile.html +4 -4
  192. package/tests/toggle.html +1 -1
  193. package/tests/tooltip.html +3 -3
  194. package/tests/totop.html +2 -2
  195. package/tests/transition.html +1 -1
  196. package/tests/upload.html +5 -5
  197. package/tests/utility.html +16 -116
  198. package/tests/video.html +224 -24
  199. package/tests/visibility.html +4 -4
  200. package/tests/width.html +12 -12
package/src/less/components/logo.less ADDED
@@ -0,0 +1,94 @@
1
+ // Name: Logo
2
+ // Description: Style for the logo
3
+ //
4
+ // Component: `uk-logo`
5
+ //
6
+ // ========================================================================
7
+
8
+
9
+ // Variables
10
+ // ========================================================================
11
+
12
+ @logo-font-size: @global-large-font-size;
13
+ @logo-font-family: @global-font-family;
14
+ @logo-color: @global-emphasis-color;
15
+ @logo-hover-color: @global-emphasis-color;
16
+
17
+ /* ========================================================================
18
+ Component: Logo
19
+ ========================================================================== */
20
+
21
+ /*
22
+ * 1. Style
23
+ * 2. Required for `a`
24
+ * 3. Behave like image but can be overridden through flex utility classes
25
+ */
26
+
27
+ .uk-logo {
28
+ /* 1 */
29
+ font-size: @logo-font-size;
30
+ font-family: @logo-font-family;
31
+ color: @logo-color;
32
+ /* 2 */
33
+ text-decoration: none;
34
+ .hook-logo();
35
+ }
36
+
37
+ /* 3 */
38
+ :where(.uk-logo) {
39
+ display: inline-block;
40
+ vertical-align: middle;
41
+ }
42
+
43
+ /* Hover */
44
+ .uk-logo:hover {
45
+ color: @logo-hover-color;
46
+ /* 2 */
47
+ text-decoration: none;
48
+ .hook-logo-hover();
49
+ }
50
+
51
+ .uk-logo :where(img:not([uk-svg]), svg, video) { display: block; }
52
+
53
+ .uk-logo-inverse:where(:not([uk-svg])) { display: none; }
54
+
55
+
56
+ // Misc
57
+ // ========================================================================
58
+
59
+ .hook-logo-misc();
60
+
61
+
62
+ // Hooks
63
+ // ========================================================================
64
+
65
+ .hook-logo() {}
66
+ .hook-logo-hover() {}
67
+ .hook-logo-misc() {}
68
+
69
+
70
+ // Inverse
71
+ // ========================================================================
72
+
73
+ @inverse-logo-color: @inverse-global-emphasis-color;
74
+ @inverse-logo-hover-color: @inverse-global-emphasis-color;
75
+
76
+ .hook-inverse () {
77
+
78
+ .uk-logo {
79
+ color: @inverse-logo-color;
80
+ .hook-inverse-logo();
81
+ }
82
+
83
+ .uk-logo:hover {
84
+ color: @inverse-logo-hover-color;
85
+ .hook-inverse-logo-hover();
86
+ }
87
+
88
+ .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse:not([uk-svg]))):not(.uk-logo-inverse):not([uk-svg]) { display: none; }
89
+ .uk-logo-inverse:not([uk-svg]) { display: block; }
90
+
91
+ }
92
+
93
+ .hook-inverse-logo() {}
94
+ .hook-inverse-logo-hover() {}
package/src/less/components/margin.less CHANGED
@@ -39,71 +39,71 @@
39
39
  */
40
40
 
41
41
  .uk-margin { margin-bottom: @margin-margin; }
42
- * + .uk-margin { margin-top: @margin-margin !important; }
42
+ * + .uk-margin { margin-top: @margin-margin; }
43
43
 
44
- .uk-margin-top { margin-top: @margin-margin !important; }
45
- .uk-margin-bottom { margin-bottom: @margin-margin !important; }
46
- .uk-margin-left { margin-left: @margin-margin !important; }
47
- .uk-margin-right { margin-right: @margin-margin !important; }
44
+ .uk-margin-top { margin-top: @margin-margin; }
45
+ .uk-margin-bottom { margin-bottom: @margin-margin; }
46
+ .uk-margin-left { margin-left: @margin-margin; }
47
+ .uk-margin-right { margin-right: @margin-margin; }
48
48
 
49
49
 
50
50
  /* XSmall
51
51
  ========================================================================== */
52
52
 
53
53
  .uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; }
54
- * + .uk-margin-xsmall { margin-top: @margin-xsmall-margin !important; }
54
+ * + .uk-margin-xsmall { margin-top: @margin-xsmall-margin; }
55
55
 
56
- .uk-margin-xsmall-top { margin-top: @margin-xsmall-margin !important; }
57
- .uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin !important; }
58
- .uk-margin-xsmall-left { margin-left: @margin-xsmall-margin !important; }
59
- .uk-margin-xsmall-right { margin-right: @margin-xsmall-margin !important; }
56
+ .uk-margin-xsmall-top { margin-top: @margin-xsmall-margin; }
57
+ .uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin; }
58
+ .uk-margin-xsmall-left { margin-left: @margin-xsmall-margin; }
59
+ .uk-margin-xsmall-right { margin-right: @margin-xsmall-margin; }
60
60
 
61
61
 
62
62
  /* Small
63
63
  ========================================================================== */
64
64
 
65
65
  .uk-margin-small { margin-bottom: @margin-small-margin; }
66
- * + .uk-margin-small { margin-top: @margin-small-margin !important; }
66
+ * + .uk-margin-small { margin-top: @margin-small-margin; }
67
67
 
68
- .uk-margin-small-top { margin-top: @margin-small-margin !important; }
69
- .uk-margin-small-bottom { margin-bottom: @margin-small-margin !important; }
70
- .uk-margin-small-left { margin-left: @margin-small-margin !important; }
71
- .uk-margin-small-right { margin-right: @margin-small-margin !important; }
68
+ .uk-margin-small-top { margin-top: @margin-small-margin; }
69
+ .uk-margin-small-bottom { margin-bottom: @margin-small-margin; }
70
+ .uk-margin-small-left { margin-left: @margin-small-margin; }
71
+ .uk-margin-small-right { margin-right: @margin-small-margin; }
72
72
 
73
73
 
74
74
  /* Medium
75
75
  ========================================================================== */
76
76
 
77
77
  .uk-margin-medium { margin-bottom: @margin-medium-margin; }
78
- * + .uk-margin-medium { margin-top: @margin-medium-margin !important; }
78
+ * + .uk-margin-medium { margin-top: @margin-medium-margin; }
79
79
 
80
- .uk-margin-medium-top { margin-top: @margin-medium-margin !important; }
81
- .uk-margin-medium-bottom { margin-bottom: @margin-medium-margin !important; }
82
- .uk-margin-medium-left { margin-left: @margin-medium-margin !important; }
83
- .uk-margin-medium-right { margin-right: @margin-medium-margin !important; }
80
+ .uk-margin-medium-top { margin-top: @margin-medium-margin; }
81
+ .uk-margin-medium-bottom { margin-bottom: @margin-medium-margin; }
82
+ .uk-margin-medium-left { margin-left: @margin-medium-margin; }
83
+ .uk-margin-medium-right { margin-right: @margin-medium-margin; }
84
84
 
85
85
 
86
86
  /* Large
87
87
  ========================================================================== */
88
88
 
89
89
  .uk-margin-large { margin-bottom: @margin-large-margin; }
90
- * + .uk-margin-large { margin-top: @margin-large-margin !important; }
90
+ * + .uk-margin-large { margin-top: @margin-large-margin; }
91
91
 
92
- .uk-margin-large-top { margin-top: @margin-large-margin !important; }
93
- .uk-margin-large-bottom { margin-bottom: @margin-large-margin !important; }
94
- .uk-margin-large-left { margin-left: @margin-large-margin !important; }
95
- .uk-margin-large-right { margin-right: @margin-large-margin !important; }
92
+ .uk-margin-large-top { margin-top: @margin-large-margin; }
93
+ .uk-margin-large-bottom { margin-bottom: @margin-large-margin; }
94
+ .uk-margin-large-left { margin-left: @margin-large-margin; }
95
+ .uk-margin-large-right { margin-right: @margin-large-margin; }
96
96
 
97
97
  /* Desktop and bigger */
98
98
  @media (min-width: @breakpoint-large) {
99
99
 
100
100
  .uk-margin-large { margin-bottom: @margin-large-margin-l; }
101
- * + .uk-margin-large { margin-top: @margin-large-margin-l !important; }
101
+ * + .uk-margin-large { margin-top: @margin-large-margin-l; }
102
102
 
103
- .uk-margin-large-top { margin-top: @margin-large-margin-l !important; }
104
- .uk-margin-large-bottom { margin-bottom: @margin-large-margin-l !important; }
105
- .uk-margin-large-left { margin-left: @margin-large-margin-l !important; }
106
- .uk-margin-large-right { margin-right: @margin-large-margin-l !important; }
103
+ .uk-margin-large-top { margin-top: @margin-large-margin-l; }
104
+ .uk-margin-large-bottom { margin-bottom: @margin-large-margin-l; }
105
+ .uk-margin-large-left { margin-left: @margin-large-margin-l; }
106
+ .uk-margin-large-right { margin-right: @margin-large-margin-l; }
107
107
 
108
108
  }
109
109
 
@@ -112,23 +112,23 @@
112
112
  ========================================================================== */
113
113
 
114
114
  .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin; }
115
- * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin !important; }
115
+ * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin; }
116
116
 
117
- .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin !important; }
118
- .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin !important; }
119
- .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin !important; }
120
- .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin !important; }
117
+ .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin; }
118
+ .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin; }
119
+ .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin; }
120
+ .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin; }
121
121
 
122
122
  /* Desktop and bigger */
123
123
  @media (min-width: @breakpoint-large) {
124
124
 
125
125
  .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin-l; }
126
- * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l !important; }
126
+ * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l; }
127
127
 
128
- .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin-l !important; }
129
- .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin-l !important; }
130
- .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin-l !important; }
131
- .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin-l !important; }
128
+ .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin-l; }
129
+ .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin-l; }
130
+ .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin-l; }
131
+ .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin-l; }
132
132
 
133
133
  }
134
134
 
@@ -137,30 +137,30 @@
137
137
  ========================================================================== */
138
138
 
139
139
  .uk-margin-auto {
140
- margin-left: auto !important;
141
- margin-right: auto !important;
140
+ margin-left: auto;
141
+ margin-right: auto;
142
142
  }
143
143
 
144
- .uk-margin-auto-top { margin-top: auto !important; }
145
- .uk-margin-auto-bottom { margin-bottom: auto !important; }
146
- .uk-margin-auto-left { margin-left: auto !important; }
147
- .uk-margin-auto-right { margin-right: auto !important; }
144
+ .uk-margin-auto-top { margin-top: auto; }
145
+ .uk-margin-auto-bottom { margin-bottom: auto; }
146
+ .uk-margin-auto-left { margin-left: auto; }
147
+ .uk-margin-auto-right { margin-right: auto; }
148
148
 
149
149
  .uk-margin-auto-vertical {
150
- margin-top: auto !important;
151
- margin-bottom: auto !important;
150
+ margin-top: auto;
151
+ margin-bottom: auto;
152
152
  }
153
153
 
154
154
  /* Phone landscape and bigger */
155
155
  @media (min-width: @breakpoint-small) {
156
156
 
157
157
  .uk-margin-auto\@s {
158
- margin-left: auto !important;
159
- margin-right: auto !important;
158
+ margin-left: auto;
159
+ margin-right: auto;
160
160
  }
161
161
 
162
- .uk-margin-auto-left\@s { margin-left: auto !important; }
163
- .uk-margin-auto-right\@s { margin-right: auto !important; }
162
+ .uk-margin-auto-left\@s { margin-left: auto; }
163
+ .uk-margin-auto-right\@s { margin-right: auto; }
164
164
 
165
165
  }
166
166
 
@@ -168,12 +168,12 @@
168
168
  @media (min-width: @breakpoint-medium) {
169
169
 
170
170
  .uk-margin-auto\@m {
171
- margin-left: auto !important;
172
- margin-right: auto !important;
171
+ margin-left: auto;
172
+ margin-right: auto;
173
173
  }
174
174
 
175
- .uk-margin-auto-left\@m { margin-left: auto !important; }
176
- .uk-margin-auto-right\@m { margin-right: auto !important; }
175
+ .uk-margin-auto-left\@m { margin-left: auto; }
176
+ .uk-margin-auto-right\@m { margin-right: auto; }
177
177
 
178
178
  }
179
179
 
@@ -181,12 +181,12 @@
181
181
  @media (min-width: @breakpoint-large) {
182
182
 
183
183
  .uk-margin-auto\@l {
184
- margin-left: auto !important;
185
- margin-right: auto !important;
184
+ margin-left: auto;
185
+ margin-right: auto;
186
186
  }
187
187
 
188
- .uk-margin-auto-left\@l { margin-left: auto !important; }
189
- .uk-margin-auto-right\@l { margin-right: auto !important; }
188
+ .uk-margin-auto-left\@l { margin-left: auto; }
189
+ .uk-margin-auto-right\@l { margin-right: auto; }
190
190
 
191
191
  }
192
192
 
@@ -194,12 +194,12 @@
194
194
  @media (min-width: @breakpoint-xlarge) {
195
195
 
196
196
  .uk-margin-auto\@xl {
197
- margin-left: auto !important;
198
- margin-right: auto !important;
197
+ margin-left: auto;
198
+ margin-right: auto;
199
199
  }
200
200
 
201
- .uk-margin-auto-left\@xl { margin-left: auto !important; }
202
- .uk-margin-auto-right\@xl { margin-right: auto !important; }
201
+ .uk-margin-auto-left\@xl { margin-left: auto; }
202
+ .uk-margin-auto-right\@xl { margin-right: auto; }
203
203
 
204
204
  }
205
205
 
@@ -207,50 +207,50 @@
207
207
  /* Remove
208
208
  ========================================================================== */
209
209
 
210
- .uk-margin-remove { margin: 0 !important; }
211
- .uk-margin-remove-top { margin-top: 0 !important; }
212
- .uk-margin-remove-bottom { margin-bottom: 0 !important; }
213
- .uk-margin-remove-left { margin-left: 0 !important; }
214
- .uk-margin-remove-right { margin-right: 0 !important; }
210
+ .uk-margin-remove { margin: 0; }
211
+ .uk-margin-remove-top { margin-top: 0; }
212
+ .uk-margin-remove-bottom { margin-bottom: 0; }
213
+ .uk-margin-remove-left { margin-left: 0; }
214
+ .uk-margin-remove-right { margin-right: 0; }
215
215
 
216
216
  .uk-margin-remove-vertical {
217
- margin-top: 0 !important;
218
- margin-bottom: 0 !important;
217
+ margin-top: 0;
218
+ margin-bottom: 0;
219
219
  }
220
220
 
221
221
  .uk-margin-remove-adjacent + *,
222
- .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
223
- .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
222
+ .uk-margin-remove-first-child > :first-child { margin-top: 0; }
223
+ .uk-margin-remove-last-child > :last-child { margin-bottom: 0; }
224
224
 
225
225
  /* Phone landscape and bigger */
226
226
  @media (min-width: @breakpoint-small) {
227
227
 
228
- .uk-margin-remove-left\@s { margin-left: 0 !important; }
229
- .uk-margin-remove-right\@s { margin-right: 0 !important; }
228
+ .uk-margin-remove-left\@s { margin-left: 0; }
229
+ .uk-margin-remove-right\@s { margin-right: 0; }
230
230
 
231
231
  }
232
232
 
233
233
  /* Tablet landscape and bigger */
234
234
  @media (min-width: @breakpoint-medium) {
235
235
 
236
- .uk-margin-remove-left\@m { margin-left: 0 !important; }
237
- .uk-margin-remove-right\@m { margin-right: 0 !important; }
236
+ .uk-margin-remove-left\@m { margin-left: 0; }
237
+ .uk-margin-remove-right\@m { margin-right: 0; }
238
238
 
239
239
  }
240
240
 
241
241
  /* Desktop and bigger */
242
242
  @media (min-width: @breakpoint-large) {
243
243
 
244
- .uk-margin-remove-left\@l { margin-left: 0 !important; }
245
- .uk-margin-remove-right\@l { margin-right: 0 !important; }
244
+ .uk-margin-remove-left\@l { margin-left: 0; }
245
+ .uk-margin-remove-right\@l { margin-right: 0; }
246
246
 
247
247
  }
248
248
 
249
249
  /* Large screen and bigger */
250
250
  @media (min-width: @breakpoint-xlarge) {
251
251
 
252
- .uk-margin-remove-left\@xl { margin-left: 0 !important; }
253
- .uk-margin-remove-right\@xl { margin-right: 0 !important; }
252
+ .uk-margin-remove-left\@xl { margin-left: 0; }
253
+ .uk-margin-remove-right\@xl { margin-right: 0; }
254
254
 
255
255
  }
256
256
 
package/src/less/components/marquee.less ADDED
@@ -0,0 +1,133 @@
1
+ // Name: Marquee
2
+ // Description: Component to create scrolling areas
3
+ //
4
+ // Component: `uk-marquee`
5
+ //
6
+ // Sub-objects: `uk-marquee-items`
7
+ //
8
+ // Modifiers: `uk-marquee-vertical`
9
+ // `uk-marquee-fade`
10
+ //
11
+ // ========================================================================
12
+
13
+
14
+ // Variables
15
+ // ========================================================================
16
+
17
+
18
+ /* ========================================================================
19
+ Component: Marquee
20
+ ========================================================================== */
21
+
22
+ /*
23
+ * 1. Fallback for Safari 15 and older
24
+ * 2. Clip child elements
25
+ * `clip` prevents accidental scrolling through elements in slide getting focused
26
+ * `clip` also works in only one direction
27
+ * 3. Prevent tab highlighting on iOS.
28
+ */
29
+
30
+ .uk-marquee {
31
+ /* 1 */
32
+ overflow-x: hidden;
33
+ /* 2 */
34
+ overflow-x: clip;
35
+ /* 3 */
36
+ -webkit-tap-highlight-color: transparent;
37
+ .hook-marquee();
38
+ }
39
+
40
+ .uk-marquee-vertical {
41
+ overflow: visible;
42
+ overflow-y: hidden;
43
+ overflow-y: clip;
44
+ }
45
+
46
+ /*
47
+ * Fade out
48
+ */
49
+
50
+ .uk-marquee-fade {
51
+ --uk-overflow-fade-size: 100px;
52
+ --uk-overflow-fade-direction: right;
53
+ }
54
+ .uk-marquee-fade.uk-marquee-vertical { --uk-overflow-fade-direction: bottom; }
55
+
56
+ .uk-marquee-fade {
57
+ mask-image: linear-gradient(
58
+ to var(--uk-overflow-fade-direction),
59
+ rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)),
60
+ #000 var(--uk-overflow-fade-size),
61
+ #000 ~'calc(100% - var(--uk-overflow-fade-size))',
62
+ rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity))
63
+ );
64
+ }
65
+
66
+
67
+ /* Items
68
+ ========================================================================== */
69
+
70
+ /*
71
+ * 1. Create a containing block.
72
+ */
73
+
74
+ .uk-marquee-items {
75
+ /* 1 */
76
+ position: relative;
77
+ }
78
+
79
+ /*
80
+ * 1. Reset list style without interfering with grid
81
+ * 2. Prevent displaying the callout information on iOS.
82
+ */
83
+
84
+ .uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items:not(.uk-grid) {
85
+ display: flex;
86
+ /* 1 */
87
+ margin: 0;
88
+ padding: 0;
89
+ list-style: none;
90
+ /* 2 */
91
+ -webkit-touch-callout: none;
92
+ }
93
+
94
+ .uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items.uk-grid { flex-wrap: nowrap; }
95
+
96
+
97
+ /* Item
98
+ ========================================================================== */
99
+
100
+ /*
101
+ * 1. Let items take content dimensions (0 0 auto)
102
+ * `max-width` needed to keep image responsiveness and prevent content overflow
103
+ * 2. Create position context
104
+ * 3. Create animation along offset-path
105
+ */
106
+
107
+ .uk-marquee-items > * {
108
+ /* 1 */
109
+ flex: none !important;
110
+ box-sizing: border-box;
111
+ max-width: 100%;
112
+ /* 2 */
113
+ position: relative;
114
+ /* 3 */
115
+ offset-anchor: 0 0;
116
+ offset-rotate: 0deg;
117
+ offset-path: path(var(--uk-marquee-path));
118
+ animation: var(--uk-marquee-duration) linear calc(var(--uk-marquee-start) / -100 * var(--uk-marquee-duration)) infinite var(--uk-marquee-direction) uk-marquee;
119
+ }
120
+
121
+ @keyframes uk-marquee {
122
+ 0% { offset-distance: 0; }
123
+ 100% { offset-distance: 100%; }
124
+ }
125
+
126
+
127
+ // Hooks
128
+ // ========================================================================
129
+
130
+ .hook-marquee-misc();
131
+
132
+ .hook-marquee() {}
133
+ .hook-marquee-misc() {}
package/src/less/components/nav.less CHANGED
@@ -143,7 +143,7 @@
143
143
  align-items: center;
144
144
  /* 2 */
145
145
  column-gap: 0.25em;
146
- /* 3*/
146
+ /* 3 */
147
147
  text-decoration: none;
148
148
  }
149
149
 
package/src/less/components/padding.less CHANGED
@@ -56,20 +56,20 @@
56
56
  /* Remove
57
57
  ========================================================================== */
58
58
 
59
- .uk-padding-remove { padding: 0 !important; }
60
- .uk-padding-remove-top { padding-top: 0 !important; }
61
- .uk-padding-remove-bottom { padding-bottom: 0 !important; }
62
- .uk-padding-remove-left { padding-left: 0 !important; }
63
- .uk-padding-remove-right { padding-right: 0 !important; }
59
+ .uk-padding-remove { padding: 0; }
60
+ .uk-padding-remove-top { padding-top: 0; }
61
+ .uk-padding-remove-bottom { padding-bottom: 0; }
62
+ .uk-padding-remove-left { padding-left: 0; }
63
+ .uk-padding-remove-right { padding-right: 0; }
64
64
 
65
65
  .uk-padding-remove-vertical {
66
- padding-top: 0 !important;
67
- padding-bottom: 0 !important;
66
+ padding-top: 0;
67
+ padding-bottom: 0;
68
68
  }
69
69
 
70
70
  .uk-padding-remove-horizontal {
71
- padding-left: 0 !important;
72
- padding-right: 0 !important;
71
+ padding-left: 0;
72
+ padding-right: 0;
73
73
  }
74
74
 
75
75