morya-ui 0.4.4 → 0.5.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 (344) hide show
  1. package/CHANGELOG.md +828 -775
  2. package/LICENSE +21 -21
  3. package/README.md +156 -156
  4. package/README.zh-CN.md +156 -156
  5. package/dist/{Button-Bjsth0ct.js → Button-fKkfCnYv.js} +1 -1
  6. package/dist/{Checkbox-Bo26OGHP.js → Checkbox-BXC2mLNd.js} +1 -1
  7. package/dist/DatePicker-DcVjiS5d.js +848 -0
  8. package/dist/{Empty-rMhOPi79.js → Empty-By1qe-ew.js} +1 -1
  9. package/dist/{FlyoutSubmenu-C0id6-Sb.js → FlyoutSubmenu-C1n-fr6i.js} +1 -1
  10. package/dist/{Input-CxSTVp9E.js → Input-D2bee2LU.js} +2 -2
  11. package/dist/InputNumber-DjbXtTzR.js +245 -0
  12. package/dist/{Loading-D_qRwfKv.js → Loading-DE9Iaiao.js} +3 -3
  13. package/dist/Pagination-DpNOb0CS.js +178 -0
  14. package/dist/{Popover-D1uZ1N9Z.js → Popover-Bnz7KNZq.js} +2 -2
  15. package/dist/{ProgressSpinner-hmR23xpi.js → ProgressSpinner-vBXGvQ92.js} +1 -1
  16. package/dist/{Radio-CZAyelC_.js → Radio-BbznzRbr.js} +1 -1
  17. package/dist/{Segmented-BpdO7arR.js → Segmented-CMP3nBAP.js} +1 -1
  18. package/dist/{Select-CySmusHs.js → Select-q4X2ff_M.js} +3 -3
  19. package/dist/{Textarea-DskjTCcz.js → Textarea-DsFOAtPd.js} +2 -2
  20. package/dist/{Tooltip-DSfkflHp.js → Tooltip-5zRVTTVs.js} +2 -2
  21. package/dist/accordion/style.css +1197 -1205
  22. package/dist/affix/style.css +1197 -1205
  23. package/dist/alert/index.js +2 -2
  24. package/dist/alert/style.css +1197 -1205
  25. package/dist/anchor/style.css +1197 -1205
  26. package/dist/auto-complete/index.js +3 -3
  27. package/dist/auto-complete/style.css +1741 -1749
  28. package/dist/avatar/style.css +1310 -1318
  29. package/dist/badge/style.css +1363 -1371
  30. package/dist/block-ui/index.js +1 -1
  31. package/dist/block-ui/style.css +1197 -1205
  32. package/dist/breadcrumb/index.js +1 -1
  33. package/dist/breadcrumb/style.css +1197 -1205
  34. package/dist/button/index.js +1 -1
  35. package/dist/button/style.css +1901 -1909
  36. package/dist/calendar/index.js +3 -3
  37. package/dist/calendar/style.css +2072 -1880
  38. package/dist/card/style.css +1197 -1205
  39. package/dist/carousel/index.js +2 -2
  40. package/dist/carousel/style.css +2200 -2208
  41. package/dist/cascade-select/index.js +3 -3
  42. package/dist/cascade-select/style.css +1901 -1909
  43. package/dist/checkbox/index.js +1 -1
  44. package/dist/checkbox/style.css +1197 -1205
  45. package/dist/chip/index.js +1 -1
  46. package/dist/chip/style.css +1341 -1349
  47. package/dist/color-picker/index.js +676 -0
  48. package/dist/{input-color → color-picker}/style.css +2613 -1289
  49. package/dist/color-picker/style.js +8 -0
  50. package/dist/command-menu/index.js +3 -3
  51. package/dist/command-menu/style.css +1430 -1438
  52. package/dist/components/AutoComplete/styles.css +209 -209
  53. package/dist/components/Avatar/styles.css +113 -113
  54. package/dist/components/Badge/styles.css +164 -164
  55. package/dist/components/Button/styles.css +698 -698
  56. package/dist/components/Carousel/styles.css +302 -302
  57. package/dist/components/CascadeSelect/styles.css +168 -168
  58. package/dist/components/Chip/styles.css +144 -144
  59. package/dist/components/ColorPicker/ColorPicker.vue.d.ts +41 -0
  60. package/dist/components/ColorPicker/ColorPicker.vue.d.ts.map +1 -0
  61. package/dist/components/ColorPicker/colorUtils.d.ts +23 -0
  62. package/dist/components/ColorPicker/colorUtils.d.ts.map +1 -0
  63. package/dist/components/ColorPicker/gradientUtils.d.ts +9 -0
  64. package/dist/components/ColorPicker/gradientUtils.d.ts.map +1 -0
  65. package/dist/components/ColorPicker/index.d.ts +3 -0
  66. package/dist/components/ColorPicker/index.d.ts.map +1 -0
  67. package/dist/components/ColorPicker/styles.css +405 -0
  68. package/dist/components/ColorPicker/types.d.ts +60 -0
  69. package/dist/components/ColorPicker/types.d.ts.map +1 -0
  70. package/dist/components/CommandMenu/styles.css +102 -102
  71. package/dist/components/ConfigProvider/styles.css +6 -6
  72. package/dist/components/ConfirmDialog/styles.css +24 -24
  73. package/dist/components/ConfirmPopup/styles.css +35 -35
  74. package/dist/components/ContextMenu/styles.css +138 -138
  75. package/dist/components/DatePicker/DatePicker.vue.d.ts +21 -0
  76. package/dist/components/DatePicker/DatePicker.vue.d.ts.map +1 -1
  77. package/dist/components/DatePicker/styles.css +653 -453
  78. package/dist/components/DatePicker/types.d.ts +20 -2
  79. package/dist/components/DatePicker/types.d.ts.map +1 -1
  80. package/dist/components/Dialog/styles.css +420 -420
  81. package/dist/components/Dock/styles.css +84 -84
  82. package/dist/components/Drawer/styles.css +346 -346
  83. package/dist/components/Dropdown/styles.css +135 -135
  84. package/dist/components/Empty/styles.css +146 -146
  85. package/dist/components/FileUpload/styles.css +359 -359
  86. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  87. package/dist/components/Form/styles.css +125 -125
  88. package/dist/components/Gallery/styles.css +100 -100
  89. package/dist/components/Input/styles.css +392 -392
  90. package/dist/components/InputNumber/styles.css +280 -262
  91. package/dist/components/InputPassword/styles.css +189 -189
  92. package/dist/components/InputTags/styles.css +121 -121
  93. package/dist/components/Layout/styles.css +433 -433
  94. package/dist/components/List/styles.css +229 -229
  95. package/dist/components/Listbox/styles.css +130 -130
  96. package/dist/components/Loading/styles.css +378 -378
  97. package/dist/components/MegaMenu/styles.css +97 -97
  98. package/dist/components/Menu/styles.css +565 -565
  99. package/dist/components/Menubar/styles.css +144 -144
  100. package/dist/components/Message/styles.css +248 -248
  101. package/dist/components/MeterGroup/styles.css +49 -49
  102. package/dist/components/OrderList/OrderList.vue.d.ts +13 -7
  103. package/dist/components/OrderList/OrderList.vue.d.ts.map +1 -1
  104. package/dist/components/OrderList/styles.css +80 -7
  105. package/dist/components/OrderList/types.d.ts +20 -3
  106. package/dist/components/OrderList/types.d.ts.map +1 -1
  107. package/dist/components/Page/styles.css +430 -430
  108. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  109. package/dist/components/Pagination/styles.css +97 -124
  110. package/dist/components/Popover/styles.css +92 -92
  111. package/dist/components/Result/styles.css +146 -146
  112. package/dist/components/Scrollbar/styles.css +131 -131
  113. package/dist/components/Select/styles.css +222 -222
  114. package/dist/components/SelectButton/styles.css +107 -107
  115. package/dist/components/Sidebar/styles.css +74 -74
  116. package/dist/components/Slider/styles.css +211 -211
  117. package/dist/components/SplitButton/styles.css +216 -216
  118. package/dist/components/Status/styles.css +190 -190
  119. package/dist/components/Stepper/styles.css +152 -152
  120. package/dist/components/Switch/styles.css +129 -129
  121. package/dist/components/Table/Table.vue.d.ts +37 -282
  122. package/dist/components/Table/Table.vue.d.ts.map +1 -1
  123. package/dist/components/Table/core/tree.d.ts +4 -0
  124. package/dist/components/Table/core/tree.d.ts.map +1 -1
  125. package/dist/components/Table/core/utils.d.ts +11 -3
  126. package/dist/components/Table/core/utils.d.ts.map +1 -1
  127. package/dist/components/Table/index.d.ts +1 -1
  128. package/dist/components/Table/index.d.ts.map +1 -1
  129. package/dist/components/Table/render/TableColumnSetting.vue.d.ts +25 -0
  130. package/dist/components/Table/render/TableColumnSetting.vue.d.ts.map +1 -0
  131. package/dist/components/Table/render/TableTbody.vue.d.ts +16 -0
  132. package/dist/components/Table/render/TableTbody.vue.d.ts.map +1 -1
  133. package/dist/components/Table/render/TableThead.vue.d.ts +8 -0
  134. package/dist/components/Table/render/TableThead.vue.d.ts.map +1 -1
  135. package/dist/components/Table/state/internal.d.ts +1 -1
  136. package/dist/components/Table/state/internal.d.ts.map +1 -1
  137. package/dist/components/Table/state/usePageItems.d.ts +1 -3
  138. package/dist/components/Table/state/usePageItems.d.ts.map +1 -1
  139. package/dist/components/Table/state/useVirtualRows.d.ts +20 -2
  140. package/dist/components/Table/state/useVirtualRows.d.ts.map +1 -1
  141. package/dist/components/Table/styles.css +95 -0
  142. package/dist/components/Table/types.d.ts +77 -12
  143. package/dist/components/Table/types.d.ts.map +1 -1
  144. package/dist/components/Tabs/styles.css +165 -165
  145. package/dist/components/Terminal/styles.css +75 -75
  146. package/dist/components/Textarea/styles.css +146 -146
  147. package/dist/components/TieredMenu/styles.css +125 -125
  148. package/dist/components/Timeline/styles.css +157 -157
  149. package/dist/components/TreeSelect/styles.css +172 -172
  150. package/dist/components/VirtualScroller/styles.css +27 -27
  151. package/dist/{config-BEpyhJi3.js → config-Cd20zAyW.js} +11 -1
  152. package/dist/config-provider/index.js +1 -1
  153. package/dist/config-provider/style.css +2293 -2301
  154. package/dist/confirm-dialog/index.js +4 -4
  155. package/dist/confirm-dialog/style.css +2339 -2347
  156. package/dist/confirm-popup/index.js +4 -4
  157. package/dist/confirm-popup/style.css +1930 -1938
  158. package/dist/context-menu/index.js +3 -3
  159. package/dist/context-menu/style.css +1466 -1474
  160. package/dist/data-view/index.js +3 -3
  161. package/dist/data-view/style.css +1672 -1707
  162. package/dist/date-picker/index.js +1 -1
  163. package/dist/date-picker/style.css +1982 -1658
  164. package/dist/date-picker/style.js +1 -0
  165. package/dist/descriptions/index.js +1 -1
  166. package/dist/descriptions/style.css +1197 -1205
  167. package/dist/dialog/index.js +4 -4
  168. package/dist/dialog/style.css +2315 -2323
  169. package/dist/divider/style.css +1197 -1205
  170. package/dist/dock/style.css +1281 -1289
  171. package/dist/drawer/index.js +3 -3
  172. package/dist/drawer/style.css +1543 -1551
  173. package/dist/dropdown/index.js +4 -4
  174. package/dist/dropdown/style.css +1463 -1471
  175. package/dist/empty/index.js +1 -1
  176. package/dist/empty/style.css +1343 -1351
  177. package/dist/fieldset/style.css +1197 -1205
  178. package/dist/file-upload/index.js +1 -1
  179. package/dist/file-upload/style.css +1556 -1564
  180. package/dist/flex/index.js +1 -1
  181. package/dist/flex/style.css +1197 -1205
  182. package/dist/float-label/style.css +1197 -1205
  183. package/dist/fluid/style.css +1197 -1205
  184. package/dist/form/index.js +1 -1
  185. package/dist/form/style.css +1324 -1332
  186. package/dist/gallery/index.js +1 -1
  187. package/dist/gallery/style.css +1428 -1436
  188. package/dist/grid/style.css +1197 -1205
  189. package/dist/icon/style.css +1197 -1205
  190. package/dist/icon-field/style.css +1589 -1597
  191. package/dist/image/index.js +1 -1
  192. package/dist/image/style.css +1197 -1205
  193. package/dist/index.d.ts +3 -3
  194. package/dist/index.d.ts.map +1 -1
  195. package/dist/index.js +4792 -3559
  196. package/dist/inplace/style.css +1197 -1205
  197. package/dist/input/index.js +1 -1
  198. package/dist/input/style.css +1714 -1722
  199. package/dist/input-group/style.css +1197 -1205
  200. package/dist/input-number/index.js +2 -245
  201. package/dist/input-number/style.css +1477 -1467
  202. package/dist/input-otp/index.js +2 -2
  203. package/dist/input-otp/style.css +1197 -1205
  204. package/dist/input-password/index.js +2 -2
  205. package/dist/input-password/style.css +1511 -1519
  206. package/dist/input-tags/index.js +2 -2
  207. package/dist/input-tags/style.css +1318 -1326
  208. package/dist/knob/style.css +1197 -1205
  209. package/dist/label/style.css +1197 -1205
  210. package/dist/layout/index.js +1 -1
  211. package/dist/layout/style.css +1761 -1769
  212. package/dist/list/index.js +4 -4
  213. package/dist/list/style.css +2052 -2087
  214. package/dist/listbox/index.js +2 -2
  215. package/dist/listbox/style.css +1489 -1497
  216. package/dist/loading/index.js +1 -1
  217. package/dist/loading/style.css +1577 -1585
  218. package/dist/locale/de-DE.d.ts.map +1 -1
  219. package/dist/locale/en-US.d.ts.map +1 -1
  220. package/dist/locale/es-ES.d.ts.map +1 -1
  221. package/dist/locale/fr-FR.d.ts.map +1 -1
  222. package/dist/locale/ja-JP.d.ts.map +1 -1
  223. package/dist/locale/ko-KR.d.ts.map +1 -1
  224. package/dist/locale/pt-BR.d.ts.map +1 -1
  225. package/dist/locale/ru-RU.d.ts.map +1 -1
  226. package/dist/locale/types.d.ts +18 -0
  227. package/dist/locale/types.d.ts.map +1 -1
  228. package/dist/locale/zh-CN.d.ts.map +1 -1
  229. package/dist/locale/zh-TW.d.ts.map +1 -1
  230. package/dist/{locale-CZddM-tH.js → locale-BcxMPufl.js} +1 -1
  231. package/dist/mega-menu/index.js +3 -3
  232. package/dist/mega-menu/style.css +1294 -1302
  233. package/dist/mentions/index.js +3 -3
  234. package/dist/mentions/style.css +1322 -1330
  235. package/dist/menu/index.js +4 -4
  236. package/dist/menu/style.css +2051 -2059
  237. package/dist/menubar/index.js +4 -4
  238. package/dist/menubar/style.css +1472 -1480
  239. package/dist/message/index.js +3 -3
  240. package/dist/message/style.css +1445 -1453
  241. package/dist/meter-group/style.css +1248 -1256
  242. package/dist/order-list/index.js +191 -101
  243. package/dist/order-list/style.css +1277 -1212
  244. package/dist/page/index.js +3 -3
  245. package/dist/page/style.css +2592 -2600
  246. package/dist/pagination/index.js +1 -1
  247. package/dist/pagination/style.css +1516 -1551
  248. package/dist/panel/index.js +1 -1
  249. package/dist/panel/style.css +1197 -1205
  250. package/dist/pick-list/index.js +1 -1
  251. package/dist/pick-list/style.css +1197 -1205
  252. package/dist/popover/index.js +1 -1
  253. package/dist/popover/style.css +1291 -1299
  254. package/dist/progress-bar/style.css +1197 -1205
  255. package/dist/progress-spinner/index.js +1 -1
  256. package/dist/progress-spinner/style.css +1197 -1205
  257. package/dist/qr-code/index.js +3 -3
  258. package/dist/qr-code/style.css +1895 -1903
  259. package/dist/radio/index.js +1 -1
  260. package/dist/radio/style.css +1197 -1205
  261. package/dist/rating/index.js +2 -2
  262. package/dist/rating/style.css +1197 -1205
  263. package/dist/resolver.js +1 -1
  264. package/dist/result/index.js +1 -1
  265. package/dist/result/style.css +1343 -1351
  266. package/dist/scroll-top/index.js +2 -2
  267. package/dist/scroll-top/style.css +1328 -1336
  268. package/dist/scrollbar/style.css +1330 -1338
  269. package/dist/segmented/index.js +1 -1
  270. package/dist/segmented/style.css +1197 -1205
  271. package/dist/select/index.js +1 -1
  272. package/dist/select/style.css +2107 -2115
  273. package/dist/select-button/index.js +1 -1
  274. package/dist/select-button/style.css +1306 -1314
  275. package/dist/shared/styles/control-affix-icon.css +110 -110
  276. package/dist/shared/styles/control-suffix.css +118 -118
  277. package/dist/shared/styles/select-overlay.css +177 -177
  278. package/dist/sidebar/index.js +1 -1
  279. package/dist/sidebar/style.css +1271 -1279
  280. package/dist/skeleton/style.css +1197 -1205
  281. package/dist/slider/index.js +2 -2
  282. package/dist/slider/style.css +1410 -1418
  283. package/dist/space/index.js +1 -1
  284. package/dist/space/style.css +1197 -1205
  285. package/dist/speed-dial/index.js +3 -3
  286. package/dist/speed-dial/style.css +1197 -1205
  287. package/dist/split-button/index.js +3 -3
  288. package/dist/split-button/style.css +2111 -2119
  289. package/dist/splitter/index.js +1 -1
  290. package/dist/splitter/style.css +1197 -1205
  291. package/dist/statistic/style.css +1197 -1205
  292. package/dist/status/index.js +1 -1
  293. package/dist/status/style.css +1387 -1395
  294. package/dist/stepper/style.css +1349 -1357
  295. package/dist/styles/base.css +795 -804
  296. package/dist/styles.css +1 -1
  297. package/dist/switch/index.js +1 -1
  298. package/dist/switch/style.css +1328 -1336
  299. package/dist/table/index.js +975 -714
  300. package/dist/table/style.css +1899 -1839
  301. package/dist/tabs/index.js +1 -1
  302. package/dist/tabs/style.css +1493 -1501
  303. package/dist/tag/index.js +2 -2
  304. package/dist/tag/style.css +1197 -1205
  305. package/dist/terminal/index.js +1 -1
  306. package/dist/terminal/style.css +1274 -1282
  307. package/dist/textarea/index.js +1 -1
  308. package/dist/textarea/style.css +1468 -1476
  309. package/dist/theme/styles.css +402 -401
  310. package/dist/tiered-menu/index.js +3 -3
  311. package/dist/tiered-menu/style.css +1453 -1461
  312. package/dist/time-picker/index.js +5 -1
  313. package/dist/time-picker/style.css +1852 -1660
  314. package/dist/timeline/style.css +1485 -1493
  315. package/dist/toast/index.js +3 -3
  316. package/dist/toast/style.css +1895 -1903
  317. package/dist/toggle-button/index.js +1 -1
  318. package/dist/toggle-button/style.css +1197 -1205
  319. package/dist/toolbar/style.css +1197 -1205
  320. package/dist/tooltip/index.js +1 -1
  321. package/dist/tooltip/style.css +1197 -1205
  322. package/dist/tour/index.js +3 -3
  323. package/dist/tour/style.css +1895 -1903
  324. package/dist/tree/index.js +2 -2
  325. package/dist/tree/style.css +1197 -1205
  326. package/dist/tree-select/index.js +4 -4
  327. package/dist/tree-select/style.css +1905 -1913
  328. package/dist/typography/index.js +2 -2
  329. package/dist/typography/style.css +1343 -1351
  330. package/dist/{useMotionTransition-DqL_SEML.js → useMotionTransition-DohkfWRB.js} +1 -1
  331. package/dist/virtual-scroller/style.css +1358 -1366
  332. package/dist/watermark/style.css +1197 -1205
  333. package/package.json +8 -8
  334. package/dist/DatePicker-CsMGzCqY.js +0 -630
  335. package/dist/Pagination-CnGOpp0m.js +0 -171
  336. package/dist/components/InputColor/InputColor.vue.d.ts +0 -24
  337. package/dist/components/InputColor/InputColor.vue.d.ts.map +0 -1
  338. package/dist/components/InputColor/index.d.ts +0 -3
  339. package/dist/components/InputColor/index.d.ts.map +0 -1
  340. package/dist/components/InputColor/styles.css +0 -139
  341. package/dist/components/InputColor/types.d.ts +0 -19
  342. package/dist/components/InputColor/types.d.ts.map +0 -1
  343. package/dist/input-color/index.js +0 -118
  344. package/dist/input-color/style.js +0 -3
