hy-dispatch-ui-v3 0.2.16 → 0.2.17

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 (6) hide show
  1. package/dist/tailwind.css +4 -0
  2. package/es/style/element/hy-element.scss +985 -0
  3. package/es/version.mjs +1 -1
  4. package/lib/style/element/hy-element.scss +985 -0
  5. package/lib/version.js +1 -1
  6. package/package.json +1 -1
package/es/style/element/hy-element.scss CHANGED
@@ -0,0 +1,985 @@
1
+ // 测试
2
+ @use './element.scss';
3
+
4
+ :root {
5
+ --hy-el-fill-color-light: rgba(var(--hy-background-2), 1);
6
+ --hy-el-fill-color-lighter: rgba(var(--hy-background-4), 1);
7
+ --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
8
+ --hy-el-color-info: rgba(var(--hy-info), 1);
9
+ --hy-el-border: var(--hy-el-border-width) var(--hy-el-border-style) rgba(var(--hy-border), 1);
10
+ --hy-el-disabled-border-color: rgba(var(--hy-border), 1);
11
+ --hy-el-bg-color: rgba(var(--hy-background), 1);
12
+ --hy-el-text-color-secondary: rgba(var(--hy-auxiliary), 1);
13
+ --hy-el-text-color-regular: rgba(var(--hy-auxiliary), 1);
14
+ --hy-el-border-color-light: rgba(var(--hy-border), 1);
15
+ --hy-el-border-color-lighter: rgba(var(--hy-border), 1);
16
+ --hy-el-color-primary: rgba(var(--hy-theme), 1);
17
+ --hy-el-text-color-placeholder: rgba(var(--hy-info), 1);
18
+ --hy-el-text-color-primary: rgba(var(--hy-auxiliary), 1);
19
+ --hy-el-color-danger: rgba(var(--hy-danger), 1);
20
+ }
21
+
22
+ // 表格
23
+ .hy-el-table {
24
+ --hy-el-table-border-color: rgba(var(--hy-border), 1);
25
+ --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
26
+ --hy-el-table-text-color: rgba(var(--hy-main), 1);
27
+ --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
28
+ --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
29
+ --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
30
+ --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
31
+ --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
32
+ --hy-el-table-bg-color: rgba(var(--hy-background), 1);
33
+ --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
34
+ --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
35
+ --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
36
+ --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
37
+ --hy-el-table-index: var(--hy-el-index-normal);
38
+ position: relative;
39
+ overflow: hidden;
40
+ box-sizing: border-box;
41
+ height: -moz-fit-content;
42
+ height: fit-content;
43
+ width: 100%;
44
+ max-width: 100%;
45
+ background-color: var(--hy-el-table-bg-color);
46
+ font-size: var(--hy-el-font-size-base);
47
+ color: var(--hy-el-table-text-color);
48
+ }
49
+
50
+ .hy-el-table__expand-icon {
51
+ color: rgba(var(--hy-main), 1);
52
+ font-size: 12px;
53
+ line-height: 12px;
54
+ font-weight: 700;
55
+ width: min(23px, 100%);
56
+ height: 23px;
57
+ }
58
+
59
+ .hy-el-table__expand-icon>.hy-el-icon {
60
+ font-size: 12px;
61
+ }
62
+
63
+ .hy-el-table tr:hover td:first-child {
64
+ box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
65
+ }
66
+
67
+ .hy-el-table tr:hover td:last-child {
68
+ box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
69
+ }
70
+
71
+ .hy-el-table tr:hover td:not(:first-child):not(:last-child) {
72
+ box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
73
+ }
74
+
75
+ .hy-el-scrollbar__view {
76
+ height: 100%;
77
+ }
78
+
79
+ // 虚拟表格
80
+ .hy-el-table-v2 {
81
+ --hy-el-table-border-color: rgba(var(--hy-border), 1);
82
+ --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
83
+ --hy-el-table-text-color: rgba(var(--hy-main), 1);
84
+ --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
85
+ --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
86
+ --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
87
+ --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
88
+ --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
89
+ --hy-el-table-bg-color: rgba(var(--hy-background), 1);
90
+ --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
91
+ --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
92
+ --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
93
+ --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
94
+ --hy-el-table-index: var(--hy-el-index-normal);
95
+ font-size: var(--hy-el-font-size-base);
96
+ }
97
+
98
+ .hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:first-child {
99
+ box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
100
+ }
101
+
102
+ .hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:last-child {
103
+ box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
104
+ }
105
+
106
+ .hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:not(:first-child):not(:last-child) {
107
+ box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
108
+ }
109
+
110
+ .hy-el-table-v2__right {
111
+ display: flex;
112
+ flex-direction: column-reverse;
113
+ position: absolute;
114
+ overflow: hidden;
115
+ top: 0;
116
+ background-color: var(--hy-el-bg-color);
117
+ right: 0;
118
+ box-shadow: -2px 0 4px 0 rgba(var(--hy-background-3), 1);
119
+ }
120
+
121
+ .hy-el-table-v2__left {
122
+ display: flex;
123
+ flex-direction: column-reverse;
124
+ position: absolute;
125
+ overflow: hidden;
126
+ top: 0;
127
+ background-color: var(--hy-el-bg-color);
128
+ left: 0;
129
+ box-shadow: 2px 0 4px 0 rgba(var(--hy-background-3), 1);
130
+ }
131
+
132
+ .hy-el-empty__image svg {
133
+ color: rgba(var(--hy-auxiliary), 1);
134
+ fill: currentColor;
135
+ width: 100%;
136
+ height: 100%;
137
+ vertical-align: top;
138
+ }
139
+
140
+ // input输入框
141
+ .hy-el-input {
142
+ --hy-el-input-text-color: rgba(var(--hy-main), 1);
143
+ --hy-el-input-border: rgba(var(--hy-border), 1);
144
+ --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
145
+ --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
146
+ --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
147
+ --hy-el-input-border-color: rgba(var(--hy-border), 1);
148
+ --hy-el-input-border-radius: var(--hy-el-border-radius-base);
149
+ --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
150
+ --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
151
+ --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
152
+ --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
153
+ --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
154
+ --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
155
+ --hy-el-input-width: 100%;
156
+ --hy-el-input-height: var(--hy-el-component-size);
157
+ position: relative;
158
+ font-size: var(--hy-el-font-size-base);
159
+ display: inline-flex;
160
+ width: var(--hy-el-input-width);
161
+ line-height: var(--hy-el-input-height);
162
+ box-sizing: border-box;
163
+ vertical-align: middle;
164
+ }
165
+
166
+ .hy-el-input-group__prepend {
167
+ border-top-right-radius: 0 !important;
168
+ border-bottom-right-radius: 0 !important;
169
+ }
170
+
171
+ .hy-el-input-group__append {
172
+ border-top-left-radius: 0 !important;
173
+ border-bottom-left-radius: 0 !important;
174
+ }
175
+
176
+ .hy-el-input.is-disabled .hy-el-input__wrapper {
177
+ background-color: rgba(var(--hy-background-2), 1);
178
+ // background-color: var(--hy-el-input-bg-color);
179
+ cursor: not-allowed;
180
+ box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
181
+ }
182
+
183
+ .hy-el-textarea {
184
+ --hy-el-input-text-color: rgba(var(--hy-main), 1);
185
+ --hy-el-input-border: rgba(var(--hy-border), 1);
186
+ --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
187
+ --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
188
+ --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
189
+ --hy-el-input-border-color: rgba(var(--hy-border), 1);
190
+ --hy-el-input-border-radius: var(--hy-el-border-radius-base);
191
+ --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
192
+ --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
193
+ --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
194
+ --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
195
+ --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
196
+ --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
197
+ --hy-el-input-width: 100%;
198
+ position: relative;
199
+ display: inline-block;
200
+ width: 100%;
201
+ vertical-align: bottom;
202
+ font-size: var(--hy-el-font-size-base);
203
+ }
204
+
205
+ .hy-el-input-group__append,
206
+ .hy-el-input-group__prepend {
207
+ background-color: var(--hy-el-fill-color-light);
208
+ color: rgba(var(--hy-auxiliary), 1);
209
+ position: relative;
210
+ display: inline-flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ min-height: 100%;
214
+ border-radius: var(--hy-el-input-border-radius);
215
+ padding: 0 20px;
216
+ white-space: nowrap;
217
+ }
218
+
219
+ // 日期选择器
220
+ .hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
221
+ --hy-el-border-color-light: rgba(var(--hy-auxiliary), 1);
222
+ }
223
+
224
+ .hy-el-popper {
225
+ --hy-el-popper-border-radius: var(--hy-el-popover-border-radius, 4px);
226
+ --hy-el-popper-bg-color-light: rgba(var(--hy-background-2), 1);
227
+ --hy-el-popper-bg-color-dark: rgba(var(--hy-background-2), 1);
228
+ position: absolute;
229
+ border-radius: var(--hy-el-popper-border-radius);
230
+ padding: 5px 11px;
231
+ z-index: 2000;
232
+ font-size: 12px;
233
+ line-height: 20px;
234
+ min-width: 10px;
235
+ overflow-wrap: break-word;
236
+ word-break: normal;
237
+ visibility: visible;
238
+ }
239
+
240
+ .hy-el-date-picker {
241
+ --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
242
+ --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
243
+ --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
244
+ --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
245
+ --hy-el-datepicker-border-color: var(--hy-el-disabled-border-color);
246
+ --hy-el-datepicker-inner-border-color: var(--hy-el-border-color-light);
247
+ --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
248
+ --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
249
+ --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
250
+ --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
251
+ --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
252
+ --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
253
+ }
254
+
255
+ .hy-el-date-table td.selected .hy-el-date-table-cell__text {
256
+ background-color: var(--hy-el-datepicker-active-color);
257
+ color: rgba(var(--hy-theme), 1);
258
+ }
259
+
260
+ .hy-el-button.is-plain {
261
+ --hy-el-button-hover-text-color: rgba(var(--hy-theme), 1);
262
+ --hy-el-button-hover-bg-color: rgba(var(--hy-background-2), 1);
263
+ --hy-el-button-hover-border-color: rgba(var(--hy-theme), 1);
264
+ }
265
+
266
+ .hy-el-button {
267
+ --hy-el-button-font-weight: var(--hy-el-font-weight-primary);
268
+ --hy-el-button-border-color: rgba(var(--hy-border), 1);
269
+ --hy-el-button-bg-color: var(--hy-el-fill-color-blank);
270
+ --hy-el-button-text-color: var(--hy-el-text-color-regular);
271
+ --hy-el-button-disabled-text-color: var(--hy-el-disabled-text-color);
272
+ --hy-el-button-disabled-bg-color: var(--hy-el-fill-color-blank);
273
+ --hy-el-button-disabled-border-color: var(--hy-el-border-color-light);
274
+ --hy-el-button-divide-border-color: rgba(255, 255, 255, 0.5);
275
+ --hy-el-button-hover-text-color: var(--hy-el-color-primary);
276
+ --hy-el-button-hover-bg-color: var(--hy-el-color-primary-light-9);
277
+ --hy-el-button-hover-border-color: var(--hy-el-color-primary-light-7);
278
+ --hy-el-button-active-text-color: var(--hy-el-button-hover-text-color);
279
+ --hy-el-button-active-border-color: var(--hy-el-color-primary);
280
+ --hy-el-button-active-bg-color: var(--hy-el-button-hover-bg-color);
281
+ --hy-el-button-outline-color: var(--hy-el-color-primary-light-5);
282
+ --hy-el-button-hover-link-text-color: var(--hy-el-text-color-secondary);
283
+ --hy-el-button-active-color: var(--hy-el-text-color-primary);
284
+ }
285
+
286
+ .hy-el-date-table.is-week-mode .hy-el-date-table__row.current .hy-el-date-table-cell {
287
+ background-color: rgba(var(--hy-background-3), 1);
288
+ }
289
+
290
+ .hy-el-date-table td.start-date .hy-el-date-table-cell__text,
291
+ .hy-el-date-table td.end-date .hy-el-date-table-cell__text {
292
+ background-color: rgba(var(--hy-background-2), 1);
293
+ }
294
+
295
+ .hy-el-date-table td.start-date .hy-el-date-table-cell,
296
+ .hy-el-date-table td.end-date .hy-el-date-table-cell {
297
+ color: rgba(var(--hy-theme), 1);
298
+ }
299
+
300
+ .hy-el-year-table td.current:not(.disabled) .hy-el-date-table-cell__text {
301
+ color: rgba(var(--hy-theme), 1);
302
+ background-color: var(--hy-el-datepicker-active-color);
303
+ }
304
+
305
+ .hy-el-month-table td.current:not(.disabled) .hy-el-date-table-cell__text {
306
+ color: rgba(var(--hy-theme), 1);
307
+ background-color: var(--hy-el-datepicker-active-color);
308
+ }
309
+
310
+ .hy-el-date-table td.current:not(.disabled) .hy-el-date-table-cell__text {
311
+ color: rgba(var(--hy-theme), 1);
312
+ background-color: var(--hy-el-datepicker-active-color);
313
+ }
314
+
315
+ .hy-el-date-range-picker {
316
+ --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
317
+ --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
318
+ --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
319
+ --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
320
+ --hy-el-datepicker-border-color: rgba(var(--hy-border), 1);
321
+ --hy-el-datepicker-inner-border-color: rgba(var(--hy-border), 1);
322
+ --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
323
+ --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
324
+ --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
325
+ --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
326
+ --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
327
+ }
328
+
329
+ .hy-el-date-table td.in-range .hy-el-date-table-cell {
330
+ background-color: rgba(var(--hy-background-3), 1);
331
+ }
332
+
333
+ .hy-el-date-editor.hy-el-input__wrapper {
334
+ box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
335
+ }
336
+
337
+ .hy-el-date-editor {
338
+ --hy-el-input-icon-color: rgba(var(--hy-auxiliary), 1);
339
+ --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
340
+ --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
341
+ --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
342
+ --hy-el-text-color-placeholder: rgba(var(--hy-auxiliary), 1);
343
+ --hy-el-text-color-regular: rgba(var(--hy-main), 1);
344
+ }
345
+
346
+ .hy-el-date-editor .hy-el-range__icon {
347
+ color: rgba(var(--hy-auxiliary), 1);
348
+ }
349
+
350
+ .hy-el-date-picker__editor-wrap .hy-el-input__wrapper {
351
+ background-color: rgba(var(--hy-background-2), 1);
352
+ }
353
+
354
+ .hy-el-scrollbar__wrap .hy-el-time-spinner__list .hy-el-time-spinner__item:hover {
355
+ background-color: rgba(var(--hy-background-3), 1);
356
+ }
357
+
358
+ .hy-el-button.is-text:not(.is-disabled):hover {
359
+ background-color: rgba(var(--hy-background-3), 1);
360
+ }
361
+
362
+ // 单选框
363
+ .hy-el-radio__inner {
364
+ background-color: rgba(var(--hy-background), 1);
365
+ }
366
+
367
+ .hy-el-radio__input.is-checked .hy-el-radio__inner::after {
368
+ background-color: rgba(var(--hy-theme), 1);
369
+ }
370
+
371
+ .hy-el-radio__input.is-checked .hy-el-radio__inner {
372
+ border-color: var(--hy-el-color-primary);
373
+ background: rgba(var(--hy-background), 1);
374
+ }
375
+
376
+ // 多选框
377
+ .hy-el-checkbox__inner {
378
+ background-color: rgba(var(--hy-background), 1)
379
+ }
380
+
381
+ .hy-el-checkbox__input.is-checked .hy-el-checkbox__inner,
382
+ .hy-el-checkbox__input.is-indeterminate .hy-el-checkbox__inner {
383
+ background: rgba(var(--hy-theme), .5);
384
+ box-shadow: 0 0 4px 0 rgba(var(--hy-theme), 1);
385
+ border-color: rgba(var(--hy-theme), 1);
386
+ }
387
+
388
+ .hy-el-checkbox__input.is-disabled .hy-el-checkbox__inner {
389
+ background-color: rgba(var(--hy-background), 1);
390
+ border-color: rgba(var(--hy-info), 1);
391
+ cursor: not-allowed;
392
+ }
393
+
394
+ .hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner {
395
+ background-color: rgba(var(--hy-background), 1);
396
+ border-color: rgba(var(--hy-info), 1);
397
+ box-shadow: 0 0 4px 0 rgba(var(--hy-info), 1);
398
+ }
399
+
400
+ .hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner::after {
401
+ border-color: rgba(var(--hy-info), 1);
402
+ }
403
+
404
+ .hy-el-checkbox-button.is-checked .hy-el-checkbox-button__inner {
405
+ color: var(--hy-el-checkbox-button-checked-text-color);
406
+ // background: linear-gradient(180deg, rgba(var(--hy-auxiliary), .5), rgba(var(--hy-auxiliary), .8) 53%, rgba(var(--hy-theme), .9));
407
+ background: rgba(var(--hy-theme), .5);
408
+ // border: 1px solid rgba(var(--hy-theme), 1);
409
+ box-shadow: inset 0px 0px 0px 1px rgba(var(--hy-theme), 1) !important;
410
+ position: relative;
411
+ z-index: 99;
412
+ // &::after {
413
+ // content: '';
414
+ // position: absolute;
415
+ // bottom: 0px;
416
+ // left: 0px;
417
+ // width: 100%;
418
+ // height: 2px;
419
+ // background: linear-gradient( 90deg, rgba(var(--hy-theme), 0) 0%, rgba(var(--hy-theme), 1) 49.31%, rgba(var(--hy-theme), 0) 100%);
420
+ // }
421
+ }
422
+
423
+ // 选择框
424
+ .hy-el-popper.hy-el-tooltip.hy-el-select__popper {
425
+ --hy-el-border-color-light: rgba(var(--hy-border), 1);
426
+ }
427
+
428
+ .hy-el-select__wrapper {
429
+ box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
430
+ }
431
+
432
+ .hy-el-select__wrapper.is-hovering:not(.is-focused) {
433
+ box-shadow: 0 0 0 1px rgba(var(--hy-theme), 1) inset;
434
+ }
435
+
436
+ .hy-el-select__placeholder.is-transparent {
437
+ color: rgba(var(--hy-auxiliary), 1);
438
+ }
439
+
440
+ .hy-el-select__placeholder {
441
+ color: rgba(var(--hy-main), 1);
442
+ }
443
+
444
+ .hy-el-select__caret {
445
+ color: rgba(var(--hy-main), 1);
446
+ }
447
+
448
+ .hy-el-select-dropdown__item.is-selected {
449
+ background-color: rgba(var(--hy-background-2), 1);
450
+ }
451
+
452
+ .hy-el-select-dropdown__item.is-hovering:hover {
453
+ background-color: rgba(var(--hy-background-3), 1);
454
+ color: rgba(var(--hy-theme), 1);
455
+ }
456
+
457
+ .hy-el-select__wrapper.is-disabled {
458
+ box-shadow: 0 0 0 1px rgba(var(--hy-info), 1) inset !important;
459
+ }
460
+
461
+ .hy-el-tag.hy-el-tag--info {
462
+ --hy-el-tag-bg-color: rgba(var(--hy-background-2), 1);
463
+ --hy-el-tag-border-color: rgba(var(--hy-border), 1);
464
+ --hy-el-tag-hover-color: var(--hy-el-color-info);
465
+ }
466
+
467
+ .hy-el-select__selection .hy-el-tag {
468
+ border-color: rgba(var(--hy-border), 1);
469
+ }
470
+
471
+ .hy-el-tag.hy-el-tag--info {
472
+ --hy-el-tag-text-color: rgba(var(--hy-main), 1);
473
+ }
474
+
475
+ .hy-el-tag .hy-el-tag__close {
476
+ background-color: rgba(var(--hy-danger-2), 1) !important;
477
+ }
478
+
479
+ // 消息提示框
480
+ .hy-el-popper,
481
+ .hy-el-tooltip {
482
+ --hy-el-border-color-light: rgba(var(--hy-theme), 1);
483
+ }
484
+
485
+ .hy-el-popper.is-dark {
486
+ --hy-el-border-color-light: rgba(var(--hy-theme), 1);
487
+ --hy-el-text-color-primary: rgba(var(--hy-theme), 1);
488
+ color: rgba(var(--hy-main), 1);
489
+ background: var(--hy-el-popper-bg-color-dark);
490
+ border: 1px solid var(--hy-el-text-color-primary);
491
+ }
492
+
493
+ .hy-el-popover.hy-el-popper {
494
+ color: rgba(var(--hy-main), 1);
495
+ padding: 0px;
496
+ }
497
+
498
+ // 分页器
499
+ .hy-el-pagination.is-background .btn-prev {
500
+ border-radius: 50%;
501
+ background: rgba(var(--hy-background-2), 1);
502
+ color: rgba(var(--hy-main), 1);
503
+
504
+ &:hover {
505
+ color: rgba(var(--hy-theme), 1);
506
+ }
507
+ }
508
+
509
+ .hy-el-pagination.is-background .btn-prev:disabled {
510
+ border-radius: 50%;
511
+
512
+ &:hover {
513
+ color: rgba(var(--hy-main), 1);
514
+ }
515
+ }
516
+
517
+ .hy-el-pagination.is-background .btn-next,
518
+ .hy-el-pagination.is-background .hy-el-pager li {
519
+ border-radius: 50%;
520
+ background: rgba(var(--hy-background-2), 1);
521
+ color: rgba(var(--hy-main), 1);
522
+
523
+ &:hover {
524
+ color: rgba(var(--hy-theme), 1);
525
+ }
526
+ }
527
+
528
+ .hy-el-pagination.is-background .hy-el-pager li {
529
+ border-radius: 50%;
530
+ background: rgba(var(--hy-background-2), 1);
531
+ color: rgba(var(--hy-main), 1);
532
+
533
+ &:hover {
534
+ color: rgba(var(--hy-theme), 1);
535
+ }
536
+ }
537
+
538
+ .hy-el-pagination.is-background .btn-prev.is-active,
539
+ .hy-el-pagination.is-background .btn-next.is-active,
540
+ .hy-el-pagination.is-background .hy-el-pager li.is-active {
541
+ background: rgba(var(--hy-theme), .5);
542
+ box-shadow: 0 0 6px 0 rgba(var(--hy-theme), 1);
543
+ border: 1px solid rgba(var(--hy-theme), 1);
544
+ color: rgba(var(--hy-main), 1);
545
+
546
+ }
547
+
548
+ .hy-el-pagination__total {
549
+ color: rgba(var(--hy-main), 1);
550
+ }
551
+
552
+ .hy-el-pagination__jump {
553
+ color: rgba(var(--hy-main), 1);
554
+ }
555
+
556
+ .hy-el-pagination.is-background .btn-prev:disabled,
557
+ .hy-el-pagination.is-background .btn-prev.is-disabled,
558
+ .hy-el-pagination.is-background .btn-next:disabled,
559
+ .hy-el-pagination.is-background .btn-next.is-disabled,
560
+ .hy-el-pagination.is-background .hy-el-pager li:disabled,
561
+ .hy-el-pagination.is-background .hy-el-pager li.is-disabled {
562
+ &:hover {
563
+ color: var(--hy-el-text-color-placeholder);
564
+ }
565
+ }
566
+
567
+ // 下拉框
568
+ .hy-el-dropdown__popper.hy-el-popper {
569
+ --hy-el-border-color-light: rgba(var(--hy-border), 1);
570
+ }
571
+
572
+ .hy-el-dropdown-menu {
573
+ background-color: rgba(var(--hy-background-2), 1);
574
+
575
+ .hy-el-dropdown-menu__item {
576
+ &:hover {
577
+ background-color: rgba(var(--hy-background-3), 1);
578
+ }
579
+ }
580
+ }
581
+
582
+ .hy-el-dropdown-menu__item:not(.is-disabled):focus,
583
+ .hy-el-dropdown-menu__item:not(.is-disabled):hover {
584
+ background-color: rgba(var(--hy-background-3), 1);
585
+ }
586
+
587
+ .hy-el-dialog {
588
+ --hy-el-dialog-bg-color: var(--hy-el-bg-color);
589
+ --hy-el-dialog-box-shadow: 0 0 12px 0 rgba(var(--hy-theme), 1);
590
+ box-shadow: 0 0 12px 0 transparent;
591
+ background-color: rgba(var(--hy-background), .7);
592
+ backdrop-filter: blur(2px);
593
+ border: 1px solid rgba(var(--hy-theme), 1);
594
+ padding: 0px;
595
+
596
+ &::before {
597
+ content: '';
598
+ position: absolute;
599
+ left: 2px;
600
+ top: 2px;
601
+ width: 24px;
602
+ height: 24px;
603
+ border-left: 1px solid;
604
+ border-top: 1px solid;
605
+ border-top-left-radius: 4px;
606
+ border-image: radial-gradient(circle at 16.27% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
607
+ pointer-events: none;
608
+ }
609
+
610
+ &::after {
611
+ content: '';
612
+ position: absolute;
613
+ right: 2px;
614
+ top: 2px;
615
+ width: 24px;
616
+ height: 24px;
617
+ border-right: 1px solid;
618
+ border-top: 1px solid;
619
+ border-top-right-radius: 4px;
620
+ border-image: radial-gradient(circle at 83.73% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
621
+ pointer-events: none;
622
+ }
623
+ }
624
+
625
+ .hy-el-dialog__body {
626
+ position: relative;
627
+ color: rgba(var(--hy-main), 1);
628
+
629
+ &::before {
630
+ content: '';
631
+ position: absolute;
632
+ left: 2px;
633
+ bottom: 2px;
634
+ width: 24px;
635
+ height: 24px;
636
+ border-left: 1px solid;
637
+ border-bottom: 1px solid;
638
+ border-bottom-left-radius: 4px;
639
+ border-image: radial-gradient(circle at 16.27% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
640
+ pointer-events: none;
641
+ }
642
+
643
+ &::after {
644
+ content: '';
645
+ position: absolute;
646
+ right: 2px;
647
+ bottom: 2px;
648
+ width: 24px;
649
+ height: 24px;
650
+ border-right: 1px solid;
651
+ border-bottom: 1px solid;
652
+ border-bottom-right-radius: 4px;
653
+ border-image: radial-gradient(circle at 83.73% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
654
+ pointer-events: none;
655
+ }
656
+ }
657
+
658
+ .hy-el-dialog__header {
659
+ padding: 0px !important;
660
+ position: relative;
661
+
662
+ &::after {
663
+ content: '';
664
+ position: absolute;
665
+ left: 50%;
666
+ top: 2px;
667
+ transform: translateX(-50%);
668
+ width: 36px;
669
+ height: 1px;
670
+ background: linear-gradient(90deg, rgba(45, 242, 255, 0) 0%, rgba(var(--hy-theme), 1) 10%, rgba(var(--hy-theme), 1) 90%, rgba(45, 242, 255, 0) 100%);
671
+ pointer-events: none;
672
+ }
673
+ }
674
+
675
+ .hy-el-dialog__title {
676
+ color: rgba(var(--hy-main), 1);
677
+ }
678
+
679
+ .hy-el-dialog__headerbtn .hy-el-dialog__close {
680
+ color: rgba(var(--hy-main), 1);
681
+ }
682
+
683
+ .hy-el-drawer__header {
684
+ color: rgba(var(--hy-main), 1);
685
+ }
686
+
687
+ // .hy-el-drawer {
688
+ // --hy-el-drawer-bg-color: rgba(var(--hy-background-4), 1);
689
+ // }
690
+ // 选项卡
691
+ .hy-el-tabs {
692
+ border-radius: 6px 6px 0 0;
693
+ overflow: hidden;
694
+ }
695
+
696
+ .hy-el-tabs__nav-scroll {
697
+ background-color: rgba(var(--hy-background-2), 1);
698
+ }
699
+
700
+ .hy-el-tabs__nav-wrap::after {
701
+ background-color: rgba(var(--hy-background), 1);
702
+ }
703
+
704
+ .hy-el-tabs__active-bar {
705
+ background: transparent;
706
+ }
707
+
708
+ .hy-el-tabs .hy-el-tabs__item {
709
+ border-radius: 6px 6px 0 0;
710
+ border: 1px solid rgba(var(--hy-background-2), 1);
711
+ padding: 0 20px !important;
712
+
713
+ &:hover {
714
+ border-color: rgba(var(--hy-theme), .5);
715
+ box-shadow: inset 0 0 6px 0 rgba(var(--hy-theme), .5);
716
+ }
717
+ }
718
+
719
+ .hy-el-tabs__header {
720
+ margin: 0;
721
+ }
722
+
723
+ .hy-el-tabs__header .hy-el-tabs__item {
724
+ color: rgba(var(--hy-auxiliary), 1);
725
+ font-size: 14px;
726
+
727
+ &:hover {
728
+ color: rgba(var(--hy-main), 1);
729
+ }
730
+ }
731
+
732
+ .hy-el-tabs__content {
733
+ border-radius: 0 0 8px 8px;
734
+ overflow: hidden;
735
+ border: 1px solid rgba(var(--hy-background-2), 1);
736
+ }
737
+
738
+ .hy-el-tabs__item.is-active {
739
+ color: rgba(var(--hy-main), 1);
740
+ background-color: rgba(var(--hy-background-3), 1);
741
+ font-weight: 700;
742
+ position: relative;
743
+
744
+ &::after {
745
+ content: '';
746
+ position: absolute;
747
+ width: 100%;
748
+ height: 2px;
749
+ bottom: 0;
750
+ left: 0px;
751
+ border-radius: 999px;
752
+ background: linear-gradient(90deg,
753
+ rgba(45, 242, 255, 0) 0%,
754
+ rgba(var(--hy-theme), 1) 50%,
755
+ rgba(45, 242, 255, 0) 100%);
756
+ pointer-events: none;
757
+ }
758
+ }
759
+
760
+ .childrenTabs {
761
+ .hy-el-tabs {
762
+ border-radius: 6px 6px 0 0;
763
+ overflow: hidden;
764
+
765
+ .hy-el-tabs__nav-next,
766
+ .hy-el-tabs__nav-prev {
767
+ i::before {
768
+ top: 2px !important;
769
+ }
770
+ }
771
+
772
+ .hy-el-tabs__header {
773
+ margin: 0;
774
+
775
+ .hy-el-tabs__active-bar {
776
+ transform: translateX(0px);
777
+ height: 2px;
778
+ border-bottom: 3px solid;
779
+ border-image: linear-gradient(50deg,
780
+ rgba(0, 216, 247, 0) 0%,
781
+ rgba(var(--hy-theme), 1) 50%,
782
+ rgba(0, 216, 247, 0)) 2 2 2 2;
783
+ background: transparent;
784
+ }
785
+ }
786
+
787
+ .hy-el-tabs__content {
788
+ border-radius: 0 0 8px 8px;
789
+ overflow: hidden;
790
+ border: 0px solid rgba(var(--hy-border), 1);
791
+ }
792
+
793
+ .hy-el-tabs__item {
794
+ border-radius: 6px 6px 0px 0px;
795
+ border: 0px solid transparent;
796
+ padding: 0 20px !important;
797
+ }
798
+
799
+ .hy-el-tabs__item:hover {
800
+ color: #fff;
801
+ box-shadow: transparent 0px 1px 3px 0px inset;
802
+ border-bottom: 3px solid;
803
+ border-image: linear-gradient(50deg,
804
+ rgba(0, 216, 247, 0) 0%,
805
+ rgba(var(--hy-theme), 1) 40%,
806
+ rgba(0, 216, 247, 0) 80%) 2 2 2 2;
807
+ }
808
+
809
+ .is-active {
810
+ color: #fff !important;
811
+ background: transparent;
812
+ box-shadow: transparent 0px 1px 3px 0px inset;
813
+ border-bottom: 3px solid;
814
+ border-image: linear-gradient(50deg,
815
+ rgba(0, 216, 247, 0) 0%,
816
+ rgba(var(--hy-theme), 1) 40%,
817
+ rgba(0, 216, 247, 0) 80%) 2 2 2 2;
818
+
819
+ &::after {
820
+ content: '';
821
+ position: absolute;
822
+ width: 100%;
823
+ height: 0px;
824
+ bottom: 0;
825
+ left: 0px;
826
+ }
827
+ }
828
+
829
+ .hy-el-tabs__nav-wrap.is-scrollable,
830
+ .hy-el-tabs__nav-scroll {
831
+ background: transparent;
832
+ }
833
+ }
834
+ }
835
+
836
+ // 级联选择器
837
+ .hy-el-cascader__dropdown {
838
+ --hy-el-border-color-light: rgba(var(--hy-border), 1);
839
+ }
840
+
841
+ .hy-el-cascader-panel {
842
+ --hy-el-cascader-menu-border: 1px solid rgba(var(--hy-border), 1);
843
+ }
844
+
845
+ // 表单
846
+ .hy-el-form-item--label-top .hy-el-form-item__label {
847
+ width: 100%;
848
+ color: rgba(var(--hy-main), 1);
849
+ }
850
+
851
+ .hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label-wrap>.hy-el-form-item__label:before {
852
+ color: transparent;
853
+ margin-right: 0px;
854
+ display: none;
855
+ }
856
+
857
+ .hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label:before {
858
+ color: transparent;
859
+ margin-right: 0px;
860
+ display: none;
861
+ }
862
+
863
+ .hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label .form-label {
864
+ font-size: 14px;
865
+ color: rgba(var(--hy-main), 1);
866
+
867
+ &::after {
868
+ content: '*';
869
+ color: rgba(var(--hy-danger), 1);
870
+ margin-left: 4px;
871
+ }
872
+ }
873
+
874
+
875
+ // 开关
876
+ .hy-el-switch {
877
+ --hy-el-switch-on-color: rgba(var(--hy-success-2), 1);
878
+ --hy-el-switch-off-color: rgba(var(--hy-background-3), 1);
879
+ }
880
+
881
+ .hy-el-switch__core {
882
+ border: 1px solid var(--hy-el-switch-border-color, rgba(var(--hy-border), 1));
883
+ }
884
+
885
+ .hy-el-switch.is-checked .hy-el-switch__core {
886
+ border-color: var(--hy-el-switch-border-color, rgba(var(--hy-auxiliary), 1));
887
+
888
+ .hy-el-switch__inner-wrapper {
889
+ color: rgba(var(--hy-main), 1);
890
+ margin-right: 8px;
891
+ font-weight: 700;
892
+ }
893
+ }
894
+
895
+ .hy-el-switch__core .hy-el-switch__inner-wrapper {
896
+ color: rgba(var(--hy-auxiliary), 1);
897
+ }
898
+
899
+ /* 折叠 */
900
+ .collapse-item__header_lightColor.hy-el-collapse {
901
+
902
+ border-bottom: 1px solid transparent;
903
+ border-top: 1px solid transparent;
904
+
905
+ .hy-el-collapse-item {
906
+ margin-top: 8px;
907
+ border-radius: 6px;
908
+ overflow: hidden;
909
+
910
+ .hy-el-collapse-item__header {
911
+ border-bottom: 1px solid transparent;
912
+ color: rgba(var(--hy-main), 1);
913
+ line-height: inherit;
914
+ text-align: left;
915
+ font-size: 14px;
916
+ font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
917
+ font-weight: 700;
918
+ display: flex;
919
+ justify-content: space-between;
920
+ position: relative;
921
+ height: 38px;
922
+ padding-left: 20px;
923
+ }
924
+
925
+ .hy-el-collapse-item__wrap {
926
+ border-bottom: 0px solid transparent;
927
+
928
+ .hy-el-collapse-item__content {
929
+ padding-bottom: 0px;
930
+ }
931
+ }
932
+
933
+ }
934
+ }
935
+
936
+ // 日历
937
+ .hy-el-calendar {
938
+ background-color: rgba(var(--hy-background), 1);
939
+ --hy-el-calendar-border: var(--hy-el-table-border, 1px solid rgba(157, 167, 178, .5));
940
+
941
+ .hy-el-calendar__body {
942
+ padding: 0px;
943
+ }
944
+
945
+ .hy-el-calendar-table {
946
+ color: rgba(var(--hy-info), 1);
947
+
948
+ thead th {
949
+ color: rgba(var(--hy-main), 1);
950
+ }
951
+
952
+
953
+ td.is-selected {
954
+ box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
955
+ background: rgba(var(--hy-background-2), 1);
956
+ .hy-el-calendar-day {
957
+ border: 1px solid rgba(var(--hy-theme), 1);
958
+ }
959
+ }
960
+
961
+ td.is-today {
962
+ color: rgba(var(--hy-info), 1);
963
+ }
964
+
965
+ td.current {
966
+ background-color: rgba(var(--hy-background-2), 1);
967
+ }
968
+
969
+ .hy-el-calendar-day:hover {
970
+ border: 1px solid rgba(var(--hy-theme), 1);
971
+ box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
972
+ background: rgba(var(--hy-background-2), 1);
973
+ }
974
+
975
+ &:not(.is-range) td.next,
976
+ &:not(.is-range) td.prev {
977
+ background: rgba(var(--hy-background), 1);
978
+
979
+ .hy-el-calendar-day:hover {
980
+ background: rgba(var(--hy-background), 1);
981
+ }
982
+ }
983
+
984
+ }
985
+ }