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/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
@@ -34,226 +34,254 @@
34
34
  Component: Margin
35
35
  ========================================================================== */
36
36
 
37
+
38
+ /* Two or more directions
39
+ ========================================================================== */
40
+
37
41
  /*
38
- * Default
42
+ * Sizes
39
43
  */
40
44
 
41
45
  .uk-margin { margin-bottom: @margin-margin; }
42
- * + .uk-margin { margin-top: @margin-margin !important; }
46
+ * + .uk-margin { margin-top: @margin-margin; }
43
47
 
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; }
48
+ .uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; }
49
+ * + .uk-margin-xsmall { margin-top: @margin-xsmall-margin; }
48
50
 
51
+ .uk-margin-small { margin-bottom: @margin-small-margin; }
52
+ * + .uk-margin-small { margin-top: @margin-small-margin; }
49
53
 
50
- /* XSmall
51
- ========================================================================== */
54
+ .uk-margin-medium { margin-bottom: @margin-medium-margin; }
55
+ * + .uk-margin-medium { margin-top: @margin-medium-margin; }
52
56
 
53
- .uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; }
54
- * + .uk-margin-xsmall { margin-top: @margin-xsmall-margin !important; }
57
+ .uk-margin-large { margin-bottom: @margin-large-margin; }
58
+ * + .uk-margin-large { margin-top: @margin-large-margin; }
55
59
 
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; }
60
+ .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin; }
61
+ * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin; }
60
62
 
63
+ /* Desktop and bigger */
64
+ @media (min-width: @breakpoint-large) {
61
65
 
62
- /* Small
63
- ========================================================================== */
66
+ .uk-margin-large { margin-bottom: @margin-large-margin-l; }
67
+ * + .uk-margin-large { margin-top: @margin-large-margin-l; }
64
68
 
65
- .uk-margin-small { margin-bottom: @margin-small-margin; }
66
- * + .uk-margin-small { margin-top: @margin-small-margin !important; }
69
+ .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin-l; }
70
+ * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l; }
67
71
 
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; }
72
+ }
72
73
 
74
+ /*
75
+ * Auto
76
+ */
73
77
 
74
- /* Medium
75
- ========================================================================== */
78
+ .uk-margin-auto-vertical {
79
+ margin-top: auto;
80
+ margin-bottom: auto;
81
+ }
76
82
 
77
- .uk-margin-medium { margin-bottom: @margin-medium-margin; }
78
- * + .uk-margin-medium { margin-top: @margin-medium-margin !important; }
83
+ .uk-margin-auto {
84
+ margin-left: auto;
85
+ margin-right: auto;
86
+ }
79
87
 
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; }
88
+ /* Phone landscape and bigger */
89
+ @media (min-width: @breakpoint-small) {
84
90
 
91
+ .uk-margin-auto\@s {
92
+ margin-left: auto;
93
+ margin-right: auto;
94
+ }
85
95
 
86
- /* Large
87
- ========================================================================== */
96
+ }
88
97
 
89
- .uk-margin-large { margin-bottom: @margin-large-margin; }
90
- * + .uk-margin-large { margin-top: @margin-large-margin !important; }
98
+ /* Tablet landscape and bigger */
99
+ @media (min-width: @breakpoint-medium) {
100
+
101
+ .uk-margin-auto\@m {
102
+ margin-left: auto;
103
+ margin-right: auto;
104
+ }
91
105
 
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; }
106
+ }
96
107
 
97
108
  /* Desktop and bigger */
98
109
  @media (min-width: @breakpoint-large) {
99
110
 
100
- .uk-margin-large { margin-bottom: @margin-large-margin-l; }
101
- * + .uk-margin-large { margin-top: @margin-large-margin-l !important; }
111
+ .uk-margin-auto\@l {
112
+ margin-left: auto;
113
+ margin-right: auto;
114
+ }
115
+
116
+ }
117
+
118
+ /* Large screen and bigger */
119
+ @media (min-width: @breakpoint-xlarge) {
102
120
 
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; }
121
+ .uk-margin-auto\@xl {
122
+ margin-left: auto;
123
+ margin-right: auto;
124
+ }
107
125
 
108
126
  }
109
127
 
128
+ /*
129
+ * Remove
130
+ */
131
+
132
+ .uk-margin-remove { margin: 0; }
133
+
134
+ .uk-margin-remove-vertical {
135
+ margin-top: 0;
136
+ margin-bottom: 0;
137
+ }
110
138
 
111
- /* XLarge
139
+
140
+ /* One direction
112
141
  ========================================================================== */
113
142
 
