vanilla-jui 1.7.27 → 1.7.29
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.
- package/dist/index.d.ts +2 -4
- package/dist/index.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/css/gradient.css +64 -129
- package/src/css/themes/default/badge.css +6 -12
- package/src/css/themes/default/button.css +24 -36
- package/src/css/themes/default/captcha.css +2 -2
- package/src/css/themes/default/editor.css +13 -13
- package/src/css/themes/default/form.css +15 -15
- package/src/css/themes/default/menu.css +36 -90
- package/src/css/themes/default/swiper.css +5 -7
- package/src/css/themes/default/tip.css +8 -8
- package/src/css/themes/default/toast.css +22 -18
- package/src/css/themes/default/tooltip.css +4 -4
- package/src/css/tokens.css +30 -25
- package/src/primitives/toast.ts +15 -18
package/package.json
CHANGED
package/src/css/gradient.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer gradient {
|
|
2
|
+
|
|
2
3
|
.bg-gradient-sunrise,
|
|
3
4
|
.bg-gradient-aurora,
|
|
4
5
|
.bg-gradient-ocean,
|
|
@@ -13,196 +14,130 @@
|
|
|
13
14
|
|
|
14
15
|
.bg-gradient-auto {
|
|
15
16
|
background:
|
|
16
|
-
radial-gradient(
|
|
17
|
-
circle at 16% 16%,
|
|
17
|
+
radial-gradient(circle at 16% 16%,
|
|
18
18
|
color-mix(in srgb, var(--tone-solid) 30%, transparent),
|
|
19
|
-
transparent 34%
|
|
20
|
-
|
|
21
|
-
radial-gradient(
|
|
22
|
-
circle at 84% 0%,
|
|
19
|
+
transparent 34%),
|
|
20
|
+
radial-gradient(circle at 84% 0%,
|
|
23
21
|
color-mix(in srgb, var(--tone-tint) 24%, transparent),
|
|
24
|
-
transparent 30%
|
|
25
|
-
|
|
26
|
-
linear-gradient(
|
|
27
|
-
135deg,
|
|
22
|
+
transparent 30%),
|
|
23
|
+
linear-gradient(135deg,
|
|
28
24
|
color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
|
|
29
|
-
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
|
|
30
|
-
);
|
|
25
|
+
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
|
|
31
26
|
}
|
|
32
27
|
|
|
33
28
|
.bg-gradient-sunrise {
|
|
34
29
|
background:
|
|
35
|
-
radial-gradient(
|
|
36
|
-
circle at 16% 16%,
|
|
30
|
+
radial-gradient(circle at 16% 16%,
|
|
37
31
|
color-mix(in srgb, var(--tone-solid) 30%, transparent),
|
|
38
|
-
transparent 34%
|
|
39
|
-
|
|
40
|
-
radial-gradient(
|
|
41
|
-
circle at 84% 0%,
|
|
32
|
+
transparent 34%),
|
|
33
|
+
radial-gradient(circle at 84% 0%,
|
|
42
34
|
color-mix(in srgb, var(--state-warning) 24%, transparent),
|
|
43
|
-
transparent 30%
|
|
44
|
-
|
|
45
|
-
linear-gradient(
|
|
46
|
-
135deg,
|
|
35
|
+
transparent 30%),
|
|
36
|
+
linear-gradient(135deg,
|
|
47
37
|
color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
|
|
48
|
-
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
|
|
49
|
-
);
|
|
38
|
+
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
|
|
50
39
|
}
|
|
51
40
|
|
|
52
41
|
.bg-gradient-aurora {
|
|
53
42
|
background:
|
|
54
|
-
radial-gradient(
|
|
55
|
-
circle at 12% 12%,
|
|
43
|
+
radial-gradient(circle at 12% 12%,
|
|
56
44
|
color-mix(in srgb, var(--state-info) 24%, transparent),
|
|
57
|
-
transparent 32%
|
|
58
|
-
|
|
59
|
-
radial-gradient(
|
|
60
|
-
circle at 84% 18%,
|
|
45
|
+
transparent 32%),
|
|
46
|
+
radial-gradient(circle at 84% 18%,
|
|
61
47
|
color-mix(in srgb, var(--state-success) 20%, transparent),
|
|
62
|
-
transparent 30%
|
|
63
|
-
|
|
64
|
-
linear-gradient(
|
|
65
|
-
135deg,
|
|
48
|
+
transparent 30%),
|
|
49
|
+
linear-gradient(135deg,
|
|
66
50
|
color-mix(in srgb, var(--ui-bg) 82%, var(--state-info-subtle)),
|
|
67
|
-
color-mix(
|
|
68
|
-
in srgb,
|
|
51
|
+
color-mix(in srgb,
|
|
69
52
|
var(--ui-surface-raised) 84%,
|
|
70
|
-
var(--state-success-subtle)
|
|
71
|
-
)
|
|
72
|
-
);
|
|
53
|
+
var(--state-success-subtle)));
|
|
73
54
|
}
|
|
74
55
|
|
|
75
56
|
.bg-gradient-ocean {
|
|
76
57
|
background:
|
|
77
|
-
radial-gradient(
|
|
78
|
-
circle at 22% 12%,
|
|
58
|
+
radial-gradient(circle at 22% 12%,
|
|
79
59
|
color-mix(in srgb, var(--state-info) 28%, transparent),
|
|
80
|
-
transparent 34%
|
|
81
|
-
|
|
82
|
-
radial-gradient(
|
|
83
|
-
circle at 78% 0%,
|
|
60
|
+
transparent 34%),
|
|
61
|
+
radial-gradient(circle at 78% 0%,
|
|
84
62
|
color-mix(in srgb, var(--ui-blue) 22%, transparent),
|
|
85
|
-
transparent 28%
|
|
86
|
-
|
|
87
|
-
linear-gradient(
|
|
88
|
-
135deg,
|
|
63
|
+
transparent 28%),
|
|
64
|
+
linear-gradient(135deg,
|
|
89
65
|
color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
|
|
90
|
-
color-mix(
|
|
91
|
-
in srgb,
|
|
66
|
+
color-mix(in srgb,
|
|
92
67
|
var(--ui-surface-raised) 84%,
|
|
93
|
-
var(--ui-teal-subtle, var(--state-info-subtle))
|
|
94
|
-
)
|
|
95
|
-
);
|
|
68
|
+
var(--ui-teal-subtle, var(--state-info-subtle))));
|
|
96
69
|
}
|
|
97
70
|
|
|
98
71
|
.bg-gradient-meadow {
|
|
99
72
|
background:
|
|
100
|
-
radial-gradient(
|
|
101
|
-
circle at 18% 16%,
|
|
73
|
+
radial-gradient(circle at 18% 16%,
|
|
102
74
|
color-mix(in srgb, var(--state-success) 28%, transparent),
|
|
103
|
-
transparent 34%
|
|
104
|
-
|
|
105
|
-
radial-gradient(
|
|
106
|
-
circle at 82% 14%,
|
|
75
|
+
transparent 34%),
|
|
76
|
+
radial-gradient(circle at 82% 14%,
|
|
107
77
|
color-mix(in srgb, var(--ui-mint) 24%, transparent),
|
|
108
|
-
transparent 30%
|
|
109
|
-
|
|
110
|
-
linear-gradient(
|
|
111
|
-
135deg,
|
|
78
|
+
transparent 30%),
|
|
79
|
+
linear-gradient(135deg,
|
|
112
80
|
color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
|
|
113
|
-
color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint))
|
|
114
|
-
);
|
|
81
|
+
color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint)));
|
|
115
82
|
}
|
|
116
83
|
|
|
117
84
|
.bg-gradient-ember {
|
|
118
85
|
background:
|
|
119
|
-
radial-gradient(
|
|
120
|
-
circle at 18% 10%,
|
|
86
|
+
radial-gradient(circle at 18% 10%,
|
|
121
87
|
color-mix(in srgb, var(--state-warning) 30%, transparent),
|
|
122
|
-
transparent 32%
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
transparent 28%
|
|
128
|
-
),
|
|
129
|
-
linear-gradient(
|
|
130
|
-
135deg,
|
|
88
|
+
transparent 32%),
|
|
89
|
+
radial-gradient(circle at 84% 18%,
|
|
90
|
+
color-mix(in srgb, var(--state-error) 22%, transparent),
|
|
91
|
+
transparent 28%),
|
|
92
|
+
linear-gradient(135deg,
|
|
131
93
|
color-mix(in srgb, var(--ui-bg) 80%, var(--state-warning-subtle)),
|
|
132
|
-
color-mix(
|
|
133
|
-
in srgb,
|
|
94
|
+
color-mix(in srgb,
|
|
134
95
|
var(--ui-surface-raised) 84%,
|
|
135
|
-
var(--state-
|
|
136
|
-
)
|
|
137
|
-
);
|
|
96
|
+
var(--state-error-subtle)));
|
|
138
97
|
}
|
|
139
98
|
|
|
140
99
|
.bg-gradient-dusk {
|
|
141
100
|
background:
|
|
142
|
-
radial-gradient(
|
|
143
|
-
circle at 18% 16%,
|
|
101
|
+
radial-gradient(circle at 18% 16%,
|
|
144
102
|
color-mix(in srgb, var(--tone-solid) 28%, transparent),
|
|
145
|
-
transparent 33%
|
|
146
|
-
|
|
147
|
-
radial-gradient(
|
|
148
|
-
circle at 82% 14%,
|
|
103
|
+
transparent 33%),
|
|
104
|
+
radial-gradient(circle at 82% 14%,
|
|
149
105
|
color-mix(in srgb, var(--ui-violet) 22%, transparent),
|
|
150
|
-
transparent 30%
|
|
151
|
-
|
|
152
|
-
linear-gradient(
|
|
153
|
-
135deg,
|
|
106
|
+
transparent 30%),
|
|
107
|
+
linear-gradient(135deg,
|
|
154
108
|
color-mix(in srgb, var(--ui-bg) 78%, var(--tone-wash)),
|
|
155
|
-
color-mix(
|
|
156
|
-
in srgb,
|
|
109
|
+
color-mix(in srgb,
|
|
157
110
|
var(--ui-surface-raised) 86%,
|
|
158
|
-
var(--ui-violet-subtle, var(--tone-subtle))
|
|
159
|
-
)
|
|
160
|
-
);
|
|
111
|
+
var(--ui-violet-subtle, var(--tone-subtle))));
|
|
161
112
|
}
|
|
162
113
|
|
|
163
114
|
.bg-gradient-gold {
|
|
164
115
|
background:
|
|
165
|
-
radial-gradient(
|
|
166
|
-
circle at 20% 16%,
|
|
116
|
+
radial-gradient(circle at 20% 16%,
|
|
167
117
|
color-mix(in srgb, var(--ui-gold) 24%, transparent),
|
|
168
|
-
transparent 34%
|
|
169
|
-
|
|
170
|
-
radial-gradient(
|
|
171
|
-
circle at 80% 10%,
|
|
118
|
+
transparent 34%),
|
|
119
|
+
radial-gradient(circle at 80% 10%,
|
|
172
120
|
color-mix(in srgb, var(--state-warning) 18%, transparent),
|
|
173
|
-
transparent 28%
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
135deg,
|
|
177
|
-
color-mix(
|
|
178
|
-
in srgb,
|
|
121
|
+
transparent 28%),
|
|
122
|
+
linear-gradient(135deg,
|
|
123
|
+
color-mix(in srgb,
|
|
179
124
|
var(--ui-bg) 80%,
|
|
180
|
-
var(--ui-gold-surface, var(--state-warning-subtle))
|
|
181
|
-
)
|
|
182
|
-
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint))
|
|
183
|
-
);
|
|
125
|
+
var(--ui-gold-surface, var(--state-warning-subtle))),
|
|
126
|
+
color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint)));
|
|
184
127
|
}
|
|
185
128
|
|
|
186
129
|
.bg-gradient-forest {
|
|
187
130
|
background:
|
|
188
|
-
radial-gradient(
|
|
189
|
-
circle at 16% 16%,
|
|
131
|
+
radial-gradient(circle at 16% 16%,
|
|
190
132
|
color-mix(in srgb, var(--ui-olive) 24%, transparent),
|
|
191
|
-
transparent 34%
|
|
192
|
-
|
|
193
|
-
radial-gradient(
|
|
194
|
-
circle at 84% 14%,
|
|
133
|
+
transparent 34%),
|
|
134
|
+
radial-gradient(circle at 84% 14%,
|
|
195
135
|
color-mix(in srgb, var(--state-success) 18%, transparent),
|
|
196
|
-
transparent 30%
|
|
197
|
-
|
|
198
|
-
linear-gradient(
|
|
199
|
-
135deg,
|
|
136
|
+
transparent 30%),
|
|
137
|
+
linear-gradient(135deg,
|
|
200
138
|
color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
|
|
201
|
-
color-mix(
|
|
202
|
-
in srgb,
|
|
139
|
+
color-mix(in srgb,
|
|
203
140
|
var(--ui-surface-raised) 86%,
|
|
204
|
-
var(--state-success-subtle)
|
|
205
|
-
)
|
|
206
|
-
);
|
|
141
|
+
var(--state-success-subtle)));
|
|
207
142
|
}
|
|
208
|
-
}
|
|
143
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.j-badge {
|
|
3
|
-
--badge-padding: 0
|
|
3
|
+
--badge-padding: 0 var(--s1d5);
|
|
4
4
|
--badge-min-width: 1.25rem;
|
|
5
5
|
--badge-height: 1.25rem;
|
|
6
6
|
--badge-font-size: var(--font-size-sm);
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
--badge-border-color: var(--tone-wash);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
.j-badge.is-
|
|
69
|
+
.j-badge.is-info {
|
|
70
70
|
--badge-fg: var(--state-info-text);
|
|
71
71
|
--badge-bg: var(--state-info-soft);
|
|
72
72
|
--badge-border-color: var(--state-info-border);
|
|
@@ -84,15 +84,9 @@
|
|
|
84
84
|
--badge-border-color: var(--state-warning-border);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
.j-badge.is-danger {
|
|
88
|
-
--badge-fg: var(--state-danger-text);
|
|
89
|
-
--badge-bg: var(--state-danger-subtle);
|
|
90
|
-
--badge-border-color: var(--state-danger-subtle);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
87
|
.j-badge.is-error {
|
|
94
|
-
--badge-fg: var(--state-
|
|
95
|
-
--badge-bg: var(--state-
|
|
96
|
-
--badge-border-color: var(--state-
|
|
88
|
+
--badge-fg: var(--state-error-text);
|
|
89
|
+
--badge-bg: var(--state-error-subtle);
|
|
90
|
+
--badge-border-color: var(--state-error-subtle);
|
|
97
91
|
}
|
|
98
|
-
}
|
|
92
|
+
}
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
--btn-padding: var(--icon-padding, 0);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.j-button.is-
|
|
128
|
+
.j-button.is-info {
|
|
129
129
|
--btn-bg: var(--state-info-soft);
|
|
130
130
|
--btn-fg: var(--state-info-text);
|
|
131
131
|
}
|
|
@@ -135,9 +135,9 @@
|
|
|
135
135
|
--btn-fg: var(--state-success-text);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
.j-button.is-
|
|
139
|
-
--btn-bg: var(--state-
|
|
140
|
-
--btn-fg: var(--state-
|
|
138
|
+
.j-button.is-error {
|
|
139
|
+
--btn-bg: var(--state-error-soft);
|
|
140
|
+
--btn-fg: var(--state-error-text);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.j-button.is-warning {
|
|
@@ -145,11 +145,6 @@
|
|
|
145
145
|
--btn-fg: var(--state-warning-text);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
.j-button.is-error {
|
|
149
|
-
--btn-bg: var(--state-danger);
|
|
150
|
-
--btn-fg: var(--state-danger-fg);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
148
|
.j-button[class*='ui-surface-'] {
|
|
154
149
|
--btn-border-color: var(--ui-border);
|
|
155
150
|
--btn-fg: var(--ui-fg);
|
|
@@ -203,7 +198,14 @@
|
|
|
203
198
|
.j-button:not(:disabled):focus-within,
|
|
204
199
|
.j-button:not(:disabled):focus-visible {
|
|
205
200
|
--btn-border-color: var(--tone-solid);
|
|
206
|
-
--btn-box-shadow: 0 0 0
|
|
201
|
+
--btn-box-shadow: 0 0 0 3px var(--tone-ring);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.j-button.is-default:not(:disabled):focus,
|
|
205
|
+
.j-button.is-default:not(:disabled):focus-within,
|
|
206
|
+
.j-button.is-default:not(:disabled):focus-visible {
|
|
207
|
+
--btn-border-color: var(--ui-fg-muted);
|
|
208
|
+
--btn-box-shadow: 0 0 0 3px var(--tone-card-active);
|
|
207
209
|
}
|
|
208
210
|
|
|
209
211
|
.j-button.is-reverse:not(:disabled).is-active,
|
|
@@ -211,7 +213,7 @@
|
|
|
211
213
|
.j-button.is-reverse:not(:disabled):focus-within,
|
|
212
214
|
.j-button.is-reverse:not(:disabled):focus-visible {
|
|
213
215
|
--btn-border-color: transparent;
|
|
214
|
-
--btn-box-shadow: 0 0 0
|
|
216
|
+
--btn-box-shadow: 0 0 0 3px var(--tone-card-active);
|
|
215
217
|
}
|
|
216
218
|
|
|
217
219
|
.j-button.is-solid:not(:disabled).is-active,
|
|
@@ -221,12 +223,12 @@
|
|
|
221
223
|
--btn-border-color: transparent;
|
|
222
224
|
}
|
|
223
225
|
|
|
224
|
-
.j-button.is-
|
|
225
|
-
.j-button.is-
|
|
226
|
-
.j-button.is-
|
|
227
|
-
.j-button.is-
|
|
226
|
+
.j-button.is-info:not(:disabled).is-active,
|
|
227
|
+
.j-button.is-info:not(:disabled):focus,
|
|
228
|
+
.j-button.is-info:not(:disabled):focus-within,
|
|
229
|
+
.j-button.is-info:not(:disabled):focus-visible {
|
|
228
230
|
--btn-border-color: var(--state-info);
|
|
229
|
-
--btn-box-shadow: 0 0 0
|
|
231
|
+
--btn-box-shadow: 0 0 0 3px var(--state-info-ring);
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
.j-button.is-success:not(:disabled).is-active,
|
|
@@ -234,7 +236,7 @@
|
|
|
234
236
|
.j-button.is-success:not(:disabled):focus-within,
|
|
235
237
|
.j-button.is-success:not(:disabled):focus-visible {
|
|
236
238
|
--btn-border-color: var(--state-success);
|
|
237
|
-
--btn-box-shadow: 0 0 0
|
|
239
|
+
--btn-box-shadow: 0 0 0 3px var(--state-success-ring);
|
|
238
240
|
}
|
|
239
241
|
|
|
240
242
|
.j-button.is-warning:not(:disabled).is-active,
|
|
@@ -242,24 +244,15 @@
|
|
|
242
244
|
.j-button.is-warning:not(:disabled):focus-within,
|
|
243
245
|
.j-button.is-warning:not(:disabled):focus-visible {
|
|
244
246
|
--btn-border-color: var(--state-warning);
|
|
245
|
-
--btn-box-shadow: 0 0 0
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.j-button.is-danger:not(:disabled).is-active,
|
|
249
|
-
.j-button.is-danger:not(:disabled):focus,
|
|
250
|
-
.j-button.is-danger:not(:disabled):focus-within,
|
|
251
|
-
.j-button.is-danger:not(:disabled):focus-visible {
|
|
252
|
-
--btn-border-color: var(--state-danger);
|
|
253
|
-
--btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
|
|
247
|
+
--btn-box-shadow: 0 0 0 3px var(--state-warning-ring);
|
|
254
248
|
}
|
|
255
249
|
|
|
256
250
|
.j-button.is-error:not(:disabled).is-active,
|
|
257
251
|
.j-button.is-error:not(:disabled):focus,
|
|
258
252
|
.j-button.is-error:not(:disabled):focus-within,
|
|
259
253
|
.j-button.is-error:not(:disabled):focus-visible {
|
|
260
|
-
--btn-border-color:
|
|
261
|
-
--btn-box-shadow:
|
|
262
|
-
0 0 0 1px currentColor, 0 0 0 4px var(--state-danger-ring);
|
|
254
|
+
--btn-border-color: var(--state-error);
|
|
255
|
+
--btn-box-shadow: 0 0 0 3px var(--state-error-muted);
|
|
263
256
|
}
|
|
264
257
|
|
|
265
258
|
.j-button.is-default:hover:not(:disabled) {
|
|
@@ -291,14 +284,9 @@
|
|
|
291
284
|
--btn-ring: var(--state-warning);
|
|
292
285
|
}
|
|
293
286
|
|
|
294
|
-
.j-button.is-danger:not(:disabled):active,
|
|
295
|
-
.j-button.is-danger:not(:disabled):focus-visible {
|
|
296
|
-
--btn-ring: var(--state-danger);
|
|
297
|
-
}
|
|
298
|
-
|
|
299
287
|
.j-button.is-error:not(:disabled):active,
|
|
300
288
|
.j-button.is-error:not(:disabled):focus-visible {
|
|
301
|
-
--btn-ring: var(--state-
|
|
289
|
+
--btn-ring: var(--state-error);
|
|
302
290
|
}
|
|
303
291
|
|
|
304
292
|
.j-button-group .j-button {
|
|
@@ -363,4 +351,4 @@
|
|
|
363
351
|
.j-button-group.is-vertical .j-button:focus-within {
|
|
364
352
|
z-index: auto;
|
|
365
353
|
}
|
|
366
|
-
}
|
|
354
|
+
}
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
|
|
53
53
|
.j-cap-field .cap-control[data-state='error'],
|
|
54
54
|
.j-cap-field .cap-control[data-state='rate-limited'] {
|
|
55
|
-
border-color: var(--state-
|
|
56
|
-
color: var(--state-
|
|
55
|
+
border-color: var(--state-error-border);
|
|
56
|
+
color: var(--state-error-text);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.j-cap-field .cap-control-icon,
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
margin: var(--editor-block-space) 0;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
.j-editor
|
|
129
|
+
.j-editor>div {
|
|
130
130
|
margin: var(--editor-block-space) 0;
|
|
131
131
|
}
|
|
132
132
|
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
display: flex;
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
.j-editor ul[data-type='taskList'] li
|
|
330
|
+
.j-editor ul[data-type='taskList'] li>label {
|
|
331
331
|
flex: none;
|
|
332
332
|
user-select: none;
|
|
333
333
|
}
|
|
@@ -390,12 +390,12 @@
|
|
|
390
390
|
color: var(--tone-subtitle);
|
|
391
391
|
}
|
|
392
392
|
|
|
393
|
-
.j-editor blockquote
|
|
393
|
+
.j-editor blockquote>* {
|
|
394
394
|
/* margin-block: 0; */
|
|
395
395
|
margin: 0;
|
|
396
396
|
}
|
|
397
397
|
|
|
398
|
-
.j-editor blockquote
|
|
398
|
+
.j-editor blockquote>*+* {
|
|
399
399
|
margin-top: 0.25rem;
|
|
400
400
|
}
|
|
401
401
|
|
|
@@ -473,7 +473,7 @@
|
|
|
473
473
|
background: var(--state-success);
|
|
474
474
|
box-shadow:
|
|
475
475
|
14px 0 0 var(--state-warning),
|
|
476
|
-
28px 0 0 var(--state-
|
|
476
|
+
28px 0 0 var(--state-error);
|
|
477
477
|
}
|
|
478
478
|
|
|
479
479
|
pre .code-language,
|
|
@@ -505,7 +505,7 @@
|
|
|
505
505
|
scrollbar-color: var(--ui-border) transparent;
|
|
506
506
|
}
|
|
507
507
|
|
|
508
|
-
pre .code-header
|
|
508
|
+
pre .code-header+code[class*='language-'] {
|
|
509
509
|
padding: 0.5rem 1rem 0.75rem;
|
|
510
510
|
}
|
|
511
511
|
|
|
@@ -721,22 +721,22 @@
|
|
|
721
721
|
transition: transform 0.2s ease;
|
|
722
722
|
}
|
|
723
723
|
|
|
724
|
-
.j-editor details[open]
|
|
724
|
+
.j-editor details[open]>summary::before {
|
|
725
725
|
transform: rotate(90deg);
|
|
726
726
|
}
|
|
727
727
|
|
|
728
728
|
.j-editor details[open] p,
|
|
729
729
|
.j-editor details[open] ul,
|
|
730
730
|
.j-editor details[open] ol,
|
|
731
|
-
.j-editor details[open]
|
|
731
|
+
.j-editor details[open]>* {
|
|
732
732
|
margin-bottom: 1em;
|
|
733
733
|
}
|
|
734
734
|
|
|
735
|
-
.j-editor details[open]
|
|
735
|
+
.j-editor details[open]>summary+* {
|
|
736
736
|
margin-top: 0;
|
|
737
737
|
}
|
|
738
738
|
|
|
739
|
-
.j-editor details[open]
|
|
739
|
+
.j-editor details[open]>*:last-child {
|
|
740
740
|
margin-bottom: 0;
|
|
741
741
|
}
|
|
742
742
|
|
|
@@ -790,11 +790,11 @@
|
|
|
790
790
|
/* ============================================
|
|
791
791
|
Block Item - 通用块级元素
|
|
792
792
|
============================================ */
|
|
793
|
-
.j-editor
|
|
793
|
+
.j-editor>*:first-child {
|
|
794
794
|
margin-top: 0;
|
|
795
795
|
}
|
|
796
796
|
|
|
797
|
-
.j-editor
|
|
797
|
+
.j-editor>*:last-child {
|
|
798
798
|
margin-bottom: 0;
|
|
799
799
|
}
|
|
800
800
|
|
|
@@ -854,4 +854,4 @@
|
|
|
854
854
|
.mobile .j-editor p {
|
|
855
855
|
--editor-block-space: 1.5rem;
|
|
856
856
|
}
|
|
857
|
-
}
|
|
857
|
+
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
.j-form .field-legend.is-required::after {
|
|
21
21
|
content: '*';
|
|
22
|
-
color: var(--state-
|
|
22
|
+
color: var(--state-error);
|
|
23
23
|
margin-left: var(--space);
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.j-form .form-field .field-control .help-block[data-valid='false'] {
|
|
33
|
-
color: var(--state-
|
|
33
|
+
color: var(--state-error);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.j-form .form-buttons {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.j-input:not([type='checkbox']) {
|
|
58
|
-
--input-padding:
|
|
58
|
+
--input-padding: var(--s1d5) var(--s2);
|
|
59
59
|
--input-height: var(--el-height-md);
|
|
60
60
|
--input-line-height: var(--line-height);
|
|
61
61
|
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
.j-radio.is-group label span.radio-text {
|
|
247
247
|
color: var(--ui-fg);
|
|
248
248
|
background-color: var(--ui-bg);
|
|
249
|
-
padding: var(--radio-group-padding,
|
|
249
|
+
padding: var(--radio-group-padding, var(--s1d5) var(--s3));
|
|
250
250
|
height: var(--el-height-md);
|
|
251
251
|
line-height: var(--line-height);
|
|
252
252
|
box-shadow: 0 0 0 1px var(--ui-input-border);
|
|
@@ -288,7 +288,7 @@
|
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
.j-radio.is-group.is-sm label span.radio-text {
|
|
291
|
-
--radio-group-padding: var(--space)
|
|
291
|
+
--radio-group-padding: var(--space) var(--s2d5);
|
|
292
292
|
height: var(--el-height-sm);
|
|
293
293
|
}
|
|
294
294
|
|
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
}
|
|
298
298
|
|
|
299
299
|
.j-radio.is-group.is-lg label span.radio-text {
|
|
300
|
-
--radio-group-padding: var(--s3)
|
|
300
|
+
--radio-group-padding: var(--s3) var(--s3d5);
|
|
301
301
|
height: var(--el-height-lg);
|
|
302
302
|
}
|
|
303
303
|
|
|
@@ -320,11 +320,11 @@
|
|
|
320
320
|
.j-checkbox label {
|
|
321
321
|
display: flex;
|
|
322
322
|
align-items: center;
|
|
323
|
-
gap: var(--
|
|
324
|
-
font-size: var(--
|
|
323
|
+
gap: var(--s1d5);
|
|
324
|
+
font-size: var(--font-size-md);
|
|
325
325
|
height: var(--el-height-md);
|
|
326
|
-
padding:
|
|
327
|
-
border-radius: var(--
|
|
326
|
+
padding: var(--s2);
|
|
327
|
+
border-radius: var(--radius-md);
|
|
328
328
|
}
|
|
329
329
|
|
|
330
330
|
.j-radio label,
|
|
@@ -333,7 +333,7 @@
|
|
|
333
333
|
}
|
|
334
334
|
|
|
335
335
|
.j-checkbox label:not(:has(input[type='checkbox']:disabled)):hover {
|
|
336
|
-
background-color: var(--
|
|
336
|
+
background-color: var(--ui-surface-hover);
|
|
337
337
|
}
|
|
338
338
|
|
|
339
339
|
.j-checkbox input[type='checkbox'] {
|
|
@@ -458,7 +458,7 @@
|
|
|
458
458
|
|
|
459
459
|
/* select */
|
|
460
460
|
select.j-select {
|
|
461
|
-
--input-padding:
|
|
461
|
+
--input-padding: var(--s1d5);
|
|
462
462
|
--input-height: var(--el-height-md);
|
|
463
463
|
--input-font-size: var(--font-size-md);
|
|
464
464
|
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
.input-inner-group:has(input:focus),
|
|
629
629
|
.input-inner-group:has(select:focus) {
|
|
630
630
|
border-color: var(--tone-solid);
|
|
631
|
-
box-shadow: 0 0 0
|
|
631
|
+
box-shadow: 0 0 0 3px var(--tone-ring);
|
|
632
632
|
}
|
|
633
633
|
|
|
634
634
|
.input-inner-group .el-addon svg {
|
|
@@ -682,7 +682,7 @@
|
|
|
682
682
|
.j-input[data-valid='false'],
|
|
683
683
|
.j-select[data-valid='false'],
|
|
684
684
|
.j-textarea[data-valid='false'] {
|
|
685
|
-
border-color: var(--state-
|
|
685
|
+
border-color: var(--state-error);
|
|
686
686
|
/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); */
|
|
687
687
|
}
|
|
688
688
|
|
|
@@ -710,7 +710,7 @@
|
|
|
710
710
|
.input-group .j-button:not(:disabled):active {
|
|
711
711
|
outline: 0;
|
|
712
712
|
border-color: var(--tone-solid);
|
|
713
|
-
box-shadow: 0 0 0
|
|
713
|
+
box-shadow: 0 0 0 3px var(--tone-ring);
|
|
714
714
|
}
|
|
715
715
|
|
|
716
716
|
.j-radio label input[type='radio']:focus-within {
|