@neatui/css 2.0.10 → 3.0.0-beta.0
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/components/btns/base.scss +1 -3
- package/components/btns/btns@a.scss +1 -1
- package/components/btns/mcui@btns.scss +0 -2
- package/components/chat/chat@a.scss +22 -24
- package/components/cite/cite@a.scss +5 -3
- package/components/demo/demo@a.scss +2 -2
- package/components/form/README.md +2 -2
- package/components/form/base.scss +2 -2
- package/components/form/form@b/input.scss +4 -4
- package/components/form/form@c/checkbox.scss +1 -1
- package/components/form/form@c/input.scss +2 -2
- package/components/form/form@d/base.scss +6 -6
- package/components/form/form@d/checkbox.scss +1 -1
- package/components/form/form@d/date.scss +3 -3
- package/components/form/form@d/input.scss +12 -12
- package/components/form/form@d/radio.scss +1 -1
- package/components/form/form@d/select.scss +4 -4
- package/components/form/form@d/switch.scss +4 -4
- package/components/form/form@d/textarea.scss +5 -5
- package/components/form/form@d/upload.scss +4 -4
- package/components/grid/grid@a.scss +1 -1
- package/components/imgs/imgs@b.scss +8 -8
- package/components/list/list@c.scss +5 -4
- package/components/load/load@i.scss +3 -3
- package/components/opts/opts@a.scss +1 -1
- package/components/path/README.md +2 -2
- package/components/table/base.scss +2 -2
- package/components/table/table@a.scss +1 -1
- package/components/table/table@b.scss +1 -1
- package/components/tips/base.scss +12 -12
- package/components/tips/tips@a.scss +1 -1
- package/core/README.md +2 -2
- package/core/color.scss +111 -121
- package/core/cols.scss +6 -3
- package/core/media.scss +30 -28
- package/core/neatui@core.scss +5 -5
- package/core/scale.scss +27 -22
- package/core/scroll.scss +5 -5
- package/core/shadow.scss +17 -9
- package/core/size.scss +3 -1
- package/core/theme.scss +102 -99
- package/core/ux.scss +2 -2
- package/core/var.scss +2 -0
- package/package.json +1 -1
- package/components/btns/btns@b.scss +0 -190
- package/components/btns/btns@c.scss +0 -172
- package/core/neatui@core.lite.scss +0 -30
- package/core/neatui@mobile.scss +0 -37
|
@@ -21,11 +21,9 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
21
21
|
margin-left: 1rem;
|
|
22
22
|
line-height: 1.6em;
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
box-shadow: 0 1px 2px co(deep);
|
|
28
|
-
}
|
|
24
|
+
color: var(--co-read);
|
|
25
|
+
background: var(--co-weak);
|
|
26
|
+
box-shadow: 0 1px 2px var(--co-text-ss);
|
|
29
27
|
|
|
30
28
|
&::before {
|
|
31
29
|
position: absolute;
|
|
@@ -42,7 +40,7 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
42
40
|
border-width: 0.3em 0.6em 0.6em;
|
|
43
41
|
|
|
44
42
|
@include theme {
|
|
45
|
-
border-color: transparent co
|
|
43
|
+
border-color: transparent var(--co-weak) transparent transparent;
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
}
|
|
@@ -50,13 +48,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
50
48
|
&[ui-chats~='bg:fore'] {
|
|
51
49
|
[ui-chat-body] {
|
|
52
50
|
@include theme {
|
|
53
|
-
color: co
|
|
54
|
-
background: co
|
|
51
|
+
color: var(--co-read);
|
|
52
|
+
background: var(--co-fore);
|
|
55
53
|
}
|
|
56
54
|
|
|
57
55
|
&::before {
|
|
58
56
|
@include theme {
|
|
59
|
-
border-color: transparent co
|
|
57
|
+
border-color: transparent var(--co-fore) transparent transparent;
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
}
|
|
@@ -65,13 +63,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
65
63
|
&[ui-chats~='bg:main'] {
|
|
66
64
|
[ui-chat-body] {
|
|
67
65
|
@include theme {
|
|
68
|
-
color: co
|
|
69
|
-
background: co
|
|
66
|
+
color: var(--co-fore);
|
|
67
|
+
background: var(--co-main);
|
|
70
68
|
}
|
|
71
69
|
|
|
72
70
|
&::before {
|
|
73
71
|
@include theme {
|
|
74
|
-
border-color: transparent co
|
|
72
|
+
border-color: transparent var(--co-main) transparent transparent;
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
75
|
}
|
|
@@ -80,13 +78,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
80
78
|
&[ui-chats~='bg:read'] {
|
|
81
79
|
[ui-chat-body] {
|
|
82
80
|
@include theme {
|
|
83
|
-
color: co
|
|
84
|
-
background: co
|
|
81
|
+
color: var(--co-fore);
|
|
82
|
+
background: var(--co-read);
|
|
85
83
|
}
|
|
86
84
|
|
|
87
85
|
&::before {
|
|
88
86
|
@include theme {
|
|
89
|
-
border-color: transparent co
|
|
87
|
+
border-color: transparent var(--co-read) transparent transparent;
|
|
90
88
|
}
|
|
91
89
|
}
|
|
92
90
|
}
|
|
@@ -95,13 +93,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
95
93
|
&[ui-chats~='bg:well'] {
|
|
96
94
|
[ui-chat-body] {
|
|
97
95
|
@include theme {
|
|
98
|
-
color: co
|
|
99
|
-
background: co
|
|
96
|
+
color: var(--co-fore);
|
|
97
|
+
background: var(--co-well);
|
|
100
98
|
}
|
|
101
99
|
|
|
102
100
|
&::before {
|
|
103
101
|
@include theme {
|
|
104
|
-
border-color: transparent co
|
|
102
|
+
border-color: transparent var(--co-well) transparent transparent;
|
|
105
103
|
}
|
|
106
104
|
}
|
|
107
105
|
}
|
|
@@ -110,13 +108,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
110
108
|
&[ui-chats~='bg:warn'] {
|
|
111
109
|
[ui-chat-body] {
|
|
112
110
|
@include theme {
|
|
113
|
-
color: co
|
|
114
|
-
background: co
|
|
111
|
+
color: var(--co-fore);
|
|
112
|
+
background: var(--co-warn);
|
|
115
113
|
}
|
|
116
114
|
|
|
117
115
|
&::before {
|
|
118
116
|
@include theme {
|
|
119
|
-
border-color: transparent co
|
|
117
|
+
border-color: transparent var(--co-warn) transparent transparent;
|
|
120
118
|
}
|
|
121
119
|
}
|
|
122
120
|
}
|
|
@@ -125,13 +123,13 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
|
|
|
125
123
|
&[ui-chats~='bg:risk'] {
|
|
126
124
|
[ui-chat-body] {
|
|
127
125
|
@include theme {
|
|
128
|
-
color: co
|
|
129
|
-
background: co
|
|
126
|
+
color: var(--co-fore);
|
|
127
|
+
background: var(--co-risk);
|
|
130
128
|
}
|
|
131
129
|
|
|
132
130
|
&::before {
|
|
133
131
|
@include theme {
|
|
134
|
-
border-color: transparent co
|
|
132
|
+
border-color: transparent var(--co-risk) transparent transparent;
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
135
|
}
|
|
@@ -7,7 +7,7 @@ $state: 'main', 'read', 'well', 'warn', 'risk', 'info';
|
|
|
7
7
|
|
|
8
8
|
@mixin cite($co, $bk) {
|
|
9
9
|
color: inherit;
|
|
10
|
-
border-left: 0.3em solid
|
|
10
|
+
border-left: 0.3em solid var(--co-#{$co}-lm);
|
|
11
11
|
box-shadow:
|
|
12
12
|
inset -1px 0 0 0 $bk,
|
|
13
13
|
inset 0 1px 0 0 $bk,
|
|
@@ -16,8 +16,10 @@ $state: 'main', 'read', 'well', 'warn', 'risk', 'info';
|
|
|
16
16
|
|
|
17
17
|
@each $key in $state {
|
|
18
18
|
@include theme {
|
|
19
|
-
$co:
|
|
20
|
-
$bk:var(--co-line)
|
|
19
|
+
$co: $key;
|
|
20
|
+
$bk: var(--co-line);
|
|
21
|
+
|
|
22
|
+
@if ($key== 'main') {
|
|
21
23
|
&,
|
|
22
24
|
&[ui-cite~='#{$key}'] {
|
|
23
25
|
@include cite($co, $bk);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
[ui-demo-view] {
|
|
10
10
|
padding: 1.5em;
|
|
11
11
|
@include theme {
|
|
12
|
-
background: linear-gradient(-45deg, rgba(co
|
|
12
|
+
background: linear-gradient(-45deg, rgba(var(--co-line), 0.5) 12.5%, var(--co-fore) 0, var(--co-fore) 50%, var(--co-line) 0, var(--co-line) 62.5%, var(--co-fore) 0, var(--co-fore)) repeat center / 3px 3px;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
@include theme {
|
|
20
20
|
border-top: 1px solidvar(--co-line)
|
|
21
21
|
border-bottom: 1px solidvar(--co-line)
|
|
22
|
-
background-color: rgba(co
|
|
22
|
+
background-color: rgba(var(--co-weak), 0.5);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -25,7 +25,7 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
|
|
|
25
25
|
min-height: 1.9em;
|
|
26
26
|
|
|
27
27
|
// @include theme {
|
|
28
|
-
// background: mix(co
|
|
28
|
+
// background: mix(var(--co-main), var(--co-fore), 85%);
|
|
29
29
|
// }
|
|
30
30
|
background: var(--co-main-fore-ls);
|
|
31
31
|
color: var(--co-fore);
|
|
@@ -44,7 +44,7 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
|
|
|
44
44
|
transform 0s,
|
|
45
45
|
opacity 0s;
|
|
46
46
|
// @include theme {
|
|
47
|
-
// border-top-color: mix(co
|
|
47
|
+
// border-top-color: mix(var(--co-main), var(--co-fore), 85%);
|
|
48
48
|
// }
|
|
49
49
|
border-top-color: var(--co-main-fore-ls);
|
|
50
50
|
}
|
|
@@ -41,7 +41,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
41
41
|
|
|
42
42
|
&.form-focus,
|
|
43
43
|
&:focus-within {
|
|
44
|
-
background-color: co
|
|
44
|
+
background-color: var(--co-fore);
|
|
45
45
|
box-shadow:
|
|
46
46
|
inset 0 -1px 0 0 var(--co-main-mm),
|
|
47
47
|
0 2px 0 0 var(--co-main-ss);
|
|
@@ -73,9 +73,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
&:-webkit-autofill {
|
|
76
|
-
box-shadow: 0 0 0 1000px co
|
|
77
|
-
color: co
|
|
78
|
-
-webkit-text-fill-color: co
|
|
76
|
+
box-shadow: 0 0 0 1000px var(--co-fore) inset;
|
|
77
|
+
color: var(--co-read);
|
|
78
|
+
-webkit-text-fill-color: var(--co-read);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
&::-webkit-input-placeholder {
|
|
@@ -73,8 +73,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
73
73
|
|
|
74
74
|
&:-webkit-autofill {
|
|
75
75
|
box-shadow: 0 0 0 1000px var(--bg-weak) inset;
|
|
76
|
-
color: co
|
|
77
|
-
-webkit-text-fill-color: co
|
|
76
|
+
color: var(--co-read);
|
|
77
|
+
-webkit-text-fill-color: var(--co-read);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
&::-webkit-input-placeholder {
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
[ui-form-clean] {
|
|
28
28
|
display: inline-block;
|
|
29
29
|
@include theme {
|
|
30
|
-
color: co
|
|
30
|
+
color: var(--co-case);
|
|
31
31
|
background:
|
|
32
|
-
linear-gradient(45deg, transparent 40%, co
|
|
33
|
-
linear-gradient(-45deg, transparent 40%, co
|
|
32
|
+
linear-gradient(45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
|
|
33
|
+
linear-gradient(-45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
|
|
34
34
|
radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
input:-webkit-autofill {
|
|
39
39
|
@include theme {
|
|
40
|
-
box-shadow: 0 0 0 1000px co
|
|
41
|
-
color: co
|
|
42
|
-
-webkit-text-fill-color: co
|
|
40
|
+
box-shadow: 0 0 0 1000px var(--co-fore) inset;
|
|
41
|
+
color: var(--co-read);
|
|
42
|
+
-webkit-text-fill-color: var(--co-read);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -36,7 +36,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
36
36
|
position: absolute;
|
|
37
37
|
top: 100%;
|
|
38
38
|
@include theme {
|
|
39
|
-
background: co
|
|
39
|
+
background: var(--co-fore);
|
|
40
40
|
}
|
|
41
41
|
min-width: 100%;
|
|
42
42
|
max-height: 20rem;
|
|
@@ -67,7 +67,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
67
67
|
width: 0.5em;
|
|
68
68
|
height: 0.5em;
|
|
69
69
|
@include theme {
|
|
70
|
-
background: co
|
|
70
|
+
background: var(--co-fore);
|
|
71
71
|
}
|
|
72
72
|
top: -0.25em;
|
|
73
73
|
left: 50%;
|
|
@@ -89,7 +89,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
89
89
|
border-radius: 0.2em;
|
|
90
90
|
&:hover {
|
|
91
91
|
@include theme {
|
|
92
|
-
background: co
|
|
92
|
+
background: var(--co-weak);
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -25,8 +25,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
25
25
|
padding: 0.5em 0;
|
|
26
26
|
transition: all 0.5s;
|
|
27
27
|
@include theme {
|
|
28
|
-
box-shadow: inset 0 -1px 0 0 co
|
|
29
|
-
background-color: co
|
|
28
|
+
box-shadow: inset 0 -1px 0 0 var(--co-case);
|
|
29
|
+
background-color: var(--co-fore);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
display: inline-flex;
|
|
@@ -46,7 +46,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
46
46
|
&.form-focus,
|
|
47
47
|
&:focus-within {
|
|
48
48
|
@include theme {
|
|
49
|
-
background-color: co
|
|
49
|
+
background-color: var(--co-fore);
|
|
50
50
|
box-shadow:
|
|
51
51
|
inset 0 -1px 0 0 var(--co-main-mm),
|
|
52
52
|
0 2px 0 0 var(--co-main-ss);
|
|
@@ -77,9 +77,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
77
77
|
|
|
78
78
|
&:-webkit-autofill {
|
|
79
79
|
@include theme {
|
|
80
|
-
box-shadow: 0 0 0 1000px co
|
|
81
|
-
color: co
|
|
82
|
-
-webkit-text-fill-color: co
|
|
80
|
+
box-shadow: 0 0 0 1000px var(--co-fore) inset;
|
|
81
|
+
color: var(--co-read);
|
|
82
|
+
-webkit-text-fill-color: var(--co-read);
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
@@ -126,7 +126,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
126
126
|
// 查看密码
|
|
127
127
|
[ui-form-cipher] {
|
|
128
128
|
@include theme {
|
|
129
|
-
color: co
|
|
129
|
+
color: var(--co-note);
|
|
130
130
|
}
|
|
131
131
|
background:
|
|
132
132
|
radial-gradient(at 50% 50%, transparent 53%, currentColor 56%, currentColor 67%, transparent 70%) no-repeat center / 100% 75%,
|
|
@@ -162,7 +162,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
162
162
|
|
|
163
163
|
&[ui-form-verify~='ok'] {
|
|
164
164
|
@include theme {
|
|
165
|
-
color: co
|
|
165
|
+
color: var(--co-well);
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
@keyframes am-verify-ok-1 {
|
|
@@ -209,7 +209,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
209
209
|
}
|
|
210
210
|
&[ui-form-verify~='no'] {
|
|
211
211
|
@include theme {
|
|
212
|
-
color: co
|
|
212
|
+
color: var(--co-risk);
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
@keyframes am-no-1 {
|
|
@@ -260,10 +260,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
260
260
|
[ui-form-clean] {
|
|
261
261
|
display: inline-block;
|
|
262
262
|
@include theme {
|
|
263
|
-
color: co
|
|
263
|
+
color: var(--co-case);
|
|
264
264
|
background:
|
|
265
|
-
linear-gradient(45deg, transparent 40%, co
|
|
266
|
-
linear-gradient(-45deg, transparent 40%, co
|
|
265
|
+
linear-gradient(45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
|
|
266
|
+
linear-gradient(-45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
|
|
267
267
|
radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
|
|
268
268
|
}
|
|
269
269
|
}
|
|
@@ -17,7 +17,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
17
17
|
display: inline-block;
|
|
18
18
|
border-radius: 35%;
|
|
19
19
|
@include theme {
|
|
20
|
-
color: co
|
|
20
|
+
color: var(--co-note);
|
|
21
21
|
}
|
|
22
22
|
background:
|
|
23
23
|
linear-gradient(45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 23.5% 65% / 35% 50%,
|
|
@@ -29,7 +29,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
29
29
|
position: absolute;
|
|
30
30
|
top: 100%;
|
|
31
31
|
@include theme {
|
|
32
|
-
background: co
|
|
32
|
+
background: var(--co-fore);
|
|
33
33
|
}
|
|
34
34
|
min-width: 100%;
|
|
35
35
|
max-height: 20rem;
|
|
@@ -60,7 +60,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
60
60
|
width: 0.5em;
|
|
61
61
|
height: 0.5em;
|
|
62
62
|
@include theme {
|
|
63
|
-
background: co
|
|
63
|
+
background: var(--co-fore);
|
|
64
64
|
}
|
|
65
65
|
top: -0.25em;
|
|
66
66
|
left: 50%;
|
|
@@ -82,7 +82,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
|
|
|
82
82
|
border-radius: 0.2em;
|
|
83
83
|
&:hover {
|
|
84
84
|
@include theme {
|
|
85
|
-
background: co
|
|
85
|
+
background: var(--co-weak);
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -53,7 +53,7 @@ $co: 'info', 'well', 'warn', 'risk';
|
|
|
53
53
|
position: relative;
|
|
54
54
|
top: 0.15em;
|
|
55
55
|
@include theme {
|
|
56
|
-
background-color: co
|
|
56
|
+
background-color: var(--co-fore);
|
|
57
57
|
}
|
|
58
58
|
background-image: radial-gradient(circle at 50% 50%, currentColor 28%, transparent 30%);
|
|
59
59
|
background-position-x: -0.2em;
|
|
@@ -63,14 +63,14 @@ $co: 'info', 'well', 'warn', 'risk';
|
|
|
63
63
|
|
|
64
64
|
&:checked {
|
|
65
65
|
@include theme {
|
|
66
|
-
background-color: co
|
|
67
|
-
background-image: radial-gradient(circle at 50% 50%, co
|
|
66
|
+
background-color: var(--co-main);
|
|
67
|
+
background-image: radial-gradient(circle at 50% 50%, var(--co-fore) 28%, transparent 30%);
|
|
68
68
|
}
|
|
69
69
|
background-position-x: 0.2em;
|
|
70
70
|
&,
|
|
71
71
|
& + * {
|
|
72
72
|
@include theme {
|
|
73
|
-
color: co
|
|
73
|
+
color: var(--co-main);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
@@ -24,8 +24,8 @@ $co: 'info', 'well', 'warn', 'risk';
|
|
|
24
24
|
transition: all 0.5s;
|
|
25
25
|
|
|
26
26
|
@include theme {
|
|
27
|
-
box-shadow: inset 0 0 0 1px co
|
|
28
|
-
background-color: co
|
|
27
|
+
box-shadow: inset 0 0 0 1px var(--co-case);
|
|
28
|
+
background-color: var(--co-fore);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
@@ -84,9 +84,9 @@ $co: 'info', 'well', 'warn', 'risk';
|
|
|
84
84
|
textarea {
|
|
85
85
|
&:-webkit-autofill {
|
|
86
86
|
@include theme {
|
|
87
|
-
box-shadow: 0 0 0 1000px co
|
|
88
|
-
color: co
|
|
89
|
-
-webkit-text-fill-color: co
|
|
87
|
+
box-shadow: 0 0 0 1000px var(--co-fore) inset;
|
|
88
|
+
color: var(--co-read);
|
|
89
|
+
-webkit-text-fill-color: var(--co-read);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
border-width: 1px;
|
|
27
27
|
@include theme {
|
|
28
28
|
border-color:var(--co-line)
|
|
29
|
-
background-color: co
|
|
29
|
+
background-color: var(--co-fore);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
left: 0;
|
|
73
73
|
|
|
74
74
|
@include theme {
|
|
75
|
-
background-color: co
|
|
75
|
+
background-color: var(--co-fore);
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
@extend %item;
|
|
140
140
|
border-style: dashed;
|
|
141
141
|
@include theme {
|
|
142
|
-
border-color: co
|
|
142
|
+
border-color: var(--co-case);
|
|
143
143
|
}
|
|
144
144
|
input {
|
|
145
145
|
position: absolute;
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
|
|
152
152
|
&:-webkit-autofill {
|
|
153
153
|
@include theme {
|
|
154
|
-
box-shadow: 0 0 0 1000px co
|
|
154
|
+
box-shadow: 0 0 0 1000px var(--co-fore) inset;
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
157
|
}
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
|
|
41
41
|
&:hover {
|
|
42
42
|
@include theme {
|
|
43
|
-
border: 1px solid co
|
|
44
|
-
box-shadow: inset 0 0 0 1px co
|
|
43
|
+
border: 1px solid var(--co-text);
|
|
44
|
+
box-shadow: inset 0 0 0 1px var(--co-text);
|
|
45
45
|
}
|
|
46
46
|
& > * {
|
|
47
47
|
transform: scale3d(1, 1, 1);
|
|
@@ -52,16 +52,16 @@
|
|
|
52
52
|
// 激活
|
|
53
53
|
&.active {
|
|
54
54
|
@include theme {
|
|
55
|
-
// border: 1px solid co
|
|
56
|
-
box-shadow: inset 0 0 0 1px co
|
|
55
|
+
// border: 1px solid var(--co-main) !important;
|
|
56
|
+
box-shadow: inset 0 0 0 1px var(--co-main);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
// 选中
|
|
60
60
|
&.selected,
|
|
61
61
|
&[selected~='1'] {
|
|
62
62
|
@include theme {
|
|
63
|
-
// border: 1px solid co
|
|
64
|
-
box-shadow: inset 0 0 0 1px co
|
|
63
|
+
// border: 1px solid var(--co-main) !important;
|
|
64
|
+
box-shadow: inset 0 0 0 1px var(--co-main);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
&::after {
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
radial-gradient(circle at 59% 54%, currentColor 9%, transparent 10%), radial-gradient(circle at 65% 46%, currentColor 9%, transparent 10%),
|
|
82
82
|
radial-gradient(circle at 71% 38%, currentColor 8%, transparent 9%);
|
|
83
83
|
@include theme {
|
|
84
|
-
background-color: co
|
|
85
|
-
color: co
|
|
84
|
+
background-color: var(--co-main);
|
|
85
|
+
color: var(--co-back);
|
|
86
86
|
}
|
|
87
87
|
animation: am-selected 0.2s 0.1s both;
|
|
88
88
|
}
|
|
@@ -16,7 +16,7 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
|
|
|
16
16
|
top: 0;
|
|
17
17
|
left: auto;
|
|
18
18
|
@include theme {
|
|
19
|
-
background: linear-gradient(0deg, rgba(co
|
|
19
|
+
background: linear-gradient(0deg, rgba(var(--co-line), 0) 0%, var(--co-line) 3%);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -46,7 +46,7 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
|
|
|
46
46
|
top: 0.8em;
|
|
47
47
|
margin-left: -0.7em;
|
|
48
48
|
@include theme {
|
|
49
|
-
background-image: radial-gradient(at 50% 50%, co
|
|
49
|
+
background-image: radial-gradient(at 50% 50%, var(--co-fore) 37%, var(--co-line) 39%, var(--co-line) 47%, var(--co-fore) 49%);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -70,13 +70,14 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
|
|
|
70
70
|
&:hover {
|
|
71
71
|
&::before {
|
|
72
72
|
@include theme {
|
|
73
|
-
background-image: radial-gradient(at 50% 50%, co
|
|
73
|
+
background-image: radial-gradient(at 50% 50%, var(--co-main) 20%, transparent 23%),
|
|
74
|
+
radial-gradient(at 50% 50%, var(--co-fore) 37%, var(--co-main) 39%, var(--co-main) 47%, var(--co-fore) 49%);
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
&::after {
|
|
77
78
|
font-weight: bold;
|
|
78
79
|
@include theme {
|
|
79
|
-
color: co
|
|
80
|
+
color: var(--co-main);
|
|
80
81
|
}
|
|
81
82
|
}
|
|
82
83
|
}
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
width: 1em;
|
|
31
31
|
height: 1em;
|
|
32
32
|
@include theme {
|
|
33
|
-
background: radial-gradient(circle at 15% 50%, rgba(co
|
|
34
|
-
radial-gradient(circle at 85% 50%, rgba(co
|
|
33
|
+
background: radial-gradient(circle at 15% 50%, rgba(var(--co-text), 0.2) 12%, transparent 13%),
|
|
34
|
+
radial-gradient(circle at 50% 50%, rgba(var(--co-text), 0.2) 14%, transparent 15%), radial-gradient(circle at 85% 50%, rgba(var(--co-text), 0.2) 9%, transparent 10%);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&::after {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
left: 0;
|
|
44
44
|
top: 0;
|
|
45
45
|
@include theme {
|
|
46
|
-
color: co
|
|
46
|
+
color: var(--co-text);
|
|
47
47
|
}
|
|
48
48
|
animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
|
|
49
49
|
}
|