114
- .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin; }
115
- * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin !important; }
143
+ /*
144
+ * Sizes
145
+ */
116
146
 
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; }
147
+ .uk-margin-top { margin-top: @margin-margin; }
148
+ .uk-margin-bottom { margin-bottom: @margin-margin; }
149
+ .uk-margin-left { margin-left: @margin-margin; }
150
+ .uk-margin-right { margin-right: @margin-margin; }
121
151
 
122
- /* Desktop and bigger */
123
- @media (min-width: @breakpoint-large) {
152
+ .uk-margin-xsmall-top { margin-top: @margin-xsmall-margin; }
153
+ .uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin; }
154
+ .uk-margin-xsmall-left { margin-left: @margin-xsmall-margin; }
155
+ .uk-margin-xsmall-right { margin-right: @margin-xsmall-margin; }
124
156
 
125
- .uk-margin-xlarge { margin-bottom: @margin-xlarge-margin-l; }
126
- * + .uk-margin-xlarge { margin-top: @margin-xlarge-margin-l !important; }
157
+ .uk-margin-small-top { margin-top: @margin-small-margin; }
158
+ .uk-margin-small-bottom { margin-bottom: @margin-small-margin; }
159
+ .uk-margin-small-left { margin-left: @margin-small-margin; }
160
+ .uk-margin-small-right { margin-right: @margin-small-margin; }
127
161
 
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; }
162
+ .uk-margin-medium-top { margin-top: @margin-medium-margin; }
163
+ .uk-margin-medium-bottom { margin-bottom: @margin-medium-margin; }
164
+ .uk-margin-medium-left { margin-left: @margin-medium-margin; }
165
+ .uk-margin-medium-right { margin-right: @margin-medium-margin; }
132
166
 
133
- }
167
+ .uk-margin-large-top { margin-top: @margin-large-margin; }
168
+ .uk-margin-large-bottom { margin-bottom: @margin-large-margin; }
169
+ .uk-margin-large-left { margin-left: @margin-large-margin; }
170
+ .uk-margin-large-right { margin-right: @margin-large-margin; }
134
171
 
172
+ .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin; }
173
+ .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin; }
174
+ .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin; }
175
+ .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin; }
135
176
 
136
- /* Auto
137
- ========================================================================== */
177
+ /* Desktop and bigger */
178
+ @media (min-width: @breakpoint-large) {
138
179
 
139
- .uk-margin-auto {
140
- margin-left: auto !important;
141
- margin-right: auto !important;
142
- }
180
+ .uk-margin-large-top { margin-top: @margin-large-margin-l; }
181
+ .uk-margin-large-bottom { margin-bottom: @margin-large-margin-l; }
182
+ .uk-margin-large-left { margin-left: @margin-large-margin-l; }
183
+ .uk-margin-large-right { margin-right: @margin-large-margin-l; }
143
184
 
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; }
185
+ .uk-margin-xlarge-top { margin-top: @margin-xlarge-margin-l; }
186
+ .uk-margin-xlarge-bottom { margin-bottom: @margin-xlarge-margin-l; }
187
+ .uk-margin-xlarge-left { margin-left: @margin-xlarge-margin-l; }
188
+ .uk-margin-xlarge-right { margin-right: @margin-xlarge-margin-l; }
148
189
 
149
- .uk-margin-auto-vertical {
150
- margin-top: auto !important;
151
- margin-bottom: auto !important;
152
190
  }
153
191
 
192
+ /*
193
+ * Auto
194
+ */
195
+
196
+ .uk-margin-auto-top { margin-top: auto; }
197
+ .uk-margin-auto-bottom { margin-bottom: auto; }
198
+ .uk-margin-auto-left { margin-left: auto; }
199
+ .uk-margin-auto-right { margin-right: auto; }
200
+
154
201
  /* Phone landscape and bigger */
155
202
  @media (min-width: @breakpoint-small) {
156
203
 
157
- .uk-margin-auto\@s {
158
- margin-left: auto !important;
159
- margin-right: auto !important;
160
- }
161
-
162
- .uk-margin-auto-left\@s { margin-left: auto !important; }
163
- .uk-margin-auto-right\@s { margin-right: auto !important; }
204
+ .uk-margin-auto-left\@s { margin-left: auto; }
205
+ .uk-margin-auto-right\@s { margin-right: auto; }
164
206
 
165
207
  }
166
208
 
167
209
  /* Tablet landscape and bigger */
168
210
  @media (min-width: @breakpoint-medium) {
169
211
 
170
- .uk-margin-auto\@m {
171
- margin-left: auto !important;
172
- margin-right: auto !important;
173
- }
174
-
175
- .uk-margin-auto-left\@m { margin-left: auto !important; }
176
- .uk-margin-auto-right\@m { margin-right: auto !important; }
212
+ .uk-margin-auto-left\@m { margin-left: auto; }
213
+ .uk-margin-auto-right\@m { margin-right: auto; }
177
214
 
178
215
  }
