@idds/styles 1.0.58 → 1.0.59

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.0.58",
3
+ "version": "1.0.59",
4
4
  "description": "Shared CSS styles and colors for INA Digital Design System",
5
5
  "type": "module",
6
6
  "main": "./src/index.css",
@@ -354,6 +354,28 @@
354
354
  .ina-card--variant-horizontal .ina-card__media {
355
355
  width: 100%;
356
356
  aspect-ratio: 16 / 9;
357
+ min-width: 100%;
358
+ max-width: 100%;
359
+ max-height: 202px;
360
+ height: auto;
361
+ }
362
+
363
+ /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
364
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
365
+ order: 1 !important;
366
+ }
367
+
368
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
369
+ order: 2 !important;
370
+ }
371
+
372
+ /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
373
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
374
+ order: 1 !important;
375
+ }
376
+
377
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
378
+ order: 2 !important;
357
379
  }
358
380
 
359
381
  .ina-card--variant-horizontal .ina-card__avatar {
@@ -434,6 +456,28 @@
434
456
  .ina-card--variant-horizontal .ina-card__media {
435
457
  width: 100%;
436
458
  aspect-ratio: 16 / 9;
459
+ min-width: 100%;
460
+ max-width: 100%;
461
+ max-height: 202px;
462
+ height: auto;
463
+ }
464
+
465
+ /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
466
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
467
+ order: 1 !important;
468
+ }
469
+
470
+ .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
471
+ order: 2 !important;
472
+ }
473
+
474
+ /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
475
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
476
+ order: 1 !important;
477
+ }
478
+
479
+ .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
480
+ order: 2 !important;
437
481
  }
438
482
 
439
483
  .ina-card--variant-horizontal .ina-card__avatar {
@@ -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
 
@@ -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;
@@ -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 {