@idds/styles 1.0.32 → 1.0.34
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/components/tooltip.css +54 -38
package/package.json
CHANGED
|
@@ -23,20 +23,24 @@
|
|
|
23
23
|
/* Prevent clipping by any parent container */
|
|
24
24
|
transform: translateZ(0);
|
|
25
25
|
will-change: transform;
|
|
26
|
+
/* Create new stacking context to ensure z-index works */
|
|
27
|
+
isolation: isolate;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
/* Basic Tooltip Bubble */
|
|
29
31
|
.ina-tooltip__bubble {
|
|
30
|
-
background-color: var(--ina-
|
|
31
|
-
color: var(--ina-
|
|
32
|
+
background-color: var(--ina-black, var(--ina-neutral-900));
|
|
33
|
+
color: var(--ina-white, var(--ina-neutral-25));
|
|
32
34
|
pointer-events: auto;
|
|
33
|
-
font-size:
|
|
34
|
-
font-weight:
|
|
35
|
-
line-height:
|
|
36
|
-
padding:
|
|
37
|
-
border-radius:
|
|
35
|
+
font-size: var(--ina-font-xs);
|
|
36
|
+
font-weight: var(--ina-font-medium);
|
|
37
|
+
line-height: var(--ina-line-height-xs);
|
|
38
|
+
padding: var(--ina-spacing-3);
|
|
39
|
+
border-radius: var(--ina-radius-lg);
|
|
38
40
|
white-space: nowrap;
|
|
39
|
-
max-width:
|
|
41
|
+
max-width: 320px;
|
|
42
|
+
box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
43
|
+
0 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
.ina-tooltip__bubble--basic {
|
|
@@ -48,14 +52,29 @@
|
|
|
48
52
|
.ina-tooltip__card {
|
|
49
53
|
position: relative;
|
|
50
54
|
pointer-events: auto;
|
|
51
|
-
border-radius:
|
|
52
|
-
box-shadow: 0 12px 16px -4px rgba(
|
|
53
|
-
0 4px 6px -2px rgba(
|
|
55
|
+
border-radius: var(--ina-radius-lg);
|
|
56
|
+
box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
57
|
+
0 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
54
58
|
overflow: hidden;
|
|
55
59
|
width: 320px;
|
|
56
60
|
display: flex;
|
|
57
61
|
flex-direction: column;
|
|
58
62
|
}
|
|
63
|
+
@media (max-width: 639px) {
|
|
64
|
+
.ina-tooltip__card {
|
|
65
|
+
width: 280px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
@media (max-width: 480px) {
|
|
69
|
+
.ina-tooltip__card {
|
|
70
|
+
width: 240px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
@media (max-width: 320px) {
|
|
74
|
+
.ina-tooltip__card {
|
|
75
|
+
width: 200px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
59
78
|
|
|
60
79
|
.ina-tooltip__card--light {
|
|
61
80
|
background-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
@@ -64,7 +83,7 @@
|
|
|
64
83
|
|
|
65
84
|
.ina-tooltip__card--dark {
|
|
66
85
|
background-color: var(--ina-neutral-900, var(--Neutral-900));
|
|
67
|
-
color: var(--ina-
|
|
86
|
+
color: var(--ina-white, var(--ina-neutral-25));
|
|
68
87
|
}
|
|
69
88
|
|
|
70
89
|
.ina-tooltip__card--media {
|
|
@@ -80,10 +99,7 @@
|
|
|
80
99
|
width: 24px;
|
|
81
100
|
height: 24px;
|
|
82
101
|
border-radius: 50%;
|
|
83
|
-
background-color: var(
|
|
84
|
-
--ina-background-secondary,
|
|
85
|
-
var(--Background-Secondary)
|
|
86
|
-
);
|
|
102
|
+
background-color: var(--ina-background-secondary, var(--ina-neutral-50));
|
|
87
103
|
border: none;
|
|
88
104
|
cursor: pointer;
|
|
89
105
|
display: flex;
|
|
@@ -95,16 +111,16 @@
|
|
|
95
111
|
}
|
|
96
112
|
|
|
97
113
|
.ina-tooltip__close:hover {
|
|
98
|
-
background-color: var(--ina-background-tertiary, var(--
|
|
114
|
+
background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
|
|
99
115
|
}
|
|
100
116
|
|
|
101
117
|
.ina-tooltip__card--dark .ina-tooltip__close {
|
|
102
118
|
background-color: var(--ina-neutral-800, var(--Neutral-800));
|
|
103
|
-
color: var(--ina-
|
|
119
|
+
color: var(--ina-white, var(--ina-neutral-25));
|
|
104
120
|
}
|
|
105
121
|
|
|
106
122
|
.ina-tooltip__card--dark .ina-tooltip__close:hover {
|
|
107
|
-
background-color: var(--ina-
|
|
123
|
+
background-color: var(--ina-black, var(--ina-neutral-900));
|
|
108
124
|
}
|
|
109
125
|
|
|
110
126
|
/* Image section (for media variant) */
|
|
@@ -112,7 +128,7 @@
|
|
|
112
128
|
width: 100%;
|
|
113
129
|
height: 200px;
|
|
114
130
|
overflow: hidden;
|
|
115
|
-
background-color: var(--ina-background-tertiary, var(--
|
|
131
|
+
background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
|
|
116
132
|
display: flex;
|
|
117
133
|
align-items: center;
|
|
118
134
|
justify-content: center;
|
|
@@ -126,7 +142,7 @@
|
|
|
126
142
|
|
|
127
143
|
/* Content section */
|
|
128
144
|
.ina-tooltip__content-section {
|
|
129
|
-
padding:
|
|
145
|
+
padding: var(--ina-spacing-4);
|
|
130
146
|
display: flex;
|
|
131
147
|
flex-direction: column;
|
|
132
148
|
gap: 16px;
|
|
@@ -141,19 +157,19 @@
|
|
|
141
157
|
}
|
|
142
158
|
|
|
143
159
|
.ina-tooltip__card--dark .ina-tooltip__title {
|
|
144
|
-
color: var(--ina-
|
|
160
|
+
color: var(--ina-white, var(--ina-neutral-25));
|
|
145
161
|
}
|
|
146
162
|
|
|
147
163
|
.ina-tooltip__description {
|
|
148
164
|
font-size: 12px;
|
|
149
165
|
font-weight: 400;
|
|
150
166
|
line-height: 16px;
|
|
151
|
-
color: var(--ina-content-secondary, var(--
|
|
167
|
+
color: var(--ina-content-secondary, var(--ina-neutral-600));
|
|
152
168
|
margin: 0;
|
|
153
169
|
}
|
|
154
170
|
|
|
155
171
|
.ina-tooltip__card--dark .ina-tooltip__description {
|
|
156
|
-
color: var(--ina-content-tertiary, var(--
|
|
172
|
+
color: var(--ina-content-tertiary, var(--ina-neutral-400));
|
|
157
173
|
}
|
|
158
174
|
|
|
159
175
|
/* Pagination dots */
|
|
@@ -167,7 +183,7 @@
|
|
|
167
183
|
width: 6px;
|
|
168
184
|
height: 6px;
|
|
169
185
|
border-radius: 50%;
|
|
170
|
-
background-color: var(--ina-stroke-primary, var(--
|
|
186
|
+
background-color: var(--ina-stroke-primary, var(--ina-neutral-200));
|
|
171
187
|
transition: all 0.2s ease;
|
|
172
188
|
}
|
|
173
189
|
|
|
@@ -178,11 +194,11 @@
|
|
|
178
194
|
}
|
|
179
195
|
|
|
180
196
|
.ina-tooltip__card--dark .ina-tooltip__pagination-dot {
|
|
181
|
-
background-color: var(--ina-neutral-600, var(--
|
|
197
|
+
background-color: var(--ina-neutral-600, var(--ina-neutral-600));
|
|
182
198
|
}
|
|
183
199
|
|
|
184
200
|
.ina-tooltip__card--dark .ina-tooltip__pagination-dot--active {
|
|
185
|
-
background-color: var(--ina-
|
|
201
|
+
background-color: var(--ina-white, var(--ina-neutral-25));
|
|
186
202
|
}
|
|
187
203
|
|
|
188
204
|
/* Action buttons */
|
|
@@ -204,12 +220,12 @@
|
|
|
204
220
|
height: 0;
|
|
205
221
|
}
|
|
206
222
|
|
|
207
|
-
/* Arrow colors for variants */
|
|
223
|
+
/* Arrow colors for variants - menggunakan warna yang sama dengan card */
|
|
208
224
|
.ina-tooltip__arrow--variant-basic {
|
|
209
|
-
border-top-color: var(--ina-
|
|
210
|
-
border-bottom-color: var(--ina-
|
|
211
|
-
border-left-color: var(--ina-
|
|
212
|
-
border-right-color: var(--ina-
|
|
225
|
+
border-top-color: var(--ina-black, var(--ina-neutral-900));
|
|
226
|
+
border-bottom-color: var(--ina-black, var(--ina-neutral-900));
|
|
227
|
+
border-left-color: var(--ina-black, var(--ina-neutral-900));
|
|
228
|
+
border-right-color: var(--ina-black, var(--ina-neutral-900));
|
|
213
229
|
}
|
|
214
230
|
|
|
215
231
|
.ina-tooltip__arrow--variant-light {
|
|
@@ -220,10 +236,10 @@
|
|
|
220
236
|
}
|
|
221
237
|
|
|
222
238
|
.ina-tooltip__arrow--variant-dark {
|
|
223
|
-
border-top-color: var(--ina-neutral-900, var(--
|
|
224
|
-
border-bottom-color: var(--ina-neutral-900, var(--
|
|
225
|
-
border-left-color: var(--ina-neutral-900, var(--
|
|
226
|
-
border-right-color: var(--ina-neutral-900, var(--
|
|
239
|
+
border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
240
|
+
border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
241
|
+
border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
242
|
+
border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
227
243
|
}
|
|
228
244
|
|
|
229
245
|
.ina-tooltip__arrow--variant-media {
|
|
@@ -429,7 +445,7 @@
|
|
|
429
445
|
|
|
430
446
|
/* Focus styles */
|
|
431
447
|
.ina-tooltip:focus {
|
|
432
|
-
outline: 2px solid var(--ina-primary-500, var(--
|
|
448
|
+
outline: 2px solid var(--ina-primary-500, var(--ina-blue-500));
|
|
433
449
|
outline-offset: 2px;
|
|
434
450
|
}
|
|
435
451
|
|
|
@@ -447,6 +463,6 @@
|
|
|
447
463
|
}
|
|
448
464
|
|
|
449
465
|
.ina-tooltip__content-section {
|
|
450
|
-
padding:
|
|
466
|
+
padding: var(--ina-spacing-3);
|
|
451
467
|
}
|
|
452
468
|
}
|