@idds/styles 1.0.58 → 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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/card.css +94 -6
  3. package/src/components/date-picker.css +2 -1
  4. package/src/components/table.css +1 -1
  5. package/src/components/toggle.css +2 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.58",
3
+ "version": "1.0.60",
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,13 +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;
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;
371
+ }
372
+
373
+ /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
374
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
375
+ order: 1 !important;
376
+ width: 100% !important;
377
+ min-width: 100% !important;
378
+ max-width: 100% !important;
379
+ }
380
+
381
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
382
+ order: 2 !important;
383
+ width: 100% !important;
384
+ flex: 1 1 auto !important;
385
+ min-width: 0 !important;
386
+ }
387
+
388
+ /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
389
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
390
+ order: 1 !important;
391
+ width: 100% !important;
392
+ flex: 1 1 auto !important;
393
+ min-width: 0 !important;
394
+ }
395
+
396
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
397
+ order: 2 !important;
398
+ width: 100% !important;
399
+ min-width: 100% !important;
400
+ max-width: 100% !important;
357
401
  }
358
402
 
359
403
  .ina-card--variant-horizontal .ina-card__avatar {
@@ -427,13 +471,57 @@
427
471
 
428
472
  /* Horizontal Card */
429
473
  .ina-card--variant-horizontal {
430
- flex-direction: column;
474
+ flex-direction: column !important;
431
475
  gap: var(--ina-spacing-4, 16px);
432
476
  }
433
477
 
478
+ /* Override semua property desktop untuk horizontal card media di mobile */
434
479
  .ina-card--variant-horizontal .ina-card__media {
435
- width: 100%;
436
- aspect-ratio: 16 / 9;
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;
495
+ }
496
+
497
+ /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
498
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
499
+ order: 1 !important;
500
+ width: 100% !important;
501
+ min-width: 100% !important;
502
+ max-width: 100% !important;
503
+ }
504
+
505
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
506
+ order: 2 !important;
507
+ width: 100% !important;
508
+ flex: 1 1 auto !important;
509
+ min-width: 0 !important;
510
+ }
511
+
512
+ /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
513
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
514
+ order: 1 !important;
515
+ width: 100% !important;
516
+ flex: 1 1 auto !important;
517
+ min-width: 0 !important;
518
+ }
519
+
520
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
521
+ order: 2 !important;
522
+ width: 100% !important;
523
+ min-width: 100% !important;
524
+ max-width: 100% !important;
437
525
  }
438
526
 
439
527
  .ina-card--variant-horizontal .ina-card__avatar {
package/src/components/date-picker.css CHANGED
@@ -451,7 +451,8 @@
451
451
  font-size: var(--ina-font-3xs, 8px);
452
452
  }
453
453
 
454
- .ina-date-picker__today-label--selected {
454
+ .ina-date-picker__day--today.ina-date-picker__day--selected
455
+ > .ina-date-picker__today-label {
455
456
  color: var(--ina-white);
456
457
  }
457
458
 
package/src/components/table.css CHANGED
@@ -184,7 +184,7 @@
184
184
  font-size: var(--ina-font-xs);
185
185
  font-weight: var(--ina-font-medium);
186
186
  color: var(--ina-content-primary);
187
- vertical-align: top;
187
+ vertical-align: middle;
188
188
  /* Prevent cell content from being cut off */
189
189
  white-space: nowrap;
190
190
  min-width: fit-content;
package/src/components/toggle.css CHANGED
@@ -110,13 +110,11 @@
110
110
 
111
111
  /* Hover states */
112
112
  .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
113
- background-color: var(--ina-background-secondary);
114
113
  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
115
114
  0 0 4px 6px rgba(31, 31, 31, 0.04);
116
115
  }
117
116
 
118
117
  .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
119
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
120
118
  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
121
119
  0 0 4px 6px rgba(31, 31, 31, 0.04);
122
120
  }
@@ -176,16 +174,11 @@
176
174
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
177
175
  }
178
176
 
179
- [data-theme='dark']
180
- .ina-toggle:not(.ina-toggle--disabled):hover
181
- .ina-toggle__track {
182
- background-color: var(--ina-background-secondary);
183
- }
184
-
185
177
  [data-theme='dark']
186
178
  .ina-toggle:not(.ina-toggle--disabled):hover
187
179
  .ina-toggle__thumb {
188
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
180
+ box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
181
+ 0 0 4px 6px rgba(31, 31, 31, 0.04);
189
182
  }
190
183
 
191
184
  [data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {