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.
@@ -11,3 +11,9 @@
11
11
  margin-bottom: 15px;
12
12
  }
13
13
  }
14
+
15
+ .icon-box{
16
+ .spotecicon{
17
+ width: 16px;
18
+ }
19
+ }
@@ -1,6 +1,7 @@
1
1
  .base-btn {
2
2
  display: inline-flex;
3
- gap: 12px;
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: #e6e6e6;
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: #f2f2f2;
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: #e6e6e6;
177
- border-color: #e6e6e6;
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
- background-color: #e6e6e6;
187
+ color: #bfbfbf !important;
188
+ background-color: #f2f2f2 !important;
182
189
  }
183
190
  .base-btn-disabled:active {
184
- background-color: #e6e6e6;
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
- gap: 12px;
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: @color_e6e6e6;
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: @color_f2f2f2;
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: @color_e6e6e6;
198
- border-color: @color_e6e6e6;
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
- background-color: @color_e6e6e6;
206
+ color: @color_bfbfbf !important;
207
+ background-color: @color_f2f2f2 !important;
202
208
  }
203
209
  &:active {
204
- background-color: @color_e6e6e6;
210
+ color: @color_bfbfbf !important;
211
+ background-color: @color_f2f2f2 !important;
205
212
  }
206
213
  }
207
214
 
@@ -11,3 +11,9 @@
11
11
  margin-bottom: 15px;
12
12
  }
13
13
  }
14
+
15
+ .icon-box{
16
+ .spotecicon{
17
+ width: 16px;
18
+ }
19
+ }
@@ -1,6 +1,7 @@
1
1
  .base-btn {
2
2
  display: inline-flex;
3
- gap: 12px;
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: #e6e6e6;
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: #f2f2f2;
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: #e6e6e6;
177
- border-color: #e6e6e6;
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
- background-color: #e6e6e6;
187
+ color: #bfbfbf !important;
188
+ background-color: #f2f2f2 !important;
182
189
  }
183
190
  .base-btn-disabled:active {
184
- background-color: #e6e6e6;
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
- gap: 12px;
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: @color_e6e6e6;
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: @color_f2f2f2;
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: @color_e6e6e6;
198
- border-color: @color_e6e6e6;
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
- background-color: @color_e6e6e6;
206
+ color: @color_bfbfbf !important;
207
+ background-color: @color_f2f2f2 !important;
202
208
  }
203
209
  &:active {
204
- background-color: @color_e6e6e6;
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.104",
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": "7b20a8b82d138441be884c67db67205bf516e380"
90
+ "gitHead": "339f0ad113cd267b75bf7ae54131dd66e0034a28"
91
91
  }