uikit 3.25.20-dev.e4f47fc → 3.25.20

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 (201) hide show
  1. package/CHANGELOG.md +2 -33
  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 +917 -1045
  7. package/dist/css/uikit-core-rtl.min.css +1 -1
  8. package/dist/css/uikit-core.css +917 -1045
  9. package/dist/css/uikit-core.min.css +1 -1
  10. package/dist/css/uikit-rtl.css +936 -1064
  11. package/dist/css/uikit-rtl.min.css +1 -1
  12. package/dist/css/uikit.css +936 -1064
  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 +132 -133
  19. package/dist/js/components/lightbox-panel.min.js +1 -1
  20. package/dist/js/components/lightbox.js +133 -134
  21. package/dist/js/components/lightbox.min.js +1 -1
  22. package/dist/js/components/notification.js +1 -1
  23. package/dist/js/components/notification.min.js +1 -1
  24. package/dist/js/components/parallax.js +12 -8
  25. package/dist/js/components/parallax.min.js +1 -1
  26. package/dist/js/components/slider-parallax.js +12 -8
  27. package/dist/js/components/slider-parallax.min.js +1 -1
  28. package/dist/js/components/slider.js +25 -41
  29. package/dist/js/components/slider.min.js +1 -1
  30. package/dist/js/components/slideshow-parallax.js +12 -8
  31. package/dist/js/components/slideshow-parallax.min.js +1 -1
  32. package/dist/js/components/slideshow.js +102 -71
  33. package/dist/js/components/slideshow.min.js +1 -1
  34. package/dist/js/components/sortable.js +1 -1
  35. package/dist/js/components/sortable.min.js +1 -1
  36. package/dist/js/components/tooltip.js +19 -19
  37. package/dist/js/components/tooltip.min.js +1 -1
  38. package/dist/js/components/upload.js +1 -1
  39. package/dist/js/components/upload.min.js +1 -1
  40. package/dist/js/uikit-core.js +262 -752
  41. package/dist/js/uikit-core.min.js +1 -1
  42. package/dist/js/uikit-icons.js +1 -1
  43. package/dist/js/uikit-icons.min.js +1 -1
  44. package/dist/js/uikit.js +374 -627
  45. package/dist/js/uikit.min.js +1 -1
  46. package/package.json +1 -1
  47. package/src/js/api/component.js +3 -2
  48. package/src/js/api/observables.js +4 -2
  49. package/src/js/api/options.js +3 -6
  50. package/src/js/api/props.js +4 -1
  51. package/src/js/api/state.js +8 -7
  52. package/src/js/components/index.js +0 -1
  53. package/src/js/components/internal/lightbox-animations.js +26 -7
  54. package/src/js/components/internal/slideshow-animations.js +62 -15
  55. package/src/js/components/lightbox-panel.js +96 -121
  56. package/src/js/components/lightbox.js +8 -5
  57. package/src/js/components/tooltip.js +2 -4
  58. package/src/js/core/accordion.js +29 -78
  59. package/src/js/core/drop.js +4 -5
  60. package/src/js/core/dropnav.js +3 -3
  61. package/src/js/core/grid.js +19 -5
  62. package/src/js/core/height-match.js +2 -1
  63. package/src/js/core/margin.js +0 -3
  64. package/src/js/core/overflow-fade.js +5 -5
  65. package/src/js/core/sticky.js +1 -1
  66. package/src/js/core/switcher.js +44 -24
  67. package/src/js/core/video.js +15 -172
  68. package/src/js/mixin/internal/slideshow-animations.js +13 -5
  69. package/src/js/mixin/internal/slideshow-transitioner.js +2 -2
  70. package/src/js/mixin/modal.js +3 -4
  71. package/src/js/mixin/parallax.js +4 -1
  72. package/src/js/mixin/position.js +1 -1
  73. package/src/js/mixin/slider-nav.js +1 -1
  74. package/src/js/mixin/slider-parallax.js +38 -9
  75. package/src/js/mixin/togglable.js +14 -13
  76. package/src/js/util/attr.js +7 -7
  77. package/src/js/util/class.js +1 -1
  78. package/src/js/util/dom.js +4 -3
  79. package/src/js/util/lang.js +1 -1
  80. package/src/js/util/player.js +4 -4
  81. package/src/js/util/style.js +15 -10
  82. package/src/js/util/viewport.js +25 -22
  83. package/src/less/components/_import.less +1 -6
  84. package/src/less/components/base.less +1 -1
  85. package/src/less/components/button.less +1 -1
  86. package/src/less/components/form.less +5 -5
  87. package/src/less/components/grid.less +65 -58
  88. package/src/less/components/margin.less +124 -155
  89. package/src/less/components/nav.less +1 -1
  90. package/src/less/components/padding.less +9 -9
  91. package/src/less/components/text.less +0 -6
  92. package/src/less/components/utility.less +163 -0
  93. package/src/less/theme/_import.less +1 -5
  94. package/src/less/theme/utility.less +32 -0
  95. package/src/scss/components/_import.scss +1 -6
  96. package/src/scss/components/base.scss +1 -1
  97. package/src/scss/components/button.scss +1 -1
  98. package/src/scss/components/form.scss +5 -5
  99. package/src/scss/components/grid.scss +64 -57
  100. package/src/scss/components/margin.scss +124 -155
  101. package/src/scss/components/nav.scss +1 -1
  102. package/src/scss/components/padding.scss +9 -9
  103. package/src/scss/components/text.scss +0 -6
  104. package/src/scss/components/utility.scss +129 -0
  105. package/src/scss/mixins-theme.scss +33 -42
  106. package/src/scss/mixins.scss +30 -39
  107. package/src/scss/variables-theme.scss +14 -14
  108. package/src/scss/variables.scss +14 -14
  109. package/tests/accordion.html +10 -77
  110. package/tests/alert.html +1 -1
  111. package/tests/align.html +5 -5
  112. package/tests/animation.html +4 -4
  113. package/tests/article.html +7 -7
  114. package/tests/background.html +2 -2
  115. package/tests/badge.html +1 -1
  116. package/tests/base.html +3 -3
  117. package/tests/button.html +1 -1
  118. package/tests/card.html +15 -15
  119. package/tests/close.html +2 -2
  120. package/tests/comment.html +9 -9
  121. package/tests/container.html +2 -2
  122. package/tests/countdown.html +21 -21
  123. package/tests/cover.html +6 -6
  124. package/tests/description-list.html +1 -1
  125. package/tests/divider.html +3 -3
  126. package/tests/dotnav.html +1 -1
  127. package/tests/drop.html +7 -7
  128. package/tests/dropbar.html +5 -5
  129. package/tests/dropdown.html +1 -1
  130. package/tests/dropnav.html +18 -18
  131. package/tests/filter.html +3 -3
  132. package/tests/form.html +14 -14
  133. package/tests/grid.html +47 -41
  134. package/tests/heading.html +2 -2
  135. package/tests/height-viewport.html +4 -4
  136. package/tests/height.html +5 -5
  137. package/tests/icon.html +8 -8
  138. package/tests/image.html +6 -6
  139. package/tests/index.html +13 -13
  140. package/tests/js/index.js +1 -1
  141. package/tests/leader.html +5 -5
  142. package/tests/lightbox.html +14 -14
  143. package/tests/link.html +1 -1
  144. package/tests/list.html +4 -4
  145. package/tests/margin.html +7 -7
  146. package/tests/marker.html +3 -3
  147. package/tests/modal.html +4 -4
  148. package/tests/nav.html +5 -5
  149. package/tests/navbar.html +27 -27
  150. package/tests/notification.html +2 -2
  151. package/tests/offcanvas.html +12 -12
  152. package/tests/overlay.html +3 -3
  153. package/tests/padding.html +1 -1
  154. package/tests/pagination.html +3 -3
  155. package/tests/parallax.html +1 -1
  156. package/tests/position.html +6 -6
  157. package/tests/scrollspy.html +12 -12
  158. package/tests/search.html +5 -5
  159. package/tests/section.html +17 -17
  160. package/tests/slidenav.html +3 -3
  161. package/tests/slider.html +5 -5
  162. package/tests/slideshow.html +4 -34
  163. package/tests/sortable.html +15 -15
  164. package/tests/sticky-navbar.html +4 -4
  165. package/tests/sticky-parallax.html +3 -3
  166. package/tests/sticky.html +3 -3
  167. package/tests/svg.html +2 -3
  168. package/tests/switcher.html +6 -6
  169. package/tests/tab.html +4 -4
  170. package/tests/text.html +3 -3
  171. package/tests/tile.html +4 -4
  172. package/tests/toggle.html +1 -1
  173. package/tests/tooltip.html +3 -3
  174. package/tests/totop.html +2 -2
  175. package/tests/transition.html +1 -1
  176. package/tests/upload.html +5 -5
  177. package/tests/utility.html +116 -16
  178. package/tests/video.html +27 -227
  179. package/tests/visibility.html +4 -4
  180. package/tests/width.html +12 -12
  181. package/dist/js/components/marquee.js +0 -179
  182. package/dist/js/components/marquee.min.js +0 -1
  183. package/src/js/components/marquee.js +0 -123
  184. package/src/js/mixin/connect.js +0 -55
  185. package/src/js/mixin/scroll-driven.js +0 -57
  186. package/src/less/components/dropcap.less +0 -71
  187. package/src/less/components/floating-shadow.less +0 -66
  188. package/src/less/components/logo.less +0 -94
  189. package/src/less/components/marquee.less +0 -133
  190. package/src/less/theme/dropcap.less +0 -29
  191. package/src/less/theme/floating-shadow.less +0 -20
  192. package/src/less/theme/logo.less +0 -29
  193. package/src/less/theme/marquee.less +0 -14
  194. package/src/scss/components/dropcap.scss +0 -63
  195. package/src/scss/components/floating-shadow.scss +0 -63
  196. package/src/scss/components/logo.scss +0 -75
  197. package/src/scss/components/marquee.scss +0 -136
  198. package/tests/dropcap.html +0 -26
  199. package/tests/floating-shadow.html +0 -44
  200. package/tests/logo.html +0 -84
  201. package/tests/marquee.html +0 -617
