morya-ui 0.3.2 → 0.3.4

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 (220) hide show
  1. package/CHANGELOG.md +527 -490
  2. package/LICENSE +21 -21
  3. package/README.md +150 -150
  4. package/README.zh-CN.md +150 -150
  5. package/dist/{Button-dMqRmoYa.js → Button-gBiRj7wz.js} +11 -6
  6. package/dist/{FlyoutSubmenu-BrUPmJa1.js → FlyoutSubmenu-H_741alW.js} +2 -2
  7. package/dist/{Loading-BSsRs6v9.js → Loading-qS2Yv_gm.js} +1 -1
  8. package/dist/{Pagination-CqpC5EAs.js → Pagination-Bvv2qvEK.js} +1 -1
  9. package/dist/{Popover-BQ07q4VV.js → Popover-rnZG_ap0.js} +3 -3
  10. package/dist/{Select-CKGrSoaC.js → Select-CiXd074W.js} +3 -3
  11. package/dist/{Tooltip-D5DO0B3z.js → Tooltip-B02o9BOW.js} +3 -3
  12. package/dist/accordion/style.css +1148 -1148
  13. package/dist/auto-complete/index.js +3 -3
  14. package/dist/auto-complete/style.css +1690 -1690
  15. package/dist/avatar/style.css +1261 -1261
  16. package/dist/badge/style.css +1315 -1315
  17. package/dist/block-ui/index.js +1 -1
  18. package/dist/block-ui/style.css +1148 -1148
  19. package/dist/breadcrumb/style.css +1148 -1148
  20. package/dist/button/index.js +1 -1
  21. package/dist/button/style.css +2134 -1897
  22. package/dist/card/style.css +1148 -1148
  23. package/dist/carousel/style.css +1249 -1249
  24. package/dist/cascade-select/index.js +3 -3
  25. package/dist/cascade-select/style.css +1839 -1839
  26. package/dist/checkbox/style.css +1148 -1148
  27. package/dist/chip/style.css +1292 -1292
  28. package/dist/command-menu/index.js +1 -1
  29. package/dist/command-menu/style.css +1381 -1381
  30. package/dist/components/AutoComplete/styles.css +209 -209
  31. package/dist/components/Avatar/styles.css +113 -113
  32. package/dist/components/Badge/styles.css +165 -165
  33. package/dist/components/Button/Button.vue.d.ts +1 -0
  34. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  35. package/dist/components/Button/styles.css +962 -725
  36. package/dist/components/Button/types.d.ts +9 -4
  37. package/dist/components/Button/types.d.ts.map +1 -1
  38. package/dist/components/Carousel/styles.css +101 -101
  39. package/dist/components/CascadeSelect/styles.css +157 -157
  40. package/dist/components/Chip/styles.css +144 -144
  41. package/dist/components/CommandMenu/styles.css +102 -102
  42. package/dist/components/ConfigProvider/styles.css +6 -6
  43. package/dist/components/ConfirmDialog/styles.css +24 -24
  44. package/dist/components/ConfirmPopup/styles.css +35 -35
  45. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  46. package/dist/components/ContextMenu/styles.css +138 -133
  47. package/dist/components/DatePicker/styles.css +335 -335
  48. package/dist/components/Dialog/styles.css +421 -421
  49. package/dist/components/Dock/styles.css +84 -84
  50. package/dist/components/Drawer/styles.css +334 -334
  51. package/dist/components/Dropdown/styles.css +130 -130
  52. package/dist/components/Empty/styles.css +146 -146
  53. package/dist/components/FileUpload/styles.css +359 -359
  54. package/dist/components/Form/styles.css +114 -114
  55. package/dist/components/Gallery/styles.css +100 -100
  56. package/dist/components/Input/styles.css +356 -356
  57. package/dist/components/InputColor/styles.css +129 -129
  58. package/dist/components/InputNumber/styles.css +261 -261
  59. package/dist/components/InputPassword/styles.css +178 -178
  60. package/dist/components/InputTags/styles.css +112 -112
  61. package/dist/components/Layout/styles.css +433 -433
  62. package/dist/components/Loading/styles.css +378 -378
  63. package/dist/components/MegaMenu/styles.css +97 -97
  64. package/dist/components/Menu/styles.css +564 -564
  65. package/dist/components/Menubar/styles.css +144 -144
  66. package/dist/components/Message/styles.css +250 -250
  67. package/dist/components/MeterGroup/styles.css +49 -49
  68. package/dist/components/Page/PageContent.vue.d.ts +1 -0
  69. package/dist/components/Page/PageContent.vue.d.ts.map +1 -1
  70. package/dist/components/Page/styles.css +412 -394
  71. package/dist/components/Page/types.d.ts +5 -0
  72. package/dist/components/Page/types.d.ts.map +1 -1
  73. package/dist/components/Pagination/styles.css +105 -105
  74. package/dist/components/Popover/styles.css +92 -153
  75. package/dist/components/Result/styles.css +146 -146
  76. package/dist/components/Scrollbar/styles.css +131 -131
  77. package/dist/components/Select/styles.css +192 -192
  78. package/dist/components/SelectButton/styles.css +105 -105
  79. package/dist/components/Sidebar/styles.css +74 -74
  80. package/dist/components/Slider/styles.css +211 -211
  81. package/dist/components/SplitButton/styles.css +216 -216
  82. package/dist/components/Status/styles.css +191 -191
  83. package/dist/components/Stepper/styles.css +135 -135
  84. package/dist/components/Switch/styles.css +129 -129
  85. package/dist/components/Table/Table.vue.d.ts +1 -0
  86. package/dist/components/Table/Table.vue.d.ts.map +1 -1
  87. package/dist/components/Table/styles.css +28 -0
  88. package/dist/components/Table/types.d.ts +6 -0
  89. package/dist/components/Table/types.d.ts.map +1 -1
  90. package/dist/components/Tabs/styles.css +131 -131
  91. package/dist/components/Terminal/styles.css +74 -74
  92. package/dist/components/Textarea/styles.css +126 -126
  93. package/dist/components/TieredMenu/styles.css +125 -125
  94. package/dist/components/Timeline/styles.css +159 -159
  95. package/dist/components/TreeSelect/styles.css +161 -161
  96. package/dist/components/TreeTable/styles.css +97 -97
  97. package/dist/components/VirtualScroller/styles.css +27 -27
  98. package/dist/config-provider/style.css +2472 -2235
  99. package/dist/confirm-dialog/index.js +2 -2
  100. package/dist/confirm-dialog/style.css +2555 -2318
  101. package/dist/confirm-popup/index.js +5 -5
  102. package/dist/confirm-popup/style.css +2145 -1908
  103. package/dist/context-menu/index.js +105 -96
  104. package/dist/context-menu/style.css +1417 -1412
  105. package/dist/data-view/index.js +2 -2
  106. package/dist/data-view/style.css +1631 -1631
  107. package/dist/date-picker/index.js +3 -3
  108. package/dist/date-picker/style.css +1483 -1483
  109. package/dist/dialog/index.js +2 -2
  110. package/dist/dialog/style.css +2531 -2294
  111. package/dist/divider/style.css +1148 -1148
  112. package/dist/dock/style.css +1232 -1232
  113. package/dist/drawer/index.js +1 -1
  114. package/dist/drawer/style.css +1482 -1482
  115. package/dist/dropdown/index.js +4 -4
  116. package/dist/dropdown/style.css +1409 -1409
  117. package/dist/empty/style.css +1294 -1294
  118. package/dist/fieldset/style.css +1148 -1148
  119. package/dist/file-upload/style.css +1507 -1507
  120. package/dist/flex/index.js +1 -1
  121. package/dist/flex/style.css +1148 -1148
  122. package/dist/float-label/style.css +1148 -1148
  123. package/dist/fluid/style.css +1148 -1148
  124. package/dist/form/style.css +1264 -1264
  125. package/dist/gallery/style.css +1379 -1379
  126. package/dist/grid/index.js +1 -1
  127. package/dist/grid/style.css +1148 -1148
  128. package/dist/icon/style.css +1148 -1148
  129. package/dist/icon-field/style.css +1504 -1504
  130. package/dist/index.js +1246 -1225
  131. package/dist/inplace/style.css +1148 -1148
  132. package/dist/input/style.css +1504 -1504
  133. package/dist/input-color/style.css +1279 -1279
  134. package/dist/input-group/style.css +1148 -1148
  135. package/dist/input-number/style.css +1409 -1409
  136. package/dist/input-otp/style.css +1148 -1148
  137. package/dist/input-password/style.css +1326 -1326
  138. package/dist/input-tags/style.css +1260 -1260
  139. package/dist/knob/style.css +1148 -1148
  140. package/dist/label/style.css +1148 -1148
  141. package/dist/layout/style.css +1712 -1712
  142. package/dist/listbox/style.css +1306 -1306
  143. package/dist/loading/index.js +1 -1
  144. package/dist/loading/style.css +1528 -1528
  145. package/dist/mega-menu/index.js +3 -3
  146. package/dist/mega-menu/style.css +1245 -1245
  147. package/dist/menu/index.js +5 -5
  148. package/dist/menu/style.css +2001 -2062
  149. package/dist/menubar/index.js +3 -3
  150. package/dist/menubar/style.css +1423 -1423
  151. package/dist/message/index.js +1 -1
  152. package/dist/message/style.css +1398 -1398
  153. package/dist/meter-group/style.css +1199 -1199
  154. package/dist/order-list/style.css +1148 -1148
  155. package/dist/{overlayPlacement-Cd20JTD_.js → overlayPlacement-qwEJPVS4.js} +8 -8
  156. package/dist/page/index.js +8 -3
  157. package/dist/page/style.css +2668 -2413
  158. package/dist/pagination/index.js +1 -1
  159. package/dist/pagination/style.css +1445 -1445
  160. package/dist/panel/style.css +1148 -1148
  161. package/dist/pick-list/style.css +1148 -1148
  162. package/dist/popover/index.js +1 -1
  163. package/dist/popover/style.css +1242 -1303
  164. package/dist/progress-bar/style.css +1148 -1148
  165. package/dist/progress-spinner/style.css +1148 -1148
  166. package/dist/radio/style.css +1148 -1148
  167. package/dist/rating/style.css +1148 -1148
  168. package/dist/result/style.css +1294 -1294
  169. package/dist/scroll-top/style.css +1279 -1279
  170. package/dist/scrollbar/style.css +1281 -1281
  171. package/dist/select/index.js +1 -1
  172. package/dist/select/style.css +1901 -1901
  173. package/dist/select-button/style.css +1255 -1255
  174. package/dist/shared/gap.d.ts +4 -1
  175. package/dist/shared/gap.d.ts.map +1 -1
  176. package/dist/shared/overlayPlacement.d.ts.map +1 -1
  177. package/dist/shared/styles/control-affix-icon.css +110 -110
  178. package/dist/shared/styles/control-suffix.css +118 -118
  179. package/dist/shared/styles/select-overlay.css +175 -175
  180. package/dist/sidebar/style.css +1222 -1222
  181. package/dist/skeleton/style.css +1148 -1148
  182. package/dist/slider/style.css +1361 -1361
  183. package/dist/space/index.js +1 -1
  184. package/dist/space/style.css +1148 -1148
  185. package/dist/speed-dial/index.js +3 -3
  186. package/dist/speed-dial/style.css +1148 -1148
  187. package/dist/split-button/index.js +3 -3
  188. package/dist/split-button/style.css +2326 -2089
  189. package/dist/splitter/style.css +1148 -1148
  190. package/dist/status/style.css +1339 -1339
  191. package/dist/stepper/style.css +1283 -1283
  192. package/dist/styles/base.css +790 -790
  193. package/dist/styles.css +1 -1
  194. package/dist/switch/style.css +1279 -1279
  195. package/dist/table/index.js +245 -240
  196. package/dist/table/style.css +1840 -1812
  197. package/dist/tabs/style.css +1410 -1410
  198. package/dist/tag/style.css +1148 -1148
  199. package/dist/terminal/style.css +1224 -1224
  200. package/dist/textarea/style.css +1274 -1274
  201. package/dist/theme/motionPresets.d.ts.map +1 -1
  202. package/dist/theme/styles.css +358 -358
  203. package/dist/tiered-menu/index.js +4 -4
  204. package/dist/tiered-menu/style.css +1404 -1404
  205. package/dist/timeline/style.css +1438 -1438
  206. package/dist/toast/index.js +1 -1
  207. package/dist/toast/style.css +1148 -1148
  208. package/dist/toggle-button/style.css +1148 -1148
  209. package/dist/toolbar/style.css +1148 -1148
  210. package/dist/tooltip/index.js +1 -1
  211. package/dist/tooltip/style.css +1148 -1148
  212. package/dist/tree/style.css +1148 -1148
  213. package/dist/tree-select/index.js +3 -3
  214. package/dist/tree-select/style.css +1843 -1843
  215. package/dist/tree-table/style.css +1245 -1245
  216. package/dist/{useFloatingViewportSync-DZdJ7W8n.js → useFloatingViewportSync-wLLKIGUA.js} +4 -1
  217. package/dist/{useMotionTransition-Bxnnb_9u.js → useMotionTransition-95Y79FoL.js} +1 -1
  218. package/dist/virtual-scroller/style.css +1309 -1309
  219. package/dist/{vnode-C7Y1SjKB.js → vnode-CmdNQlN7.js} +18 -23
  220. package/package.json +32 -29
