bkui-vue 0.0.2-beta.58 → 0.0.2-beta.59

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 (8) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/style.variable.css +1 -1
  3. package/lib/button/button.css +20 -0
  4. package/lib/button/button.less +105 -94
  5. package/lib/button/button.variable.css +20 -0
  6. package/lib/table/table.css +20 -0
  7. package/lib/table/table.variable.css +20 -0
  8. package/package.json +1 -1
package/lib/button/button.css CHANGED
@@ -41,6 +41,11 @@
41
41
  border-color: #5594fa;
42
42
  color: white;
43
43
  }
44
+ .bk-button.bk-button-primary.is-outline:active {
45
+ background-color: #2c77f4;
46
+ border-color: #2c77f4;
47
+ color: white;
48
+ }
44
49
  .bk-button.bk-button-primary.is-text {
45
50
  color: #3a84ff;
46
51
  background-color: transparent;
@@ -87,6 +92,11 @@
87
92
  border-color: #ffb848;
88
93
  color: white;
89
94
  }
95
+ .bk-button.bk-button-warning.is-outline:active {
96
+ background-color: #eb9000;
97
+ border-color: #eb9000;
98
+ color: white;
99
+ }
90
100
  .bk-button.bk-button-warning.is-text {
91
101
  color: #ff9c01;
92
102
  background-color: transparent;
@@ -133,6 +143,11 @@
133
143
  border-color: #45e35f;
134
144
  color: white;
135
145
  }
146
+ .bk-button.bk-button-success.is-outline:active {
147
+ background-color: #1ab943;
148
+ border-color: #1ab943;
149
+ color: white;
150
+ }
136
151
  .bk-button.bk-button-success.is-text {
137
152
  color: #2dcb56;
138
153
  background-color: transparent;
@@ -179,6 +194,11 @@
179
194
  border-color: #ff5656;
180
195
  color: white;
181
196
  }
197
+ .bk-button.bk-button-danger.is-outline:active {
198
+ background-color: #db2626;
199
+ border-color: #db2626;
200
+ color: white;
201
+ }
182
202
  .bk-button.bk-button-danger.is-text {
183
203
  color: #ea3636;
184
204
  background-color: transparent;
package/lib/button/button.less CHANGED
@@ -33,11 +33,12 @@
33
33
  appearance: none;
34
34
  align-items: center;
35
35
  justify-content: center;
36
-
36
+
37
37
  each(@themeSelectors, {
38
38
  @color: '@{value}-color';
39
39
  @hoverColor: 'button-@{value}-hover-color';
40
40
  @activeColor: 'button-@{value}-active-color';
41
+
41
42
  &.@{bk-prefix}-button-@{value} {
42
43
  background-color: @@color;
43
44
  color: @white-color;
@@ -64,22 +65,31 @@
64
65
  border-color: @@hoverColor;
65
66
  color: @white-color;
66
67
  }
68
+
69
+ &:active {
70
+ background-color: @@activeColor;
71
+ border-color: @@activeColor;
72
+ color: @white-color;
73
+ }
67
74
  }
68
75
 
69
76
  &.is-text {
70
77
  color: @@color;
71
78
  background-color: transparent;
72
79
  border: none;
80
+
73
81
  &:not(.is-disabled):hover {
74
82
  color: @@hoverColor;
75
83
  }
76
84
  }
85
+
77
86
  &.is-disabled {
78
87
  &:not(.is-text) {
79
88
  background-color: @disable-color;
80
89
  color: @white-color;
81
90
  border-color: @disable-color;
82
91
  }
92
+
83
93
  color: @disable-color;
84
94
  cursor: not-allowed;
85
95
  }
@@ -92,81 +102,83 @@
92
102
  color: @white-color;
93
103
  }
94
104
  }
95
- })
96
105
 
