@idds/styles 1.0.38 → 1.0.39

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/tooltip.css +63 -60
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.38",
3
+ "version": "1.0.39",
4
4
  "description": "Shared CSS styles and colors for INA Digital Design System",
5
5
  "type": "module",
6
6
  "main": "./src/index.css",
package/src/components/tooltip.css CHANGED
@@ -208,186 +208,189 @@
208
208
  }
209
209
 
210
210
  /* Positioning classes */
211
+ /* Reduced margin to eliminate gap and prevent hover area break */
211
212
  .ina-tooltip--placement-top {
212
213
  bottom: 100%;
213
214
  left: 50%;
214
215
  transform: translateX(-50%);
215
- margin-bottom: 8px;
216
+ margin-bottom: 0;
216
217
  }
217
218
 
218
219
  .ina-tooltip--placement-top-start {
219
220
  bottom: 100%;
220
221
  left: 0;
221
- margin-bottom: 8px;
222
+ margin-bottom: 0;
222
223
  }
223
224
 
224
225
  .ina-tooltip--placement-top-end {
225
226
  bottom: 100%;
226
227
  right: 0;
227
- margin-bottom: 8px;
228
+ margin-bottom: 0;
228
229
  }
229
230
 
230
231
  .ina-tooltip--placement-bottom {
231
232
  top: 100%;
232
233
  left: 50%;
233
234
  transform: translateX(-50%);
234
- margin-top: 8px;
235
+ margin-top: 0;
235
236
  }
236
237
 
237
238
  .ina-tooltip--placement-bottom-start {
238
239
  top: 100%;
239
240
  left: 0;
240
- margin-top: 8px;
241
+ margin-top: 0;
241
242
  }
242
243
 
243
244
  .ina-tooltip--placement-bottom-end {
244
245
  top: 100%;
245
246
  right: 0;
246
- margin-top: 8px;
247
+ margin-top: 0;
247
248
  }
248
249
 
249
250
  .ina-tooltip--placement-left {
250
251
  right: 100%;
251
252
  top: 50%;
252
253
  transform: translateY(-50%);
253
- margin-right: 8px;
254
+ margin-right: 0;
254
255
  }
255
256
 
256
257
  .ina-tooltip--placement-left-start {
257
258
  right: 100%;
258
259
  top: 0;
259
- margin-right: 8px;
260
+ margin-right: 0;
260
261
  }
261
262
 
262
263
  .ina-tooltip--placement-left-end {
263
264
  right: 100%;
264
265
  bottom: 0;
265
- margin-right: 8px;
266
+ margin-right: 0;
266
267
  }
267
268
 
268
269
  .ina-tooltip--placement-right {
269
270
  left: 100%;
270
271
  top: 50%;
271
272
  transform: translateY(-50%);
272
- margin-left: 8px;
273
+ margin-left: 0;
273
274
  }
274
275
 
275
276
  .ina-tooltip--placement-right-start {
276
277
  left: 100%;
277
278
  top: 0;
278
- margin-left: 8px;
279
+ margin-left: 0;
279
280
  }
280
281
 
281
282
  .ina-tooltip--placement-right-end {
282
283
  left: 100%;
283
284
  bottom: 0;
284
- margin-left: 8px;
285
+ margin-left: 0;
285
286
  }
286
287
 
287
288
  /* Arrow positioning using ::after pseudo element */
289
+ /* Using smaller border size (4px) for sharper/lancip arrow */
290
+ /* Arrow positioned at edge of content to eliminate gap */
288
291
  /* Top arrows (pointing down) */
289
292
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
290
293
  left: 50%;
291
294
  transform: translateX(-50%);
292
- bottom: -6px;
293
- border-left: 6px solid transparent;
294
- border-right: 6px solid transparent;
295
- border-top: 6px solid;
295
+ bottom: -4px; /* Positioned at edge, overlapping trigger slightly */
296
+ border-left: 4px solid transparent;
297
+ border-right: 4px solid transparent;
298
+ border-top: 4px solid;
296
299
  /* Color will inherit from parent bubble/card background */
297
300
  }
298
301
 
299
302
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
300
303
  left: 16px;
301
- bottom: -6px;
302
- border-left: 6px solid transparent;
303
- border-right: 6px solid transparent;
304
- border-top: 6px solid;
304
+ bottom: -4px;
305
+ border-left: 4px solid transparent;
306
+ border-right: 4px solid transparent;
307
+ border-top: 4px solid;
305
308
  }
