@idds/styles 1.0.59 → 1.0.61

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/card.css +58 -14
  3. package/src/components/tooltip.css +14 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.59",
3
+ "version": "1.0.61",
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/card.css CHANGED
@@ -347,35 +347,57 @@
347
347
 
348
348
  /* Horizontal Card */
349
349
  .ina-card--variant-horizontal {
350
- flex-direction: column;
350
+ flex-direction: column !important;
351
351
  max-width: 100%;
352
352
  }
353
353
 
354
+ /* Override semua property desktop untuk horizontal card media di mobile */
354
355
  .ina-card--variant-horizontal .ina-card__media {
355
- width: 100%;
356
- aspect-ratio: 16 / 9;
357
- min-width: 100%;
358
- max-width: 100%;
359
- max-height: 202px;
360
- height: auto;
356
+ width: 100% !important;
357
+ aspect-ratio: 16 / 9 !important;
358
+ min-width: 100% !important;
359
+ max-width: 100% !important;
360
+ max-height: 202px !important;
361
+ height: auto !important;
362
+ flex-shrink: 0 !important;
363
+ flex-grow: 0 !important;
364
+ }
365
+
366
+ /* Override content width untuk mobile */
367
+ .ina-card--variant-horizontal .ina-card__content {
368
+ width: 100% !important;
369
+ flex: 1 1 auto !important;
370
+ min-width: 0 !important;
361
371
  }
362
372
 
363
373
  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
364
374
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
365
375
  order: 1 !important;
376
+ width: 100% !important;
377
+ min-width: 100% !important;
378
+ max-width: 100% !important;
366
379
  }
367
380
 
368
381
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
369
382
  order: 2 !important;
383
+ width: 100% !important;
384
+ flex: 1 1 auto !important;
385
+ min-width: 0 !important;
370
386
  }
371
387
 
372
388
  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
373
389
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
374
390
  order: 1 !important;
391
+ width: 100% !important;
392
+ flex: 1 1 auto !important;
393
+ min-width: 0 !important;
375
394
  }
376
395
 
377
396
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
378
397
  order: 2 !important;
398
+ width: 100% !important;
399
+ min-width: 100% !important;
400
+ max-width: 100% !important;
379
401
  }
380
402
 
381
403
  .ina-card--variant-horizontal .ina-card__avatar {
@@ -449,35 +471,57 @@
449
471
 
450
472
  /* Horizontal Card */
451
473
  .ina-card--variant-horizontal {
452
- flex-direction: column;
474
+ flex-direction: column !important;
453
475
  gap: var(--ina-spacing-4, 16px);
454
476
  }
455
477
 
478
+ /* Override semua property desktop untuk horizontal card media di mobile */
456
479
  .ina-card--variant-horizontal .ina-card__media {
457
- width: 100%;
458
- aspect-ratio: 16 / 9;
459
- min-width: 100%;
460
- max-width: 100%;
461
- max-height: 202px;
462
- height: auto;
480
+ width: 100% !important;
481
+ aspect-ratio: 16 / 9 !important;
482
+ min-width: 100% !important;
483
+ max-width: 100% !important;
484
+ max-height: 202px !important;
485
+ height: auto !important;
486
+ flex-shrink: 0 !important;
487
+ flex-grow: 0 !important;
488
+ }
489
+
490
+ /* Override content width untuk mobile */
491
+ .ina-card--variant-horizontal .ina-card__content {
492
+ width: 100% !important;
493
+ flex: 1 1 auto !important;
494
+ min-width: 0 !important;
463
495
  }
464
496
 
465
497
  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
466
498
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
467
499
  order: 1 !important;
500
+ width: 100% !important;
501
+ min-width: 100% !important;
502
+ max-width: 100% !important;
468
503
  }
469
504
 
470
505
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
471
506
  order: 2 !important;
507
+ width: 100% !important;
508
+ flex: 1 1 auto !important;
509
+ min-width: 0 !important;
472
510
  }
473
511
 
474
512
  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
475
513
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
476
514
  order: 1 !important;
515
+ width: 100% !important;
516
+ flex: 1 1 auto !important;
517
+ min-width: 0 !important;
477
518
  }
478
519
 
479
520
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
480
521
  order: 2 !important;
522
+ width: 100% !important;
523
+ min-width: 100% !important;
524
+ max-width: 100% !important;
481
525
  }