package/src/scss/components/margin.scss CHANGED
@@ -28,257 +28,226 @@
28
28
  Component: Margin
29
29
  ========================================================================== */
30
30
 
31
-
32
- /* Two or more directions
33
- ========================================================================== */
34
-
35
31
  /*
36
- * Sizes
32
+ * Default
37
33
  */
38
34
 
39
35
  .uk-margin { margin-bottom: $margin-margin; }
40
- * + .uk-margin { margin-top: $margin-margin; }
41
-
42
- .uk-margin-xsmall { margin-bottom: $margin-xsmall-margin; }
43
- * + .uk-margin-xsmall { margin-top: $margin-xsmall-margin; }
44
-
45
- .uk-margin-small { margin-bottom: $margin-small-margin; }
46
- * + .uk-margin-small { margin-top: $margin-small-margin; }
36
+ * + .uk-margin { margin-top: $margin-margin !important; }
47
37
 
48
- .uk-margin-medium { margin-bottom: $margin-medium-margin; }
49
- * + .uk-margin-medium { margin-top: $margin-medium-margin; }
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; }
50
42
 
51
- .uk-margin-large { margin-bottom: $margin-large-margin; }
52
- * + .uk-margin-large { margin-top: $margin-large-margin; }
53
43
 
54
- .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }
55
- * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin; }
44
+ /* XSmall
45
+ ========================================================================== */
56
46
 
