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,74 +1,74 @@
1
- /* —— Navigation: Sidebar —— */
2
- .m-sidebar {
3
- --m-sidebar-width: var(--m-nav-rail-width);
4
- --m-sidebar-collapsed-width: var(--m-nav-rail-collapsed-width);
5
- background: var(--m-color-surface);
6
- border: var(--m-border-width) solid var(--m-color-border);
7
- border-radius: var(--m-radius-md);
8
- min-width: 0;
9
- overflow: hidden;
10
- padding: var(--m-space-2);
11
- /* Instant width change — avoid layout thrashing on nav chrome */
12
- width: var(--m-sidebar-width);
13
- }
14
-
15
- .m-sidebar--collapsed {
16
- width: var(--m-sidebar-collapsed-width);
17
- }
18
-
19
- .m-sidebar__list,
20
- .m-sidebar__children {
21
- list-style: none;
22
- margin: 0;
23
- padding: 0;
24
- }
25
-
26
- .m-sidebar__children {
27
- margin-left: var(--m-space-4);
28
- }
29
-
30
- .m-sidebar__link {
31
- align-items: center;
32
- background: transparent;
33
- border: 0;
34
- border-radius: var(--m-radius-sm);
35
- color: inherit;
36
- cursor: pointer;
37
- display: flex;
38
- font-family: var(--m-font-sans);
39
- gap: var(--m-space-2);
40
- padding: var(--m-space-2);
41
- text-align: left;
42
- transition:
43
- background-color var(--m-motion-fast) var(--m-motion-ease),
44
- opacity var(--m-motion-fast) var(--m-motion-ease);
45
- width: 100%;
46
- }
47
-
48
- .m-sidebar__link:hover:not(:disabled) {
49
- background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
50
- }
51
-
52
- .m-sidebar__link:focus-visible {
53
- box-shadow: var(--m-focus-shadow);
54
- outline: none;
55
- }
56
-
57
- .m-sidebar__link:disabled {
58
- cursor: not-allowed;
59
- opacity: var(--m-opacity-disabled);
60
- }
61
-
62
- .m-sidebar__link--child {
63
- font-size: var(--m-font-size-md);
64
- }
65
-
66
- .m-sidebar__icon {
67
- flex: 0 0 var(--m-space-5);
68
- text-align: center;
69
- }
70
-
71
- [data-m-motion="reduced"] .m-sidebar__link,
72
- [data-m-motion="none"] .m-sidebar__link {
73
- transition: none;
74
- }
1
+ /* —— Navigation: Sidebar —— */
2
+ .m-sidebar {
3
+ --m-sidebar-width: var(--m-nav-rail-width);
4
+ --m-sidebar-collapsed-width: var(--m-nav-rail-collapsed-width);
5
+ background: var(--m-color-surface);
6
+ border: var(--m-border-width) solid var(--m-color-border);
7
+ border-radius: var(--m-radius-md);
8
+ min-width: 0;
9
+ overflow: hidden;
10
+ padding: var(--m-space-2);
11
+ /* Instant width change — avoid layout thrashing on nav chrome */
12
+ width: var(--m-sidebar-width);
13
+ }
14
+
15
+ .m-sidebar--collapsed {
16
+ width: var(--m-sidebar-collapsed-width);
17
+ }
18
+
19
+ .m-sidebar__list,
20
+ .m-sidebar__children {
21
+ list-style: none;
22
+ margin: 0;
23
+ padding: 0;
24
+ }
25
+
26
+ .m-sidebar__children {
27
+ margin-left: var(--m-space-4);
28
+ }
29
+
30
+ .m-sidebar__link {
31
+ align-items: center;
32
+ background: transparent;
33
+ border: 0;
34
+ border-radius: var(--m-radius-sm);
35
+ color: inherit;
36
+ cursor: pointer;
37
+ display: flex;
38
+ font-family: var(--m-font-sans);
39
+ gap: var(--m-space-2);
40
+ padding: var(--m-space-2);
41
+ text-align: left;
42
+ transition:
43
+ background-color var(--m-motion-fast) var(--m-motion-ease),
44
+ opacity var(--m-motion-fast) var(--m-motion-ease);
45
+ width: 100%;
46
+ }
47
+
48
+ .m-sidebar__link:hover:not(:disabled) {
49
+ background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
50
+ }
51
+
52
+ .m-sidebar__link:focus-visible {
53
+ box-shadow: var(--m-focus-shadow);
54
+ outline: none;
55
+ }
56
+
57
+ .m-sidebar__link:disabled {
58
+ cursor: not-allowed;
59
+ opacity: var(--m-opacity-disabled);
60
+ }
61
+
62
+ .m-sidebar__link--child {
63
+ font-size: var(--m-font-size-md);
64
+ }
65
+
66
+ .m-sidebar__icon {
67
+ flex: 0 0 var(--m-space-5);
68
+ text-align: center;
69
+ }
70
+
71
+ [data-m-motion="reduced"] .m-sidebar__link,
72
+ [data-m-motion="none"] .m-sidebar__link {
73
+ transition: none;
74
+ }
@@ -1,211 +1,211 @@
1
- /* --- Form: Slider --- */
2
- .m-slider-field {
3
- display: grid;
4
- gap: var(--m-space-2);
5
- width: 100%;
6
- }
7
-
8
- .m-slider-field__label {
9
- color: var(--m-color-text);
10
- font-family: var(--m-font-sans);
11
- font-size: var(--m-font-size-md);
12
- font-weight: 500;
13
- }
14
-
15
- .m-slider-field__help {
16
- color: var(--m-color-text-muted);
17
- font-size: var(--m-font-size-xs);
18
- }
19
-
20
- .m-slider-field__help--invalid {
21
- color: var(--m-color-danger);
22
- }
23
-
24
- .m-slider {
25
- --m-slider-track-height: 0.35rem;
26
- --m-slider-thumb-size: 1rem;
27
- --m-slider-vertical-height: 12rem;
28
- --m-slider-vertical-width: 2.5rem;
29
- --m-slider-tooltip-offset: 1.5rem;
30
- --m-slider-marks-inset-block: 0.9rem;
31
- --m-slider-marks-inset-inline: 0.5rem;
32
- align-items: center;
33
- display: flex;
34
- min-height: var(--m-slider-thumb-size);
35
- position: relative;
36
- width: 100%;
37
- }
38
-
39
- .m-slider--range {
40
- height: var(--m-slider-thumb-size);
41
- }
42
-
43
- .m-slider__input {
44
- -webkit-appearance: none;
45
- appearance: none;
46
- background: transparent;
47
- cursor: pointer;
48
- height: var(--m-slider-thumb-size);
49
- margin: 0;
50
- width: 100%;
51
- }
52
-
53
- .m-slider--range .m-slider__input {
54
- left: 0;
55
- pointer-events: none;
56
- position: absolute;
57
- top: 0;
58
- }
59
-
60
- .m-slider--range .m-slider__input::-webkit-slider-thumb {
61
- pointer-events: auto;
62
- }
63
-
64
- .m-slider--range .m-slider__input::-moz-range-thumb {
65
- pointer-events: auto;
66
- }
67
-
68
- /* range 模式�?end 输入框绘制在上层,其滑轨会盖�?start 的滚顶点,因此隐藏它的滑�?*/
69
- .m-slider--range .m-slider__input--end::-webkit-slider-runnable-track {
70
- background: transparent;
71
- }
72
-
73
- .m-slider--range .m-slider__input--end::-moz-range-track {
74
- background: transparent;
75
- }
76
-
77
- .m-slider__input::-webkit-slider-runnable-track {
78
- background: color-mix(
79
- in srgb,
80
- var(--m-color-text-muted) 28%,
81
- var(--m-color-surface)
82
- );
83
- border-radius: var(--m-radius-full);
84
- height: var(--m-slider-track-height);
85
- }
86
-
87
- .m-slider__input::-moz-range-track {
88
- background: color-mix(
89
- in srgb,
90
- var(--m-color-text-muted) 28%,
91
- var(--m-color-surface)
92
- );
93
- border-radius: var(--m-radius-full);
94
- height: var(--m-slider-track-height);
95
- }
96
-
97
- .m-slider__input::-webkit-slider-thumb {
98
- -webkit-appearance: none;
99
- appearance: none;
100
- background: var(--m-color-primary);
101
- border: var(--m-border-width) solid var(--m-color-surface);
102
- border-radius: 50%;
103
- box-shadow: 0 0 0 var(--m-border-width)
104
- color-mix(in srgb, var(--m-color-primary) 40%, transparent);
105
- height: var(--m-slider-thumb-size);
106
- margin-top: calc(
107
- (var(--m-slider-track-height) - var(--m-slider-thumb-size)) / 2
108
- );
109
- transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
110
- width: var(--m-slider-thumb-size);
111
- }
112
-
113
- .m-slider__input::-moz-range-thumb {
114
- background: var(--m-color-primary);
115
- border: var(--m-border-width) solid var(--m-color-surface);
116
- border-radius: 50%;
117
- box-shadow: 0 0 0 var(--m-border-width)
118
- color-mix(in srgb, var(--m-color-primary) 40%, transparent);
119
- height: var(--m-slider-thumb-size);
120
- transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
121
- width: var(--m-slider-thumb-size);
122
- }
123
-
124
- .m-slider__input:focus-visible {
125
- outline: none;
126
- }
127
-
128
- .m-slider__input:focus-visible::-webkit-slider-thumb {
129
- box-shadow: var(--m-focus-shadow);
130
- outline: none;
131
- }
132
-
133
- .m-slider__input:focus-visible::-moz-range-thumb {
134
- box-shadow: var(--m-focus-shadow);
135
- outline: none;
136
- }
137
-
138
- .m-slider--disabled {
139
- cursor: not-allowed;
140
- opacity: var(--m-opacity-disabled);
141
- pointer-events: none;
142
- }
143
-
144
- .m-slider--vertical {
145
- flex-direction: column;
146
- height: var(--m-slider-vertical-height);
147
- min-height: var(--m-slider-vertical-height);
148
- width: var(--m-slider-vertical-width);
149
- }
150
-
151
- .m-slider--vertical .m-slider__input {
152
- direction: rtl;
153
- height: 100%;
154
- width: var(--m-slider-thumb-size);
155
- writing-mode: vertical-lr;
156
- }
157
-
158
- .m-slider__tooltip {
159
- background: var(--m-color-text);
160
- border-radius: var(--m-radius-sm);
161
- color: var(--m-color-surface);
162
- font-family: var(--m-font-sans);
163
- font-size: var(--m-font-size-xs);
164
- left: 50%;
165
- padding: var(--m-slider-tooltip-padding-block) var(--m-slider-tooltip-padding-inline);
166
- position: absolute;
167
- top: calc(-1 * var(--m-slider-tooltip-offset));
168
- transform: translateX(-50%);
169
- white-space: nowrap;
170
- }
171
-
172
- .m-slider__marks {
173
- inset: var(--m-slider-marks-inset-block) var(--m-slider-marks-inset-inline) auto;
174
- position: absolute;
175
- }
176
-
177
- .m-slider--vertical .m-slider__marks {
178
- inset: var(--m-space-2) auto var(--m-space-2) var(--m-space-6);
179
- }
180
-
181
- .m-slider__mark {
182
- color: var(--m-color-text-muted);
183
- font-family: var(--m-font-sans);
184
- font-size: var(--m-font-size-xs);
185
- position: absolute;
186
- transform: translateX(-50%);
187
- }
188
-
189
- .m-slider--vertical .m-slider__mark {
190
- transform: translateY(50%);
191
- }
192
-
193
- .m-slider--small {
194
- --m-slider-thumb-size: 0.85rem;
195
- }
196
-
197
- .m-slider--large {
198
- --m-slider-thumb-size: 1.15rem;
199
- }
200
-
201
- .m-slider--invalid .m-slider__input {
202
- accent-color: var(--m-color-danger);
203
- }
204
-
205
- .m-slider--invalid .m-slider__input:focus-visible::-webkit-slider-thumb {
206
- box-shadow: var(--m-focus-shadow-danger);
207
- }
208
-
209
- .m-slider--invalid .m-slider__input:focus-visible::-moz-range-thumb {
210
- box-shadow: var(--m-focus-shadow-danger);
211
- }
1
+ /* --- Form: Slider --- */
2
+ .m-slider-field {
3
+ display: grid;
4
+ gap: var(--m-space-2);
5
+ width: 100%;
6
+ }
7
+
8
+ .m-slider-field__label {
9
+ color: var(--m-color-text);
10
+ font-family: var(--m-font-sans);
11
+ font-size: var(--m-font-size-md);
12
+ font-weight: 500;
13
+ }
14
+
15
+ .m-slider-field__help {
16
+ color: var(--m-color-text-muted);
17
+ font-size: var(--m-font-size-xs);
18
+ }
19
+
20
+ .m-slider-field__help--invalid {
21
+ color: var(--m-color-danger);
22
+ }
23
+
24
+ .m-slider {
25
+ --m-slider-track-height: 0.35rem;
26
+ --m-slider-thumb-size: 1rem;
27
+ --m-slider-vertical-height: 12rem;
28
+ --m-slider-vertical-width: 2.5rem;
29
+ --m-slider-tooltip-offset: 1.5rem;
30
+ --m-slider-marks-inset-block: 0.9rem;
31
+ --m-slider-marks-inset-inline: 0.5rem;
32
+ align-items: center;
33
+ display: flex;
34
+ min-height: var(--m-slider-thumb-size);
35
+ position: relative;
36
+ width: 100%;
37
+ }
38
+
39
+ .m-slider--range {
40
+ height: var(--m-slider-thumb-size);
41
+ }
42
+
43
+ .m-slider__input {
44
+ -webkit-appearance: none;
45
+ appearance: none;
46
+ background: transparent;
47
+ cursor: pointer;
48
+ height: var(--m-slider-thumb-size);
49
+ margin: 0;
50
+ width: 100%;
51
+ }
52
+
53
+ .m-slider--range .m-slider__input {
54
+ left: 0;
55
+ pointer-events: none;
56
+ position: absolute;
57
+ top: 0;
58
+ }
59
+
60
+ .m-slider--range .m-slider__input::-webkit-slider-thumb {
61
+ pointer-events: auto;
62
+ }
63
+
64
+ .m-slider--range .m-slider__input::-moz-range-thumb {
65
+ pointer-events: auto;
66
+ }
67
+
68
+ /* range 模式�?end 输入框绘制在上层,其滑轨会盖�?start 的滚顶点,因此隐藏它的滑�?*/
69
+ .m-slider--range .m-slider__input--end::-webkit-slider-runnable-track {
70
+ background: transparent;
71
+ }
72
+
73
+ .m-slider--range .m-slider__input--end::-moz-range-track {
74
+ background: transparent;
75
+ }
76
+
77
+ .m-slider__input::-webkit-slider-runnable-track {
78
+ background: color-mix(
79
+ in srgb,
80
+ var(--m-color-text-muted) 28%,
81
+ var(--m-color-surface)
82
+ );
83
+ border-radius: var(--m-radius-full);
84
+ height: var(--m-slider-track-height);
85
+ }
86
+
87
+ .m-slider__input::-moz-range-track {
88
+ background: color-mix(
89
+ in srgb,
90
+ var(--m-color-text-muted) 28%,
91
+ var(--m-color-surface)
92
+ );
93
+ border-radius: var(--m-radius-full);
94
+ height: var(--m-slider-track-height);
95
+ }
96
+
97
+ .m-slider__input::-webkit-slider-thumb {
98
+ -webkit-appearance: none;
99
+ appearance: none;
100
+ background: var(--m-color-primary);
101
+ border: var(--m-border-width) solid var(--m-color-surface);
102
+ border-radius: 50%;
103
+ box-shadow: 0 0 0 var(--m-border-width)
104
+ color-mix(in srgb, var(--m-color-primary) 40%, transparent);
105
+ height: var(--m-slider-thumb-size);
106
+ margin-top: calc(
107
+ (var(--m-slider-track-height) - var(--m-slider-thumb-size)) / 2
108
+ );
109
+ transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
110
+ width: var(--m-slider-thumb-size);
111
+ }
112
+
113
+ .m-slider__input::-moz-range-thumb {
114
+ background: var(--m-color-primary);
115
+ border: var(--m-border-width) solid var(--m-color-surface);
116
+ border-radius: 50%;
117
+ box-shadow: 0 0 0 var(--m-border-width)
118
+ color-mix(in srgb, var(--m-color-primary) 40%, transparent);
119
+ height: var(--m-slider-thumb-size);
120
+ transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
121
+ width: var(--m-slider-thumb-size);
122
+ }
123
+
124
+ .m-slider__input:focus-visible {
125
+ outline: none;
126
+ }
127
+
128
+ .m-slider__input:focus-visible::-webkit-slider-thumb {
129
+ box-shadow: var(--m-focus-shadow);
130
+ outline: none;
131
+ }
132
+
133
+ .m-slider__input:focus-visible::-moz-range-thumb {
134
+ box-shadow: var(--m-focus-shadow);
135
+ outline: none;
136
+ }
137
+
138
+ .m-slider--disabled {
139
+ cursor: not-allowed;
140
+ opacity: var(--m-opacity-disabled);
141
+ pointer-events: none;
142
+ }
143
+
144
+ .m-slider--vertical {
145
+ flex-direction: column;
146
+ height: var(--m-slider-vertical-height);
147
+ min-height: var(--m-slider-vertical-height);
148
+ width: var(--m-slider-vertical-width);
149
+ }
150
+
151
+ .m-slider--vertical .m-slider__input {
152
+ direction: rtl;
153
+ height: 100%;
154
+ width: var(--m-slider-thumb-size);
155
+ writing-mode: vertical-lr;
156
+ }
157
+
158
+ .m-slider__tooltip {
159
+ background: var(--m-color-text);
160
+ border-radius: var(--m-radius-sm);
161
+ color: var(--m-color-surface);
162
+ font-family: var(--m-font-sans);
163
+ font-size: var(--m-font-size-xs);
164
+ left: 50%;
165
+ padding: var(--m-slider-tooltip-padding-block) var(--m-slider-tooltip-padding-inline);
166
+ position: absolute;
167
+ top: calc(-1 * var(--m-slider-tooltip-offset));
168
+ transform: translateX(-50%);
169
+ white-space: nowrap;
170
+ }
171
+
172
+ .m-slider__marks {
173
+ inset: var(--m-slider-marks-inset-block) var(--m-slider-marks-inset-inline) auto;
174
+ position: absolute;
175
+ }
176
+
177
+ .m-slider--vertical .m-slider__marks {
178
+ inset: var(--m-space-2) auto var(--m-space-2) var(--m-space-6);
179
+ }
180
+
181
+ .m-slider__mark {
182
+ color: var(--m-color-text-muted);
183
+ font-family: var(--m-font-sans);
184
+ font-size: var(--m-font-size-xs);
185
+ position: absolute;
186
+ transform: translateX(-50%);
187
+ }
188
+
189
+ .m-slider--vertical .m-slider__mark {
190
+ transform: translateY(50%);
191
+ }
192
+
193
+ .m-slider--small {
194
+ --m-slider-thumb-size: 0.85rem;
195
+ }
196
+
197
+ .m-slider--large {
198
+ --m-slider-thumb-size: 1.15rem;
199
+ }
200
+
201
+ .m-slider--invalid .m-slider__input {
202
+ accent-color: var(--m-color-danger);
203
+ }
204
+
205
+ .m-slider--invalid .m-slider__input:focus-visible::-webkit-slider-thumb {
206
+ box-shadow: var(--m-focus-shadow-danger);
207
+ }
208
+
209
+ .m-slider--invalid .m-slider__input:focus-visible::-moz-range-thumb {
210
+ box-shadow: var(--m-focus-shadow-danger);
211
+ }