morya-ui 0.3.5 → 0.3.6

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 (157) hide show
  1. package/CHANGELOG.md +529 -523
  2. package/LICENSE +21 -21
  3. package/README.md +150 -150
  4. package/README.zh-CN.md +150 -150
  5. package/dist/accordion/style.css +1148 -1148
  6. package/dist/auto-complete/style.css +1690 -1690
  7. package/dist/avatar/style.css +1261 -1261
  8. package/dist/badge/style.css +1315 -1315
  9. package/dist/block-ui/style.css +1148 -1148
  10. package/dist/breadcrumb/style.css +1148 -1148
  11. package/dist/button/style.css +2138 -2138
  12. package/dist/card/style.css +1148 -1148
  13. package/dist/carousel/style.css +1249 -1249
  14. package/dist/cascade-select/style.css +1839 -1839
  15. package/dist/checkbox/style.css +1148 -1148
  16. package/dist/chip/style.css +1292 -1292
  17. package/dist/command-menu/style.css +1381 -1381
  18. package/dist/components/AutoComplete/styles.css +209 -209
  19. package/dist/components/Avatar/styles.css +113 -113
  20. package/dist/components/Badge/styles.css +165 -165
  21. package/dist/components/Button/styles.css +962 -962
  22. package/dist/components/Carousel/styles.css +101 -101
  23. package/dist/components/CascadeSelect/styles.css +157 -157
  24. package/dist/components/Chip/styles.css +144 -144
  25. package/dist/components/CommandMenu/styles.css +102 -102
  26. package/dist/components/ConfigProvider/styles.css +6 -6
  27. package/dist/components/ConfirmDialog/styles.css +24 -24
  28. package/dist/components/ConfirmPopup/styles.css +35 -35
  29. package/dist/components/ContextMenu/styles.css +138 -138
  30. package/dist/components/DatePicker/styles.css +335 -335
  31. package/dist/components/Dialog/styles.css +421 -421
  32. package/dist/components/Dock/styles.css +84 -84
  33. package/dist/components/Drawer/styles.css +334 -334
  34. package/dist/components/Dropdown/styles.css +130 -130
  35. package/dist/components/Empty/styles.css +146 -146
  36. package/dist/components/FileUpload/styles.css +359 -359
  37. package/dist/components/Form/styles.css +114 -114
  38. package/dist/components/Gallery/styles.css +100 -100
  39. package/dist/components/Input/styles.css +356 -356
  40. package/dist/components/InputColor/styles.css +129 -129
  41. package/dist/components/InputNumber/styles.css +261 -261
  42. package/dist/components/InputPassword/styles.css +178 -178
  43. package/dist/components/InputTags/styles.css +112 -112
  44. package/dist/components/Layout/styles.css +433 -433
  45. package/dist/components/Loading/styles.css +378 -378
  46. package/dist/components/MegaMenu/styles.css +97 -97
  47. package/dist/components/Menu/styles.css +564 -564
  48. package/dist/components/Menubar/styles.css +144 -144
  49. package/dist/components/Message/styles.css +250 -250
  50. package/dist/components/MeterGroup/styles.css +49 -49
  51. package/dist/components/Page/styles.css +430 -430
  52. package/dist/components/Pagination/styles.css +105 -105
  53. package/dist/components/Popover/styles.css +92 -92
  54. package/dist/components/Result/styles.css +146 -146
  55. package/dist/components/Scrollbar/styles.css +131 -131
  56. package/dist/components/Select/styles.css +192 -192
  57. package/dist/components/SelectButton/styles.css +105 -105
  58. package/dist/components/Sidebar/styles.css +74 -74
  59. package/dist/components/Slider/styles.css +211 -211
  60. package/dist/components/SplitButton/styles.css +216 -216
  61. package/dist/components/Status/styles.css +191 -191
  62. package/dist/components/Stepper/styles.css +135 -135
  63. package/dist/components/Switch/styles.css +129 -129
  64. package/dist/components/Tabs/styles.css +131 -131
  65. package/dist/components/Terminal/styles.css +74 -74
  66. package/dist/components/Textarea/styles.css +126 -126
  67. package/dist/components/TieredMenu/styles.css +125 -125
  68. package/dist/components/Timeline/styles.css +159 -159
  69. package/dist/components/TreeSelect/styles.css +161 -161
  70. package/dist/components/TreeTable/styles.css +97 -97
  71. package/dist/components/VirtualScroller/styles.css +27 -27
  72. package/dist/config-provider/style.css +2472 -2472
  73. package/dist/confirm-dialog/style.css +2555 -2555
  74. package/dist/confirm-popup/style.css +2145 -2145
  75. package/dist/context-menu/style.css +1417 -1417
  76. package/dist/data-view/style.css +1631 -1631
  77. package/dist/date-picker/style.css +1483 -1483
  78. package/dist/dialog/style.css +2531 -2531
  79. package/dist/divider/style.css +1148 -1148
  80. package/dist/dock/style.css +1232 -1232
  81. package/dist/drawer/style.css +1482 -1482
  82. package/dist/dropdown/style.css +1409 -1409
  83. package/dist/empty/style.css +1294 -1294
  84. package/dist/fieldset/style.css +1148 -1148
  85. package/dist/file-upload/style.css +1507 -1507
  86. package/dist/flex/style.css +1148 -1148
  87. package/dist/float-label/style.css +1148 -1148
  88. package/dist/fluid/style.css +1148 -1148
  89. package/dist/form/style.css +1264 -1264
  90. package/dist/gallery/style.css +1379 -1379
  91. package/dist/grid/style.css +1148 -1148
  92. package/dist/icon/style.css +1148 -1148
  93. package/dist/icon-field/style.css +1504 -1504
  94. package/dist/inplace/style.css +1148 -1148
  95. package/dist/input/style.css +1504 -1504
  96. package/dist/input-color/style.css +1279 -1279
  97. package/dist/input-group/style.css +1148 -1148
  98. package/dist/input-number/style.css +1409 -1409
  99. package/dist/input-otp/style.css +1148 -1148
  100. package/dist/input-password/style.css +1326 -1326
  101. package/dist/input-tags/style.css +1260 -1260
  102. package/dist/knob/style.css +1148 -1148
  103. package/dist/label/style.css +1148 -1148
  104. package/dist/layout/style.css +1712 -1712
  105. package/dist/listbox/style.css +1306 -1306
  106. package/dist/loading/style.css +1528 -1528
  107. package/dist/mega-menu/style.css +1245 -1245
  108. package/dist/menu/style.css +2001 -2001
  109. package/dist/menubar/style.css +1423 -1423
  110. package/dist/message/style.css +1398 -1398
  111. package/dist/meter-group/style.css +1199 -1199
  112. package/dist/order-list/style.css +1148 -1148
  113. package/dist/page/style.css +2804 -2804
  114. package/dist/pagination/style.css +1445 -1445
  115. package/dist/panel/style.css +1148 -1148
  116. package/dist/pick-list/style.css +1148 -1148
  117. package/dist/popover/style.css +1242 -1242
  118. package/dist/progress-bar/style.css +1148 -1148
  119. package/dist/progress-spinner/style.css +1148 -1148
  120. package/dist/radio/style.css +1148 -1148
  121. package/dist/rating/style.css +1148 -1148
  122. package/dist/result/style.css +1294 -1294
  123. package/dist/scroll-top/style.css +1279 -1279
  124. package/dist/scrollbar/style.css +1281 -1281
  125. package/dist/select/style.css +1901 -1901
  126. package/dist/select-button/style.css +1255 -1255
  127. package/dist/shared/styles/control-affix-icon.css +110 -110
  128. package/dist/shared/styles/control-suffix.css +118 -118
  129. package/dist/shared/styles/select-overlay.css +175 -175
  130. package/dist/sidebar/style.css +1222 -1222
  131. package/dist/skeleton/style.css +1148 -1148
  132. package/dist/slider/style.css +1361 -1361
  133. package/dist/space/style.css +1148 -1148
  134. package/dist/speed-dial/style.css +1148 -1148
  135. package/dist/split-button/style.css +2326 -2326
  136. package/dist/splitter/style.css +1148 -1148
  137. package/dist/status/style.css +1339 -1339
  138. package/dist/stepper/style.css +1283 -1283
  139. package/dist/styles/base.css +790 -790
  140. package/dist/switch/style.css +1279 -1279
  141. package/dist/table/style.css +1812 -1812
  142. package/dist/tabs/style.css +1410 -1410
  143. package/dist/tag/style.css +1148 -1148
  144. package/dist/terminal/style.css +1224 -1224
  145. package/dist/textarea/style.css +1274 -1274
  146. package/dist/theme/styles.css +358 -358
  147. package/dist/tiered-menu/style.css +1404 -1404
  148. package/dist/timeline/style.css +1438 -1438
  149. package/dist/toast/style.css +1148 -1148
  150. package/dist/toggle-button/style.css +1148 -1148
  151. package/dist/toolbar/style.css +1148 -1148
  152. package/dist/tooltip/style.css +1148 -1148
  153. package/dist/tree/style.css +1148 -1148
  154. package/dist/tree-select/style.css +1843 -1843
  155. package/dist/tree-table/style.css +1245 -1245
  156. package/dist/virtual-scroller/style.css +1309 -1309
  157. package/package.json +1 -1