57
- /* Desktop and bigger */
58
- @media (min-width: $breakpoint-large) {
47
+ .uk-margin-xsmall { margin-bottom: $margin-xsmall-margin; }
48
+ * + .uk-margin-xsmall { margin-top: $margin-xsmall-margin !important; }
59
49
 
60
- .uk-margin-large { margin-bottom: $margin-large-margin-l; }
61
- * + .uk-margin-large { margin-top: $margin-large-margin-l; }
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; }
62
54
 
63
- .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }
64
- * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l; }
65
55
 
66
- }
56
+ /* Small
57
+ ========================================================================== */
67
58
 
68
- /*
69
- * Auto
70
- */
59
+ .uk-margin-small { margin-bottom: $margin-small-margin; }
60
+ * + .uk-margin-small { margin-top: $margin-small-margin !important; }
71
61
 
72
- .uk-margin-auto-vertical {
73
- margin-top: auto;
74
- margin-bottom: auto;
75
- }
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; }
76
66
 
77
- .uk-margin-auto-vertical-gap { margin-bottom: auto; }
78
- * + .uk-margin-auto-vertical-gap { margin-top: auto; }
79
67
 
80
- .uk-margin-auto {
81
- margin-left: auto;
82
- margin-right: auto;
83
- }
68
+ /* Medium
69
+ ========================================================================== */
84
70
 
