@idds/styles 1.2.1 → 1.2.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/package.json
CHANGED
|
@@ -1,93 +1,171 @@
|
|
|
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
|
-
white-space: nowrap;
|
|
53
|
-
min-width: max-content;
|
|
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;
|
|
54
51
|
max-width: 320px;
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
min-width: fit-content;
|
|
53
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
57
54
|
}
|
|
58
55
|
|
|
59
56
|
.ina-tooltip__bubble--basic {
|
|
60
57
|
white-space: normal;
|
|
61
58
|
word-wrap: break-word;
|
|
62
59
|
max-width: 320px;
|
|
60
|
+
min-width: fit-content;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Positioning - Top */
|
|
64
|
+
.ina-tooltip--placement-top .ina-tooltip__content {
|
|
65
|
+
bottom: calc(100% - 10px);
|
|
66
|
+
left: 50%;
|
|
67
|
+
transform: translateX(-50%);
|
|
68
|
+
margin-bottom: 8px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Positioning - Bottom */
|
|
72
|
+
.ina-tooltip--placement-bottom .ina-tooltip__content {
|
|
73
|
+
top: calc(100% - 10px);
|
|
74
|
+
left: 50%;
|
|
75
|
+
transform: translateX(-50%);
|
|
76
|
+
margin-top: 8px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Positioning - Left */
|
|
80
|
+
.ina-tooltip--placement-left .ina-tooltip__content {
|
|
81
|
+
right: calc(100% - 10px);
|
|
82
|
+
top: 50%;
|
|
83
|
+
transform: translateY(-50%);
|
|
84
|
+
margin-right: 8px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Positioning - Right */
|
|
88
|
+
.ina-tooltip--placement-right .ina-tooltip__content {
|
|
89
|
+
left: calc(100% - 10px);
|
|
90
|
+
top: 50%;
|
|
91
|
+
transform: translateY(-50%);
|
|
92
|
+
margin-left: 8px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Arrow untuk tooltip - menggunakan ::after */
|
|
96
|
+
.ina-tooltip__content--show-arrow::after {
|
|
97
|
+
content: '';
|
|
98
|
+
position: absolute;
|
|
99
|
+
width: 0;
|
|
100
|
+
height: 0;
|
|
101
|
+
border-style: solid;
|
|
102
|
+
pointer-events: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Arrow untuk top placement (arrow di bawah, pointing down) */
|
|
106
|
+
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow::after {
|
|
107
|
+
top: 100%;
|
|
108
|
+
left: 50%;
|
|
109
|
+
margin-left: -5px;
|
|
110
|
+
border-width: 5px;
|
|
111
|
+
border-color: #000 transparent transparent transparent;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Arrow untuk bottom placement (arrow di atas, pointing up) */
|
|
115
|
+
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow::after {
|
|
116
|
+
bottom: 100%;
|
|
117
|
+
left: 50%;
|
|
118
|
+
margin-left: -5px;
|
|
119
|
+
border-width: 5px;
|
|
120
|
+
border-color: transparent transparent #000 transparent;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Arrow untuk left placement (arrow di kanan, pointing right) */
|
|
124
|
+
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow::after {
|
|
125
|
+
left: 100%;
|
|
126
|
+
top: 50%;
|
|
127
|
+
margin-top: -5px;
|
|
128
|
+
border-width: 5px;
|
|
129
|
+
border-color: transparent transparent transparent #000;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Arrow untuk right placement (arrow di kiri, pointing left) */
|
|
133
|
+
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow::after {
|
|
134
|
+
right: 100%;
|
|
135
|
+
top: 50%;
|
|
136
|
+
margin-top: -5px;
|
|
137
|
+
border-width: 5px;
|
|
138
|
+
border-color: transparent #000 transparent transparent;
|
|
63
139
|
}
|
|
64
140
|
|
|
65
141
|
/* Card Tooltip (Light, Dark, Media) */
|
|
66
142
|
.ina-tooltip__card {
|
|
67
143
|
position: relative;
|
|
68
144
|
pointer-events: auto;
|
|
69
|
-
border-radius:
|
|
145
|
+
border-radius: 8px;
|
|
70
146
|
box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
71
147
|
0 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
72
148
|
overflow: hidden;
|
|
73
149
|
width: 320px;
|
|
74
150
|
display: flex;
|
|
75
151
|
flex-direction: column;
|
|
152
|
+
background-color: #fff;
|
|
153
|
+
color: #1a1a1a;
|
|
76
154
|
}
|
|
77
155
|
|
|
78
156
|
.ina-tooltip__card--light {
|
|
79
|
-
background-color:
|
|
80
|
-
color:
|
|
157
|
+
background-color: #fff;
|
|
158
|
+
color: #1a1a1a;
|
|
81
159
|
}
|
|
82
160
|
|
|
83
161
|
.ina-tooltip__card--dark {
|
|
84
|
-
background-color:
|
|
85
|
-
color:
|
|
162
|
+
background-color: #1a1a1a;
|
|
163
|
+
color: #fff;
|
|
86
164
|
}
|
|
87
165
|
|
|
88
166
|
.ina-tooltip__card--media {
|
|
89
|
-
background-color:
|
|
90
|
-
color:
|
|
167
|
+
background-color: #fff;
|
|
168
|
+
color: #1a1a1a;
|
|
91
169
|
}
|
|
92
170
|
|
|
93
171
|
/* Close button */
|
|
@@ -98,7 +176,7 @@
|
|
|
98
176
|
width: 24px;
|
|
99
177
|
height: 24px;
|
|
100
178
|
border-radius: 50%;
|
|
101
|
-
background-color:
|
|
179
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
102
180
|
border: none;
|
|
103
181
|
cursor: pointer;
|
|
104
182
|
display: flex;
|
|
@@ -106,20 +184,27 @@
|
|
|
106
184
|
justify-content: center;
|
|
107
185
|
z-index: 10;
|
|
108
186
|
transition: all 0.2s ease;
|
|
109
|
-
color:
|
|
187
|
+
color: #1a1a1a;
|
|
188
|
+
padding: 0;
|
|
110
189
|
}
|
|
111
190
|
|
|
112
191
|
.ina-tooltip__close:hover {
|
|
113
|
-
background-color:
|
|
192
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
114
193
|
}
|
|
115
194
|
|
|
116
195
|
.ina-tooltip__card--dark .ina-tooltip__close {
|
|
117
|
-
background-color:
|
|
118
|
-
color:
|
|
196
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
197
|
+
color: #fff;
|
|
119
198
|
}
|
|
120
199
|
|
|
121
200
|
.ina-tooltip__card--dark .ina-tooltip__close:hover {
|
|
122
|
-
background-color:
|
|
201
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.ina-tooltip__close svg {
|
|
205
|
+
width: 16px;
|
|
206
|
+
height: 16px;
|
|
207
|
+
stroke: currentColor;
|
|
123
208
|
}
|
|
124
209
|
|
|
125
210
|
/* Image section (for media variant) */
|
|
@@ -127,7 +212,7 @@
|
|
|
127
212
|
width: 100%;
|
|
128
213
|
height: 200px;
|
|
129
214
|
overflow: hidden;
|
|
130
|
-
background-color:
|
|
215
|
+
background-color: #f5f5f5;
|
|
131
216
|
display: flex;
|
|
132
217
|
align-items: center;
|
|
133
218
|
justify-content: center;
|
|
@@ -141,63 +226,34 @@
|
|
|
141
226
|
|
|
142
227
|
/* Content section */
|
|
143
228
|
.ina-tooltip__content-section {
|
|
144
|
-
padding:
|
|
229
|
+
padding: 16px;
|
|
145
230
|
display: flex;
|
|
146
231
|
flex-direction: column;
|
|
147
|
-
gap:
|
|
232
|
+
gap: 12px;
|
|
148
233
|
}
|
|
149
234
|
|
|
150
235
|
.ina-tooltip__title {
|
|
151
236
|
font-size: 16px;
|
|
152
237
|
font-weight: 600;
|
|
153
238
|
line-height: 24px;
|
|
154
|
-
color:
|
|
239
|
+
color: #1a1a1a;
|
|
155
240
|
margin: 0;
|
|
156
241
|
}
|
|
157
242
|
|
|
158
243
|
.ina-tooltip__card--dark .ina-tooltip__title {
|
|
159
|
-
color:
|
|
244
|
+
color: #fff;
|
|
160
245
|
}
|
|
161
246
|
|
|
162
247
|
.ina-tooltip__description {
|
|
163
248
|
font-size: 12px;
|
|
164
249
|
font-weight: 400;
|
|
165
250
|
line-height: 16px;
|
|
166
|
-
color:
|
|
251
|
+
color: #666;
|
|
167
252
|
margin: 0;
|
|
168
253
|
}
|
|
169
254
|
|
|
170
255
|
.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));
|
|
256
|
+
color: rgba(255, 255, 255, 0.7);
|
|
201
257
|
}
|
|
202
258
|
|
|
203
259
|
/* Action buttons */
|
|
@@ -209,340 +265,89 @@
|
|
|
209
265
|
}
|
|
210
266
|
|
|
211
267
|
.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));
|
|
268
|
+
padding: 8px 16px;
|
|
269
|
+
border: none;
|
|
270
|
+
border-radius: 6px;
|
|
271
|
+
font-size: 14px;
|
|
272
|
+
font-weight: 500;
|
|
273
|
+
cursor: pointer;
|
|
274
|
+
transition: all 0.2s ease;
|
|
450
275
|
}
|
|
451
276
|
|
|
452
|
-
.ina-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
border
|
|
277
|
+
.ina-tooltip__action--close {
|
|
278
|
+
background-color: #fff;
|
|
279
|
+
color: #1a1a1a;
|
|
280
|
+
border: 1px solid #e0e0e0;
|
|
456
281
|
}
|
|
457
282
|
|
|
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));
|
|
283
|
+
.ina-tooltip__action--close:hover {
|
|
284
|
+
background-color: #f5f5f5;
|
|
462
285
|
}
|
|
463
286
|
|
|
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));
|
|
287
|
+
.ina-tooltip__action--next {
|
|
288
|
+
background-color: #e91e63;
|
|
289
|
+
color: #fff;
|
|
469
290
|
}
|
|
470
291
|
|
|
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));
|
|
292
|
+
.ina-tooltip__action--next:hover {
|
|
293
|
+
background-color: #c2185b;
|
|
475
294
|
}
|
|
476
295
|
|
|
477
|
-
.ina-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
border-
|
|
296
|
+
.ina-tooltip__card--dark .ina-tooltip__action--close {
|
|
297
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
298
|
+
color: #fff;
|
|
299
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
481
300
|
}
|
|
482
301
|
|
|
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));
|
|
302
|
+
.ina-tooltip__card--dark .ina-tooltip__action--close:hover {
|
|
303
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
487
304
|
}
|
|
488
305
|
|
|
489
|
-
/*
|
|
490
|
-
.ina-
|
|
491
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
492
|
-
.ina-
|
|
493
|
-
|
|
306
|
+
/* Arrow colors untuk card variant */
|
|
307
|
+
.ina-tooltip--placement-top
|
|
308
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
309
|
+
.ina-tooltip--placement-top
|
|
310
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
311
|
+
border-top-color: #fff;
|
|
494
312
|
}
|
|
495
313
|
|
|
496
|
-
.ina-
|
|
497
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
498
|
-
|
|
499
|
-
border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
314
|
+
.ina-tooltip--placement-top
|
|
315
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
316
|
+
border-top-color: #1a1a1a;
|
|
500
317
|
}
|
|
501
318
|
|
|
502
|
-
.ina-
|
|
503
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
504
|
-
.ina-
|
|
505
|
-
|
|
319
|
+
.ina-tooltip--placement-bottom
|
|
320
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
321
|
+
.ina-tooltip--placement-bottom
|
|
322
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
323
|
+
border-bottom-color: #fff;
|
|
506
324
|
}
|
|
507
325
|
|
|
508
|
-
.ina-
|
|
509
|
-
.ina-tooltip__content--show-arrow.ina-tooltip--variant-
|
|
510
|
-
|
|
511
|
-
border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
326
|
+
.ina-tooltip--placement-bottom
|
|
327
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
328
|
+
border-bottom-color: #1a1a1a;
|
|
512
329
|
}
|
|
513
330
|
|
|
514
|
-
|
|
515
|
-
.ina-tooltip__content--
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
331
|
+
.ina-tooltip--placement-left
|
|
332
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
333
|
+
.ina-tooltip--placement-left
|
|
334
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
335
|
+
border-left-color: #fff;
|
|
519
336
|
}
|
|
520
337
|
|
|
521
|
-
.ina-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
338
|
+
.ina-tooltip--placement-left
|
|
339
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
340
|
+
border-left-color: #1a1a1a;
|
|
525
341
|
}
|
|
526
342
|
|
|
527
|
-
|
|
528
|
-
.ina-tooltip
|
|
529
|
-
|
|
530
|
-
|
|
343
|
+
.ina-tooltip--placement-right
|
|
344
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
|
|
345
|
+
.ina-tooltip--placement-right
|
|
346
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
|
|
347
|
+
border-right-color: #fff;
|
|
531
348
|
}
|
|
532
349
|
|
|
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
|
-
}
|
|
350
|
+
.ina-tooltip--placement-right
|
|
351
|
+
.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
|
|
352
|
+
border-right-color: #1a1a1a;
|
|
548
353
|
}
|