@nuvoui/core 1.5.2 → 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.
- package/dist/nuvoui.css +37 -37
- package/dist/nuvoui.min.css +1 -1
- package/dist/nuvoui.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/components/_tooltips.scss +23 -23
- package/src/styles/functions/_math.scss +56 -54
- package/src/styles/functions/_units.scss +17 -18
- package/src/styles/mixins-map.scss +1 -1
package/dist/nuvoui.css
CHANGED
|
@@ -3335,12 +3335,12 @@
|
|
|
3335
3335
|
--tooltip-bg: rgb(17 17 17 / 90%);
|
|
3336
3336
|
--tooltip-shadow-color: rgb(0 0 0 / 20%);
|
|
3337
3337
|
--tooltip-text-color: #fff;
|
|
3338
|
-
--
|
|
3339
|
-
--
|
|
3340
|
-
--
|
|
3341
|
-
--
|
|
3342
|
-
--
|
|
3343
|
-
--
|
|
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;
|
|
3344
3344
|
--tooltip-small-width: 80px;
|
|
3345
3345
|
--tooltip-medium-width: 150px;
|
|
3346
3346
|
--tooltip-large-width: 260px;
|
|
@@ -3355,7 +3355,7 @@
|
|
|
3355
3355
|
will-change: transform;
|
|
3356
3356
|
opacity: 0;
|
|
3357
3357
|
pointer-events: none;
|
|
3358
|
-
transition: opacity var(--
|
|
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);
|
|
3359
3359
|
position: absolute;
|
|
3360
3360
|
box-sizing: border-box;
|
|
3361
3361
|
z-index: 10;
|
|
@@ -3371,9 +3371,9 @@
|
|
|
3371
3371
|
border-radius: var(--tooltip-border-radius);
|
|
3372
3372
|
color: var(--tooltip-text-color);
|
|
3373
3373
|
content: attr(data-tooltip);
|
|
3374
|
-
font-size: var(--
|
|
3375
|
-
font-weight: var(--
|
|
3376
|
-
text-transform: var(--
|
|
3374
|
+
font-size: var(--tooltip-font-size);
|
|
3375
|
+
font-weight: var(--tooltip-font-weight);
|
|
3376
|
+
text-transform: var(--tooltip-text-transform);
|
|
3377
3377
|
padding: 0.5em 1em;
|
|
3378
3378
|
white-space: nowrap;
|
|
3379
3379
|
box-sizing: content-box;
|
|
@@ -3382,7 +3382,7 @@
|
|
|
3382
3382
|
opacity: 1;
|
|
3383
3383
|
pointer-events: auto;
|
|
3384
3384
|
}
|
|
3385
|
-
[role~=tooltip][data-
|
|
3385
|
+
[role~=tooltip][data-tooltip-position|=top]::before {
|
|
3386
3386
|
border-left: 9px solid transparent;
|
|
3387
3387
|
border-right: 9px solid transparent;
|
|
3388
3388
|
border-top: 6px solid var(--tooltip-bg);
|
|
@@ -3394,33 +3394,33 @@
|
|
|
3394
3394
|
left: 50%;
|
|
3395
3395
|
z-index: 999;
|
|
3396
3396
|
}
|
|
3397
|
-
[role~=tooltip][data-
|
|
3397
|
+
[role~=tooltip][data-tooltip-position|=top]::after {
|
|
3398
3398
|
margin-bottom: 11px;
|
|
3399
3399
|
transform: translate3d(-50%, 0, 0);
|
|
3400
3400
|
bottom: 100%;
|
|
3401
3401
|
left: 50%;
|
|
3402
3402
|
}
|
|
3403
|
-
[role~=tooltip][data-
|
|
3403
|
+
[role~=tooltip][data-tooltip-position|=top]:hover::before {
|
|
3404
3404
|
transform: translate3d(-50%, -5px, 0);
|
|
3405
3405
|
}
|
|
3406
|
-
[role~=tooltip][data-
|
|
3406
|
+
[role~=tooltip][data-tooltip-position|=top]:hover::after {
|
|
3407
3407
|
transform: translate3d(-50%, -5px, 0);
|
|
3408
3408
|
}
|
|
3409
|
-
[role~=tooltip][data-
|
|
3409
|
+
[role~=tooltip][data-tooltip-position=top-left]::after {
|
|
3410
3410
|
transform: translate3d(calc(-100% + 16px), 0, 0);
|
|
3411
3411
|
bottom: 100%;
|
|
3412
3412
|
}
|
|
3413
|
-
[role~=tooltip][data-
|
|
3413
|
+
[role~=tooltip][data-tooltip-position=top-left]:hover::after {
|
|
3414
3414
|
transform: translate3d(calc(-100% + 16px), -5px, 0);
|
|
3415
3415
|
}
|
|
3416
|
-
[role~=tooltip][data-
|
|
3416
|
+
[role~=tooltip][data-tooltip-position=top-right]::after {
|
|
3417
3417
|
transform: translate3d(calc(0% - 16px), 0, 0);
|
|
3418
3418
|
bottom: 100%;
|
|
3419
3419
|
}
|
|
3420
|
-
[role~=tooltip][data-
|
|
3420
|
+
[role~=tooltip][data-tooltip-position=top-right]:hover::after {
|
|
3421
3421
|
transform: translate3d(calc(0% - 16px), -5px, 0);
|
|
3422
3422
|
}
|
|
3423
|
-
[role~=tooltip][data-
|
|
3423
|
+
[role~=tooltip][data-tooltip-position|=bottom]::before {
|
|
3424
3424
|
border-left: 9px solid transparent;
|
|
3425
3425
|
border-right: 9px solid transparent;
|
|
3426
3426
|
border-bottom: 6px solid var(--tooltip-bg);
|
|
@@ -3434,40 +3434,40 @@
|
|
|
3434
3434
|
top: 100%;
|
|
3435
3435
|
z-index: 999;
|
|
3436
3436
|
}
|
|
3437
|
-
[role~=tooltip][data-
|
|
3437
|
+
[role~=tooltip][data-tooltip-position|=bottom]::after {
|
|
3438
3438
|
margin-top: 11px;
|
|
3439
3439
|
transform: translate3d(-50%, -10px, 0);
|
|
3440
3440
|
top: 100%;
|
|
3441
3441
|
left: 50%;
|
|
3442
3442
|
}
|
|
3443
|
-
[role~=tooltip][data-
|
|
3443
|
+
[role~=tooltip][data-tooltip-position|=bottom]:hover::before {
|
|
3444
3444
|
transform: translate3d(-50%, 0, 0);
|
|
3445
3445
|
}
|
|
3446
|
-
[role~=tooltip][data-
|
|
3446
|
+
[role~=tooltip][data-tooltip-position|=bottom]:hover::after {
|
|
3447
3447
|
transform: translate3d(-50%, 0, 0);
|
|
3448
3448
|
}
|
|
3449
|
-
[role~=tooltip][data-
|
|
3449
|
+
[role~=tooltip][data-tooltip-position=bottom-left]::after {
|
|
3450
3450
|
transform: translate3d(calc(-100% + 16px), -10px, 0);
|
|
3451
3451
|
top: 100%;
|
|
3452
3452
|
}
|
|
3453
|
-
[role~=tooltip][data-
|
|
3453
|
+
[role~=tooltip][data-tooltip-position=bottom-left]:hover::after {
|
|
3454
3454
|
transform: translate3d(calc(-100% + 16px), 0, 0);
|
|
3455
3455
|
}
|
|
3456
|
-
[role~=tooltip][data-
|
|
3456
|
+
[role~=tooltip][data-tooltip-position=bottom-right]::after {
|
|
3457
3457
|
transform: translate3d(calc(0% - 16px), -10px, 0);
|
|
3458
3458
|
top: 100%;
|
|
3459
3459
|
}
|
|
3460
|
-
[role~=tooltip][data-
|
|
3460
|
+
[role~=tooltip][data-tooltip-position=bottom-right]:hover::after {
|
|
3461
3461
|
transform: translate3d(calc(0% - 16px), 0, 0);
|
|
3462
3462
|
}
|
|
3463
|
-
[role~=tooltip][data-
|
|
3463
|
+
[role~=tooltip][data-tooltip-position=left]::before, [role~=tooltip][data-tooltip-position=left]::after {
|
|
3464
3464
|
inset: auto auto auto 100%;
|
|
3465
3465
|
left: auto;
|
|
3466
3466
|
right: 100%;
|
|
3467
3467
|
top: 50%;
|
|
3468
3468
|
transform: translate3d(10px, -50%, 0);
|
|
3469
3469
|
}
|
|
3470
|
-
[role~=tooltip][data-
|
|
3470
|
+
[role~=tooltip][data-tooltip-position=left]::before {
|
|
3471
3471
|
border-top: 9px solid transparent;
|
|
3472
3472
|
border-bottom: 9px solid transparent;
|
|
3473
3473
|
border-left: 6px solid var(--tooltip-bg);
|
|
@@ -3477,19 +3477,19 @@
|
|
|
3477
3477
|
margin-bottom: 0;
|
|
3478
3478
|
z-index: 999;
|
|
3479
3479
|
}
|
|
3480
|
-
[role~=tooltip][data-
|
|
3480
|
+
[role~=tooltip][data-tooltip-position=left]::after {
|
|
3481
3481
|
margin-right: 11px;
|
|
3482
3482
|
}
|
|
3483
|
-
[role~=tooltip][data-
|
|
3483
|
+
[role~=tooltip][data-tooltip-position=left]:hover::before, [role~=tooltip][data-tooltip-position=left]:hover::after {
|
|
3484
3484
|
transform: translate3d(0, -50%, 0);
|
|
3485
3485
|
}
|
|
3486
|
-
[role~=tooltip][data-
|
|
3486
|
+
[role~=tooltip][data-tooltip-position=right]::before, [role~=tooltip][data-tooltip-position=right]::after {
|
|
3487
3487
|
bottom: auto;
|
|
3488
3488
|
left: 100%;
|
|
3489
3489
|
top: 50%;
|
|
3490
3490
|
transform: translate3d(-10px, -50%, 0);
|
|
3491
3491
|
}
|
|
3492
|
-
[role~=tooltip][data-
|
|
3492
|
+
[role~=tooltip][data-tooltip-position=right]::before {
|
|
3493
3493
|
border-top: 9px solid transparent;
|
|
3494
3494
|
border-bottom: 9px solid transparent;
|
|
3495
3495
|
border-right: 6px solid var(--tooltip-bg);
|
|
@@ -3499,21 +3499,21 @@
|
|
|
3499
3499
|
margin-left: 5px;
|
|
3500
3500
|
z-index: 999;
|
|
3501
3501
|
}
|
|
3502
|
-
[role~=tooltip][data-
|
|
3502
|
+
[role~=tooltip][data-tooltip-position=right]::after {
|
|
3503
3503
|
margin-left: 11px;
|
|
3504
3504
|
}
|
|
3505
|
-
[role~=tooltip][data-
|
|
3505
|
+
[role~=tooltip][data-tooltip-position=right]:hover::before, [role~=tooltip][data-tooltip-position=right]:hover::after {
|
|
3506
3506
|
transform: translate3d(0, -50%, 0);
|
|
3507
3507
|
}
|
|
3508
|
-
[role~=tooltip][data-
|
|
3508
|
+
[role~=tooltip][data-tooltip-size=small]::after {
|
|
3509
3509
|
white-space: initial;
|
|
3510
3510
|
width: var(--tooltip-small-width);
|
|
3511
3511
|
}
|
|
3512
|
-
[role~=tooltip][data-
|
|
3512
|
+
[role~=tooltip][data-tooltip-size=medium]::after {
|
|
3513
3513
|
white-space: initial;
|
|
3514
3514
|
width: var(--tooltip-medium-width);
|
|
3515
3515
|
}
|
|
3516
|
-
[role~=tooltip][data-
|
|
3516
|
+
[role~=tooltip][data-tooltip-size=large]::after {
|
|
3517
3517
|
white-space: initial;
|
|
3518
3518
|
width: var(--tooltip-large-width);
|
|
3519
3519
|
}
|