85
- /* Phone landscape and bigger */
86
- @media (min-width: $breakpoint-small) {
71
+ .uk-margin-medium { margin-bottom: $margin-medium-margin; }
72
+ * + .uk-margin-medium { margin-top: $margin-medium-margin !important; }
87
73
 
88
- .uk-margin-auto\@s {
89
- margin-left: auto;
90
- margin-right: auto;
91
- }
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; }
92
78
 
93
- }
94
79
 
95
- /* Tablet landscape and bigger */
96
- @media (min-width: $breakpoint-medium) {
80
+ /* Large
81
+ ========================================================================== */
97
82
 
98
- .uk-margin-auto\@m {
99
- margin-left: auto;
100
- margin-right: auto;
101
- }
83
+ .uk-margin-large { margin-bottom: $margin-large-margin; }
84
+ * + .uk-margin-large { margin-top: $margin-large-margin !important; }
102
85
 
103
- }
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; }
104
90
 
105
91
  /* Desktop and bigger */
106
92
  @media (min-width: $breakpoint-large) {
107
93
 
108
- .uk-margin-auto\@l {
109
- margin-left: auto;
110
- margin-right: auto;
111
- }
112
-
113
- }
114
-
115
- /* Large screen and bigger */
116
- @media (min-width: $breakpoint-xlarge) {
117
-
118
- .uk-margin-auto\@xl {
119
- margin-left: auto;
120
- margin-right: auto;
121
- }
122
-
123
- }
124
-
125
- /*
126
- * Remove
127
- */
94
+ .uk-margin-large { margin-bottom: $margin-large-margin-l; }
95
+ * + .uk-margin-large { margin-top: $margin-large-margin-l !important; }
128
96
 
129
- .uk-margin-remove { margin: 0; }
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; }
130
101
 
131
- .uk-margin-remove-vertical {
132
- margin-top: 0;
133
- margin-bottom: 0;
134
102
  }
135
103
 
136
104
 
137
- /* One direction
105
+ /* XLarge
138
106
  ========================================================================== */
139
107
 
140
- /*
141
- * Sizes
142
- */
143
-
144
- .uk-margin-top { margin-top: $margin-margin; }
145
- .uk-margin-bottom { margin-bottom: $margin-margin; }
146
- .uk-margin-left { margin-left: $margin-margin; }
147
- .uk-margin-right { margin-right: $margin-margin; }
148
-
149
- .uk-margin-xsmall-top { margin-top: $margin-xsmall-margin; }
150
- .uk-margin-xsmall-bottom { margin-bottom: $margin-xsmall-margin; }
151
- .uk-margin-xsmall-left { margin-left: $margin-xsmall-margin; }
152
- .uk-margin-xsmall-right { margin-right: $margin-xsmall-margin; }
108
+ .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }
109
+ * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; }
153
110
 
154
- .uk-margin-small-top { margin-top: $margin-small-margin; }
155
- .uk-margin-small-bottom { margin-bottom: $margin-small-margin; }
156
- .uk-margin-small-left { margin-left: $margin-small-margin; }
157
- .uk-margin-small-right { margin-right: $margin-small-margin; }
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; }
158
115
 