package/dist/components/Button/styles.css CHANGED
@@ -1,698 +1,698 @@
1
- .m-button {
2
- /* Geometry */
3
- --m-button-radius: var(--m-radius-control);
4
- --m-button-border-width: var(--m-border-width);
5
- --m-button-gap: var(--m-space-2);
6
- --m-button-font-weight: var(--m-font-weight);
7
- --m-button-font-size: var(--m-control-font-medium);
8
- --m-button-height: var(--m-control-height-medium);
9
- --m-button-padding-x: var(--m-button-padding-x-medium);
10
- --m-button-padding-x-small: var(--m-control-padding-x-small);
11
- --m-button-padding-x-medium: calc(
12
- var(--m-control-padding-x-medium) + var(--m-space-1)
13
- );
14
- --m-button-padding-x-large: calc(
15
- var(--m-control-padding-x-large) + var(--m-space-1)
16
- );
17
- --m-button-padding-x-round-extra: var(--m-space-2);
18
-
19
- /* Icon / spinner */
20
- --m-button-icon-size: 1rem;
21
- --m-button-icon-size-small: 0.875rem;
22
- --m-button-icon-size-large: 1.25rem;
23
- --m-button-spinner-size: 0.875rem;
24
- --m-button-spinner-border-width: 2px;
25
- --m-button-cn-letter-spacing: 0.3em;
26
-
27
- /* Soft fill opacities (theme-adaptive via surface mix) */
28
- --m-button-fill-opacity: 10%;
29
- --m-button-fill-opacity-hover: 16%;
30
- --m-button-fill-opacity-active: 22%;
31
- --m-button-fill-opacity-muted: 6%;
32
- --m-button-fill-opacity-muted-hover: 10%;
33
- --m-button-fill-opacity-muted-active: 14%;
34
-
35
- /* Interaction */
36
- --m-button-loading-opacity: 0.72;
37
- --m-button-press-scale: 0.97;
38
- --m-button-press-duration: 160ms;
39
- --m-button-ripple-duration: 560ms;
40
- --m-button-ripple-opacity-start: 0.42;
41
- --m-button-ripple-opacity-mid: 0.22;
42
- --m-button-ghost-hover-opacity: 80%;
43
-
44
- /* Color axis defaults (overridden by --color-*) */
45
- --m-button-color-base: var(--m-color-primary);
46
- --m-button-color-hover: var(--m-color-primary-hover);
47
- --m-button-color-active: var(--m-color-primary-active);
48
- --m-button-color-light: color-mix(
49
- in srgb,
50
- var(--m-button-color-base) var(--m-button-fill-opacity),
51
- var(--m-color-surface)
52
- );
53
- --m-button-color-light-hover: color-mix(
54
- in srgb,
55
- var(--m-button-color-base) var(--m-button-fill-opacity-hover),
56
- var(--m-color-surface)
57
- );
58
- --m-button-color-light-active: color-mix(
59
- in srgb,
60
- var(--m-button-color-base) var(--m-button-fill-opacity-active),
61
- var(--m-color-surface)
62
- );
63
- --m-button-on-color: var(--m-color-on-emphasis);
64
-
65
- /* Variant surface vars */
66
- --m-button-bg: var(--m-color-surface);
67
- --m-button-fg: var(--m-color-text);
68
- --m-button-border: var(--m-color-border);
69
- --m-button-hover-bg: var(--m-button-bg);
70
- --m-button-hover-fg: var(--m-button-fg);
71
- --m-button-hover-border: var(--m-button-border);
72
- --m-button-active-bg: var(--m-button-bg);
73
- --m-button-border-style: solid;
74
-
75
- --m-button-active-fg: var(--m-button-fg);
76
- --m-button-active-border: var(--m-button-border);
77
-
78
- align-items: center;
79
- background: var(--m-button-bg);
80
- border: var(--m-button-border-width) var(--m-button-border-style)
81
- var(--m-button-border);
82
- border-radius: var(--m-button-radius);
83
- color: var(--m-button-fg);
84
- cursor: pointer;
85
- display: inline-flex;
86
- flex-direction: row;
87
- font-family: var(--m-font-sans);
88
- font-size: var(--m-button-font-size);
89
- font-weight: var(--m-button-font-weight);
90
- gap: var(--m-button-gap);
91
- justify-content: center;
92
- line-height: 1;
93
- min-height: var(--m-button-height);
94
- padding: 0 var(--m-button-padding-x);
95
- position: relative;
96
- text-decoration: none;
97
- touch-action: manipulation;
98
- transition:
99
- background-color var(--m-motion-fast) var(--m-motion-ease),
100
- border-color var(--m-motion-fast) var(--m-motion-ease),
101
- color var(--m-motion-fast) var(--m-motion-ease),
102
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
103
- opacity var(--m-motion-fast) var(--m-motion-ease),
104
- transform var(--m-button-press-duration) var(--m-motion-ease);
105
- user-select: none;
106
- vertical-align: middle;
107
- white-space: nowrap;
108
- }
109
-
110
- @media (hover: hover) and (pointer: fine) {
111
- .m-button:hover:not(:disabled):not(.m-button--disabled) {
112
- background: var(--m-button-hover-bg);
113
- border-color: var(--m-button-hover-border);
114
- color: var(--m-button-hover-fg);
115
- }
116
- }
117
-
118
- .m-button:active:not(:disabled):not(.m-button--disabled):not(.m-button--loading) {
119
- background: var(--m-button-active-bg);
120
- border-color: var(--m-button-active-border);
121
- color: var(--m-button-active-fg);
122
- }
123
-
124
- .m-button--press:active:not(:disabled):not(.m-button--disabled) {
125
- transform: scale(var(--m-button-press-scale));
126
- }
127
-
128
- .m-button:focus {
129
- outline: none;
130
- }
131
-
132
- .m-button:focus-visible {
133
- box-shadow: var(--m-focus-shadow);
134
- outline: none;
135
- }
136
-
137
- .m-button:disabled,
138
- .m-button--disabled {
139
- background: var(--m-color-bg-disabled);
140
- border-color: var(--m-color-border);
141
- color: var(--m-color-text-disabled);
142
- cursor: not-allowed;
143
- opacity: 1;
144
- }
145
-
146
- .m-button--variant-text:disabled,
147
- .m-button--variant-link:disabled,
148
- .m-button--variant-text.m-button--disabled,
149
- .m-button--variant-link.m-button--disabled,
150
- .m-button--ghost:disabled,
151
- .m-button--ghost.m-button--disabled {
152
- background: transparent;
153
- border-color: transparent;
154
- }
155
-
156
- /* ---------- Color axis ---------- */
157
-
158
- .m-button--color-default {
159
- --m-button-color-base: var(--m-color-text);
160
- --m-button-color-hover: var(--m-color-primary-hover);
161
- --m-button-color-active: var(--m-color-primary-active);
162
- --m-button-color-light: color-mix(
163
- in srgb,
164
- var(--m-color-text) var(--m-button-fill-opacity-muted),
165
- var(--m-color-surface)
166
- );
167
- --m-button-color-light-hover: color-mix(
168
- in srgb,
169
- var(--m-color-text) var(--m-button-fill-opacity-muted-hover),
170
- var(--m-color-surface)
171
- );
172
- --m-button-color-light-active: color-mix(
173
- in srgb,
174
- var(--m-color-text) var(--m-button-fill-opacity-muted-active),
175
- var(--m-color-surface)
176
- );
177
- --m-button-on-color: var(--m-color-contrast-fg);
178
- --m-button-solid-bg: var(--m-color-contrast);
179
- --m-button-solid-bg-hover: var(--m-color-contrast-hover);
180
- --m-button-solid-bg-active: var(--m-color-contrast-active);
181
- --m-button-outlined-border: var(--m-color-border);
182
- --m-button-outlined-fg: var(--m-color-text);
183
- --m-button-outlined-hover-border: var(--m-color-primary-hover);
184
- --m-button-outlined-hover-fg: var(--m-color-primary-hover);
185
- --m-button-outlined-bg: var(--m-color-surface);
186
- /* Match ant default outlined/dashed: keep surface bg, only shift border/text. */
187
- --m-button-outlined-hover-bg: var(--m-color-surface);
188
- --m-button-outlined-active-bg: var(--m-color-surface);
189
- }
190
-
191
- .m-button--color-primary {
192
- --m-button-color-base: var(--m-color-primary);
193
- --m-button-color-hover: var(--m-color-primary-hover);
194
- --m-button-color-active: var(--m-color-primary-active);
195
- --m-button-solid-bg: var(--m-color-primary);
196
- --m-button-solid-bg-hover: var(--m-color-primary-hover);
197
- --m-button-solid-bg-active: var(--m-color-primary-active);
198
- --m-button-outlined-border: var(--m-color-primary);
199
- --m-button-outlined-fg: var(--m-color-primary);
200
- --m-button-outlined-hover-border: var(--m-color-primary-hover);
201
- --m-button-outlined-hover-fg: var(--m-color-primary-hover);
202
- --m-button-outlined-bg: var(--m-color-surface);
203
- --m-button-outlined-hover-bg: var(--m-button-color-light);
204
- }
205
-
206
- .m-button--color-danger {
207
- --m-button-color-base: var(--m-color-danger);
208
- --m-button-color-hover: color-mix(
209
- in srgb,
210
- var(--m-color-danger) 88%,
211
- var(--m-color-text)
212
- );
213
- --m-button-color-active: color-mix(
214
- in srgb,
215
- var(--m-color-danger) 76%,
216
- var(--m-color-text)
217
- );
218
- --m-button-solid-bg: var(--m-color-danger);
219
- --m-button-solid-bg-hover: var(--m-button-color-hover);
220
- --m-button-solid-bg-active: var(--m-button-color-active);
221
- --m-button-outlined-border: var(--m-color-danger);
222
- --m-button-outlined-fg: var(--m-color-danger);
223
- --m-button-outlined-hover-border: var(--m-button-color-hover);
224
- --m-button-outlined-hover-fg: var(--m-button-color-hover);
225
- --m-button-outlined-bg: var(--m-color-surface);
226
- --m-button-outlined-hover-bg: var(--m-button-color-light);
227
- }
228
-
229
- .m-button--color-success {
230
- --m-button-color-base: var(--m-color-success);
231
- --m-button-color-hover: color-mix(
232
- in srgb,
233
- var(--m-color-success) 88%,
234
- var(--m-color-text)
235
- );
236
- --m-button-color-active: color-mix(
237
- in srgb,
238
- var(--m-color-success) 76%,
239
- var(--m-color-text)
240
- );
241
- --m-button-solid-bg: var(--m-color-success);
242
- --m-button-solid-bg-hover: var(--m-button-color-hover);
243
- --m-button-solid-bg-active: var(--m-button-color-active);
244
- --m-button-outlined-border: var(--m-color-success);
245
- --m-button-outlined-fg: var(--m-color-success);
246
- --m-button-outlined-hover-border: var(--m-button-color-hover);
247
- --m-button-outlined-hover-fg: var(--m-button-color-hover);
248
- --m-button-outlined-bg: var(--m-color-surface);
249
- --m-button-outlined-hover-bg: var(--m-button-color-light);
250
- }
251
-
252
- .m-button--color-info {
253
- --m-button-color-base: var(--m-color-info);
254
- --m-button-color-hover: color-mix(
255
- in srgb,
256
- var(--m-color-info) 88%,
257
- var(--m-color-text)
258
- );
259
- --m-button-color-active: color-mix(
260
- in srgb,
261
- var(--m-color-info) 76%,
262
- var(--m-color-text)
263
- );
264
- --m-button-solid-bg: var(--m-color-info);
265
- --m-button-solid-bg-hover: var(--m-button-color-hover);
266
- --m-button-solid-bg-active: var(--m-button-color-active);
267
- --m-button-outlined-border: var(--m-color-info);
268
- --m-button-outlined-fg: var(--m-color-info);
269
- --m-button-outlined-hover-border: var(--m-button-color-hover);
270
- --m-button-outlined-hover-fg: var(--m-button-color-hover);
271
- --m-button-outlined-bg: var(--m-color-surface);
272
- --m-button-outlined-hover-bg: var(--m-button-color-light);
273
- }
274
-
275
- .m-button--color-warning {
276
- --m-button-color-base: var(--m-color-warn);
277
- --m-button-color-hover: color-mix(
278
- in srgb,
279
- var(--m-color-warn) 88%,
280
- var(--m-color-text)
281
- );
282
- --m-button-color-active: color-mix(
283
- in srgb,
284
- var(--m-color-warn) 76%,
285
- var(--m-color-text)
286
- );
287
- --m-button-solid-bg: var(--m-color-warn);
288
- --m-button-solid-bg-hover: var(--m-button-color-hover);
289
- --m-button-solid-bg-active: var(--m-button-color-active);
290
- --m-button-outlined-border: var(--m-color-warn);
291
- --m-button-outlined-fg: var(--m-color-warn);
292
- --m-button-outlined-hover-border: var(--m-button-color-hover);
293
- --m-button-outlined-hover-fg: var(--m-button-color-hover);
294
- --m-button-outlined-bg: var(--m-color-surface);
295
- --m-button-outlined-hover-bg: var(--m-button-color-light);
296
- }
297
-
298
- .m-button--color-help {
299
- --m-button-color-base: var(--m-color-help);
300
- --m-button-color-hover: color-mix(
301
- in srgb,
302
- var(--m-color-help) 88%,
303
- var(--m-color-text)
304
- );
305
- --m-button-color-active: color-mix(
306
- in srgb,
307
- var(--m-color-help) 76%,
308
- var(--m-color-text)
309
- );
310
- --m-button-solid-bg: var(--m-color-help);
311
- --m-button-solid-bg-hover: var(--m-button-color-hover);
312
- --m-button-solid-bg-active: var(--m-button-color-active);
313
- --m-button-outlined-border: var(--m-color-help);
314
- --m-button-outlined-fg: var(--m-color-help);
315
- --m-button-outlined-hover-border: var(--m-button-color-hover);
316
- --m-button-outlined-hover-fg: var(--m-button-color-hover);
317
- --m-button-outlined-bg: var(--m-color-surface);
318
- --m-button-outlined-hover-bg: var(--m-button-color-light);
319
- }
320
-
321
- .m-button--color-contrast {
322
- --m-button-color-base: var(--m-color-contrast);
323
- --m-button-color-hover: var(--m-color-contrast-hover);
324
- --m-button-color-active: var(--m-color-contrast-active);
325
- --m-button-on-color: var(--m-color-contrast-fg);
326
- --m-button-solid-bg: var(--m-color-contrast);
327
- --m-button-solid-bg-hover: var(--m-color-contrast-hover);
328
- --m-button-solid-bg-active: var(--m-color-contrast-active);
329
- --m-button-outlined-border: var(--m-color-contrast);
330
- --m-button-outlined-fg: var(--m-color-contrast);
331
- --m-button-outlined-hover-border: var(--m-color-contrast-hover);
332
- --m-button-outlined-hover-fg: var(--m-color-contrast-hover);
333
- --m-button-outlined-bg: var(--m-color-surface);
334
- --m-button-outlined-hover-bg: var(--m-button-color-light);
335
- }
336
-
337
- .m-button--color-link {
338
- --m-button-color-base: var(--m-color-primary);
339
- --m-button-color-hover: var(--m-color-primary-hover);
340
- --m-button-color-active: var(--m-color-primary-active);
341
- }
342
-
343
- /* ---------- Variant axis ---------- */
344
-
345
- .m-button--variant-solid {
346
- --m-button-bg: var(--m-button-solid-bg, var(--m-button-color-base));
347
- --m-button-fg: var(--m-button-on-color);
348
- --m-button-border: transparent;
349
- --m-button-hover-bg: var(
350
- --m-button-solid-bg-hover,
351
- var(--m-button-color-hover)
352
- );
353
- --m-button-hover-fg: var(--m-button-on-color);
354
- --m-button-hover-border: transparent;
355
- --m-button-active-bg: var(
356
- --m-button-solid-bg-active,
357
- var(--m-button-color-active)
358
- );
359
- --m-button-active-fg: var(--m-button-on-color);
360
- --m-button-active-border: transparent;
361
- }
362
-
363
- .m-button--variant-outlined,
364
- .m-button--variant-dashed {
365
- --m-button-bg: var(--m-button-outlined-bg, var(--m-color-surface));
366
- --m-button-fg: var(--m-button-outlined-fg, var(--m-button-color-base));
367
- --m-button-border: var(
368
- --m-button-outlined-border,
369
- var(--m-button-color-base)
370
- );
371
- --m-button-hover-bg: var(
372
- --m-button-outlined-hover-bg,
373
- var(--m-button-color-light)
374
- );
375
- --m-button-hover-fg: var(
376
- --m-button-outlined-hover-fg,
377
- var(--m-button-color-hover)
378
- );
379
- --m-button-hover-border: var(
380
- --m-button-outlined-hover-border,
381
- var(--m-button-color-hover)
382
- );
383
- --m-button-active-bg: var(
384
- --m-button-outlined-active-bg,
385
- var(--m-button-color-light-active, var(--m-button-color-light))
386
- );
387
- --m-button-active-fg: var(
388
- --m-button-color-active,
389
- var(--m-button-hover-fg)
390
- );
391
- --m-button-active-border: var(
392
- --m-button-color-active,
393
- var(--m-button-hover-border)
394
- );
395
- }
396
-
397
- .m-button--variant-dashed {
398
- --m-button-border-style: dashed;
399
- }
400
-
401
- .m-button--variant-filled {
402
- --m-button-bg: var(--m-button-color-light);
403
- --m-button-fg: var(--m-button-color-base);
404
- --m-button-border: transparent;
405
- --m-button-hover-bg: var(--m-button-color-light-hover);
406
- --m-button-hover-fg: var(--m-button-color-base);
407
- --m-button-hover-border: transparent;
408
- --m-button-active-bg: var(--m-button-color-light-active);
409
- --m-button-active-fg: var(--m-button-color-base);
410
- --m-button-active-border: transparent;
411
- }
412
-
413
- .m-button--variant-text,
414
- .m-button--variant-link {
415
- --m-button-bg: transparent;
416
- --m-button-fg: var(--m-button-color-base);
417
- --m-button-border: transparent;
418
- --m-button-hover-fg: var(--m-button-color-hover);
419
- --m-button-hover-border: transparent;
420
- --m-button-active-bg: transparent;
421
- --m-button-active-fg: var(--m-button-color-active, var(--m-button-color-hover));
422
- --m-button-active-border: transparent;
423
- }
424
-
425
- .m-button--variant-text {
426
- --m-button-hover-bg: var(--m-button-color-light);
427
- --m-button-active-bg: var(--m-button-color-light-active);
428
- }
429
-
430
- .m-button--variant-link {
431
- --m-button-hover-bg: transparent;
432
- --m-button-height: auto;
433
- height: auto;
434
- min-height: 0;
435
- padding: 0;
436
- }
437
-
438
- .m-button--variant-link:hover:not(:disabled):not(.m-button--disabled) {
439
- text-decoration: underline;
440
- }
441
-
442
- .m-button--color-default.m-button--variant-text {
443
- --m-button-color-base: var(--m-color-text);
444
- --m-button-color-hover: var(--m-color-text);
445
- --m-button-hover-bg: var(--m-button-color-light);
446
- --m-button-active-bg: var(--m-button-color-light-hover);
447
- }
448
-
449
- .m-button--color-default.m-button--variant-filled {
450
- --m-button-color-base: var(--m-color-text);
451
- }
452
-
453
- .m-button--color-link.m-button--variant-link {
454
- --m-button-color-base: var(--m-color-primary);
455
- --m-button-color-hover: var(--m-color-primary-hover);
456
- }
457
-
458
- /* Ghost: transparent fill on bordered variants */
459
- .m-button--ghost {
460
- --m-button-bg: transparent;
461
- --m-button-hover-bg: transparent;
462
- --m-button-active-bg: transparent;
463
- }
464
-
465
- .m-button--ghost.m-button--variant-solid,
466
- .m-button--ghost.m-button--variant-outlined,
467
- .m-button--ghost.m-button--variant-dashed {
468
- --m-button-fg: var(--m-button-color-base);
469
- --m-button-border: var(--m-button-color-base);
470
- --m-button-hover-fg: var(--m-button-color-hover);
471
- --m-button-hover-border: var(--m-button-color-hover);
472
- --m-button-active-fg: var(--m-button-color-active, var(--m-button-color-hover));
473
- --m-button-active-border: var(--m-button-color-active, var(--m-button-color-hover));
474
- }
475
- .m-button--ghost.m-button--color-default {
476
- --m-button-color-base: var(--m-color-on-emphasis);
477
- --m-button-color-hover: color-mix(
478
- in srgb,
479
- var(--m-color-on-emphasis) var(--m-button-ghost-hover-opacity),
480
- transparent
481
- );
482
- --m-button-fg: var(--m-color-on-emphasis);
483
- --m-button-border: var(--m-color-on-emphasis);
484
- --m-button-hover-fg: var(--m-button-color-hover);
485
- --m-button-hover-border: var(--m-button-color-hover);
486
- }
487
-
488
- /* ---------- Size / shape / layout ---------- */
489
-
490
- .m-button--small {
491
- --m-button-icon-size: var(--m-button-icon-size-small);
492
- --m-button-font-size: var(--m-control-font-small);
493
- --m-button-height: var(--m-control-height-small);
494
- --m-button-padding-x: var(--m-button-padding-x-small);
495
- }
496
-
497
- .m-button--large {
498
- --m-button-icon-size: var(--m-button-icon-size-large);
499
- --m-button-font-size: var(--m-control-font-large);
500
- --m-button-height: var(--m-control-height-large);
501
- --m-button-padding-x: var(--m-button-padding-x-large);
502
- }
503
-
504
- .m-button--block {
505
- display: flex;
506
- width: 100%;
507
- }
508
-
509
- .m-button--shape-round {
510
- --m-button-radius: var(--m-radius-full);
511
- padding-inline: calc(
512
- var(--m-button-padding-x) + var(--m-button-padding-x-round-extra)
513
- );
514
- }
515
-
516
- .m-button--shape-circle {
517
- --m-button-radius: var(--m-radius-full);
518
- min-width: var(--m-button-height);
519
- padding-inline: 0;
520
- width: var(--m-button-height);
521
- }
522
-
523
- .m-button--shape-square {
524
- --m-button-radius: 0;
525
- }
526
-
527
- .m-button--icon-only {
528
- gap: 0;
529
- min-width: var(--m-button-height);
530
- padding: 0;
531
- width: var(--m-button-height);
532
- }
533
-
534
- .m-button--icon-end {
535
- flex-direction: row-reverse;
536
- }
537
-
538
- .m-button--two-chinese-chars > .m-button__label {
539
- letter-spacing: var(--m-button-cn-letter-spacing);
540
- margin-inline-end: calc(var(--m-button-cn-letter-spacing) * -1);
541
- }
542
-
543
- .m-button--loading {
544
- cursor: default;
545
- opacity: var(--m-button-loading-opacity);
546
- pointer-events: none;
547
- }
548
-
549
- /* ---------- Parts ---------- */
550
-
551
- .m-button__icon,
552
- .m-button__label {
553
- align-items: center;
554
- display: inline-flex;
555
- justify-content: center;
556
- }
557
-
558
- .m-button__icon,
559
- .m-button__label {
560
- position: relative;
561
- z-index: 1;
562
- }
563
-
564
- .m-button__ripple {
565
- border-radius: inherit;
566
- inset: 0;
567
- overflow: hidden;
568
- pointer-events: none;
569
- position: absolute;
570
- z-index: 0;
571
- }
572
-
573
- .m-button__ripple-wave {
574
- background: currentColor;
575
- border-radius: var(--m-radius-full);
576
- opacity: 0;
577
- pointer-events: none;
578
- position: absolute;
579
- transform: scale(0);
580
- will-change: transform, opacity;
581
- }
582
-
583
- .m-button__ripple-wave--fallback {
584
- animation: m-button-ripple var(--m-button-ripple-duration)
585
- var(--m-motion-ease) forwards;
586
- }
587
-
588
- @keyframes m-button-ripple {
589
- 0% {
590
- opacity: var(--m-button-ripple-opacity-start);
591
- transform: scale(0);
592
- }
593
- 55% {
594
- opacity: var(--m-button-ripple-opacity-mid);
595
- transform: scale(0.55);
596
- }
597
- 100% {
598
- opacity: 0;
599
- transform: scale(1);
600
- }
601
- }
602
-
603
- .m-button__icon {
604
- flex: 0 0 auto;
605
- height: var(--m-button-icon-size);
606
- line-height: 0;
607
- width: var(--m-button-icon-size);
608
- }
609
-
610
- .m-button__icon :is(.m-icon, .m-button__icon-graphic, svg) {
611
- display: block;
612
- flex-shrink: 0;
613
- height: 100%;
614
- width: 100%;
615
- }
616
-
617
- .m-button__icon .m-icon {
618
- max-height: 100%;
619
- max-width: 100%;
620
- }
621
-
622
- .m-button__spinner {
623
- animation: m-button-spin var(--m-motion-spin-fast) linear infinite;
624
- border: var(--m-button-spinner-border-width) solid currentColor;
625
- border-radius: var(--m-radius-full);
626
- border-right-color: transparent;
627
- height: var(--m-button-spinner-size);
628
- width: var(--m-button-spinner-size);
629
- }
630
-
631
- @keyframes m-button-spin {
632
- to {
633
- transform: rotate(360deg);
634
- }
635
- }
636
-
637
- @media (prefers-reduced-motion: reduce) {
638
- .m-button {
639
- --m-button-ripple-duration: 0ms;
640
- transition-duration: 0ms;
641
- }
642
-
643
- .m-button__spinner {
644
- animation-duration: 0ms;
645
- }
646
- }
647
-
648
- :root[data-m-motion='reduced'] .m-button {
649
- --m-button-ripple-duration: 280ms;
650
- --m-button-press-duration: 120ms;
651
- }
652
-
653
- :root[data-m-motion='none'] .m-button {
654
- --m-button-ripple-duration: 0ms;
655
- --m-button-press-duration: 0ms;
656
- }
657
-
658
- /* ---------- Group ---------- */
659
-
660
- .m-button-group {
661
- display: inline-flex;
662
- vertical-align: middle;
663
- }
664
-
665
- .m-button-group--block {
666
- display: flex;
667
- width: 100%;
668
- }
669
-
670
- .m-button-group--block > .m-button {
671
- flex: 1;
672
- }
673
-
674
- .m-button-group > .m-button {
675
- border-radius: 0;
676
- margin: 0;
677
- }
678
-
679
- .m-button-group > .m-button + .m-button {
680
- margin-inline-start: calc(var(--m-border-width) * -1);
681
- }
682
-
683
- .m-button-group > .m-button:hover,
684
- .m-button-group > .m-button:focus-visible,
685
- .m-button-group > .m-button:active {
686
- position: relative;
687
- z-index: 1;
688
- }
689
-
690
- .m-button-group > .m-button:first-child {
691
- border-end-start-radius: var(--m-radius-control);
692
- border-start-start-radius: var(--m-radius-control);
693
- }
694
-
695
- .m-button-group > .m-button:last-child {
696
- border-end-end-radius: var(--m-radius-control);
697
- border-start-end-radius: var(--m-radius-control);
698
- }
1
+ .m-button {
2
+ /* Geometry */
3
+ --m-button-radius: var(--m-radius-control);
4
+ --m-button-border-width: var(--m-border-width);
5
+ --m-button-gap: var(--m-space-2);
6
+ --m-button-font-weight: var(--m-font-weight);
7
+ --m-button-font-size: var(--m-control-font-medium);
8
+ --m-button-height: var(--m-control-height-medium);
9
+ --m-button-padding-x: var(--m-button-padding-x-medium);
10
+ --m-button-padding-x-small: var(--m-control-padding-x-small);
11
+ --m-button-padding-x-medium: calc(
12
+ var(--m-control-padding-x-medium) + var(--m-space-1)
13
+ );
14
+ --m-button-padding-x-large: calc(
15
+ var(--m-control-padding-x-large) + var(--m-space-1)
16
+ );
17
+ --m-button-padding-x-round-extra: var(--m-space-2);
18
+
19
+ /* Icon / spinner */
20
+ --m-button-icon-size: 1rem;
21
+ --m-button-icon-size-small: 0.875rem;
22
+ --m-button-icon-size-large: 1.25rem;
23
+ --m-button-spinner-size: 0.875rem;
24
+ --m-button-spinner-border-width: 2px;
25
+ --m-button-cn-letter-spacing: 0.3em;
26
+
27
+ /* Soft fill opacities (theme-adaptive via surface mix) */
28
+ --m-button-fill-opacity: 10%;
29
+ --m-button-fill-opacity-hover: 16%;
30
+ --m-button-fill-opacity-active: 22%;
31
+ --m-button-fill-opacity-muted: 6%;
32
+ --m-button-fill-opacity-muted-hover: 10%;
33
+ --m-button-fill-opacity-muted-active: 14%;
34
+
35
+ /* Interaction */
36
+ --m-button-loading-opacity: 0.72;
37
+ --m-button-press-scale: 0.97;
38
+ --m-button-press-duration: 160ms;
39
+ --m-button-ripple-duration: 560ms;
40
+ --m-button-ripple-opacity-start: 0.42;
41
+ --m-button-ripple-opacity-mid: 0.22;
42
+ --m-button-ghost-hover-opacity: 80%;
43
+
44
+ /* Color axis defaults (overridden by --color-*) */
45
+ --m-button-color-base: var(--m-color-primary);
46
+ --m-button-color-hover: var(--m-color-primary-hover);
47
+ --m-button-color-active: var(--m-color-primary-active);
48
+ --m-button-color-light: color-mix(
49
+ in srgb,
50
+ var(--m-button-color-base) var(--m-button-fill-opacity),
51
+ var(--m-color-surface)
52
+ );
53
+ --m-button-color-light-hover: color-mix(
54
+ in srgb,
55
+ var(--m-button-color-base) var(--m-button-fill-opacity-hover),
56
+ var(--m-color-surface)
57
+ );
58
+ --m-button-color-light-active: color-mix(
59
+ in srgb,
60
+ var(--m-button-color-base) var(--m-button-fill-opacity-active),
61
+ var(--m-color-surface)
62
+ );
63
+ --m-button-on-color: var(--m-color-on-emphasis);
64
+
65
+ /* Variant surface vars */
66
+ --m-button-bg: var(--m-color-surface);
67
+ --m-button-fg: var(--m-color-text);
68
+ --m-button-border: var(--m-color-border);
69
+ --m-button-hover-bg: var(--m-button-bg);
70
+ --m-button-hover-fg: var(--m-button-fg);
71
+ --m-button-hover-border: var(--m-button-border);
72
+ --m-button-active-bg: var(--m-button-bg);
73
+ --m-button-border-style: solid;
74
+
75
+ --m-button-active-fg: var(--m-button-fg);
76
+ --m-button-active-border: var(--m-button-border);
77
+
78
+ align-items: center;
79
+ background: var(--m-button-bg);
80
+ border: var(--m-button-border-width) var(--m-button-border-style)
81
+ var(--m-button-border);
82
+ border-radius: var(--m-button-radius);
83
+ color: var(--m-button-fg);
84
+ cursor: pointer;
85
+ display: inline-flex;
86
+ flex-direction: row;
87
+ font-family: var(--m-font-sans);
88
+ font-size: var(--m-button-font-size);
89
+ font-weight: var(--m-button-font-weight);
90
+ gap: var(--m-button-gap);
91
+ justify-content: center;
92
+ line-height: 1;
93
+ min-height: var(--m-button-height);
94
+ padding: 0 var(--m-button-padding-x);
95
+ position: relative;
96
+ text-decoration: none;
97
+ touch-action: manipulation;
98
+ transition:
99
+ background-color var(--m-motion-fast) var(--m-motion-ease),
100
+ border-color var(--m-motion-fast) var(--m-motion-ease),
101
+ color var(--m-motion-fast) var(--m-motion-ease),
102
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
103
+ opacity var(--m-motion-fast) var(--m-motion-ease),
104
+ transform var(--m-button-press-duration) var(--m-motion-ease);
105
+ user-select: none;
106
+ vertical-align: middle;
107
+ white-space: nowrap;
108
+ }
109
+
110
+ @media (hover: hover) and (pointer: fine) {
111
+ .m-button:hover:not(:disabled):not(.m-button--disabled) {
112
+ background: var(--m-button-hover-bg);
113
+ border-color: var(--m-button-hover-border);
114
+ color: var(--m-button-hover-fg);
115
+ }
116
+ }
117
+
118
+ .m-button:active:not(:disabled):not(.m-button--disabled):not(.m-button--loading) {
119
+ background: var(--m-button-active-bg);
120
+ border-color: var(--m-button-active-border);
121
+ color: var(--m-button-active-fg);
122
+ }
123
+
124
+ .m-button--press:active:not(:disabled):not(.m-button--disabled) {
125
+ transform: scale(var(--m-button-press-scale));
126
+ }
127
+
128
+ .m-button:focus {
129
+ outline: none;
130
+ }
131
+
132
+ .m-button:focus-visible {
133
+ box-shadow: var(--m-focus-shadow);
134
+ outline: none;
135
+ }
136
+
137
+ .m-button:disabled,
138
+ .m-button--disabled {
139
+ background: var(--m-color-bg-disabled);
140
+ border-color: var(--m-color-border);
141
+ color: var(--m-color-text-disabled);
142
+ cursor: not-allowed;
143
+ opacity: 1;
144
+ }
145
+
146
+ .m-button--variant-text:disabled,
147
+ .m-button--variant-link:disabled,
148
+ .m-button--variant-text.m-button--disabled,
149
+ .m-button--variant-link.m-button--disabled,
150
+ .m-button--ghost:disabled,
151
+ .m-button--ghost.m-button--disabled {
152
+ background: transparent;
153
+ border-color: transparent;
154
+ }
155
+
156
+ /* ---------- Color axis ---------- */
157
+
158
+ .m-button--color-default {
159
+ --m-button-color-base: var(--m-color-text);
160
+ --m-button-color-hover: var(--m-color-primary-hover);
161
+ --m-button-color-active: var(--m-color-primary-active);
162
+ --m-button-color-light: color-mix(
163
+ in srgb,
164
+ var(--m-color-text) var(--m-button-fill-opacity-muted),
165
+ var(--m-color-surface)
166
+ );
167
+ --m-button-color-light-hover: color-mix(
168
+ in srgb,
169
+ var(--m-color-text) var(--m-button-fill-opacity-muted-hover),
170
+ var(--m-color-surface)
171
+ );
172
+ --m-button-color-light-active: color-mix(
173
+ in srgb,
174
+ var(--m-color-text) var(--m-button-fill-opacity-muted-active),
175
+ var(--m-color-surface)
176
+ );
177
+ --m-button-on-color: var(--m-color-contrast-fg);
178
+ --m-button-solid-bg: var(--m-color-contrast);
179
+ --m-button-solid-bg-hover: var(--m-color-contrast-hover);
180
+ --m-button-solid-bg-active: var(--m-color-contrast-active);
181
+ --m-button-outlined-border: var(--m-color-border);
182
+ --m-button-outlined-fg: var(--m-color-text);
183
+ --m-button-outlined-hover-border: var(--m-color-primary-hover);
184
+ --m-button-outlined-hover-fg: var(--m-color-primary-hover);
185
+ --m-button-outlined-bg: var(--m-color-surface);
186
+ /* Match ant default outlined/dashed: keep surface bg, only shift border/text. */
187
+ --m-button-outlined-hover-bg: var(--m-color-surface);
188
+ --m-button-outlined-active-bg: var(--m-color-surface);
189
+ }
190
+
191
+ .m-button--color-primary {
192
+ --m-button-color-base: var(--m-color-primary);
193
+ --m-button-color-hover: var(--m-color-primary-hover);
194
+ --m-button-color-active: var(--m-color-primary-active);
195
+ --m-button-solid-bg: var(--m-color-primary);
196
+ --m-button-solid-bg-hover: var(--m-color-primary-hover);
197
+ --m-button-solid-bg-active: var(--m-color-primary-active);
198
+ --m-button-outlined-border: var(--m-color-primary);
199
+ --m-button-outlined-fg: var(--m-color-primary);
200
+ --m-button-outlined-hover-border: var(--m-color-primary-hover);
201
+ --m-button-outlined-hover-fg: var(--m-color-primary-hover);
202
+ --m-button-outlined-bg: var(--m-color-surface);
203
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
204
+ }
205
+
206
+ .m-button--color-danger {
207
+ --m-button-color-base: var(--m-color-danger);
208
+ --m-button-color-hover: color-mix(
209
+ in srgb,
210
+ var(--m-color-danger) 88%,
211
+ var(--m-color-text)
212
+ );
213
+ --m-button-color-active: color-mix(
214
+ in srgb,
215
+ var(--m-color-danger) 76%,
216
+ var(--m-color-text)
217
+ );
218
+ --m-button-solid-bg: var(--m-color-danger);
219
+ --m-button-solid-bg-hover: var(--m-button-color-hover);
220
+ --m-button-solid-bg-active: var(--m-button-color-active);
221
+ --m-button-outlined-border: var(--m-color-danger);
222
+ --m-button-outlined-fg: var(--m-color-danger);
223
+ --m-button-outlined-hover-border: var(--m-button-color-hover);
224
+ --m-button-outlined-hover-fg: var(--m-button-color-hover);
225
+ --m-button-outlined-bg: var(--m-color-surface);
226
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
227
+ }
228
+
229
+ .m-button--color-success {
230
+ --m-button-color-base: var(--m-color-success);
231
+ --m-button-color-hover: color-mix(
232
+ in srgb,
233
+ var(--m-color-success) 88%,
234
+ var(--m-color-text)
235
+ );
236
+ --m-button-color-active: color-mix(
237
+ in srgb,
238
+ var(--m-color-success) 76%,
239
+ var(--m-color-text)
240
+ );
241
+ --m-button-solid-bg: var(--m-color-success);
242
+ --m-button-solid-bg-hover: var(--m-button-color-hover);
243
+ --m-button-solid-bg-active: var(--m-button-color-active);
244
+ --m-button-outlined-border: var(--m-color-success);
245
+ --m-button-outlined-fg: var(--m-color-success);
246
+ --m-button-outlined-hover-border: var(--m-button-color-hover);
247
+ --m-button-outlined-hover-fg: var(--m-button-color-hover);
248
+ --m-button-outlined-bg: var(--m-color-surface);
249
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
250
+ }
251
+
252
+ .m-button--color-info {
253
+ --m-button-color-base: var(--m-color-info);
254
+ --m-button-color-hover: color-mix(
255
+ in srgb,
256
+ var(--m-color-info) 88%,
257
+ var(--m-color-text)
258
+ );
259
+ --m-button-color-active: color-mix(
260
+ in srgb,
261
+ var(--m-color-info) 76%,
262
+ var(--m-color-text)
263
+ );
264
+ --m-button-solid-bg: var(--m-color-info);
265
+ --m-button-solid-bg-hover: var(--m-button-color-hover);
266
+ --m-button-solid-bg-active: var(--m-button-color-active);
267
+ --m-button-outlined-border: var(--m-color-info);
268
+ --m-button-outlined-fg: var(--m-color-info);
269
+ --m-button-outlined-hover-border: var(--m-button-color-hover);
270
+ --m-button-outlined-hover-fg: var(--m-button-color-hover);
271
+ --m-button-outlined-bg: var(--m-color-surface);
272
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
273
+ }
274
+
275
+ .m-button--color-warning {
276
+ --m-button-color-base: var(--m-color-warn);
277
+ --m-button-color-hover: color-mix(
278
+ in srgb,
279
+ var(--m-color-warn) 88%,
280
+ var(--m-color-text)
281
+ );
282
+ --m-button-color-active: color-mix(
283
+ in srgb,
284
+ var(--m-color-warn) 76%,
285
+ var(--m-color-text)
286
+ );
287
+ --m-button-solid-bg: var(--m-color-warn);
288
+ --m-button-solid-bg-hover: var(--m-button-color-hover);
289
+ --m-button-solid-bg-active: var(--m-button-color-active);
290
+ --m-button-outlined-border: var(--m-color-warn);
291
+ --m-button-outlined-fg: var(--m-color-warn);
292
+ --m-button-outlined-hover-border: var(--m-button-color-hover);
293
+ --m-button-outlined-hover-fg: var(--m-button-color-hover);
294
+ --m-button-outlined-bg: var(--m-color-surface);
295
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
296
+ }
297
+
298
+ .m-button--color-help {
299
+ --m-button-color-base: var(--m-color-help);
300
+ --m-button-color-hover: color-mix(
301
+ in srgb,
302
+ var(--m-color-help) 88%,
303
+ var(--m-color-text)
304
+ );
305
+ --m-button-color-active: color-mix(
306
+ in srgb,
307
+ var(--m-color-help) 76%,
308
+ var(--m-color-text)
309
+ );
310
+ --m-button-solid-bg: var(--m-color-help);
311
+ --m-button-solid-bg-hover: var(--m-button-color-hover);
312
+ --m-button-solid-bg-active: var(--m-button-color-active);
313
+ --m-button-outlined-border: var(--m-color-help);
314
+ --m-button-outlined-fg: var(--m-color-help);
315
+ --m-button-outlined-hover-border: var(--m-button-color-hover);
316
+ --m-button-outlined-hover-fg: var(--m-button-color-hover);
317
+ --m-button-outlined-bg: var(--m-color-surface);
318
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
319
+ }
320
+
321
+ .m-button--color-contrast {
322
+ --m-button-color-base: var(--m-color-contrast);
323
+ --m-button-color-hover: var(--m-color-contrast-hover);
324
+ --m-button-color-active: var(--m-color-contrast-active);
325
+ --m-button-on-color: var(--m-color-contrast-fg);
326
+ --m-button-solid-bg: var(--m-color-contrast);
327
+ --m-button-solid-bg-hover: var(--m-color-contrast-hover);
328
+ --m-button-solid-bg-active: var(--m-color-contrast-active);
329
+ --m-button-outlined-border: var(--m-color-contrast);
330
+ --m-button-outlined-fg: var(--m-color-contrast);
331
+ --m-button-outlined-hover-border: var(--m-color-contrast-hover);
332
+ --m-button-outlined-hover-fg: var(--m-color-contrast-hover);
333
+ --m-button-outlined-bg: var(--m-color-surface);
334
+ --m-button-outlined-hover-bg: var(--m-button-color-light);
335
+ }
336
+
337
+ .m-button--color-link {
338
+ --m-button-color-base: var(--m-color-primary);
339
+ --m-button-color-hover: var(--m-color-primary-hover);
340
+ --m-button-color-active: var(--m-color-primary-active);
341
+ }
342
+
343
+ /* ---------- Variant axis ---------- */
344
+
345
+ .m-button--variant-solid {
346
+ --m-button-bg: var(--m-button-solid-bg, var(--m-button-color-base));
347
+ --m-button-fg: var(--m-button-on-color);
348
+ --m-button-border: transparent;
349
+ --m-button-hover-bg: var(
350
+ --m-button-solid-bg-hover,
351
+ var(--m-button-color-hover)
352
+ );
353
+ --m-button-hover-fg: var(--m-button-on-color);
354
+ --m-button-hover-border: transparent;
355
+ --m-button-active-bg: var(
356
+ --m-button-solid-bg-active,
357
+ var(--m-button-color-active)
358
+ );
359
+ --m-button-active-fg: var(--m-button-on-color);
360
+ --m-button-active-border: transparent;
361
+ }
362
+
363
+ .m-button--variant-outlined,
364
+ .m-button--variant-dashed {
365
+ --m-button-bg: var(--m-button-outlined-bg, var(--m-color-surface));
366
+ --m-button-fg: var(--m-button-outlined-fg, var(--m-button-color-base));
367
+ --m-button-border: var(
368
+ --m-button-outlined-border,
369
+ var(--m-button-color-base)
370
+ );
371
+ --m-button-hover-bg: var(
372
+ --m-button-outlined-hover-bg,
373
+ var(--m-button-color-light)
374
+ );
375
+ --m-button-hover-fg: var(
376
+ --m-button-outlined-hover-fg,
377
+ var(--m-button-color-hover)
378
+ );
379
+ --m-button-hover-border: var(
380
+ --m-button-outlined-hover-border,
381
+ var(--m-button-color-hover)
382
+ );
383
+ --m-button-active-bg: var(
384
+ --m-button-outlined-active-bg,
385
+ var(--m-button-color-light-active, var(--m-button-color-light))
386
+ );
387
+ --m-button-active-fg: var(
388
+ --m-button-color-active,
389
+ var(--m-button-hover-fg)
390
+ );
391
+ --m-button-active-border: var(
392
+ --m-button-color-active,
393
+ var(--m-button-hover-border)
394
+ );
395
+ }
396
+
397
+ .m-button--variant-dashed {
398
+ --m-button-border-style: dashed;
399
+ }
400
+
401
+ .m-button--variant-filled {
402
+ --m-button-bg: var(--m-button-color-light);
403
+ --m-button-fg: var(--m-button-color-base);
404
+ --m-button-border: transparent;
405
+ --m-button-hover-bg: var(--m-button-color-light-hover);
406
+ --m-button-hover-fg: var(--m-button-color-base);
407
+ --m-button-hover-border: transparent;
408
+ --m-button-active-bg: var(--m-button-color-light-active);
409
+ --m-button-active-fg: var(--m-button-color-base);
410
+ --m-button-active-border: transparent;
411
+ }
412
+
413
+ .m-button--variant-text,
414
+ .m-button--variant-link {
415
+ --m-button-bg: transparent;
416
+ --m-button-fg: var(--m-button-color-base);
417
+ --m-button-border: transparent;
418
+ --m-button-hover-fg: var(--m-button-color-hover);
419
+ --m-button-hover-border: transparent;
420
+ --m-button-active-bg: transparent;
421
+ --m-button-active-fg: var(--m-button-color-active, var(--m-button-color-hover));
422
+ --m-button-active-border: transparent;
423
+ }
424
+
425
+ .m-button--variant-text {
426
+ --m-button-hover-bg: var(--m-button-color-light);
427
+ --m-button-active-bg: var(--m-button-color-light-active);
428
+ }
429
+
430
+ .m-button--variant-link {
431
+ --m-button-hover-bg: transparent;
432
+ --m-button-height: auto;
433
+ height: auto;
434
+ min-height: 0;
435
+ padding: 0;
436
+ }
437
+
438
+ .m-button--variant-link:hover:not(:disabled):not(.m-button--disabled) {
439
+ text-decoration: underline;
440
+ }
441
+
442
+ .m-button--color-default.m-button--variant-text {
443
+ --m-button-color-base: var(--m-color-text);
444
+ --m-button-color-hover: var(--m-color-text);
445
+ --m-button-hover-bg: var(--m-button-color-light);
446
+ --m-button-active-bg: var(--m-button-color-light-hover);
447
+ }
448
+
449
+ .m-button--color-default.m-button--variant-filled {
450
+ --m-button-color-base: var(--m-color-text);
451
+ }
452
+
453
+ .m-button--color-link.m-button--variant-link {
454
+ --m-button-color-base: var(--m-color-primary);
455
+ --m-button-color-hover: var(--m-color-primary-hover);
456
+ }
457
+
458
+ /* Ghost: transparent fill on bordered variants */
459
+ .m-button--ghost {
460
+ --m-button-bg: transparent;
461
+ --m-button-hover-bg: transparent;
462
+ --m-button-active-bg: transparent;
463
+ }
464
+
465
+ .m-button--ghost.m-button--variant-solid,
466
+ .m-button--ghost.m-button--variant-outlined,
467
+ .m-button--ghost.m-button--variant-dashed {
468
+ --m-button-fg: var(--m-button-color-base);
469
+ --m-button-border: var(--m-button-color-base);
470
+ --m-button-hover-fg: var(--m-button-color-hover);
471
+ --m-button-hover-border: var(--m-button-color-hover);
472
+ --m-button-active-fg: var(--m-button-color-active, var(--m-button-color-hover));
473
+ --m-button-active-border: var(--m-button-color-active, var(--m-button-color-hover));
474
+ }
475
+ .m-button--ghost.m-button--color-default {
476
+ --m-button-color-base: var(--m-color-on-emphasis);
477
+ --m-button-color-hover: color-mix(
478
+ in srgb,
479
+ var(--m-color-on-emphasis) var(--m-button-ghost-hover-opacity),
480
+ transparent
481
+ );
482
+ --m-button-fg: var(--m-color-on-emphasis);
483
+ --m-button-border: var(--m-color-on-emphasis);
484
+ --m-button-hover-fg: var(--m-button-color-hover);
485
+ --m-button-hover-border: var(--m-button-color-hover);
486
+ }
487
+
488
+ /* ---------- Size / shape / layout ---------- */
489
+
490
+ .m-button--small {
491
+ --m-button-icon-size: var(--m-button-icon-size-small);
492
+ --m-button-font-size: var(--m-control-font-small);
493
+ --m-button-height: var(--m-control-height-small);
494
+ --m-button-padding-x: var(--m-button-padding-x-small);
495
+ }
496
+
497
+ .m-button--large {
498
+ --m-button-icon-size: var(--m-button-icon-size-large);
499
+ --m-button-font-size: var(--m-control-font-large);
500
+ --m-button-height: var(--m-control-height-large);
501
+ --m-button-padding-x: var(--m-button-padding-x-large);
502
+ }
503
+
504
+ .m-button--block {
505
+ display: flex;
506
+ width: 100%;
507
+ }
508
+
509
+ .m-button--shape-round {
510
+ --m-button-radius: var(--m-radius-full);
511
+ padding-inline: calc(
512
+ var(--m-button-padding-x) + var(--m-button-padding-x-round-extra)
513
+ );
514
+ }
515
+
516
+ .m-button--shape-circle {
517
+ --m-button-radius: var(--m-radius-full);
518
+ min-width: var(--m-button-height);
519
+ padding-inline: 0;
520
+ width: var(--m-button-height);
521
+ }
522
+
523
+ .m-button--shape-square {
524
+ --m-button-radius: 0;
525
+ }
526
+
527
+ .m-button--icon-only {
528
+ gap: 0;
529
+ min-width: var(--m-button-height);
530
+ padding: 0;
531
+ width: var(--m-button-height);
532
+ }
533
+
534
+ .m-button--icon-end {
535
+ flex-direction: row-reverse;
536
+ }
537
+
538
+ .m-button--two-chinese-chars > .m-button__label {
539
+ letter-spacing: var(--m-button-cn-letter-spacing);
540
+ margin-inline-end: calc(var(--m-button-cn-letter-spacing) * -1);
541
+ }
542
+
543
+ .m-button--loading {
544
+ cursor: default;
545
+ opacity: var(--m-button-loading-opacity);
546
+ pointer-events: none;
547
+ }
548
+
549
+ /* ---------- Parts ---------- */
550
+
551
+ .m-button__icon,
552
+ .m-button__label {
553
+ align-items: center;
554
+ display: inline-flex;
555
+ justify-content: center;
556
+ }
557
+
558
+ .m-button__icon,
559
+ .m-button__label {
560
+ position: relative;
561
+ z-index: 1;
562
+ }
563
+
564
+ .m-button__ripple {
565
+ border-radius: inherit;
566
+ inset: 0;
567
+ overflow: hidden;
568
+ pointer-events: none;
569
+ position: absolute;
570
+ z-index: 0;
571
+ }
572
+
573
+ .m-button__ripple-wave {
574
+ background: currentColor;
575
+ border-radius: var(--m-radius-full);
576
+ opacity: 0;
577
+ pointer-events: none;
578
+ position: absolute;
579
+ transform: scale(0);
580
+ will-change: transform, opacity;
581
+ }
582
+
583
+ .m-button__ripple-wave--fallback {
584
+ animation: m-button-ripple var(--m-button-ripple-duration)
585
+ var(--m-motion-ease) forwards;
586
+ }
587
+
588
+ @keyframes m-button-ripple {
589
+ 0% {
590
+ opacity: var(--m-button-ripple-opacity-start);
591
+ transform: scale(0);
592
+ }
593
+ 55% {
594
+ opacity: var(--m-button-ripple-opacity-mid);
595
+ transform: scale(0.55);
596
+ }
597
+ 100% {
598
+ opacity: 0;
599
+ transform: scale(1);
600
+ }
601
+ }
602
+
603
+ .m-button__icon {
604
+ flex: 0 0 auto;
605
+ height: var(--m-button-icon-size);
606
+ line-height: 0;
607
+ width: var(--m-button-icon-size);
608
+ }
609
+
610
+ .m-button__icon :is(.m-icon, .m-button__icon-graphic, svg) {
611
+ display: block;
612
+ flex-shrink: 0;
613
+ height: 100%;
614
+ width: 100%;
615
+ }
616
+
617
+ .m-button__icon .m-icon {
618
+ max-height: 100%;
619
+ max-width: 100%;
620
+ }
621
+
622
+ .m-button__spinner {
623
+ animation: m-button-spin var(--m-motion-spin-fast) linear infinite;
624
+ border: var(--m-button-spinner-border-width) solid currentColor;
625
+ border-radius: var(--m-radius-full);
626
+ border-right-color: transparent;
627
+ height: var(--m-button-spinner-size);
628
+ width: var(--m-button-spinner-size);
629
+ }
630
+
631
+ @keyframes m-button-spin {
632
+ to {
633
+ transform: rotate(360deg);
634
+ }
635
+ }
636
+
637
+ @media (prefers-reduced-motion: reduce) {
638
+ .m-button {
639
+ --m-button-ripple-duration: 0ms;
640
+ transition-duration: 0ms;
641
+ }
642
+
643
+ .m-button__spinner {
644
+ animation-duration: 0ms;
645
+ }
646
+ }
647
+
648
+ :root[data-m-motion='reduced'] .m-button {
649
+ --m-button-ripple-duration: 280ms;
650
+ --m-button-press-duration: 120ms;
651
+ }
652
+
653
+ :root[data-m-motion='none'] .m-button {
654
+ --m-button-ripple-duration: 0ms;
655
+ --m-button-press-duration: 0ms;
656
+ }
657
+
658
+ /* ---------- Group ---------- */
659
+
660
+ .m-button-group {
661
+ display: inline-flex;
662
+ vertical-align: middle;
663
+ }
664
+
665
+ .m-button-group--block {
666
+ display: flex;
667
+ width: 100%;
668
+ }
669
+
670
+ .m-button-group--block > .m-button {
671
+ flex: 1;
672
+ }
673
+
674
+ .m-button-group > .m-button {
675
+ border-radius: 0;
676
+ margin: 0;
677
+ }
678
+
679
+ .m-button-group > .m-button + .m-button {
680
+ margin-inline-start: calc(var(--m-border-width) * -1);
681
+ }
682
+
683
+ .m-button-group > .m-button:hover,
684
+ .m-button-group > .m-button:focus-visible,
685
+ .m-button-group > .m-button:active {
686
+ position: relative;
687
+ z-index: 1;
688
+ }
689
+
690
+ .m-button-group > .m-button:first-child {
691
+ border-end-start-radius: var(--m-radius-control);
692
+ border-start-start-radius: var(--m-radius-control);
693
+ }
694
+
695
+ .m-button-group > .m-button:last-child {
696
+ border-end-end-radius: var(--m-radius-control);
697
+ border-start-end-radius: var(--m-radius-control);
698
+ }