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/less/components/_import.less CHANGED
@@ -13,7 +13,6 @@
13
13
  @import "icon.less";
14
14
  @import "form-range.less";
15
15
  @import "form.less"; // After: Icon, Form Range
16
- @import "search.less"; // After: Icon
17
16
  @import "button.less";
18
17
  @import "progress.less";
19
18
 
@@ -32,11 +31,10 @@
32
31
  @import "placeholder.less";
33
32
  @import "badge.less";
34
33
  @import "label.less";
35
- @import "dropcap.less";
36
- @import "floating-shadow.less";
37
34
  @import "overlay.less"; // After: Icon
38
35
  @import "article.less";
39
36
  @import "comment.less";
37
+ @import "search.less"; // After: Icon
40
38
 
41
39
  // JavaScript
42
40
  @import "accordion.less";
@@ -46,7 +44,6 @@
46
44
  @import "modal.less"; // After: Close
47
45
  @import "slideshow.less";
48
46
  @import "slider.less";
49
- @import "marquee.less";
50
47
  @import "sticky.less";
51
48
  @import "offcanvas.less";
52
49
  @import "switcher.less";
@@ -73,10 +70,8 @@
73
70
  @import "tab.less";
74
71
  @import "slidenav.less"; // After: Icon
75
72
  @import "dotnav.less";
76
-
77
73
  @import "dropdown.less"; // After: Card, Nav
78
74
  @import "lightbox.less"; // After: Close, Slidenav
79
- @import "logo.less"; // After: Navbar
80
75
 
81
76
  // Utilities
82
77
  @import "animation.less";