159
- .uk-margin-medium-top { margin-top: $margin-medium-margin; }
160
- .uk-margin-medium-bottom { margin-bottom: $margin-medium-margin; }
161
- .uk-margin-medium-left { margin-left: $margin-medium-margin; }
162
- .uk-margin-medium-right { margin-right: $margin-medium-margin; }
116
+ /* Desktop and bigger */
117
+ @media (min-width: $breakpoint-large) {
163
118
 
164
- .uk-margin-large-top { margin-top: $margin-large-margin; }
165
- .uk-margin-large-bottom { margin-bottom: $margin-large-margin; }
166
- .uk-margin-large-left { margin-left: $margin-large-margin; }
167
- .uk-margin-large-right { margin-right: $margin-large-margin; }
119
+ .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }
120
+ * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; }
168
121
 
169
- .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin; }
170
- .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin; }
171
- .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin; }
172
- .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin; }
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; }
173
126
 
174
- /* Desktop and bigger */
175
- @media (min-width: $breakpoint-large) {
127
+ }
176
128
 
177
- .uk-margin-large-top { margin-top: $margin-large-margin-l; }
178
- .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l; }
179
- .uk-margin-large-left { margin-left: $margin-large-margin-l; }
180
- .uk-margin-large-right { margin-right: $margin-large-margin-l; }
181
129
 
182
- .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l; }
183
- .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l; }
184
- .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l; }
185
- .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l; }
130
+ /* Auto
131
+ ========================================================================== */
186
132
 
133
+ .uk-margin-auto {
134
+ margin-left: auto !important;
135
+ margin-right: auto !important;
187
136
  }
188
137
 
189
- /*
190
- * Auto
191
- */
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; }
192
142
 
193
- .uk-margin-auto-top { margin-top: auto; }
194
- .uk-margin-auto-bottom { margin-bottom: auto; }
195
- .uk-margin-auto-left { margin-left: auto; }
196
- .uk-margin-auto-right { margin-right: auto; }
143
+ .uk-margin-auto-vertical {
144
+ margin-top: auto !important;
145
+ margin-bottom: auto !important;
146
+ }
197
147
 
198
148
  /* Phone landscape and bigger */
199
149
  @media (min-width: $breakpoint-small) {
200
150
 
201
- .uk-margin-auto-left\@s { margin-left: auto; }
202
- .uk-margin-auto-right\@s { margin-right: auto; }
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; }
203
158
 
204
159
  }
205
160
 
206
161
  /* Tablet landscape and bigger */
207
162
  @media (min-width: $breakpoint-medium) {
208
163
 
209
- .uk-margin-auto-left\@m { margin-left: auto; }
210
- .uk-margin-auto-right\@m { margin-right: auto; }
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; }
211
171
 
212
172
  }
213
173
 
214
174
  /* Desktop and bigger */
215
175
  @media (min-width: $breakpoint-large) {
216
176
 
217
- .uk-margin-auto-left\@l { margin-left: auto; }
218
- .uk-margin-auto-right\@l { margin-right: auto; }
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; }
219
184
 
220
185
  }
221
186
 
222
187
  /* Large screen and bigger */
223
188
  @media (min-width: $breakpoint-xlarge) {
224
189
 
225
- .uk-margin-auto-left\@xl { margin-left: auto; }
226
- .uk-margin-auto-right\@xl { margin-right: auto; }
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; }
227
197
 
228
198
  }
229
199
 
230
- /*
231
- * Remove
232
- */
233
200
 
234
- .uk-margin-remove-top { margin-top: 0; }
235
- .uk-margin-remove-bottom { margin-bottom: 0; }
236
- .uk-margin-remove-left { margin-left: 0; }
237
- .uk-margin-remove-right { margin-right: 0; }
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
+ }
238
214
 
239
215
  .uk-margin-remove-adjacent + *,
