@broxus/react-uikit 0.23.3 → 0.24.0

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 +1 -1
  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} +40 -26
  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 +641 -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
package/styles/margin/_margin.scss ADDED
@@ -0,0 +1,312 @@
1
+ // Name: Margin
2
+ // Description: Utilities for margins
3
+ //
4
+ // Component: `uk-margin-*`
5
+ // `uk-margin-small-*`
6
+ // `uk-margin-medium-*`
7
+ // `uk-margin-large-*`
8
+ // `uk-margin-xlarge-*`
9
+ // `uk-margin-remove-*`
10
+ // `uk-margin-auto-*`
11
+ //
12
+ // ========================================================================
13
+
14
+ @use 'sass:map';
15
+ @use 'sass:meta';
16
+
17
+
18
+ // Variables
19
+ // ========================================================================
20
+
21
+ @use '../variables' as *;
22
+ @use '../mixins' as *;
23
+
24
+
25
+ @mixin margin-styles {
26
+ /* ========================================================================
27
+ Component: Margin
28
+ ========================================================================== */
29
+
30
+ /*
31
+ * Default
32
+ */
33
+
34
+ .#{$prefix}-margin { margin-bottom: var(--margin); }
35
+
36
+ * + .#{$prefix}-margin { margin-top: var(--margin) !important; }
37
+
38
+ .#{$prefix}-margin-top { margin-top: var(--margin) !important; }
39
+
40
+ .#{$prefix}-margin-bottom { margin-bottom: var(--margin) !important; }
41
+
42
+ .#{$prefix}-margin-left { margin-left: var(--margin) !important; }
43
+
44
+ .#{$prefix}-margin-right { margin-right: var(--margin) !important; }
45
+
46
+
47
+ // Xsmall
48
+ // ========================================================================
49
+
50
+ .#{$prefix}-margin-xsmall { margin-bottom: var(--xsmall-margin); }
51
+
52
+ * + .#{$prefix}-margin-xsmall { margin-top: var(--xsmall-margin) !important; }
53
+
54
+ .#{$prefix}-margin-xsmall-top { margin-top: var(--xsmall-margin) !important; }
55
+
56
+ .#{$prefix}-margin-xsmall-bottom { margin-bottom: var(--xsmall-margin) !important; }
57
+
58
+ .#{$prefix}-margin-xsmall-left { margin-left: var(--xsmall-margin) !important; }
59
+
60
+ .#{$prefix}-margin-xsmall-right { margin-right: var(--xsmall-margin) !important; }
61
+
62
+
63
+ /* Small
64
+ ========================================================================== */
65
+
66
+ .#{$prefix}-margin-small { margin-bottom: var(--small-margin); }
67
+
68
+ * + .#{$prefix}-margin-small { margin-top: var(--small-margin) !important; }
69
+
70
+ .#{$prefix}-margin-small-top { margin-top: var(--small-margin) !important; }
71
+
72
+ .#{$prefix}-margin-small-bottom { margin-bottom: var(--small-margin) !important; }
73
+
74
+ .#{$prefix}-margin-small-left { margin-left: var(--small-margin) !important; }
75
+
76
+ .#{$prefix}-margin-small-right { margin-right: var(--small-margin) !important; }
77
+
78
+
79
+ /* Medium
80
+ ========================================================================== */
81
+
82
+ .#{$prefix}-margin-medium { margin-bottom: var(--medium-margin); }
83
+
84
+ * + .#{$prefix}-margin-medium { margin-top: var(--medium-margin) !important; }
85
+
86
+ .#{$prefix}-margin-medium-top { margin-top: var(--medium-margin) !important; }
87
+
88
+ .#{$prefix}-margin-medium-bottom { margin-bottom: var(--medium-margin) !important; }
89
+
90
+ .#{$prefix}-margin-medium-left { margin-left: var(--medium-margin) !important; }
91
+
92
+ .#{$prefix}-margin-medium-right { margin-right: var(--medium-margin) !important; }
93
+
94
+
95
+ /* Large
96
+ ========================================================================== */
97
+
98
+ .#{$prefix}-margin-large { margin-bottom: var(--large-margin); }
99
+
100
+ * + .#{$prefix}-margin-large { margin-top: var(--large-margin) !important; }
101
+
102
+ .#{$prefix}-margin-large-top { margin-top: var(--large-margin) !important; }
103
+
104
+ .#{$prefix}-margin-large-bottom { margin-bottom: var(--large-margin) !important; }
105
+
106
+ .#{$prefix}-margin-large-left { margin-left: var(--large-margin) !important; }
107
+
108
+ .#{$prefix}-margin-large-right { margin-right: var(--large-margin) !important; }
109
+
110
+ /* Desktop and bigger */
111
+ @media (--media-breakpoint-large) {
112
+ .#{$prefix}-margin-large { margin-bottom: var(--large-margin-l); }
113
+
114
+ * + .#{$prefix}-margin-large { margin-top: var(--large-margin-l) !important; }
115
+
116
+ .#{$prefix}-margin-large-top { margin-top: var(--large-margin-l) !important; }
117
+
118
+ .#{$prefix}-margin-large-bottom { margin-bottom: var(--large-margin-l) !important; }
119
+
120
+ .#{$prefix}-margin-large-left { margin-left: var(--large-margin-l) !important; }
121
+
122
+ .#{$prefix}-margin-large-right { margin-right: var(--large-margin-l) !important; }
123
+ }
124
+
125
+
126
+ /* XLarge
127
+ ========================================================================== */
128
+
129
+ .#{$prefix}-margin-xlarge { margin-bottom: var(--xlarge-margin); }
130
+
131
+ * + .#{$prefix}-margin-xlarge { margin-top: var(--xlarge-margin) !important; }
132
+
133
+ .#{$prefix}-margin-xlarge-top { margin-top: var(--xlarge-margin) !important; }
134
+
135
+ .#{$prefix}-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin) !important; }
136
+
137
+ .#{$prefix}-margin-xlarge-left { margin-left: var(--xlarge-margin) !important; }
138
+
139
+ .#{$prefix}-margin-xlarge-right { margin-right: var(--xlarge-margin) !important; }
140
+
141
+ /* Desktop and bigger */
142
+ @media (--media-breakpoint-large) {
143
+ .#{$prefix}-margin-xlarge { margin-bottom: var(--xlarge-margin-l); }
144
+
145
+ * + .#{$prefix}-margin-xlarge { margin-top: var(--xlarge-margin-l) !important; }
146
+
147
+ .#{$prefix}-margin-xlarge-top { margin-top: var(--xlarge-margin-l) !important; }
148
+
149
+ .#{$prefix}-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin-l) !important; }
150
+
151
+ .#{$prefix}-margin-xlarge-left { margin-left: var(--xlarge-margin-l) !important; }
152
+
153
+ .#{$prefix}-margin-xlarge-right { margin-right: var(--xlarge-margin-l) !important; }
154
+ }
155
+
156
+
157
+ /* Auto
158
+ ========================================================================== */
159
+
160
+ .#{$prefix}-margin-auto {
161
+ margin-left: auto !important;
162
+ margin-right: auto !important;
163
+ }
164
+
165
+ .#{$prefix}-margin-auto-top { margin-top: auto !important; }
166
+
167
+ .#{$prefix}-margin-auto-bottom { margin-bottom: auto !important; }
168
+
169
+ .#{$prefix}-margin-auto-left { margin-left: auto !important; }
170
+
171
+ .#{$prefix}-margin-auto-right { margin-right: auto !important; }
172
+
173
+ .#{$prefix}-margin-auto-vertical {
174
+ margin-bottom: auto !important;
175
+ margin-top: auto !important;
176
+ }
177
+
178
+ /* Phone landscape and bigger */
179
+ // noinspection Stylelint
180
+ @media (--media-breakpoint-small) {
181
+ .#{$prefix}-margin-auto\@s {
182
+ margin-left: auto !important;
183
+ margin-right: auto !important;
184
+ }
185
+
186
+ .#{$prefix}-margin-auto-left\@s { margin-left: auto !important; }
187
+
188
+ .#{$prefix}-margin-auto-right\@s { margin-right: auto !important; }
189
+ }
190
+
191
+ /* Tablet landscape and bigger */
192
+ // noinspection Stylelint
193
+ @media (--media-breakpoint-medium) {
194
+ .#{$prefix}-margin-auto\@m {
195
+ margin-left: auto !important;
196
+ margin-right: auto !important;
197
+ }
198
+
199
+ .#{$prefix}-margin-auto-left\@m { margin-left: auto !important; }
200
+
201
+ .#{$prefix}-margin-auto-right\@m { margin-right: auto !important; }
202
+ }
203
+
204
+ /* Desktop and bigger */
205
+ // noinspection Stylelint
206
+ @media (--media-breakpoint-large) {
207
+ .#{$prefix}-margin-auto\@l {
208
+ margin-left: auto !important;
209
+ margin-right: auto !important;
210
+ }
211
+
212
+ .#{$prefix}-margin-auto-left\@l { margin-left: auto !important; }
213
+
214
+ .#{$prefix}-margin-auto-right\@l { margin-right: auto !important; }
215
+ }
216
+
217
+ /* Large screen and bigger */
218
+ // noinspection Stylelint
219
+ @media (--media-breakpoint-xlarge) {
220
+ .#{$prefix}-margin-auto\@xl {
221
+ margin-left: auto !important;
222
+ margin-right: auto !important;
223
+ }
224
+
225
+ .#{$prefix}-margin-auto-left\@xl { margin-left: auto !important; }
226
+
227
+ .#{$prefix}-margin-auto-right\@xl { margin-right: auto !important; }
228
+ }
229
+
230
+
231
+ /* Remove
232
+ ========================================================================== */
233
+
234
+ .#{$prefix}-margin-remove { margin: 0 !important; }
235
+
236
+ .#{$prefix}-margin-remove-top { margin-top: 0 !important; }
237
+
238
+ .#{$prefix}-margin-remove-bottom { margin-bottom: 0 !important; }
239
+
240
+ .#{$prefix}-margin-remove-left { margin-left: 0 !important; }
241
+
242
+ .#{$prefix}-margin-remove-right { margin-right: 0 !important; }
243
+
244
+ .#{$prefix}-margin-remove-vertical {
245
+ margin-bottom: 0 !important;
246
+ margin-top: 0 !important;
247
+ }
248
+
249
+ .#{$prefix}-margin-remove-adjacent + *,
250
+ .#{$prefix}-margin-remove-first-child > :first-child { margin-top: 0 !important; }
251
+
252
+ .#{$prefix}-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
253
+
254
+ /* Phone landscape and bigger */
255
+ // noinspection Stylelint
256
+ @media (--media-breakpoint-small) {
257
+
258
+ .#{$prefix}-margin-remove-left\@s { margin-left: 0 !important; }
259
+
260
+ .#{$prefix}-margin-remove-right\@s { margin-right: 0 !important; }
261
+ }
262
+
263
+ /* Tablet landscape and bigger */
264
+ // noinspection Stylelint
265
+ @media (--media-breakpoint-medium) {
266
+
267
+ .#{$prefix}-margin-remove-left\@m { margin-left: 0 !important; }
268
+
269
+ .#{$prefix}-margin-remove-right\@m { margin-right: 0 !important; }
270
+ }
271
+
272
+ /* Desktop and bigger */
273
+ // noinspection Stylelint
274
+ @media (--media-breakpoint-large) {
275
+
276
+ .#{$prefix}-margin-remove-left\@l { margin-left: 0 !important; }
277
+
278
+ .#{$prefix}-margin-remove-right\@l { margin-right: 0 !important; }
279
+ }
280
+
281
+ /* Large screen and bigger */
282
+ // noinspection Stylelint
283
+ @media (--media-breakpoint-xlarge) {
284
+
285
+ .#{$prefix}-margin-remove-left\@xl { margin-left: 0 !important; }
286
+
287
+ .#{$prefix}-margin-remove-right\@xl { margin-right: 0 !important; }
288
+ }
289
+
290
+
291
+ // Hooks
292
+ // ========================================================================
293
+
294
+ @if map.has-key($mixins, 'hook-margin-misc') {
295
+ @include meta.apply(map.get($mixins, 'hook-margin-misc'));
296
+ }
297
+
298
+ @content;
299
+ }
300
+
301
+ @mixin margin-tokens {
302
+ --margin: var(--global-margin);
303
+ --xsmall-margin: var(--global-xsmall-margin);
304
+ --small-margin: var(--global-small-margin);
305
+ --medium-margin: var(--global-medium-margin);
306
+ --large-margin: var(--global-medium-margin);
307
+ --large-margin-l: var(--global-large-margin);
308
+ --xlarge-margin: var(--global-large-margin);
309
+ --xlarge-margin-l: var(--global-xlarge-margin);
310
+
311
+ @content;
312
+ }
package/styles/marker/_index.scss ADDED
@@ -0,0 +1,11 @@
1
+ @use 'marker' as *;
2
+
3
+ $generate-tokens: true !default;
4
+
5
+ @include marker-styles;
6
+
7
+ @if $generate-tokens {
8
+ :root {
9
+ @include marker-tokens;
10
+ }
11
+ }
package/styles/marker/_marker.scss ADDED
@@ -0,0 +1,73 @@
1
+ // Name: Marker
2
+ // Description: Component to create a marker icon
3
+ //
4
+ // Component: `uk-marker`
5
+ //
6
+ // ========================================================================
7
+
8
+ @use 'sass:map';
9
+ @use 'sass:meta';
10
+
11
+
12
+ // Variables
13
+ // ========================================================================
14
+
15
+ @use '../variables' as *;
16
+ @use '../mixins' as *;
17
+
18
+
19
+ @mixin marker-styles {
20
+ /* ========================================================================
21
+ Component: Marker
22
+ ========================================================================== */
23
+
24
+ /*
25
+ * Addopts `uk-icon`
26
+ */
27
+
28
+ .#{$prefix}-marker {
29
+ background: var(--marker-background);
30
+ color: var(--marker-color);
31
+ padding: var(--marker-padding);
32
+ @if map.has-key($mixins, 'hook-marker') {
33
+ @include meta.apply(map.get($mixins, 'hook-marker'));
34
+ }
35
+ }
36
+
37
+ /* Hover + Focus */
38
+ .#{$prefix}-marker:hover,
39
+ .#{$prefix}-marker:focus {
40
+ color: var(--marker-hover-color);
41
+ outline: none;
42
+ @if map.has-key($mixins, 'hook-marker-hover') {
43
+ @include meta.apply(map.get($mixins, 'hook-marker-hover'));
44
+ }
45
+ }
46
+
47
+
48
+ // Hooks
49
+ // ========================================================================
50
+
51
+ @if map.has-key($mixins, 'hook-marker-misc') {
52
+ @include meta.apply(map.get($mixins, 'hook-marker-misc'));
53
+ }
54
+
55
+ @content;
56
+ }
57
+
58
+ @mixin marker-tokens {
59
+ --marker-padding: #{$marker-padding};
60
+ --marker-background: var(--global-secondary-background);
61
+ --marker-color: var(--global-inverse-color);
62
+ --marker-hover-color: var(--global-inverse-color);
63
+
64
+ @content;
65
+ }
66
+
67
+ @mixin marker-inverse-tokens {
68
+ --inverse-marker-background: var(--global-muted-background);
69
+ --inverse-marker-color: var(--global-color);
70
+ --inverse-marker-hover-color: var(--global-color);
71
+
72
+ @content;
73
+ }
package/styles/modal/_index.scss ADDED
@@ -0,0 +1,11 @@
1
+ @use 'modal' as *;
2
+
3
+ $generate-tokens: true !default;
4
+
5
+ @include modal-styles;
6
+
7
+ @if $generate-tokens {
8
+ :root {
9
+ @include modal-tokens;
10
+ }
11
+ }