97
-
98
- each(@sizeSelectors, {
99
- @sizeBtnHeight: '@{value}BtnHeight';
100
- @sizeBtnPadding: '@{value}BtnPadding';
101
- @sizeBtnFontSize: '@{value}BtnFontSize';
102
- &.@{bk-prefix}-button-@{value} {
103
- height: @@sizeBtnHeight;
104
- padding: @@sizeBtnPadding;
105
- font-size: @@sizeBtnFontSize;
106
- }
107
- });
106
+ }) each(@sizeSelectors, {
107
+ @sizeBtnHeight: '@{value}BtnHeight';
108
+ @sizeBtnPadding: '@{value}BtnPadding';
109
+ @sizeBtnFontSize: '@{value}BtnFontSize';
108
110
 
109
- .@{bk-prefix}-button-text {
110
- display: inline-flex;
111
- align-items: center;
112
- line-height: 1;
111
+ &.@{bk-prefix}-button-@{value} {
112
+ height: @@sizeBtnHeight;
113
+ padding: @@sizeBtnPadding;
114
+ font-size: @@sizeBtnFontSize;
113
115
  }
116
+ });
114
117
 
115
- &.is-loading {
116
- position: relative;
117
- .@{bk-prefix}-button-loading {
118
- &:not(:last-child) {
119
- position: absolute;
120
- }
121
- }
122
- .@{bk-prefix}-button-text {
123
- visibility: hidden;
118
+ .@{bk-prefix}-button-text {
119
+ display: inline-flex;
120
+ align-items: center;
121
+ line-height: 1;
122
+ }
123
+
124
+ &.is-loading {
125
+ position: relative;
126
+
127
+ .@{bk-prefix}-button-loading {
128
+ &:not(:last-child) {
129
+ position: absolute;
124
130
  }
125
131
  }
126
132
 
127
- &:hover {
128
- border-color: @button-default-hover-border-color;
133
+ .@{bk-prefix}-button-text {
134
+ visibility: hidden;
129
135
  }
136
+ }
130
137
 
131
- &:active {
132
- color: @primary-color;
133
- border-color: @primary-color;
134
- }
138
+ &:hover {
139
+ border-color: @button-default-hover-border-color;
140
+ }
135
141
 
136
- &.is-text {
137
- height: auto;
138
- padding: 0;
139
- font-size: inherit;
140
- color: @default-color;
141
- text-decoration: none;
142
- cursor: pointer;
143
- background-color: transparent;
144
- border: none;
145
- outline: none;
146
- }
142
+ &:active {
143
+ color: @primary-color;
144
+ border-color: @primary-color;
145
+ }
147
146
 
148
- &.is-disabled {
149
- color: @disable-color;
150
- cursor: not-allowed;
151
- border-color: @disable-color;
152
- }
147
+ &.is-text {
148
+ height: auto;
149
+ padding: 0;
150
+ font-size: inherit;
151
+ color: @default-color;
152
+ text-decoration: none;
153
+ cursor: pointer;
154
+ background-color: transparent;
155
+ border: none;
156
+ outline: none;
157
+ }
153
158
 
154
- // &.is-circle {
155
- // padding: 8px;
156
- // line-height: 1;
157
- // border-radius: 50%;
158
- // }
159
+ &.is-disabled {
160
+ color: @disable-color;
161
+ cursor: not-allowed;
162
+ border-color: @disable-color;
163
+ }
164
+
165
+ // &.is-circle {
166
+ // padding: 8px;
167
+ // line-height: 1;
168
+ // border-radius: 50%;
169
+ // }
159
170
  }
160
171
 
161
172
 
162
173
  .@{bk-prefix}-button-group {
163
174
  display: inline-block;
164
175
  font-size: 0;
165
-
176
+
166
177
  each(@sizeSelectors, {
167
178
  @sizeBtnHeight: '@{value}BtnHeight';
168
179
  @sizeBtnPadding: '@{value}BtnPadding';
169
180
  @sizeBtnFontSize: '@{value}BtnFontSize';
181
+
170
182
  &.@{bk-prefix}-button-group-@{value} {
171
183
  .@{bk-prefix}-button {
172
184
  height: @@sizeBtnHeight;
@@ -174,52 +186,51 @@
174
186
  font-size: @@sizeBtnFontSize;
175
187
  }
176
188
  }
177
- })
178
- ;
179
-
180
- .@{bk-prefix}-button {
181
- height: @btnHeight;
182
- margin: 0 0 0 -1px;
183
- border-radius: 0;
184
-
185
- &:not(.is-disabled) {
186
- color: @default-color;
187
- background-color: @white-color;
188
- border-color: @light-gray;
189
- }
189
+ });
190
190
 
191
- &.is-disabled {
192
- color: @light-gray;
193
- }
194
-
195
- &:first-child {
196
- border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
197
- }
191
+ .@{bk-prefix}-button {
192
+ height: @btnHeight;
193
+ margin: 0 0 0 -1px;
194
+ border-radius: 0;
198
195
 
199
- &:last-child {
200
- border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
201
- }
196
+ &:not(.is-disabled) {
197
+ color: @default-color;
198
+ background-color: @white-color;
199
+ border-color: @light-gray;
200
+ }
202
201
 
203
- &:only-child {
204
- border-radius: @btnBorderRadius;
205
- }
202
+ &.is-disabled {
203
+ color: @light-gray;
204
+ }
206
205
 
207
- &:hover:not(.is-disabled),
208
- &.is-selected:not(.is-disabled) {
209
- position: relative;
210
- z-index: 1;
211
- color: @primary-color;
212
- background-color: @white-color;
213
- border-color: @primary-color;
214
- }
206
+ &:first-child {
207
+ border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
208
+ }
215
209
 
216
- &.is-selected:not(.is-disabled) {
217
- background-color: @button-selected-bg-color;
218
- }
210
+ &:last-child {
211
+ border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
212
+ }
219
213
 
220
- &.is-selected.is-disabled {
221
- background-color: @button-disabled-selected-bg-color;
222
- }
214
+ &:only-child {
215
+ border-radius: @btnBorderRadius;
216
+ }
223
217
 
218
+ &:hover:not(.is-disabled),
219
+ &.is-selected:not(.is-disabled) {
220
+ position: relative;
221
+ z-index: 1;
222
+ color: @primary-color;
223
+ background-color: @white-color;
224
+ border-color: @primary-color;
225
+ }
226
+
227
+ &.is-selected:not(.is-disabled) {
228
+ background-color: @button-selected-bg-color;
229
+ }
230
+
231
+ &.is-selected.is-disabled {
232
+ background-color: @button-disabled-selected-bg-color;
224
233
  }
234
+
225
235
  }
236
+ }
package/lib/button/button.variable.css CHANGED
@@ -163,6 +163,11 @@
163
163
  border-color: var(--button-primary-hover-color);
164
164
  color: var(--white-color);
165
165
  }
166
+ .bk-button.bk-button-primary.is-outline:active {
167
+ background-color: var(--button-primary-active-color);
168
+ border-color: var(--button-primary-active-color);
169
+ color: var(--white-color);
170
+ }
166
171
  .bk-button.bk-button-primary.is-text {
167
172
  color: var(--primary-color);
168
173
  background-color: transparent;
@@ -209,6 +214,11 @@
209
214
  border-color: var(--button-warning-hover-color);
210
215
  color: var(--white-color);
211
216
  }
217
+ .bk-button.bk-button-warning.is-outline:active {
218
+ background-color: var(--button-warning-active-color);
219
+ border-color: var(--button-warning-active-color);
220
+ color: var(--white-color);
221
+ }
212
222
  .bk-button.bk-button-warning.is-text {
213
223
  color: var(--warning-color);
214
224
  background-color: transparent;
@@ -255,6 +265,11 @@
255
265
  border-color: var(--button-success-hover-color);
256
266
  color: var(--white-color);
257
267
  }
268
+ .bk-button.bk-button-success.is-outline:active {
269
+ background-color: var(--button-success-active-color);
270
+ border-color: var(--button-success-active-color);
271
+ color: var(--white-color);
272
+ }
258
273
  .bk-button.bk-button-success.is-text {
259
274
  color: var(--success-color);
260
275
  background-color: transparent;
@@ -301,6 +316,11 @@
301
316
  border-color: var(--button-danger-hover-color);
302
317
  color: var(--white-color);
303
318
  }
319
+ .bk-button.bk-button-danger.is-outline:active {
320
+ background-color: var(--button-danger-active-color);
321
+ border-color: var(--button-danger-active-color);
322
+ color: var(--white-color);
323
+ }
304
324
  .bk-button.bk-button-danger.is-text {
305
325
  color: var(--danger-color);
306
326
  background-color: transparent;
package/lib/table/table.css CHANGED
@@ -178,6 +178,11 @@
178
178
  border-color: #5594fa;
179
179
  color: white;
180
180
  }
181
+ .bk-button.bk-button-primary.is-outline:active {
182
+ background-color: #2c77f4;
183
+ border-color: #2c77f4;
184
+ color: white;
185
+ }
181
186
  .bk-button.bk-button-primary.is-text {
182
187
  color: #3a84ff;
183
188
  background-color: transparent;
@@ -224,6 +229,11 @@
224
229
  border-color: #ffb848;
225
230
  color: white;
226
231
  }
232
+ .bk-button.bk-button-warning.is-outline:active {
233
+ background-color: #eb9000;
234
+ border-color: #eb9000;
235
+ color: white;
236
+ }
227
237
  .bk-button.bk-button-warning.is-text {
228
238
  color: #ff9c01;
229
239
  background-color: transparent;
@@ -270,6 +280,11 @@
270
280
  border-color: #45e35f;
271
281
  color: white;
272
282
  }
283
+ .bk-button.bk-button-success.is-outline:active {
284
+ background-color: #1ab943;
285
+ border-color: #1ab943;
286
+ color: white;
287
+ }
273
288
  .bk-button.bk-button-success.is-text {
274
289
  color: #2dcb56;
275
290
  background-color: transparent;
@@ -316,6 +331,11 @@
316
331
  border-color: #ff5656;
317
332
  color: white;
318
333
  }
334
+ .bk-button.bk-button-danger.is-outline:active {
335
+ background-color: #db2626;
336
+ border-color: #db2626;
337
+ color: white;
338
+ }
319
339
  .bk-button.bk-button-danger.is-text {
320
340
  color: #ea3636;
321
341
  background-color: transparent;
package/lib/table/table.variable.css CHANGED
@@ -300,6 +300,11 @@
300
300
  border-color: #5594fa;
301
301
  color: white;
302
302
  }
303
+ .bk-button.bk-button-primary.is-outline:active {
304
+ background-color: #2c77f4;
305
+ border-color: #2c77f4;
306
+ color: white;
307
+ }
303
308
  .bk-button.bk-button-primary.is-text {
304
309
  color: #3a84ff;
305
310
  background-color: transparent;
@@ -346,6 +351,11 @@
346
351
  border-color: #ffb848;
347
352
  color: white;
348
353
  }
354
+ .bk-button.bk-button-warning.is-outline:active {
355
+ background-color: #eb9000;
356
+ border-color: #eb9000;
357
+ color: white;
358
+ }
349
359
  .bk-button.bk-button-warning.is-text {
350
360
  color: #ff9c01;
351
361
  background-color: transparent;
@@ -392,6 +402,11 @@
392
402
  border-color: #45e35f;
393
403
  color: white;
394
404
  }
405
+ .bk-button.bk-button-success.is-outline:active {
406
+ background-color: #1ab943;
407
+ border-color: #1ab943;
408
+ color: white;
409
+ }
395
410
  .bk-button.bk-button-success.is-text {
396
411
  color: #2dcb56;
397
412
  background-color: transparent;
@@ -438,6 +453,11 @@
438
453
  border-color: #ff5656;
439
454
  color: white;
440
455
  }
456
+ .bk-button.bk-button-danger.is-outline:active {
457
+ background-color: #db2626;
458
+ border-color: #db2626;
459
+ color: white;
460
+ }
441
461
  .bk-button.bk-button-danger.is-text {
442
462
  color: #ea3636;
443
463
  background-color: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "0.0.2-beta.58",
3
+ "version": "0.0.2-beta.59",
4
4
  "workspaces": {
5
5
  "packages": [
6
6
  "packages/!(**.bak)*",