ps-toolkit-ui 1.3.15 → 1.3.16
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/package.json +1 -1
- package/src/assets/styles/base.css +22 -15
package/package.json
CHANGED
|
@@ -491,16 +491,9 @@ form{
|
|
|
491
491
|
}
|
|
492
492
|
.f-r{float:right!important}.f-l{float:left!important}.f-u{float:unset!important}
|
|
493
493
|
|
|
494
|
-
[data-tooltip]:not([data-tooltip='']) {
|
|
495
|
-
width: 100%;
|
|
496
|
-
height: 100%;
|
|
497
|
-
position: relative;
|
|
498
|
-
z-index: 10;
|
|
499
|
-
}
|
|
500
|
-
|
|
501
494
|
/* Positioning and visibility settings of the tooltip */
|
|
502
|
-
[data-tooltip]:
|
|
503
|
-
[data-tooltip]:
|
|
495
|
+
[data-tooltip]:before,
|
|
496
|
+
[data-tooltip]:after {
|
|
504
497
|
position: absolute;
|
|
505
498
|
visibility: hidden;
|
|
506
499
|
opacity: 0;
|
|
@@ -512,7 +505,7 @@ form{
|
|
|
512
505
|
}
|
|
513
506
|
|
|
514
507
|
/* The actual tooltip with a dynamic width */
|
|
515
|
-
[data-tooltip]:
|
|
508
|
+
[data-tooltip]:before {
|
|
516
509
|
content: attr(data-tooltip);
|
|
517
510
|
padding: 0 10px;
|
|
518
511
|
line-height: 30px;
|
|
@@ -531,7 +524,7 @@ form{
|
|
|
531
524
|
}
|
|
532
525
|
|
|
533
526
|
/* Tooltip arrow */
|
|
534
|
-
[data-tooltip]:
|
|
527
|
+
[data-tooltip]:after {
|
|
535
528
|
content: '';
|
|
536
529
|
border-style: solid;
|
|
537
530
|
border-width: 5px 5px 0px 5px;
|
|
@@ -545,22 +538,36 @@ form{
|
|
|
545
538
|
}
|
|
546
539
|
|
|
547
540
|
/* Tooltip becomes visible at hover */
|
|
548
|
-
[data-tooltip]:
|
|
549
|
-
[data-tooltip]:
|
|
541
|
+
[data-tooltip]:hover:before,
|
|
542
|
+
[data-tooltip]:hover:after {
|
|
550
543
|
visibility: visible;
|
|
551
544
|
opacity: 1;
|
|
552
545
|
}
|
|
553
546
|
/* Scales from 0.5 to 1 -> grow effect */
|
|
554
|
-
[data-tooltip]:
|
|
547
|
+
[data-tooltip]:hover:before {
|
|
555
548
|
transition-delay: 0.3s;
|
|
556
549
|
transform: translate(-50%, -5px) scale(1);
|
|
557
550
|
}
|
|
558
551
|
/* Slide down effect only on mouseenter (NOT on mouseleave) */
|
|
559
|
-
[data-tooltip]:
|
|
552
|
+
[data-tooltip]:hover:after {
|
|
560
553
|
transition-delay: 0.5s; /* Starting after the grow effect */
|
|
561
554
|
transition-duration: 0.2s;
|
|
562
555
|
transform: translateX(-50%) scaleY(1);
|
|
563
556
|
}
|
|
557
|
+
/*
|
|
558
|
+
That's it.
|
|
559
|
+
*/
|
|
560
|
+
|
|
561
|
+
|
|
562
|
+
|
|
563
|
+
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
/*
|
|
567
|
+
If you want some adjustability
|
|
568
|
+
here are some orientation settings you can use:
|
|
569
|
+
*/
|
|
570
|
+
|
|
564
571
|
/* LEFT */
|
|
565
572
|
/* Tooltip + arrow */
|
|
566
573
|
[data-tooltip-location="left"]:before,
|