@nuvoui/core 1.5.1 → 1.5.3

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 (17) hide show
  1. package/dist/nuvoui.css +43 -41
  2. package/dist/nuvoui.css.map +1 -1
  3. package/dist/nuvoui.min.css +1 -1
  4. package/dist/nuvoui.min.css.map +1 -1
  5. package/package.json +8 -8
  6. package/src/styles/base/_base.scss +1 -1
  7. package/src/styles/components/_tooltips.scss +24 -24
  8. package/src/styles/functions/_colors.scss +26 -5
  9. package/src/styles/functions/_math.scss +57 -39
  10. package/src/styles/functions/_units.scss +17 -18
  11. package/src/styles/layouts/_container.scss +2 -4
  12. package/src/styles/mixins-map.scss +1 -1
  13. package/src/styles/utilities/_animations.scss +16 -4
  14. package/src/styles/utilities/_backdrop-filters.scss +4 -1
  15. package/src/styles/utilities/_colors.scss +4 -1
  16. package/src/styles/utilities/_typography.scss +4 -1
  17. package/src/styles/utilities/_z-index.scss +4 -1
package/dist/nuvoui.css CHANGED
@@ -187,8 +187,6 @@
187
187
  font-family: var(--font-family-base);
188
188
  cursor: pointer;
