bkui-vue 2.0.1-beta.77 → 2.0.1-beta.79

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 (16) hide show
  1. package/dist/index.cjs.js +30 -30
  2. package/dist/index.esm.js +4234 -4229
  3. package/dist/index.umd.js +28 -28
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/button/button.css +188 -144
  7. package/lib/button/button.less +74 -71
  8. package/lib/button/button.variable.css +188 -144
  9. package/lib/index.js +1 -1
  10. package/lib/info-box/index.js +1 -0
  11. package/lib/overflow-title/index.js +15 -7
  12. package/lib/select/index.js +8 -6
  13. package/lib/table/table.css +188 -144
  14. package/lib/table/table.variable.css +188 -144
  15. package/lib/tag-input/index.js +18 -9
  16. package/package.json +1 -1
package/lib/button/button.css CHANGED
@@ -147,307 +147,351 @@
147
147
  align-items: center;
148
148
  justify-content: center;
149
149
  }
150
- .bk-button.bk-button-primary {
150
+ .bk-button.bk-button-small {
151
+ height: var(--component-size-small);
152
+ padding: var(--component-size-small-padding);
153
+ font-size: var(--font-size-base);
154
+ }
155
+ .bk-button.bk-button-large {
156
+ height: var(--component-size-large);
157
+ padding: var(--component-size-large-padding);
158
+ font-size: var(--font-size-large);
159
+ }
160
+ .bk-button .bk-button-text {
161
+ display: inline-flex;
162
+ align-items: center;
163
+ line-height: 1;
164
+ }
165
+ .bk-button.is-loading {
166
+ position: relative;
167
+ }
168
+ .bk-button.is-loading .bk-button-loading:not(:last-child) {
169
+ position: absolute;
170
+ }
171
+ .bk-button.is-loading .bk-button-text {
172
+ visibility: hidden;
173
+ }
174
+ .bk-button:hover {
175
+ border-color: var(--button-default-hover-border-color);
176
+ }
177
+ .bk-button:active {
178
+ color: var(--primary-color);
179
+ border-color: var(--primary-color);
180
+ }
181
+ .bk-button.is-text {
182
+ height: auto;
183
+ padding: 0;
184
+ font-size: inherit;
185
+ color: var(--default-color);
186
+ text-decoration: none;
187
+ cursor: pointer;
188
+ background-color: transparent;
189
+ border: none;
190
+ outline: none;
191
+ }
192
+ .bk-button.is-disabled {
193
+ color: var(--disable-color);
194
+ cursor: not-allowed;
195
+ border-color: var(--disable-color);
196
+ }
197
+ .bk-button.is-disabled:not(.is-text) {
198
+ background-color: var(--disable-bg-color);
199
+ }
200
+ .bk-button-group {
201
+ display: inline-block;
202
+ font-size: 0;
203
+ }
204
+ .bk-button-group.bk-button-group-small .bk-button {
205
+ height: var(--component-size-small);
206
+ padding: var(--component-size-small-padding);
207
+ font-size: var(--font-size-base);
208
+ }
209
+ .bk-button-group.bk-button-group-large .bk-button {
210
+ height: var(--component-size-large);
211
+ padding: var(--component-size-large-padding);
212
+ font-size: var(--font-size-large);
213
+ }
214
+ .bk-button-group .bk-button {
215
+ height: var(--component-size-base);
216
+ margin: 0 0 0 -1px;
217
+ border-radius: 0;
218
+ }
219
+ .bk-button-group .bk-button:not(.is-disabled) {
220
+ color: var(--default-color);
221
+ background-color: var(--white-color);
222
+ border-color: var(--light-gray);
223
+ }
224
+ .bk-button-group .bk-button.is-disabled {
225
+ color: var(--light-gray);
226
+ }
227
+ .bk-button-group .bk-button:first-child {
228
+ border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
229
+ }
230
+ .bk-button-group .bk-button:last-child {
231
+ border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
232
+ }
233
+ .bk-button-group .bk-button:only-child {
234
+ border-radius: var(--border-radius-base);
235
+ }
236
+ .bk-button-group .bk-button:hover:not(.is-disabled),
237
+ .bk-button-group .bk-button.is-selected:not(.is-disabled) {
238
+ position: relative;
239
+ z-index: 1;
240
+ color: var(--primary-color);
241
+ background-color: var(--white-color);
242
+ border-color: var(--primary-color);
243
+ }
244
+ .bk-button-group .bk-button.is-selected:not(.is-disabled) {
245
+ background-color: var(--button-selected-bg-color);
246
+ }
247
+ .bk-button-group .bk-button.is-selected.is-disabled {
248
+ background-color: var(--button-disabled-selected-bg-color);
249
+ }
250
+ .bk-button.bk-button-primary,
251
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary {
151
252
  background-color: var(--primary-color);
152
253
  color: var(--white-color);
153
254
  border-color: var(--primary-color);
154
255
  }
155
- .bk-button.bk-button-primary:hover {
256
+ .bk-button.bk-button-primary:hover,
257
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary:hover {
156
258
  background-color: var(--button-primary-hover-color);
157
259
  border-color: var(--button-primary-hover-color);
158
260
  }
159
- .bk-button.bk-button-primary:active {
261
+ .bk-button.bk-button-primary:active,
262
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary:active {
160
263
  background-color: var(--button-primary-active-color);
161
264
  border-color: var(--button-primary-active-color);
162
265
  color: var(--white-color);
163
266
  }
164
- .bk-button.bk-button-primary.is-outline {
267
+ .bk-button.bk-button-primary.is-outline,
268
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline {
165
269
  color: var(--primary-color);
166
270
  border-color: var(--primary-color);
167
271
  background-color: var(--white-color);
168
272
  }
169
- .bk-button.bk-button-primary.is-outline:hover {
273
+ .bk-button.bk-button-primary.is-outline:hover,
274
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline:hover {
170
275
  background-color: var(--button-primary-hover-color);
171
276
  border-color: var(--button-primary-hover-color);
172
277
  color: var(--white-color);
173
278
  }
174
- .bk-button.bk-button-primary.is-outline:active {
279
+ .bk-button.bk-button-primary.is-outline:active,
280
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline:active {
175
281
  background-color: var(--button-primary-active-color);
176
282
  border-color: var(--button-primary-active-color);
177
283
  color: var(--white-color);
178
284
  }
179
- .bk-button.bk-button-primary.is-text {
285
+ .bk-button.bk-button-primary.is-text,
286
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-text {
180
287
  color: var(--primary-color);
181
288
  background-color: transparent;
182
289
  border: none;
183
290
  }
184
- .bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
291
+ .bk-button.bk-button-primary.is-text:not(.is-disabled):hover,
292
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-text:not(.is-disabled):hover {
185
293
  color: var(--button-primary-hover-color);
186
294
  }
187
- .bk-button.bk-button-primary.is-disabled {
295
+ .bk-button.bk-button-primary.is-disabled,
296
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-disabled {
188
297
  color: var(--disable-color);
189
298
  cursor: not-allowed;
190
299
  }
191
- .bk-button.bk-button-primary.is-disabled:not(.is-text) {
300
+ .bk-button.bk-button-primary.is-disabled:not(.is-text),
301
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-disabled:not(.is-text) {
192
302
  background-color: var(--disable-color);
193
303
  color: var(--white-color);
194
304
  border-color: var(--disable-color);
195
305
  }
196
- .bk-button.bk-button-hover-primary:hover {
306
+ .bk-button.bk-button-hover-primary:hover,
307
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-primary:hover {
197
308
  background-color: var(--button-primary-hover-color);
198
309
  border-color: var(--button-primary-hover-color);
199
310
  color: var(--white-color);
200
311
  }
201
- .bk-button.bk-button-warning {
312
+ .bk-button.bk-button-warning,
313
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning {
202
314
  background-color: var(--warning-color);
203
315
  color: var(--white-color);
204
316
  border-color: var(--warning-color);
205
317
  }
206
- .bk-button.bk-button-warning:hover {
318
+ .bk-button.bk-button-warning:hover,
319
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning:hover {
207
320
  background-color: var(--button-warning-hover-color);
208
321
  border-color: var(--button-warning-hover-color);
209
322
  }
210
- .bk-button.bk-button-warning:active {
323
+ .bk-button.bk-button-warning:active,
324
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning:active {
211
325
  background-color: var(--button-warning-active-color);
212
326
  border-color: var(--button-warning-active-color);
213
327
  color: var(--white-color);
214
328
  }
215
- .bk-button.bk-button-warning.is-outline {
329
+ .bk-button.bk-button-warning.is-outline,
330
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline {
216
331
  color: var(--warning-color);
217
332
  border-color: var(--warning-color);
218
333
  background-color: var(--white-color);
219
334
  }
220
- .bk-button.bk-button-warning.is-outline:hover {
335
+ .bk-button.bk-button-warning.is-outline:hover,
336
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline:hover {
221
337
  background-color: var(--button-warning-hover-color);
222
338
  border-color: var(--button-warning-hover-color);
223
339
  color: var(--white-color);
224
340
  }
225
- .bk-button.bk-button-warning.is-outline:active {
341
+ .bk-button.bk-button-warning.is-outline:active,
342
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline:active {
226
343
  background-color: var(--button-warning-active-color);
227
344
  border-color: var(--button-warning-active-color);
228
345
  color: var(--white-color);
229
346
  }
230
- .bk-button.bk-button-warning.is-text {
347
+ .bk-button.bk-button-warning.is-text,
348
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-text {
231
349
  color: var(--warning-color);
232
350
  background-color: transparent;
233
351
  border: none;
234
352
  }
235
- .bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
353
+ .bk-button.bk-button-warning.is-text:not(.is-disabled):hover,
354
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-text:not(.is-disabled):hover {
236
355
  color: var(--button-warning-hover-color);
237
356
  }
238
- .bk-button.bk-button-warning.is-disabled {
357
+ .bk-button.bk-button-warning.is-disabled,
358
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-disabled {
239
359
  color: var(--disable-color);
240
360
  cursor: not-allowed;
241
361
  }
242
- .bk-button.bk-button-warning.is-disabled:not(.is-text) {
362
+ .bk-button.bk-button-warning.is-disabled:not(.is-text),
363
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-disabled:not(.is-text) {
243
364
  background-color: var(--disable-color);
244
365
  color: var(--white-color);
245
366
  border-color: var(--disable-color);
246
367
  }
247
- .bk-button.bk-button-hover-warning:hover {
368
+ .bk-button.bk-button-hover-warning:hover,
369
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-warning:hover {
248
370
  background-color: var(--button-warning-hover-color);
249
371
  border-color: var(--button-warning-hover-color);
250
372
  color: var(--white-color);
251
373
  }
252
- .bk-button.bk-button-success {
374
+ .bk-button.bk-button-success,
375
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success {
253
376
  background-color: var(--success-color);
254
377
  color: var(--white-color);
255
378
  border-color: var(--success-color);
256
379
  }
257
- .bk-button.bk-button-success:hover {
380
+ .bk-button.bk-button-success:hover,
381
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success:hover {
258
382
  background-color: var(--button-success-hover-color);
259
383
  border-color: var(--button-success-hover-color);
260
384
  }
261
- .bk-button.bk-button-success:active {
385
+ .bk-button.bk-button-success:active,
386
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success:active {
262
387
  background-color: var(--button-success-active-color);
263
388
  border-color: var(--button-success-active-color);
264
389
  color: var(--white-color);
265
390
  }
266
- .bk-button.bk-button-success.is-outline {
391
+ .bk-button.bk-button-success.is-outline,
392
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline {
267
393
  color: var(--success-color);
268
394
  border-color: var(--success-color);
269
395
  background-color: var(--white-color);
270
396
  }
271
- .bk-button.bk-button-success.is-outline:hover {
397
+ .bk-button.bk-button-success.is-outline:hover,
398
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline:hover {
272
399
  background-color: var(--button-success-hover-color);
273
400
  border-color: var(--button-success-hover-color);
274
401
  color: var(--white-color);
275
402
  }
276
- .bk-button.bk-button-success.is-outline:active {
403
+ .bk-button.bk-button-success.is-outline:active,
404
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline:active {
277
405
  background-color: var(--button-success-active-color);
278
406
  border-color: var(--button-success-active-color);
279
407
  color: var(--white-color);
280
408
  }
281
- .bk-button.bk-button-success.is-text {
409
+ .bk-button.bk-button-success.is-text,
410
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-text {
282
411
  color: var(--success-color);
283
412
  background-color: transparent;
284
413
  border: none;
285
414
  }
286
- .bk-button.bk-button-success.is-text:not(.is-disabled):hover {
415
+ .bk-button.bk-button-success.is-text:not(.is-disabled):hover,
416
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-text:not(.is-disabled):hover {
287
417
  color: var(--button-success-hover-color);
288
418
  }
289
- .bk-button.bk-button-success.is-disabled {
419
+ .bk-button.bk-button-success.is-disabled,
420
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-disabled {
290
421
  color: var(--disable-color);
291
422
  cursor: not-allowed;
292
423
  }
293
- .bk-button.bk-button-success.is-disabled:not(.is-text) {
424
+ .bk-button.bk-button-success.is-disabled:not(.is-text),
425
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-disabled:not(.is-text) {
294
426
  background-color: var(--disable-color);
295
427
  color: var(--white-color);
296
428
  border-color: var(--disable-color);
297
429
  }
298
- .bk-button.bk-button-hover-success:hover {
430
+ .bk-button.bk-button-hover-success:hover,
431
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-success:hover {
299
432
  background-color: var(--button-success-hover-color);
300
433
  border-color: var(--button-success-hover-color);
301
434
  color: var(--white-color);
302
435
  }
303
- .bk-button.bk-button-danger {
436
+ .bk-button.bk-button-danger,
437
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger {
304
438
  background-color: var(--danger-color);
305
439
  color: var(--white-color);
306
440
  border-color: var(--danger-color);
307
441
  }
308
- .bk-button.bk-button-danger:hover {
442
+ .bk-button.bk-button-danger:hover,
443
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger:hover {
309
444
  background-color: var(--button-danger-hover-color);
310
445
  border-color: var(--button-danger-hover-color);
311
446
  }
312
- .bk-button.bk-button-danger:active {
447
+ .bk-button.bk-button-danger:active,
448
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger:active {
313
449
  background-color: var(--button-danger-active-color);
314
450
  border-color: var(--button-danger-active-color);
315
451
  color: var(--white-color);
316
452
  }
317
- .bk-button.bk-button-danger.is-outline {
453
+ .bk-button.bk-button-danger.is-outline,
454
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline {
318
455
  color: var(--danger-color);
319
456
  border-color: var(--danger-color);
320
457
  background-color: var(--white-color);
321
458
  }
322
- .bk-button.bk-button-danger.is-outline:hover {
459
+ .bk-button.bk-button-danger.is-outline:hover,
460
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline:hover {
323
461
  background-color: var(--button-danger-hover-color);
324
462
  border-color: var(--button-danger-hover-color);
325
463
  color: var(--white-color);
326
464
  }
327
- .bk-button.bk-button-danger.is-outline:active {
465
+ .bk-button.bk-button-danger.is-outline:active,
466
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline:active {
328
467
  background-color: var(--button-danger-active-color);
329
468
  border-color: var(--button-danger-active-color);
330
469
  color: var(--white-color);
331
470
  }
332
- .bk-button.bk-button-danger.is-text {
471
+ .bk-button.bk-button-danger.is-text,
472
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-text {
333
473
  color: var(--danger-color);
334
474
  background-color: transparent;
335
475
  border: none;
336
476
  }
337
- .bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
477
+ .bk-button.bk-button-danger.is-text:not(.is-disabled):hover,
478
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-text:not(.is-disabled):hover {
338
479
  color: var(--button-danger-hover-color);
339
480
  }
340
- .bk-button.bk-button-danger.is-disabled {
481
+ .bk-button.bk-button-danger.is-disabled,
482
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-disabled {
341
483
  color: var(--disable-color);
342
484
  cursor: not-allowed;
343
485
  }
344
- .bk-button.bk-button-danger.is-disabled:not(.is-text) {
486
+ .bk-button.bk-button-danger.is-disabled:not(.is-text),
487
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-disabled:not(.is-text) {
345
488
  background-color: var(--disable-color);
346
489
  color: var(--white-color);
347
490
  border-color: var(--disable-color);
348
491
  }
349
- .bk-button.bk-button-hover-danger:hover {
492
+ .bk-button.bk-button-hover-danger:hover,
493
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-danger:hover {
350
494
  background-color: var(--button-danger-hover-color);
351
495
  border-color: var(--button-danger-hover-color);
352
496
  color: var(--white-color);
353
497
  }
354
- .bk-button.bk-button-small {
355
- height: var(--component-size-small);
356
- padding: var(--component-size-small-padding);
357
- font-size: var(--font-size-base);
358
- }
359
- .bk-button.bk-button-large {
360
- height: var(--component-size-large);
361
- padding: var(--component-size-large-padding);
362
- font-size: var(--font-size-large);
363
- }
364
- .bk-button .bk-button-text {
365
- display: inline-flex;
366
- align-items: center;
367
- line-height: 1;
368
- }
369
- .bk-button.is-loading {
370
- position: relative;
371
- }
372
- .bk-button.is-loading .bk-button-loading:not(:last-child) {
373
- position: absolute;
374
- }
375
- .bk-button.is-loading .bk-button-text {
376
- visibility: hidden;
377
- }
378
- .bk-button:hover {
379
- border-color: var(--button-default-hover-border-color);
380
- }
381
- .bk-button:active {
382
- color: var(--primary-color);
383
- border-color: var(--primary-color);
384
- }
385
- .bk-button.is-text {
386
- height: auto;
387
- padding: 0;
388
- font-size: inherit;
389
- color: var(--default-color);
390
- text-decoration: none;
391
- cursor: pointer;
392
- background-color: transparent;
393
- border: none;
394
- outline: none;
395
- }
396
- .bk-button.is-disabled {
397
- color: var(--disable-color);
398
- cursor: not-allowed;
399
- border-color: var(--disable-color);
400
- }
401
- .bk-button.is-disabled:not(.is-text) {
402
- background-color: var(--disable-bg-color);
403
- }
404
- .bk-button-group {
405
- display: inline-block;
406
- font-size: 0;
407
- }
408
- .bk-button-group.bk-button-group-small .bk-button {
409
- height: var(--component-size-small);
410
- padding: var(--component-size-small-padding);
411
- font-size: var(--font-size-base);
412
- }
413
- .bk-button-group.bk-button-group-large .bk-button {
414
- height: var(--component-size-large);
415
- padding: var(--component-size-large-padding);
416
- font-size: var(--font-size-large);
417
- }
418
- .bk-button-group .bk-button {
419
- height: var(--component-size-base);
420
- margin: 0 0 0 -1px;
421
- border-radius: 0;
422
- }
423
- .bk-button-group .bk-button:not(.is-disabled) {
424
- color: var(--default-color);
425
- background-color: var(--white-color);
426
- border-color: var(--light-gray);
427
- }
428
- .bk-button-group .bk-button.is-disabled {
429
- color: var(--light-gray);
430
- }
431
- .bk-button-group .bk-button:first-child {
432
- border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
433
- }
434
- .bk-button-group .bk-button:last-child {
435
- border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
436
- }
437
- .bk-button-group .bk-button:only-child {
438
- border-radius: var(--border-radius-base);
439
- }
440
- .bk-button-group .bk-button:hover:not(.is-disabled),
441
- .bk-button-group .bk-button.is-selected:not(.is-disabled) {
442
- position: relative;
443
- z-index: 1;
444
- color: var(--primary-color);
445
- background-color: var(--white-color);
446
- border-color: var(--primary-color);
447
- }
448
- .bk-button-group .bk-button.is-selected:not(.is-disabled) {
449
- background-color: var(--button-selected-bg-color);
450
- }
451
- .bk-button-group .bk-button.is-selected.is-disabled {
452
- background-color: var(--button-disabled-selected-bg-color);
453
- }
package/lib/button/button.less CHANGED
@@ -34,77 +34,7 @@
34
34
  align-items: center;
35
35
  justify-content: center;
36
36
 
37
- each(@themeSelectors, {
38
- @color: '@{value}-color';
39
- @hoverColor: 'button-@{value}-hover-color';
40
- @activeColor: 'button-@{value}-active-color';
41
-
42
- &.@{bk-prefix}-button-@{value} {
43
- background-color: @@color;
44
- color: @white-color;
45
- border-color: @@color;
46
-
47
- &:hover {
48
- background-color: @@hoverColor;
49
- border-color: @@hoverColor;
50
- }
51
-
52
- &:active {
53
- background-color: @@activeColor;
54
- border-color: @@activeColor;
55
- color: @white-color;
56
- }
57
-
58
- &.is-outline {
59
- color: @@color;
60
- border-color: @@color;
61
- background-color: @white-color;
62
-
63
- &:hover {
64
- background-color: @@hoverColor;
65
- border-color: @@hoverColor;
66
- color: @white-color;
67
- }
68
-
69
- &:active {
70
- background-color: @@activeColor;
71
- border-color: @@activeColor;
72
- color: @white-color;
73
- }
74
- }
75
-
76
- &.is-text {
77
- color: @@color;
78
- background-color: transparent;
79
- border: none;
80
-
81
- &:not(.is-disabled):hover {
82
- color: @@hoverColor;
83
- }
84
- }
85
-
86
- &.is-disabled {
87
- &:not(.is-text) {
88
- background-color: @disable-color;
89
- color: @white-color;
90
- border-color: @disable-color;
91
- }
92
-
93
- color: @disable-color;
94
- cursor: not-allowed;
95
- }
96
- }
97
-
98
- &.@{bk-prefix}-button-hover-@{value} {
99
- &:hover {
100
- background-color: @@hoverColor;
101
- border-color: @@hoverColor;
102
- color: @white-color;
103
- }
104
- }
105
- })
106
-
107
- each(@sizeSelectors, {
37
+ each(@sizeSelectors, {
108
38
  @sizeBtnHeight: '@{value}BtnHeight';
109
39
  @sizeBtnPadding: '@{value}BtnPadding';
110
40
  @sizeBtnFontSize: '@{value}BtnFontSize';
@@ -239,3 +169,76 @@
239
169
 
240
170
  }
241
171
  }
172
+
173
+ .@{bk-prefix}-button,
174
+ .@{bk-prefix}-button-group .is-selected:not(.is-disabled) {
175
+ each(@themeSelectors, {
176
+ @color: '@{value}-color';
177
+ @hoverColor: 'button-@{value}-hover-color';
178
+ @activeColor: 'button-@{value}-active-color';
179
+
180
+ &.@{bk-prefix}-button-@{value} {
181
+ background-color: @@color;
182
+ color: @white-color;
183
+ border-color: @@color;
184
+
185
+ &:hover {
186
+ background-color: @@hoverColor;
187
+ border-color: @@hoverColor;
188
+ }
189
+
190
+ &:active {
191
+ background-color: @@activeColor;
192
+ border-color: @@activeColor;
193
+ color: @white-color;
194
+ }
195
+
196
+ &.is-outline {
197
+ color: @@color;
198
+ border-color: @@color;
199
+ background-color: @white-color;
200
+
201
+ &:hover {
202
+ background-color: @@hoverColor;
203
+ border-color: @@hoverColor;
204
+ color: @white-color;
205
+ }
206
+
207
+ &:active {
208
+ background-color: @@activeColor;
209
+ border-color: @@activeColor;
210
+ color: @white-color;
211
+ }
212
+ }
213
+
214
+ &.is-text {
215
+ color: @@color;
216
+ background-color: transparent;
217
+ border: none;
218
+
219
+ &:not(.is-disabled):hover {
220
+ color: @@hoverColor;
221
+ }
222
+ }
223
+
224
+ &.is-disabled {
225
+ &:not(.is-text) {
226
+ background-color: @disable-color;
227
+ color: @white-color;
228
+ border-color: @disable-color;
229
+ }
230
+
231
+ color: @disable-color;
232
+ cursor: not-allowed;
233
+ }
234
+ }
235
+
236
+ &.@{bk-prefix}-button-hover-@{value} {
237
+ &:hover {
238
+ background-color: @@hoverColor;
239
+ border-color: @@hoverColor;
240
+ color: @white-color;
241
+ }
242
+ }
243
+ })
244
+ }