assui 3.2.104 → 3.2.105
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/es/base-button/demo/index.less +6 -0
- package/es/base-button/style/index.css +29 -21
- package/es/base-button/style/index.less +29 -22
- package/lib/base-button/demo/index.less +6 -0
- package/lib/base-button/style/index.css +29 -21
- package/lib/base-button/style/index.less +29 -22
- package/package.json +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.base-btn {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
|
|
3
|
+
font-size: 14px;
|
|
4
|
+
gap: 8px;
|
|
4
5
|
align-items: center;
|
|
5
6
|
height: 32px;
|
|
6
7
|
padding: 0 16px;
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
padding: 0 8px;
|
|
19
20
|
font-size: 12px;
|
|
20
21
|
line-height: 20px;
|
|
22
|
+
gap: 4px;
|
|
21
23
|
}
|
|
22
24
|
.base-btn-large {
|
|
25
|
+
gap: 12px;
|
|
23
26
|
height: 40px;
|
|
24
27
|
padding: 0 24px;
|
|
25
28
|
font-size: 16px;
|
|
@@ -32,15 +35,19 @@
|
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
38
|
+
height: 40px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
line-height: 24px;
|
|
35
41
|
}
|
|
36
42
|
.base-btn-loading {
|
|
37
43
|
opacity: 0.8;
|
|
38
44
|
}
|
|
39
45
|
.base-btn-default {
|
|
40
46
|
--font-color: #121212;
|
|
41
|
-
--border-color: #
|
|
47
|
+
--border-color: #d9d9d9;
|
|
42
48
|
--hover-bg-color: #f2f2f2;
|
|
43
49
|
--active-bg-color: #e6e6e6;
|
|
50
|
+
--disabled-border-color: #d9d9d9;
|
|
44
51
|
color: #121212;
|
|
45
52
|
}
|
|
46
53
|
.base-btn-default:hover {
|
|
@@ -53,6 +60,8 @@
|
|
|
53
60
|
--theme-color: #dc4946;
|
|
54
61
|
--hover-color: #e7807e;
|
|
55
62
|
--active-color: #c6423f;
|
|
63
|
+
--hover-text-color: var(--hover-color);
|
|
64
|
+
--active-text-color: var(--active-color);
|
|
56
65
|
color: #fff;
|
|
57
66
|
background: var(--theme-color);
|
|
58
67
|
}
|
|
@@ -68,6 +77,8 @@
|
|
|
68
77
|
--theme-color: #47a92a;
|
|
69
78
|
--hover-color: #7ec36a;
|
|
70
79
|
--active-color: #409826;
|
|
80
|
+
--hover-text-color: var(--hover-color);
|
|
81
|
+
--active-text-color: var(--active-color);
|
|
71
82
|
}
|
|
72
83
|
.base-btn-success:hover {
|
|
73
84
|
background-color: var(--hover-color);
|
|
@@ -79,6 +90,8 @@
|
|
|
79
90
|
--theme-color: #121212;
|
|
80
91
|
--hover-color: #595959;
|
|
81
92
|
--active-color: #333;
|
|
93
|
+
--hover-text-color: var(--hover-color);
|
|
94
|
+
--active-text-color: var(--active-color);
|
|
82
95
|
color: #fff;
|
|
83
96
|
background: var(--theme-color);
|
|
84
97
|
}
|
|
@@ -90,11 +103,13 @@
|
|
|
90
103
|
}
|
|
91
104
|
.base-btn-gray {
|
|
92
105
|
--font-color: #121212;
|
|
93
|
-
--border-color: #
|
|
106
|
+
--border-color: #d9d9d9;
|
|
94
107
|
--hover-color: #f7f7f7;
|
|
95
108
|
--active-color: #e6e6e6;
|
|
96
109
|
--hover-bg-color: #f7f7f7;
|
|
97
110
|
--active-bg-color: #e6e6e6;
|
|
111
|
+
--hover-text-color: var(--font-color);
|
|
112
|
+
--active-text-color: var(--font-color);
|
|
98
113
|
color: var(--font-color);
|
|
99
114
|
background: #f2f2f2;
|
|
100
115
|
border: none;
|
|
@@ -111,10 +126,12 @@
|
|
|
111
126
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
127
|
}
|
|
113
128
|
.base-btn-variant-outlined:hover {
|
|
129
|
+
color: var(--hover-text-color, var(--font-color));
|
|
114
130
|
background-color: var(--hover-bg-color, #fff);
|
|
115
131
|
border-color: var(--hover-color, var(--border-color));
|
|
116
132
|
}
|
|
117
133
|
.base-btn-variant-outlined:active {
|
|
134
|
+
color: var(--active-text-color, var(--font-color));
|
|
118
135
|
background-color: var(--active-bg-color, #fff);
|
|
119
136
|
border-color: var(--active-color, var(--border-color));
|
|
120
137
|
}
|
|
@@ -124,29 +141,18 @@
|
|
|
124
141
|
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
142
|
background-color: #fff;
|
|
126
143
|
}
|
|
127
|
-
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
-
color: #bfbfbf;
|
|
129
|
-
background-color: #e6e6e6;
|
|
130
|
-
border-color: #e6e6e6;
|
|
131
|
-
}
|
|
132
|
-
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
-
background-color: #e6e6e6;
|
|
134
|
-
border-color: #e6e6e6;
|
|
135
|
-
}
|
|
136
|
-
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
-
background-color: #e6e6e6;
|
|
138
|
-
border-color: #e6e6e6;
|
|
139
|
-
}
|
|
140
144
|
.base-btn-variant-dashed {
|
|
141
145
|
color: var(--theme-color, var(--font-color));
|
|
142
146
|
background-color: #fff;
|
|
143
147
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
148
|
}
|
|
145
149
|
.base-btn-variant-dashed:hover {
|
|
150
|
+
color: var(--hover-text-color, var(--font-color));
|
|
146
151
|
background-color: var(--hover-bg-color, #fff);
|
|
147
152
|
border-color: var(--hover-color, var(--border-color));
|
|
148
153
|
}
|
|
149
154
|
.base-btn-variant-dashed:active {
|
|
155
|
+
color: var(--active-text-color, var(--font-color));
|
|
150
156
|
background-color: var(--active-bg-color, #fff);
|
|
151
157
|
border-color: var(--active-color, var(--border-color));
|
|
152
158
|
}
|
|
@@ -172,16 +178,18 @@
|
|
|
172
178
|
background-color: #fff;
|
|
173
179
|
}
|
|
174
180
|
.base-btn-disabled {
|
|
175
|
-
color: #bfbfbf;
|
|
176
|
-
background-color: #
|
|
177
|
-
border-color: #
|
|
181
|
+
color: #bfbfbf !important;
|
|
182
|
+
background-color: #f2f2f2 !important;
|
|
183
|
+
border-color: var(--disabled-border-color, #f2f2f2) !important;
|
|
178
184
|
cursor: not-allowed;
|
|
179
185
|
}
|
|
180
186
|
.base-btn-disabled:hover {
|
|
181
|
-
|
|
187
|
+
color: #bfbfbf !important;
|
|
188
|
+
background-color: #f2f2f2 !important;
|
|
182
189
|
}
|
|
183
190
|
.base-btn-disabled:active {
|
|
184
|
-
|
|
191
|
+
color: #bfbfbf !important;
|
|
192
|
+
background-color: #f2f2f2 !important;
|
|
185
193
|
}
|
|
186
194
|
@keyframes loading {
|
|
187
195
|
0% {
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
.@{base-button-name} {
|
|
6
6
|
display: inline-flex;
|
|
7
|
-
|
|
7
|
+
font-size: @font-size-base;
|
|
8
|
+
gap: 8px;
|
|
8
9
|
align-items: center;
|
|
9
10
|
height: 32px;
|
|
10
11
|
padding: 0 16px;
|
|
@@ -21,9 +22,11 @@
|
|
|
21
22
|
padding: 0 8px;
|
|
22
23
|
font-size: @font-size-sm;
|
|
23
24
|
line-height: 20px;
|
|
25
|
+
gap: 4px;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
&-large {
|
|
29
|
+
gap: 12px;
|
|
27
30
|
height: 40px;
|
|
28
31
|
padding: 0 24px;
|
|
29
32
|
font-size: @font-size_16;
|
|
@@ -38,6 +41,9 @@
|
|
|
38
41
|
display: flex;
|
|
39
42
|
justify-content: center;
|
|
40
43
|
width: 100%;
|
|
44
|
+
height: 40px;
|
|
45
|
+
font-size: @font-size_16;
|
|
46
|
+
line-height: 24px;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
&-loading {
|
|
@@ -46,9 +52,10 @@
|
|
|
46
52
|
|
|
47
53
|
&-default {
|
|
48
54
|
--font-color: @color_121212;
|
|
49
|
-
--border-color: @
|
|
55
|
+
--border-color: @color_d9d9d9;
|
|
50
56
|
--hover-bg-color: @color_f2f2f2;
|
|
51
57
|
--active-bg-color: @color_e6e6e6;
|
|
58
|
+
--disabled-border-color: @color_d9d9d9;
|
|
52
59
|
color: @color_121212;
|
|
53
60
|
&:hover {
|
|
54
61
|
background-color:@color_f2f2f2;
|
|
@@ -62,6 +69,8 @@
|
|
|
62
69
|
--theme-color: @color_dc4946;
|
|
63
70
|
--hover-color: @color_e7807e;
|
|
64
71
|
--active-color: @color_c6423f;
|
|
72
|
+
--hover-text-color: var(--hover-color);
|
|
73
|
+
--active-text-color: var(--active-color);
|
|
65
74
|
color: @white;
|
|
66
75
|
background: var(--theme-color);
|
|
67
76
|
&:hover {
|
|
@@ -78,6 +87,8 @@
|
|
|
78
87
|
--theme-color: @color_47a92a;
|
|
79
88
|
--hover-color: @color_7ec36a;
|
|
80
89
|
--active-color: @color_409826;
|
|
90
|
+
--hover-text-color: var(--hover-color);
|
|
91
|
+
--active-text-color: var(--active-color);
|
|
81
92
|
&:hover {
|
|
82
93
|
background-color: var(--hover-color);
|
|
83
94
|
}
|
|
@@ -90,6 +101,8 @@
|
|
|
90
101
|
--theme-color: @color_121212;
|
|
91
102
|
--hover-color: @color_595959;
|
|
92
103
|
--active-color: @color_333;
|
|
104
|
+
--hover-text-color: var(--hover-color);
|
|
105
|
+
--active-text-color: var(--active-color);
|
|
93
106
|
color: @white;
|
|
94
107
|
background: var(--theme-color);
|
|
95
108
|
&:hover {
|
|
@@ -102,11 +115,13 @@
|
|
|
102
115
|
|
|
103
116
|
&-gray {
|
|
104
117
|
--font-color: @color_121212;
|
|
105
|
-
--border-color: @
|
|
118
|
+
--border-color: @color_d9d9d9;
|
|
106
119
|
--hover-color: @color_f7f7f7;
|
|
107
120
|
--active-color: @color_e6e6e6;
|
|
108
121
|
--hover-bg-color: @color_f7f7f7;
|
|
109
122
|
--active-bg-color: @color_e6e6e6;
|
|
123
|
+
--hover-text-color: var(--font-color);
|
|
124
|
+
--active-text-color: var(--font-color);
|
|
110
125
|
color: var(--font-color);
|
|
111
126
|
background: @color_f2f2f2;
|
|
112
127
|
border: none;
|
|
@@ -123,10 +138,12 @@
|
|
|
123
138
|
background-color: @white;
|
|
124
139
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
140
|
&:hover {
|
|
141
|
+
color: var(--hover-text-color, var(--font-color));
|
|
126
142
|
background-color: var(--hover-bg-color, @white);
|
|
127
143
|
border-color: var(--hover-color, var(--border-color));
|
|
128
144
|
}
|
|
129
145
|
&:active {
|
|
146
|
+
color: var(--active-text-color, var(--font-color));
|
|
130
147
|
background-color: var(--active-bg-color, @white);
|
|
131
148
|
border-color: var(--active-color, var(--border-color));
|
|
132
149
|
}
|
|
@@ -136,20 +153,6 @@
|
|
|
136
153
|
background-color: @white;
|
|
137
154
|
}
|
|
138
155
|
}
|
|
139
|
-
|
|
140
|
-
&.@{base-button-name}-disabled {
|
|
141
|
-
color: @color_bfbfbf;
|
|
142
|
-
background-color: @color_e6e6e6;
|
|
143
|
-
border-color: @color_e6e6e6;
|
|
144
|
-
&:hover {
|
|
145
|
-
background-color: @color_e6e6e6;
|
|
146
|
-
border-color: @color_e6e6e6;
|
|
147
|
-
}
|
|
148
|
-
&:active {
|
|
149
|
-
background-color: @color_e6e6e6;
|
|
150
|
-
border-color: @color_e6e6e6;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
&-variant-dashed {
|
|
@@ -157,10 +160,12 @@
|
|
|
157
160
|
background-color: @white;
|
|
158
161
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
162
|
&:hover {
|
|
163
|
+
color: var(--hover-text-color, var(--font-color));
|
|
160
164
|
background-color: var(--hover-bg-color, @white);
|
|
161
165
|
border-color: var(--hover-color, var(--border-color));
|
|
162
166
|
}
|
|
163
167
|
&:active {
|
|
168
|
+
color: var(--active-text-color, var(--font-color));
|
|
164
169
|
background-color: var(--active-bg-color, @white);
|
|
165
170
|
border-color: var(--active-color, var(--border-color));
|
|
166
171
|
}
|
|
@@ -193,15 +198,17 @@
|
|
|
193
198
|
}
|
|
194
199
|
|
|
195
200
|
&-disabled {
|
|
196
|
-
color: @color_bfbfbf;
|
|
197
|
-
background-color: @
|
|
198
|
-
border-color: @
|
|
201
|
+
color: @color_bfbfbf !important;
|
|
202
|
+
background-color: @color_f2f2f2 !important;
|
|
203
|
+
border-color: var(--disabled-border-color, @color_f2f2f2) !important;
|
|
199
204
|
cursor: not-allowed;
|
|
200
205
|
&:hover {
|
|
201
|
-
|
|
206
|
+
color: @color_bfbfbf !important;
|
|
207
|
+
background-color: @color_f2f2f2 !important;
|
|
202
208
|
}
|
|
203
209
|
&:active {
|
|
204
|
-
|
|
210
|
+
color: @color_bfbfbf !important;
|
|
211
|
+
background-color: @color_f2f2f2 !important;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
214
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.base-btn {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
|
|
3
|
+
font-size: 14px;
|
|
4
|
+
gap: 8px;
|
|
4
5
|
align-items: center;
|
|
5
6
|
height: 32px;
|
|
6
7
|
padding: 0 16px;
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
padding: 0 8px;
|
|
19
20
|
font-size: 12px;
|
|
20
21
|
line-height: 20px;
|
|
22
|
+
gap: 4px;
|
|
21
23
|
}
|
|
22
24
|
.base-btn-large {
|
|
25
|
+
gap: 12px;
|
|
23
26
|
height: 40px;
|
|
24
27
|
padding: 0 24px;
|
|
25
28
|
font-size: 16px;
|
|
@@ -32,15 +35,19 @@
|
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
38
|
+
height: 40px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
line-height: 24px;
|
|
35
41
|
}
|
|
36
42
|
.base-btn-loading {
|
|
37
43
|
opacity: 0.8;
|
|
38
44
|
}
|
|
39
45
|
.base-btn-default {
|
|
40
46
|
--font-color: #121212;
|
|
41
|
-
--border-color: #
|
|
47
|
+
--border-color: #d9d9d9;
|
|
42
48
|
--hover-bg-color: #f2f2f2;
|
|
43
49
|
--active-bg-color: #e6e6e6;
|
|
50
|
+
--disabled-border-color: #d9d9d9;
|
|
44
51
|
color: #121212;
|
|
45
52
|
}
|
|
46
53
|
.base-btn-default:hover {
|
|
@@ -53,6 +60,8 @@
|
|
|
53
60
|
--theme-color: #dc4946;
|
|
54
61
|
--hover-color: #e7807e;
|
|
55
62
|
--active-color: #c6423f;
|
|
63
|
+
--hover-text-color: var(--hover-color);
|
|
64
|
+
--active-text-color: var(--active-color);
|
|
56
65
|
color: #fff;
|
|
57
66
|
background: var(--theme-color);
|
|
58
67
|
}
|
|
@@ -68,6 +77,8 @@
|
|
|
68
77
|
--theme-color: #47a92a;
|
|
69
78
|
--hover-color: #7ec36a;
|
|
70
79
|
--active-color: #409826;
|
|
80
|
+
--hover-text-color: var(--hover-color);
|
|
81
|
+
--active-text-color: var(--active-color);
|
|
71
82
|
}
|
|
72
83
|
.base-btn-success:hover {
|
|
73
84
|
background-color: var(--hover-color);
|
|
@@ -79,6 +90,8 @@
|
|
|
79
90
|
--theme-color: #121212;
|
|
80
91
|
--hover-color: #595959;
|
|
81
92
|
--active-color: #333;
|
|
93
|
+
--hover-text-color: var(--hover-color);
|
|
94
|
+
--active-text-color: var(--active-color);
|
|
82
95
|
color: #fff;
|
|
83
96
|
background: var(--theme-color);
|
|
84
97
|
}
|
|
@@ -90,11 +103,13 @@
|
|
|
90
103
|
}
|
|
91
104
|
.base-btn-gray {
|
|
92
105
|
--font-color: #121212;
|
|
93
|
-
--border-color: #
|
|
106
|
+
--border-color: #d9d9d9;
|
|
94
107
|
--hover-color: #f7f7f7;
|
|
95
108
|
--active-color: #e6e6e6;
|
|
96
109
|
--hover-bg-color: #f7f7f7;
|
|
97
110
|
--active-bg-color: #e6e6e6;
|
|
111
|
+
--hover-text-color: var(--font-color);
|
|
112
|
+
--active-text-color: var(--font-color);
|
|
98
113
|
color: var(--font-color);
|
|
99
114
|
background: #f2f2f2;
|
|
100
115
|
border: none;
|
|
@@ -111,10 +126,12 @@
|
|
|
111
126
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
112
127
|
}
|
|
113
128
|
.base-btn-variant-outlined:hover {
|
|
129
|
+
color: var(--hover-text-color, var(--font-color));
|
|
114
130
|
background-color: var(--hover-bg-color, #fff);
|
|
115
131
|
border-color: var(--hover-color, var(--border-color));
|
|
116
132
|
}
|
|
117
133
|
.base-btn-variant-outlined:active {
|
|
134
|
+
color: var(--active-text-color, var(--font-color));
|
|
118
135
|
background-color: var(--active-bg-color, #fff);
|
|
119
136
|
border-color: var(--active-color, var(--border-color));
|
|
120
137
|
}
|
|
@@ -124,29 +141,18 @@
|
|
|
124
141
|
.base-btn-variant-outlined .base-btn-loading-icon .base-btn-loading-icon-mask {
|
|
125
142
|
background-color: #fff;
|
|
126
143
|
}
|
|
127
|
-
.base-btn-variant-outlined.base-btn-disabled {
|
|
128
|
-
color: #bfbfbf;
|
|
129
|
-
background-color: #e6e6e6;
|
|
130
|
-
border-color: #e6e6e6;
|
|
131
|
-
}
|
|
132
|
-
.base-btn-variant-outlined.base-btn-disabled:hover {
|
|
133
|
-
background-color: #e6e6e6;
|
|
134
|
-
border-color: #e6e6e6;
|
|
135
|
-
}
|
|
136
|
-
.base-btn-variant-outlined.base-btn-disabled:active {
|
|
137
|
-
background-color: #e6e6e6;
|
|
138
|
-
border-color: #e6e6e6;
|
|
139
|
-
}
|
|
140
144
|
.base-btn-variant-dashed {
|
|
141
145
|
color: var(--theme-color, var(--font-color));
|
|
142
146
|
background-color: #fff;
|
|
143
147
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
144
148
|
}
|
|
145
149
|
.base-btn-variant-dashed:hover {
|
|
150
|
+
color: var(--hover-text-color, var(--font-color));
|
|
146
151
|
background-color: var(--hover-bg-color, #fff);
|
|
147
152
|
border-color: var(--hover-color, var(--border-color));
|
|
148
153
|
}
|
|
149
154
|
.base-btn-variant-dashed:active {
|
|
155
|
+
color: var(--active-text-color, var(--font-color));
|
|
150
156
|
background-color: var(--active-bg-color, #fff);
|
|
151
157
|
border-color: var(--active-color, var(--border-color));
|
|
152
158
|
}
|
|
@@ -172,16 +178,18 @@
|
|
|
172
178
|
background-color: #fff;
|
|
173
179
|
}
|
|
174
180
|
.base-btn-disabled {
|
|
175
|
-
color: #bfbfbf;
|
|
176
|
-
background-color: #
|
|
177
|
-
border-color: #
|
|
181
|
+
color: #bfbfbf !important;
|
|
182
|
+
background-color: #f2f2f2 !important;
|
|
183
|
+
border-color: var(--disabled-border-color, #f2f2f2) !important;
|
|
178
184
|
cursor: not-allowed;
|
|
179
185
|
}
|
|
180
186
|
.base-btn-disabled:hover {
|
|
181
|
-
|
|
187
|
+
color: #bfbfbf !important;
|
|
188
|
+
background-color: #f2f2f2 !important;
|
|
182
189
|
}
|
|
183
190
|
.base-btn-disabled:active {
|
|
184
|
-
|
|
191
|
+
color: #bfbfbf !important;
|
|
192
|
+
background-color: #f2f2f2 !important;
|
|
185
193
|
}
|
|
186
194
|
@keyframes loading {
|
|
187
195
|
0% {
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
.@{base-button-name} {
|
|
6
6
|
display: inline-flex;
|
|
7
|
-
|
|
7
|
+
font-size: @font-size-base;
|
|
8
|
+
gap: 8px;
|
|
8
9
|
align-items: center;
|
|
9
10
|
height: 32px;
|
|
10
11
|
padding: 0 16px;
|
|
@@ -21,9 +22,11 @@
|
|
|
21
22
|
padding: 0 8px;
|
|
22
23
|
font-size: @font-size-sm;
|
|
23
24
|
line-height: 20px;
|
|
25
|
+
gap: 4px;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
&-large {
|
|
29
|
+
gap: 12px;
|
|
27
30
|
height: 40px;
|
|
28
31
|
padding: 0 24px;
|
|
29
32
|
font-size: @font-size_16;
|
|
@@ -38,6 +41,9 @@
|
|
|
38
41
|
display: flex;
|
|
39
42
|
justify-content: center;
|
|
40
43
|
width: 100%;
|
|
44
|
+
height: 40px;
|
|
45
|
+
font-size: @font-size_16;
|
|
46
|
+
line-height: 24px;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
&-loading {
|
|
@@ -46,9 +52,10 @@
|
|
|
46
52
|
|
|
47
53
|
&-default {
|
|
48
54
|
--font-color: @color_121212;
|
|
49
|
-
--border-color: @
|
|
55
|
+
--border-color: @color_d9d9d9;
|
|
50
56
|
--hover-bg-color: @color_f2f2f2;
|
|
51
57
|
--active-bg-color: @color_e6e6e6;
|
|
58
|
+
--disabled-border-color: @color_d9d9d9;
|
|
52
59
|
color: @color_121212;
|
|
53
60
|
&:hover {
|
|
54
61
|
background-color:@color_f2f2f2;
|
|
@@ -62,6 +69,8 @@
|
|
|
62
69
|
--theme-color: @color_dc4946;
|
|
63
70
|
--hover-color: @color_e7807e;
|
|
64
71
|
--active-color: @color_c6423f;
|
|
72
|
+
--hover-text-color: var(--hover-color);
|
|
73
|
+
--active-text-color: var(--active-color);
|
|
65
74
|
color: @white;
|
|
66
75
|
background: var(--theme-color);
|
|
67
76
|
&:hover {
|
|
@@ -78,6 +87,8 @@
|
|
|
78
87
|
--theme-color: @color_47a92a;
|
|
79
88
|
--hover-color: @color_7ec36a;
|
|
80
89
|
--active-color: @color_409826;
|
|
90
|
+
--hover-text-color: var(--hover-color);
|
|
91
|
+
--active-text-color: var(--active-color);
|
|
81
92
|
&:hover {
|
|
82
93
|
background-color: var(--hover-color);
|
|
83
94
|
}
|
|
@@ -90,6 +101,8 @@
|
|
|
90
101
|
--theme-color: @color_121212;
|
|
91
102
|
--hover-color: @color_595959;
|
|
92
103
|
--active-color: @color_333;
|
|
104
|
+
--hover-text-color: var(--hover-color);
|
|
105
|
+
--active-text-color: var(--active-color);
|
|
93
106
|
color: @white;
|
|
94
107
|
background: var(--theme-color);
|
|
95
108
|
&:hover {
|
|
@@ -102,11 +115,13 @@
|
|
|
102
115
|
|
|
103
116
|
&-gray {
|
|
104
117
|
--font-color: @color_121212;
|
|
105
|
-
--border-color: @
|
|
118
|
+
--border-color: @color_d9d9d9;
|
|
106
119
|
--hover-color: @color_f7f7f7;
|
|
107
120
|
--active-color: @color_e6e6e6;
|
|
108
121
|
--hover-bg-color: @color_f7f7f7;
|
|
109
122
|
--active-bg-color: @color_e6e6e6;
|
|
123
|
+
--hover-text-color: var(--font-color);
|
|
124
|
+
--active-text-color: var(--font-color);
|
|
110
125
|
color: var(--font-color);
|
|
111
126
|
background: @color_f2f2f2;
|
|
112
127
|
border: none;
|
|
@@ -123,10 +138,12 @@
|
|
|
123
138
|
background-color: @white;
|
|
124
139
|
border: 1px solid var(--theme-color, var(--border-color));
|
|
125
140
|
&:hover {
|
|
141
|
+
color: var(--hover-text-color, var(--font-color));
|
|
126
142
|
background-color: var(--hover-bg-color, @white);
|
|
127
143
|
border-color: var(--hover-color, var(--border-color));
|
|
128
144
|
}
|
|
129
145
|
&:active {
|
|
146
|
+
color: var(--active-text-color, var(--font-color));
|
|
130
147
|
background-color: var(--active-bg-color, @white);
|
|
131
148
|
border-color: var(--active-color, var(--border-color));
|
|
132
149
|
}
|
|
@@ -136,20 +153,6 @@
|
|
|
136
153
|
background-color: @white;
|
|
137
154
|
}
|
|
138
155
|
}
|
|
139
|
-
|
|
140
|
-
&.@{base-button-name}-disabled {
|
|
141
|
-
color: @color_bfbfbf;
|
|
142
|
-
background-color: @color_e6e6e6;
|
|
143
|
-
border-color: @color_e6e6e6;
|
|
144
|
-
&:hover {
|
|
145
|
-
background-color: @color_e6e6e6;
|
|
146
|
-
border-color: @color_e6e6e6;
|
|
147
|
-
}
|
|
148
|
-
&:active {
|
|
149
|
-
background-color: @color_e6e6e6;
|
|
150
|
-
border-color: @color_e6e6e6;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
&-variant-dashed {
|
|
@@ -157,10 +160,12 @@
|
|
|
157
160
|
background-color: @white;
|
|
158
161
|
border: 1px dashed var(--theme-color, var(--border-color));
|
|
159
162
|
&:hover {
|
|
163
|
+
color: var(--hover-text-color, var(--font-color));
|
|
160
164
|
background-color: var(--hover-bg-color, @white);
|
|
161
165
|
border-color: var(--hover-color, var(--border-color));
|
|
162
166
|
}
|
|
163
167
|
&:active {
|
|
168
|
+
color: var(--active-text-color, var(--font-color));
|
|
164
169
|
background-color: var(--active-bg-color, @white);
|
|
165
170
|
border-color: var(--active-color, var(--border-color));
|
|
166
171
|
}
|
|
@@ -193,15 +198,17 @@
|
|
|
193
198
|
}
|
|
194
199
|
|
|
195
200
|
&-disabled {
|
|
196
|
-
color: @color_bfbfbf;
|
|
197
|
-
background-color: @
|
|
198
|
-
border-color: @
|
|
201
|
+
color: @color_bfbfbf !important;
|
|
202
|
+
background-color: @color_f2f2f2 !important;
|
|
203
|
+
border-color: var(--disabled-border-color, @color_f2f2f2) !important;
|
|
199
204
|
cursor: not-allowed;
|
|
200
205
|
&:hover {
|
|
201
|
-
|
|
206
|
+
color: @color_bfbfbf !important;
|
|
207
|
+
background-color: @color_f2f2f2 !important;
|
|
202
208
|
}
|
|
203
209
|
&:active {
|
|
204
|
-
|
|
210
|
+
color: @color_bfbfbf !important;
|
|
211
|
+
background-color: @color_f2f2f2 !important;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
214
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.105",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"node": ">=10.0.0"
|
|
88
88
|
},
|
|
89
89
|
"license": "MIT",
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "339f0ad113cd267b75bf7ae54131dd66e0034a28"
|
|
91
91
|
}
|