482
526
 
483
527
  .ina-card--variant-horizontal .ina-card__avatar {
package/src/components/tooltip.css CHANGED
@@ -35,6 +35,8 @@
35
35
  opacity: 0;
36
36
  visibility: hidden;
37
37
  display: block;
38
+ /* Allow arrow to be visible outside content bounds */
39
+ overflow: visible;
38
40
  }
39
41
 
40
42
  /* Basic Tooltip Bubble */
@@ -215,20 +217,20 @@
215
217
  /* Positioning classes */
216
218
  /* Reduced margin to eliminate gap and prevent hover area break */
217
219
  .ina-tooltip--placement-top {
218
- bottom: 100%;
220
+ bottom: 85%;
219
221
  left: 50%;
220
222
  transform: translateX(-50%);
221
223
  margin-bottom: 0;
222
224
  }
223
225
 
224
226
  .ina-tooltip--placement-top-start {
225
- bottom: 100%;
227
+ bottom: 85%;
226
228
  left: 0;
227
229
  margin-bottom: 0;
228
230
  }
229
231
 
230
232
  .ina-tooltip--placement-top-end {
231
- bottom: 100%;
233
+ bottom: 85%;
232
234
  right: 0;
233
235
  margin-bottom: 0;
234
236
  }
@@ -331,7 +333,7 @@
331
333
 
332
334
  /* Bottom arrows (pointing up to trigger) - arrow at top of tooltip */
333
335
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
334
- bottom: 100%; /* At the top of tooltip content */
336
+ bottom: 85%; /* At the top of tooltip content */
335
337
  left: 50%;
336
338
  margin-left: -5px;
337
339
  border-width: 5px;
@@ -339,7 +341,7 @@
339
341
  }
340
342
 
341
343
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
342
- bottom: 100%;
344
+ bottom: 85%;
343
345
  left: 16px;
344
346
  margin-left: -5px;
345
347
  border-width: 5px;
@@ -347,7 +349,7 @@
347
349
  }
348
350
 
349
351
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
350
- bottom: 100%;
352
+ bottom: 85%;
351
353
  right: 16px;
352
354
  margin-left: -5px;
353
355
  border-width: 5px;
@@ -357,7 +359,7 @@
357
359
  /* Left arrows (pointing right to trigger) - arrow at right edge of tooltip */
358
360
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
359
361
  top: 50%;
360
- right: -5px; /* Positioned at right edge, pointing right */
362
+ right: -10px; /* Positioned at right edge, pointing right (5px border + 5px offset) */
361
363
  margin-top: -5px;
362
364
  border-width: 5px;
363
365
  border-color: transparent transparent transparent transparent;
@@ -365,7 +367,7 @@
365
367
 
366
368
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
367
369
  top: 16px;
368
- right: -5px;
370
+ right: -10px;
369
371
  margin-top: -5px;
370
372
  border-width: 5px;
371
373
  border-color: transparent transparent transparent transparent;
@@ -373,7 +375,7 @@
373
375
 
374
376
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
375
377
  bottom: 16px;
376
- right: -5px;
378
+ right: -10px;
377
379
  margin-top: -5px;
378
380
  border-width: 5px;
379
381
  border-color: transparent transparent transparent transparent;
@@ -382,7 +384,7 @@
382
384
  /* Right arrows (pointing left to trigger) - arrow at left edge of tooltip */
383
385
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
384
386
  top: 50%;
385
- left: -5px; /* Positioned at left edge, pointing left */
387
+ left: -10px; /* Positioned at left edge, pointing left (5px border + 5px offset) */
386
388
  margin-top: -5px;
387
389
  border-width: 5px;
388
390
  border-color: transparent transparent transparent transparent;
@@ -390,7 +392,7 @@
390
392
 
391
393
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
392
394
  top: 16px;
393
- left: -5px;
395
+ left: -10px;
394
396
  margin-top: -5px;
395
397
  border-width: 5px;
396
398
  border-color: transparent transparent transparent transparent;
@@ -398,7 +400,7 @@
398
400
 
399
401
  .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
400
402
  bottom: 16px;
401
- left: -5px;
403
+ left: -10px;
402
404
  margin-top: -5px;
403
405
  border-width: 5px;
404
406
  border-color: transparent transparent transparent transparent;