package/src/less/components/base.less CHANGED
@@ -488,7 +488,7 @@ blockquote {
488
488
  * Content
489
489
  */
490
490
 
491
- blockquote :where(p:last-of-type) { margin-bottom: 0; }
491
+ blockquote p:last-of-type { margin-bottom: 0; }
492
492
 
493
493
  blockquote footer {
494
494
  margin-top: @base-blockquote-footer-margin-top;
package/src/less/components/button.less CHANGED
@@ -138,7 +138,7 @@
138
138
 
139
139
  /* Hover */
140
140
  .uk-button:hover {
141
- /* 10 */
141
+ /* 9 */
142
142
  text-decoration: none;
143
143
  .hook-button-hover();
144
144
  }
package/src/less/components/form.less CHANGED
@@ -684,7 +684,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
684
684
  * Stacked
685
685
  */
686
686
 
687
- .uk-form-stacked :where(.uk-form-label) {
687
+ .uk-form-stacked .uk-form-label {
688
688
  display: block;
689
689
  margin-bottom: @form-stacked-margin-bottom;
690
690
  .hook-form-stacked-label();
@@ -698,7 +698,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
698
698
  @media (max-width: @breakpoint-small-max) {
699
699
 
700
700
  /* Behave like `uk-form-stacked` */
701
- .uk-form-horizontal :where(.uk-form-label) {
701
+ .uk-form-horizontal .uk-form-label {
702
702
  display: block;
703
703
  margin-bottom: @form-stacked-margin-bottom;
704
704
  .hook-form-stacked-label();
@@ -709,17 +709,17 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
709
709
  /* Tablet landscape and bigger */
710
710
  @media (min-width: @breakpoint-medium) {
711
711
 
712
- .uk-form-horizontal :where(.uk-form-label) {
712
+ .uk-form-horizontal .uk-form-label {
713
713
  width: @form-horizontal-label-width;
714
714
  margin-top: @form-horizontal-label-margin-top;
715
715
  float: left;
716
716
  .hook-form-horizontal-label();
717
717
  }
718
718
 
719
- .uk-form-horizontal :where(.uk-form-controls) { margin-left: @form-horizontal-controls-margin-left; }
719
+ .uk-form-horizontal .uk-form-controls { margin-left: @form-horizontal-controls-margin-left; }
720
720
 
721
721
  /* Better vertical alignment if controls are checkboxes and radio buttons with text */
722
- .uk-form-horizontal :where(.uk-form-controls-text) { padding-top: @form-horizontal-controls-text-padding-top; }
722
+ .uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }
723
723
 
724
724
  }
725
725
 
package/src/less/components/grid.less CHANGED
@@ -19,7 +19,6 @@
19
19
  // Sub-modifier: `uk-grid-item-match`
20
20
  //
21
21
  // States: `uk-first-column`
22
- // `uk-first-row`
23
22
  //
24
23
  // ========================================================================
25
24
 
@@ -81,32 +80,32 @@
81
80
  .uk-grid > * > :last-child { margin-bottom: 0; }
82
81
 
83
82
 
84
- /* Gap
83
+ /* Gutter
85
84
  ========================================================================== */
86
85
 
87
86
  /*
88
87
  * Default
89
88
  */
90
89
 
90
+ /* Horizontal */
91
91
  .uk-grid { margin-left: -@grid-gutter-horizontal; }
92
92
  .uk-grid > * { padding-left: @grid-gutter-horizontal; }
93
93
 
94
- .uk-grid { row-gap: @grid-gutter-vertical; }
95
-
96
- /* Margin */
97
- .uk-grid + :where(.uk-grid),
94
+ /* Vertical */
95
+ .uk-grid + .uk-grid,
96
+ .uk-grid > .uk-grid-margin,
98
97
  * + .uk-grid-margin { margin-top: @grid-gutter-vertical; }
99
98
 
100
99
  /* Desktop and bigger */
101
100
  @media (min-width: @breakpoint-large) {
102
101
 
102
+ /* Horizontal */
103
103
  .uk-grid { margin-left: -@grid-gutter-horizontal-l; }
104
104
  .uk-grid > * { padding-left: @grid-gutter-horizontal-l; }
105
105
 
106
- .uk-grid { row-gap: @grid-gutter-vertical-l; }
107
-
108
- /* Margin */
109
- .uk-grid + :where(.uk-grid),
106
+ /* Vertical */
107
+ .uk-grid + .uk-grid,
108
+ .uk-grid > .uk-grid-margin,
110
109
  * + .uk-grid-margin { margin-top: @grid-gutter-vertical-l; }
111
110
 
112
111
  }
@@ -115,63 +114,67 @@
115
114
  * Small
116
115
  */
117
116
 
117
+ /* Horizontal */
118
118
  .uk-grid-small,
119
119
  .uk-grid-column-small { margin-left: -@grid-small-gutter-horizontal; }
120
120
  .uk-grid-small > *,
121
121
  .uk-grid-column-small > * { padding-left: @grid-small-gutter-horizontal; }
122
122
 
123
- .uk-grid-small,
124
- .uk-grid-row-small { row-gap: @grid-small-gutter-vertical; }
125
-
126
- /* Margin */
127
- .uk-grid + :where(.uk-grid-small, .uk-grid-row-small),
123
+ /* Vertical */
124
+ .uk-grid + .uk-grid-small,
125
+ .uk-grid + .uk-grid-row-small,
126
+ .uk-grid-small > .uk-grid-margin,
127
+ .uk-grid-row-small > .uk-grid-margin,
128
128
  * + .uk-grid-margin-small { margin-top: @grid-small-gutter-vertical; }
129
129
 
130
130
  /*
131
131
  * Medium
132
132
  */
133
133
 
134
+ /* Horizontal */
134
135
  .uk-grid-medium,
135
136
  .uk-grid-column-medium { margin-left: -@grid-medium-gutter-horizontal; }
136
137
  .uk-grid-medium > *,
137
138
  .uk-grid-column-medium > * { padding-left: @grid-medium-gutter-horizontal; }
138
139
 
139
- .uk-grid-medium,
140
- .uk-grid-row-medium { row-gap: @grid-medium-gutter-vertical; }
141
-
142
- /* Margin */
143
- .uk-grid + :where(.uk-grid-medium, .uk-grid-row-medium),
140
+ /* Vertical */
141
+ .uk-grid + .uk-grid-medium,
142
+ .uk-grid + .uk-grid-row-medium,
143
+ .uk-grid-medium > .uk-grid-margin,
144
+ .uk-grid-row-medium > .uk-grid-margin,
144
145
  * + .uk-grid-margin-medium { margin-top: @grid-medium-gutter-vertical; }
145
146
 
146
147
  /*
147
148
  * Large
148
149
  */
149
150
 
151
+ /* Horizontal */
150
152
  .uk-grid-large,
151
153
  .uk-grid-column-large { margin-left: -@grid-large-gutter-horizontal; }
152
154
  .uk-grid-large > *,
153
155
  .uk-grid-column-large > * { padding-left: @grid-large-gutter-horizontal; }
154
156
 
155
- .uk-grid-large,
156
- .uk-grid-row-large { row-gap: @grid-large-gutter-vertical; }
157
-
158
- /* Margin */
159
- .uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
157
+ /* Vertical */
158
+ .uk-grid + .uk-grid-large,
159
+ .uk-grid + .uk-grid-row-large,
160
+ .uk-grid-large > .uk-grid-margin,
161
+ .uk-grid-row-large > .uk-grid-margin,
160
162
  * + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical; }
161
163
 
162
164
  /* Desktop and bigger */
163
165
  @media (min-width: @breakpoint-large) {
164
166
 
167
+ /* Horizontal */
165
168
  .uk-grid-large,
166
169
  .uk-grid-column-large { margin-left: -@grid-large-gutter-horizontal-l; }
167
170
  .uk-grid-large > *,
168
171
  .uk-grid-column-large > * { padding-left: @grid-large-gutter-horizontal-l; }
169
172
 
170
- .uk-grid-large,
171
- .uk-grid-row-large { row-gap: @grid-large-gutter-vertical-l; }
172
-
173
- /* Margin */
174
- .uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
173
+ /* Vertical */
174
+ .uk-grid + .uk-grid-large,
175
+ .uk-grid + .uk-grid-row-large,
176
+ .uk-grid-large > .uk-grid-margin,
177
+ .uk-grid-row-large > .uk-grid-margin,
175
178
  * + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical-l; }
176
179
 
177
180
  }
@@ -180,16 +183,17 @@
180
183
  * Collapse
181
184
  */
182
185
 
186
+ /* Horizontal */
183
187
  .uk-grid-collapse,
184
188
  .uk-grid-column-collapse { margin-left: 0; }
185
189
  .uk-grid-collapse > *,
186
190
  .uk-grid-column-collapse > * { padding-left: 0; }
187
191
 
188
- .uk-grid-collapse,
189
- .uk-grid-row-collapse { row-gap: 0; }
190
-
191
- /* Margin */
192
- .uk-grid + :where(.uk-grid-collapse, .uk-grid-row-collapse) { margin-top: 0; }
192
+ /* Vertical */
193
+ .uk-grid + .uk-grid-collapse,
194
+ .uk-grid + .uk-grid-row-collapse,
195
+ .uk-grid-collapse > .uk-grid-margin,
196
+ .uk-grid-row-collapse > .uk-grid-margin { margin-top: 0; }
193
197
 
194
198
 
195
199
  /* Divider
@@ -197,7 +201,6 @@
197
201
 
198
202
  .uk-grid-divider > * { position: relative; }
199
203
 
200
- /* Horizontal */
201
204
  .uk-grid-divider > :not(.uk-first-column)::before {
202
205
  content: "";
203
206
  position: absolute;
@@ -208,7 +211,7 @@
208
211
  }
209
212
 
210
213
  /* Vertical */
211
- .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
214
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
212
215
  content: "";
213
216
  position: absolute;
214
217
  left: 0;
@@ -228,9 +231,9 @@
228
231
  .uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal; }
229
232
 
230
233
  /* Vertical */
231
- .uk-grid-divider.uk-grid-stack { row-gap: (@grid-gutter-vertical * 2); }
234
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical * 2); }
232
235
 
233
- .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
236
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
234
237
  top: -@grid-gutter-vertical;
235
238
  left: (@grid-gutter-horizontal * 2);
236
239
  }
@@ -245,9 +248,9 @@
245
248
  .uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal-l; }