240
- .uk-margin-remove-first-child > :first-child { margin-top: 0; }
241
- .uk-margin-remove-last-child > :last-child { margin-bottom: 0; }
216
+ .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
217
+ .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
242
218
 
243
219
  /* Phone landscape and bigger */
244
220
  @media (min-width: $breakpoint-small) {
245
221
 
246
- .uk-margin-remove-left\@s { margin-left: 0; }
247
- .uk-margin-remove-right\@s { margin-right: 0; }
222
+ .uk-margin-remove-left\@s { margin-left: 0 !important; }
223
+ .uk-margin-remove-right\@s { margin-right: 0 !important; }
248
224
 
249
225
  }
250
226
 
251
227
  /* Tablet landscape and bigger */
252
228
  @media (min-width: $breakpoint-medium) {
253
229
 
254
- .uk-margin-remove-left\@m { margin-left: 0; }
255
- .uk-margin-remove-right\@m { margin-right: 0; }
230
+ .uk-margin-remove-left\@m { margin-left: 0 !important; }
231
+ .uk-margin-remove-right\@m { margin-right: 0 !important; }
256
232
 
257
233
  }
258
234
 
259
235
  /* Desktop and bigger */
260
236
  @media (min-width: $breakpoint-large) {
261
237
 
262
- .uk-margin-remove-left\@l { margin-left: 0; }
263
- .uk-margin-remove-right\@l { margin-right: 0; }
238
+ .uk-margin-remove-left\@l { margin-left: 0 !important; }
239
+ .uk-margin-remove-right\@l { margin-right: 0 !important; }
264
240
 
265
241
  }
266
242
 
267
243
  /* Large screen and bigger */
268
244
  @media (min-width: $breakpoint-xlarge) {
269
245
 
270
- .uk-margin-remove-left\@xl { margin-left: 0; }
271
- .uk-margin-remove-right\@xl { margin-right: 0; }
246
+ .uk-margin-remove-left\@xl { margin-left: 0 !important; }
247
+ .uk-margin-remove-right\@xl { margin-right: 0 !important; }
272
248
 
273
249
  }
274
250
 
275
- /*
276
- * Trim
277
- */
278
-
279
- .uk-margin-trim-block > :first-child { margin-top: 0; }
280
- .uk-margin-trim-block > :last-child { margin-bottom: 0; }
281
-
282
251
 
283
252
  // Hooks
284
253
  // ========================================================================
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; }
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; }
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; }
61
61
 
62
62
  .uk-padding-remove-vertical {
63
- padding-top: 0;
64
- padding-bottom: 0;
63
+ padding-top: 0 !important;
64
+ padding-bottom: 0 !important;
65
65
  }
66
66
 
67
67
  .uk-padding-remove-horizontal {
68
- padding-left: 0;
69
- padding-right: 0;
68
+ padding-left: 0 !important;
69
+ padding-right: 0 !important;
70
70
  }
71
71
 
72
72
 
package/src/scss/components/text.scss CHANGED
@@ -223,12 +223,6 @@ 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
-
232
226
 
233
227
  /* Stroke modifiers
234
228
  ========================================================================== */
package/src/scss/components/utility.scss CHANGED
@@ -16,6 +16,9 @@
16
16
  // `uk-object-*`
17
17
  // `uk-border-*`
18
18
  // `uk-box-shadow-*`
19
+ // `uk-box-shadow-bottom`
20
+ // `uk-dropcap`
21
+ // `uk-logo`
19
22
  // `uk-blend-*`
20
23
  // `uk-transform-*`
21
24
  // `uk-transform-origin-*`
@@ -37,6 +40,9 @@
37
40
 
38
41
 
39
42
 
43
+
44
+
45
+
40
46
  /* ========================================================================
41
47
  Component: Utility
42
48
  ========================================================================== */
@@ -345,6 +351,114 @@
345
351
  .uk-box-shadow-hover-xlarge:hover { box-shadow: $global-xlarge-box-shadow; }
346
352
 
347
353
 
