uikit 3.25.18-dev.9fa57fb → 3.25.18-dev.f49c4ef

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