246
249
 
247
250
  /* Vertical */
248
- .uk-grid-divider.uk-grid-stack { row-gap: (@grid-gutter-vertical-l * 2); }
251
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical-l * 2); }
249
252
 
250
- .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
253
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
251
254
  top: -@grid-gutter-vertical-l;
252
255
  left: (@grid-gutter-horizontal-l * 2);
253
256
  }
@@ -268,15 +271,16 @@
268
271
  .uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { left: @grid-small-gutter-horizontal; }
269
272
 
270
273
  /* Vertical */
271
- .uk-grid-divider.uk-grid-stack:where(.uk-grid-small, .uk-grid-row-small) { row-gap: (@grid-small-gutter-vertical * 2); }
274
+ .uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
275
+ .uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-small-gutter-vertical * 2); }
272
276
 
273
- .uk-grid-divider.uk-grid-stack.uk-grid-small > :not(.uk-first-row)::before {
277
+ .uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
274
278
  top: -@grid-small-gutter-vertical;
275
279
  left: (@grid-small-gutter-horizontal * 2);
276
280
  }
277
281
 
278
- .uk-grid-divider.uk-grid-stack.uk-grid-row-small > :not(.uk-first-row)::before { top: -@grid-small-gutter-vertical; }
279
- .uk-grid-divider.uk-grid-stack.uk-grid-column-small > :not(.uk-first-row)::before { left: (@grid-small-gutter-horizontal * 2); }
282
+ .uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: -@grid-small-gutter-vertical; }
283
+ .uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { left: (@grid-small-gutter-horizontal * 2); }
280
284
 