package/dist/components/Drawer/styles.css CHANGED
@@ -1,334 +1,334 @@
1
- /* —— Feedback: Drawer —— */
2
- .m-drawer-enter-active {
3
- transition: opacity var(--m-motion-enter) var(--m-motion-ease);
4
- }
5
-
6
- .m-drawer-leave-active {
7
- transition: opacity var(--m-motion-exit) var(--m-motion-ease);
8
- }
9
-
10
- .m-drawer-enter-active .m-drawer,
11
- .m-drawer-leave-active .m-drawer {
12
- transition: transform var(--m-motion-enter) var(--m-motion-ease);
13
- }
14
-
15
- .m-drawer-leave-active .m-drawer {
16
- transition: transform var(--m-motion-exit) var(--m-motion-ease);
17
- }
18
-
19
- .m-drawer-enter-from,
20
- .m-drawer-leave-to {
21
- opacity: 0;
22
- }
23
-
24
- .m-drawer-enter-from .m-drawer--left,
25
- .m-drawer-leave-to .m-drawer--left {
26
- transform: translateX(-100%);
27
- }
28
-
29
- .m-drawer-enter-from .m-drawer--right,
30
- .m-drawer-leave-to .m-drawer--right {
31
- transform: translateX(100%);
32
- }
33
-
34
- .m-drawer-enter-from .m-drawer--top,
35
- .m-drawer-leave-to .m-drawer--top {
36
- transform: translateY(-100%);
37
- }
38
-
39
- .m-drawer-enter-from .m-drawer--bottom,
40
- .m-drawer-leave-to .m-drawer--bottom {
41
- transform: translateY(100%);
42
- }
43
-
44
- /*
45
- * Generic presets on the backdrop: opacity-only mask, motion on `.m-drawer`.
46
- */
47
- .m-drawer-backdrop.m-fade-enter-from,
48
- .m-drawer-backdrop.m-fade-leave-to,
49
- .m-drawer-backdrop.m-scale-fade-enter-from,
50
- .m-drawer-backdrop.m-scale-fade-leave-to,
51
- .m-drawer-backdrop.m-slide-fade-enter-from,
52
- .m-drawer-backdrop.m-slide-fade-leave-to,
53
- .m-drawer-backdrop.m-zoom-enter-from,
54
- .m-drawer-backdrop.m-zoom-leave-to,
55
- .m-drawer-backdrop.m-slide-up-enter-from,
56
- .m-drawer-backdrop.m-slide-up-leave-to,
57
- .m-drawer-backdrop.m-slide-down-enter-from,
58
- .m-drawer-backdrop.m-slide-down-leave-to,
59
- .m-drawer-backdrop.m-slide-left-enter-from,
60
- .m-drawer-backdrop.m-slide-left-leave-to,
61
- .m-drawer-backdrop.m-slide-right-enter-from,
62
- .m-drawer-backdrop.m-slide-right-leave-to {
63
- transform: none;
64
- }
65
-
66
- .m-fade-enter-active .m-drawer,
67
- .m-scale-fade-enter-active .m-drawer,
68
- .m-slide-fade-enter-active .m-drawer,
69
- .m-zoom-enter-active .m-drawer,
70
- .m-slide-up-enter-active .m-drawer,
71
- .m-slide-down-enter-active .m-drawer,
72
- .m-slide-left-enter-active .m-drawer,
73
- .m-slide-right-enter-active .m-drawer {
74
- transition:
75
- opacity var(--m-motion-enter) var(--m-motion-ease),
76
- transform var(--m-motion-enter) var(--m-motion-ease);
77
- }
78
-
79
- .m-fade-leave-active .m-drawer,
80
- .m-scale-fade-leave-active .m-drawer,
81
- .m-slide-fade-leave-active .m-drawer,
82
- .m-zoom-leave-active .m-drawer,
83
- .m-slide-up-leave-active .m-drawer,
84
- .m-slide-down-leave-active .m-drawer,
85
- .m-slide-left-leave-active .m-drawer,
86
- .m-slide-right-leave-active .m-drawer {
87
- transition:
88
- opacity var(--m-motion-exit) var(--m-motion-ease),
89
- transform var(--m-motion-exit) var(--m-motion-ease);
90
- }
91
-
92
- .m-fade-enter-from .m-drawer,
93
- .m-fade-leave-to .m-drawer {
94
- opacity: 0;
95
- }
96
-
97
- .m-scale-fade-enter-from .m-drawer,
98
- .m-scale-fade-leave-to .m-drawer {
99
- opacity: 0;
100
- transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
101
- }
102
-
103
- .m-slide-fade-enter-from .m-drawer,
104
- .m-slide-fade-leave-to .m-drawer {
105
- opacity: 0;
106
- transform: translateY(calc(var(--m-motion-distance) * -1));
107
- }
108
-
109
- .m-zoom-enter-from .m-drawer,
110
- .m-zoom-leave-to .m-drawer {
111
- opacity: 0;
112
- transform: scale(0.95);
113
- }
114
-
115
- .m-slide-up-enter-from .m-drawer,
116
- .m-slide-up-leave-to .m-drawer {
117
- opacity: 0;
118
- transform: translateY(var(--m-motion-distance));
119
- }
120
-
121
- .m-slide-down-enter-from .m-drawer,
122
- .m-slide-down-leave-to .m-drawer {
123
- opacity: 0;
124
- transform: translateY(calc(var(--m-motion-distance) * -1));
125
- }
126
-
127
- .m-slide-left-enter-from .m-drawer,
128
- .m-slide-left-leave-to .m-drawer {
129
- opacity: 0;
130
- transform: translateX(var(--m-motion-distance));
131
- }
132
-
133
- .m-slide-right-enter-from .m-drawer,
134
- .m-slide-right-leave-to .m-drawer {
135
- opacity: 0;
136
- transform: translateX(calc(var(--m-motion-distance) * -1));
137
- }
138
-
139
- .m-drawer-backdrop {
140
- inset: 0;
141
- position: fixed;
142
- z-index: var(--m-z-overlay);
143
- }
144
-
145
- .m-drawer-backdrop--modal {
146
- background: var(--m-overlay-scrim);
147
- }
148
-
149
- .m-drawer {
150
- --m-drawer-side-width: 20rem;
151
- --m-drawer-top-height: 40vh;
152
- background: var(--m-color-surface);
153
- box-shadow: var(--m-shadow-lg);
154
- color: var(--m-color-text);
155
- display: flex;
156
- flex-direction: column;
157
- position: fixed;
158
- z-index: var(--m-z-overlay-raised);
159
- }
160
-
161
- .m-drawer--left {
162
- bottom: 0;
163
- left: 0;
164
- top: 0;
165
- width: min(var(--m-drawer-side-width), 100vw);
166
- }
167
-
168
- .m-drawer--right {
169
- bottom: 0;
170
- right: 0;
171
- top: 0;
172
- width: min(var(--m-drawer-side-width), 100vw);
173
- }
174
-
175
- .m-drawer--top {
176
- left: 0;
177
- max-height: min(var(--m-drawer-top-height), 100%);
178
- right: 0;
179
- top: 0;
180
- }
181
-
182
- .m-drawer--bottom {
183
- bottom: 0;
184
- left: 0;
185
- max-height: min(var(--m-drawer-top-height), 100%);
186
- right: 0;
187
- }
188
-
189
- .m-drawer__header {
190
- align-items: center;
191
- border-bottom: var(--m-border-width) solid var(--m-color-border);
192
- display: flex;
193
- justify-content: space-between;
194
- padding: var(--m-space-4);
195
- }
196
-
197
- .m-drawer__header h2 {
198
- font-size: var(--m-font-size-lg);
199
- margin: 0;
200
- }
201
-
202
- .m-drawer__close {
203
- align-items: center;
204
- background: transparent;
205
- border: 0;
206
- border-radius: var(--m-radius-sm);
207
- color: var(--m-color-text-muted);
208
- cursor: pointer;
209
- display: inline-flex;
210
- font-size: var(--m-font-size-lg);
211
- height: var(--m-control-affix-size);
212
- justify-content: center;
213
- transition:
214
- background-color var(--m-motion-fast) var(--m-motion-ease),
215
- color var(--m-motion-fast) var(--m-motion-ease),
216
- opacity var(--m-motion-fast) var(--m-motion-ease);
217
- width: var(--m-control-affix-size);
218
- }
219
-
220
- .m-drawer__close:hover:not(:disabled) {
221
- background: color-mix(
222
- in srgb,
223
- var(--m-color-primary) 10%,
224
- var(--m-color-surface)
225
- );
226
- color: var(--m-color-text);
227
- }
228
-
229
- .m-drawer__close:disabled {
230
- cursor: not-allowed;
231
- opacity: var(--m-opacity-disabled);
232
- }
233
-
234
- .m-drawer__close:focus-visible {
235
- box-shadow: var(--m-focus-shadow);
236
- outline: none;
237
- }
238
-
239
- .m-drawer__body {
240
- flex: 1;
241
- overflow: auto;
242
- overscroll-behavior: contain;
243
- padding: var(--m-space-4);
244
- }
245
-
246
- [data-m-motion="reduced"] .m-drawer-enter-active,
247
- [data-m-motion="reduced"] .m-drawer-leave-active,
248
- [data-m-motion="reduced"] .m-drawer-enter-active .m-drawer,
249
- [data-m-motion="reduced"] .m-drawer-leave-active .m-drawer,
250
- [data-m-motion="reduced"] .m-fade-enter-active .m-drawer,
251
- [data-m-motion="reduced"] .m-fade-leave-active .m-drawer,
252
- [data-m-motion="reduced"] .m-scale-fade-enter-active .m-drawer,
253
- [data-m-motion="reduced"] .m-scale-fade-leave-active .m-drawer,
254
- [data-m-motion="reduced"] .m-slide-fade-enter-active .m-drawer,
255
- [data-m-motion="reduced"] .m-slide-fade-leave-active .m-drawer,
256
- [data-m-motion="reduced"] .m-zoom-enter-active .m-drawer,
257
- [data-m-motion="reduced"] .m-zoom-leave-active .m-drawer,
258
- [data-m-motion="reduced"] .m-slide-up-enter-active .m-drawer,
259
- [data-m-motion="reduced"] .m-slide-up-leave-active .m-drawer,
260
- [data-m-motion="reduced"] .m-slide-down-enter-active .m-drawer,
261
- [data-m-motion="reduced"] .m-slide-down-leave-active .m-drawer,
262
- [data-m-motion="reduced"] .m-slide-left-enter-active .m-drawer,
263
- [data-m-motion="reduced"] .m-slide-left-leave-active .m-drawer,
264
- [data-m-motion="reduced"] .m-slide-right-enter-active .m-drawer,
265
- [data-m-motion="reduced"] .m-slide-right-leave-active .m-drawer,
266
- [data-m-motion="none"] .m-drawer-enter-active,
267
- [data-m-motion="none"] .m-drawer-leave-active,
268
- [data-m-motion="none"] .m-drawer-enter-active .m-drawer,
269
- [data-m-motion="none"] .m-drawer-leave-active .m-drawer,
270
- [data-m-motion="none"] .m-fade-enter-active .m-drawer,
271
- [data-m-motion="none"] .m-fade-leave-active .m-drawer,
272
- [data-m-motion="none"] .m-scale-fade-enter-active .m-drawer,
273
- [data-m-motion="none"] .m-scale-fade-leave-active .m-drawer,
274
- [data-m-motion="none"] .m-slide-fade-enter-active .m-drawer,
275
- [data-m-motion="none"] .m-slide-fade-leave-active .m-drawer,
276
- [data-m-motion="none"] .m-zoom-enter-active .m-drawer,
277
- [data-m-motion="none"] .m-zoom-leave-active .m-drawer,
278
- [data-m-motion="none"] .m-slide-up-enter-active .m-drawer,
279
- [data-m-motion="none"] .m-slide-up-leave-active .m-drawer,
280
- [data-m-motion="none"] .m-slide-down-enter-active .m-drawer,
281
- [data-m-motion="none"] .m-slide-down-leave-active .m-drawer,
282
- [data-m-motion="none"] .m-slide-left-enter-active .m-drawer,
283
- [data-m-motion="none"] .m-slide-left-leave-active .m-drawer,
284
- [data-m-motion="none"] .m-slide-right-enter-active .m-drawer,
285
- [data-m-motion="none"] .m-slide-right-leave-active .m-drawer {
286
- transition: none;
287
- }
288
-
289
- [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--left,
290
- [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--left,
291
- [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--right,
292
- [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--right,
293
- [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--top,
294
- [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--top,
295
- [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--bottom,
296
- [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--bottom,
297
- [data-m-motion="reduced"] .m-scale-fade-enter-from .m-drawer,
298
- [data-m-motion="reduced"] .m-scale-fade-leave-to .m-drawer,
299
- [data-m-motion="reduced"] .m-slide-fade-enter-from .m-drawer,
300
- [data-m-motion="reduced"] .m-slide-fade-leave-to .m-drawer,
301
- [data-m-motion="reduced"] .m-zoom-enter-from .m-drawer,
302
- [data-m-motion="reduced"] .m-zoom-leave-to .m-drawer,
303
- [data-m-motion="reduced"] .m-slide-up-enter-from .m-drawer,
304
- [data-m-motion="reduced"] .m-slide-up-leave-to .m-drawer,
305
- [data-m-motion="reduced"] .m-slide-down-enter-from .m-drawer,
306
- [data-m-motion="reduced"] .m-slide-down-leave-to .m-drawer,
307
- [data-m-motion="reduced"] .m-slide-left-enter-from .m-drawer,
308
- [data-m-motion="reduced"] .m-slide-left-leave-to .m-drawer,
309
- [data-m-motion="reduced"] .m-slide-right-enter-from .m-drawer,
310
- [data-m-motion="reduced"] .m-slide-right-leave-to .m-drawer,
311
- [data-m-motion="none"] .m-drawer-enter-from .m-drawer--left,
312
- [data-m-motion="none"] .m-drawer-leave-to .m-drawer--left,
313
- [data-m-motion="none"] .m-drawer-enter-from .m-drawer--right,
314
- [data-m-motion="none"] .m-drawer-leave-to .m-drawer--right,
315
- [data-m-motion="none"] .m-drawer-enter-from .m-drawer--top,
316
- [data-m-motion="none"] .m-drawer-leave-to .m-drawer--top,
317
- [data-m-motion="none"] .m-drawer-enter-from .m-drawer--bottom,
318
- [data-m-motion="none"] .m-drawer-leave-to .m-drawer--bottom,
319
- [data-m-motion="none"] .m-scale-fade-enter-from .m-drawer,
320
- [data-m-motion="none"] .m-scale-fade-leave-to .m-drawer,
321
- [data-m-motion="none"] .m-slide-fade-enter-from .m-drawer,
322
- [data-m-motion="none"] .m-slide-fade-leave-to .m-drawer,
323
- [data-m-motion="none"] .m-zoom-enter-from .m-drawer,
324
- [data-m-motion="none"] .m-zoom-leave-to .m-drawer,
325
- [data-m-motion="none"] .m-slide-up-enter-from .m-drawer,
326
- [data-m-motion="none"] .m-slide-up-leave-to .m-drawer,
327
- [data-m-motion="none"] .m-slide-down-enter-from .m-drawer,
328
- [data-m-motion="none"] .m-slide-down-leave-to .m-drawer,
329
- [data-m-motion="none"] .m-slide-left-enter-from .m-drawer,
330
- [data-m-motion="none"] .m-slide-left-leave-to .m-drawer,
331
- [data-m-motion="none"] .m-slide-right-enter-from .m-drawer,
332
- [data-m-motion="none"] .m-slide-right-leave-to .m-drawer {
333
- transform: none;
334
- }
1
+ /* —— Feedback: Drawer —— */
2
+ .m-drawer-enter-active {
3
+ transition: opacity var(--m-motion-enter) var(--m-motion-ease);
4
+ }
5
+
6
+ .m-drawer-leave-active {
7
+ transition: opacity var(--m-motion-exit) var(--m-motion-ease);
8
+ }
9
+
10
+ .m-drawer-enter-active .m-drawer,
11
+ .m-drawer-leave-active .m-drawer {
12
+ transition: transform var(--m-motion-enter) var(--m-motion-ease);
13
+ }
14
+
15
+ .m-drawer-leave-active .m-drawer {
16
+ transition: transform var(--m-motion-exit) var(--m-motion-ease);
17
+ }
18
+
19
+ .m-drawer-enter-from,
20
+ .m-drawer-leave-to {
21
+ opacity: 0;
22
+ }
23
+
24
+ .m-drawer-enter-from .m-drawer--left,
25
+ .m-drawer-leave-to .m-drawer--left {
26
+ transform: translateX(-100%);
27
+ }
28
+
29
+ .m-drawer-enter-from .m-drawer--right,
30
+ .m-drawer-leave-to .m-drawer--right {
31
+ transform: translateX(100%);
32
+ }
33
+
34
+ .m-drawer-enter-from .m-drawer--top,
35
+ .m-drawer-leave-to .m-drawer--top {
36
+ transform: translateY(-100%);
37
+ }
38
+
39
+ .m-drawer-enter-from .m-drawer--bottom,
40
+ .m-drawer-leave-to .m-drawer--bottom {
41
+ transform: translateY(100%);
42
+ }
43
+
44
+ /*
45
+ * Generic presets on the backdrop: opacity-only mask, motion on `.m-drawer`.
46
+ */
47
+ .m-drawer-backdrop.m-fade-enter-from,
48
+ .m-drawer-backdrop.m-fade-leave-to,
49
+ .m-drawer-backdrop.m-scale-fade-enter-from,
50
+ .m-drawer-backdrop.m-scale-fade-leave-to,
51
+ .m-drawer-backdrop.m-slide-fade-enter-from,
52
+ .m-drawer-backdrop.m-slide-fade-leave-to,
53
+ .m-drawer-backdrop.m-zoom-enter-from,
54
+ .m-drawer-backdrop.m-zoom-leave-to,
55
+ .m-drawer-backdrop.m-slide-up-enter-from,
56
+ .m-drawer-backdrop.m-slide-up-leave-to,
57
+ .m-drawer-backdrop.m-slide-down-enter-from,
58
+ .m-drawer-backdrop.m-slide-down-leave-to,
59
+ .m-drawer-backdrop.m-slide-left-enter-from,
60
+ .m-drawer-backdrop.m-slide-left-leave-to,
61
+ .m-drawer-backdrop.m-slide-right-enter-from,
62
+ .m-drawer-backdrop.m-slide-right-leave-to {
63
+ transform: none;
64
+ }
65
+
66
+ .m-fade-enter-active .m-drawer,
67
+ .m-scale-fade-enter-active .m-drawer,
68
+ .m-slide-fade-enter-active .m-drawer,
69
+ .m-zoom-enter-active .m-drawer,
70
+ .m-slide-up-enter-active .m-drawer,
71
+ .m-slide-down-enter-active .m-drawer,
72
+ .m-slide-left-enter-active .m-drawer,
73
+ .m-slide-right-enter-active .m-drawer {
74
+ transition:
75
+ opacity var(--m-motion-enter) var(--m-motion-ease),
76
+ transform var(--m-motion-enter) var(--m-motion-ease);
77
+ }
78
+
79
+ .m-fade-leave-active .m-drawer,
80
+ .m-scale-fade-leave-active .m-drawer,
81
+ .m-slide-fade-leave-active .m-drawer,
82
+ .m-zoom-leave-active .m-drawer,
83
+ .m-slide-up-leave-active .m-drawer,
84
+ .m-slide-down-leave-active .m-drawer,
85
+ .m-slide-left-leave-active .m-drawer,
86
+ .m-slide-right-leave-active .m-drawer {
87
+ transition:
88
+ opacity var(--m-motion-exit) var(--m-motion-ease),
89
+ transform var(--m-motion-exit) var(--m-motion-ease);
90
+ }
91
+
92
+ .m-fade-enter-from .m-drawer,
93
+ .m-fade-leave-to .m-drawer {
94
+ opacity: 0;
95
+ }
96
+
97
+ .m-scale-fade-enter-from .m-drawer,
98
+ .m-scale-fade-leave-to .m-drawer {
99
+ opacity: 0;
100
+ transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
101
+ }
102
+
103
+ .m-slide-fade-enter-from .m-drawer,
104
+ .m-slide-fade-leave-to .m-drawer {
105
+ opacity: 0;
106
+ transform: translateY(calc(var(--m-motion-distance) * -1));
107
+ }
108
+
109
+ .m-zoom-enter-from .m-drawer,
110
+ .m-zoom-leave-to .m-drawer {
111
+ opacity: 0;
112
+ transform: scale(0.95);
113
+ }
114
+
115
+ .m-slide-up-enter-from .m-drawer,
116
+ .m-slide-up-leave-to .m-drawer {
117
+ opacity: 0;
118
+ transform: translateY(var(--m-motion-distance));
119
+ }
120
+
121
+ .m-slide-down-enter-from .m-drawer,
122
+ .m-slide-down-leave-to .m-drawer {
123
+ opacity: 0;
124
+ transform: translateY(calc(var(--m-motion-distance) * -1));
125
+ }
126
+
127
+ .m-slide-left-enter-from .m-drawer,
128
+ .m-slide-left-leave-to .m-drawer {
129
+ opacity: 0;
130
+ transform: translateX(var(--m-motion-distance));
131
+ }
132
+
133
+ .m-slide-right-enter-from .m-drawer,
134
+ .m-slide-right-leave-to .m-drawer {
135
+ opacity: 0;
136
+ transform: translateX(calc(var(--m-motion-distance) * -1));
137
+ }
138
+
139
+ .m-drawer-backdrop {
140
+ inset: 0;
141
+ position: fixed;
142
+ z-index: var(--m-z-overlay);
143
+ }
144
+
145
+ .m-drawer-backdrop--modal {
146
+ background: var(--m-overlay-scrim);
147
+ }
148
+
149
+ .m-drawer {
150
+ --m-drawer-side-width: 20rem;
151
+ --m-drawer-top-height: 40vh;
152
+ background: var(--m-color-surface);
153
+ box-shadow: var(--m-shadow-lg);
154
+ color: var(--m-color-text);
155
+ display: flex;
156
+ flex-direction: column;
157
+ position: fixed;
158
+ z-index: var(--m-z-overlay-raised);
159
+ }
160
+
161
+ .m-drawer--left {
162
+ bottom: 0;
163
+ left: 0;
164
+ top: 0;
165
+ width: min(var(--m-drawer-side-width), 100vw);
166
+ }
167
+
168
+ .m-drawer--right {
169
+ bottom: 0;
170
+ right: 0;
171
+ top: 0;
172
+ width: min(var(--m-drawer-side-width), 100vw);
173
+ }
174
+
175
+ .m-drawer--top {
176
+ left: 0;
177
+ max-height: min(var(--m-drawer-top-height), 100%);
178
+ right: 0;
179
+ top: 0;
180
+ }
181
+
182
+ .m-drawer--bottom {
183
+ bottom: 0;
184
+ left: 0;
185
+ max-height: min(var(--m-drawer-top-height), 100%);
186
+ right: 0;
187
+ }
188
+
189
+ .m-drawer__header {
190
+ align-items: center;
191
+ border-bottom: var(--m-border-width) solid var(--m-color-border);
192
+ display: flex;
193
+ justify-content: space-between;
194
+ padding: var(--m-space-4);
195
+ }
196
+
197
+ .m-drawer__header h2 {
198
+ font-size: var(--m-font-size-lg);
199
+ margin: 0;
200
+ }
201
+
202
+ .m-drawer__close {
203
+ align-items: center;
204
+ background: transparent;
205
+ border: 0;
206
+ border-radius: var(--m-radius-sm);
207
+ color: var(--m-color-text-muted);
208
+ cursor: pointer;
209
+ display: inline-flex;
210
+ font-size: var(--m-font-size-lg);
211
+ height: var(--m-control-affix-size);
212
+ justify-content: center;
213
+ transition:
214
+ background-color var(--m-motion-fast) var(--m-motion-ease),
215
+ color var(--m-motion-fast) var(--m-motion-ease),
216
+ opacity var(--m-motion-fast) var(--m-motion-ease);
217
+ width: var(--m-control-affix-size);
218
+ }
219
+
220
+ .m-drawer__close:hover:not(:disabled) {
221
+ background: color-mix(
222
+ in srgb,
223
+ var(--m-color-primary) 10%,
224
+ var(--m-color-surface)
225
+ );
226
+ color: var(--m-color-text);
227
+ }
228
+
229
+ .m-drawer__close:disabled {
230
+ cursor: not-allowed;
231
+ opacity: var(--m-opacity-disabled);
232
+ }
233
+
234
+ .m-drawer__close:focus-visible {
235
+ box-shadow: var(--m-focus-shadow);
236
+ outline: none;
237
+ }
238
+
239
+ .m-drawer__body {
240
+ flex: 1;
241
+ overflow: auto;
242
+ overscroll-behavior: contain;
243
+ padding: var(--m-space-4);
244
+ }
245
+
246
+ [data-m-motion="reduced"] .m-drawer-enter-active,
247
+ [data-m-motion="reduced"] .m-drawer-leave-active,
248
+ [data-m-motion="reduced"] .m-drawer-enter-active .m-drawer,
249
+ [data-m-motion="reduced"] .m-drawer-leave-active .m-drawer,
250
+ [data-m-motion="reduced"] .m-fade-enter-active .m-drawer,
251
+ [data-m-motion="reduced"] .m-fade-leave-active .m-drawer,
252
+ [data-m-motion="reduced"] .m-scale-fade-enter-active .m-drawer,
253
+ [data-m-motion="reduced"] .m-scale-fade-leave-active .m-drawer,
254
+ [data-m-motion="reduced"] .m-slide-fade-enter-active .m-drawer,
255
+ [data-m-motion="reduced"] .m-slide-fade-leave-active .m-drawer,
256
+ [data-m-motion="reduced"] .m-zoom-enter-active .m-drawer,
257
+ [data-m-motion="reduced"] .m-zoom-leave-active .m-drawer,
258
+ [data-m-motion="reduced"] .m-slide-up-enter-active .m-drawer,
259
+ [data-m-motion="reduced"] .m-slide-up-leave-active .m-drawer,
260
+ [data-m-motion="reduced"] .m-slide-down-enter-active .m-drawer,
261
+ [data-m-motion="reduced"] .m-slide-down-leave-active .m-drawer,
262
+ [data-m-motion="reduced"] .m-slide-left-enter-active .m-drawer,
263
+ [data-m-motion="reduced"] .m-slide-left-leave-active .m-drawer,
264
+ [data-m-motion="reduced"] .m-slide-right-enter-active .m-drawer,
265
+ [data-m-motion="reduced"] .m-slide-right-leave-active .m-drawer,
266
+ [data-m-motion="none"] .m-drawer-enter-active,
267
+ [data-m-motion="none"] .m-drawer-leave-active,
268
+ [data-m-motion="none"] .m-drawer-enter-active .m-drawer,
269
+ [data-m-motion="none"] .m-drawer-leave-active .m-drawer,
270
+ [data-m-motion="none"] .m-fade-enter-active .m-drawer,
271
+ [data-m-motion="none"] .m-fade-leave-active .m-drawer,
272
+ [data-m-motion="none"] .m-scale-fade-enter-active .m-drawer,
273
+ [data-m-motion="none"] .m-scale-fade-leave-active .m-drawer,
274
+ [data-m-motion="none"] .m-slide-fade-enter-active .m-drawer,
275
+ [data-m-motion="none"] .m-slide-fade-leave-active .m-drawer,
276
+ [data-m-motion="none"] .m-zoom-enter-active .m-drawer,
277
+ [data-m-motion="none"] .m-zoom-leave-active .m-drawer,
278
+ [data-m-motion="none"] .m-slide-up-enter-active .m-drawer,
279
+ [data-m-motion="none"] .m-slide-up-leave-active .m-drawer,
280
+ [data-m-motion="none"] .m-slide-down-enter-active .m-drawer,
281
+ [data-m-motion="none"] .m-slide-down-leave-active .m-drawer,
282
+ [data-m-motion="none"] .m-slide-left-enter-active .m-drawer,
283
+ [data-m-motion="none"] .m-slide-left-leave-active .m-drawer,
284
+ [data-m-motion="none"] .m-slide-right-enter-active .m-drawer,
285
+ [data-m-motion="none"] .m-slide-right-leave-active .m-drawer {
286
+ transition: none;
287
+ }
288
+
289
+ [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--left,
290
+ [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--left,
291
+ [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--right,
292
+ [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--right,
293
+ [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--top,
294
+ [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--top,
295
+ [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--bottom,
296
+ [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--bottom,
297
+ [data-m-motion="reduced"] .m-scale-fade-enter-from .m-drawer,
298
+ [data-m-motion="reduced"] .m-scale-fade-leave-to .m-drawer,
299
+ [data-m-motion="reduced"] .m-slide-fade-enter-from .m-drawer,
300
+ [data-m-motion="reduced"] .m-slide-fade-leave-to .m-drawer,
301
+ [data-m-motion="reduced"] .m-zoom-enter-from .m-drawer,
302
+ [data-m-motion="reduced"] .m-zoom-leave-to .m-drawer,
303
+ [data-m-motion="reduced"] .m-slide-up-enter-from .m-drawer,
304
+ [data-m-motion="reduced"] .m-slide-up-leave-to .m-drawer,
305
+ [data-m-motion="reduced"] .m-slide-down-enter-from .m-drawer,
306
+ [data-m-motion="reduced"] .m-slide-down-leave-to .m-drawer,
307
+ [data-m-motion="reduced"] .m-slide-left-enter-from .m-drawer,
308
+ [data-m-motion="reduced"] .m-slide-left-leave-to .m-drawer,
309
+ [data-m-motion="reduced"] .m-slide-right-enter-from .m-drawer,
310
+ [data-m-motion="reduced"] .m-slide-right-leave-to .m-drawer,
311
+ [data-m-motion="none"] .m-drawer-enter-from .m-drawer--left,
312
+ [data-m-motion="none"] .m-drawer-leave-to .m-drawer--left,
313
+ [data-m-motion="none"] .m-drawer-enter-from .m-drawer--right,
314
+ [data-m-motion="none"] .m-drawer-leave-to .m-drawer--right,
315
+ [data-m-motion="none"] .m-drawer-enter-from .m-drawer--top,
316
+ [data-m-motion="none"] .m-drawer-leave-to .m-drawer--top,
317
+ [data-m-motion="none"] .m-drawer-enter-from .m-drawer--bottom,
318
+ [data-m-motion="none"] .m-drawer-leave-to .m-drawer--bottom,
319
+ [data-m-motion="none"] .m-scale-fade-enter-from .m-drawer,
320
+ [data-m-motion="none"] .m-scale-fade-leave-to .m-drawer,
321
+ [data-m-motion="none"] .m-slide-fade-enter-from .m-drawer,
322
+ [data-m-motion="none"] .m-slide-fade-leave-to .m-drawer,
323
+ [data-m-motion="none"] .m-zoom-enter-from .m-drawer,
324
+ [data-m-motion="none"] .m-zoom-leave-to .m-drawer,
325
+ [data-m-motion="none"] .m-slide-up-enter-from .m-drawer,
326
+ [data-m-motion="none"] .m-slide-up-leave-to .m-drawer,
327
+ [data-m-motion="none"] .m-slide-down-enter-from .m-drawer,
328
+ [data-m-motion="none"] .m-slide-down-leave-to .m-drawer,
329
+ [data-m-motion="none"] .m-slide-left-enter-from .m-drawer,
330
+ [data-m-motion="none"] .m-slide-left-leave-to .m-drawer,
331
+ [data-m-motion="none"] .m-slide-right-enter-from .m-drawer,
332
+ [data-m-motion="none"] .m-slide-right-leave-to .m-drawer {
333
+ transform: none;
334
+ }