benivo-ui-library 1.8.91 → 1.8.93

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 (7) hide show
  1. package/benivo-ui-lib.less +2 -0
  2. package/button.less +104 -2
  3. package/fantasyButton.less +3 -0
  4. package/index.js +1 -1
  5. package/package.json +1 -1
  6. package/splashScreen.less +134 -0
  7. package/variables.less +2 -0
package/benivo-ui-lib.less CHANGED
@@ -1,6 +1,8 @@
1
1
  @import "../components/input/input.less";
2
2
  @import "../components/tooltip/tooltip.less";
3
3
  @import '../components/button/button.less';
4
+ @import '../components/spinner/spinner.less';
5
+ @import '../components/fantasyButton/fantasyButton.less';
4
6
  @import '../components/checkbox/checkbox.less';
5
7
  @import '../components/radiobutton/radiobutton.less';
6
8
  @import '../components/select/select.less';
package/button.less CHANGED
@@ -144,7 +144,7 @@
144
144
  &.btn-icon-only {
145
145
  padding: 0;
146
146
  width: 40px;
147
- min-width: 40px;
147
+ min-width: 36px;
148
148
  justify-content: center;
149
149
  display: inline-flex;
150
150
  align-items: center;
@@ -162,7 +162,7 @@
162
162
  width: 40px;
163
163
  }
164
164
 
165
- &.btn-sm.btn-icon-only {
165
+ &.btn-md.btn-icon-only {
166
166
  width: 44px;
167
167
  }
168
168
 
@@ -356,6 +356,12 @@
356
356
  background: var(--bg-200);
357
357
  color: var(--text-400);
358
358
  }
359
+
360
+ .bn-spinner {
361
+ div {
362
+ border-color: var(--primary) transparent transparent transparent;
363
+ }
364
+ }
359
365
  }
360
366
 
361
367
  &.btn-color-grey {
@@ -373,6 +379,12 @@
373
379
  background: var(--bg-200);
374
380
  color: var(--text-400);
375
381
  }
382
+
383
+ .bn-spinner {
384
+ div {
385
+ border-color: var(--text-600) transparent transparent transparent;
386
+ }
387
+ }
376
388
  }
377
389
 
378
390
 
@@ -389,6 +401,12 @@
389
401
  &:focus-visible {
390
402
  outline: 'none';
391
403
  }
404
+
405
+ .bn-spinner {
406
+ div {
407
+ border-color: var(--primary) transparent transparent transparent;
408
+ }
409
+ }
392
410
  }
393
411
  }
394
412
 
@@ -402,6 +420,12 @@
402
420
  &:hover {
403
421
  background: var(--primary-light);
404
422
  }
423
+
424
+ .bn-spinner {
425
+ div {
426
+ border-color: var(--primary) transparent transparent transparent;
427
+ }
428
+ }
405
429
  }
406
430
 
407
431
  &.btn-color-danger {
@@ -411,6 +435,12 @@
411
435
  &:hover {
412
436
  background: var(--error-light);
413
437
  }
438
+
439
+ .bn-spinner {
440
+ div {
441
+ border-color: var(--error-main) transparent transparent transparent;
442
+ }
443
+ }
414
444
  }
415
445
 
416
446
  &.btn-color-success {
@@ -420,6 +450,12 @@
420
450
  &:hover {
421
451
  background: var(--success-light);
422
452
  }
453
+
454
+ .bn-spinner {
455
+ div {
456
+ border-color: var(--success-main) transparent transparent transparent;
457
+ }
458
+ }
423
459
  }
424
460
 
425
461
  &.btn-color-warning {
@@ -429,6 +465,12 @@
429
465
  &:hover {
430
466
  background: var(--warning-light);
431
467
  }
468
+
469
+ .bn-spinner {
470
+ div {
471
+ border-color: var(--warning-main) transparent transparent transparent;
472
+ }
473
+ }
432
474
  }
433
475
 
434
476
  &.btn-color-ghost {
@@ -439,6 +481,12 @@
439
481
  &:hover {
440
482
  background: color-mix(in srgb, white 85%, var(--primary));
441
483
  }
484
+
485
+ .bn-spinner {
486
+ div {
487
+ border-color: var(--primary) transparent transparent transparent;
488
+ }
489
+ }
442
490
  }
443
491
 
444
492
  &.btn-color-grey {
@@ -448,6 +496,12 @@
448
496
  &:hover {
449
497
  background: var(--bg-50);
450
498
  }
499
+
500
+ .bn-spinner {
501
+ div {
502
+ border-color: var(--text-600) transparent transparent transparent;
503
+ }
504
+ }
451
505
  }
452
506
 
453
507
  &.btn-color-link {
@@ -463,6 +517,12 @@
463
517
  &:focus-visible {
464
518
  outline: 'none';
465
519
  }
520
+
521
+ .bn-spinner {
522
+ div {
523
+ border-color: var(--primary) transparent transparent transparent;
524
+ }
525
+ }
466
526
  }
467
527
  }
468
528
 
@@ -474,26 +534,62 @@
474
534
 
475
535
  &.btn-color-primary {
476
536
  color: var(--primary);
537
+
538
+ .bn-spinner {
539
+ div {
540
+ border-color: var(--primary) transparent transparent transparent;
541
+ }
542
+ }
477
543
  }
478
544
 
479
545
  &.btn-color-danger {
480
546
  color: var(--error-main);
547
+
548
+ .bn-spinner {
549
+ div {
550
+ border-color: var(--error-main) transparent transparent transparent;
551
+ }
552
+ }
481
553
  }
482
554
 
483
555
  &.btn-color-success {
484
556
  color: var(--success-main);
557
+
558
+ .bn-spinner {
559
+ div {
560
+ border-color: var(--success-main) transparent transparent transparent;
561
+ }
562
+ }
485
563
  }
486
564
 
487
565
  &.btn-color-warning {
488
566
  color: var(--warning-main);
567
+
568
+ .bn-spinner {
569
+ div {
570
+ border-color: var(--warning-main) transparent transparent transparent;
571
+ }
572
+ }
489
573
  }
490
574
 
491
575
  &.btn-color-ghost {
492
576
  color: var(--primary);
577
+
578
+ .bn-spinner {
579
+ div {
580
+ border-color: var(--primary) transparent transparent transparent;
581
+ }
582
+ }
493
583
  }
494
584
 
495
585
  &.btn-color-grey {
496
586
  color: var(--text-600);
587
+
588
+ .bn-spinner {
589
+ div {
590
+ border-color: var(--text-600) transparent transparent transparent;
591
+ }
592
+ }
497
593
  }
498
594
 
499
595
  &.btn-color-link {
@@ -506,6 +602,12 @@
506
602
  &:focus-visible {
507
603
  outline: 'none';
508
604
  }
605
+
606
+ .bn-spinner {
607
+ div {
608
+ border-color: var(--primary) transparent transparent transparent;
609
+ }
610
+ }
509
611
  }
510
612
 
511
613
  &:not(.disabled):not([disabled]):not(.disable):not(:disabled):hover {
package/fantasyButton.less CHANGED
@@ -1,4 +1,6 @@
1
1
  .fantasy-btn {
2
+ box-sizing: border-box;
3
+
2
4
  &.btn {
3
5
  padding: 0;
4
6
  border: 0 !important;
@@ -62,6 +64,7 @@
62
64
  flex-shrink: 0;
63
65
  position: relative;
64
66
  .border-radius(@btn-brd-radius 0 0 @btn-brd-radius);
67
+ box-sizing: border-box;
65
68
 
66
69
  @media @lg {
67
70
  padding-top: .8rem;