281
285
  /*
282
286
  * Medium
@@ -292,15 +296,16 @@
292
296
  .uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { left: @grid-medium-gutter-horizontal; }
293
297
 
294
298
  /* Vertical */
295
- .uk-grid-divider.uk-grid-stack:where(.uk-grid-medium, .uk-grid-row-medium) { row-gap: (@grid-medium-gutter-vertical * 2); }
299
+ .uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
300
+ .uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-medium-gutter-vertical * 2); }
296
301
 
297
- .uk-grid-divider.uk-grid-stack.uk-grid-medium > :not(.uk-first-row)::before {
302
+ .uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
298
303
  top: -@grid-medium-gutter-vertical;
299
304
  left: (@grid-medium-gutter-horizontal * 2);
300
305
  }
301
306
 
302
- .uk-grid-divider.uk-grid-stack.uk-grid-row-medium > :not(.uk-first-row)::before { top: -@grid-medium-gutter-vertical; }
303
- .uk-grid-divider.uk-grid-stack.uk-grid-column-medium > :not(.uk-first-row)::before { left: (@grid-medium-gutter-horizontal * 2); }
307
+ .uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: -@grid-medium-gutter-vertical; }
308
+ .uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { left: (@grid-medium-gutter-horizontal * 2); }
304
309
 
305
310
  /*
306
311
  * Large
@@ -316,15 +321,16 @@
316
321
  .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal; }
317
322
 
318
323
  /* Vertical */
319
- .uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: (@grid-large-gutter-vertical * 2); }
324
+ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
325
+ .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical * 2); }
320
326
 
321
- .uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
327
+ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
322
328
  top: -@grid-large-gutter-vertical;
323
329
  left: (@grid-large-gutter-horizontal * 2);
324
330
  }
325
331
 
326
- .uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: -@grid-large-gutter-vertical; }
327
- .uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: (@grid-large-gutter-horizontal * 2); }
332
+ .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical; }
333
+ .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: (@grid-large-gutter-horizontal * 2); }
328
334
 
329
335
  /* Desktop and bigger */
330
336
  @media (min-width: @breakpoint-large) {
@@ -339,15 +345,16 @@
339
345
  .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal-l; }
340
346
 
341
347
  /* Vertical */
342
- .uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: (@grid-large-gutter-vertical-l * 2); }
348
+ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
349
+ .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical-l * 2); }
343
350
 
344
- .uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
351
+ .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
345
352
  top: -@grid-large-gutter-vertical-l;
346
353
  left: (@grid-large-gutter-horizontal-l * 2);
347
354
  }
348
355
 
349
- .uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: -@grid-large-gutter-vertical-l; }
350
- .uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: (@grid-large-gutter-horizontal-l * 2); }
356
+ .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical-l; }
357
+ .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: (@grid-large-gutter-horizontal-l * 2); }
351
358
 
352
359
  }
353
360
 
@@ -401,7 +408,7 @@
401
408
  .hook-inverse-grid-divider-horizontal();
402
409
  }
403
410
 
404
- .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
411
+ .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
405
412
  border-top-color: @inverse-grid-divider-border;
406
413
  .hook-inverse-grid-divider-vertical();
407
414
  }