189
189
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
190
- background-color: var(--button-bg-color, #007bff);
191
- color: var(--button-text-color, #fff);
192
190
  }
193
191
  button:focus {
194
192
  outline: none;
@@ -198,6 +196,10 @@
198
196
  color: #a0a0a0;
199
197
  cursor: not-allowed;
200
198
  }
199
+ button {
200
+ background-color: var(--button-bg-color, #007bff);
201
+ color: var(--button-text-color, #fff);
202
+ }
201
203
  button:hover {
202
204
  background-color: var(--button-bg-color-hover, #0056b3);
203
205
  }
@@ -279,7 +281,7 @@
279
281
  padding: 0 !important;
280
282
  margin: -1px !important;
281
283
  overflow: hidden !important;
282
- clip: rect(0, 0, 0, 0) !important;
284
+ clip-path: inset(50%) !important;
283
285
  white-space: nowrap !important;
284
286
  border: 0 !important;
285
287
  }
@@ -3330,15 +3332,15 @@
3330
3332
 
3331
3333
  @layer components {
3332
3334
  :root {
3333
- --tooltip-bg: rgba(17 17 17 / 90%);
3335
+ --tooltip-bg: rgb(17 17 17 / 90%);
3334
3336
  --tooltip-shadow-color: rgb(0 0 0 / 20%);
3335
3337
  --tooltip-text-color: #fff;
3336
- --microtip-transition-duration: 0.18s;
3337
- --microtip-transition-easing: ease-in-out;
3338
- --microtip-transition-delay: 0s;
3339
- --microtip-font-size: 13px;
3340
- --microtip-font-weight: normal;
3341
- --microtip-text-transform: none;
3338
+ --tooltip-transition-duration: 0.18s;
3339
+ --tooltip-transition-easing: ease-in-out;
3340
+ --tooltip-transition-delay: 0s;
3341
+ --tooltip-font-size: 13px;
3342
+ --tooltip-font-weight: normal;
3343
+ --tooltip-text-transform: none;
3342
3344
  --tooltip-small-width: 80px;
3343
3345
  --tooltip-medium-width: 150px;
3344
3346
  --tooltip-large-width: 260px;
@@ -3353,7 +3355,7 @@
3353
3355
  will-change: transform;
3354
3356
  opacity: 0;
3355
3357
  pointer-events: none;
3356
- transition: opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay), transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
3358
+ transition: opacity var(--tooltip-transition-duration) var(--tooltip-transition-easing) var(--tooltip-transition-delay), transform var(--tooltip-transition-duration) var(--tooltip-transition-easing) var(--tooltip-transition-delay);
3357
3359
  position: absolute;
3358
3360
  box-sizing: border-box;
3359
3361
  z-index: 10;
@@ -3369,9 +3371,9 @@
3369
3371
  border-radius: var(--tooltip-border-radius);
3370
3372
  color: var(--tooltip-text-color);
3371
3373
  content: attr(data-tooltip);
3372
- font-size: var(--microtip-font-size);
3373
- font-weight: var(--microtip-font-weight);
3374
- text-transform: var(--microtip-text-transform);
3374
+ font-size: var(--tooltip-font-size);
3375
+ font-weight: var(--tooltip-font-weight);
3376
+ text-transform: var(--tooltip-text-transform);
3375
3377
  padding: 0.5em 1em;
3376
3378
  white-space: nowrap;
3377
3379
  box-sizing: content-box;
@@ -3380,7 +3382,7 @@
3380
3382
  opacity: 1;
3381
3383
  pointer-events: auto;
3382
3384
  }
3383
- [role~=tooltip][data-microtip-position|=top]::before {
3385
+ [role~=tooltip][data-tooltip-position|=top]::before {
3384
3386
  border-left: 9px solid transparent;
3385
3387
  border-right: 9px solid transparent;
3386
3388
  border-top: 6px solid var(--tooltip-bg);
@@ -3392,33 +3394,33 @@
3392
3394
  left: 50%;
3393
3395
  z-index: 999;
3394
3396
  }
3395
- [role~=tooltip][data-microtip-position|=top]::after {
3397
+ [role~=tooltip][data-tooltip-position|=top]::after {
3396
3398
  margin-bottom: 11px;
3397
3399
  transform: translate3d(-50%, 0, 0);
3398
3400
  bottom: 100%;
3399
3401
  left: 50%;
3400
3402
  }
3401
- [role~=tooltip][data-microtip-position|=top]:hover::before {
3403
+ [role~=tooltip][data-tooltip-position|=top]:hover::before {
3402
3404
  transform: translate3d(-50%, -5px, 0);
3403
3405
  }
3404
- [role~=tooltip][data-microtip-position|=top]:hover::after {
3406
+ [role~=tooltip][data-tooltip-position|=top]:hover::after {
3405
3407
  transform: translate3d(-50%, -5px, 0);
3406
3408
  }
3407
- [role~=tooltip][data-microtip-position=top-left]::after {
3409
+ [role~=tooltip][data-tooltip-position=top-left]::after {
3408
3410
  transform: translate3d(calc(-100% + 16px), 0, 0);
3409
3411
  bottom: 100%;
3410
3412
  }
3411
- [role~=tooltip][data-microtip-position=top-left]:hover::after {
3413
+ [role~=tooltip][data-tooltip-position=top-left]:hover::after {
3412
3414
  transform: translate3d(calc(-100% + 16px), -5px, 0);
3413
3415
  }
3414
- [role~=tooltip][data-microtip-position=top-right]::after {
3416
+ [role~=tooltip][data-tooltip-position=top-right]::after {
3415
3417
  transform: translate3d(calc(0% - 16px), 0, 0);
3416
3418
  bottom: 100%;
3417
3419
  }
3418
- [role~=tooltip][data-microtip-position=top-right]:hover::after {
3420
+ [role~=tooltip][data-tooltip-position=top-right]:hover::after {
3419
3421
  transform: translate3d(calc(0% - 16px), -5px, 0);
3420
3422
  }
3421
- [role~=tooltip][data-microtip-position|=bottom]::before {
3423
+ [role~=tooltip][data-tooltip-position|=bottom]::before {
3422
3424
  border-left: 9px solid transparent;
3423
3425
  border-right: 9px solid transparent;
3424
3426
  border-bottom: 6px solid var(--tooltip-bg);
@@ -3432,40 +3434,40 @@
3432
3434
  top: 100%;
3433
3435
  z-index: 999;
3434
3436
  }
3435
- [role~=tooltip][data-microtip-position|=bottom]::after {
3437
+ [role~=tooltip][data-tooltip-position|=bottom]::after {
3436
3438
  margin-top: 11px;
3437
3439
  transform: translate3d(-50%, -10px, 0);
3438
3440
  top: 100%;
3439
3441
  left: 50%;
3440
3442
  }
3441
- [role~=tooltip][data-microtip-position|=bottom]:hover::before {
3443
+ [role~=tooltip][data-tooltip-position|=bottom]:hover::before {
3442
3444
  transform: translate3d(-50%, 0, 0);
3443
3445
  }
3444
- [role~=tooltip][data-microtip-position|=bottom]:hover::after {
3446
+ [role~=tooltip][data-tooltip-position|=bottom]:hover::after {
3445
3447
  transform: translate3d(-50%, 0, 0);
3446
3448
  }
3447
- [role~=tooltip][data-microtip-position=bottom-left]::after {
3449
+ [role~=tooltip][data-tooltip-position=bottom-left]::after {
3448
3450
  transform: translate3d(calc(-100% + 16px), -10px, 0);
3449
3451
  top: 100%;
3450
3452
  }
3451
- [role~=tooltip][data-microtip-position=bottom-left]:hover::after {
3453
+ [role~=tooltip][data-tooltip-position=bottom-left]:hover::after {
3452
3454
  transform: translate3d(calc(-100% + 16px), 0, 0);
3453
3455
  }
3454
- [role~=tooltip][data-microtip-position=bottom-right]::after {
3456
+ [role~=tooltip][data-tooltip-position=bottom-right]::after {
3455
3457
  transform: translate3d(calc(0% - 16px), -10px, 0);
3456
3458
  top: 100%;
3457
3459
  }
3458
- [role~=tooltip][data-microtip-position=bottom-right]:hover::after {
3460
+ [role~=tooltip][data-tooltip-position=bottom-right]:hover::after {
3459
3461
  transform: translate3d(calc(0% - 16px), 0, 0);
3460
3462
  }
3461
- [role~=tooltip][data-microtip-position=left]::before, [role~=tooltip][data-microtip-position=left]::after {
3463
+ [role~=tooltip][data-tooltip-position=left]::before, [role~=tooltip][data-tooltip-position=left]::after {
3462
3464
  inset: auto auto auto 100%;
3463
3465
  left: auto;
3464
3466
  right: 100%;
3465
3467
  top: 50%;
3466
3468
  transform: translate3d(10px, -50%, 0);
3467
3469
  }
3468
- [role~=tooltip][data-microtip-position=left]::before {
3470
+ [role~=tooltip][data-tooltip-position=left]::before {
3469
3471
  border-top: 9px solid transparent;
3470
3472
  border-bottom: 9px solid transparent;
3471
3473
  border-left: 6px solid var(--tooltip-bg);
@@ -3475,19 +3477,19 @@
3475
3477
  margin-bottom: 0;
3476
3478
  z-index: 999;
3477
3479
  }
3478
- [role~=tooltip][data-microtip-position=left]::after {
3480
+ [role~=tooltip][data-tooltip-position=left]::after {
3479
3481
  margin-right: 11px;
3480
3482
  }
3481
- [role~=tooltip][data-microtip-position=left]:hover::before, [role~=tooltip][data-microtip-position=left]:hover::after {
3483
+ [role~=tooltip][data-tooltip-position=left]:hover::before, [role~=tooltip][data-tooltip-position=left]:hover::after {
3482
3484
  transform: translate3d(0, -50%, 0);
3483
3485
  }
3484
- [role~=tooltip][data-microtip-position=right]::before, [role~=tooltip][data-microtip-position=right]::after {
3486
+ [role~=tooltip][data-tooltip-position=right]::before, [role~=tooltip][data-tooltip-position=right]::after {
3485
3487
  bottom: auto;
3486
3488
  left: 100%;
3487
3489
  top: 50%;
3488
3490
  transform: translate3d(-10px, -50%, 0);
3489
3491
  }
3490
- [role~=tooltip][data-microtip-position=right]::before {
3492
+ [role~=tooltip][data-tooltip-position=right]::before {
3491
3493
  border-top: 9px solid transparent;
3492
3494
  border-bottom: 9px solid transparent;
3493
3495
  border-right: 6px solid var(--tooltip-bg);
@@ -3497,21 +3499,21 @@
3497
3499
  margin-left: 5px;
3498
3500
  z-index: 999;
3499
3501
  }
3500
- [role~=tooltip][data-microtip-position=right]::after {
3502
+ [role~=tooltip][data-tooltip-position=right]::after {
3501
3503
  margin-left: 11px;
3502
3504
  }
3503
- [role~=tooltip][data-microtip-position=right]:hover::before, [role~=tooltip][data-microtip-position=right]:hover::after {
3505
+ [role~=tooltip][data-tooltip-position=right]:hover::before, [role~=tooltip][data-tooltip-position=right]:hover::after {
3504
3506
  transform: translate3d(0, -50%, 0);
3505
3507
  }
3506
- [role~=tooltip][data-microtip-size=small]::after {
3508
+ [role~=tooltip][data-tooltip-size=small]::after {
3507
3509
  white-space: initial;
3508
3510
  width: var(--tooltip-small-width);
3509
3511
  }
3510
- [role~=tooltip][data-microtip-size=medium]::after {
3512
+ [role~=tooltip][data-tooltip-size=medium]::after {
3511
3513
  white-space: initial;
3512
3514
  width: var(--tooltip-medium-width);
3513
3515
  }
3514
- [role~=tooltip][data-microtip-size=large]::after {
3516
+ [role~=tooltip][data-tooltip-size=large]::after {
3515
3517
  white-space: initial;
3516
3518
  width: var(--tooltip-large-width);
3517
3519
  }