morya-ui 0.4.3 → 0.4.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 (173) hide show
  1. package/CHANGELOG.md +780 -769
  2. package/LICENSE +21 -21
  3. package/README.md +156 -150
  4. package/README.zh-CN.md +156 -150
  5. package/dist/accordion/style.css +1205 -1205
  6. package/dist/affix/style.css +1205 -1205
  7. package/dist/alert/style.css +1205 -1205
  8. package/dist/anchor/style.css +1205 -1205
  9. package/dist/auto-complete/style.css +1749 -1749
  10. package/dist/avatar/style.css +1318 -1318
  11. package/dist/badge/style.css +1371 -1371
  12. package/dist/block-ui/style.css +1205 -1205
  13. package/dist/breadcrumb/style.css +1205 -1205
  14. package/dist/button/style.css +1909 -1909
  15. package/dist/calendar/style.css +1880 -1880
  16. package/dist/card/style.css +1205 -1205
  17. package/dist/carousel/style.css +2208 -2208
  18. package/dist/cascade-select/style.css +1909 -1909
  19. package/dist/checkbox/style.css +1205 -1205
  20. package/dist/chip/style.css +1349 -1349
  21. package/dist/command-menu/style.css +1438 -1438
  22. package/dist/components/AutoComplete/styles.css +209 -209
  23. package/dist/components/Avatar/styles.css +113 -113
  24. package/dist/components/Badge/styles.css +164 -164
  25. package/dist/components/Button/styles.css +698 -698
  26. package/dist/components/Carousel/styles.css +302 -302
  27. package/dist/components/CascadeSelect/styles.css +168 -168
  28. package/dist/components/Chip/styles.css +144 -144
  29. package/dist/components/CommandMenu/styles.css +102 -102
  30. package/dist/components/ConfigProvider/styles.css +6 -6
  31. package/dist/components/ConfirmDialog/styles.css +24 -24
  32. package/dist/components/ConfirmPopup/styles.css +35 -35
  33. package/dist/components/ContextMenu/styles.css +138 -138
  34. package/dist/components/DatePicker/styles.css +453 -453
  35. package/dist/components/Dialog/styles.css +420 -420
  36. package/dist/components/Dock/styles.css +84 -84
  37. package/dist/components/Drawer/styles.css +346 -346
  38. package/dist/components/Dropdown/styles.css +135 -135
  39. package/dist/components/Empty/styles.css +146 -146
  40. package/dist/components/FileUpload/styles.css +359 -359
  41. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  42. package/dist/components/Form/styles.css +125 -125
  43. package/dist/components/Gallery/styles.css +100 -100
  44. package/dist/components/Input/styles.css +392 -392
  45. package/dist/components/InputColor/styles.css +139 -139
  46. package/dist/components/InputNumber/styles.css +262 -262
  47. package/dist/components/InputPassword/styles.css +189 -189
  48. package/dist/components/InputTags/styles.css +121 -121
  49. package/dist/components/Layout/styles.css +433 -433
  50. package/dist/components/List/styles.css +229 -229
  51. package/dist/components/Listbox/styles.css +130 -130
  52. package/dist/components/Loading/styles.css +378 -378
  53. package/dist/components/MegaMenu/styles.css +97 -97
  54. package/dist/components/Menu/styles.css +565 -565
  55. package/dist/components/Menubar/styles.css +144 -144
  56. package/dist/components/Message/styles.css +248 -248
  57. package/dist/components/MeterGroup/styles.css +49 -49
  58. package/dist/components/Page/styles.css +430 -430
  59. package/dist/components/Pagination/styles.css +124 -124
  60. package/dist/components/Popover/styles.css +92 -92
  61. package/dist/components/Result/styles.css +146 -146
  62. package/dist/components/Scrollbar/styles.css +131 -131
  63. package/dist/components/Select/styles.css +222 -222
  64. package/dist/components/SelectButton/styles.css +107 -107
  65. package/dist/components/Sidebar/styles.css +74 -74
  66. package/dist/components/Slider/styles.css +211 -211
  67. package/dist/components/SplitButton/styles.css +216 -216
  68. package/dist/components/Status/styles.css +190 -190
  69. package/dist/components/Stepper/styles.css +152 -152
  70. package/dist/components/Switch/styles.css +129 -129
  71. package/dist/components/Tabs/styles.css +165 -165
  72. package/dist/components/Terminal/styles.css +75 -75
  73. package/dist/components/Textarea/styles.css +146 -146
  74. package/dist/components/TieredMenu/styles.css +125 -125
  75. package/dist/components/Timeline/styles.css +157 -157
  76. package/dist/components/TreeSelect/styles.css +172 -172
  77. package/dist/components/VirtualScroller/styles.css +27 -27
  78. package/dist/config-provider/style.css +2301 -2301
  79. package/dist/confirm-dialog/style.css +2347 -2347
  80. package/dist/confirm-popup/style.css +1938 -1938
  81. package/dist/context-menu/style.css +1474 -1474
  82. package/dist/data-view/style.css +1707 -1707
  83. package/dist/date-picker/style.css +1658 -1658
  84. package/dist/descriptions/style.css +1205 -1205
  85. package/dist/dialog/style.css +2323 -2323
  86. package/dist/divider/style.css +1205 -1205
  87. package/dist/dock/style.css +1289 -1289
  88. package/dist/drawer/style.css +1551 -1551
  89. package/dist/dropdown/style.css +1471 -1471
  90. package/dist/empty/style.css +1351 -1351
  91. package/dist/fieldset/style.css +1205 -1205
  92. package/dist/file-upload/style.css +1564 -1564
  93. package/dist/flex/style.css +1205 -1205
  94. package/dist/float-label/style.css +1205 -1205
  95. package/dist/fluid/style.css +1205 -1205
  96. package/dist/form/style.css +1332 -1332
  97. package/dist/gallery/style.css +1436 -1436
  98. package/dist/grid/style.css +1205 -1205
  99. package/dist/icon/style.css +1205 -1205
  100. package/dist/icon-field/style.css +1597 -1597
  101. package/dist/image/style.css +1205 -1205
  102. package/dist/inplace/style.css +1205 -1205
  103. package/dist/input/style.css +1722 -1722
  104. package/dist/input-color/style.css +1346 -1346
  105. package/dist/input-group/style.css +1205 -1205
  106. package/dist/input-number/style.css +1467 -1467
  107. package/dist/input-otp/style.css +1205 -1205
  108. package/dist/input-password/style.css +1519 -1519
  109. package/dist/input-tags/style.css +1326 -1326
  110. package/dist/knob/style.css +1205 -1205
  111. package/dist/label/style.css +1205 -1205
  112. package/dist/layout/style.css +1769 -1769
  113. package/dist/list/style.css +2087 -2087
  114. package/dist/listbox/style.css +1497 -1497
  115. package/dist/loading/style.css +1585 -1585
  116. package/dist/mega-menu/style.css +1302 -1302
  117. package/dist/mentions/style.css +1330 -1330
  118. package/dist/menu/style.css +2059 -2059
  119. package/dist/menubar/style.css +1480 -1480
  120. package/dist/message/style.css +1453 -1453
  121. package/dist/meter-group/style.css +1256 -1256
  122. package/dist/order-list/style.css +1205 -1205
  123. package/dist/page/style.css +2597 -2597
  124. package/dist/pagination/style.css +1551 -1551
  125. package/dist/panel/style.css +1205 -1205
  126. package/dist/pick-list/style.css +1205 -1205
  127. package/dist/popover/style.css +1299 -1299
  128. package/dist/progress-bar/style.css +1205 -1205
  129. package/dist/progress-spinner/style.css +1205 -1205
  130. package/dist/qr-code/style.css +1903 -1903
  131. package/dist/radio/style.css +1205 -1205
  132. package/dist/rating/style.css +1205 -1205
  133. package/dist/result/style.css +1351 -1351
  134. package/dist/scroll-top/style.css +1336 -1336
  135. package/dist/scrollbar/style.css +1338 -1338
  136. package/dist/segmented/style.css +1205 -1205
  137. package/dist/select/style.css +2115 -2115
  138. package/dist/select-button/style.css +1314 -1314
  139. package/dist/shared/styles/control-affix-icon.css +110 -110
  140. package/dist/shared/styles/control-suffix.css +118 -118
  141. package/dist/shared/styles/select-overlay.css +177 -177
  142. package/dist/sidebar/style.css +1279 -1279
  143. package/dist/skeleton/style.css +1205 -1205
  144. package/dist/slider/style.css +1418 -1418
  145. package/dist/space/style.css +1205 -1205
  146. package/dist/speed-dial/style.css +1205 -1205
  147. package/dist/split-button/style.css +2119 -2119
  148. package/dist/splitter/style.css +1205 -1205
  149. package/dist/statistic/style.css +1205 -1205
  150. package/dist/status/style.css +1395 -1395
  151. package/dist/stepper/style.css +1357 -1357
  152. package/dist/styles/base.css +804 -804
  153. package/dist/switch/style.css +1336 -1336
  154. package/dist/table/style.css +1840 -1840
  155. package/dist/tabs/style.css +1501 -1501
  156. package/dist/tag/style.css +1205 -1205
  157. package/dist/terminal/style.css +1282 -1282
  158. package/dist/textarea/style.css +1476 -1476
  159. package/dist/theme/styles.css +401 -401
  160. package/dist/tiered-menu/style.css +1461 -1461
  161. package/dist/time-picker/style.css +1660 -1660
  162. package/dist/timeline/style.css +1493 -1493
  163. package/dist/toast/style.css +1903 -1903
  164. package/dist/toggle-button/style.css +1205 -1205
  165. package/dist/toolbar/style.css +1205 -1205
  166. package/dist/tooltip/style.css +1205 -1205
  167. package/dist/tour/style.css +1903 -1903
  168. package/dist/tree/style.css +1205 -1205
  169. package/dist/tree-select/style.css +1913 -1913
  170. package/dist/typography/style.css +1351 -1351
  171. package/dist/virtual-scroller/style.css +1366 -1366
  172. package/dist/watermark/style.css +1205 -1205
  173. package/package.json +2 -1