354
+ /* Box-shadow bottom
355
+ ========================================================================== */
356
+
357
+ /*
358
+ * 1. Set position.
359
+ * 2. Set style
360
+ * 3. Fix shadow being clipped in Safari if container is animated
361
+ */
362
+
363
+ @supports (filter: blur(0)) {
364
+
365
+ .uk-box-shadow-bottom {
366
+ display: inline-block;
367
+ position: relative;
368
+ z-index: 0;
369
+ max-width: 100%;
370
+ vertical-align: middle;
371
+ }
372
+
373
+ .uk-box-shadow-bottom::after {
374
+ content: "";
375
+ /* 1 */
376
+ position: absolute;
377
+ bottom: $box-shadow-bottom-bottom;
378
+ left: 0;
379
+ right: 0;
380
+ z-index: -1;
381
+ /* 2 */
382
+ height: $box-shadow-bottom-height;
383
+ border-radius: $box-shadow-bottom-border-radius;
384
+ background: $box-shadow-bottom-background;
385
+ filter: blur($box-shadow-bottom-blur);
386
+ /* 3 */
387
+ will-change: filter;
388
+ @if(meta.mixin-exists(hook-box-shadow-bottom)) {@include hook-box-shadow-bottom();}
389
+ }
390
+
391
+ }
392
+
393
+
394
+ /* Drop cap
395
+ ========================================================================== */
396
+
397
+ /*
398
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
399
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=214004
400
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
401
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=317933
402
+ */
403
+
404
+ .uk-dropcap::first-letter,
405
+ /* 1 */
406
+ .uk-dropcap > p:first-of-type::first-letter {
407
+ display: block;
408
+ margin-right: $dropcap-margin-right;
409
+ float: left;
410
+ font-size: $dropcap-font-size;
411
+ line-height: $dropcap-line-height;
412
+ @if(meta.mixin-exists(hook-dropcap)) {@include hook-dropcap();}
413
+ }
414
+
415
+ /* 2 */
416
+ @-moz-document url-prefix() {
417
+
418
+ .uk-dropcap::first-letter,
419
+ .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
420
+
421
+ }
422
+
423
+
424
+ /* Logo
425
+ ========================================================================== */
426
+
427
+ /*
428
+ * 1. Style
429
+ * 2. Required for `a`
430
+ * 3. Behave like image but can be overridden through flex utility classes
431
+ */
432
+
433
+ .uk-logo {
434
+ /* 1 */
435
+ font-size: $logo-font-size;
436
+ font-family: $logo-font-family;
437
+ color: $logo-color;
438
+ /* 2 */
439
+ text-decoration: none;
440
+ @if(meta.mixin-exists(hook-logo)) {@include hook-logo();}
441
+ }
442
+
443
+ /* 3 */
444
+ :where(.uk-logo) {
445
+ display: inline-block;
446
+ vertical-align: middle;
447
+ }
448
+
449
+ /* Hover */
450
+ .uk-logo:hover {
451
+ color: $logo-hover-color;
452
+ /* 1 */
453
+ text-decoration: none;
454
+ @if(meta.mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
455
+ }
456
+
457
+ .uk-logo :where(img, svg, video) { display: block; }
458
+
459
+ .uk-logo-inverse { display: none; }
460
+
461
+
348
462
  /* Disabled State
349
463
  ========================================================================== */
350
464
 
@@ -422,4 +536,19 @@
422
536
  @if(meta.mixin-exists(hook-utility-misc)) {@include hook-utility-misc();}
423
537
 
424
538
  // @mixin hook-panel-scrollable(){}
539
+ // @mixin hook-box-shadow-bottom(){}
540
+ // @mixin hook-dropcap(){}
541
+ // @mixin hook-logo(){}
542
+ // @mixin hook-logo-hover(){}
425
543
  // @mixin hook-utility-misc(){}
544
+
545
+
546
+ // Inverse
547
+ // ========================================================================
548
+
549
+
550
+
551
+
552
+ // @mixin hook-inverse-dropcap(){}
553
+ // @mixin hook-inverse-logo(){}
554
+ // @mixin hook-inverse-logo-hover(){}