179
216
 
180
217
  /* Desktop and bigger */
181
218
  @media (min-width: @breakpoint-large) {
182
219
 
183
- .uk-margin-auto\@l {
184
- margin-left: auto !important;
185
- margin-right: auto !important;
186
- }
187
-
188
- .uk-margin-auto-left\@l { margin-left: auto !important; }
189
- .uk-margin-auto-right\@l { margin-right: auto !important; }
220
+ .uk-margin-auto-left\@l { margin-left: auto; }
221
+ .uk-margin-auto-right\@l { margin-right: auto; }
190
222
 
191
223
  }
192
224
 
193
225
  /* Large screen and bigger */
194
226
  @media (min-width: @breakpoint-xlarge) {
195
227
 
196
- .uk-margin-auto\@xl {
197
- margin-left: auto !important;
198
- margin-right: auto !important;
199
- }
200
-
201
- .uk-margin-auto-left\@xl { margin-left: auto !important; }
202
- .uk-margin-auto-right\@xl { margin-right: auto !important; }
228
+ .uk-margin-auto-left\@xl { margin-left: auto; }
229
+ .uk-margin-auto-right\@xl { margin-right: auto; }
203
230
 
204
231
  }
205
232
 
233
+ /*
234
+ * Remove
235
+ */
206
236
 
207
- /* Remove
208
- ========================================================================== */
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; }
215
-
216
- .uk-margin-remove-vertical {
217
- margin-top: 0 !important;
218
- margin-bottom: 0 !important;
219
- }
237
+ .uk-margin-remove-top { margin-top: 0; }
238
+ .uk-margin-remove-bottom { margin-bottom: 0; }
239
+ .uk-margin-remove-left { margin-left: 0; }
240
+ .uk-margin-remove-right { margin-right: 0; }
220
241
 
221
242
  .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; }
243
+ .uk-margin-remove-first-child > :first-child { margin-top: 0; }
244
+ .uk-margin-remove-last-child > :last-child { margin-bottom: 0; }
224
245
 
225
246
  /* Phone landscape and bigger */
226
247
  @media (min-width: @breakpoint-small) {
227
248
 
228
- .uk-margin-remove-left\@s { margin-left: 0 !important; }
229
- .uk-margin-remove-right\@s { margin-right: 0 !important; }
249
+ .uk-margin-remove-left\@s { margin-left: 0; }
250
+ .uk-margin-remove-right\@s { margin-right: 0; }
230
251
 
231
252
  }
232
253
 
233
254
  /* Tablet landscape and bigger */
234
255
  @media (min-width: @breakpoint-medium) {
235
256
 
236
- .uk-margin-remove-left\@m { margin-left: 0 !important; }
237
- .uk-margin-remove-right\@m { margin-right: 0 !important; }
257
+ .uk-margin-remove-left\@m { margin-left: 0; }
258
+ .uk-margin-remove-right\@m { margin-right: 0; }
238
259
 
239
260
  }
240
261
 
241
262
  /* Desktop and bigger */
242
263
  @media (min-width: @breakpoint-large) {
243
264
 
244
- .uk-margin-remove-left\@l { margin-left: 0 !important; }
245
- .uk-margin-remove-right\@l { margin-right: 0 !important; }
265
+ .uk-margin-remove-left\@l { margin-left: 0; }
266
+ .uk-margin-remove-right\@l { margin-right: 0; }
246
267
 
247
268
  }
248
269
 
249
270
  /* Large screen and bigger */
250
271
  @media (min-width: @breakpoint-xlarge) {
251
272
 
252
- .uk-margin-remove-left\@xl { margin-left: 0 !important; }
253
- .uk-margin-remove-right\@xl { margin-right: 0 !important; }
273
+ .uk-margin-remove-left\@xl { margin-left: 0; }
274
+ .uk-margin-remove-right\@xl { margin-right: 0; }
254
275
 
255
276
  }
256
277
 
278
+ /*
279
+ * Trim
280
+ */
281
+
282
+ .uk-margin-trim-block > :first-child { margin-top: 0; }
283
+ .uk-margin-trim-block > :last-child { margin-bottom: 0; }
284
+
257
285
 
258
286
  // Hooks
259
287
  // ========================================================================
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
 
package/src/less/components/text.less CHANGED
@@ -240,6 +240,12 @@ td.uk-text-truncate { max-width: 0; }
240
240
  th.uk-text-break,
241
241
  td.uk-text-break { word-break: break-word; }
242
242
 
243
+ /*
244
+ * Balance text when wrapping onto multiple lines
245
+ */
246
+
247
+ .uk-text-balance { text-wrap: balance; }
248
+
243
249
 
244
250
  /* Stroke modifiers
245
251
  ========================================================================== */