@redseed/redseed-ui-tailwindcss 7.12.4 → 7.13.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.
- package/components/tooltip.css +102 -0
- package/components.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
.rsui-tooltip {
|
|
2
|
+
@apply relative inline-flex items-center z-50;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.rsui-tooltip__overlay {
|
|
6
|
+
@apply fixed inset-0 z-40;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Trigger — default circular icon button */
|
|
10
|
+
.rsui-tooltip__trigger {
|
|
11
|
+
@apply inline-flex items-center justify-center rounded-full cursor-pointer;
|
|
12
|
+
@apply border-none transition-colors duration-150;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.rsui-tooltip__trigger--xs {
|
|
16
|
+
@apply size-4 [&>svg]:size-4;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rsui-tooltip__trigger--sm {
|
|
20
|
+
@apply size-5 [&>svg]:size-5;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rsui-tooltip__trigger--md {
|
|
24
|
+
@apply size-6 [&>svg]:size-6;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Trigger color variants — icon only, no background or border */
|
|
28
|
+
.rsui-tooltip__trigger--secondary {
|
|
29
|
+
@apply text-text-secondary;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.rsui-tooltip__trigger--info {
|
|
33
|
+
@apply text-text-info;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.rsui-tooltip__trigger--success {
|
|
37
|
+
@apply text-text-success;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.rsui-tooltip__trigger--warning {
|
|
41
|
+
@apply text-text-warning;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.rsui-tooltip__trigger--error {
|
|
45
|
+
@apply text-text-error;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.rsui-tooltip__trigger--skillscheck {
|
|
49
|
+
@apply text-brand-500;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.rsui-tooltip__trigger--coach {
|
|
53
|
+
@apply text-redseed-blue-500;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Content panel */
|
|
57
|
+
.rsui-tooltip__content {
|
|
58
|
+
@apply absolute z-50 px-3 py-2 w-max max-w-60;
|
|
59
|
+
@apply text-sm text-text-on-color bg-background-primary-contrast rounded-lg shadow-lg;
|
|
60
|
+
@apply pointer-events-none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.rsui-tooltip__content--top {
|
|
64
|
+
@apply bottom-full left-1/2 -translate-x-1/2 mb-2;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.rsui-tooltip__content--bottom {
|
|
68
|
+
@apply top-full left-1/2 -translate-x-1/2 mt-2;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rsui-tooltip__content--left {
|
|
72
|
+
@apply right-full top-1/2 -translate-y-1/2 mr-2;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.rsui-tooltip__content--right {
|
|
76
|
+
@apply left-full top-1/2 -translate-y-1/2 ml-2;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Transitions */
|
|
80
|
+
.rsui-tooltip__transition--enter-active {
|
|
81
|
+
@apply transition ease-out duration-150;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.rsui-tooltip__transition--enter-from {
|
|
85
|
+
@apply opacity-0 scale-95;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.rsui-tooltip__transition--enter-to {
|
|
89
|
+
@apply opacity-100 scale-100;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.rsui-tooltip__transition--leave-active {
|
|
93
|
+
@apply transition ease-in duration-100;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.rsui-tooltip__transition--leave-from {
|
|
97
|
+
@apply opacity-100 scale-100;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.rsui-tooltip__transition--leave-to {
|
|
101
|
+
@apply opacity-0 scale-95;
|
|
102
|
+
}
|
package/components.css
CHANGED
|
@@ -97,4 +97,5 @@ Please be careful when adding new components and updating the order.
|
|
|
97
97
|
@import './components/td.css';
|
|
98
98
|
@import './components/td_user.css';
|
|
99
99
|
@import './components/toggle.css';
|
|
100
|
+
@import './components/tooltip.css';
|
|
100
101
|
@import './components/two_column_layout.css';
|