306
309
 
307
310
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
308
311
  right: 16px;
309
- bottom: -6px;
310
- border-left: 6px solid transparent;
311
- border-right: 6px solid transparent;
312
- border-top: 6px solid;
312
+ bottom: -4px;
313
+ border-left: 4px solid transparent;
314
+ border-right: 4px solid transparent;
315
+ border-top: 4px solid;
313
316
  }
314
317
 
315
318
  /* Bottom arrows (pointing up) */
316
319
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
317
320
  left: 50%;
318
321
  transform: translateX(-50%);
319
- top: -6px;
320
- border-left: 6px solid transparent;
321
- border-right: 6px solid transparent;
322
- border-bottom: 6px solid;
322
+ top: -4px; /* Positioned at edge, overlapping trigger slightly */
323
+ border-left: 4px solid transparent;
324
+ border-right: 4px solid transparent;
325
+ border-bottom: 4px solid;
323
326
  }
324
327
 
325
328
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
326
329
  left: 16px;
327
- top: -6px;
328
- border-left: 6px solid transparent;
329
- border-right: 6px solid transparent;
330
- border-bottom: 6px solid;
330
+ top: -4px;
331
+ border-left: 4px solid transparent;
332
+ border-right: 4px solid transparent;
333
+ border-bottom: 4px solid;
331
334
  }
332
335
 
333
336
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
334
337
  right: 16px;
335
- top: -6px;
336
- border-left: 6px solid transparent;
337
- border-right: 6px solid transparent;
338
- border-bottom: 6px solid;
338
+ top: -4px;
339
+ border-left: 4px solid transparent;
340
+ border-right: 4px solid transparent;
341
+ border-bottom: 4px solid;
339
342
  }
340
343
 
341
344
  /* Left arrows (pointing right) */
342
345
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
343
346
  top: 50%;
344
347
  transform: translateY(-50%);
345
- right: -6px;
346
- border-top: 6px solid transparent;
347
- border-bottom: 6px solid transparent;
348
- border-left: 6px solid;
348
+ right: -4px; /* Positioned at edge, overlapping trigger slightly */
349
+ border-top: 4px solid transparent;
350
+ border-bottom: 4px solid transparent;
351
+ border-left: 4px solid;
349
352
  }
350
353
 
351
354
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
352
355
  top: 16px;
353
- right: -6px;
354
- border-top: 6px solid transparent;
355
- border-bottom: 6px solid transparent;
356
- border-left: 6px solid;
356
+ right: -4px;
357
+ border-top: 4px solid transparent;
358
+ border-bottom: 4px solid transparent;
359
+ border-left: 4px solid;
357
360
  }
358
361
 
359
362
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
360
363
  bottom: 16px;
361
- right: -6px;
362
- border-top: 6px solid transparent;
363
- border-bottom: 6px solid transparent;
364
- border-left: 6px solid;
364
+ right: -4px;
365
+ border-top: 4px solid transparent;
366
+ border-bottom: 4px solid transparent;
367
+ border-left: 4px solid;
365
368
  }
366
369
 
367
370
  /* Right arrows (pointing left) */
368
371
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
369
372
  top: 50%;
370
373
  transform: translateY(-50%);
371
- left: -6px;
372
- border-top: 6px solid transparent;
373
- border-bottom: 6px solid transparent;
374
- border-right: 6px solid;
374
+ left: -4px; /* Positioned at edge, overlapping trigger slightly */
375
+ border-top: 4px solid transparent;
376
+ border-bottom: 4px solid transparent;
377
+ border-right: 4px solid;
375
378
  }
376
379
 
377
380
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
378
381
  top: 16px;
379
- left: -6px;
380
- border-top: 6px solid transparent;
381
- border-bottom: 6px solid transparent;
382
- border-right: 6px solid;
382
+ left: -4px;
383
+ border-top: 4px solid transparent;
384
+ border-bottom: 4px solid transparent;
385
+ border-right: 4px solid;
383
386
  }
384
387
 
385
388
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
386
389
  bottom: 16px;
387
- left: -6px;
388
- border-top: 6px solid transparent;
389
- border-bottom: 6px solid transparent;
390
- border-right: 6px solid;
390
+ left: -4px;
391
+ border-top: 4px solid transparent;
392
+ border-bottom: 4px solid transparent;
393
+ border-right: 4px solid;
391
394
  }
392
395
  .ina-tooltip__content {
393
396
  max-width: 320px;