@idds/styles 1.2.1 → 1.2.2
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
CHANGED
|
@@ -1,93 +1,169 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Tooltip Component Styles
|
|
3
|
-
* Menggunakan
|
|
4
|
-
* Support
|
|
2
|
+
* Tooltip Test Component Styles - Versi Sederhana
|
|
3
|
+
* Menggunakan CSS murni seperti W3Schools
|
|
4
|
+
* Support force :hover state dari developer tools
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
/* Base wrapper */
|
|
7
|
+
/* Base wrapper - sama seperti existing */
|
|
8
8
|
.ina-tooltip {
|
|
9
9
|
position: relative;
|
|
10
10
|
display: inline-block;
|
|
11
|
+
cursor: pointer;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
|
-
/*
|
|
14
|
-
.ina-
|
|
15
|
-
|
|
16
|
-
opacity:
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
/* Tooltip content - hidden by default, shown on hover */
|
|
15
|
+
.ina-tooltip__content {
|
|
16
|
+
visibility: hidden;
|
|
17
|
+
opacity: 0;
|
|
18
|
+
position: absolute;
|
|
19
|
+
z-index: 999999;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
24
|
+
/* Show tooltip on hover - support force state dari dev tools */
|
|
25
|
+
.ina-tooltip:hover .ina-tooltip__content,
|
|
26
|
+
.ina-tooltip[data-hover='true'] .ina-tooltip__content,
|
|
27
|
+
.ina-tooltip__content:hover {
|
|
28
|
+
visibility: visible;
|
|
29
|
+
opacity: 1;
|
|
30
|
+
pointer-events: auto;
|
|
23
31
|
}
|
|
24
32
|
|
|
25
|
-
/*
|
|
26
|
-
.ina-tooltip__content
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
/* Prevent clipping by any parent container */
|
|
32
|
-
transform: translateZ(0);
|
|
33
|
-
will-change: transform;
|
|
34
|
-
/* Hidden by default, shown via JavaScript or :hover */
|
|
35
|
-
opacity: 0;
|
|
36
|
-
visibility: hidden;
|
|
37
|
-
display: block;
|
|
38
|
-
/* Allow arrow to be visible outside content bounds */
|
|
39
|
-
overflow: visible;
|
|
33
|
+
/* Hide tooltip when closed - override hover behavior */
|
|
34
|
+
.ina-tooltip--closed .ina-tooltip__content,
|
|
35
|
+
.ina-tooltip--closed:hover .ina-tooltip__content {
|
|
36
|
+
visibility: hidden !important;
|
|
37
|
+
opacity: 0 !important;
|
|
38
|
+
pointer-events: none !important;
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
/* Basic Tooltip Bubble */
|
|
43
42
|
.ina-tooltip__bubble {
|
|
44
|
-
background-color:
|
|
45
|
-
color:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
max-width: 320px;
|
|
55
|
-
box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
56
|
-
0 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
43
|
+
background-color: #000;
|
|
44
|
+
color: #fff;
|
|
45
|
+
text-align: center;
|
|
46
|
+
padding: 8px 12px;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
font-size: 12px;
|
|
49
|
+
white-space: normal;
|
|
50
|
+
word-wrap: break-word;
|
|
51
|
+
max-width: 200px;
|
|
52
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
57
53
|
}
|
|
58
54
|
|
|
59
55
|
.ina-tooltip__bubble--basic {
|
|
60
56
|
white-space: normal;
|
|
61
57
|
word-wrap: break-word;
|
|
62
|
-
max-width:
|
|
58
|
+
max-width: 200px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Positioning - Top */
|
|
62
|
+
.ina-tooltip--placement-top .ina-tooltip__content {
|
|
63
|
+
bottom: 100%;
|
|
64
|
+
left: 50%;
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
margin-bottom: 8px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Positioning - Bottom */
|
|
70
|
+
.ina-tooltip--placement-bottom .ina-tooltip__content {
|
|
71
|
+
top: 100%;
|
|
72
|
+
left: 50%;
|
|
73
|
+
transform: translateX(-50%);
|
|
74
|
+
margin-top: 8px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Positioning - Left */
|
|
78
|
+
.ina-tooltip--placement-left .ina-tooltip__content {
|
|
79
|
+
right: 100%;
|
|
80
|
+
top: 50%;
|
|
81
|
+
transform: translateY(-50%);
|
|
82
|
+
margin-right: 8px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Positioning - Right */
|
|
86
|
+
.ina-tooltip--placement-right .ina-tooltip__content {
|
|
87
|
+
left: 100%;
|
|
88
|
+
top: 50%;
|
|
89
|
+
transform: translateY(-50%);
|
|
90
|
+
margin-left: 8px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Arrow untuk tooltip - menggunakan ::after */
|
|
94
|
+
.ina-tooltip__content--show-arrow::after {
|
|
95
|
+
content: '';
|
|
96
|
+
position: absolute;
|
|
97
|
+
width: 0;
|
|
98
|
+
height: 0;
|
|
99
|
+
border-style: solid;
|
|
100
|
+
pointer-events: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Arrow untuk top placement (arrow di bawah, pointing down) */
|
|
104
|
+
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow::after {
|
|
105
|
+
top: 100%;
|
|
106
|
+
left: 50%;
|
|
107
|
+
margin-left: -5px;
|
|
108
|
+
border-width: 5px;
|
|
109
|
+
border-color: #000 transparent transparent transparent;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Arrow untuk bottom placement (arrow di atas, pointing up) */
|
|
113
|
+
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow::after {
|
|
114
|
+
bottom: 100%;
|
|
115
|
+
left: 50%;
|
|
116
|
+
margin-left: -5px;
|
|
117
|
+
border-width: 5px;
|
|
118
|
+
border-color: transparent transparent #000 transparent;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Arrow untuk left placement (arrow di kanan, pointing right) */
|
|
122
|
+
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow::after {
|
|
123
|
+
left: 100%;
|
|
124
|
+
top: 50%;
|
|
125
|
+
margin-top: -5px;
|
|
126
|
+
border-width: 5px;
|
|
127
|
+
border-color: transparent transparent transparent #000;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Arrow untuk right placement (arrow di kiri, pointing left) */
|
|
131
|
+
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow::after {
|
|
132
|
+
right: 100%;
|
|
133
|
+
top: 50%;
|
|
134
|
+
margin-top: -5px;
|
|
135
|
+
border-width: 5px;
|
|
136
|
+
border-color: transparent #000 transparent transparent;
|
|
63
137
|
}
|
|
64
138
|
|
|
65
139
|
/* Card Tooltip (Light, Dark, Media) */
|
|
66
140
|
.ina-tooltip__card {
|
|
67
141
|
position: relative;
|
|
68
142
|
pointer-events: auto;
|
|
69
|
-
border-radius:
|
|
143
|
+
border-radius: 8px;
|
|
70
144
|
box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
71
145
|
0 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
72
146
|
overflow: hidden;
|
|
73
147
|
width: 320px;
|
|
74
148
|
display: flex;
|
|
75
149
|
flex-direction: column;
|
|
150
|
+
background-color: #fff;
|
|
151
|
+
color: #1a1a1a;
|
|
76
152
|
}
|
|
77
153
|
|
|
78
154
|
.ina-tooltip__card--light {
|
|
79
|
-
background-color:
|
|
80
|
-
color:
|
|
155
|
+
background-color: #fff;
|
|
156
|
+
color: #1a1a1a;
|
|
81
157
|
}
|
|
82
158
|
|
|
83
159
|
.ina-tooltip__card--dark {
|
|
84
|
-
background-color:
|
|
85
|
-
color:
|
|
160
|
+
background-color: #1a1a1a;
|
|
161
|
+
color: #fff;
|
|
86
162
|
}
|
|
87
163
|
|
|
88
164
|
.ina-tooltip__card--media {
|
|
89
|
-
background-color:
|
|
90
|
-
color:
|
|
165
|
+
background-color: #fff;
|
|
166
|
+
color: #1a1a1a;
|
|
91
167
|
}
|
|
92
168
|
|
|
93
169
|
/* Close button */
|
|
@@ -98,7 +174,7 @@
|
|
|
98
174
|
width: 24px;
|
|
99
175
|
height: 24px;
|
|
100
176
|
border-radius: 50%;
|
|
101
|
-
background-color:
|
|
177
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
102
178
|
border: none;
|
|
103
179
|
cursor: pointer;
|
|
104
180
|
display: flex;
|
|
@@ -106,20 +182,27 @@
|
|
|
106
182
|
justify-content: center;
|
|
107
183
|
z-index: 10;
|
|
108
184
|
transition: all 0.2s ease;
|
|
109
|
-
color:
|
|
185
|
+
color: #1a1a1a;
|
|
186
|
+
padding: 0;
|
|
110
187
|
}
|
|
111
188
|
|
|
112
189
|
.ina-tooltip__close:hover {
|
|
113
|
-
background-color:
|
|
190
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
114
191
|
}
|
|
115
192
|
|
|
116
193
|
.ina-tooltip__card--dark .ina-tooltip__close {
|
|
117
|
-
background-color:
|
|
118
|
-
color:
|
|
194
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
195
|
+
color: #fff;
|
|
119
196
|
}
|
|
120
197
|
|
|
121
198
|
.ina-tooltip__card--dark .ina-tooltip__close:hover {
|
|
122
|
-
background-color:
|
|
199
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.ina-tooltip__close svg {
|
|
203
|
+
width: 16px;
|
|
204
|
+
height: 16px;
|
|
205
|
+
stroke: currentColor;
|
|
123
206
|
}
|
|
124
207
|
|
|
125
208
|
/* Image section (for media variant) */
|
|
@@ -127,7 +210,7 @@
|
|
|
127
210
|
width: 100%;
|
|
128
211
|
height: 200px;
|
|
129
212
|
overflow: hidden;
|
|
130
|
-
background-color:
|
|
213
|
+
background-color: #f5f5f5;
|
|
131
214
|
display: flex;
|
|
132
215
|
align-items: center;
|
|
133
216
|
justify-content: center;
|
|
@@ -141,63 +224,34 @@
|
|
|
141
224
|
|
|
142
225
|
/* Content section */
|
|
143
226
|
.ina-tooltip__content-section {
|
|
144
|
-
padding:
|
|
227
|
+
padding: 16px;
|
|
145
228
|
display: flex;
|
|
146
229
|
flex-direction: column;
|
|
147
|
-
gap:
|
|
230
|
+
gap: 12px;
|
|
148
231
|
}
|
|
149
232
|
|
|
150
233
|
.ina-tooltip__title {
|
|
151
234
|
font-size: 16px;
|
|
152
235
|
font-weight: 600;
|
|
153
236
|
line-height: 24px;
|
|
154
|
-
color:
|
|
237
|
+
color: #1a1a1a;
|
|
155
238
|
margin: 0;
|
|
156
239
|
}
|
|
157
240
|
|
|
158
241
|
.ina-tooltip__card--dark .ina-tooltip__title {
|
|
159
|
-
color:
|
|
242
|
+
color: #fff;
|
|
160
243
|
}
|
|
161
244
|
|
|
162
245
|
.ina-tooltip__description {
|
|
163
246
|
font-size: 12px;
|
|
164
247
|
font-weight: 400;
|
|
165
248
|
line-height: 16px;
|
|
166
|
-
color:
|
|
249
|
+
color: #666;
|
|
167
250
|
margin: 0;
|
|
168
251
|
}
|
|
169
252
|
|
|
170
253
|
.ina-tooltip__card--dark .ina-tooltip__description {
|
|
171
|
-
color:
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
/* Pagination dots */
|
|
175
|
-
.ina-tooltip__pagination {
|
|
176
|
-
display: flex;
|
|
177
|
-
gap: 8px;
|
|
178
|
-
align-items: center;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.ina-tooltip__pagination-dot {
|
|
182
|
-
width: 6px;
|
|
183
|
-
height: 6px;
|
|
184
|
-
border-radius: 50%;
|
|
185
|
-
background-color: var(--ina-stroke-primary, var(--ina-neutral-200));
|
|
186
|
-
transition: all 0.2s ease;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.ina-tooltip__pagination-dot--active {
|
|
190
|
-
background-color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
191
|
-
width: 8px;
|
|
192
|
-
height: 8px;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.ina-tooltip__card--dark .ina-tooltip__pagination-dot {
|
|
196
|
-
background-color: var(--ina-neutral-600, var(--ina-neutral-600));
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.ina-tooltip__card--dark .ina-tooltip__pagination-dot--active {
|
|
200
|
-
background-color: var(--ina-white, var(--ina-neutral-25));
|
|
254
|
+
color: rgba(255, 255, 255, 0.7);
|
|
201
255
|
}
|
|
202
256
|
|
|
203
257
|
/* Action buttons */
|
|
@@ -209,340 +263,89 @@
|
|
|
209
263
|
}
|
|
210
264
|
|
|
211
265
|
.ina-tooltip__action {
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
.ina-tooltip--placement-top {
|
|
220
|
-
bottom: 90%;
|
|
221
|
-
left: 50%;
|
|
222
|
-
transform: translateX(-50%);
|
|
223
|
-
margin-bottom: 0;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.ina-tooltip--placement-top-start {
|
|
227
|
-
bottom: 90%;
|
|
228
|
-
left: 0;
|
|
229
|
-
margin-bottom: 0;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.ina-tooltip--placement-top-end {
|
|
233
|
-
bottom: 90%;
|
|
234
|
-
right: 0;
|
|
235
|
-
margin-bottom: 0;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.ina-tooltip--placement-bottom {
|
|
239
|
-
top: 90%;
|
|
240
|
-
left: 50%;
|
|
241
|
-
transform: translateX(-50%);
|
|
242
|
-
margin-top: 0;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.ina-tooltip--placement-bottom-start {
|
|
246
|
-
top: 90%;
|
|
247
|
-
left: 0;
|
|
248
|
-
margin-top: 0;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.ina-tooltip--placement-bottom-end {
|
|
252
|
-
top: 90%;
|
|
253
|
-
right: 0;
|
|
254
|
-
margin-top: 0;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.ina-tooltip--placement-left {
|
|
258
|
-
right: 100%;
|
|
259
|
-
top: 50%;
|
|
260
|
-
transform: translateY(-50%);
|
|
261
|
-
margin-right: 0;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.ina-tooltip--placement-left-start {
|
|
265
|
-
right: 100%;
|
|
266
|
-
top: 0;
|
|
267
|
-
margin-right: 0;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.ina-tooltip--placement-left-end {
|
|
271
|
-
right: 100%;
|
|
272
|
-
bottom: 0;
|
|
273
|
-
margin-right: 0;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.ina-tooltip--placement-right {
|
|
277
|
-
left: 100%;
|
|
278
|
-
top: 50%;
|
|
279
|
-
transform: translateY(-50%);
|
|
280
|
-
margin-left: 0;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.ina-tooltip--placement-right-start {
|
|
284
|
-
left: 100%;
|
|
285
|
-
top: 0;
|
|
286
|
-
margin-left: 0;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.ina-tooltip--placement-right-end {
|
|
290
|
-
left: 100%;
|
|
291
|
-
bottom: 0;
|
|
292
|
-
margin-left: 0;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
/* Arrow positioning using ::after pseudo element on content */
|
|
296
|
-
/* Following W3Schools approach with sharper/lancip arrow */
|
|
297
|
-
/* Using 5px border-width for sharper arrow like W3Schools */
|
|
298
|
-
/* Base arrow styles - only show when tooltip is visible */
|
|
299
|
-
.ina-tooltip__content--show-arrow::after {
|
|
300
|
-
content: '';
|
|
301
|
-
position: absolute;
|
|
302
|
-
width: 0;
|
|
303
|
-
height: 0;
|
|
304
|
-
pointer-events: none;
|
|
305
|
-
border-style: solid;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
/* Top arrows (pointing down to trigger) - arrow at bottom of tooltip */
|
|
309
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
|
|
310
|
-
bottom: -10px; /* At the bottom of tooltip content, pointing down (5px border + 5px offset) */
|
|
311
|
-
left: 50%;
|
|
312
|
-
margin-left: -5px; /* Half of border-width to center */
|
|
313
|
-
border-width: 5px;
|
|
314
|
-
border-color: transparent transparent transparent transparent;
|
|
315
|
-
/* Color will be set by variant classes below */
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
|
|
319
|
-
bottom: -10px;
|
|
320
|
-
left: 16px;
|
|
321
|
-
margin-left: -5px;
|
|
322
|
-
border-width: 5px;
|
|
323
|
-
border-color: transparent transparent transparent transparent;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
|
|
327
|
-
bottom: -10px;
|
|
328
|
-
right: 16px;
|
|
329
|
-
margin-left: -5px;
|
|
330
|
-
border-width: 5px;
|
|
331
|
-
border-color: transparent transparent transparent transparent;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
/* Bottom arrows (pointing up to trigger) - arrow at top of tooltip */
|
|
335
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
|
|
336
|
-
top: -10px; /* At the top of tooltip content, pointing up (5px border + 5px offset) */
|
|
337
|
-
left: 50%;
|
|
338
|
-
margin-left: -5px;
|
|
339
|
-
border-width: 5px;
|
|
340
|
-
border-color: transparent transparent transparent transparent;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
|
|
344
|
-
top: -10px;
|
|
345
|
-
left: 16px;
|
|
346
|
-
margin-left: -5px;
|
|
347
|
-
border-width: 5px;
|
|
348
|
-
border-color: transparent transparent transparent transparent;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
|
|
352
|
-
top: -10px;
|
|
353
|
-
right: 16px;
|
|
354
|
-
margin-left: -5px;
|
|
355
|
-
border-width: 5px;
|
|
356
|
-
border-color: transparent transparent transparent transparent;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
/* Left arrows (pointing right to trigger) - arrow at right edge of tooltip */
|
|
360
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
|
|
361
|
-
top: 50%;
|
|
362
|
-
right: -10px; /* Positioned at right edge, pointing right (5px border + 5px offset) */
|
|
363
|
-
margin-top: -5px;
|
|
364
|
-
border-width: 5px;
|
|
365
|
-
border-color: transparent transparent transparent transparent;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
|
|
369
|
-
top: 16px;
|
|
370
|
-
right: -10px;
|
|
371
|
-
margin-top: -5px;
|
|
372
|
-
border-width: 5px;
|
|
373
|
-
border-color: transparent transparent transparent transparent;
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
|
|
377
|
-
bottom: 16px;
|
|
378
|
-
right: -10px;
|
|
379
|
-
margin-top: -5px;
|
|
380
|
-
border-width: 5px;
|
|
381
|
-
border-color: transparent transparent transparent transparent;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
/* Right arrows (pointing left to trigger) - arrow at left edge of tooltip */
|
|
385
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
|
|
386
|
-
top: 50%;
|
|
387
|
-
left: -10px; /* Positioned at left edge, pointing left (5px border + 5px offset) */
|
|
388
|
-
margin-top: -5px;
|
|
389
|
-
border-width: 5px;
|
|
390
|
-
border-color: transparent transparent transparent transparent;
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
|
|
394
|
-
top: 16px;
|
|
395
|
-
left: -10px;
|
|
396
|
-
margin-top: -5px;
|
|
397
|
-
border-width: 5px;
|
|
398
|
-
border-color: transparent transparent transparent transparent;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
|
|
402
|
-
bottom: 16px;
|
|
403
|
-
left: -10px;
|
|
404
|
-
margin-top: -5px;
|
|
405
|
-
border-width: 5px;
|
|
406
|
-
border-color: transparent transparent transparent transparent;
|
|
407
|
-
}
|
|
408
|
-
.ina-tooltip__content {
|
|
409
|
-
max-width: 320px;
|
|
410
|
-
min-width: max-content;
|
|
411
|
-
}
|
|
412
|
-
/* Arrow colors - match parent bubble/card background color */
|
|
413
|
-
/* Following W3Schools pattern: only the side pointing to trigger has color */
|
|
414
|
-
/* For basic variant - arrow color matches bubble background */
|
|
415
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top::after,
|
|
416
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top-start::after,
|
|
417
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top-end::after {
|
|
418
|
-
border-top-color: var(--ina-black, var(--ina-neutral-900));
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom::after,
|
|
422
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom-start::after,
|
|
423
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom-end::after {
|
|
424
|
-
border-bottom-color: var(--ina-black, var(--ina-neutral-900));
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left::after,
|
|
428
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left-start::after,
|
|
429
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left-end::after {
|
|
430
|
-
border-left-color: var(--ina-black, var(--ina-neutral-900));
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right::after,
|
|
434
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right-start::after,
|
|
435
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right-end::after {
|
|
436
|
-
border-right-color: var(--ina-black, var(--ina-neutral-900));
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
/* For light variant - arrow color matches card background */
|
|
440
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top::after,
|
|
441
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top-start::after,
|
|
442
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top-end::after {
|
|
443
|
-
border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom::after,
|
|
447
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom-start::after,
|
|
448
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom-end::after {
|
|
449
|
-
border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
266
|
+
padding: 8px 16px;
|
|
267
|
+
border: none;
|
|
268
|
+
border-radius: 6px;
|
|
269
|
+
font-size: 14px;
|
|
270
|
+
font-weight: 500;
|
|
271
|
+
cursor: pointer;
|
|
272
|
+
transition: all 0.2s ease;
|
|
450
273
|
}
|
|
451
274
|
|
|
452
|
-
.ina-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
border
|
|
275
|
+
.ina-tooltip__action--close {
|
|
276
|
+
background-color: #fff;
|
|
277
|
+
color: #1a1a1a;
|
|
278
|
+
border: 1px solid #e0e0e0;
|
|
456
279
|
}
|
|
457
280
|
|
|
458
|
-
.ina-
|
|
459
|
-
|
|
460
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-right-end::after {
|
|
461
|
-
border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
281
|
+
.ina-tooltip__action--close:hover {
|
|
282
|
+
background-color: #f5f5f5;
|
|
462
283
|
}
|
|
463
284
|
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-top-end::after {
|
|
468
|
-
border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
285
|
+
.ina-tooltip__action--next {
|
|
286
|
+
background-color: #e91e63;
|
|
287
|
+
color: #fff;
|
|
469
288
|
}
|
|
470
289
|
|
|
471
|
-
.ina-
|
|
472
|
-
|
|
473
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-bottom-end::after {
|
|
474
|
-
border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
290
|
+
.ina-tooltip__action--next:hover {
|
|
291
|
+
background-color: #c2185b;
|
|
475
292
|
}
|
|
476
293
|
|
|
477
|
-
.ina-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
border-
|
|
294
|
+
.ina-tooltip__card--dark .ina-tooltip__action--close {
|
|
295
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
296
|
+
color: #fff;
|
|
297
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
481
298
|
}
|
|
482
299
|
|
|
483
|
-
.ina-
|
|
484
|
-
|
|
485
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-right-end::after {
|
|
486
|
-
border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
|
|
300
|
+
.ina-tooltip__card--dark .ina-tooltip__action--close:hover {
|
|
301
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
487
302
|
}
|
|
488
303
|
|
|
489
|
-
/*
|
|
490
|
-
.ina-
|
|
491
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
492
|
-
.ina-
|
|
493
|
-
|
|
304
|
+
/* Arrow colors untuk card variant */
|
|
305
|
+
.ina-tooltip--placement-top
|
|
306
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
307
|
+
.ina-tooltip--placement-top
|
|
308
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
309
|
+
border-top-color: #fff;
|
|
494
310
|
}
|
|
495
311
|
|
|
496
|
-
.ina-
|
|
497
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
498
|
-
|
|
499
|
-
border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
312
|
+
.ina-tooltip--placement-top
|
|
313
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
314
|
+
border-top-color: #1a1a1a;
|
|
500
315
|
}
|
|
501
316
|
|
|
502
|
-
.ina-
|
|
503
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
504
|
-
.ina-
|
|
505
|
-
|
|
317
|
+
.ina-tooltip--placement-bottom
|
|
318
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
319
|
+
.ina-tooltip--placement-bottom
|
|
320
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
321
|
+
border-bottom-color: #fff;
|
|
506
322
|
}
|
|
507
323
|
|
|
508
|
-
.ina-
|
|
509
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
510
|
-
|
|
511
|
-
border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
324
|
+
.ina-tooltip--placement-bottom
|
|
325
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
326
|
+
border-bottom-color: #1a1a1a;
|
|
512
327
|
}
|
|
513
328
|
|
|
514
|
-
|
|
515
|
-
.ina-tooltip__content--
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
329
|
+
.ina-tooltip--placement-left
|
|
330
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
331
|
+
.ina-tooltip--placement-left
|
|
332
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
333
|
+
border-left-color: #fff;
|
|
519
334
|
}
|
|
520
335
|
|
|
521
|
-
.ina-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
336
|
+
.ina-tooltip--placement-left
|
|
337
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
338
|
+
border-left-color: #1a1a1a;
|
|
525
339
|
}
|
|
526
340
|
|
|
527
|
-
|
|
528
|
-
.ina-tooltip
|
|
529
|
-
|
|
530
|
-
|
|
341
|
+
.ina-tooltip--placement-right
|
|
342
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
343
|
+
.ina-tooltip--placement-right
|
|
344
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
345
|
+
border-right-color: #fff;
|
|
531
346
|
}
|
|
532
347
|
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
font-size: 11px;
|
|
537
|
-
max-width: 180px;
|
|
538
|
-
white-space: normal;
|
|
539
|
-
padding: 6px 10px;
|
|
540
|
-
}
|
|
541
|
-
.ina-tooltip__card {
|
|
542
|
-
width: 280px;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
.ina-tooltip__content-section {
|
|
546
|
-
padding: var(--ina-spacing-3);
|
|
547
|
-
}
|
|
348
|
+
.ina-tooltip--placement-right
|
|
349
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
350
|
+
border-right-color: #1a1a1a;
|
|
548
351
|
}
|