@@ -1,146 +1,146 @@
1
- /* —— Feedback: Result (outcome page) —— */
2
- .m-result {
3
- --m-result-tone: var(--m-color-info);
4
- --m-result-tone-bg: color-mix(
5
- in srgb,
6
- var(--m-result-tone) 14%,
7
- var(--m-color-surface)
8
- );
9
- --m-result-icon-size: 4rem;
10
- --m-result-glyph-size: 1.875rem;
11
- --m-result-title-size: 1.25rem;
12
- --m-result-illustration-width: 15rem;
13
- --m-result-illustration-height: 8.75rem;
14
- --m-result-icon-margin: var(--m-space-5);
15
- --m-result-footer-margin: calc(var(--m-space-5) + var(--m-space-1));
16
- --m-result-desc-max-width: 25rem;
17
- align-items: center;
18
- display: flex;
19
- flex-direction: column;
20
- font-family: var(--m-font-sans);
21
- padding: calc(var(--m-space-8) + var(--m-space-2)) var(--m-space-6);
22
- text-align: center;
23
- }
24
-
25
- .m-result__icon {
26
- align-items: center;
27
- background: var(--m-result-tone-bg);
28
- border-radius: var(--m-radius-full);
29
- color: var(--m-result-tone);
30
- display: grid;
31
- flex-shrink: 0;
32
- height: var(--m-result-icon-size);
33
- justify-items: center;
34
- margin-bottom: var(--m-result-icon-margin);
35
- place-items: center;
36
- width: var(--m-result-icon-size);
37
- }
38
-
39
- .m-result__glyph :is(.m-icon, svg) {
40
- display: block;
41
- height: var(--m-result-glyph-size);
42
- width: var(--m-result-glyph-size);
43
- }
44
-
45
- .m-result__illustration {
46
- color: var(--m-result-tone);
47
- flex-shrink: 0;
48
- height: var(--m-result-illustration-height);
49
- margin-bottom: var(--m-result-icon-margin);
50
- width: var(--m-result-illustration-width);
51
- }
52
-
53
- .m-result__illustration > svg {
54
- display: block;
55
- height: 100%;
56
- width: 100%;
57
- }
58
-
59
- .m-result__title {
60
- color: var(--m-color-text);
61
- font-size: var(--m-result-title-size);
62
- font-weight: 600;
63
- letter-spacing: -0.0125rem;
64
- line-height: 1.4;
65
- margin: 0;
66
- }
67
-
68
- .m-result__description {
69
- color: var(--m-color-text-muted);
70
- font-size: var(--m-font-size-md);
71
- line-height: 1.65;
72
- margin: var(--m-space-2) 0 0;
73
- max-width: var(--m-result-desc-max-width);
74
- }
75
-
76
- .m-result__content {
77
- color: var(--m-color-text-muted);
78
- font-size: var(--m-font-size-md);
79
- line-height: 1.65;
80
- margin-top: var(--m-space-3);
81
- max-width: var(--m-result-desc-max-width);
82
- }
83
-
84
- .m-result__footer {
85
- display: flex;
86
- flex-wrap: wrap;
87
- gap: var(--m-space-3);
88
- justify-content: center;
89
- margin-top: var(--m-result-footer-margin);
90
- }
91
-
92
- .m-result--success {
93
- --m-result-tone: var(--m-color-success);
94
- }
95
-
96
- .m-result--info {
97
- --m-result-tone: var(--m-color-info);
98
- }
99
-
100
- .m-result--warning {
101
- --m-result-tone: var(--m-color-warn);
102
- }
103
-
104
- .m-result--error {
105
- --m-result-tone: var(--m-color-danger);
106
- }
107
-
108
- .m-result--403,
109
- .m-result--404,
110
- .m-result--500,
111
- .m-result--418 {
112
- --m-result-tone: var(--m-color-primary);
113
- }
114
-
115
- .m-result--small {
116
- --m-result-icon-size: calc(var(--m-space-8) + var(--m-space-4));
117
- --m-result-glyph-size: calc(var(--m-space-5) + var(--m-space-1));
118
- --m-result-title-size: var(--m-font-size-md);
119
- --m-result-illustration-width: 11.5rem;
120
- --m-result-illustration-height: 6.75rem;
121
- --m-result-icon-margin: calc(var(--m-space-3) + var(--m-space-1));
122
- --m-result-footer-margin: var(--m-space-5);
123
- padding: calc(var(--m-space-5) + var(--m-space-1)) var(--m-space-4);
124
- }
125
-
126
- .m-result--large {
127
- --m-result-icon-size: calc(var(--m-space-8) + var(--m-space-4) + var(--m-space-2));
128
- --m-result-glyph-size: calc(var(--m-space-8) + var(--m-space-1));
129
- --m-result-title-size: var(--m-font-size-lg);
130
- --m-result-illustration-width: 17rem;
131
- --m-result-illustration-height: 9.75rem;
132
- --m-result-icon-margin: var(--m-space-6);
133
- --m-result-footer-margin: var(--m-space-8);
134
- padding: var(--m-space-8) var(--m-space-8);
135
- }
136
-
137
- .m-result--huge {
138
- --m-result-icon-size: calc(var(--m-space-8) * 2 + var(--m-space-2) + var(--m-space-1));
139
- --m-result-glyph-size: calc(var(--m-space-8) + var(--m-space-2));
140
- --m-result-title-size: calc(var(--m-font-size-lg) + var(--m-space-1));
141
- --m-result-illustration-width: 19rem;
142
- --m-result-illustration-height: 11rem;
143
- --m-result-icon-margin: var(--m-space-6);
144
- --m-result-footer-margin: calc(var(--m-space-8) + var(--m-space-1));
145
- padding: calc(var(--m-space-8) + var(--m-space-6)) var(--m-space-8);
146
- }
1
+ /* —— Feedback: Result (outcome page) —— */
2
+ .m-result {
3
+ --m-result-tone: var(--m-color-info);
4
+ --m-result-tone-bg: color-mix(
5
+ in srgb,
6
+ var(--m-result-tone) 14%,
7
+ var(--m-color-surface)
8
+ );
9
+ --m-result-icon-size: 4rem;
10
+ --m-result-glyph-size: 1.875rem;
11
+ --m-result-title-size: 1.25rem;
12
+ --m-result-illustration-width: 15rem;
13
+ --m-result-illustration-height: 8.75rem;
14
+ --m-result-icon-margin: var(--m-space-5);
15
+ --m-result-footer-margin: calc(var(--m-space-5) + var(--m-space-1));
16
+ --m-result-desc-max-width: 25rem;
17
+ align-items: center;
18
+ display: flex;
19
+ flex-direction: column;
20
+ font-family: var(--m-font-sans);
21
+ padding: calc(var(--m-space-8) + var(--m-space-2)) var(--m-space-6);
22
+ text-align: center;
23
+ }
24
+
25
+ .m-result__icon {
26
+ align-items: center;
27
+ background: var(--m-result-tone-bg);
28
+ border-radius: var(--m-radius-full);
29
+ color: var(--m-result-tone);
30
+ display: grid;
31
+ flex-shrink: 0;
32
+ height: var(--m-result-icon-size);
33
+ justify-items: center;
34
+ margin-bottom: var(--m-result-icon-margin);
35
+ place-items: center;
36
+ width: var(--m-result-icon-size);
37
+ }
38
+
39
+ .m-result__glyph :is(.m-icon, svg) {
40
+ display: block;
41
+ height: var(--m-result-glyph-size);
42
+ width: var(--m-result-glyph-size);
43
+ }
44
+
45
+ .m-result__illustration {
46
+ color: var(--m-result-tone);
47
+ flex-shrink: 0;
48
+ height: var(--m-result-illustration-height);
49
+ margin-bottom: var(--m-result-icon-margin);
50
+ width: var(--m-result-illustration-width);
51
+ }
52
+
53
+ .m-result__illustration > svg {
54
+ display: block;
55
+ height: 100%;
56
+ width: 100%;
57
+ }
58
+
59
+ .m-result__title {
60
+ color: var(--m-color-text);
61
+ font-size: var(--m-result-title-size);
62
+ font-weight: 600;
63
+ letter-spacing: -0.0125rem;
64
+ line-height: 1.4;
65
+ margin: 0;
66
+ }
67
+
68
+ .m-result__description {
69
+ color: var(--m-color-text-muted);
70
+ font-size: var(--m-font-size-md);
71
+ line-height: 1.65;
72
+ margin: var(--m-space-2) 0 0;
73
+ max-width: var(--m-result-desc-max-width);
74
+ }
75
+
76
+ .m-result__content {
77
+ color: var(--m-color-text-muted);
78
+ font-size: var(--m-font-size-md);
79
+ line-height: 1.65;
80
+ margin-top: var(--m-space-3);
81
+ max-width: var(--m-result-desc-max-width);
82
+ }
83
+
84
+ .m-result__footer {
85
+ display: flex;
86
+ flex-wrap: wrap;
87
+ gap: var(--m-space-3);
88
+ justify-content: center;
89
+ margin-top: var(--m-result-footer-margin);
90
+ }
91
+
92
+ .m-result--success {
93
+ --m-result-tone: var(--m-color-success);
94
+ }
95
+
96
+ .m-result--info {
97
+ --m-result-tone: var(--m-color-info);
98
+ }
99
+
100
+ .m-result--warning {
101
+ --m-result-tone: var(--m-color-warn);
102
+ }
103
+
104
+ .m-result--error {
105
+ --m-result-tone: var(--m-color-danger);
106
+ }
107
+
108
+ .m-result--403,
109
+ .m-result--404,
110
+ .m-result--500,
111
+ .m-result--418 {
112
+ --m-result-tone: var(--m-color-primary);
113
+ }
114
+
115
+ .m-result--small {
116
+ --m-result-icon-size: calc(var(--m-space-8) + var(--m-space-4));
117
+ --m-result-glyph-size: calc(var(--m-space-5) + var(--m-space-1));
118
+ --m-result-title-size: var(--m-font-size-md);
119
+ --m-result-illustration-width: 11.5rem;
120
+ --m-result-illustration-height: 6.75rem;
121
+ --m-result-icon-margin: calc(var(--m-space-3) + var(--m-space-1));
122
+ --m-result-footer-margin: var(--m-space-5);
123
+ padding: calc(var(--m-space-5) + var(--m-space-1)) var(--m-space-4);
124
+ }
125
+
126
+ .m-result--large {
127
+ --m-result-icon-size: calc(var(--m-space-8) + var(--m-space-4) + var(--m-space-2));
128
+ --m-result-glyph-size: calc(var(--m-space-8) + var(--m-space-1));
129
+ --m-result-title-size: var(--m-font-size-lg);
130
+ --m-result-illustration-width: 17rem;
131
+ --m-result-illustration-height: 9.75rem;
132
+ --m-result-icon-margin: var(--m-space-6);
133
+ --m-result-footer-margin: var(--m-space-8);
134
+ padding: var(--m-space-8) var(--m-space-8);
135
+ }
136
+
137
+ .m-result--huge {
138
+ --m-result-icon-size: calc(var(--m-space-8) * 2 + var(--m-space-2) + var(--m-space-1));
139
+ --m-result-glyph-size: calc(var(--m-space-8) + var(--m-space-2));
140
+ --m-result-title-size: calc(var(--m-font-size-lg) + var(--m-space-1));
141
+ --m-result-illustration-width: 19rem;
142
+ --m-result-illustration-height: 11rem;
143
+ --m-result-icon-margin: var(--m-space-6);
144
+ --m-result-footer-margin: calc(var(--m-space-8) + var(--m-space-1));
145
+ padding: calc(var(--m-space-8) + var(--m-space-6)) var(--m-space-8);
146
+ }
@@ -1,131 +1,131 @@
1
- .m-scrollbar {
2
- --m-scrollbar-track-size: 6px;
3
- --m-scrollbar-inset: 0.125rem;
4
- --m-scrollbar-bg: color-mix(
5
- in srgb,
6
- var(--m-color-text) 28%,
7
- transparent
8
- );
9
- --m-scrollbar-hover-bg: color-mix(
10
- in srgb,
11
- var(--m-color-text) 45%,
12
- transparent
13
- );
14
- --m-scrollbar-opacity: 0.5;
15
- --m-scrollbar-hover-opacity: 0.8;
16
- min-height: 0;
17
- overflow: hidden;
18
- position: relative;
19
- }
20
-
21
- .m-scrollbar--fill {
22
- height: 100%;
23
- min-height: 0;
24
- min-width: 0;
25
- width: 100%;
26
- }
27
-
28
- .m-scrollbar__wrap {
29
- overflow: auto;
30
- }
31
-
32
- .m-scrollbar--fill .m-scrollbar__wrap {
33
- height: 100%;
34
- min-height: 0;
35
- min-width: 0;
36
- width: 100%;
37
- }
38
-
39
- .m-scrollbar--fit-content.m-scrollbar--fill {
40
- height: auto;
41
- }
42
-
43
- .m-scrollbar--fit-content.m-scrollbar--fill .m-scrollbar__wrap {
44
- height: auto;
45
- max-height: inherit;
46
- max-width: inherit;
47
- }
48
-
49
- .m-scrollbar__wrap--hidden-default {
50
- scrollbar-width: none;
51
- }
52
-
53
- .m-scrollbar__wrap--hidden-default::-webkit-scrollbar {
54
- display: none;
55
- }
56
-
57
- .m-scrollbar__view {
58
- box-sizing: border-box;
59
- }
60
-
61
- .m-scrollbar__bar {
62
- border-radius: var(--m-radius-sm);
63
- bottom: var(--m-scrollbar-inset);
64
- position: absolute;
65
- right: var(--m-scrollbar-inset);
66
- z-index: 1;
67
- }
68
-
69
- .m-scrollbar__bar--vertical {
70
- top: var(--m-scrollbar-inset);
71
- width: var(--m-scrollbar-track-size);
72
- }
73
-
74
- .m-scrollbar__bar--vertical > .m-scrollbar__thumb {
75
- width: 100%;
76
- }
77
-
78
- .m-scrollbar__bar--horizontal {
79
- height: var(--m-scrollbar-track-size);
80
- left: var(--m-scrollbar-inset);
81
- }
82
-
83
- .m-scrollbar__bar--horizontal > .m-scrollbar__thumb {
84
- height: 100%;
85
- }
86
-
87
- .m-scrollbar__bar:focus-visible {
88
- box-shadow: var(--m-focus-shadow);
89
- outline: none;
90
- outline-offset: 1px;
91
- }
92
-
93
- .m-scrollbar__thumb {
94
- background-color: var(--m-scrollbar-bg);
95
- border-radius: inherit;
96
- cursor: pointer;
97
- display: block;
98
- height: 0;
99
- opacity: var(--m-scrollbar-opacity);
100
- position: relative;
101
- transition:
102
- background-color var(--m-motion-fast) var(--m-motion-ease),
103
- opacity var(--m-motion-fast) var(--m-motion-ease);
104
- width: 0;
105
- }
106
-
107
- .m-scrollbar__thumb:hover {
108
- background-color: var(--m-scrollbar-hover-bg);
109
- opacity: var(--m-scrollbar-hover-opacity);
110
- }
111
-
112
- .m-scrollbar-fade-enter-active {
113
- transition: opacity var(--m-motion-scrollbar-show) var(--m-motion-ease);
114
- }
115
-
116
- .m-scrollbar-fade-leave-active {
117
- transition: opacity var(--m-motion-scrollbar-hide) var(--m-motion-ease);
118
- }
119
-
120
- .m-scrollbar-fade-enter-from,
121
- .m-scrollbar-fade-leave-to {
122
- opacity: 0;
123
- }
124
-
125
- :root[data-m-motion='none'] .m-scrollbar__thumb,
126
- :root[data-m-motion='none'] .m-scrollbar-fade-enter-active,
127
- :root[data-m-motion='none'] .m-scrollbar-fade-leave-active,
128
- :root[data-m-motion='reduced'] .m-scrollbar-fade-enter-active,
129
- :root[data-m-motion='reduced'] .m-scrollbar-fade-leave-active {
130
- transition: none;
131
- }
1
+ .m-scrollbar {
2
+ --m-scrollbar-track-size: 6px;
3
+ --m-scrollbar-inset: 0.125rem;
4
+ --m-scrollbar-bg: color-mix(
5
+ in srgb,
6
+ var(--m-color-text) 28%,
7
+ transparent
8
+ );
9
+ --m-scrollbar-hover-bg: color-mix(
10
+ in srgb,
11
+ var(--m-color-text) 45%,
12
+ transparent
13
+ );
14
+ --m-scrollbar-opacity: 0.5;
15
+ --m-scrollbar-hover-opacity: 0.8;
16
+ min-height: 0;
17
+ overflow: hidden;
18
+ position: relative;
19
+ }
20
+
21
+ .m-scrollbar--fill {
22
+ height: 100%;
23
+ min-height: 0;
24
+ min-width: 0;
25
+ width: 100%;
26
+ }
27
+
28
+ .m-scrollbar__wrap {
29
+ overflow: auto;
30
+ }
31
+
32
+ .m-scrollbar--fill .m-scrollbar__wrap {
33
+ height: 100%;
34
+ min-height: 0;
35
+ min-width: 0;
36
+ width: 100%;
37
+ }
38
+
39
+ .m-scrollbar--fit-content.m-scrollbar--fill {
40
+ height: auto;
41
+ }
42
+
43
+ .m-scrollbar--fit-content.m-scrollbar--fill .m-scrollbar__wrap {
44
+ height: auto;
45
+ max-height: inherit;
46
+ max-width: inherit;
47
+ }
48
+
49
+ .m-scrollbar__wrap--hidden-default {
50
+ scrollbar-width: none;
51
+ }
52
+
53
+ .m-scrollbar__wrap--hidden-default::-webkit-scrollbar {
54
+ display: none;
55
+ }
56
+
57
+ .m-scrollbar__view {
58
+ box-sizing: border-box;
59
+ }
60
+
61
+ .m-scrollbar__bar {
62
+ border-radius: var(--m-radius-sm);
63
+ bottom: var(--m-scrollbar-inset);
64
+ position: absolute;
65
+ right: var(--m-scrollbar-inset);
66
+ z-index: 1;
67
+ }
68
+
69
+ .m-scrollbar__bar--vertical {
70
+ top: var(--m-scrollbar-inset);
71
+ width: var(--m-scrollbar-track-size);
72
+ }
73
+
74
+ .m-scrollbar__bar--vertical > .m-scrollbar__thumb {
75
+ width: 100%;
76
+ }
77
+
78
+ .m-scrollbar__bar--horizontal {
79
+ height: var(--m-scrollbar-track-size);
80
+ left: var(--m-scrollbar-inset);
81
+ }
82
+
83
+ .m-scrollbar__bar--horizontal > .m-scrollbar__thumb {
84
+ height: 100%;
85
+ }
86
+
87
+ .m-scrollbar__bar:focus-visible {
88
+ box-shadow: var(--m-focus-shadow);
89
+ outline: none;
90
+ outline-offset: 1px;
91
+ }
92
+
93
+ .m-scrollbar__thumb {
94
+ background-color: var(--m-scrollbar-bg);
95
+ border-radius: inherit;
96
+ cursor: pointer;
97
+ display: block;
98
+ height: 0;
99
+ opacity: var(--m-scrollbar-opacity);
100
+ position: relative;
101
+ transition:
102
+ background-color var(--m-motion-fast) var(--m-motion-ease),
103
+ opacity var(--m-motion-fast) var(--m-motion-ease);
104
+ width: 0;
105
+ }
106
+
107
+ .m-scrollbar__thumb:hover {
108
+ background-color: var(--m-scrollbar-hover-bg);
109
+ opacity: var(--m-scrollbar-hover-opacity);
110
+ }
111
+
112
+ .m-scrollbar-fade-enter-active {
113
+ transition: opacity var(--m-motion-scrollbar-show) var(--m-motion-ease);
114
+ }
115
+
116
+ .m-scrollbar-fade-leave-active {
117
+ transition: opacity var(--m-motion-scrollbar-hide) var(--m-motion-ease);
118
+ }
119
+
120
+ .m-scrollbar-fade-enter-from,
121
+ .m-scrollbar-fade-leave-to {
122
+ opacity: 0;
123
+ }
124
+
125
+ :root[data-m-motion='none'] .m-scrollbar__thumb,
126
+ :root[data-m-motion='none'] .m-scrollbar-fade-enter-active,
127
+ :root[data-m-motion='none'] .m-scrollbar-fade-leave-active,
128
+ :root[data-m-motion='reduced'] .m-scrollbar-fade-enter-active,
129
+ :root[data-m-motion='reduced'] .m-scrollbar-fade-leave-active {
130
+ transition: none;
131
+ }