@broxus/react-uikit 0.23.3 → 0.24.1

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 (319) hide show
  1. package/README.md +328 -1
  2. package/dist/assets/accordion.css +1 -4
  3. package/dist/assets/alert.css +28 -1
  4. package/dist/assets/align.css +5 -5
  5. package/dist/assets/animation.css +1 -1
  6. package/dist/assets/article.css +2 -3
  7. package/dist/assets/background.css +5 -5
  8. package/dist/assets/badge.css +1 -4
  9. package/dist/assets/base.css +2 -12
  10. package/dist/assets/breadcrumb.css +1 -5
  11. package/dist/assets/button.css +12 -37
  12. package/dist/assets/card.css +3 -5
  13. package/dist/assets/checkbox.css +1 -1
  14. package/dist/assets/close.css +1 -3
  15. package/dist/assets/column.css +7 -8
  16. package/dist/assets/comment.css +2 -2
  17. package/dist/assets/container.css +7 -7
  18. package/dist/assets/control.css +1 -16
  19. package/dist/assets/cover.css +1 -1
  20. package/dist/assets/custom-media.css +15 -0
  21. package/dist/assets/datepicker.css +5 -3
  22. package/dist/assets/description-list.css +1 -2
  23. package/dist/assets/divider.css +2 -5
  24. package/dist/assets/dotnav.css +1 -5
  25. package/dist/assets/drawer.css +1 -1
  26. package/dist/assets/drop.css +1 -1
  27. package/dist/assets/dropdown.css +1 -9
  28. package/dist/assets/flex.css +9 -9
  29. package/dist/assets/form.css +3 -11
  30. package/dist/assets/grid.css +7 -8
  31. package/dist/assets/heading.css +3 -6
  32. package/dist/assets/height.css +1 -1
  33. package/dist/assets/icon.css +1 -10
  34. package/dist/assets/iconnav.css +1 -4
  35. package/dist/assets/input-number.css +1 -1
  36. package/dist/assets/input-password.css +1 -1
  37. package/dist/assets/inverse.css +1 -1
  38. package/dist/assets/label.css +1 -3
  39. package/dist/assets/leader.css +1 -1
  40. package/dist/assets/link.css +1 -5
  41. package/dist/assets/list.css +1 -8
  42. package/dist/assets/margin.css +11 -11
  43. package/dist/assets/marker.css +1 -4
  44. package/dist/assets/modal.css +4 -4
  45. package/dist/assets/motion.css +3 -2
  46. package/dist/assets/nav.css +1 -18
  47. package/dist/assets/navbar.css +5 -23
  48. package/dist/assets/overlay.css +1 -1
  49. package/dist/assets/padding.css +3 -3
  50. package/dist/assets/pagination.css +1 -5
  51. package/dist/assets/placeholder.css +1 -1
  52. package/dist/assets/position.css +2 -2
  53. package/dist/assets/print.css +4 -4
  54. package/dist/assets/progress.css +1 -1
  55. package/dist/assets/radio.css +1 -1
  56. package/dist/assets/search.css +1 -10
  57. package/dist/assets/section.css +4 -4
  58. package/dist/assets/segmented.css +1 -1
  59. package/dist/assets/select.css +3 -5
  60. package/dist/assets/slider.css +1 -1
  61. package/dist/assets/spinner.css +1 -1
  62. package/dist/assets/sticky.css +1 -1
  63. package/dist/assets/subnav.css +1 -14
  64. package/dist/assets/svg.css +1 -1
  65. package/dist/assets/switch.css +1 -1
  66. package/dist/assets/table.css +2 -8
  67. package/dist/assets/tabs.css +1 -6
  68. package/dist/assets/text.css +5 -12
  69. package/dist/assets/textarea.css +1 -1
  70. package/dist/assets/thumbnav.css +1 -1
  71. package/dist/assets/tile.css +5 -5
  72. package/dist/assets/tooltip.css +1 -1
  73. package/dist/assets/totop.css +1 -4
  74. package/dist/assets/transition.css +1 -1
  75. package/dist/assets/uikit.min.css +1 -1
  76. package/dist/assets/utility.css +1 -3
  77. package/dist/assets/vars.css +72 -4
  78. package/dist/assets/visibility.css +9 -9
  79. package/dist/assets/width.css +9 -9
  80. package/dist/esm/components/Navbar/Nav.d.ts +1 -1
  81. package/package.json +321 -18
  82. package/styles/_components.scss +85 -0
  83. package/styles/_globals.scss +151 -0
  84. package/styles/_import.components.scss +508 -58
  85. package/styles/_import.scss +608 -83
  86. package/styles/_import.utilities.scss +162 -17
  87. package/styles/_mixins.scss +1865 -0
  88. package/styles/_tokens.scss +85 -0
  89. package/styles/{mixin.scss → _utils.scss} +8 -2
  90. package/styles/{variables.scss → _variables.scss} +41 -27
  91. package/styles/accordion/_accordion.scss +231 -0
  92. package/styles/accordion/_index.scss +11 -0
  93. package/styles/alert/_alert.scss +201 -0
  94. package/styles/alert/_index.scss +11 -0
  95. package/styles/align/_align.scss +153 -0
  96. package/styles/align/_index.scss +11 -0
  97. package/styles/animation/_animation.scss +353 -0
  98. package/styles/animation/_index.scss +11 -0
  99. package/styles/article/_article.scss +112 -0
  100. package/styles/article/_index.scss +11 -0
  101. package/styles/background/_background.scss +170 -0
  102. package/styles/background/_index.scss +11 -0
  103. package/styles/badge/_badge.scss +92 -0
  104. package/styles/badge/_index.scss +11 -0
  105. package/styles/base/_base.scss +661 -0
  106. package/styles/base/_index.scss +11 -0
  107. package/styles/breadcrumb/_breadcrumb.scss +133 -0
  108. package/styles/breadcrumb/_index.scss +11 -0
  109. package/styles/button/_button.scss +707 -0
  110. package/styles/button/_index.scss +11 -0
  111. package/styles/card/_card.scss +544 -0
  112. package/styles/card/_index.scss +11 -0
  113. package/styles/checkbox/_checkbox.scss +329 -0
  114. package/styles/checkbox/_index.scss +11 -0
  115. package/styles/close/_close.scss +69 -0
  116. package/styles/close/_index.scss +11 -0
  117. package/styles/column/_column.scss +159 -0
  118. package/styles/column/_index.scss +11 -0
  119. package/styles/comment/_comment.scss +195 -0
  120. package/styles/comment/_index.scss +11 -0
  121. package/styles/container/_container.scss +240 -0
  122. package/styles/container/_index.scss +11 -0
  123. package/styles/control/_control.scss +364 -0
  124. package/styles/control/_index.scss +11 -0
  125. package/styles/cover/_cover.scss +99 -0
  126. package/styles/cover/_index.scss +8 -0
  127. package/styles/custom-media.scss +17 -0
  128. package/styles/datepicker/_datepicker.scss +841 -0
  129. package/styles/datepicker/_index.scss +11 -0
  130. package/styles/description-list/_description-list.scss +96 -0
  131. package/styles/description-list/_index.scss +11 -0
  132. package/styles/divider/_divider.scss +168 -0
  133. package/styles/divider/_index.scss +11 -0
  134. package/styles/dotnav/_dotnav.scss +171 -0
  135. package/styles/dotnav/_index.scss +11 -0
  136. package/styles/drawer/_drawer.scss +588 -0
  137. package/styles/drawer/_index.scss +11 -0
  138. package/styles/drop/_drop.scss +97 -0
  139. package/styles/drop/_index.scss +11 -0
  140. package/styles/dropdown/_dropdown.scss +218 -0
  141. package/styles/dropdown/_index.scss +11 -0
  142. package/styles/flex/_flex.scss +338 -0
  143. package/styles/flex/_index.scss +8 -0
  144. package/styles/form/_form.scss +665 -0
  145. package/styles/form/_index.scss +11 -0
  146. package/styles/grid/_grid.scss +657 -0
  147. package/styles/grid/_index.scss +11 -0
  148. package/styles/heading/_heading.scss +265 -0
  149. package/styles/heading/_index.scss +11 -0
  150. package/styles/height/_height.scss +77 -0
  151. package/styles/height/_index.scss +11 -0
  152. package/styles/icon/_icon.scss +274 -0
  153. package/styles/icon/_index.scss +11 -0
  154. package/styles/iconnav/_iconnav.scss +149 -0
  155. package/styles/iconnav/_index.scss +11 -0
  156. package/styles/input-number/_index.scss +8 -0
  157. package/styles/input-number/_input-number.scss +115 -0
  158. package/styles/input-password/_index.scss +8 -0
  159. package/styles/input-password/_input-password.scss +52 -0
  160. package/styles/inverse/_index.scss +11 -0
  161. package/styles/inverse/_inverse.scss +68 -0
  162. package/styles/label/_index.scss +11 -0
  163. package/styles/label/_label.scss +132 -0
  164. package/styles/leader/_index.scss +11 -0
  165. package/styles/leader/_leader.scss +80 -0
  166. package/styles/link/_index.scss +11 -0
  167. package/styles/link/_link.scss +158 -0
  168. package/styles/list/_index.scss +11 -0
  169. package/styles/list/_list.scss +288 -0
  170. package/styles/margin/_index.scss +11 -0
  171. package/styles/margin/_margin.scss +312 -0
  172. package/styles/marker/_index.scss +11 -0
  173. package/styles/marker/_marker.scss +73 -0
  174. package/styles/modal/_index.scss +11 -0
  175. package/styles/modal/_modal.scss +374 -0
  176. package/styles/motion/_index.scss +8 -0
  177. package/styles/motion/_motion.scss +640 -0
  178. package/styles/nav/_index.scss +11 -0
  179. package/styles/nav/_nav.scss +583 -0
  180. package/styles/navbar/_index.scss +11 -0
  181. package/styles/navbar/_navbar.scss +694 -0
  182. package/styles/overlay/_index.scss +11 -0
  183. package/styles/overlay/_overlay.scss +115 -0
  184. package/styles/padding/_index.scss +11 -0
  185. package/styles/padding/_padding.scss +93 -0
  186. package/styles/pagination/_index.scss +11 -0
  187. package/styles/pagination/_pagination.scss +149 -0
  188. package/styles/placeholder/_index.scss +11 -0
  189. package/styles/placeholder/_placeholder.scss +60 -0
  190. package/styles/position/_index.scss +11 -0
  191. package/styles/position/_position.scss +257 -0
  192. package/styles/print.scss +8 -5
  193. package/styles/progress/_index.scss +11 -0
  194. package/styles/progress/_progress.scss +131 -0
  195. package/styles/radio/_index.scss +11 -0
  196. package/styles/radio/_radio.scss +272 -0
  197. package/styles/search/_index.scss +11 -0
  198. package/styles/search/_search.scss +353 -0
  199. package/styles/section/_index.scss +11 -0
  200. package/styles/section/_section.scss +293 -0
  201. package/styles/segmented/_index.scss +11 -0
  202. package/styles/segmented/_segmented.scss +275 -0
  203. package/styles/select/_index.scss +11 -0
  204. package/styles/select/_select.scss +639 -0
  205. package/styles/slider/_index.scss +11 -0
  206. package/styles/slider/_slider.scss +525 -0
  207. package/styles/spinner/_index.scss +11 -0
  208. package/styles/spinner/_spinner.scss +90 -0
  209. package/styles/sticky/_index.scss +11 -0
  210. package/styles/sticky/_sticky.scss +66 -0
  211. package/styles/subnav/_index.scss +11 -0
  212. package/styles/subnav/_subnav.scss +267 -0
  213. package/styles/svg/_index.scss +8 -0
  214. package/styles/svg/_svg.scss +64 -0
  215. package/styles/switch/_index.scss +11 -0
  216. package/styles/switch/_switch.scss +226 -0
  217. package/styles/table/_index.scss +11 -0
  218. package/styles/table/_table.scss +337 -0
  219. package/styles/tabs/_index.scss +11 -0
  220. package/styles/tabs/_tabs.scss +809 -0
  221. package/styles/text/_index.scss +11 -0
  222. package/styles/text/_text.scss +432 -0
  223. package/styles/textarea/_index.scss +11 -0
  224. package/styles/textarea/_textarea.scss +98 -0
  225. package/styles/thumbnav/_index.scss +11 -0
  226. package/styles/thumbnav/_thumbnav.scss +130 -0
  227. package/styles/tile/_index.scss +11 -0
  228. package/styles/tile/_tile.scss +313 -0
  229. package/styles/tooltip/_index.scss +11 -0
  230. package/styles/tooltip/_tooltip.scss +101 -0
  231. package/styles/totop/_index.scss +11 -0
  232. package/styles/totop/_totop.scss +80 -0
  233. package/styles/transition/_index.scss +11 -0
  234. package/styles/transition/_transition.scss +197 -0
  235. package/styles/utility/_index.scss +11 -0
  236. package/styles/utility/_utility.scss +642 -0
  237. package/styles/vars.scss +474 -139
  238. package/styles/visibility/_index.scss +8 -0
  239. package/styles/visibility/_visibility.scss +196 -0
  240. package/styles/width/_index.scss +11 -0
  241. package/styles/width/_width.scss +698 -0
  242. package/dist/assets/mixin.css +0 -1
  243. package/dist/assets/mixins.css +0 -1
  244. package/dist/assets/variables.css +0 -1
  245. package/styles/accordion.scss +0 -224
  246. package/styles/alert.scss +0 -197
  247. package/styles/align.scss +0 -149
  248. package/styles/animation.scss +0 -349
  249. package/styles/article.scss +0 -105
  250. package/styles/background.scss +0 -167
  251. package/styles/badge.scss +0 -85
  252. package/styles/base.scss +0 -656
  253. package/styles/breadcrumb.scss +0 -126
  254. package/styles/button.scss +0 -700
  255. package/styles/card.scss +0 -534
  256. package/styles/checkbox.scss +0 -325
  257. package/styles/close.scss +0 -62
  258. package/styles/column.scss +0 -152
  259. package/styles/comment.scss +0 -191
  260. package/styles/container.scss +0 -236
  261. package/styles/control.scss +0 -357
  262. package/styles/cover.scss +0 -81
  263. package/styles/datepicker.scss +0 -834
  264. package/styles/description-list.scss +0 -89
  265. package/styles/divider.scss +0 -161
  266. package/styles/dotnav.scss +0 -164
  267. package/styles/drawer.scss +0 -584
  268. package/styles/drop.scss +0 -93
  269. package/styles/dropdown.scss +0 -207
  270. package/styles/flex.scss +0 -326
  271. package/styles/form.scss +0 -658
  272. package/styles/grid.scss +0 -650
  273. package/styles/heading.scss +0 -258
  274. package/styles/height.scss +0 -73
  275. package/styles/icon.scss +0 -267
  276. package/styles/iconnav.scss +0 -142
  277. package/styles/input-number.scss +0 -98
  278. package/styles/input-password.scss +0 -35
  279. package/styles/inverse.scss +0 -65
  280. package/styles/label.scss +0 -125
  281. package/styles/leader.scss +0 -76
  282. package/styles/link.scss +0 -151
  283. package/styles/list.scss +0 -281
  284. package/styles/margin.scss +0 -308
  285. package/styles/marker.scss +0 -66
  286. package/styles/mixins.scss +0 -2555
  287. package/styles/modal.scss +0 -370
  288. package/styles/motion.scss +0 -627
  289. package/styles/nav.scss +0 -576
  290. package/styles/navbar.scss +0 -682
  291. package/styles/overlay.scss +0 -107
  292. package/styles/padding.scss +0 -89
  293. package/styles/pagination.scss +0 -142
  294. package/styles/placeholder.scss +0 -56
  295. package/styles/position.scss +0 -253
  296. package/styles/progress.scss +0 -127
  297. package/styles/radio.scss +0 -268
  298. package/styles/search.scss +0 -346
  299. package/styles/section.scss +0 -285
  300. package/styles/segmented.scss +0 -271
  301. package/styles/select.scss +0 -644
  302. package/styles/slider.scss +0 -521
  303. package/styles/spinner.scss +0 -86
  304. package/styles/sticky.scss +0 -62
  305. package/styles/subnav.scss +0 -260
  306. package/styles/svg.scss +0 -46
  307. package/styles/switch.scss +0 -218
  308. package/styles/table.scss +0 -330
  309. package/styles/tabs.scss +0 -802
  310. package/styles/text.scss +0 -425
  311. package/styles/textarea.scss +0 -94
  312. package/styles/thumbnav.scss +0 -126
  313. package/styles/tile.scss +0 -309
  314. package/styles/tooltip.scss +0 -94
  315. package/styles/totop.scss +0 -73
  316. package/styles/transition.scss +0 -193
  317. package/styles/utility.scss +0 -635
  318. package/styles/visibility.scss +0 -184
  319. package/styles/width.scss +0 -694
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  /* Desktop and bigger */
9
- @media (min-width: 1200px) {
9
+ @media (--media-breakpoint-large) {
10
10
  [class*=uk-column-] {
11
11
  column-gap: var(--column-gutter-l);
12
12
  }
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  /* Desktop and bigger */
33
- @media (min-width: 1200px) {
33
+ @media (--media-breakpoint-large) {
34
34
  .uk-column-divider {
35
35
  column-gap: calc(var(--column-gutter-l) * 2);
36
36
  }
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  /* Phone landscape and bigger */
61
- @media (min-width: 640px) {
61
+ @media (--media-breakpoint-small) {
62
62
  .uk-column-1-2\@s {
63
63
  column-count: 2;
64
64
  }
@@ -76,7 +76,7 @@
76
76
  }
77
77
  }
78
78
  /* Tablet landscape and bigger */
79
- @media (min-width: 960px) {
79
+ @media (--media-breakpoint-medium) {
80
80
  .uk-column-1-2\@m {
81
81
  column-count: 2;
82
82
  }
@@ -94,7 +94,7 @@
94
94
  }
95
95
  }
96
96
  /* Desktop and bigger */
97
- @media (min-width: 1200px) {
97
+ @media (--media-breakpoint-large) {
98
98
  .uk-column-1-2\@l {
99
99
  column-count: 2;
100
100
  }
@@ -112,7 +112,7 @@
112
112
  }
113
113
  }
114
114
  /* Large screen and bigger */
115
- @media (min-width: 1600px) {
115
+ @media (--media-breakpoint-xlarge) {
116
116
  .uk-column-1-2\@xl {
117
117
  column-count: 2;
118
118
  }
@@ -141,5 +141,4 @@
141
141
  --column-gutter-l: var(--global-medium-gutter);
142
142
  --column-divider-rule-color: var(--global-border);
143
143
  --column-divider-rule-width: 1px;
144
- --inverse-column-divider-rule-color: var(--inverse-global-border);
145
- }
144
+ }
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  /* Tablet and bigger */
65
- @media (min-width: 960px) {
65
+ @media (--media-breakpoint-medium) {
66
66
  .uk-comment-list .uk-comment ~ ul {
67
67
  padding-left: var(--comment-list-padding-left-m);
68
68
  }
@@ -84,4 +84,4 @@
84
84
  --comment-list-margin-top: var(--global-large-margin);
85
85
  --comment-list-padding-left: 30px;
86
86
  --comment-list-padding-left-m: 100px;
87
- }
87
+ }
@@ -17,14 +17,14 @@
17
17
  }
18
18
 
19
19
  /* Phone landscape and bigger */
20
- @media (min-width: 640px) {
20
+ @media (--media-breakpoint-small) {
21
21
  .uk-container {
22
22
  padding-left: var(--container-padding-horizontal-s);
23
23
  padding-right: var(--container-padding-horizontal-s);
24
24
  }
25
25
  }
26
26
  /* Tablet landscape and bigger */
27
- @media (min-width: 960px) {
27
+ @media (--media-breakpoint-medium) {
28
28
  .uk-container {
29
29
  padding-left: var(--container-padding-horizontal-m);
30
30
  padding-right: var(--container-padding-horizontal-m);
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  /* Phone landscape and bigger */
84
- @media (min-width: 640px) {
84
+ @media (--media-breakpoint-small) {
85
85
  .uk-container-expand-left.uk-container-xsmall,
86
86
  .uk-container-expand-right.uk-container-xsmall {
87
87
  max-width: calc(50% + var(--container-xsmall-max-width) / 2 - var(--container-padding-horizontal-s));
@@ -92,7 +92,7 @@
92
92
  }
93
93
  }
94
94
  /* Tablet landscape and bigger */
95
- @media (min-width: 960px) {
95
+ @media (--media-breakpoint-medium) {
96
96
  .uk-container-expand-left,
97
97
  .uk-container-expand-right {
98
98
  max-width: calc(50% + var(--container-max-width) / 2 - var(--container-padding-horizontal-m));
@@ -134,7 +134,7 @@
134
134
  }
135
135
 
136
136
  /* Phone landscape and bigger */
137
- @media (min-width: 640px) {
137
+ @media (--media-breakpoint-small) {
138
138
  .uk-container-item-padding-remove-left,
139
139
  .uk-container-item-padding-remove-right {
140
140
  width: calc(100% + var(--container-padding-horizontal-s));
@@ -147,7 +147,7 @@
147
147
  }
148
148
  }
149
149
  /* Tablet landscape and bigger */
150
- @media (min-width: 960px) {
150
+ @media (--media-breakpoint-medium) {
151
151
  .uk-container-item-padding-remove-left,
152
152
  .uk-container-item-padding-remove-right {
153
153
  width: calc(100% + var(--container-padding-horizontal-m));
@@ -168,4 +168,4 @@
168
168
  --container-padding-horizontal: 15px;
169
169
  --container-padding-horizontal-s: var(--global-gutter);
170
170
  --container-padding-horizontal-m: var(--global-medium-gutter);
171
- }
171
+ }
@@ -244,19 +244,4 @@ body:not([dir]) .uk-control:not(.uk-control-rtl) .uk-control-suffix,
244
244
  --control-affix-margin: var(--global-small-margin);
245
245
  --control-icon-color: var(--global-muted-color);
246
246
  --control-icon-hover-color: var(--global-color);
247
- --inverse-control-background: rgba(102, 102, 102, 0.1);
248
- --inverse-control-border: var(--inverse-global-border);
249
- --inverse-control-color: var(--inverse-global-color);
250
- --inverse-control-hover-background: rgba(76.5, 76.5, 76.5, 0.1);
251
- --inverse-control-hover-border: rgba(244.8, 244.8, 244.8, 0.2);
252
- --inverse-control-hover-color: var(--inverse-global-color);
253
- --inverse-control-focus-background: rgba(76.5, 76.5, 76.5, 0.1);
254
- --inverse-control-focus-border: var(--inverse-control-hover-border);
255
- --inverse-control-focus-color: var(--inverse-global-color);
256
- --inverse-control-disabled-background: rgba(178.5, 178.5, 178.5, 0.1);
257
- --inverse-control-disabled-border: rgba(244.8, 244.8, 244.8, 0.2);
258
- --inverse-control-disabled-color: var(--inverse-global-color);
259
- --inverse-control-placeholder-color: var(--inverse-global-muted-color);
260
- --inverse-control-icon-color: var(--inverse-global-muted-color);
261
- --inverse-control-icon-hover-color: var(--inverse-global-color);
262
- }
247
+ }
@@ -52,4 +52,4 @@ iframe[data-uk-cover] {
52
52
  overflow: hidden;
53
53
  /* 2 */
54
54
  position: relative;
55
- }
55
+ }
@@ -0,0 +1,15 @@
1
+ @custom-media --media-breakpoint-2xsmall (width >= 320px);
2
+ @custom-media --media-breakpoint-xsmall (width >= 480px);
3
+ @custom-media --media-breakpoint-small (width >= 640px);
4
+ @custom-media --media-breakpoint-medium (width >= 960px);
5
+ @custom-media --media-breakpoint-large (width >= 1200px);
6
+ @custom-media --media-breakpoint-xlarge (width >= 1600px);
7
+ @custom-media --media-breakpoint-2xlarge (width >= 2560px);
8
+ @custom-media --media-breakpoint-3xlarge (width >= 3440px);
9
+ @custom-media --media-breakpoint-2xsmall-max (width < 319px);
10
+ @custom-media --media-breakpoint-xsmall-max (width < 639px);
11
+ @custom-media --media-breakpoint-small-max (width < 959px);
12
+ @custom-media --media-breakpoint-medium-max (width < 1199px);
13
+ @custom-media --media-breakpoint-large-max (width < 1599px);
14
+ @custom-media --media-breakpoint-xlarge-max (width < 2559px);
15
+ @custom-media --media-breakpoint-2xlarge-max (width < 3439px);
@@ -1,4 +1,5 @@
1
- /* Picker
1
+ /* ========================================================================
2
+ Component: Picker
2
3
  ========================================================================== */
3
4
  [class^=uk-datepicker],
4
5
  [class*=" uk-datepicker"],
@@ -575,7 +576,7 @@
575
576
  padding: var(--datepicker-gutter);
576
577
  position: absolute;
577
578
  top: -9999px;
578
- z-index: calc(var(--global-z-index) + 30);
579
+ z-index: var(--datepicker-dropdown-z-index);
579
580
  }
580
581
 
581
582
  .uk-datepicker-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
@@ -659,4 +660,5 @@
659
660
  --datepicker-dropdown-border: var(--global-border);
660
661
  --datepicker-dropdown-border-style: var(--global-border-style);
661
662
  --datepicker-dropdown-border-width: var(--global-border-width);
662
- }
663
+ --datepicker-dropdown-z-index: 1030;
664
+ }
@@ -35,5 +35,4 @@
35
35
  --description-list-divider-term-margin-top: var(--global-margin);
36
36
  --description-list-divider-term-border-width: var(--global-border-width);
37
37
  --description-list-divider-term-border: var(--global-border);
38
- --inverse-description-list-term-color: var(--inverse-global-emphasis-color);
39
- }
38
+ }
@@ -24,6 +24,7 @@
24
24
  background-repeat: no-repeat;
25
25
  height: var(--divider-icon-height);
26
26
  position: relative;
27
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgb(222.13, 222.13, 222.13)%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
27
28
  }
28
29
 
29
30
  .uk-divider-icon::before,
@@ -91,8 +92,4 @@
91
92
  --divider-vertical-height: 100px;
92
93
  --divider-vertical-border-width: var(--global-border-width);
93
94
  --divider-vertical-border: var(--global-border);
94
- --inverse-divider-icon-color: var(--inverse-global-border);
95
- --inverse-divider-icon-line-border: var(--inverse-global-border);
96
- --inverse-divider-small-border: var(--inverse-global-border);
97
- --inverse-divider-vertical-border: var(--inverse-global-border);
98
- }
95
+ }
@@ -93,8 +93,4 @@
93
93
  --dotnav-item-hover-background: rgba(102, 102, 102, 0.6);
94
94
  --dotnav-item-onclick-background: rgba(102, 102, 102, 0.2);
95
95
  --dotnav-item-active-background: rgba(102, 102, 102, 0.6);
96
- --inverse-dotnav-item-background: rgba(255, 255, 255, 0.5);
97
- --inverse-dotnav-item-hover-background: rgba(255, 255, 255, 0.9);
98
- --inverse-dotnav-item-onclick-background: rgba(255, 255, 255, 0.5);
99
- --inverse-dotnav-item-active-background: rgba(255, 255, 255, 0.9);
100
- }
96
+ }
@@ -559,4 +559,4 @@
559
559
  --drawer-transition-duration: var(--transition-medium-fast-duration);
