@open-condo/ui 2.15.1 → 2.16.0

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 (26) hide show
  1. package/dist/components/Button/button.d.ts +1 -0
  2. package/dist/components/Button/button.d.ts.map +1 -1
  3. package/dist/components/Card/_utils/index.d.ts +1 -0
  4. package/dist/components/Card/_utils/index.d.ts.map +1 -1
  5. package/dist/components/Card/button/cardButton.d.ts +2 -2
  6. package/dist/components/Card/button/cardButton.d.ts.map +1 -1
  7. package/dist/components/Card/checkbox/cardCheckbox.d.ts +2 -2
  8. package/dist/components/Card/checkbox/cardCheckbox.d.ts.map +1 -1
  9. package/dist/components/Input/input.d.ts +1 -0
  10. package/dist/components/Input/input.d.ts.map +1 -1
  11. package/dist/components/Modal/modal.d.ts +1 -1
  12. package/dist/components/Modal/modal.d.ts.map +1 -1
  13. package/dist/components/ProgressIndicator/progressIndicator.d.ts +1 -1
  14. package/dist/components/ProgressIndicator/progressIndicator.d.ts.map +1 -1
  15. package/dist/components/Tooltip/tooltip.d.ts +1 -2
  16. package/dist/components/Tooltip/tooltip.d.ts.map +1 -1
  17. package/dist/components/Tour/tourStep.d.ts +2 -2
  18. package/dist/components/Tour/tourStep.d.ts.map +1 -1
  19. package/dist/components/_utils/analytics.d.ts +6 -2
  20. package/dist/components/_utils/analytics.d.ts.map +1 -1
  21. package/dist/index.js +90 -17
  22. package/dist/style-vars/variables.css +1 -1
  23. package/dist/style-vars/variables.less +1 -1
  24. package/dist/styles.css +77 -35
  25. package/dist/styles.min.css +1 -1
  26. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3291,10 +3291,11 @@ a.condo-btn-sm {
3291
3291
  .condo-btn span + span {
3292
3292
  margin-left: 8px;
3293
3293
  }
3294
- .condo-btn.focus-visible::after {
3294
+ .condo-btn.focus-visible::after,
3295
+ .condo-btn-focus::after {
3295
3296
  box-sizing: border-box;
3296
3297
  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
3297
- border: 2px solid transparent;
3298
+ border: 4px solid transparent;
3298
3299
  opacity: 1;
3299
3300
  -webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
3300
3301
  mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
@@ -3303,10 +3304,11 @@ a.condo-btn-sm {
3303
3304
  -webkit-mask-composite: xor;
3304
3305
  mask-composite: exclude;
3305
3306
  }
3306
- .condo-btn.focus-visible::after {
3307
+ .condo-btn.focus-visible::after,
3308
+ .condo-btn-focus::after {
3307
3309
  box-sizing: border-box;
3308
3310
  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
3309
- border: 2px solid transparent;
3311
+ border: 4px solid transparent;
3310
3312
  opacity: 1;
3311
3313
  -webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
3312
3314
  mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
@@ -3317,10 +3319,11 @@ a.condo-btn-sm {
3317
3319
  -webkit-mask-composite: xor;
3318
3320
  mask-composite: exclude;
3319
3321
  }
3320
- .condo-btn:focus-visible::after {
3322
+ .condo-btn:focus-visible::after,
3323
+ .condo-btn-focus::after {
3321
3324
  box-sizing: border-box;
3322
3325
  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
3323
- border: 2px solid transparent;
3326
+ border: 4px solid transparent;
3324
3327
  opacity: 1;
3325
3328
  -webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
3326
3329
  mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
@@ -3329,27 +3332,29 @@ a.condo-btn-sm {
3329
3332
  -webkit-mask-composite: xor;
3330
3333
  mask-composite: exclude;
3331
3334
  }
3332
- .condo-btn-primary:focus::after {
3335
+ .condo-btn-primary:focus::after,
3336
+ .condo-btn-primary.condo-btn-focus::after {
3333
3337
  position: absolute;
3334
- top: -2px;
3335
- right: -2px;
3336
- bottom: -2px;
3337
- left: -2px;
3338
+ top: -4px;
3339
+ right: -4px;
3340
+ bottom: -4px;
3341
+ left: -4px;
3338
3342
  display: block;
3339
3343
  border-radius: inherit;
3340
3344
  content: "";
3341
- border-radius: 10px;
3345
+ border-radius: 12px;
3342
3346
  }
3343
- .condo-btn-secondary:focus::after {
3347
+ .condo-btn-secondary:focus::after,
3348
+ .condo-btn-secondary.condo-btn-focus::after {
3344
3349
  position: absolute;
3345
- top: -3px;
3346
- right: -3px;
3347
- bottom: -3px;
3348
- left: -3px;
3350
+ top: -5px;
3351
+ right: -5px;
3352
+ bottom: -5px;
3353
+ left: -5px;
3349
3354
  display: block;
3350
3355
  border-radius: inherit;
3351
3356
  content: "";
3352
- border-radius: 10px;
3357
+ border-radius: 12px;
3353
3358
  }
3354
3359
  .condo-btn-primary {
3355
3360
  box-sizing: border-box;
@@ -3377,7 +3382,8 @@ a.condo-btn-sm {
3377
3382
  opacity: 0;
3378
3383
  transition: opacity 0.15s ease-in-out;
3379
3384
  }
3380
- .condo-btn-primary:focus {
3385
+ .condo-btn-primary:focus,
3386
+ .condo-btn-primary-focus {
3381
3387
  background: #222;
3382
3388
  }
3383
3389
  .condo-btn-primary:hover {
@@ -3394,19 +3400,22 @@ a.condo-btn-sm {
3394
3400
  }
3395
3401
  .condo-btn-primary.condo-btn-stateless:focus,
3396
3402
  .condo-btn-primary.condo-btn-stateless:hover,
3397
- .condo-btn-primary.condo-btn-stateless:active {
3403
+ .condo-btn-primary.condo-btn-stateless:active,
3404
+ .condo-btn-primary.condo-btn-stateless-focus {
3398
3405
  background: #222;
3399
3406
  }
3400
3407
  .condo-btn-primary.condo-btn-stateless:focus::before,
3401
3408
  .condo-btn-primary.condo-btn-stateless:hover::before,
3402
- .condo-btn-primary.condo-btn-stateless:active::before {
3409
+ .condo-btn-primary.condo-btn-stateless:active::before,
3410
+ .condo-btn-primary.condo-btn-stateless-focus::before {
3403
3411
  opacity: 0;
3404
3412
  }
3405
3413
  .condo-btn-primary.condo-btn-dangerous {
3406
3414
  background: #ff3b30;
3407
3415
  transition: background 0.15s ease-in-out;
3408
3416
  }
3409
- .condo-btn-primary.condo-btn-dangerous:focus {
3417
+ .condo-btn-primary.condo-btn-dangerous:focus,
3418
+ .condo-btn-primary.condo-btn-dangerous-focus {
3410
3419
  background: #ff3b30;
3411
3420
  }
3412
3421
  .condo-btn-primary.condo-btn-dangerous:hover {
@@ -3416,6 +3425,7 @@ a.condo-btn-sm {
3416
3425
  background: #ff3b30;
3417
3426
  }
3418
3427
  .condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:focus,
3428
+ .condo-btn-primary.condo-btn-dangerous.condo-btn-stateless-focus,
3419
3429
  .condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:hover,
3420
3430
  .condo-btn-primary.condo-btn-dangerous.condo-btn-stateless:active {
3421
3431
  background: #ff3b30;
@@ -3430,7 +3440,8 @@ a.condo-btn-sm {
3430
3440
  .condo-btn-primary.condo-btn-dangerous:disabled,
3431
3441
  .condo-btn-primary.condo-btn-dangerous:disabled:hover,
3432
3442
  .condo-btn-primary.condo-btn-dangerous:disabled:active,
3433
- .condo-btn-primary.condo-btn-dangerous:disabled:focus {
3443
+ .condo-btn-primary.condo-btn-dangerous:disabled:focus,
3444
+ .condo-btn-primary-focus:disabled {
3434
3445
  color: #fff;
3435
3446
  background: #222;
3436
3447
  opacity: 0.5;
@@ -3442,7 +3453,8 @@ a.condo-btn-sm {
3442
3453
  .condo-btn-primary.condo-btn-dangerous:disabled::before,
3443
3454
  .condo-btn-primary.condo-btn-dangerous:disabled:hover::before,
3444
3455
  .condo-btn-primary.condo-btn-dangerous:disabled:active::before,
3445
- .condo-btn-primary.condo-btn-dangerous:disabled:focus::before {
3456
+ .condo-btn-primary.condo-btn-dangerous:disabled:focus::before,
3457
+ .condo-btn-primary-focus:disabled::before {
3446
3458
  opacity: 0;
3447
3459
  }
3448
3460
  .condo-btn-secondary {
@@ -3466,7 +3478,8 @@ a.condo-btn-sm {
3466
3478
  background: transparent;
3467
3479
  }
3468
3480
  .condo-btn-secondary,
3469
- .condo-btn-secondary:focus {
3481
+ .condo-btn-secondary:focus,
3482
+ .condo-btn-secondary-focus {
3470
3483
  background: transparent;
3471
3484
  border: 1px solid #707695;
3472
3485
  }
@@ -3533,7 +3546,8 @@ a.condo-btn-sm {
3533
3546
  transition: color 0.15s ease-out;
3534
3547
  }
3535
3548
  .condo-btn-secondary.condo-btn-dangerous::before,
3536
- .condo-btn-secondary.condo-btn-dangerous:focus::before {
3549
+ .condo-btn-secondary.condo-btn-dangerous:focus::before,
3550
+ .condo-btn-secondary.condo-btn-dangerous-focus::before {
3537
3551
  background: #ff3b30 border-box;
3538
3552
  }
3539
3553
  .condo-btn-secondary.condo-btn-dangerous:hover::before {
@@ -3544,23 +3558,27 @@ a.condo-btn-sm {
3544
3558
  }
3545
3559
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > span,
3546
3560
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > span,
3547
- .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > span {
3561
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > span,
3562
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless-focus > span {
3548
3563
  color: #ff3b30;
3549
3564
  transition: color 0.15s ease-out;
3550
3565
  }
3551
3566
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > span svg,
3552
3567
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > span svg,
3553
- .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > span svg {
3568
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > span svg,
3569
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless-focus > span svg {
3554
3570
  fill: currentcolor;
3555
3571
  }
3556
3572
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover > .condo-btn-text,
3557
3573
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active > .condo-btn-text,
3558
- .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > .condo-btn-text {
3574
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus > .condo-btn-text,
3575
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless-focus > .condo-btn-text {
3559
3576
  color: #ff3b30;
3560
3577
  transition: color 0.15s ease-out;
3561
3578
  }
3562
3579
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless::before,
3563
3580
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:focus::before,
3581
+ .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless-focus::before,
3564
3582
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:hover::before,
3565
3583
  .condo-btn-secondary.condo-btn-dangerous.condo-btn-stateless:active::before {
3566
3584
  background: #ff3b30 border-box;
@@ -3587,7 +3605,8 @@ a.condo-btn-sm {
3587
3605
  mask-composite: exclude;
3588
3606
  }
3589
3607
  .condo-btn-secondary::before,
3590
- .condo-btn-secondary:focus::before {
3608
+ .condo-btn-secondary:focus::before,
3609
+ .condo-btn-secondary-focus::before {
3591
3610
  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
3592
3611
  }
3593
3612
  .condo-btn-secondary:hover::before {
@@ -3641,7 +3660,8 @@ a.condo-btn-sm {
3641
3660
  .condo-btn-secondary.condo-btn-dangerous:disabled,
3642
3661
  .condo-btn-secondary.condo-btn-dangerous:disabled:hover,
3643
3662
  .condo-btn-secondary.condo-btn-dangerous:disabled:active,
3644
- .condo-btn-secondary.condo-btn-dangerous:disabled:focus {
3663
+ .condo-btn-secondary.condo-btn-dangerous:disabled:focus,
3664
+ .condo-btn-secondary.condo-btn-focus:disabled {
3645
3665
  background: transparent;
3646
3666
  border: 1px solid #707695;
3647
3667
  opacity: 0.5;
@@ -3652,7 +3672,8 @@ a.condo-btn-sm {
3652
3672
  .condo-btn-secondary.condo-btn-dangerous:disabled > span,
3653
3673
  .condo-btn-secondary.condo-btn-dangerous:disabled:hover > span,
3654
3674
  .condo-btn-secondary.condo-btn-dangerous:disabled:active > span,
3655
- .condo-btn-secondary.condo-btn-dangerous:disabled:focus > span {
3675
+ .condo-btn-secondary.condo-btn-dangerous:disabled:focus > span,
3676
+ .condo-btn-secondary.condo-btn-focus:disabled > span {
3656
3677
  color: #222;
3657
3678
  transition: color 0.15s ease-out;
3658
3679
  }
@@ -3662,7 +3683,8 @@ a.condo-btn-sm {
3662
3683
  .condo-btn-secondary.condo-btn-dangerous:disabled > span svg,
3663
3684
  .condo-btn-secondary.condo-btn-dangerous:disabled:hover > span svg,
3664
3685
  .condo-btn-secondary.condo-btn-dangerous:disabled:active > span svg,
3665
- .condo-btn-secondary.condo-btn-dangerous:disabled:focus > span svg {
3686
+ .condo-btn-secondary.condo-btn-dangerous:disabled:focus > span svg,
3687
+ .condo-btn-secondary.condo-btn-focus:disabled > span svg {
3666
3688
  fill: currentcolor;
3667
3689
  }
3668
3690
  .condo-btn-secondary:disabled:hover > .condo-btn-text,
@@ -3671,7 +3693,8 @@ a.condo-btn-sm {
3671
3693
  .condo-btn-secondary.condo-btn-dangerous:disabled > .condo-btn-text,
3672
3694
  .condo-btn-secondary.condo-btn-dangerous:disabled:hover > .condo-btn-text,
3673
3695
  .condo-btn-secondary.condo-btn-dangerous:disabled:active > .condo-btn-text,
3674
- .condo-btn-secondary.condo-btn-dangerous:disabled:focus > .condo-btn-text {
3696
+ .condo-btn-secondary.condo-btn-dangerous:disabled:focus > .condo-btn-text,
3697
+ .condo-btn-secondary.condo-btn-focus:disabled > .condo-btn-text {
3675
3698
  color: #222;
3676
3699
  transition: color 0.15s ease-out;
3677
3700
  }
@@ -3681,7 +3704,8 @@ a.condo-btn-sm {
3681
3704
  .condo-btn-secondary.condo-btn-dangerous:disabled::before,
3682
3705
  .condo-btn-secondary.condo-btn-dangerous:disabled:hover::before,
3683
3706
  .condo-btn-secondary.condo-btn-dangerous:disabled:active::before,
3684
- .condo-btn-secondary.condo-btn-dangerous:disabled:focus::before {
3707
+ .condo-btn-secondary.condo-btn-dangerous:disabled:focus::before,
3708
+ .condo-btn-secondary.condo-btn-focus:disabled::before {
3685
3709
  opacity: 0;
3686
3710
  }
3687
3711
  .condo-btn > .condo-btn-icon {
@@ -7746,6 +7770,24 @@ textarea.condo-input {
7746
7770
  line-height: 24px;
7747
7771
  letter-spacing: -0.01em;
7748
7772
  }
7773
+ .condo-input-with-suffix.condo-input-affix-wrapper {
7774
+ padding-right: 4px;
7775
+ }
7776
+ .condo-input-with-suffix.condo-input-affix-wrapper > .condo-input {
7777
+ padding-right: 4px;
7778
+ }
7779
+ .condo-input-with-suffix.condo-input-affix-wrapper > .condo-input-suffix {
7780
+ display: flex;
7781
+ align-items: center;
7782
+ justify-content: center;
7783
+ margin: -8px 0;
7784
+ padding: 8px 12px;
7785
+ color: #707695;
7786
+ font-weight: 600;
7787
+ font-size: 12px;
7788
+ background-color: #e1e5ed;
7789
+ border-radius: 0 4px 4px 0;
7790
+ }
7749
7791
  .condo-input:not(.condo-input-affix-wrapper .condo-input),
7750
7792
  .condo-input-affix-wrapper {
7751
7793
  box-sizing: border-box;