@idds/styles 1.0.59 → 1.0.60
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/card.css +58 -14
package/package.json
CHANGED
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 {
|