560
560
  --drawer-close-position: var(--global-small-margin);
561
561
  --drawer-close-padding: 5px;
562
- }
562
+ }
@@ -44,4 +44,4 @@
44
44
  --drop-margin: var(--global-margin);
45
45
  --drop-width: 300px;
46
46
  --drop-z-index: calc(var(--global-z-index) + 20);
47
- }
47
+ }
@@ -107,12 +107,4 @@
107
107
  --dropdown-nav-divider-border: var(--global-border);
108
108
  --dropdown-nav-sublist-item-color: var(--global-muted-color);
109
109
  --dropdown-nav-sublist-item-hover-color: var(--global-color);
110
- --inverse-dropdown-background: var(--inverse-global-muted-background);
111
- --inverse-dropdown-color: var(--inverse-global-color);
112
- --inverse-dropdown-nav-item-color: var(--inverse-global-muted-color);
113
- --inverse-dropdown-nav-item-hover-color: var(--inverse-global-color);
114
- --inverse-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
115
- --inverse-dropdown-nav-divider-border: var(--inverse-global-border);
116
- --inverse-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
117
- --inverse-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
118
- }
110
+ }
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  /* Phone landscape and bigger */
49
- @media (min-width: 640px) {
49
+ @media (--media-breakpoint-small) {
50
50
  .uk-flex-left\@s {
51
51
  justify-content: flex-start;
52
52
  }
@@ -64,7 +64,7 @@
64
64
  }
65
65
  }