@@ -1,159 +1,159 @@
1
- /* —— Data: Timeline —— */
2
- .m-timeline {
3
- display: flex;
4
- flex-direction: column;
5
- list-style: none;
6
- margin: 0;
7
- padding: 0;
8
- }
9
-
10
- .m-timeline__event {
11
- display: grid;
12
- gap: var(--m-space-3);
13
- grid-template-columns: 1fr auto 1fr;
14
- min-height: var(--m-timeline-event-min-height);
15
- }
16
-
17
- .m-timeline__event--left .m-timeline__content {
18
- grid-column: 3;
19
- }
20
-
21
- .m-timeline__event--left .m-timeline__opposite {
22
- grid-column: 1;
23
- text-align: end;
24
- }
25
-
26
- .m-timeline__event--right .m-timeline__content {
27
- grid-column: 1;
28
- text-align: end;
29
- }
30
-
31
- .m-timeline__event--right .m-timeline__opposite {
32
- grid-column: 3;
33
- }
34
-
35
- .m-timeline__separator {
36
- align-items: center;
37
- display: flex;
38
- flex-direction: column;
39
- grid-column: 2;
40
- grid-row: 1;
41
- }
42
-
43
- .m-timeline__marker {
44
- align-items: center;
45
- background: var(--m-color-surface);
46
- border: var(--m-border-width) solid var(--m-color-primary);
47
- border-radius: 50%;
48
- color: var(--m-color-primary);
49
- display: inline-flex;
50
- font-size: var(--m-font-size-xs);
51
- height: var(--m-timeline-marker-size);
52
- justify-content: center;
53
- width: var(--m-timeline-marker-size);
54
- z-index: 1;
55
- }
56
-
57
- .m-timeline__marker--success {
58
- border-color: var(--m-color-success);
59
- color: var(--m-color-success);
60
- }
61
-
62
- .m-timeline__marker--info {
63
- border-color: var(--m-color-info);
64
- color: var(--m-color-info);
65
- }
66
-
67
- .m-timeline__marker--warn,
68
- .m-timeline__marker--warning {
69
- border-color: var(--m-color-warn);
70
- color: var(--m-color-warn);
71
- }
72
-
73
- .m-timeline__marker--error,
74
- .m-timeline__marker--danger {
75
- border-color: var(--m-color-danger);
76
- color: var(--m-color-danger);
77
- }
78
-
79
- .m-timeline__marker--help {
80
- border-color: var(--m-color-help);
81
- color: var(--m-color-help);
82
- }
83
-
84
- .m-timeline__connector {
85
- background: var(--m-color-border);
86
- flex: 1;
87
- min-height: var(--m-control-height-small);
88
- width: var(--m-border-width);
89
- }
90
-
91
- .m-timeline__event:last-child .m-timeline__connector {
92
- visibility: hidden;
93
- }
94
-
95
- .m-timeline__status {
96
- color: var(--m-color-text-muted);
97
- font-size: var(--m-font-size-sm);
98
- font-weight: 600;
99
- margin-bottom: var(--m-space-1);
100
- }
101
-
102
- .m-timeline__opposite {
103
- color: var(--m-color-text-muted);
104
- font-size: var(--m-font-size-md);
105
- }
106
-
107
- .m-timeline__scroll--horizontal {
108
- width: 100%;
109
- }
110
-
111
- .m-timeline--horizontal {
112
- flex-direction: row;
113
- width: max-content;
114
- }
115
-
116
- .m-timeline--horizontal .m-timeline__event {
117
- flex: 1 0 10rem;
118
- grid-template-columns: 1fr;
119
- grid-template-rows: auto auto auto;
120
- min-height: 0;
121
- }
122
-
123
- .m-timeline--horizontal .m-timeline__separator {
124
- flex-direction: row;
125
- grid-column: 1;
126
- grid-row: 2;
127
- width: 100%;
128
- }
129
-
130
- .m-timeline--horizontal .m-timeline__connector {
131
- height: var(--m-border-width);
132
- min-height: 0;
133
- min-width: var(--m-control-affix-size);
134
- width: auto;
135
- }
136
-
137
- .m-timeline--horizontal .m-timeline__opposite {
138
- grid-column: 1;
139
- grid-row: 1;
140
- text-align: start;
141
- }
142
-
143
- .m-timeline--horizontal .m-timeline__content {
144
- grid-column: 1;
145
- grid-row: 3;
146
- text-align: start;
147
- }
148
-
149
- .m-timeline--horizontal .m-timeline__event--left .m-timeline__content,
150
- .m-timeline--horizontal .m-timeline__event--right .m-timeline__content,
151
- .m-timeline--horizontal .m-timeline__event--left .m-timeline__opposite,
152
- .m-timeline--horizontal .m-timeline__event--right .m-timeline__opposite {
153
- grid-column: 1;
154
- text-align: start;
155
- }
156
-
157
- .m-timeline__event--pending .m-timeline__marker {
158
- border-style: dashed;
159
- }
1
+ /* —— Data: Timeline —— */
2
+ .m-timeline {
3
+ display: flex;
4
+ flex-direction: column;
5
+ list-style: none;
6
+ margin: 0;
7
+ padding: 0;
8
+ }
9
+
10
+ .m-timeline__event {
11
+ display: grid;
12
+ gap: var(--m-space-3);
13
+ grid-template-columns: 1fr auto 1fr;
14
+ min-height: var(--m-timeline-event-min-height);
15
+ }
16
+
17
+ .m-timeline__event--left .m-timeline__content {
18
+ grid-column: 3;
19
+ }
20
+
21
+ .m-timeline__event--left .m-timeline__opposite {
22
+ grid-column: 1;
23
+ text-align: end;
24
+ }
25
+
26
+ .m-timeline__event--right .m-timeline__content {
27
+ grid-column: 1;
28
+ text-align: end;
29
+ }
30
+
31
+ .m-timeline__event--right .m-timeline__opposite {
32
+ grid-column: 3;
33
+ }
34
+
35
+ .m-timeline__separator {
36
+ align-items: center;
37
+ display: flex;
38
+ flex-direction: column;
39
+ grid-column: 2;
40
+ grid-row: 1;
41
+ }
42
+
43
+ .m-timeline__marker {
44
+ align-items: center;
45
+ background: var(--m-color-surface);
46
+ border: var(--m-border-width) solid var(--m-color-primary);
47
+ border-radius: 50%;
48
+ color: var(--m-color-primary);
49
+ display: inline-flex;
50
+ font-size: var(--m-font-size-xs);
51
+ height: var(--m-timeline-marker-size);
52
+ justify-content: center;
53
+ width: var(--m-timeline-marker-size);
54
+ z-index: 1;
55
+ }
56
+
57
+ .m-timeline__marker--success {
58
+ border-color: var(--m-color-success);
59
+ color: var(--m-color-success);
60
+ }
61
+
62
+ .m-timeline__marker--info {
63
+ border-color: var(--m-color-info);
64
+ color: var(--m-color-info);
65
+ }
66
+
67
+ .m-timeline__marker--warn,
68
+ .m-timeline__marker--warning {
69
+ border-color: var(--m-color-warn);
70
+ color: var(--m-color-warn);
71
+ }
72
+
73
+ .m-timeline__marker--error,
74
+ .m-timeline__marker--danger {
75
+ border-color: var(--m-color-danger);
76
+ color: var(--m-color-danger);
77
+ }
78
+
79
+ .m-timeline__marker--help {
80
+ border-color: var(--m-color-help);
81
+ color: var(--m-color-help);
82
+ }
83
+
84
+ .m-timeline__connector {
85
+ background: var(--m-color-border);
86
+ flex: 1;
87
+ min-height: var(--m-control-height-small);
88
+ width: var(--m-border-width);
89
+ }
90
+
91
+ .m-timeline__event:last-child .m-timeline__connector {
92
+ visibility: hidden;
93
+ }
94
+
95
+ .m-timeline__status {
96
+ color: var(--m-color-text-muted);
97
+ font-size: var(--m-font-size-sm);
98
+ font-weight: 600;
99
+ margin-bottom: var(--m-space-1);
100
+ }
101
+
102
+ .m-timeline__opposite {
103
+ color: var(--m-color-text-muted);
104
+ font-size: var(--m-font-size-md);
105
+ }
106
+
107
+ .m-timeline__scroll--horizontal {
108
+ width: 100%;
109
+ }
110
+
111
+ .m-timeline--horizontal {
112
+ flex-direction: row;
113
+ width: max-content;
114
+ }
115
+
116
+ .m-timeline--horizontal .m-timeline__event {
117
+ flex: 1 0 10rem;
118
+ grid-template-columns: 1fr;
119
+ grid-template-rows: auto auto auto;
120
+ min-height: 0;
121
+ }
122
+
123
+ .m-timeline--horizontal .m-timeline__separator {
124
+ flex-direction: row;
125
+ grid-column: 1;
126
+ grid-row: 2;
127
+ width: 100%;
128
+ }
129
+
130
+ .m-timeline--horizontal .m-timeline__connector {
131
+ height: var(--m-border-width);
132
+ min-height: 0;
133
+ min-width: var(--m-control-affix-size);
134
+ width: auto;
135
+ }
136
+
137
+ .m-timeline--horizontal .m-timeline__opposite {
138
+ grid-column: 1;
139
+ grid-row: 1;
140
+ text-align: start;
141
+ }
142
+
143
+ .m-timeline--horizontal .m-timeline__content {
144
+ grid-column: 1;
145
+ grid-row: 3;
146
+ text-align: start;
147
+ }
148
+
149
+ .m-timeline--horizontal .m-timeline__event--left .m-timeline__content,
150
+ .m-timeline--horizontal .m-timeline__event--right .m-timeline__content,
151
+ .m-timeline--horizontal .m-timeline__event--left .m-timeline__opposite,
152
+ .m-timeline--horizontal .m-timeline__event--right .m-timeline__opposite {
153
+ grid-column: 1;
154
+ text-align: start;
155
+ }
156
+
157
+ .m-timeline__event--pending .m-timeline__marker {
158
+ border-style: dashed;
159
+ }
@@ -1,161 +1,161 @@
1
- /* —— Form: TreeSelect —— */
2
- .m-treeselect {
3
- --m-treeselect-min-width: 12rem;
4
- --m-treeselect-toggler-size: 1.25rem;
5
- display: inline-block;
6
- max-width: 100%;
7
- position: relative;
8
- }
9
-
10
- .m-treeselect__control {
11
- display: inline-block;
12
- max-width: 100%;
13
- min-width: var(--m-treeselect-min-width);
14
- }
15
-
16
- .m-treeselect__trigger {
17
- align-items: center;
18
- background: var(--m-color-surface);
19
- border: var(--m-border-width) solid var(--m-color-border);
20
- border-radius: var(--m-radius-control);
21
- box-sizing: border-box;
22
- color: var(--m-color-text);
23
- cursor: pointer;
24
- display: inline-flex;
25
- font-family: var(--m-font-sans);
26
- font-size: var(--m-control-font-medium);
27
- gap: var(--m-space-1);
28
- min-height: var(--m-control-height-medium);
29
- padding: 0 var(--m-control-padding-x-medium);
30
- padding-right: var(--m-control-end-padding);
31
- transition:
32
- border-color var(--m-motion-fast) var(--m-motion-ease),
33
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
34
- opacity var(--m-motion-fast) var(--m-motion-ease);
35
- width: 100%;
36
- }
37
-
38
- .m-treeselect--small .m-treeselect__trigger {
39
- font-size: var(--m-control-font-small);
40
- min-height: var(--m-control-height-small);
41
- padding-left: var(--m-control-padding-x-small);
42
- padding-right: var(--m-control-end-padding);
43
- }
44
-
45
- .m-treeselect--large .m-treeselect__trigger {
46
- font-size: var(--m-control-font-large);
47
- min-height: var(--m-control-height-large);
48
- padding-left: var(--m-control-padding-x-large);
49
- padding-right: var(--m-control-end-padding);
50
- }
51
-
52
- .m-treeselect__trigger:focus-visible {
53
- box-shadow: var(--m-focus-shadow);
54
- outline: none;
55
- }
56
-
57
- .m-treeselect--multiple .m-treeselect__trigger {
58
- align-items: center;
59
- height: auto;
60
- padding-top: var(--m-space-1);
61
- padding-bottom: var(--m-space-1);
62
- }
63
-
64
- .m-treeselect__tags {
65
- display: flex;
66
- flex: 1;
67
- flex-wrap: wrap;
68
- gap: var(--m-space-1);
69
- min-width: 0;
70
- }
71
-
72
- .m-treeselect__label--placeholder {
73
- color: var(--m-color-text-muted);
74
- }
75
-
76
- .m-treeselect__label {
77
- flex: 1 1 auto;
78
- min-width: 0;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- text-align: left;
83
- }
84
-
85
- .m-treeselect--disabled .m-treeselect__trigger {
86
- cursor: not-allowed;
87
- opacity: var(--m-opacity-disabled);
88
- }
89
-
90
- .m-treeselect__panel {
91
- --m-treeselect-panel-max-height: min(18rem, 45vh);
92
- --m-treeselect-list-max-height: var(--m-treeselect-panel-max-height);
93
- display: flex;
94
- flex-direction: column;
95
- left: 0;
96
- max-height: var(--m-treeselect-panel-max-height);
97
- min-width: 100%;
98
- padding: var(--m-space-1);
99
- position: absolute;
100
- top: 100%;
101
- }
102
-
103
- .m-treeselect__panel:has(.m-treeselect__filter) {
104
- --m-treeselect-list-max-height: calc(
105
- var(--m-treeselect-panel-max-height) - var(--m-control-height-small) - var(--m-space-6)
106
- );
107
- }
108
-
109
- .m-treeselect__panel--teleported {
110
- top: auto;
111
- }
112
-
113
- .m-treeselect__tree-scroll {
114
- max-height: var(--m-treeselect-list-max-height);
115
- min-height: 0;
116
- }
117
-
118
- .m-treeselect__tree,
119
- .m-treeselect__node ul {
120
- list-style: none;
121
- margin: 0;
122
- padding: 0;
123
- }
124
-
125
- .m-treeselect__row {
126
- align-items: center;
127
- display: flex;
128
- gap: var(--m-space-1);
129
- }
130
-
131
- .m-treeselect__toggler,
132
- .m-treeselect__toggler-spacer {
133
- background: transparent;
134
- border: 0;
135
- border-radius: var(--m-radius-sm);
136
- color: var(--m-color-text-muted);
137
- cursor: pointer;
138
- flex: 0 0 var(--m-treeselect-toggler-size);
139
- font: inherit;
140
- height: var(--m-treeselect-toggler-size);
141
- padding: 0;
142
- width: var(--m-treeselect-toggler-size);
143
- }
144
-
145
- .m-treeselect__toggler:focus-visible {
146
- box-shadow: var(--m-focus-shadow);
147
- outline: none;
148
- }
149
-
150
- .m-treeselect__toggler-spacer {
151
- cursor: default;
152
- pointer-events: none;
153
- }
154
-
155
- .m-treeselect--invalid .m-treeselect__trigger {
156
- border-color: var(--m-color-danger);
157
- }
158
-
159
- .m-treeselect--invalid .m-treeselect__trigger:focus-visible {
160
- box-shadow: var(--m-focus-shadow-danger);
161
- }
1
+ /* —— Form: TreeSelect —— */
2
+ .m-treeselect {
3
+ --m-treeselect-min-width: 12rem;
4
+ --m-treeselect-toggler-size: 1.25rem;
5
+ display: inline-block;
6
+ max-width: 100%;
7
+ position: relative;
8
+ }
9
+
10
+ .m-treeselect__control {
11
+ display: inline-block;
12
+ max-width: 100%;
13
+ min-width: var(--m-treeselect-min-width);
14
+ }
15
+
16
+ .m-treeselect__trigger {
17
+ align-items: center;
18
+ background: var(--m-color-surface);
19
+ border: var(--m-border-width) solid var(--m-color-border);
20
+ border-radius: var(--m-radius-control);
21
+ box-sizing: border-box;
22
+ color: var(--m-color-text);
23
+ cursor: pointer;
24
+ display: inline-flex;
25
+ font-family: var(--m-font-sans);
26
+ font-size: var(--m-control-font-medium);
27
+ gap: var(--m-space-1);
28
+ min-height: var(--m-control-height-medium);
29
+ padding: 0 var(--m-control-padding-x-medium);
30
+ padding-right: var(--m-control-end-padding);
31
+ transition:
32
+ border-color var(--m-motion-fast) var(--m-motion-ease),
33
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
34
+ opacity var(--m-motion-fast) var(--m-motion-ease);
35
+ width: 100%;
36
+ }
37
+
38
+ .m-treeselect--small .m-treeselect__trigger {
39
+ font-size: var(--m-control-font-small);
40
+ min-height: var(--m-control-height-small);
41
+ padding-left: var(--m-control-padding-x-small);
42
+ padding-right: var(--m-control-end-padding);
43
+ }
44
+
45
+ .m-treeselect--large .m-treeselect__trigger {
46
+ font-size: var(--m-control-font-large);
47
+ min-height: var(--m-control-height-large);
48
+ padding-left: var(--m-control-padding-x-large);
49
+ padding-right: var(--m-control-end-padding);
50
+ }
51
+
52
+ .m-treeselect__trigger:focus-visible {
53
+ box-shadow: var(--m-focus-shadow);
54
+ outline: none;
55
+ }
56
+
57
+ .m-treeselect--multiple .m-treeselect__trigger {
58
+ align-items: center;
59
+ height: auto;
60
+ padding-top: var(--m-space-1);
61
+ padding-bottom: var(--m-space-1);
62
+ }
63
+
64
+ .m-treeselect__tags {
65
+ display: flex;
66
+ flex: 1;
67
+ flex-wrap: wrap;
68
+ gap: var(--m-space-1);
69
+ min-width: 0;
70
+ }
71
+
72
+ .m-treeselect__label--placeholder {
73
+ color: var(--m-color-text-muted);
74
+ }
75
+
76
+ .m-treeselect__label {
77
+ flex: 1 1 auto;
78
+ min-width: 0;
79
+ overflow: hidden;
80
+ text-overflow: ellipsis;
81
+ white-space: nowrap;
82
+ text-align: left;
83
+ }
84
+
85
+ .m-treeselect--disabled .m-treeselect__trigger {
86
+ cursor: not-allowed;
87
+ opacity: var(--m-opacity-disabled);
88
+ }
89
+
90
+ .m-treeselect__panel {
91
+ --m-treeselect-panel-max-height: min(18rem, 45vh);
92
+ --m-treeselect-list-max-height: var(--m-treeselect-panel-max-height);
93
+ display: flex;
94
+ flex-direction: column;
95
+ left: 0;
96
+ max-height: var(--m-treeselect-panel-max-height);
97
+ min-width: 100%;
98
+ padding: var(--m-space-1);
99
+ position: absolute;
100
+ top: 100%;
101
+ }
102
+
103
+ .m-treeselect__panel:has(.m-treeselect__filter) {
104
+ --m-treeselect-list-max-height: calc(
105
+ var(--m-treeselect-panel-max-height) - var(--m-control-height-small) - var(--m-space-6)
106
+ );
107
+ }
108
+
109
+ .m-treeselect__panel--teleported {
110
+ top: auto;
111
+ }
112
+
113
+ .m-treeselect__tree-scroll {
114
+ max-height: var(--m-treeselect-list-max-height);
115
+ min-height: 0;
116
+ }
117
+
118
+ .m-treeselect__tree,
119
+ .m-treeselect__node ul {
120
+ list-style: none;
121
+ margin: 0;
122
+ padding: 0;
123
+ }
124
+
125
+ .m-treeselect__row {
126
+ align-items: center;
127
+ display: flex;
128
+ gap: var(--m-space-1);
129
+ }
130
+
131
+ .m-treeselect__toggler,
132
+ .m-treeselect__toggler-spacer {
133
+ background: transparent;
134
+ border: 0;
135
+ border-radius: var(--m-radius-sm);
136
+ color: var(--m-color-text-muted);
137
+ cursor: pointer;
138
+ flex: 0 0 var(--m-treeselect-toggler-size);
139
+ font: inherit;
140
+ height: var(--m-treeselect-toggler-size);
141
+ padding: 0;
142
+ width: var(--m-treeselect-toggler-size);
143
+ }
144
+
145
+ .m-treeselect__toggler:focus-visible {
146
+ box-shadow: var(--m-focus-shadow);
147
+ outline: none;
148
+ }
149
+
150
+ .m-treeselect__toggler-spacer {
151
+ cursor: default;
152
+ pointer-events: none;
153
+ }
154
+
155
+ .m-treeselect--invalid .m-treeselect__trigger {
156
+ border-color: var(--m-color-danger);
157
+ }
158
+
159
+ .m-treeselect--invalid .m-treeselect__trigger:focus-visible {
160
+ box-shadow: var(--m-focus-shadow-danger);
161
+ }