66
66
  /* Tablet landscape and bigger */
67
- @media (min-width: 960px) {
67
+ @media (--media-breakpoint-medium) {
68
68
  .uk-flex-left\@m {
69
69
  justify-content: flex-start;
70
70
  }
@@ -82,7 +82,7 @@
82
82
  }
83
83
  }
84
84
  /* Desktop and bigger */
85
- @media (min-width: 1200px) {
85
+ @media (--media-breakpoint-large) {
86
86
  .uk-flex-left\@l {
87
87
  justify-content: flex-start;
88
88
  }
@@ -100,7 +100,7 @@
100
100
  }
101
101
  }
102
102
  /* Large screen and bigger */
103
- @media (min-width: 1600px) {
103
+ @media (--media-breakpoint-xlarge) {
104
104
  .uk-flex-left\@xl {
105
105
  justify-content: flex-start;
106
106
  }
@@ -211,7 +211,7 @@
211
211
  }
212
212
 
213
213
  /* Phone landscape and bigger */
214
- @media (min-width: 640px) {
214
+ @media (--media-breakpoint-small) {
215
215
  .uk-flex-first\@s {
216
216
  order: -1;
217
217
  }
@@ -247,7 +247,7 @@
247
247
  }
248
248
  }
249
249
  /* Tablet landscape and bigger */
250
- @media (min-width: 960px) {
250
+ @media (--media-breakpoint-medium) {
251
251
  .uk-flex-first\@m {
252
252
  order: -1;
253
253
  }
@@ -283,7 +283,7 @@
283
283
  }
284
284
  }
285
285
  /* Desktop and bigger */
286
- @media (min-width: 1200px) {
286
+ @media (--media-breakpoint-large) {
287
287
  .uk-flex-first\@l {
288
288
  order: -1;
289
289
  }
@@ -319,7 +319,7 @@
319
319
  }
320
320
  }
321
321
  /* Large screen and bigger */
322
- @media (min-width: 1600px) {
322
+ @media (--media-breakpoint-xlarge) {
323
323
  .uk-flex-first\@xl {
324
324
  order: -1;
325
325
  }
@@ -389,4 +389,4 @@
389
389
  */
390
390
  .uk-flex-fill {
391
391
  flex: 1 0 auto;
392
- }
392
+ }
@@ -375,7 +375,7 @@ input.uk-form-width-xsmall {
375
375
  * Horizontal
376
376
  */
377
377
  /* Tablet portrait and smaller */
378
- @media (max-width: 959px) {
378
+ @media (--media-breakpoint-small-max) {
379
379
  /* Behave like `uk-form-stacked` */
380
380
  .uk-form-horizontal .uk-form-label {
381
381
  display: block;
@@ -383,7 +383,7 @@ input.uk-form-width-xsmall {
383
383
  }
384
384
  }
385
385
  /* Tablet landscape and bigger */
386
- @media (min-width: 960px) {
386
+ @media (--media-breakpoint-medium) {
387
387
  .uk-form-horizontal .uk-form-label {
388
388
  float: left;
389
389
  margin-top: var(--form-horizontal-label-margin-top);
@@ -475,12 +475,4 @@ input.uk-form-width-xsmall {
475
475
  --form-icon-width: var(--form-height);
476
476
  --form-icon-color: var(--global-muted-color);
477
477
  --form-icon-hover-color: var(--global-color);
478
- --inverse-form-background: var(--inverse-global-muted-background);
479
- --inverse-form-color: var(--inverse-global-color);
480
- --inverse-form-focus-background: var(--inverse-global-muted-background);
481
- --inverse-form-focus-color: var(--inverse-global-color);
482
- --inverse-form-placeholder-color: var(--inverse-global-muted-color);
483
- --inverse-form-datalist-icon-color: var(--inverse-global-color);
484
- --inverse-form-icon-color: var(--inverse-global-muted-color);
485
- --inverse-form-icon-hover-color: var(--inverse-global-color);
486
- }
478
+ }
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  /* Phones portrait and smaller */
54
- @media (max-width: 639px) {
54
+ @media (--media-breakpoint-xsmall-max) {
55
55
  /* Horizontal */
56
56
  .uk-grid {
57
57
  margin-left: calc(var(--grid-gutter-horizontal-s) * -1);
@@ -67,7 +67,7 @@
67
67
  }
68
68
  }
69
69
  /* Tablet landscape and bigger */
70
- @media (min-width: 960px) {
70
+ @media (--media-breakpoint-medium) {
71
71
  /* Horizontal */
72
72
  .uk-grid {
73
73
  margin-left: calc(var(--grid-gutter-horizontal-m) * -1);
@@ -83,7 +83,7 @@
83
83
  }
84
84
  }
85
85
  /* Desktop and bigger */
86
- @media (min-width: 1200px) {
86
+ @media (--media-breakpoint-large) {
87
87
  /* Horizontal */
88
88
  .uk-grid {
89
89
  margin-left: calc(var(--grid-gutter-horizontal-l) * -1);
@@ -203,7 +203,7 @@
203
203
  }
204
204
 
205
205
  /* Desktop and bigger */
206
- @media (min-width: 1200px) {
206
+ @media (--media-breakpoint-large) {
207
207
  /* Horizontal */
208
208
  .uk-grid-large,
209
209
  .uk-grid-column-large {
@@ -317,7 +317,7 @@
317
317
  }
318
318
 
319
319
  /* Desktop and bigger */
320
- @media (min-width: 1200px) {
320
+ @media (--media-breakpoint-large) {
321
321
  /* Horizontal */
322
322
  .uk-grid-divider {
323
323
  margin-left: calc(var(--grid-gutter-horizontal-l) * -2);
@@ -490,7 +490,7 @@
490
490
  }
491
491
 
492
492
  /* Desktop and bigger */
493
- @media (min-width: 1200px) {
493
+ @media (--media-breakpoint-large) {
494
494
  /* Horizontal */
495
495
  .uk-grid-divider.uk-grid-large,
496
496
  .uk-grid-divider.uk-grid-column-large {
@@ -541,5 +541,4 @@
541
541
  --grid-large-gutter-vertical-l: var(--grid-large-gutter-horizontal-l);
542
542
  --grid-divider-border-width: var(--global-border-width);
543
543
  --grid-divider-border: var(--global-border);
544
- --inverse-grid-divider-border: var(--inverse-global-border);
545
- }
544
+ }
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  /* Tablet Landscape and bigger */
30
- @media (min-width: 960px) {
30
+ @media (--media-breakpoint-medium) {
31
31
  .uk-heading-small {
32
32
  font-size: var(--heading-small-font-size-m);
33
33
  }
@@ -45,7 +45,7 @@
45
45
  }
46
46
  }
47
47
  /* Laptop and bigger */
48
- @media (min-width: 1200px) {
48
+ @media (--media-breakpoint-large) {
49
49
  .uk-heading-medium {
50
50
  font-size: var(--heading-medium-font-size-l);
51
51
  }
@@ -169,7 +169,4 @@
169
169
  --heading-line-border-width: calc(0.2px + 0.05em);
170
170
  --heading-line-border: var(--global-border);
171
171
  --heading-line-margin-horizontal: calc(5px + 0.3em);
172
- --inverse-heading-divider-border: var(--inverse-global-border);
173
- --inverse-heading-bullet-border: var(--inverse-global-border);
174
- --inverse-heading-line-border: var(--inverse-global-border);
175
- }
172
+ }
@@ -60,4 +60,4 @@
60
60
  --height-medium-height: 300px;
61
61
  --height-large-height: 450px;
62
62
  --height-xlarge-height: 600px;
63
- }
63
+ }
@@ -176,13 +176,4 @@ button.uk-icon:not(:disabled) {
176
176
  --icon-button-hover-color: var(--global-color);
177
177
  --icon-button-active-background: rgb(223.2, 223.2, 223.2);
178
178
  --icon-button-active-color: var(--global-color);
179
- --inverse-icon-link-color: var(--inverse-global-muted-color);
180
- --inverse-icon-link-hover-color: var(--inverse-global-color);
181
- --inverse-icon-link-active-color: var(--inverse-global-color);
182
- --inverse-icon-button-background: var(--inverse-global-muted-background);
183
- --inverse-icon-button-color: var(--inverse-global-muted-color);
184
- --inverse-icon-button-hover-background: rgba(242.25, 242.25, 242.25, 0.1);
185
- --inverse-icon-button-hover-color: var(--inverse-global-color);
186
- --inverse-icon-button-active-background: rgba(229.5, 229.5, 229.5, 0.1);
187
- --inverse-icon-button-active-color: var(--inverse-global-color);
188
- }
179
+ }
@@ -77,7 +77,4 @@
77
77
  --iconnav-item-color: var(--global-muted-color);
78
78
  --iconnav-item-hover-color: var(--global-color);
79
79
  --iconnav-item-active-color: var(--global-color);
80
- --inverse-iconnav-item-color: var(--inverse-global-muted-color);
81
- --inverse-iconnav-item-hover-color: var(--inverse-global-color);
82
- --inverse-iconnav-item-active-color: var(--inverse-global-color);
83
- }
80
+ }
@@ -86,4 +86,4 @@
86
86
  .uk-control-number.uk-disabled .uk-number-actions,
87
87
  .uk-control-number.uk-readonly .uk-number-actions {
88
88
  display: none;
89
- }
89
+ }
@@ -21,4 +21,4 @@
21
21
  .uk-control-password .uk-control-password.uk-disabled .uk-control-password-icon,
22
22
  .uk-control-text .uk-control-password.uk-disabled .uk-control-password-icon {
23
23
  display: none;
24
- }
24
+ }
@@ -743,4 +743,4 @@
743
743
  --inverse-global-primary-background: #fff;
744
744
  --inverse-global-muted-background: rgba(255, 255, 255, 0.1);
745
745
  --inverse-global-border: rgba(255, 255, 255, 0.2);
746
- }
746
+ }
@@ -65,6 +65,4 @@
65
65
  --label-warning-color: var(--global-inverse-color);
66
66
  --label-danger-background: var(--global-danger-background);
67
67
  --label-danger-color: var(--global-inverse-color);
68
- --inverse-label-background: var(--inverse-global-primary-background);
69
- --inverse-label-color: var(--inverse-global-inverse-color);
70
- }
68
+ }
@@ -41,4 +41,4 @@
41
41
  --leader-fill-content: ".";
42
42
  --leader-fill-margin-left: var(--global-small-gutter);
43
43
  --uk-leader-fill-content: var(--leader-fill-content);
44
- }
44
+ }
@@ -72,8 +72,4 @@ a.uk-link-reset,
72
72
  --link-text-hover-color: var(--global-muted-color);
73
73
  --link-heading-hover-color: var(--global-primary-background);
74
74
  --link-heading-hover-text-decoration: none;
75
- --inverse-link-muted-color: var(--inverse-global-muted-color);
76
- --inverse-link-muted-hover-color: var(--inverse-global-color);
77
- --inverse-link-text-hover-color: var(--inverse-global-muted-color);
78
- --inverse-link-heading-hover-color: var(--inverse-global-primary-background);
79
- }
75
+ }
@@ -201,11 +201,4 @@
201
201
  --list-large-divider-margin-top: var(--global-margin);
202
202
  --list-large-striped-padding-vertical: var(--global-margin);
203
203
  --list-large-striped-padding-horizontal: var(--global-small-margin);
204
- --inverse-list-muted-color: var(--inverse-global-muted-color);
205
- --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
206
- --inverse-list-primary-color: var(--inverse-global-primary-background);
207
- --inverse-list-secondary-color: var(--inverse-global-primary-background);
208
- --inverse-list-divider-border: var(--inverse-global-border);
209
- --inverse-list-striped-background: var(--inverse-global-muted-background);
210
- --inverse-list-bullet-icon-color: var(--inverse-global-color);
211
- }
204
+ }
@@ -131,7 +131,7 @@
131
131
  }
132
132
 
133
133
  /* Desktop and bigger */
134
- @media (min-width: 1200px) {
134
+ @media (--media-breakpoint-large) {
135
135
  .uk-margin-large {
136
136
  margin-bottom: var(--large-margin-l);
137
137
  }
@@ -178,7 +178,7 @@
178
178
  }
179
179
 
180
180
  /* Desktop and bigger */
181
- @media (min-width: 1200px) {
181
+ @media (--media-breakpoint-large) {
182
182
  .uk-margin-xlarge {
183
183
  margin-bottom: var(--xlarge-margin-l);
184
184
  }
@@ -227,7 +227,7 @@
227
227
  }
228
228
 
229
229
  /* Phone landscape and bigger */
230
- @media (min-width: 640px) {
230
+ @media (--media-breakpoint-small) {
231
231
  .uk-margin-auto\@s {
232
232
  margin-left: auto !important;
233
233
  margin-right: auto !important;
@@ -240,7 +240,7 @@
240
240
  }
241
241
  }
242
242
  /* Tablet landscape and bigger */
243
- @media (min-width: 960px) {
243
+ @media (--media-breakpoint-medium) {
244
244
  .uk-margin-auto\@m {
245
245
  margin-left: auto !important;
246
246
  margin-right: auto !important;
@@ -253,7 +253,7 @@
253
253
  }
254
254
  }
255
255
  /* Desktop and bigger */
256
- @media (min-width: 1200px) {
256
+ @media (--media-breakpoint-large) {
257
257
  .uk-margin-auto\@l {
258
258
  margin-left: auto !important;
259
259
  margin-right: auto !important;
@@ -266,7 +266,7 @@
266
266
  }
267
267
  }
268
268
  /* Large screen and bigger */
269
- @media (min-width: 1600px) {
269
+ @media (--media-breakpoint-xlarge) {
270
270
  .uk-margin-auto\@xl {
271
271
  margin-left: auto !important;
272
272
  margin-right: auto !important;
@@ -315,7 +315,7 @@
315
315
  }
316
316
 
317
317
  /* Phone landscape and bigger */
318
- @media (min-width: 640px) {
318
+ @media (--media-breakpoint-small) {
319
319
  .uk-margin-remove-left\@s {
320
320
  margin-left: 0 !important;
321
321
  }
@@ -324,7 +324,7 @@
324
324
  }
325
325
  }
326
326
  /* Tablet landscape and bigger */
327
- @media (min-width: 960px) {
327
+ @media (--media-breakpoint-medium) {
328
328
  .uk-margin-remove-left\@m {
329
329
  margin-left: 0 !important;
330
330
  }
@@ -333,7 +333,7 @@
333
333
  }
334
334
  }
335
335
  /* Desktop and bigger */
336
- @media (min-width: 1200px) {
336
+ @media (--media-breakpoint-large) {
337
337
  .uk-margin-remove-left\@l {
338
338
  margin-left: 0 !important;
339
339
  }
@@ -342,7 +342,7 @@
342
342
  }
343
343
  }
344
344
  /* Large screen and bigger */
345
- @media (min-width: 1600px) {
345
+ @media (--media-breakpoint-xlarge) {
346
346
  .uk-margin-remove-left\@xl {
347
347
  margin-left: 0 !important;
348
348
  }
@@ -359,4 +359,4 @@
359
359
  --large-margin-l: var(--global-large-margin);
360
360
  --xlarge-margin: var(--global-large-margin);
361
361
  --xlarge-margin-l: var(--global-xlarge-margin);
362
- }
362
+ }
@@ -22,7 +22,4 @@
22
22
  --marker-background: var(--global-secondary-background);
23
23
  --marker-color: var(--global-inverse-color);
24
24
  --marker-hover-color: var(--global-inverse-color);
25
- --inverse-marker-background: var(--global-muted-background);
26
- --inverse-marker-color: var(--global-color);
27
- --inverse-marker-hover-color: var(--global-color);
28
- }
25
+ }