@idds/styles 1.5.31 → 1.5.33
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/dist/index.css +1200 -1139
- package/dist/index.min.css +21 -13
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1256,220 +1256,421 @@ dfn {
|
|
|
1256
1256
|
color: var(--ina-secondary);
|
|
1257
1257
|
}
|
|
1258
1258
|
/**
|
|
1259
|
-
*
|
|
1259
|
+
* Dropdown Component Styles
|
|
1260
1260
|
* Menggunakan BEM naming convention dengan prefix "ina-"
|
|
1261
1261
|
*/
|
|
1262
1262
|
.ina-action-dropdown {
|
|
1263
|
-
/*
|
|
1263
|
+
/* Base dropdown container */
|
|
1264
1264
|
position: relative;
|
|
1265
1265
|
display: inline-block;
|
|
1266
1266
|
text-align: left;
|
|
1267
1267
|
}
|
|
1268
|
+
/* Trigger variants */
|
|
1269
|
+
/* Trigger variants */
|
|
1268
1270
|
.ina-action-dropdown__trigger {
|
|
1269
|
-
/* Default trigger button */
|
|
1270
|
-
padding: var(--ina-spacing-1);
|
|
1271
|
-
border-radius: var(--ina-radius-base);
|
|
1272
|
-
outline: none;
|
|
1273
1271
|
cursor: pointer;
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1272
|
+
transition: opacity var(--ina-transition-base);
|
|
1273
|
+
width: 100%; /* Ensure full width availability */
|
|
1274
|
+
}
|
|
1275
|
+
/* Standardized Trigger Button (Select-like look) */
|
|
1276
|
+
.ina-action-dropdown__trigger {
|
|
1277
|
+
width: 100%;
|
|
1278
|
+
display: flex;
|
|
1279
|
+
align-items: center;
|
|
1280
|
+
justify-content: space-between;
|
|
1281
|
+
border: 1px solid var(--ina-stroke-primary);
|
|
1282
|
+
border-radius: var(--ina-radius-lg);
|
|
1283
|
+
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
1284
|
+
background-color: var(--ina-background-primary);
|
|
1285
|
+
color: var(--ina-content-primary);
|
|
1286
|
+
cursor: pointer;
|
|
1287
|
+
font-size: var(--ina-font-sm);
|
|
1288
|
+
outline: none;
|
|
1289
|
+
transition: all var(--ina-transition-base);
|
|
1290
|
+
gap: var(--ina-spacing-2);
|
|
1291
|
+
min-height: 40px; /* Match standard input height */
|
|
1277
1292
|
}
|
|
1278
1293
|
.ina-action-dropdown__trigger:hover {
|
|
1279
|
-
background-color: var(--ina-
|
|
1294
|
+
background-color: var(--ina-background-secondary);
|
|
1280
1295
|
}
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1296
|
+
/* Active/Open State for Trigger Button */
|
|
1297
|
+
.ina-action-dropdown__trigger--open,
|
|
1298
|
+
.ina-action-dropdown__trigger:focus-within {
|
|
1299
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
1300
|
+
background: var(--ina-background-primary, #fff);
|
|
1301
|
+
box-shadow:
|
|
1302
|
+
0 0 0 2px #fff,
|
|
1303
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
1284
1304
|
}
|
|
1285
|
-
.ina-action-
|
|
1286
|
-
|
|
1287
|
-
|
|
1305
|
+
.ina-action-dropdown__label {
|
|
1306
|
+
flex: 1;
|
|
1307
|
+
text-align: left;
|
|
1308
|
+
overflow: hidden;
|
|
1309
|
+
text-overflow: ellipsis;
|
|
1310
|
+
white-space: nowrap;
|
|
1311
|
+
}
|
|
1312
|
+
.ina-action-dropdown__icon {
|
|
1313
|
+
flex-shrink: 0;
|
|
1314
|
+
color: var(--ina-content-tertiary);
|
|
1315
|
+
transition: transform var(--ina-transition-base);
|
|
1316
|
+
}
|
|
1317
|
+
.ina-action-dropdown__trigger--open .ina-action-dropdown__icon {
|
|
1318
|
+
transform: rotate(180deg);
|
|
1319
|
+
}
|
|
1320
|
+
.ina-action-dropdown__trigger--disabled {
|
|
1321
|
+
opacity: 0.6;
|
|
1322
|
+
cursor: not-allowed;
|
|
1323
|
+
pointer-events: none;
|
|
1288
1324
|
}
|
|
1325
|
+
/* Menu container */
|
|
1289
1326
|
.ina-action-dropdown__menu {
|
|
1290
|
-
/* Positioned dropdown menu */
|
|
1291
1327
|
position: absolute;
|
|
1292
|
-
|
|
1293
|
-
background-color: var(--ina-neutral-25); /* white */
|
|
1328
|
+
background-color: var(--ina-background-primary);
|
|
1294
1329
|
border: 1px solid var(--ina-stroke-primary);
|
|
1295
1330
|
border-radius: var(--ina-radius-lg);
|
|
1296
1331
|
box-shadow: var(--ina-shadow-lg);
|
|
1297
1332
|
z-index: 1000;
|
|
1333
|
+
opacity: 0;
|
|
1334
|
+
transform: translateY(-0.5rem);
|
|
1335
|
+
transition:
|
|
1336
|
+
opacity var(--ina-transition-duration-200) ease-out,
|
|
1337
|
+
transform var(--ina-transition-duration-200) ease-out;
|
|
1338
|
+
min-height: -moz-fit-content;
|
|
1339
|
+
min-height: fit-content;
|
|
1340
|
+
min-width: 100%; /* Default match trigger width */
|
|
1341
|
+
width: -moz-max-content;
|
|
1342
|
+
width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
|
|
1343
|
+
pointer-events: none;
|
|
1344
|
+
visibility: hidden;
|
|
1345
|
+
padding: var(--ina-spacing-0-5);
|
|
1346
|
+
margin-top: var(--ina-spacing-1);
|
|
1347
|
+
}
|
|
1348
|
+
.ina-action-dropdown__menu--visible {
|
|
1349
|
+
opacity: 1;
|
|
1350
|
+
pointer-events: auto;
|
|
1351
|
+
visibility: visible;
|
|
1352
|
+
transform: translateY(0);
|
|
1353
|
+
}
|
|
1354
|
+
/* ... existing styles ... */
|
|
1355
|
+
/* Width variants */
|
|
1356
|
+
.ina-action-dropdown__menu--width-auto {
|
|
1357
|
+
width: auto;
|
|
1358
|
+
min-width: 160px;
|
|
1359
|
+
}
|
|
1360
|
+
.ina-action-dropdown__menu--width-sm {
|
|
1361
|
+
min-width: 120px;
|
|
1362
|
+
width: auto;
|
|
1298
1363
|
}
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1364
|
+
.ina-action-dropdown__menu--width-md {
|
|
1365
|
+
min-width: 160px;
|
|
1366
|
+
width: auto;
|
|
1302
1367
|
}
|
|
1303
|
-
.ina-action-dropdown__menu--
|
|
1304
|
-
|
|
1368
|
+
.ina-action-dropdown__menu--width-lg {
|
|
1369
|
+
min-width: 200px;
|
|
1370
|
+
width: auto;
|
|
1305
1371
|
}
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1372
|
+
.ina-action-dropdown__menu--width-xl {
|
|
1373
|
+
min-width: 240px;
|
|
1374
|
+
width: auto;
|
|
1309
1375
|
}
|
|
1310
|
-
.ina-action-dropdown__menu--
|
|
1311
|
-
|
|
1376
|
+
.ina-action-dropdown__menu--width-full {
|
|
1377
|
+
width: 100%;
|
|
1312
1378
|
}
|
|
1379
|
+
/* Menu list */
|
|
1313
1380
|
.ina-action-dropdown__list {
|
|
1314
|
-
|
|
1315
|
-
padding: var(--ina-spacing-1) 0; /* py-1 equivalent */
|
|
1381
|
+
padding: var(--ina-spacing-1) 0;
|
|
1316
1382
|
margin: 0;
|
|
1317
1383
|
list-style: none;
|
|
1384
|
+
background-color: inherit;
|
|
1318
1385
|
}
|
|
1386
|
+
/* Menu items */
|
|
1319
1387
|
.ina-action-dropdown__item {
|
|
1320
|
-
/* Individual list item */
|
|
1321
1388
|
width: 100%;
|
|
1322
1389
|
text-align: left;
|
|
1323
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
1390
|
+
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
1324
1391
|
font-size: var(--ina-font-sm);
|
|
1392
|
+
color: var(--ina-content-primary);
|
|
1393
|
+
background: none;
|
|
1394
|
+
border: none;
|
|
1395
|
+
cursor: pointer;
|
|
1325
1396
|
-webkit-user-select: none;
|
|
1326
1397
|
-moz-user-select: none;
|
|
1327
|
-
user-select: none;
|
|
1328
|
-
|
|
1329
|
-
|
|
1398
|
+
user-select: none;
|
|
1399
|
+
transition: background-color var(--ina-transition-base);
|
|
1400
|
+
display: flex;
|
|
1401
|
+
align-items: center;
|
|
1402
|
+
gap: var(--ina-spacing-2);
|
|
1403
|
+
margin-bottom: 0 !important;
|
|
1330
1404
|
}
|
|
1331
1405
|
.ina-action-dropdown__item:hover {
|
|
1332
|
-
background-color: var(--ina-
|
|
1406
|
+
background-color: var(--ina-background-secondary);
|
|
1333
1407
|
}
|
|
1334
1408
|
.ina-action-dropdown__item:focus {
|
|
1335
1409
|
outline: none;
|
|
1336
|
-
background-color: var(--ina-
|
|
1337
|
-
|
|
1338
|
-
/* Animation untuk dropdown appearance */
|
|
1339
|
-
.ina-action-dropdown__menu {
|
|
1340
|
-
animation: fadeIn 150ms ease-in-out;
|
|
1410
|
+
background-color: var(--ina-primary-100);
|
|
1411
|
+
color: var(--ina-primary-600);
|
|
1341
1412
|
}
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
opacity: 0;
|
|
1345
|
-
transform: scale(0.95);
|
|
1346
|
-
}
|
|
1347
|
-
100% {
|
|
1348
|
-
opacity: 1;
|
|
1349
|
-
transform: scale(1);
|
|
1350
|
-
}
|
|
1413
|
+
.ina-action-dropdown__item:active {
|
|
1414
|
+
background-color: var(--ina-background-tertiary);
|
|
1351
1415
|
}
|
|
1352
|
-
/*
|
|
1353
|
-
.ina-action-
|
|
1354
|
-
|
|
1416
|
+
/* Item variants */
|
|
1417
|
+
.ina-action-dropdown__item--danger {
|
|
1418
|
+
color: var(--ina-negative-600);
|
|
1355
1419
|
}
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
.ina-action-dropdown__item {
|
|
1359
|
-
font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
|
|
1360
|
-
}
|
|
1361
|
-
|
|
1362
|
-
.ina-action-dropdown__menu {
|
|
1363
|
-
width: 9rem; /* Sedikit lebih kecil di mobile */
|
|
1364
|
-
}
|
|
1420
|
+
.ina-action-dropdown__item--danger:hover {
|
|
1421
|
+
background-color: var(--ina-negative-100);
|
|
1365
1422
|
}
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
.ina-action-dropdown__menu {
|
|
1369
|
-
background-color: var(--ina-neutral-900);
|
|
1370
|
-
border-color: var(--ina-neutral-700);
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
.ina-action-dropdown__item:hover {
|
|
1374
|
-
background-color: var(--ina-neutral-800);
|
|
1375
|
-
}
|
|
1376
|
-
|
|
1377
|
-
.ina-action-dropdown__trigger:hover {
|
|
1378
|
-
background-color: var(--ina-neutral-800);
|
|
1379
|
-
}
|
|
1380
|
-
} */
|
|
1381
|
-
/**
|
|
1382
|
-
* Alert Component Styles
|
|
1383
|
-
* Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
|
|
1384
|
-
*/
|
|
1385
|
-
.ina-alert {
|
|
1386
|
-
/* Base alert styling */
|
|
1387
|
-
width: 100%;
|
|
1388
|
-
display: flex;
|
|
1389
|
-
align-items: flex-start;
|
|
1390
|
-
gap: var(--ina-spacing-2);
|
|
1391
|
-
border-radius: var(--ina-radius-lg);
|
|
1392
|
-
padding: var(--ina-spacing-4);
|
|
1393
|
-
border: 1px solid;
|
|
1394
|
-
box-sizing: border-box;
|
|
1423
|
+
.ina-action-dropdown__item--warning {
|
|
1424
|
+
color: var(--ina-warning-600);
|
|
1395
1425
|
}
|
|
1396
|
-
.ina-
|
|
1397
|
-
|
|
1398
|
-
flex-shrink: 0;
|
|
1399
|
-
display: flex;
|
|
1400
|
-
align-items: center;
|
|
1401
|
-
justify-content: center;
|
|
1426
|
+
.ina-action-dropdown__item--warning:hover {
|
|
1427
|
+
background-color: var(--ina-warning-100);
|
|
1402
1428
|
}
|
|
1403
|
-
.ina-
|
|
1404
|
-
|
|
1405
|
-
display: flex;
|
|
1406
|
-
flex-direction: column;
|
|
1407
|
-
flex: 1;
|
|
1408
|
-
gap: 0;
|
|
1429
|
+
.ina-action-dropdown__item--success {
|
|
1430
|
+
color: var(--ina-positive-600);
|
|
1409
1431
|
}
|
|
1410
|
-
.ina-
|
|
1411
|
-
|
|
1412
|
-
display: flex;
|
|
1413
|
-
flex-direction: column;
|
|
1414
|
-
gap: 0;
|
|
1432
|
+
.ina-action-dropdown__item--success:hover {
|
|
1433
|
+
background-color: var(--ina-positive-100);
|
|
1415
1434
|
}
|
|
1416
|
-
.ina-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
line-height: var(--ina-line-height-sm);
|
|
1421
|
-
margin: 0;
|
|
1435
|
+
.ina-action-dropdown__item--disabled {
|
|
1436
|
+
opacity: 0.5;
|
|
1437
|
+
cursor: not-allowed;
|
|
1438
|
+
color: var(--ina-content-tertiary);
|
|
1422
1439
|
}
|
|
1423
|
-
.ina-
|
|
1424
|
-
|
|
1425
|
-
font-size: var(--ina-font-xs);
|
|
1426
|
-
line-height: var(--ina-line-height-xs);
|
|
1427
|
-
margin: 0;
|
|
1428
|
-
margin-top: var(--ina-spacing-1);
|
|
1429
|
-
color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
1440
|
+
.ina-action-dropdown__item--disabled:hover {
|
|
1441
|
+
background-color: transparent;
|
|
1430
1442
|
}
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
margin-left: var(--ina-spacing-4);
|
|
1443
|
+
/* Item with icons */
|
|
1444
|
+
.ina-action-dropdown__item-icon {
|
|
1434
1445
|
flex-shrink: 0;
|
|
1446
|
+
width: 16px;
|
|
1447
|
+
height: 16px;
|
|
1435
1448
|
}
|
|
1436
|
-
.ina-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
background: none;
|
|
1440
|
-
border: none;
|
|
1441
|
-
cursor: pointer;
|
|
1442
|
-
padding: 0;
|
|
1443
|
-
display: flex;
|
|
1444
|
-
align-items: center;
|
|
1445
|
-
justify-content: center;
|
|
1446
|
-
color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
1447
|
-
|
|
1448
|
-
/* Focus styles */
|
|
1449
|
-
outline: none;
|
|
1449
|
+
.ina-action-dropdown__item-content {
|
|
1450
|
+
flex: 1;
|
|
1451
|
+
min-width: 0;
|
|
1450
1452
|
}
|
|
1451
|
-
.ina-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1453
|
+
.ina-action-dropdown__item-description {
|
|
1454
|
+
font-size: var(--ina-font-xs);
|
|
1455
|
+
color: var(--ina-content-secondary);
|
|
1456
|
+
margin-top: var(--ina-spacing-0-5);
|
|
1455
1457
|
}
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1458
|
+
/* Separators */
|
|
1459
|
+
.ina-action-dropdown__separator {
|
|
1460
|
+
height: 1px;
|
|
1461
|
+
background-color: var(--ina-stroke-primary);
|
|
1462
|
+
margin: var(--ina-spacing-1) var(--ina-spacing-4);
|
|
1459
1463
|
}
|
|
1460
|
-
|
|
1461
|
-
|
|
1464
|
+
/* Dividers */
|
|
1465
|
+
.ina-action-dropdown__divider {
|
|
1466
|
+
height: var(--ina-spacing-4);
|
|
1462
1467
|
}
|
|
1463
|
-
/*
|
|
1464
|
-
.ina-
|
|
1465
|
-
|
|
1466
|
-
|
|
1468
|
+
/* Animation variants */
|
|
1469
|
+
.ina-action-dropdown__menu--animation-fade {
|
|
1470
|
+
transform: translateY(0);
|
|
1471
|
+
transition: opacity var(--ina-transition-duration-200) ease-out;
|
|
1467
1472
|
}
|
|
1468
|
-
.ina-
|
|
1469
|
-
|
|
1470
|
-
|
|
1473
|
+
.ina-action-dropdown__menu--animation-slide-up {
|
|
1474
|
+
transform: translateY(1rem);
|
|
1475
|
+
transition:
|
|
1476
|
+
opacity var(--ina-transition-duration-200) ease-out,
|
|
1477
|
+
transform var(--ina-transition-duration-200) ease-out;
|
|
1471
1478
|
}
|
|
1472
|
-
.ina-
|
|
1479
|
+
.ina-action-dropdown__menu--animation-slide-down {
|
|
1480
|
+
transform: translateY(-1rem);
|
|
1481
|
+
transition:
|
|
1482
|
+
opacity var(--ina-transition-duration-200) ease-out,
|
|
1483
|
+
transform var(--ina-transition-duration-200) ease-out;
|
|
1484
|
+
}
|
|
1485
|
+
.ina-action-dropdown__menu--animation-scale {
|
|
1486
|
+
transform: scale(0.95);
|
|
1487
|
+
transition:
|
|
1488
|
+
opacity var(--ina-transition-duration-200) ease-out,
|
|
1489
|
+
transform var(--ina-transition-duration-200) ease-out;
|
|
1490
|
+
}
|
|
1491
|
+
/* All visible states */
|
|
1492
|
+
.ina-action-dropdown__menu--animation-fade.ina-action-dropdown__menu--visible,
|
|
1493
|
+
.ina-action-dropdown__menu--animation-slide-up.ina-action-dropdown__menu--visible,
|
|
1494
|
+
.ina-action-dropdown__menu--animation-slide-down.ina-action-dropdown__menu--visible,
|
|
1495
|
+
.ina-action-dropdown__menu--animation-scale.ina-action-dropdown__menu--visible {
|
|
1496
|
+
transform: translateY(0) scale(1);
|
|
1497
|
+
}
|
|
1498
|
+
/* Backdrop click area */
|
|
1499
|
+
.ina-action-dropdown__backdrop {
|
|
1500
|
+
position: fixed;
|
|
1501
|
+
inset: 0;
|
|
1502
|
+
z-index: 999;
|
|
1503
|
+
}
|
|
1504
|
+
/* Grouped items */
|
|
1505
|
+
.ina-action-dropdown__group {
|
|
1506
|
+
margin: var(--ina-spacing-2) 0;
|
|
1507
|
+
}
|
|
1508
|
+
.ina-action-dropdown__group:first-child {
|
|
1509
|
+
margin-top: 0;
|
|
1510
|
+
}
|
|
1511
|
+
.ina-action-dropdown__group:last-child {
|
|
1512
|
+
margin-bottom: 0;
|
|
1513
|
+
}
|
|
1514
|
+
.ina-action-dropdown__group-header {
|
|
1515
|
+
padding: var(--ina-spacing-1) var(--ina-spacing-4) var(--ina-spacing-0-5);
|
|
1516
|
+
font-size: var(--ina-font-xs);
|
|
1517
|
+
font-weight: var(--ina-font-medium);
|
|
1518
|
+
color: var(--ina-content-secondary);
|
|
1519
|
+
text-transform: uppercase;
|
|
1520
|
+
letter-spacing: 0.05em;
|
|
1521
|
+
}
|
|
1522
|
+
/* Loading states */
|
|
1523
|
+
.ina-action-dropdown__loading {
|
|
1524
|
+
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
1525
|
+
text-align: center;
|
|
1526
|
+
color: var(--ina-content-secondary);
|
|
1527
|
+
font-size: var(--ina-font-sm);
|
|
1528
|
+
}
|
|
1529
|
+
.ina-action-dropdown__spinner {
|
|
1530
|
+
display: inline-block;
|
|
1531
|
+
width: 16px;
|
|
1532
|
+
height: 16px;
|
|
1533
|
+
border: 2px solid var(--ina-primary-100);
|
|
1534
|
+
border-radius: 50%;
|
|
1535
|
+
border-top-color: var(--ina-primary-500);
|
|
1536
|
+
animation: spin 1s linear infinite;
|
|
1537
|
+
}
|
|
1538
|
+
@keyframes spin {
|
|
1539
|
+
to {
|
|
1540
|
+
transform: rotate(360deg);
|
|
1541
|
+
}
|
|
1542
|
+
}
|
|
1543
|
+
/* Responsive adjustments */
|
|
1544
|
+
@media (max-width: 640px) {
|
|
1545
|
+
.ina-action-dropdown__menu--width-lg,
|
|
1546
|
+
.ina-action-dropdown__menu--width-xl {
|
|
1547
|
+
width: calc(100vw - var(--ina-spacing-8));
|
|
1548
|
+
max-width: 300px;
|
|
1549
|
+
}
|
|
1550
|
+
}
|
|
1551
|
+
@media (max-width: 768px) {
|
|
1552
|
+
.ina-action-dropdown__item {
|
|
1553
|
+
padding: var(--ina-spacing-3) var(--ina-spacing-4);
|
|
1554
|
+
font-size: var(--ina-font-base);
|
|
1555
|
+
}
|
|
1556
|
+
}
|
|
1557
|
+
/* Scrollable content */
|
|
1558
|
+
.ina-action-dropdown__menu--scrollable {
|
|
1559
|
+
max-height: 300px;
|
|
1560
|
+
overflow-y: auto;
|
|
1561
|
+
scrollbar-width: thin;
|
|
1562
|
+
scrollbar-color: var(--ina-content-tertiary) var(--ina-background-tertiary);
|
|
1563
|
+
}
|
|
1564
|
+
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar {
|
|
1565
|
+
width: 6px;
|
|
1566
|
+
}
|
|
1567
|
+
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-track {
|
|
1568
|
+
background: var(--ina-background-tertiary);
|
|
1569
|
+
border-radius: 3px;
|
|
1570
|
+
}
|
|
1571
|
+
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb {
|
|
1572
|
+
background-color: var(--ina-content-tertiary);
|
|
1573
|
+
border-radius: 3px;
|
|
1574
|
+
}
|
|
1575
|
+
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb:hover {
|
|
1576
|
+
background-color: var(--ina-content-secondary);
|
|
1577
|
+
}
|
|
1578
|
+
/* Focus management */
|
|
1579
|
+
.ina-action-dropdown__menu:focus-within .ina-action-dropdown__item:focus {
|
|
1580
|
+
background-color: var(--ina-primary-100);
|
|
1581
|
+
}
|
|
1582
|
+
/**
|
|
1583
|
+
* Alert Component Styles
|
|
1584
|
+
* Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
|
|
1585
|
+
*/
|
|
1586
|
+
.ina-alert {
|
|
1587
|
+
/* Base alert styling */
|
|
1588
|
+
width: 100%;
|
|
1589
|
+
display: flex;
|
|
1590
|
+
align-items: flex-start;
|
|
1591
|
+
gap: var(--ina-spacing-2);
|
|
1592
|
+
border-radius: var(--ina-radius-lg);
|
|
1593
|
+
padding: var(--ina-spacing-4);
|
|
1594
|
+
border: 1px solid;
|
|
1595
|
+
box-sizing: border-box;
|
|
1596
|
+
}
|
|
1597
|
+
.ina-alert__icon {
|
|
1598
|
+
/* Container untuk icon/variant */
|
|
1599
|
+
flex-shrink: 0;
|
|
1600
|
+
display: flex;
|
|
1601
|
+
align-items: center;
|
|
1602
|
+
justify-content: center;
|
|
1603
|
+
}
|
|
1604
|
+
.ina-alert__content {
|
|
1605
|
+
/* Main content area */
|
|
1606
|
+
display: flex;
|
|
1607
|
+
flex-direction: column;
|
|
1608
|
+
flex: 1;
|
|
1609
|
+
gap: 0;
|
|
1610
|
+
}
|
|
1611
|
+
.ina-alert__text-section {
|
|
1612
|
+
/* Container untuk title dan description */
|
|
1613
|
+
display: flex;
|
|
1614
|
+
flex-direction: column;
|
|
1615
|
+
gap: 0;
|
|
1616
|
+
}
|
|
1617
|
+
.ina-alert__title {
|
|
1618
|
+
/* Alert title */
|
|
1619
|
+
font-weight: var(--ina-font-semibold);
|
|
1620
|
+
font-size: var(--ina-font-sm);
|
|
1621
|
+
line-height: var(--ina-line-height-sm);
|
|
1622
|
+
margin: 0;
|
|
1623
|
+
}
|
|
1624
|
+
.ina-alert__description {
|
|
1625
|
+
/* Alert description/subtitle */
|
|
1626
|
+
font-size: var(--ina-font-xs);
|
|
1627
|
+
line-height: var(--ina-line-height-xs);
|
|
1628
|
+
margin: 0;
|
|
1629
|
+
margin-top: var(--ina-spacing-1);
|
|
1630
|
+
color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
1631
|
+
}
|
|
1632
|
+
.ina-alert__action {
|
|
1633
|
+
/* Optional action node area */
|
|
1634
|
+
margin-left: var(--ina-spacing-4);
|
|
1635
|
+
flex-shrink: 0;
|
|
1636
|
+
}
|
|
1637
|
+
.ina-alert__close-button {
|
|
1638
|
+
/* Close button */
|
|
1639
|
+
flex-shrink: 0;
|
|
1640
|
+
background: none;
|
|
1641
|
+
border: none;
|
|
1642
|
+
cursor: pointer;
|
|
1643
|
+
padding: 0;
|
|
1644
|
+
display: flex;
|
|
1645
|
+
align-items: center;
|
|
1646
|
+
justify-content: center;
|
|
1647
|
+
color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
1648
|
+
|
|
1649
|
+
/* Focus styles */
|
|
1650
|
+
outline: none;
|
|
1651
|
+
}
|
|
1652
|
+
.ina-alert__close-button:focus {
|
|
1653
|
+
outline: 2px solid var(--ina-guide-500);
|
|
1654
|
+
outline-offset: 2px;
|
|
1655
|
+
border-radius: var(--ina-radius-sm);
|
|
1656
|
+
}
|
|
1657
|
+
.ina-alert__close-icon {
|
|
1658
|
+
/* Icon di dalam close button */
|
|
1659
|
+
transition: stroke-width 150ms ease;
|
|
1660
|
+
}
|
|
1661
|
+
.ina-alert__close-button:hover .ina-alert__close-icon {
|
|
1662
|
+
stroke-width: 2;
|
|
1663
|
+
}
|
|
1664
|
+
/* Variant modifiers */
|
|
1665
|
+
.ina-alert--neutral {
|
|
1666
|
+
background-color: var(--ina-background-primary, var(--ina-neutral-25));
|
|
1667
|
+
border-color: var(--ina-stroke-tertiary);
|
|
1668
|
+
}
|
|
1669
|
+
.ina-alert--neutral .ina-alert__icon,
|
|
1670
|
+
.ina-alert--neutral .ina-alert__title {
|
|
1671
|
+
color: var(--ina-content-primary, var(--ina-neutral-800));
|
|
1672
|
+
}
|
|
1673
|
+
.ina-alert--info {
|
|
1473
1674
|
background-color: var(--ina-guide-100, var(--ina-blue-100));
|
|
1474
1675
|
border-color: var(--ina-guide-500, var(--ina-blue-500));
|
|
1475
1676
|
}
|
|
@@ -1902,6 +2103,133 @@ dfn {
|
|
|
1902
2103
|
color: var(--ina-error-400);
|
|
1903
2104
|
}
|
|
1904
2105
|
} */
|
|
2106
|
+
/**
|
|
2107
|
+
* BasicDropdown Component Styles
|
|
2108
|
+
* Menggunakan BEM naming convention dengan prefix "ina-"
|
|
2109
|
+
*/
|
|
2110
|
+
.ina-basic-dropdown {
|
|
2111
|
+
position: relative;
|
|
2112
|
+
display: inline-block;
|
|
2113
|
+
width: auto;
|
|
2114
|
+
}
|
|
2115
|
+
/* Trigger Container */
|
|
2116
|
+
.ina-basic-dropdown__trigger {
|
|
2117
|
+
display: inline-block;
|
|
2118
|
+
width: 100%;
|
|
2119
|
+
}
|
|
2120
|
+
/* Default Trigger Button (Matches SelectDropdown) */
|
|
2121
|
+
.ina-basic-dropdown__trigger-button {
|
|
2122
|
+
width: 100%;
|
|
2123
|
+
display: flex;
|
|
2124
|
+
align-items: center;
|
|
2125
|
+
justify-content: space-between;
|
|
2126
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
2127
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
2128
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
|
|
2129
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
2130
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
2131
|
+
cursor: pointer;
|
|
2132
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
2133
|
+
outline: none;
|
|
2134
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
2135
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
2136
|
+
min-height: 40px;
|
|
2137
|
+
}
|
|
2138
|
+
.ina-basic-dropdown__trigger-button:hover {
|
|
2139
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
2140
|
+
}
|
|
2141
|
+
/* Active/Open State for Trigger Button */
|
|
2142
|
+
.ina-basic-dropdown__trigger-button--open,
|
|
2143
|
+
.ina-basic-dropdown__trigger-button:focus-visible {
|
|
2144
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
2145
|
+
background: var(--ina-background-primary, #ffffff);
|
|
2146
|
+
box-shadow:
|
|
2147
|
+
0 0 0 2px #fff,
|
|
2148
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
2149
|
+
}
|
|
2150
|
+
.ina-basic-dropdown__trigger-content {
|
|
2151
|
+
flex: 1;
|
|
2152
|
+
text-align: left;
|
|
2153
|
+
overflow: hidden;
|
|
2154
|
+
text-overflow: ellipsis;
|
|
2155
|
+
white-space: nowrap;
|
|
2156
|
+
}
|
|
2157
|
+
.ina-basic-dropdown__trigger-icon {
|
|
2158
|
+
flex-shrink: 0;
|
|
2159
|
+
color: var(--ina-content-secondary, #525252);
|
|
2160
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
2161
|
+
}
|
|
2162
|
+
.ina-basic-dropdown__trigger-button--open .ina-basic-dropdown__trigger-icon {
|
|
2163
|
+
transform: rotate(180deg);
|
|
2164
|
+
}
|
|
2165
|
+
.ina-basic-dropdown__trigger-button:disabled {
|
|
2166
|
+
background-color: transparent;
|
|
2167
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
2168
|
+
cursor: not-allowed;
|
|
2169
|
+
opacity: 0.6;
|
|
2170
|
+
}
|
|
2171
|
+
/* Panel Container */
|
|
2172
|
+
.ina-basic-dropdown__panel {
|
|
2173
|
+
position: absolute;
|
|
2174
|
+
z-index: 10004;
|
|
2175
|
+
min-width: 100%;
|
|
2176
|
+
width: -moz-max-content;
|
|
2177
|
+
width: max-content;
|
|
2178
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
2179
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
2180
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
2181
|
+
box-shadow:
|
|
2182
|
+
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
2183
|
+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
2184
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
2185
|
+
margin: var(--ina-spacing-1, 0.25rem) 0;
|
|
2186
|
+
animation: basicDropdownFadeIn var(--ina-transition-duration-200) ease-out;
|
|
2187
|
+
}
|
|
2188
|
+
@keyframes basicDropdownFadeIn {
|
|
2189
|
+
from {
|
|
2190
|
+
opacity: 0;
|
|
2191
|
+
transform: translateY(-4px);
|
|
2192
|
+
}
|
|
2193
|
+
to {
|
|
2194
|
+
opacity: 1;
|
|
2195
|
+
transform: translateY(0);
|
|
2196
|
+
}
|
|
2197
|
+
}
|
|
2198
|
+
/* Positioning variants */
|
|
2199
|
+
.ina-basic-dropdown__panel--bottom-start {
|
|
2200
|
+
top: 100%;
|
|
2201
|
+
left: 0;
|
|
2202
|
+
}
|
|
2203
|
+
.ina-basic-dropdown__panel--bottom-end {
|
|
2204
|
+
top: 100%;
|
|
2205
|
+
right: 0;
|
|
2206
|
+
}
|
|
2207
|
+
.ina-basic-dropdown__panel--top-start {
|
|
2208
|
+
bottom: 100%;
|
|
2209
|
+
left: 0;
|
|
2210
|
+
}
|
|
2211
|
+
.ina-basic-dropdown__panel--top-end {
|
|
2212
|
+
bottom: 100%;
|
|
2213
|
+
right: 0;
|
|
2214
|
+
}
|
|
2215
|
+
.ina-basic-dropdown__panel--bottom {
|
|
2216
|
+
top: 100%;
|
|
2217
|
+
left: 50%;
|
|
2218
|
+
transform: translateX(-50%);
|
|
2219
|
+
}
|
|
2220
|
+
.ina-basic-dropdown__panel--top {
|
|
2221
|
+
bottom: 100%;
|
|
2222
|
+
left: 50%;
|
|
2223
|
+
transform: translateX(-50%);
|
|
2224
|
+
}
|
|
2225
|
+
/* Responsive adjustments */
|
|
2226
|
+
@media (max-width: 767px) {
|
|
2227
|
+
.ina-basic-dropdown__trigger-button {
|
|
2228
|
+
height: 36px;
|
|
2229
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
2230
|
+
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
2231
|
+
}
|
|
2232
|
+
}
|
|
1905
2233
|
dialog.bottom-sheet-dropdown {
|
|
1906
2234
|
position: fixed;
|
|
1907
2235
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
@@ -3066,7 +3394,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
3066
3394
|
/* Main container - label wrapper */
|
|
3067
3395
|
display: flex;
|
|
3068
3396
|
align-items: center;
|
|
3069
|
-
gap: var(--ina-spacing-3);
|
|
3397
|
+
gap: var(--ina-spacing-3, 0.75rem);
|
|
3070
3398
|
}
|
|
3071
3399
|
.ina-checkbox.ina-checkbox--with-subtext {
|
|
3072
3400
|
/* Align items to flex-start when subtext is present */
|
|
@@ -3085,10 +3413,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
3085
3413
|
height: 1rem; /* h-4 */
|
|
3086
3414
|
max-width: 1rem;
|
|
3087
3415
|
max-height: 1rem;
|
|
3088
|
-
font-size: var(--ina-font-2xs);
|
|
3089
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3090
|
-
background-color: var(--ina-background-primary);
|
|
3091
|
-
border-radius: var(--ina-radius-base);
|
|
3416
|
+
font-size: var(--ina-font-2xs, 0.625rem);
|
|
3417
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
3418
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3419
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
3092
3420
|
display: flex;
|
|
3093
3421
|
align-items: center;
|
|
3094
3422
|
justify-content: center;
|
|
@@ -3108,8 +3436,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
3108
3436
|
flex-direction: column;
|
|
3109
3437
|
}
|
|
3110
3438
|
.ina-checkbox__label {
|
|
3111
|
-
font-size: var(--ina-font-sm);
|
|
3112
|
-
color: var(--ina-content-primary);
|
|
3439
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3440
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3113
3441
|
margin: 0;
|
|
3114
3442
|
}
|
|
3115
3443
|
@media (min-width: 768px) {
|
|
@@ -3118,8 +3446,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
3118
3446
|
}
|
|
3119
3447
|
}
|
|
3120
3448
|
.ina-checkbox__subtext {
|
|
3121
|
-
font-size: var(--ina-font-xs);
|
|
3122
|
-
color: var(--ina-content-secondary);
|
|
3449
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
3450
|
+
color: var(--ina-content-secondary, #525252);
|
|
3123
3451
|
margin-top: 0.125rem;
|
|
3124
3452
|
margin: 0;
|
|
3125
3453
|
}
|
|
@@ -3130,19 +3458,19 @@ dialog.bottom-sheet-dropdown {
|
|
|
3130
3458
|
}
|
|
3131
3459
|
/* Modifier for checked state */
|
|
3132
3460
|
.ina-checkbox__box--checked {
|
|
3133
|
-
background-color: var(--ina-content-primary);
|
|
3134
|
-
border-color: var(--ina-content-primary);
|
|
3461
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
3462
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
3135
3463
|
}
|
|
3136
3464
|
/* Modifier for indeterminate state */
|
|
3137
3465
|
.ina-checkbox__box--indeterminate {
|
|
3138
|
-
background-color: var(--ina-content-primary);
|
|
3139
|
-
border-color: var(--ina-content-primary);
|
|
3466
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
3467
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
3140
3468
|
}
|
|
3141
3469
|
/* Modifier for invalid state */
|
|
3142
3470
|
.ina-checkbox__box--invalid {
|
|
3143
3471
|
border-color: var(
|
|
3144
3472
|
--ina-sentiment-negative-500,
|
|
3145
|
-
var(--ina-error-500)
|
|
3473
|
+
var(--ina-error-500, #f02d2d)
|
|
3146
3474
|
) !important;
|
|
3147
3475
|
}
|
|
3148
3476
|
/* Modifier for disabled state */
|
|
@@ -3152,59 +3480,59 @@ dialog.bottom-sheet-dropdown {
|
|
|
3152
3480
|
.ina-checkbox--disabled .ina-checkbox__box--unchecked,
|
|
3153
3481
|
.ina-checkbox--disabled .ina-checkbox__box--checked,
|
|
3154
3482
|
.ina-checkbox--disabled .ina-checkbox__box--indeterminate {
|
|
3155
|
-
background-color: var(--ina-background-tertiary);
|
|
3156
|
-
border-color: var(--ina-stroke-secondary);
|
|
3483
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
3484
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3157
3485
|
}
|
|
3158
3486
|
.ina-checkbox--disabled .ina-checkbox__box--unchecked {
|
|
3159
|
-
background-color: var(--ina-background-tertiary);
|
|
3160
|
-
border-color: var(--ina-stroke-secondary);
|
|
3487
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
3488
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3161
3489
|
}
|
|
3162
3490
|
.ina-checkbox--disabled .ina-checkbox__label {
|
|
3163
|
-
color: var(--ina-content-primary);
|
|
3491
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3164
3492
|
}
|
|
3165
3493
|
.ina-checkbox--disabled .ina-checkbox__icon {
|
|
3166
|
-
color: var(--ina-stroke-secondary);
|
|
3494
|
+
color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3167
3495
|
}
|
|
3168
3496
|
/* Default unchecked state hover effect */
|
|
3169
3497
|
.ina-checkbox__box--unchecked:hover {
|
|
3170
|
-
border-color: var(--ina-stroke-secondary);
|
|
3498
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3171
3499
|
}
|
|
3172
3500
|
/* Icon styling */
|
|
3173
3501
|
.ina-checkbox__icon {
|
|
3174
|
-
color: var(--ina-neutral-25); /* white */
|
|
3502
|
+
color: var(--ina-neutral-25, #ffffff); /* white */
|
|
3175
3503
|
display: flex;
|
|
3176
3504
|
align-items: center;
|
|
3177
3505
|
justify-content: center;
|
|
3178
3506
|
}
|
|
3179
3507
|
/* Disabled icon color */
|
|
3180
3508
|
.ina-checkbox--disabled .ina-checkbox__icon {
|
|
3181
|
-
color: var(--ina-neutral-400);
|
|
3509
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
3182
3510
|
}
|
|
3183
3511
|
/* Focus state menggunakan peer selector untuk accessibility */
|
|
3184
3512
|
/* Focus state menggunakan peer selector untuk accessibility */
|
|
3185
3513
|
.ina-checkbox__input:focus + .ina-checkbox__box {
|
|
3186
3514
|
outline: none;
|
|
3187
3515
|
box-shadow:
|
|
3188
|
-
0 0 0
|
|
3189
|
-
0 0 0
|
|
3516
|
+
0 0 0 2px #fff,
|
|
3517
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
3190
3518
|
}
|
|
3191
3519
|
/* Focus state untuk indeterminate checkbox */
|
|
3192
3520
|
.ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
|
|
3193
3521
|
outline: none;
|
|
3194
3522
|
box-shadow:
|
|
3195
|
-
0 0 0
|
|
3196
|
-
0 0 0
|
|
3523
|
+
0 0 0 2px #fff,
|
|
3524
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
3197
3525
|
}
|
|
3198
3526
|
/* Focus state untuk checked checkbox */
|
|
3199
3527
|
.ina-checkbox__input:focus + .ina-checkbox__box--checked {
|
|
3200
3528
|
outline: none;
|
|
3201
3529
|
box-shadow:
|
|
3202
|
-
0 0 0
|
|
3203
|
-
0 0 0
|
|
3530
|
+
0 0 0 2px #fff,
|
|
3531
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
3204
3532
|
}
|
|
3205
3533
|
/* Invalid state yang tidak disabled */
|
|
3206
3534
|
.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
|
|
3207
|
-
border-color: var(--ina-negative-600, var(--ina-error-600));
|
|
3535
|
+
border-color: var(--ina-negative-600, var(--ina-error-600, #f02d2d));
|
|
3208
3536
|
}
|
|
3209
3537
|
/* Interactive states */
|
|
3210
3538
|
.ina-checkbox:not(.ina-checkbox--disabled) {
|
|
@@ -3699,31 +4027,31 @@ dialog.bottom-sheet-dropdown {
|
|
|
3699
4027
|
.ina-date-picker {
|
|
3700
4028
|
position: relative;
|
|
3701
4029
|
display: inline-block;
|
|
3702
|
-
background-color: var(--ina-white);
|
|
4030
|
+
background-color: var(--ina-white, #ffffff);
|
|
3703
4031
|
}
|
|
3704
4032
|
/* Trigger Button - Same layout as TextField wrapper */
|
|
3705
4033
|
.ina-date-picker__trigger {
|
|
3706
4034
|
display: flex;
|
|
3707
4035
|
align-items: center;
|
|
3708
|
-
gap: var(--ina-spacing-2);
|
|
4036
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
3709
4037
|
width: 100%;
|
|
3710
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
3711
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3712
|
-
border-radius: var(--ina-radius-lg);
|
|
3713
|
-
background-color: var(--ina-background-primary);
|
|
4038
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
4039
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4040
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4041
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3714
4042
|
cursor: pointer;
|
|
3715
|
-
transition: all var(--ina-transition-base);
|
|
4043
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
3716
4044
|
}
|
|
3717
4045
|
.ina-date-picker__label {
|
|
3718
|
-
font-size: var(--ina-font-sm);
|
|
3719
|
-
font-weight: var(--ina-font-medium);
|
|
3720
|
-
color: var(--ina-content-primary);
|
|
3721
|
-
margin-bottom: var(--ina-spacing-2);
|
|
4046
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
4047
|
+
font-weight: var(--ina-font-medium, 500);
|
|
4048
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
4049
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
3722
4050
|
display: block;
|
|
3723
4051
|
}
|
|
3724
4052
|
.ina-date-picker__required {
|
|
3725
|
-
color: var(--ina-negative-500);
|
|
3726
|
-
margin-left: var(--ina-spacing-1);
|
|
4053
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
4054
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
3727
4055
|
}
|
|
3728
4056
|
/* Size variants */
|
|
3729
4057
|
.ina-date-picker__trigger--size-sm {
|
|
@@ -3753,52 +4081,52 @@ dialog.bottom-sheet-dropdown {
|
|
|
3753
4081
|
}
|
|
3754
4082
|
}
|
|
3755
4083
|
.ina-date-picker__trigger:hover {
|
|
3756
|
-
background-color: var(--ina-background-secondary);
|
|
4084
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3757
4085
|
}
|
|
3758
4086
|
.ina-date-picker__trigger:focus {
|
|
3759
4087
|
box-shadow:
|
|
3760
|
-
0 0 0
|
|
3761
|
-
0 0 0
|
|
4088
|
+
0 0 0 2px #fff,
|
|
4089
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
3762
4090
|
outline: none;
|
|
3763
|
-
background-color: var(--ina-background-primary);
|
|
4091
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3764
4092
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
3765
4093
|
}
|
|
3766
4094
|
.ina-date-picker__trigger--disabled {
|
|
3767
|
-
background-color: var(--ina-background-secondary);
|
|
4095
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3768
4096
|
cursor: not-allowed;
|
|
3769
4097
|
opacity: 0.6;
|
|
3770
4098
|
}
|
|
3771
4099
|
.ina-date-picker__trigger--disabled:hover {
|
|
3772
|
-
background-color: var(--ina-background-secondary);
|
|
3773
|
-
border-color: var(--ina-stroke-primary);
|
|
4100
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4101
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
3774
4102
|
}
|
|
3775
4103
|
.ina-date-picker__trigger--readonly {
|
|
3776
|
-
background-color: var(--ina-background-secondary);
|
|
4104
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3777
4105
|
cursor: default;
|
|
3778
4106
|
}
|
|
3779
4107
|
.ina-date-picker__trigger--readonly:hover {
|
|
3780
|
-
background-color: var(--ina-background-secondary);
|
|
3781
|
-
border-color: var(--ina-stroke-primary);
|
|
4108
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4109
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
3782
4110
|
}
|
|
3783
4111
|
/* Trigger Icon - Same as prefix icon in TextField */
|
|
3784
4112
|
.ina-date-picker__trigger-icon {
|
|
3785
|
-
color: var(--ina-content-tertiary);
|
|
4113
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
3786
4114
|
flex-shrink: 0;
|
|
3787
4115
|
}
|
|
3788
4116
|
/* Trigger Text - Same as input field in TextField */
|
|
3789
4117
|
.ina-date-picker__trigger-text {
|
|
3790
4118
|
flex: 1;
|
|
3791
|
-
font-size: var(--ina-font-sm);
|
|
3792
|
-
font-weight: var(--ina-font-normal);
|
|
3793
|
-
color: var(--ina-content-primary);
|
|
4119
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
4120
|
+
font-weight: var(--ina-font-normal, 400);
|
|
4121
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3794
4122
|
white-space: nowrap;
|
|
3795
4123
|
overflow: hidden;
|
|
3796
4124
|
text-overflow: ellipsis;
|
|
3797
4125
|
text-align: left;
|
|
3798
4126
|
}
|
|
3799
4127
|
.ina-date-picker__trigger-text--placeholder {
|
|
3800
|
-
color: var(--ina-content-tertiary);
|
|
3801
|
-
font-size: var(--ina-font-sm);
|
|
4128
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
4129
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3802
4130
|
}
|
|
3803
4131
|
/* Clear Button - Same styling as TextField */
|
|
3804
4132
|
.ina-date-picker__clear-button {
|
|
@@ -3810,11 +4138,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
3810
4138
|
display: inline-flex;
|
|
3811
4139
|
align-items: center;
|
|
3812
4140
|
justify-content: center;
|
|
3813
|
-
color: var(--ina-content-dark-secondary);
|
|
3814
|
-
transition: color var(--ina-transition-base);
|
|
4141
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
4142
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
3815
4143
|
}
|
|
3816
4144
|
.ina-date-picker__clear-button:hover:not(:disabled) {
|
|
3817
|
-
color: var(--ina-content-secondary);
|
|
4145
|
+
color: var(--ina-content-secondary, #525252);
|
|
3818
4146
|
}
|
|
3819
4147
|
.ina-date-picker__clear-button:disabled {
|
|
3820
4148
|
cursor: not-allowed;
|
|
@@ -3830,14 +4158,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
3830
4158
|
z-index: 10004; /* Higher than YearPicker panel */
|
|
3831
4159
|
top: 100%;
|
|
3832
4160
|
left: 0;
|
|
3833
|
-
margin-top: var(--ina-spacing-1);
|
|
3834
|
-
background-color: var(--ina-background-primary);
|
|
3835
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3836
|
-
border-radius: var(--ina-radius-xl);
|
|
4161
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
4162
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
4163
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4164
|
+
border-radius: var(--ina-radius-xl, 0.75rem);
|
|
3837
4165
|
box-shadow:
|
|
3838
4166
|
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
3839
4167
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
3840
|
-
padding: var(--ina-spacing-4);
|
|
4168
|
+
padding: var(--ina-spacing-4, 1rem);
|
|
3841
4169
|
animation: date-picker-panel-fade-in 0.15s ease-out;
|
|
3842
4170
|
/* Width and height follow content */
|
|
3843
4171
|
width: -moz-fit-content;
|
|
@@ -3881,9 +4209,24 @@ dialog.bottom-sheet-dropdown {
|
|
|
3881
4209
|
}
|
|
3882
4210
|
/* Dynamic right positioning to prevent overflow */
|
|
3883
4211
|
.ina-date-picker__panel--right-aligned {
|
|
4212
|
+
left: auto !important;
|
|
3884
4213
|
left: auto !important;
|
|
3885
4214
|
right: 0;
|
|
3886
4215
|
}
|
|
4216
|
+
/* Panel only mode (static positioning) */
|
|
4217
|
+
.ina-date-picker--panel-only .ina-date-picker__panel {
|
|
4218
|
+
position: static;
|
|
4219
|
+
margin: 0;
|
|
4220
|
+
transform: none;
|
|
4221
|
+
animation: none;
|
|
4222
|
+
z-index: 1;
|
|
4223
|
+
box-shadow: none; /* Remove shadow for embedded view, usually handled by container */
|
|
4224
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4225
|
+
}
|
|
4226
|
+
.ina-date-picker--panel-only {
|
|
4227
|
+
width: -moz-fit-content;
|
|
4228
|
+
width: fit-content;
|
|
4229
|
+
}
|
|
3887
4230
|
/* Panel Content */
|
|
3888
4231
|
.ina-date-picker__panel-content {
|
|
3889
4232
|
display: flex;
|
|
@@ -3909,7 +4252,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
3909
4252
|
flex-direction: column;
|
|
3910
4253
|
}
|
|
3911
4254
|
.ina-date-picker__day.ina-date-picker__day--other-month.ina-date-picker__day--range-in.ina-date-picker__day--in-range {
|
|
3912
|
-
color: var(--ina-content-tertiary) !important;
|
|
4255
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
3913
4256
|
}
|
|
3914
4257
|
@media (min-width: 1280px) {
|
|
3915
4258
|
.ina-date-picker__panel-content--responsive {
|
|
@@ -3974,25 +4317,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
3974
4317
|
min-height: 40px; /* Ensure consistent height */
|
|
3975
4318
|
}
|
|
3976
4319
|
.ina-date-picker__calendar-title {
|
|
3977
|
-
font-size: var(--ina-font-lg);
|
|
3978
|
-
font-weight: var(--ina-font-semibold);
|
|
3979
|
-
color: var(--ina-content-primary);
|
|
4320
|
+
font-size: var(--ina-font-lg, 1.125rem);
|
|
4321
|
+
font-weight: var(--ina-font-semibold, 600);
|
|
4322
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3980
4323
|
}
|
|
3981
4324
|
.ina-date-picker__nav-button {
|
|
3982
4325
|
display: flex;
|
|
3983
4326
|
align-items: center;
|
|
3984
4327
|
justify-content: center;
|
|
3985
|
-
padding: var(--ina-spacing-1);
|
|
4328
|
+
padding: var(--ina-spacing-1, 0.25rem);
|
|
3986
4329
|
border: none;
|
|
3987
4330
|
background-color: transparent;
|
|
3988
|
-
color: var(--ina-text-secondary);
|
|
4331
|
+
color: var(--ina-text-secondary, #525252);
|
|
3989
4332
|
cursor: pointer;
|
|
3990
|
-
border-radius: var(--ina-radius-base);
|
|
4333
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
3991
4334
|
transition: all var(--ina-transition-fast);
|
|
3992
4335
|
}
|
|
3993
4336
|
.ina-date-picker__nav-button:hover {
|
|
3994
|
-
background-color: var(--ina-background-tertiary);
|
|
3995
|
-
color: var(--ina-content-primary);
|
|
4337
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4338
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3996
4339
|
}
|
|
3997
4340
|
.ina-date-picker__nav-icon {
|
|
3998
4341
|
color: inherit;
|
|
@@ -4013,10 +4356,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
4013
4356
|
display: flex;
|
|
4014
4357
|
align-items: center;
|
|
4015
4358
|
justify-content: center;
|
|
4016
|
-
padding: var(--ina-spacing-2);
|
|
4017
|
-
font-size: var(--ina-font-xs);
|
|
4018
|
-
font-weight: var(--ina-font-medium);
|
|
4019
|
-
color: var(--ina-content-tertiary);
|
|
4359
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
4360
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
4361
|
+
font-weight: var(--ina-font-medium, 500);
|
|
4362
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4020
4363
|
text-align: center;
|
|
4021
4364
|
width: 100%;
|
|
4022
4365
|
max-width: 40px;
|
|
@@ -4034,72 +4377,72 @@ dialog.bottom-sheet-dropdown {
|
|
|
4034
4377
|
align-items: center;
|
|
4035
4378
|
justify-content: center;
|
|
4036
4379
|
padding: 0;
|
|
4037
|
-
font-size: var(--ina-font-xs);
|
|
4038
|
-
font-weight: var(--ina-font-medium);
|
|
4039
|
-
color: var(--ina-content-primary);
|
|
4040
|
-
background-color: var(--ina-background-primary);
|
|
4380
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
4381
|
+
font-weight: var(--ina-font-medium, 500);
|
|
4382
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
4383
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
4041
4384
|
cursor: pointer;
|
|
4042
4385
|
border: none;
|
|
4043
|
-
border-radius: var(--ina-radius-lg);
|
|
4044
|
-
transition: all var(--ina-transition-fast);
|
|
4386
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4387
|
+
transition: all var(--ina-transition-fast, 150ms ease-in-out);
|
|
4045
4388
|
height: 40px;
|
|
4046
4389
|
max-width: 40px;
|
|
4047
4390
|
width: 100%;
|
|
4048
4391
|
}
|
|
4049
4392
|
.ina-date-picker__day:hover {
|
|
4050
|
-
background-color: var(--ina-background-tertiary);
|
|
4393
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4051
4394
|
}
|
|
4052
4395
|
.ina-date-picker__day--selected {
|
|
4053
|
-
background-color: var(--ina-content-primary);
|
|
4054
|
-
color: var(--ina-white);
|
|
4055
|
-
border-radius: var(--ina-radius-lg);
|
|
4396
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4397
|
+
color: var(--ina-white, #ffffff);
|
|
4398
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4056
4399
|
}
|
|
4057
4400
|
.ina-date-picker__day--other-month.ina-date-picker__day--selected {
|
|
4058
|
-
color: var(--ina-white);
|
|
4401
|
+
color: var(--ina-white, #ffffff);
|
|
4059
4402
|
}
|
|
4060
4403
|
.ina-date-picker__day--selected:hover {
|
|
4061
|
-
background-color: var(--ina-content-primary);
|
|
4404
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4062
4405
|
}
|
|
4063
4406
|
.ina-date-picker__day.ina-date-picker__day--range-start {
|
|
4064
|
-
background-color: var(--ina-content-primary) !important;
|
|
4065
|
-
color: var(--ina-white) !important;
|
|
4066
|
-
border-radius: var(--ina-radius-lg);
|
|
4407
|
+
background-color: var(--ina-content-primary, #1f1f1f) !important;
|
|
4408
|
+
color: var(--ina-white, #ffffff) !important;
|
|
4409
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4067
4410
|
}
|
|
4068
4411
|
.ina-date-picker__day.ina-date-picker__day--range-end {
|
|
4069
|
-
background-color: var(--ina-content-primary) !important;
|
|
4070
|
-
color: var(--ina-white) !important;
|
|
4071
|
-
border-radius: var(--ina-radius-lg);
|
|
4412
|
+
background-color: var(--ina-content-primary, #1f1f1f) !important;
|
|
4413
|
+
color: var(--ina-white, #ffffff) !important;
|
|
4414
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4072
4415
|
}
|
|
4073
4416
|
.ina-date-picker__day--range-in {
|
|
4074
|
-
background-color: var(--ina-background-tertiary) !important;
|
|
4075
|
-
color: var(--ina-text-primary) !important;
|
|
4417
|
+
background-color: var(--ina-background-tertiary, #f5f5f5) !important;
|
|
4418
|
+
color: var(--ina-text-primary, #1f1f1f) !important;
|
|
4076
4419
|
border-radius: 0;
|
|
4077
4420
|
}
|
|
4078
4421
|
.ina-date-picker__day--start {
|
|
4079
|
-
background-color: var(--ina-content-primary);
|
|
4080
|
-
border-radius: var(--ina-radius-lg);
|
|
4422
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4423
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4081
4424
|
}
|
|
4082
4425
|
.ina-date-picker__day--end {
|
|
4083
|
-
border-radius: var(--ina-radius-lg);
|
|
4426
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4084
4427
|
}
|
|
4085
4428
|
.ina-date-picker__day.ina-date-picker__day--end:hover {
|
|
4086
|
-
background-color: var(--ina-background-tertiary);
|
|
4429
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4087
4430
|
}
|
|
4088
4431
|
.ina-date-picker__day--in-range {
|
|
4089
|
-
background-color: var(--ina-background-tertiary);
|
|
4432
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4090
4433
|
border-radius: 0;
|
|
4091
4434
|
}
|
|
4092
4435
|
.ina-date-picker__day.ina-date-picker__day--disabled {
|
|
4093
|
-
color: var(--ina-content-tertiary);
|
|
4436
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4094
4437
|
cursor: not-allowed;
|
|
4095
|
-
background-color: var(--ina-background-secondary);
|
|
4438
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4096
4439
|
border-radius: 0;
|
|
4097
4440
|
}
|
|
4098
4441
|
.ina-date-picker__day.ina-date-picker__day--disabled:hover {
|
|
4099
4442
|
opacity: 0.4;
|
|
4100
4443
|
}
|
|
4101
4444
|
.ina-date-picker__day.ina-date-picker__day--disabled.ina-date-picker__day--selected {
|
|
4102
|
-
border-radius: var(--ina-radius-lg);
|
|
4445
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4103
4446
|
}
|
|
4104
4447
|
.ina-date-picker__day.ina-date-picker__day--today {
|
|
4105
4448
|
display: flex;
|
|
@@ -4108,12 +4451,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
4108
4451
|
justify-content: center;
|
|
4109
4452
|
}
|
|
4110
4453
|
.ina-date-picker__day.ina-date-picker__day--today .ina-date-picker__day-number {
|
|
4111
|
-
border-top: 2px solid var(--ina-content-primary);
|
|
4112
|
-
font-weight: var(--ina-font-bold);
|
|
4454
|
+
border-top: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
4455
|
+
font-weight: var(--ina-font-bold, 700);
|
|
4113
4456
|
}
|
|
4114
4457
|
.ina-date-picker__day.ina-date-picker__day--today.ina-date-picker__day--selected
|
|
4115
4458
|
.ina-date-picker__day-number {
|
|
4116
|
-
border-top: 2px solid var(--ina-white);
|
|
4459
|
+
border-top: 2px solid var(--ina-white, #ffffff);
|
|
4117
4460
|
}
|
|
4118
4461
|
/* .ina-date-picker__day--today::before {
|
|
4119
4462
|
content: 'Hari Ini';
|
|
@@ -4126,51 +4469,51 @@ dialog.bottom-sheet-dropdown {
|
|
|
4126
4469
|
color: var(--ina-white);
|
|
4127
4470
|
} */
|
|
4128
4471
|
.ina-date-picker__day--other-month {
|
|
4129
|
-
color: var(--ina-content-tertiary);
|
|
4472
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4130
4473
|
}
|
|
4131
4474
|
/* Month/Year Selector */
|
|
4132
4475
|
.ina-date-picker__month-selector {
|
|
4133
4476
|
display: flex;
|
|
4134
4477
|
align-items: center;
|
|
4135
4478
|
justify-content: space-between;
|
|
4136
|
-
margin-bottom: var(--ina-spacing-3);
|
|
4479
|
+
margin-bottom: var(--ina-spacing-3, 0.75rem);
|
|
4137
4480
|
}
|
|
4138
4481
|
.ina-date-picker__month-text {
|
|
4139
|
-
font-size: var(--ina-font-base);
|
|
4140
|
-
font-weight: var(--ina-font-semibold);
|
|
4141
|
-
color: var(--ina-content-primary);
|
|
4482
|
+
font-size: var(--ina-font-base, 1rem);
|
|
4483
|
+
font-weight: var(--ina-font-semibold, 600);
|
|
4484
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
4142
4485
|
cursor: pointer;
|
|
4143
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
4144
|
-
border-radius: var(--ina-radius-base);
|
|
4145
|
-
transition: all var(--ina-transition-fast);
|
|
4486
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
4487
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
4488
|
+
transition: all var(--ina-transition-fast, 150ms ease-in-out);
|
|
4146
4489
|
}
|
|
4147
4490
|
.ina-date-picker__month-text:hover {
|
|
4148
|
-
background-color: var(--ina-background-tertiary);
|
|
4491
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4149
4492
|
}
|
|
4150
4493
|
/* Range Display */
|
|
4151
4494
|
.ina-date-picker__range-display {
|
|
4152
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
4153
|
-
padding-top: var(--ina-spacing-3);
|
|
4154
|
-
margin-top: var(--ina-spacing-3);
|
|
4495
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4496
|
+
padding-top: var(--ina-spacing-3, 0.75rem);
|
|
4497
|
+
margin-top: var(--ina-spacing-3, 0.75rem);
|
|
4155
4498
|
}
|
|
4156
4499
|
.ina-date-picker__range-text {
|
|
4157
|
-
font-size: var(--ina-font-sm);
|
|
4158
|
-
color: var(--ina-text-secondary);
|
|
4500
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
4501
|
+
color: var(--ina-text-secondary, #525252);
|
|
4159
4502
|
text-align: center;
|
|
4160
4503
|
}
|
|
4161
4504
|
/* Disabled State */
|
|
4162
4505
|
.ina-date-picker--disabled .ina-date-picker__trigger {
|
|
4163
|
-
background-color: var(--ina-background-secondary);
|
|
4506
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4164
4507
|
cursor: not-allowed;
|
|
4165
4508
|
opacity: 0.6;
|
|
4166
4509
|
}
|
|
4167
4510
|
.ina-date-picker--disabled .ina-date-picker__trigger:hover {
|
|
4168
|
-
background-color: var(--ina-background-secondary);
|
|
4169
|
-
border-color: var(--ina-stroke-primary);
|
|
4511
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4512
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
4170
4513
|
}
|
|
4171
4514
|
/* Focus Visible */
|
|
4172
4515
|
.ina-date-picker__trigger:focus-visible {
|
|
4173
|
-
outline: 2px solid var(--ina-content-primary);
|
|
4516
|
+
outline: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
4174
4517
|
outline-offset: 2px;
|
|
4175
4518
|
}
|
|
4176
4519
|
/* High Contrast Mode */
|
|
@@ -5419,440 +5762,80 @@ dialog.bottom-sheet-dropdown {
|
|
|
5419
5762
|
}
|
|
5420
5763
|
/* Dark mode support */
|
|
5421
5764
|
/* @media (prefers-color-scheme: dark) {
|
|
5422
|
-
.ina-drawer__backdrop {
|
|
5423
|
-
background-color: rgba(0, 0, 0, 0.7);
|
|
5424
|
-
}
|
|
5425
|
-
|
|
5426
|
-
.ina-drawer__panel {
|
|
5427
|
-
background-color: var(--ina-background-dark-primary);
|
|
5428
|
-
border-color: var(--ina-stroke-primary-dark);
|
|
5429
|
-
}
|
|
5430
|
-
|
|
5431
|
-
.ina-drawer__header {
|
|
5432
|
-
border-color: var(--ina-stroke-primary-dark);
|
|
5433
|
-
}
|
|
5434
|
-
|
|
5435
|
-
.ina-drawer__title {
|
|
5436
|
-
color: var(--ina-content-dark-primary);
|
|
5437
|
-
}
|
|
5438
|
-
|
|
5439
|
-
.ina-drawer__close-button {
|
|
5440
|
-
color: var(--ina-content-dark-secondary);
|
|
5441
|
-
}
|
|
5442
|
-
|
|
5443
|
-
.ina-drawer__close-button:hover {
|
|
5444
|
-
background-color: var(--ina-neutral-800);
|
|
5445
|
-
color: var(--ina-content-dark-primary);
|
|
5446
|
-
}
|
|
5447
|
-
|
|
5448
|
-
.ina-drawer__footer {
|
|
5449
|
-
border-color: var(--ina-stroke-primary-dark);
|
|
5450
|
-
}
|
|
5451
|
-
|
|
5452
|
-
.ina-drawer--variant-glass .ina-drawer__panel {
|
|
5453
|
-
background-color: rgba(0, 0, 0, 0.95);
|
|
5454
|
-
border-color: rgba(255, 255, 255, 0.1);
|
|
5455
|
-
}
|
|
5456
|
-
|
|
5457
|
-
.ina-drawer--variant-minimal .ina-drawer__panel {
|
|
5458
|
-
border-color: var(--ina-stroke-primary-dark);
|
|
5459
|
-
}
|
|
5460
|
-
} */
|
|
5461
|
-
/* Accessibility improvements */
|
|
5462
|
-
.ina-drawer__close-button:focus-visible {
|
|
5463
|
-
outline: 2px solid var(--ina-primary-500);
|
|
5464
|
-
outline-offset: 2px;
|
|
5465
|
-
}
|
|
5466
|
-
/* High contrast mode */
|
|
5467
|
-
@media (prefers-contrast: high) {
|
|
5468
|
-
.ina-drawer__panel {
|
|
5469
|
-
border: 2px solid var(--ina-content-primary);
|
|
5470
|
-
}
|
|
5471
|
-
|
|
5472
|
-
.ina-drawer__header,
|
|
5473
|
-
.ina-drawer__footer {
|
|
5474
|
-
border-width: 2px;
|
|
5475
|
-
}
|
|
5476
|
-
}
|
|
5477
|
-
/* Reduced motion */
|
|
5478
|
-
@media (prefers-reduced-motion: reduce) {
|
|
5479
|
-
.ina-drawer,
|
|
5480
|
-
.ina-drawer__backdrop,
|
|
5481
|
-
.ina-drawer__panel,
|
|
5482
|
-
.ina-drawer__close-button {
|
|
5483
|
-
animation: none;
|
|
5484
|
-
transition: none;
|
|
5485
|
-
}
|
|
5486
|
-
|
|
5487
|
-
.ina-drawer__panel {
|
|
5488
|
-
transform: none !important;
|
|
5489
|
-
}
|
|
5490
|
-
}
|
|
5491
|
-
/* Print styles */
|
|
5492
|
-
@media print {
|
|
5493
|
-
.ina-drawer {
|
|
5494
|
-
display: none;
|
|
5495
|
-
}
|
|
5496
|
-
}
|
|
5497
|
-
/**
|
|
5498
|
-
* Dropdown Component Styles
|
|
5499
|
-
* Menggunakan BEM naming convention dengan prefix "ina-"
|
|
5500
|
-
*/
|
|
5501
|
-
.ina-dropdown {
|
|
5502
|
-
/* Base dropdown container */
|
|
5503
|
-
position: relative;
|
|
5504
|
-
display: inline-block;
|
|
5505
|
-
text-align: left;
|
|
5506
|
-
}
|
|
5507
|
-
/* Trigger variants */
|
|
5508
|
-
/* Trigger variants */
|
|
5509
|
-
.ina-dropdown__trigger {
|
|
5510
|
-
cursor: pointer;
|
|
5511
|
-
transition: opacity var(--ina-transition-base);
|
|
5512
|
-
width: 100%; /* Ensure full width availability */
|
|
5513
|
-
}
|
|
5514
|
-
/* Standardized Trigger Button (Select-like look) */
|
|
5515
|
-
.ina-dropdown__trigger-button {
|
|
5516
|
-
width: 100%;
|
|
5517
|
-
display: flex;
|
|
5518
|
-
align-items: center;
|
|
5519
|
-
justify-content: space-between;
|
|
5520
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
5521
|
-
border-radius: var(--ina-radius-lg);
|
|
5522
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
5523
|
-
background-color: var(--ina-background-primary);
|
|
5524
|
-
color: var(--ina-content-primary);
|
|
5525
|
-
cursor: pointer;
|
|
5526
|
-
font-size: var(--ina-font-sm);
|
|
5527
|
-
outline: none;
|
|
5528
|
-
transition: all var(--ina-transition-base);
|
|
5529
|
-
gap: var(--ina-spacing-2);
|
|
5530
|
-
min-height: 40px; /* Match standard input height */
|
|
5531
|
-
}
|
|
5532
|
-
.ina-dropdown__trigger-button:hover {
|
|
5533
|
-
background-color: var(--ina-background-secondary);
|
|
5534
|
-
}
|
|
5535
|
-
/* Active/Open State for Trigger Button */
|
|
5536
|
-
.ina-dropdown__trigger-button--open,
|
|
5537
|
-
.ina-dropdown__trigger-button:focus-within {
|
|
5538
|
-
border-color: var(--ina-stroke-tertiary, #141414);
|
|
5539
|
-
background: var(--ina-background-primary, #fff);
|
|
5540
|
-
box-shadow:
|
|
5541
|
-
0 0 0 1px #fff,
|
|
5542
|
-
0 0 0 2px var(--ina-primary-primary, #141414);
|
|
5543
|
-
}
|
|
5544
|
-
.ina-dropdown__trigger-content {
|
|
5545
|
-
flex: 1;
|
|
5546
|
-
text-align: left;
|
|
5547
|
-
overflow: hidden;
|
|
5548
|
-
text-overflow: ellipsis;
|
|
5549
|
-
white-space: nowrap;
|
|
5550
|
-
}
|
|
5551
|
-
.ina-dropdown__trigger-icon {
|
|
5552
|
-
flex-shrink: 0;
|
|
5553
|
-
color: var(--ina-content-tertiary);
|
|
5554
|
-
transition: transform var(--ina-transition-base);
|
|
5555
|
-
}
|
|
5556
|
-
.ina-dropdown__trigger-button--open .ina-dropdown__trigger-icon {
|
|
5557
|
-
transform: rotate(180deg);
|
|
5558
|
-
}
|
|
5559
|
-
.ina-dropdown__trigger--disabled {
|
|
5560
|
-
opacity: 0.6;
|
|
5561
|
-
cursor: not-allowed;
|
|
5562
|
-
pointer-events: none;
|
|
5563
|
-
}
|
|
5564
|
-
/* Menu container */
|
|
5565
|
-
.ina-dropdown__menu {
|
|
5566
|
-
position: absolute;
|
|
5567
|
-
background-color: var(--ina-background-primary);
|
|
5568
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
5569
|
-
border-radius: var(--ina-radius-lg);
|
|
5570
|
-
box-shadow: var(--ina-shadow-lg);
|
|
5571
|
-
z-index: 1000;
|
|
5572
|
-
opacity: 0;
|
|
5573
|
-
transform: translateY(-0.5rem);
|
|
5574
|
-
transition:
|
|
5575
|
-
opacity var(--ina-transition-duration-200) ease-out,
|
|
5576
|
-
transform var(--ina-transition-duration-200) ease-out;
|
|
5577
|
-
min-height: -moz-fit-content;
|
|
5578
|
-
min-height: fit-content;
|
|
5579
|
-
min-width: 100%; /* Default match trigger width */
|
|
5580
|
-
width: -moz-max-content;
|
|
5581
|
-
width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
|
|
5582
|
-
pointer-events: none;
|
|
5583
|
-
visibility: hidden;
|
|
5584
|
-
padding: var(--ina-spacing-0-5);
|
|
5585
|
-
margin-top: var(--ina-spacing-1);
|
|
5586
|
-
}
|
|
5587
|
-
.ina-dropdown__menu--visible {
|
|
5588
|
-
opacity: 1;
|
|
5589
|
-
pointer-events: auto;
|
|
5590
|
-
visibility: visible;
|
|
5591
|
-
transform: translateY(0);
|
|
5592
|
-
}
|
|
5593
|
-
/* ... existing styles ... */
|
|
5594
|
-
/* Width variants */
|
|
5595
|
-
.ina-dropdown__menu--width-auto {
|
|
5596
|
-
width: auto;
|
|
5597
|
-
min-width: 160px;
|
|
5598
|
-
}
|
|
5599
|
-
.ina-dropdown__menu--width-sm {
|
|
5600
|
-
min-width: 120px;
|
|
5601
|
-
width: auto;
|
|
5602
|
-
}
|
|
5603
|
-
.ina-dropdown__menu--width-md {
|
|
5604
|
-
min-width: 160px;
|
|
5605
|
-
width: auto;
|
|
5606
|
-
}
|
|
5607
|
-
.ina-dropdown__menu--width-lg {
|
|
5608
|
-
min-width: 200px;
|
|
5609
|
-
width: auto;
|
|
5610
|
-
}
|
|
5611
|
-
.ina-dropdown__menu--width-xl {
|
|
5612
|
-
min-width: 240px;
|
|
5613
|
-
width: auto;
|
|
5614
|
-
}
|
|
5615
|
-
.ina-dropdown__menu--width-full {
|
|
5616
|
-
width: 100%;
|
|
5617
|
-
}
|
|
5618
|
-
/* Menu list */
|
|
5619
|
-
.ina-dropdown__list {
|
|
5620
|
-
padding: var(--ina-spacing-1) 0;
|
|
5621
|
-
margin: 0;
|
|
5622
|
-
list-style: none;
|
|
5623
|
-
background-color: inherit;
|
|
5624
|
-
}
|
|
5625
|
-
/* Menu items */
|
|
5626
|
-
.ina-dropdown__item {
|
|
5627
|
-
width: 100%;
|
|
5628
|
-
text-align: left;
|
|
5629
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
5630
|
-
font-size: var(--ina-font-sm);
|
|
5631
|
-
color: var(--ina-content-primary);
|
|
5632
|
-
background: none;
|
|
5633
|
-
border: none;
|
|
5634
|
-
cursor: pointer;
|
|
5635
|
-
-webkit-user-select: none;
|
|
5636
|
-
-moz-user-select: none;
|
|
5637
|
-
user-select: none;
|
|
5638
|
-
transition: background-color var(--ina-transition-base);
|
|
5639
|
-
display: flex;
|
|
5640
|
-
align-items: center;
|
|
5641
|
-
gap: var(--ina-spacing-2);
|
|
5642
|
-
margin-bottom: 0 !important;
|
|
5643
|
-
}
|
|
5644
|
-
.ina-dropdown__item:hover {
|
|
5645
|
-
background-color: var(--ina-background-secondary);
|
|
5646
|
-
}
|
|
5647
|
-
.ina-dropdown__item:focus {
|
|
5648
|
-
outline: none;
|
|
5649
|
-
background-color: var(--ina-primary-100);
|
|
5650
|
-
color: var(--ina-primary-600);
|
|
5651
|
-
}
|
|
5652
|
-
.ina-dropdown__item:active {
|
|
5653
|
-
background-color: var(--ina-background-tertiary);
|
|
5654
|
-
}
|
|
5655
|
-
/* Item variants */
|
|
5656
|
-
.ina-dropdown__item--danger {
|
|
5657
|
-
color: var(--ina-negative-600);
|
|
5658
|
-
}
|
|
5659
|
-
.ina-dropdown__item--danger:hover {
|
|
5660
|
-
background-color: var(--ina-negative-100);
|
|
5661
|
-
}
|
|
5662
|
-
.ina-dropdown__item--warning {
|
|
5663
|
-
color: var(--ina-warning-600);
|
|
5664
|
-
}
|
|
5665
|
-
.ina-dropdown__item--warning:hover {
|
|
5666
|
-
background-color: var(--ina-warning-100);
|
|
5667
|
-
}
|
|
5668
|
-
.ina-dropdown__item--success {
|
|
5669
|
-
color: var(--ina-positive-600);
|
|
5670
|
-
}
|
|
5671
|
-
.ina-dropdown__item--success:hover {
|
|
5672
|
-
background-color: var(--ina-positive-100);
|
|
5673
|
-
}
|
|
5674
|
-
.ina-dropdown__item--disabled {
|
|
5675
|
-
opacity: 0.5;
|
|
5676
|
-
cursor: not-allowed;
|
|
5677
|
-
color: var(--ina-content-tertiary);
|
|
5678
|
-
}
|
|
5679
|
-
.ina-dropdown__item--disabled:hover {
|
|
5680
|
-
background-color: transparent;
|
|
5681
|
-
}
|
|
5682
|
-
/* Item with icons */
|
|
5683
|
-
.ina-dropdown__item-icon {
|
|
5684
|
-
flex-shrink: 0;
|
|
5685
|
-
width: 16px;
|
|
5686
|
-
height: 16px;
|
|
5687
|
-
}
|
|
5688
|
-
.ina-dropdown__item-content {
|
|
5689
|
-
flex: 1;
|
|
5690
|
-
min-width: 0;
|
|
5691
|
-
}
|
|
5692
|
-
.ina-dropdown__item-description {
|
|
5693
|
-
font-size: var(--ina-font-xs);
|
|
5694
|
-
color: var(--ina-content-secondary);
|
|
5695
|
-
margin-top: var(--ina-spacing-0-5);
|
|
5696
|
-
}
|
|
5697
|
-
/* Separators */
|
|
5698
|
-
.ina-dropdown__separator {
|
|
5699
|
-
height: 1px;
|
|
5700
|
-
background-color: var(--ina-stroke-primary);
|
|
5701
|
-
margin: var(--ina-spacing-1) var(--ina-spacing-4);
|
|
5702
|
-
}
|
|
5703
|
-
/* Dividers */
|
|
5704
|
-
.ina-dropdown__divider {
|
|
5705
|
-
height: var(--ina-spacing-4);
|
|
5706
|
-
}
|
|
5707
|
-
/* Animation variants */
|
|
5708
|
-
.ina-dropdown__menu--animation-fade {
|
|
5709
|
-
transform: translateY(0);
|
|
5710
|
-
transition: opacity var(--ina-transition-duration-200) ease-out;
|
|
5711
|
-
}
|
|
5712
|
-
.ina-dropdown__menu--animation-slide-up {
|
|
5713
|
-
transform: translateY(1rem);
|
|
5714
|
-
transition:
|
|
5715
|
-
opacity var(--ina-transition-duration-200) ease-out,
|
|
5716
|
-
transform var(--ina-transition-duration-200) ease-out;
|
|
5717
|
-
}
|
|
5718
|
-
.ina-dropdown__menu--animation-slide-down {
|
|
5719
|
-
transform: translateY(-1rem);
|
|
5720
|
-
transition:
|
|
5721
|
-
opacity var(--ina-transition-duration-200) ease-out,
|
|
5722
|
-
transform var(--ina-transition-duration-200) ease-out;
|
|
5723
|
-
}
|
|
5724
|
-
.ina-dropdown__menu--animation-scale {
|
|
5725
|
-
transform: scale(0.95);
|
|
5726
|
-
transition:
|
|
5727
|
-
opacity var(--ina-transition-duration-200) ease-out,
|
|
5728
|
-
transform var(--ina-transition-duration-200) ease-out;
|
|
5729
|
-
}
|
|
5730
|
-
/* All visible states */
|
|
5731
|
-
.ina-dropdown__menu--animation-fade.ina-dropdown__menu--visible,
|
|
5732
|
-
.ina-dropdown__menu--animation-slide-up.ina-dropdown__menu--visible,
|
|
5733
|
-
.ina-dropdown__menu--animation-slide-down.ina-dropdown__menu--visible,
|
|
5734
|
-
.ina-dropdown__menu--animation-scale.ina-dropdown__menu--visible {
|
|
5735
|
-
transform: translateY(0) scale(1);
|
|
5736
|
-
}
|
|
5737
|
-
/* Backdrop click area */
|
|
5738
|
-
.ina-dropdown__backdrop {
|
|
5739
|
-
position: fixed;
|
|
5740
|
-
inset: 0;
|
|
5741
|
-
z-index: 999;
|
|
5742
|
-
}
|
|
5743
|
-
/* Grouped items */
|
|
5744
|
-
.ina-dropdown__group {
|
|
5745
|
-
margin: var(--ina-spacing-2) 0;
|
|
5746
|
-
}
|
|
5747
|
-
.ina-dropdown__group:first-child {
|
|
5748
|
-
margin-top: 0;
|
|
5749
|
-
}
|
|
5750
|
-
.ina-dropdown__group:last-child {
|
|
5751
|
-
margin-bottom: 0;
|
|
5752
|
-
}
|
|
5753
|
-
.ina-dropdown__group-header {
|
|
5754
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-4) var(--ina-spacing-0-5);
|
|
5755
|
-
font-size: var(--ina-font-xs);
|
|
5756
|
-
font-weight: var(--ina-font-medium);
|
|
5757
|
-
color: var(--ina-content-secondary);
|
|
5758
|
-
text-transform: uppercase;
|
|
5759
|
-
letter-spacing: 0.05em;
|
|
5760
|
-
}
|
|
5761
|
-
/* Loading states */
|
|
5762
|
-
.ina-dropdown__loading {
|
|
5763
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
5764
|
-
text-align: center;
|
|
5765
|
-
color: var(--ina-content-secondary);
|
|
5766
|
-
font-size: var(--ina-font-sm);
|
|
5767
|
-
}
|
|
5768
|
-
.ina-dropdown__spinner {
|
|
5769
|
-
display: inline-block;
|
|
5770
|
-
width: 16px;
|
|
5771
|
-
height: 16px;
|
|
5772
|
-
border: 2px solid var(--ina-primary-100);
|
|
5773
|
-
border-radius: 50%;
|
|
5774
|
-
border-top-color: var(--ina-primary-500);
|
|
5775
|
-
animation: spin 1s linear infinite;
|
|
5776
|
-
}
|
|
5777
|
-
@keyframes spin {
|
|
5778
|
-
to {
|
|
5779
|
-
transform: rotate(360deg);
|
|
5780
|
-
}
|
|
5781
|
-
}
|
|
5782
|
-
/* Responsive adjustments */
|
|
5783
|
-
@media (max-width: 640px) {
|
|
5784
|
-
.ina-dropdown__menu--width-lg,
|
|
5785
|
-
.ina-dropdown__menu--width-xl {
|
|
5786
|
-
width: calc(100vw - var(--ina-spacing-8));
|
|
5787
|
-
max-width: 300px;
|
|
5788
|
-
}
|
|
5789
|
-
}
|
|
5790
|
-
@media (max-width: 768px) {
|
|
5791
|
-
.ina-dropdown__item {
|
|
5792
|
-
padding: var(--ina-spacing-3) var(--ina-spacing-4);
|
|
5793
|
-
font-size: var(--ina-font-base);
|
|
5794
|
-
}
|
|
5795
|
-
}
|
|
5796
|
-
/* Scrollable content */
|
|
5797
|
-
.ina-dropdown__menu--scrollable {
|
|
5798
|
-
max-height: 300px;
|
|
5799
|
-
overflow-y: auto;
|
|
5800
|
-
scrollbar-width: thin;
|
|
5801
|
-
scrollbar-color: var(--ina-content-tertiary) var(--ina-background-tertiary);
|
|
5802
|
-
}
|
|
5803
|
-
.ina-dropdown__menu--scrollable::-webkit-scrollbar {
|
|
5804
|
-
width: 6px;
|
|
5805
|
-
}
|
|
5806
|
-
.ina-dropdown__menu--scrollable::-webkit-scrollbar-track {
|
|
5807
|
-
background: var(--ina-background-tertiary);
|
|
5808
|
-
border-radius: 3px;
|
|
5809
|
-
}
|
|
5810
|
-
.ina-dropdown__menu--scrollable::-webkit-scrollbar-thumb {
|
|
5811
|
-
background-color: var(--ina-content-tertiary);
|
|
5812
|
-
border-radius: 3px;
|
|
5813
|
-
}
|
|
5814
|
-
.ina-dropdown__menu--scrollable::-webkit-scrollbar-thumb:hover {
|
|
5815
|
-
background-color: var(--ina-content-secondary);
|
|
5816
|
-
}
|
|
5817
|
-
/* Dark mode support */
|
|
5818
|
-
/* @media (prefers-color-scheme: dark) {
|
|
5819
|
-
.ina-dropdown__menu {
|
|
5765
|
+
.ina-drawer__backdrop {
|
|
5766
|
+
background-color: rgba(0, 0, 0, 0.7);
|
|
5767
|
+
}
|
|
5768
|
+
|
|
5769
|
+
.ina-drawer__panel {
|
|
5820
5770
|
background-color: var(--ina-background-dark-primary);
|
|
5821
5771
|
border-color: var(--ina-stroke-primary-dark);
|
|
5822
5772
|
}
|
|
5823
5773
|
|
|
5824
|
-
.ina-
|
|
5774
|
+
.ina-drawer__header {
|
|
5775
|
+
border-color: var(--ina-stroke-primary-dark);
|
|
5776
|
+
}
|
|
5777
|
+
|
|
5778
|
+
.ina-drawer__title {
|
|
5825
5779
|
color: var(--ina-content-dark-primary);
|
|
5826
5780
|
}
|
|
5827
5781
|
|
|
5828
|
-
.ina-
|
|
5782
|
+
.ina-drawer__close-button {
|
|
5783
|
+
color: var(--ina-content-dark-secondary);
|
|
5784
|
+
}
|
|
5785
|
+
|
|
5786
|
+
.ina-drawer__close-button:hover {
|
|
5829
5787
|
background-color: var(--ina-neutral-800);
|
|
5788
|
+
color: var(--ina-content-dark-primary);
|
|
5830
5789
|
}
|
|
5831
5790
|
|
|
5832
|
-
.ina-
|
|
5833
|
-
|
|
5834
|
-
color: var(--ina-primary-400);
|
|
5791
|
+
.ina-drawer__footer {
|
|
5792
|
+
border-color: var(--ina-stroke-primary-dark);
|
|
5835
5793
|
}
|
|
5836
5794
|
|
|
5837
|
-
.ina-
|
|
5838
|
-
color:
|
|
5795
|
+
.ina-drawer--variant-glass .ina-drawer__panel {
|
|
5796
|
+
background-color: rgba(0, 0, 0, 0.95);
|
|
5797
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
5839
5798
|
}
|
|
5840
5799
|
|
|
5841
|
-
.ina-
|
|
5842
|
-
|
|
5800
|
+
.ina-drawer--variant-minimal .ina-drawer__panel {
|
|
5801
|
+
border-color: var(--ina-stroke-primary-dark);
|
|
5802
|
+
}
|
|
5803
|
+
} */
|
|
5804
|
+
/* Accessibility improvements */
|
|
5805
|
+
.ina-drawer__close-button:focus-visible {
|
|
5806
|
+
outline: 2px solid var(--ina-primary-500);
|
|
5807
|
+
outline-offset: 2px;
|
|
5808
|
+
}
|
|
5809
|
+
/* High contrast mode */
|
|
5810
|
+
@media (prefers-contrast: high) {
|
|
5811
|
+
.ina-drawer__panel {
|
|
5812
|
+
border: 2px solid var(--ina-content-primary);
|
|
5843
5813
|
}
|
|
5844
5814
|
|
|
5845
|
-
.ina-
|
|
5846
|
-
|
|
5815
|
+
.ina-drawer__header,
|
|
5816
|
+
.ina-drawer__footer {
|
|
5817
|
+
border-width: 2px;
|
|
5818
|
+
}
|
|
5819
|
+
}
|
|
5820
|
+
/* Reduced motion */
|
|
5821
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5822
|
+
.ina-drawer,
|
|
5823
|
+
.ina-drawer__backdrop,
|
|
5824
|
+
.ina-drawer__panel,
|
|
5825
|
+
.ina-drawer__close-button {
|
|
5826
|
+
animation: none;
|
|
5827
|
+
transition: none;
|
|
5847
5828
|
}
|
|
5848
5829
|
|
|
5849
|
-
.ina-
|
|
5850
|
-
|
|
5830
|
+
.ina-drawer__panel {
|
|
5831
|
+
transform: none !important;
|
|
5832
|
+
}
|
|
5833
|
+
}
|
|
5834
|
+
/* Print styles */
|
|
5835
|
+
@media print {
|
|
5836
|
+
.ina-drawer {
|
|
5837
|
+
display: none;
|
|
5851
5838
|
}
|
|
5852
|
-
} */
|
|
5853
|
-
/* Focus management */
|
|
5854
|
-
.ina-dropdown__menu:focus-within .ina-dropdown__item:focus {
|
|
5855
|
-
background-color: var(--ina-primary-100);
|
|
5856
5839
|
}
|
|
5857
5840
|
/**
|
|
5858
5841
|
* FieldInputTable Component Styles
|
|
@@ -6463,14 +6446,17 @@ dialog.bottom-sheet-dropdown {
|
|
|
6463
6446
|
/* Label styling */
|
|
6464
6447
|
.ina-input-search__label {
|
|
6465
6448
|
display: block;
|
|
6466
|
-
font-size: var(--ina-font-sm);
|
|
6467
|
-
font-weight: var(--ina-font-medium);
|
|
6468
|
-
color: var(
|
|
6469
|
-
|
|
6449
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
6450
|
+
font-weight: var(--ina-font-medium, 500);
|
|
6451
|
+
color: var(
|
|
6452
|
+
--ina-content-primary,
|
|
6453
|
+
#1f1f1f
|
|
6454
|
+
); /* Changed to primary to match TextField */
|
|
6455
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
6470
6456
|
}
|
|
6471
6457
|
.ina-input-search__label--required .ina-input-search__asterisk {
|
|
6472
|
-
color: var(--ina-error-500);
|
|
6473
|
-
margin-left: var(--ina-spacing-1);
|
|
6458
|
+
color: var(--ina-error-500, #f02d2d);
|
|
6459
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
6474
6460
|
}
|
|
6475
6461
|
/* Input wrapper */
|
|
6476
6462
|
.ina-input-search__wrapper {
|
|
@@ -6491,20 +6477,23 @@ dialog.bottom-sheet-dropdown {
|
|
|
6491
6477
|
}
|
|
6492
6478
|
/* Hover state */
|
|
6493
6479
|
.ina-input-search__wrapper:hover {
|
|
6494
|
-
background-color: var(--ina-neutral-50);
|
|
6480
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
6495
6481
|
}
|
|
6496
6482
|
/* Focus state */
|
|
6497
6483
|
.ina-input-search__wrapper:focus-within {
|
|
6498
|
-
box-shadow:
|
|
6484
|
+
box-shadow:
|
|
6485
|
+
0 0 0 2px #fff,
|
|
6486
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
6499
6487
|
outline: none;
|
|
6500
|
-
background-color: var(--ina-background-primary);
|
|
6501
|
-
border-color: var(--ina-content-primary);
|
|
6488
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
6489
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
6502
6490
|
}
|
|
6503
6491
|
.ina-input-search__wrapper--disabled {
|
|
6504
6492
|
background-color: var(
|
|
6505
|
-
--ina-background-tertiary
|
|
6493
|
+
--ina-background-tertiary,
|
|
6494
|
+
#f5f5f5
|
|
6506
6495
|
); /* Changed to match TextField */
|
|
6507
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
6496
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
6508
6497
|
cursor: not-allowed;
|
|
6509
6498
|
opacity: 1; /* Reset opacity control fully via vars */
|
|
6510
6499
|
}
|
|
@@ -6513,7 +6502,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
6513
6502
|
flex-shrink: 0;
|
|
6514
6503
|
width: 20px;
|
|
6515
6504
|
height: 20px;
|
|
6516
|
-
color: var(--ina-content-secondary);
|
|
6505
|
+
color: var(--ina-content-secondary, #525252);
|
|
6517
6506
|
}
|
|
6518
6507
|
/* Input field */
|
|
6519
6508
|
.ina-input-search__input {
|
|
@@ -6522,16 +6511,16 @@ dialog.bottom-sheet-dropdown {
|
|
|
6522
6511
|
border: none;
|
|
6523
6512
|
outline: none;
|
|
6524
6513
|
background: transparent;
|
|
6525
|
-
font-size: var(--ina-font-sm);
|
|
6514
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
6526
6515
|
font-family: inherit;
|
|
6527
|
-
color: var(--ina-content-color-181717);
|
|
6528
|
-
font-weight: var(--ina-font-normal);
|
|
6516
|
+
color: var(--ina-content-color-181717, #1f1f1f);
|
|
6517
|
+
font-weight: var(--ina-font-normal, 400);
|
|
6529
6518
|
}
|
|
6530
6519
|
.ina-input-search__input::-moz-placeholder {
|
|
6531
|
-
color: var(--ina-content-tertiary);
|
|
6520
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
6532
6521
|
}
|
|
6533
6522
|
.ina-input-search__input::placeholder {
|
|
6534
|
-
color: var(--ina-content-tertiary);
|
|
6523
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
6535
6524
|
}
|
|
6536
6525
|
.ina-input-search__input:disabled {
|
|
6537
6526
|
cursor: not-allowed;
|
|
@@ -6543,17 +6532,20 @@ dialog.bottom-sheet-dropdown {
|
|
|
6543
6532
|
cursor: pointer;
|
|
6544
6533
|
width: 20px;
|
|
6545
6534
|
height: 20px;
|
|
6546
|
-
color: var(
|
|
6535
|
+
color: var(
|
|
6536
|
+
--ina-content-dark-secondary,
|
|
6537
|
+
#737373
|
|
6538
|
+
); /* Match TextField clear button */
|
|
6547
6539
|
display: flex;
|
|
6548
6540
|
align-items: center;
|
|
6549
6541
|
justify-content: center;
|
|
6550
|
-
border-radius: var(--ina-radius-base);
|
|
6551
|
-
transition: color var(--ina-transition-base);
|
|
6542
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
6543
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
6552
6544
|
background: none;
|
|
6553
6545
|
padding: 0;
|
|
6554
6546
|
}
|
|
6555
6547
|
.ina-input-search__clear-button:hover {
|
|
6556
|
-
color: var(--ina-content-secondary);
|
|
6548
|
+
color: var(--ina-content-secondary, #525252);
|
|
6557
6549
|
background-color: transparent; /* TextField doesn't have bg on hover for clear btn */
|
|
6558
6550
|
}
|
|
6559
6551
|
.ina-input-search__clear-button--hidden {
|
|
@@ -6568,12 +6560,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
6568
6560
|
@media (max-width: 639px) {
|
|
6569
6561
|
.ina-input-search__wrapper {
|
|
6570
6562
|
height: 36px; /* Match md size */
|
|
6571
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
6563
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
6572
6564
|
}
|
|
6573
6565
|
|
|
6574
6566
|
.ina-input-search__input,
|
|
6575
6567
|
.ina-input-search__label {
|
|
6576
|
-
font-size: var(--ina-font-xs) !important;
|
|
6568
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
6577
6569
|
}
|
|
6578
6570
|
}
|
|
6579
6571
|
/**
|
|
@@ -7711,7 +7703,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
7711
7703
|
display: flex;
|
|
7712
7704
|
flex-direction: column;
|
|
7713
7705
|
border-radius: var(--ina-rounded-lg, 8px);
|
|
7714
|
-
background-color: var(--ina-background-primary);
|
|
7706
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7715
7707
|
width: 100%;
|
|
7716
7708
|
max-width: 100%;
|
|
7717
7709
|
overflow-x: auto;
|
|
@@ -7720,14 +7712,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
7720
7712
|
.ina-one-time-password__title {
|
|
7721
7713
|
font-size: 20px;
|
|
7722
7714
|
font-weight: 600; /* semibold */
|
|
7723
|
-
color: var(--ina-content-primary);
|
|
7715
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7724
7716
|
margin-bottom: 16px;
|
|
7725
7717
|
}
|
|
7726
7718
|
/* Description */
|
|
7727
7719
|
.ina-one-time-password__description {
|
|
7728
7720
|
font-size: 14px;
|
|
7729
7721
|
font-weight: 400; /* normal */
|
|
7730
|
-
color: var(--ina-content-secondary);
|
|
7722
|
+
color: var(--ina-content-secondary, #525252);
|
|
7731
7723
|
margin-bottom: 16px;
|
|
7732
7724
|
}
|
|
7733
7725
|
/* Input container */
|
|
@@ -7745,61 +7737,64 @@ dialog.bottom-sheet-dropdown {
|
|
|
7745
7737
|
flex: 0 0 auto;
|
|
7746
7738
|
width: 44px; /* Auto width based on content */
|
|
7747
7739
|
height: 44px;
|
|
7748
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
7740
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
7749
7741
|
border-radius: var(--ina-rounded-lg, 8px);
|
|
7750
|
-
background-color: var(--ina-background-primary);
|
|
7742
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7751
7743
|
font-size: 24px;
|
|
7752
7744
|
font-weight: 500;
|
|
7753
|
-
color: var(--ina-content-primary);
|
|
7745
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7754
7746
|
text-align: center;
|
|
7755
7747
|
outline: none;
|
|
7756
|
-
transition: all var(--ina-transition-base);
|
|
7748
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
7757
7749
|
font-family: inherit;
|
|
7758
7750
|
}
|
|
7759
7751
|
/* Hover state */
|
|
7760
7752
|
.ina-one-time-password__input:hover:not(:disabled):not(:-moz-read-only) {
|
|
7761
|
-
background-color: var(--ina-neutral-50);
|
|
7753
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
7762
7754
|
}
|
|
7763
7755
|
.ina-one-time-password__input:hover:not(:disabled):not(:read-only) {
|
|
7764
|
-
background-color: var(--ina-neutral-50);
|
|
7756
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
7765
7757
|
}
|
|
7766
7758
|
/* Focus state */
|
|
7767
7759
|
.ina-one-time-password__input:focus {
|
|
7768
|
-
border-color: var(--ina-content-primary);
|
|
7769
|
-
box-shadow:
|
|
7770
|
-
|
|
7760
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
7761
|
+
box-shadow:
|
|
7762
|
+
0 0 0 2px #fff,
|
|
7763
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
7764
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7771
7765
|
}
|
|
7772
7766
|
/* Error/Invalid state */
|
|
7773
7767
|
.ina-one-time-password__input--error {
|
|
7774
|
-
border-color: var(--ina-negative-500);
|
|
7768
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
7775
7769
|
}
|
|
7776
7770
|
.ina-one-time-password__input--error:focus {
|
|
7777
|
-
border-color: var(--ina-negative-500);
|
|
7778
|
-
box-shadow:
|
|
7779
|
-
0 0 0
|
|
7771
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
7772
|
+
box-shadow:
|
|
7773
|
+
0 0 0 2px #fff,
|
|
7774
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
|
|
7780
7775
|
}
|
|
7781
7776
|
/* Disabled state */
|
|
7782
7777
|
.ina-one-time-password__input:disabled {
|
|
7783
|
-
background-color: var(--ina-background-tertiary);
|
|
7784
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
7778
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
7779
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
7785
7780
|
cursor: not-allowed;
|
|
7786
7781
|
opacity: 0.6;
|
|
7787
|
-
color: var(--ina-content-tertiary);
|
|
7782
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
7788
7783
|
}
|
|
7789
7784
|
/* Readonly state */
|
|
7790
7785
|
.ina-one-time-password__input[readonly] {
|
|
7791
|
-
background-color: var(--ina-background-tertiary);
|
|
7786
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
7792
7787
|
cursor: default;
|
|
7793
7788
|
}
|
|
7794
7789
|
/* Helper text */
|
|
7795
7790
|
.ina-one-time-password__helper-text {
|
|
7796
7791
|
font-size: 14px;
|
|
7797
7792
|
font-weight: 400; /* normal */
|
|
7798
|
-
color: var(--ina-content-primary);
|
|
7793
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7799
7794
|
}
|
|
7800
7795
|
/* Helper text error state */
|
|
7801
7796
|
.ina-one-time-password__helper-text--error {
|
|
7802
|
-
color: var(--ina-negative-500);
|
|
7797
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
7803
7798
|
}
|
|
7804
7799
|
/* Responsive adjustments */
|
|
7805
7800
|
@media (max-width: 640px) {
|
|
@@ -8215,27 +8210,27 @@ dialog.bottom-sheet-dropdown {
|
|
|
8215
8210
|
}
|
|
8216
8211
|
/* Label styling */
|
|
8217
8212
|
.ina-password-input__label {
|
|
8218
|
-
font-size: var(--ina-font-sm);
|
|
8219
|
-
font-weight: var(--ina-font-medium);
|
|
8220
|
-
color: var(--ina-content-primary);
|
|
8221
|
-
margin-bottom: var(--ina-spacing-2);
|
|
8213
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8214
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8215
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8216
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
8222
8217
|
}
|
|
8223
8218
|
.ina-password-input__label--required .ina-password-input__asterisk {
|
|
8224
|
-
color: var(--ina-negative-500);
|
|
8225
|
-
margin-left: var(--ina-spacing-1);
|
|
8219
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
8220
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
8226
8221
|
}
|
|
8227
8222
|
/* Input wrapper */
|
|
8228
8223
|
.ina-password-input__wrapper {
|
|
8229
8224
|
display: flex;
|
|
8230
8225
|
align-items: center;
|
|
8231
|
-
gap: var(--ina-spacing-2);
|
|
8232
|
-
border-radius: var(--ina-radius-lg);
|
|
8233
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8234
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8235
|
-
background-color: var(--ina-background-primary);
|
|
8226
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8227
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
8228
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8229
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8230
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8236
8231
|
transition:
|
|
8237
|
-
border-color var(--ina-transition-base),
|
|
8238
|
-
box-shadow var(--ina-transition-base);
|
|
8232
|
+
border-color var(--ina-transition-base, 200ms ease-in-out),
|
|
8233
|
+
box-shadow var(--ina-transition-base, 200ms ease-in-out);
|
|
8239
8234
|
}
|
|
8240
8235
|
/* Size variants */
|
|
8241
8236
|
.ina-password-input__wrapper--size-sm {
|
|
@@ -8282,42 +8277,42 @@ dialog.bottom-sheet-dropdown {
|
|
|
8282
8277
|
border-color: var(--ina-stroke-primary);
|
|
8283
8278
|
}
|
|
8284
8279
|
.ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
|
|
8285
|
-
border-color: var(--ina-content-primary);
|
|
8280
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8286
8281
|
box-shadow:
|
|
8287
|
-
0 0 0
|
|
8288
|
-
0 0 0
|
|
8282
|
+
0 0 0 2px #fff,
|
|
8283
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
8289
8284
|
}
|
|
8290
8285
|
.ina-password-input__wrapper.ina-password-input__wrapper--error {
|
|
8291
8286
|
border-color: var(--ina-negative-500);
|
|
8292
8287
|
}
|
|
8293
8288
|
.ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
|
|
8294
|
-
border-color: var(--ina-negative-600);
|
|
8289
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
8295
8290
|
box-shadow:
|
|
8296
|
-
0 0 0
|
|
8297
|
-
0 0 0
|
|
8291
|
+
0 0 0 2px #fff,
|
|
8292
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
|
|
8298
8293
|
}
|
|
8299
8294
|
.ina-password-input__wrapper.ina-password-input__wrapper--warning {
|
|
8300
8295
|
border-color: var(--ina-warning-500);
|
|
8301
8296
|
}
|
|
8302
8297
|
.ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
|
|
8303
|
-
border-color: var(--ina-warning-600);
|
|
8298
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
8304
8299
|
box-shadow:
|
|
8305
|
-
0 0 0
|
|
8306
|
-
0 0 0
|
|
8300
|
+
0 0 0 2px #fff,
|
|
8301
|
+
0 0 0 3px var(--ina-warning-500, #eebb04) !important;
|
|
8307
8302
|
}
|
|
8308
8303
|
.ina-password-input__wrapper.ina-password-input__wrapper--success {
|
|
8309
8304
|
border-color: var(--ina-positive-600);
|
|
8310
8305
|
}
|
|
8311
8306
|
.ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
|
|
8312
|
-
border-color: var(--ina-positive-600);
|
|
8307
|
+
border-color: var(--ina-positive-600, #288034);
|
|
8313
8308
|
box-shadow:
|
|
8314
|
-
0 0 0
|
|
8315
|
-
0 0 0
|
|
8309
|
+
0 0 0 2px #fff,
|
|
8310
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
|
|
8316
8311
|
}
|
|
8317
8312
|
/* Prefix icon */
|
|
8318
8313
|
.ina-password-input__prefix-icon {
|
|
8319
8314
|
flex-shrink: 0;
|
|
8320
|
-
color: var(--ina-content-secondary);
|
|
8315
|
+
color: var(--ina-content-secondary, #525252);
|
|
8321
8316
|
}
|
|
8322
8317
|
/* Input field */
|
|
8323
8318
|
.ina-password-input__input {
|
|
@@ -8325,14 +8320,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8325
8320
|
border: none;
|
|
8326
8321
|
outline: none;
|
|
8327
8322
|
background: transparent;
|
|
8328
|
-
font-size: var(--ina-font-sm);
|
|
8329
|
-
color: var(--ina-content-primary);
|
|
8323
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8324
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8330
8325
|
}
|
|
8331
8326
|
.ina-password-input__input::-moz-placeholder {
|
|
8332
|
-
color: var(--ina-content-tertiary);
|
|
8327
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8333
8328
|
}
|
|
8334
8329
|
.ina-password-input__input::placeholder {
|
|
8335
|
-
color: var(--ina-content-tertiary);
|
|
8330
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8336
8331
|
}
|
|
8337
8332
|
.ina-password-input__input:disabled {
|
|
8338
8333
|
cursor: not-allowed;
|
|
@@ -8352,12 +8347,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
8352
8347
|
border: none;
|
|
8353
8348
|
background: transparent;
|
|
8354
8349
|
cursor: pointer;
|
|
8355
|
-
border-radius: var(--ina-radius-base);
|
|
8356
|
-
transition: color var(--ina-transition-base);
|
|
8350
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
8351
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
8357
8352
|
display: flex;
|
|
8358
8353
|
align-items: center;
|
|
8359
8354
|
justify-content: center;
|
|
8360
|
-
color: var(--ina-content-dark-secondary);
|
|
8355
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
8361
8356
|
}
|
|
8362
8357
|
.ina-password-input__action-button:hover:not(:disabled) {
|
|
8363
8358
|
color: var(--ina-content-secondary);
|
|
@@ -8403,10 +8398,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
8403
8398
|
}
|
|
8404
8399
|
/* Character count */
|
|
8405
8400
|
.ina-password-input__character-count {
|
|
8406
|
-
color: var(--ina-content-secondary);
|
|
8407
|
-
font-size: var(--ina-font-xs);
|
|
8408
|
-
font-weight: var(--ina-font-medium);
|
|
8409
|
-
margin-left: var(--ina-spacing-2);
|
|
8401
|
+
color: var(--ina-content-secondary, #525252);
|
|
8402
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8403
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8404
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
8410
8405
|
}
|
|
8411
8406
|
.ina-password-input__character-count--warning {
|
|
8412
8407
|
color: var(--ina-warning-500);
|
|
@@ -8471,11 +8466,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
8471
8466
|
}
|
|
8472
8467
|
.ina-password-input__wrapper--disabled
|
|
8473
8468
|
> .ina-password-input__input::-moz-placeholder {
|
|
8474
|
-
color: var(--ina-content-tertiary) !important;
|
|
8469
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8475
8470
|
}
|
|
8476
8471
|
.ina-password-input__wrapper--disabled
|
|
8477
8472
|
> .ina-password-input__input::placeholder {
|
|
8478
|
-
color: var(--ina-content-tertiary) !important;
|
|
8473
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8479
8474
|
}
|
|
8480
8475
|
.ina-password-input__wrapper--disabled .ina-password-input__input {
|
|
8481
8476
|
cursor: not-allowed;
|
|
@@ -8496,15 +8491,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8496
8491
|
/* Focus styles - Sesuai design Figma */
|
|
8497
8492
|
.ina-password-input__wrapper:focus-within {
|
|
8498
8493
|
box-shadow:
|
|
8499
|
-
0 0 0
|
|
8500
|
-
0 0 0
|
|
8494
|
+
0 0 0 2px #fff,
|
|
8495
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8501
8496
|
outline: none;
|
|
8502
|
-
background-color: var(--ina-background-primary);
|
|
8503
|
-
border-color: var(--ina-content-primary);
|
|
8497
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8498
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8504
8499
|
}
|
|
8505
8500
|
/* Hover styles - Sesuai design Figma */
|
|
8506
8501
|
.ina-password-input__wrapper:hover {
|
|
8507
|
-
background-color: var(--ina-neutral-50);
|
|
8502
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8508
8503
|
}
|
|
8509
8504
|
/* Strength indicator */
|
|
8510
8505
|
.ina-password-input__strength-indicator {
|
|
@@ -8659,25 +8654,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
8659
8654
|
}
|
|
8660
8655
|
/* Label */
|
|
8661
8656
|
.ina-phone-input__label {
|
|
8662
|
-
font-size: var(--ina-font-sm);
|
|
8663
|
-
font-weight: var(--ina-font-medium);
|
|
8664
|
-
color: var(--ina-content-primary);
|
|
8665
|
-
margin-bottom: var(--ina-spacing-2);
|
|
8657
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8658
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8659
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8660
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
8666
8661
|
}
|
|
8667
8662
|
.ina-phone-input__label--required .ina-phone-input__asterisk {
|
|
8668
|
-
color: var(--ina-error-500);
|
|
8669
|
-
margin-left: var(--ina-spacing-1);
|
|
8663
|
+
color: var(--ina-error-500, #f02d2d);
|
|
8664
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
8670
8665
|
}
|
|
8671
8666
|
/* Input wrapper */
|
|
8672
8667
|
.ina-phone-input__wrapper {
|
|
8673
8668
|
display: flex;
|
|
8674
8669
|
align-items: center;
|
|
8675
|
-
gap: var(--ina-spacing-2);
|
|
8676
|
-
border-radius: var(--ina-radius-lg);
|
|
8677
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8678
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8679
|
-
background-color: var(--ina-background-primary);
|
|
8680
|
-
transition: all var(--ina-transition-base);
|
|
8670
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8671
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
8672
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8673
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8674
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8675
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
8681
8676
|
position: relative;
|
|
8682
8677
|
}
|
|
8683
8678
|
/* Size variants - match TextField */
|
|
@@ -8698,7 +8693,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
8698
8693
|
object-fit: contain;
|
|
8699
8694
|
box-shadow:
|
|
8700
8695
|
0 1px 2px 0 rgba(31, 31, 31, 0.1),
|
|
8701
|
-
0 0 0 2px var(--ina-neutral-25) !important;
|
|
8696
|
+
0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
|
|
8702
8697
|
}
|
|
8703
8698
|
/* Responsive adjustments */
|
|
8704
8699
|
@media (max-width: 767px) {
|
|
@@ -8781,17 +8776,17 @@ dialog.bottom-sheet-dropdown {
|
|
|
8781
8776
|
border: none;
|
|
8782
8777
|
cursor: pointer;
|
|
8783
8778
|
padding: 0;
|
|
8784
|
-
color: var(--ina-content-primary);
|
|
8785
|
-
font-size: var(--ina-font-sm);
|
|
8779
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8780
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8786
8781
|
height: 100%;
|
|
8787
8782
|
}
|
|
8788
8783
|
.ina-phone-input__country-code {
|
|
8789
|
-
font-weight: var(--ina-font-medium);
|
|
8784
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8790
8785
|
white-space: nowrap;
|
|
8791
8786
|
}
|
|
8792
8787
|
.ina-phone-input__country-chevron {
|
|
8793
|
-
color: var(--ina-content-secondary);
|
|
8794
|
-
transition: transform var(--ina-transition-base);
|
|
8788
|
+
color: var(--ina-content-secondary, #525252);
|
|
8789
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
8795
8790
|
}
|
|
8796
8791
|
.ina-phone-input__country-chevron--open {
|
|
8797
8792
|
transform: rotate(180deg);
|
|
@@ -8800,8 +8795,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8800
8795
|
.ina-phone-input__divider {
|
|
8801
8796
|
width: 1px;
|
|
8802
8797
|
height: 20px;
|
|
8803
|
-
background-color: var(--ina-stroke-primary);
|
|
8804
|
-
margin-right: var(--ina-spacing-2);
|
|
8798
|
+
background-color: var(--ina-stroke-primary, #e5e5e5);
|
|
8799
|
+
margin-right: var(--ina-spacing-2, 0.5rem);
|
|
8805
8800
|
flex-shrink: 0;
|
|
8806
8801
|
}
|
|
8807
8802
|
/* Input field */
|
|
@@ -8810,22 +8805,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
8810
8805
|
background: transparent;
|
|
8811
8806
|
border: none;
|
|
8812
8807
|
outline: none;
|
|
8813
|
-
font-size: var(--ina-font-sm);
|
|
8808
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8814
8809
|
font-family: inherit;
|
|
8815
|
-
color: var(--ina-content-primary);
|
|
8810
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8816
8811
|
min-width: 0;
|
|
8817
8812
|
}
|
|
8818
8813
|
.ina-phone-input__input::-moz-placeholder {
|
|
8819
|
-
color: var(--ina-content-tertiary);
|
|
8814
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8820
8815
|
}
|
|
8821
8816
|
.ina-phone-input__input::placeholder {
|
|
8822
|
-
color: var(--ina-content-tertiary);
|
|
8817
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8823
8818
|
}
|
|
8824
8819
|
/* Helper text / Status message */
|
|
8825
8820
|
.ina-phone-input__helper-text {
|
|
8826
|
-
font-size: var(--ina-font-xs);
|
|
8827
|
-
padding-top: var(--ina-spacing-1);
|
|
8828
|
-
color: var(--ina-content-secondary);
|
|
8821
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8822
|
+
padding-top: var(--ina-spacing-1, 0.25rem);
|
|
8823
|
+
color: var(--ina-content-secondary, #525252);
|
|
8829
8824
|
}
|
|
8830
8825
|
.ina-phone-input__helper-text--error {
|
|
8831
8826
|
color: var(--ina-negative-500);
|
|
@@ -8847,8 +8842,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8847
8842
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
|
|
8848
8843
|
border-color: var(--ina-negative-500);
|
|
8849
8844
|
box-shadow:
|
|
8850
|
-
0 0 0
|
|
8851
|
-
0 0 0
|
|
8845
|
+
0 0 0 2px #fff,
|
|
8846
|
+
0 0 0 3px var(--ina-negative-50) !important;
|
|
8852
8847
|
}
|
|
8853
8848
|
.ina-phone-input__wrapper--status-warning {
|
|
8854
8849
|
border-color: var(--ina-warning-500);
|
|
@@ -8856,8 +8851,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8856
8851
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
|
|
8857
8852
|
border-color: var(--ina-warning-500);
|
|
8858
8853
|
box-shadow:
|
|
8859
|
-
0 0 0
|
|
8860
|
-
0 0 0
|
|
8854
|
+
0 0 0 2px #fff,
|
|
8855
|
+
0 0 0 3px var(--ina-warning-50) !important;
|
|
8861
8856
|
}
|
|
8862
8857
|
.ina-phone-input__wrapper--status-success {
|
|
8863
8858
|
border-color: var(--ina-positive-600);
|
|
@@ -8865,21 +8860,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8865
8860
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
|
|
8866
8861
|
border-color: var(--ina-positive-600);
|
|
8867
8862
|
box-shadow:
|
|
8868
|
-
0 0 0
|
|
8869
|
-
0 0 0
|
|
8863
|
+
0 0 0 2px #fff,
|
|
8864
|
+
0 0 0 3px var(--ina-positive-50) !important;
|
|
8870
8865
|
}
|
|
8871
8866
|
/* Focus styles */
|
|
8872
8867
|
.ina-phone-input__wrapper:focus-within {
|
|
8873
8868
|
box-shadow:
|
|
8874
|
-
0 0 0
|
|
8875
|
-
0 0 0
|
|
8869
|
+
0 0 0 2px #fff,
|
|
8870
|
+
0 0 0 3px var(--ina-primary-primary);
|
|
8876
8871
|
outline: none;
|
|
8877
8872
|
background-color: var(--ina-background-primary);
|
|
8878
8873
|
border-color: var(--ina-content-primary);
|
|
8879
8874
|
}
|
|
8880
8875
|
/* Hover states */
|
|
8881
8876
|
.ina-phone-input__wrapper:hover:not(.ina-phone-input__wrapper--disabled) {
|
|
8882
|
-
background-color: var(--ina-neutral-50);
|
|
8877
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8883
8878
|
}
|
|
8884
8879
|
/* Disabled state */
|
|
8885
8880
|
.ina-phone-input__wrapper--disabled {
|
|
@@ -8891,14 +8886,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8891
8886
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input {
|
|
8892
8887
|
cursor: not-allowed;
|
|
8893
8888
|
color: var(
|
|
8894
|
-
--ina-content-tertiary
|
|
8889
|
+
--ina-content-tertiary,
|
|
8890
|
+
#a3a3a3
|
|
8895
8891
|
); /* Use content-tertiary for text color to act as disabled */
|
|
8896
8892
|
}
|
|
8897
8893
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::-moz-placeholder {
|
|
8898
|
-
color: var(--ina-content-tertiary) !important;
|
|
8894
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8899
8895
|
}
|
|
8900
8896
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::placeholder {
|
|
8901
|
-
color: var(--ina-content-tertiary) !important;
|
|
8897
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8902
8898
|
}
|
|
8903
8899
|
.ina-phone-input__wrapper--disabled .ina-phone-input__country-button {
|
|
8904
8900
|
cursor: not-allowed;
|
|
@@ -8910,10 +8906,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8910
8906
|
top: 100%;
|
|
8911
8907
|
left: calc(-1 * var(--ina-spacing-3, 12px));
|
|
8912
8908
|
margin-top: var(--ina-spacing-3, 12px) !important;
|
|
8913
|
-
background: var(--ina-background-primary);
|
|
8914
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8915
|
-
border-radius: var(--ina-radius-lg);
|
|
8916
|
-
box-shadow: var(
|
|
8909
|
+
background: var(--ina-background-primary, #ffffff);
|
|
8910
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8911
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
8912
|
+
box-shadow: var(
|
|
8913
|
+
--ina-shadow-lg,
|
|
8914
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
8915
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
|
8916
|
+
);
|
|
8917
8917
|
z-index: 100;
|
|
8918
8918
|
width: 324px; /* Or min-content depending on design */
|
|
8919
8919
|
max-height: 348px;
|
|
@@ -8923,21 +8923,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8923
8923
|
padding: var(--ina-spacing-2);
|
|
8924
8924
|
}
|
|
8925
8925
|
.ina-phone-input__country-search {
|
|
8926
|
-
padding: var(--ina-spacing-1) 0 var(--ina-spacing-2) 0;
|
|
8926
|
+
padding: var(--ina-spacing-1, 0.25rem) 0 var(--ina-spacing-2, 0.5rem) 0;
|
|
8927
8927
|
}
|
|
8928
8928
|
.ina-phone-input__country-search-input {
|
|
8929
8929
|
width: 100%;
|
|
8930
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
8931
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8932
|
-
border-radius: var(--ina-radius-md);
|
|
8933
|
-
font-size: var(--ina-font-xs);
|
|
8930
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
8931
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8932
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
8933
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8934
8934
|
}
|
|
8935
8935
|
.ina-phone-input__country-search-input:focus {
|
|
8936
8936
|
outline: none;
|
|
8937
|
-
border-color: var(--ina-content-primary);
|
|
8937
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8938
8938
|
box-shadow:
|
|
8939
|
-
0 0 0
|
|
8940
|
-
0 0 0
|
|
8939
|
+
0 0 0 2px #fff,
|
|
8940
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8941
8941
|
}
|
|
8942
8942
|
.ina-phone-input__country-list {
|
|
8943
8943
|
overflow-y: auto;
|
|
@@ -8947,13 +8947,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
8947
8947
|
display: flex;
|
|
8948
8948
|
align-items: center;
|
|
8949
8949
|
width: 100%;
|
|
8950
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8950
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8951
8951
|
border: none;
|
|
8952
8952
|
background: none;
|
|
8953
8953
|
cursor: pointer;
|
|
8954
8954
|
text-align: left;
|
|
8955
|
-
transition: background-color var(--ina-transition-base);
|
|
8956
|
-
gap: var(--ina-spacing-2);
|
|
8955
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
8956
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8957
8957
|
}
|
|
8958
8958
|
.ina-phone-input__country-option:hover {
|
|
8959
8959
|
background-color: var(--ina-background-secondary, #f5f5f5);
|
|
@@ -8965,16 +8965,16 @@ dialog.bottom-sheet-dropdown {
|
|
|
8965
8965
|
}
|
|
8966
8966
|
.ina-phone-input__country-name {
|
|
8967
8967
|
flex: 1;
|
|
8968
|
-
font-size: var(--ina-font-sm);
|
|
8968
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8969
8969
|
font-weight: 400;
|
|
8970
|
-
color: var(--ina-content-primary);
|
|
8970
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8971
8971
|
white-space: nowrap;
|
|
8972
8972
|
overflow: hidden;
|
|
8973
8973
|
text-overflow: ellipsis;
|
|
8974
8974
|
}
|
|
8975
8975
|
.ina-phone-input__country-dial-code {
|
|
8976
|
-
font-size: var(--ina-font-sm);
|
|
8977
|
-
color: var(--ina-content-secondary);
|
|
8976
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8977
|
+
color: var(--ina-content-secondary, #525252);
|
|
8978
8978
|
}
|
|
8979
8979
|
/**
|
|
8980
8980
|
* ProgressBar Component Styles
|
|
@@ -9379,33 +9379,33 @@ dialog.bottom-sheet-dropdown {
|
|
|
9379
9379
|
/* Base container styling */
|
|
9380
9380
|
display: flex;
|
|
9381
9381
|
flex-direction: column;
|
|
9382
|
-
gap: var(--ina-spacing-2);
|
|
9382
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9383
9383
|
}
|
|
9384
9384
|
/* Label styling */
|
|
9385
9385
|
.ina-radio-input__main-label {
|
|
9386
9386
|
display: block;
|
|
9387
|
-
font-size: var(--ina-font-sm);
|
|
9388
|
-
color: var(--ina-content-color-181717);
|
|
9389
|
-
font-weight: var(--ina-font-medium);
|
|
9387
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9388
|
+
color: var(--ina-content-color-181717, #1f1f1f);
|
|
9389
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9390
9390
|
}
|
|
9391
9391
|
/* Radio group container */
|
|
9392
9392
|
.ina-radio-input__group {
|
|
9393
9393
|
display: flex;
|
|
9394
9394
|
flex-direction: column;
|
|
9395
|
-
gap: var(--ina-spacing-2);
|
|
9395
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9396
9396
|
}
|
|
9397
9397
|
/* Individual radio option */
|
|
9398
9398
|
.ina-radio-input__option {
|
|
9399
9399
|
display: flex;
|
|
9400
9400
|
align-items: center;
|
|
9401
|
-
gap: var(--ina-spacing-2);
|
|
9401
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9402
9402
|
cursor: pointer;
|
|
9403
|
-
transition: background-color var(--ina-transition-base);
|
|
9404
|
-
padding: var(--ina-spacing-2);
|
|
9405
|
-
border-radius: var(--ina-radius-md);
|
|
9403
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9404
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
9405
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9406
9406
|
}
|
|
9407
9407
|
.ina-radio-input__option:hover {
|
|
9408
|
-
background-color: var(--ina-neutral-50);
|
|
9408
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
9409
9409
|
}
|
|
9410
9410
|
.ina-radio-input__option--disabled {
|
|
9411
9411
|
cursor: not-allowed;
|
|
@@ -9422,10 +9422,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9422
9422
|
height: 20px;
|
|
9423
9423
|
border: 1px solid var(--ina-stroke-tertiary, #141414);
|
|
9424
9424
|
border-radius: 50%;
|
|
9425
|
-
background-color: var(--ina-background-primary,
|
|
9425
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9426
9426
|
cursor: pointer;
|
|
9427
9427
|
position: relative;
|
|
9428
|
-
transition: all var(--ina-transition-base);
|
|
9428
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9429
9429
|
flex-shrink: 0;
|
|
9430
9430
|
}
|
|
9431
9431
|
/* Hover state - Add drop shadow */
|
|
@@ -9438,8 +9438,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9438
9438
|
.ina-radio-input__field:focus:not(:disabled) {
|
|
9439
9439
|
outline: none;
|
|
9440
9440
|
box-shadow:
|
|
9441
|
-
0 0 0
|
|
9442
|
-
0 0 0
|
|
9441
|
+
0 0 0 2px #fff,
|
|
9442
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
9443
9443
|
}
|
|
9444
9444
|
/* Active state - Add drop shadow */
|
|
9445
9445
|
.ina-radio-input__field:active:not(:disabled) {
|
|
@@ -9448,7 +9448,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9448
9448
|
/* Selected state */
|
|
9449
9449
|
.ina-radio-input__field:checked {
|
|
9450
9450
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9451
|
-
background-color: var(--ina-background-primary,
|
|
9451
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9452
9452
|
}
|
|
9453
9453
|
.ina-radio-input__field:checked::after {
|
|
9454
9454
|
content: '';
|
|
@@ -9464,13 +9464,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9464
9464
|
/* Checked + Focus - Keep focus ring */
|
|
9465
9465
|
.ina-radio-input__field:checked:focus-visible:not(:disabled) {
|
|
9466
9466
|
box-shadow:
|
|
9467
|
-
0 0 0
|
|
9468
|
-
0 0 0
|
|
9467
|
+
0 0 0 2px #fff,
|
|
9468
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9469
9469
|
}
|
|
9470
9470
|
/* Disabled states */
|
|
9471
9471
|
.ina-radio-input__field:disabled {
|
|
9472
9472
|
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9473
|
-
background-color: var(--ina-background-secondary,
|
|
9473
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9474
9474
|
cursor: not-allowed;
|
|
9475
9475
|
opacity: 1;
|
|
9476
9476
|
filter: none;
|
|
@@ -9497,8 +9497,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9497
9497
|
}
|
|
9498
9498
|
/* Radio option label */
|
|
9499
9499
|
.ina-radio-input__option-label {
|
|
9500
|
-
font-size: var(--ina-font-sm);
|
|
9501
|
-
color: var(--ina-content-primary);
|
|
9500
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9501
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9502
9502
|
cursor: pointer;
|
|
9503
9503
|
-webkit-user-select: none;
|
|
9504
9504
|
-moz-user-select: none;
|
|
@@ -9513,7 +9513,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9513
9513
|
/* Size variants */
|
|
9514
9514
|
.ina-radio-input--size-sm .ina-radio-input__main-label,
|
|
9515
9515
|
.ina-radio-input--size-sm .ina-radio-input__option-label {
|
|
9516
|
-
font-size: var(--ina-font-xs);
|
|
9516
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9517
9517
|
}
|
|
9518
9518
|
.ina-radio-input--size-sm .ina-radio-input__field {
|
|
9519
9519
|
width: 16px;
|
|
@@ -9525,7 +9525,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9525
9525
|
}
|
|
9526
9526
|
.ina-radio-input--size-lg .ina-radio-input__main-label,
|
|
9527
9527
|
.ina-radio-input--size-lg .ina-radio-input__option-label {
|
|
9528
|
-
font-size: var(--ina-font-base);
|
|
9528
|
+
font-size: var(--ina-font-base, 1rem);
|
|
9529
9529
|
}
|
|
9530
9530
|
.ina-radio-input--size-lg .ina-radio-input__field {
|
|
9531
9531
|
width: 24px;
|
|
@@ -9539,14 +9539,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
9539
9539
|
.ina-radio-input--orientation-horizontal .ina-radio-input__group {
|
|
9540
9540
|
flex-direction: row;
|
|
9541
9541
|
flex-wrap: wrap;
|
|
9542
|
-
gap: var(--ina-spacing-4);
|
|
9542
|
+
gap: var(--ina-spacing-4, 1rem);
|
|
9543
9543
|
align-items: center;
|
|
9544
9544
|
}
|
|
9545
9545
|
/* Status variants */
|
|
9546
9546
|
.ina-radio-input__main-label--required::after {
|
|
9547
9547
|
content: '*';
|
|
9548
|
-
color: var(--ina-danger-5);
|
|
9549
|
-
margin-left: var(--ina-spacing-1);
|
|
9548
|
+
color: var(--ina-danger-5, #f02d2d);
|
|
9549
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9550
9550
|
}
|
|
9551
9551
|
/* Focus indicators */
|
|
9552
9552
|
/* Focus indicators */
|
|
@@ -9556,13 +9556,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9556
9556
|
}
|
|
9557
9557
|
/* Error state */
|
|
9558
9558
|
.ina-radio-input--error .ina-radio-input__main-label {
|
|
9559
|
-
color: var(--ina-negative-500);
|
|
9559
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9560
9560
|
}
|
|
9561
9561
|
.ina-radio-input--error .ina-radio-input__field {
|
|
9562
|
-
border-color: var(--ina-negative-500);
|
|
9562
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9563
9563
|
}
|
|
9564
9564
|
.ina-radio-input--error .ina-radio-input__field:focus-visible {
|
|
9565
|
-
outline-color: var(--ina-negative-500);
|
|
9565
|
+
outline-color: var(--ina-negative-500, #f02d2d);
|
|
9566
9566
|
}
|
|
9567
9567
|
/* Loading state */
|
|
9568
9568
|
.ina-radio-input--loading .ina-radio-input__option {
|
|
@@ -9573,12 +9573,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
9573
9573
|
}
|
|
9574
9574
|
/* Help text */
|
|
9575
9575
|
.ina-radio-input__help-text {
|
|
9576
|
-
font-size: var(--ina-font-xs);
|
|
9577
|
-
color: var(--ina-content-secondary);
|
|
9578
|
-
margin-top: var(--ina-spacing-1);
|
|
9576
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9577
|
+
color: var(--ina-content-secondary, #525252);
|
|
9578
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
9579
9579
|
}
|
|
9580
9580
|
.ina-radio-input__help-text--error {
|
|
9581
|
-
color: var(--ina-negative-500);
|
|
9581
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9582
9582
|
}
|
|
9583
9583
|
/* Responsive adjustments */
|
|
9584
9584
|
@media (max-width: 640px) {
|
|
@@ -9659,27 +9659,27 @@ dialog.bottom-sheet-dropdown {
|
|
|
9659
9659
|
/* Base container styling */
|
|
9660
9660
|
position: relative;
|
|
9661
9661
|
display: inline-block;
|
|
9662
|
-
font-size: var(--ina-font-xs);
|
|
9662
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9663
9663
|
}
|
|
9664
9664
|
.ina-select-dropdown:focus-visible {
|
|
9665
9665
|
outline: none;
|
|
9666
9666
|
}
|
|
9667
9667
|
@media (min-width: 768px) {
|
|
9668
9668
|
.ina-select-dropdown {
|
|
9669
|
-
font-size: var(--ina-font-sm);
|
|
9669
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9670
9670
|
}
|
|
9671
9671
|
}
|
|
9672
9672
|
/* Label Styles */
|
|
9673
9673
|
.ina-select-dropdown__label {
|
|
9674
|
-
font-size: var(--ina-font-sm);
|
|
9675
|
-
font-weight: var(--ina-font-medium);
|
|
9676
|
-
color: var(--ina-content-primary);
|
|
9677
|
-
margin-bottom: var(--ina-spacing-2);
|
|
9674
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9675
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9676
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9677
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
9678
9678
|
display: block;
|
|
9679
9679
|
}
|
|
9680
9680
|
.ina-select-dropdown__required {
|
|
9681
|
-
color: var(--ina-negative-500);
|
|
9682
|
-
margin-left: var(--ina-spacing-1);
|
|
9681
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9682
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9683
9683
|
}
|
|
9684
9684
|
/* Trigger button */
|
|
9685
9685
|
.ina-select-dropdown__trigger {
|
|
@@ -9687,15 +9687,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
9687
9687
|
display: flex;
|
|
9688
9688
|
align-items: center;
|
|
9689
9689
|
justify-content: space-between;
|
|
9690
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9691
|
-
border-radius: var(--ina-radius-lg);
|
|
9692
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
9693
|
-
background-color: var(--ina-background-primary);
|
|
9694
|
-
color: var(--ina-content-primary);
|
|
9690
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9691
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9692
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
|
|
9693
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9694
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9695
9695
|
cursor: pointer;
|
|
9696
9696
|
font-size: inherit;
|
|
9697
9697
|
outline: none;
|
|
9698
|
-
transition: all var(--ina-transition-base);
|
|
9698
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9699
9699
|
position: relative;
|
|
9700
9700
|
}
|
|
9701
9701
|
/* NEW: Trigger Input for Search */
|
|
@@ -9712,10 +9712,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9712
9712
|
cursor: text;
|
|
9713
9713
|
}
|
|
9714
9714
|
.ina-select-dropdown__trigger-input::-moz-placeholder {
|
|
9715
|
-
color: var(--ina-content-tertiary);
|
|
9715
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9716
9716
|
}
|
|
9717
9717
|
.ina-select-dropdown__trigger-input::placeholder {
|
|
9718
|
-
color: var(--ina-content-tertiary);
|
|
9718
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9719
9719
|
}
|
|
9720
9720
|
.ina-select-dropdown__trigger-input:disabled {
|
|
9721
9721
|
cursor: not-allowed;
|
|
@@ -9748,52 +9748,52 @@ dialog.bottom-sheet-dropdown {
|
|
|
9748
9748
|
}
|
|
9749
9749
|
}
|
|
9750
9750
|
.ina-select-dropdown__trigger:hover {
|
|
9751
|
-
background-color: var(--ina-background-secondary);
|
|
9751
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9752
9752
|
}
|
|
9753
9753
|
/* Focus state for trigger when it acts as container */
|
|
9754
9754
|
.ina-select-dropdown__trigger:focus-within {
|
|
9755
9755
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9756
|
-
background: var(--ina-background-primary, #
|
|
9756
|
+
background: var(--ina-background-primary, #ffffff);
|
|
9757
9757
|
box-shadow:
|
|
9758
|
-
0 0 0
|
|
9759
|
-
0 0 0
|
|
9758
|
+
0 0 0 2px #fff,
|
|
9759
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9760
9760
|
}
|
|
9761
9761
|
/* Status variants */
|
|
9762
9762
|
.ina-select-dropdown__trigger--status-neutral {
|
|
9763
|
-
border-color: var(--ina-stroke-primary);
|
|
9763
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9764
9764
|
}
|
|
9765
9765
|
.ina-select-dropdown__trigger--status-neutral:focus-within {
|
|
9766
|
-
border-color: var(--ina-stroke-tertiary);
|
|
9766
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9767
9767
|
box-shadow:
|
|
9768
|
-
0 0 0
|
|
9769
|
-
0 0 0
|
|
9768
|
+
0 0 0 2px #fff,
|
|
9769
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9770
9770
|
}
|
|
9771
9771
|
.ina-select-dropdown__trigger--status-error {
|
|
9772
|
-
border-color: var(--ina-negative-500);
|
|
9772
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9773
9773
|
}
|
|
9774
9774
|
.ina-select-dropdown__trigger--status-error:focus-within {
|
|
9775
|
-
border-color: var(--ina-negative-600);
|
|
9775
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
9776
9776
|
box-shadow:
|
|
9777
|
-
0 0 0
|
|
9778
|
-
0 0 0
|
|
9777
|
+
0 0 0 2px #fff,
|
|
9778
|
+
0 0 0 3px var(--ina-negative-50, #fffafa);
|
|
9779
9779
|
}
|
|
9780
9780
|
.ina-select-dropdown__trigger--status-warning {
|
|
9781
|
-
border-color: var(--ina-warning-500);
|
|
9781
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
9782
9782
|
}
|
|
9783
9783
|
.ina-select-dropdown__trigger--status-warning:focus-within {
|
|
9784
|
-
border-color: var(--ina-warning-600);
|
|
9784
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
9785
9785
|
box-shadow:
|
|
9786
|
-
0 0 0
|
|
9787
|
-
0 0 0
|
|
9786
|
+
0 0 0 2px #fff,
|
|
9787
|
+
0 0 0 3px var(--ina-warning-50, #fffefa);
|
|
9788
9788
|
}
|
|
9789
9789
|
.ina-select-dropdown__trigger--status-success {
|
|
9790
|
-
border-color: var(--ina-positive-500);
|
|
9790
|
+
border-color: var(--ina-positive-500, #3cc14e);
|
|
9791
9791
|
}
|
|
9792
9792
|
.ina-select-dropdown__trigger--status-success:focus-within {
|
|
9793
|
-
border-color: var(--ina-positive-600);
|
|
9793
|
+
border-color: var(--ina-positive-600, #288034);
|
|
9794
9794
|
box-shadow:
|
|
9795
|
-
0 0 0
|
|
9796
|
-
0 0 0
|
|
9795
|
+
0 0 0 2px #fff,
|
|
9796
|
+
0 0 0 3px var(--ina-positive-50, #fafffa);
|
|
9797
9797
|
}
|
|
9798
9798
|
.ina-select-dropdown__trigger--disabled {
|
|
9799
9799
|
background-color: transparent;
|
|
@@ -9819,23 +9819,23 @@ dialog.bottom-sheet-dropdown {
|
|
|
9819
9819
|
white-space: nowrap;
|
|
9820
9820
|
}
|
|
9821
9821
|
.ina-select-dropdown__trigger-text--placeholder {
|
|
9822
|
-
color: var(--ina-content-tertiary);
|
|
9822
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9823
9823
|
}
|
|
9824
9824
|
.ina-select-dropdown__trigger-text--selected {
|
|
9825
|
-
color: var(--ina-content-primary);
|
|
9825
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9826
9826
|
}
|
|
9827
9827
|
.ina-select-dropdown__trigger-text--disabled {
|
|
9828
|
-
color: var(--ina-neutral-400);
|
|
9828
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9829
9829
|
}
|
|
9830
9830
|
/* Trigger icon (chevron) */
|
|
9831
9831
|
.ina-select-dropdown__trigger-icon {
|
|
9832
9832
|
flex-shrink: 0;
|
|
9833
|
-
margin-left: var(--ina-spacing-2);
|
|
9834
|
-
color: var(--ina-content-secondary);
|
|
9835
|
-
transition: transform var(--ina-transition-base);
|
|
9833
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
9834
|
+
color: var(--ina-content-secondary, #525252);
|
|
9835
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
9836
9836
|
}
|
|
9837
9837
|
.ina-select-dropdown__trigger-icon--disabled {
|
|
9838
|
-
color: var(--ina-neutral-400);
|
|
9838
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9839
9839
|
}
|
|
9840
9840
|
/* Panel container */
|
|
9841
9841
|
.ina-select-dropdown__panel {
|
|
@@ -9845,12 +9845,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9845
9845
|
left: 0;
|
|
9846
9846
|
width: 100%; /* Match trigger width by default */
|
|
9847
9847
|
min-width: 100%;
|
|
9848
|
-
margin-top: var(--ina-spacing-1);
|
|
9848
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
9849
9849
|
background-color: var(
|
|
9850
|
-
--ina-background-primary
|
|
9850
|
+
--ina-background-primary,
|
|
9851
|
+
#ffffff
|
|
9851
9852
|
) !important; /* Ensure solid background */
|
|
9852
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9853
|
-
border-radius: var(--ina-radius-lg);
|
|
9853
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9854
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9854
9855
|
box-shadow:
|
|
9855
9856
|
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
9856
9857
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
@@ -9874,28 +9875,28 @@ dialog.bottom-sheet-dropdown {
|
|
|
9874
9875
|
}
|
|
9875
9876
|
/* Search input section */
|
|
9876
9877
|
.ina-select-dropdown__search {
|
|
9877
|
-
padding: var(--ina-spacing-2) 12px;
|
|
9878
|
-
border-bottom: 1px solid var(--ina-stroke-primary);
|
|
9878
|
+
padding: var(--ina-spacing-2, 0.5rem) 12px;
|
|
9879
|
+
border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9879
9880
|
}
|
|
9880
9881
|
.ina-select-dropdown__search-input {
|
|
9881
9882
|
width: 100%;
|
|
9882
9883
|
border: none;
|
|
9883
|
-
font-size: var(--ina-font-sm);
|
|
9884
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9884
9885
|
background-color: transparent;
|
|
9885
|
-
color: var(--ina-content-primary);
|
|
9886
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9886
9887
|
outline: none;
|
|
9887
|
-
transition: border-color var(--ina-transition-base);
|
|
9888
|
+
transition: border-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9888
9889
|
}
|
|
9889
9890
|
.ina-select-dropdown__search-input::-moz-placeholder {
|
|
9890
|
-
color: var(--ina-content-tertiary);
|
|
9891
|
-
font-size: var(--ina-font-xs);
|
|
9891
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9892
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9892
9893
|
}
|
|
9893
9894
|
.ina-select-dropdown__search-input::placeholder {
|
|
9894
|
-
color: var(--ina-content-tertiary);
|
|
9895
|
-
font-size: var(--ina-font-xs);
|
|
9895
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9896
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9896
9897
|
}
|
|
9897
9898
|
.ina-select-dropdown__search-input:focus {
|
|
9898
|
-
border-bottom-color: var(--ina-stroke-primary);
|
|
9899
|
+
border-bottom-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9899
9900
|
}
|
|
9900
9901
|
.ina-select-dropdown__search-input--disabled {
|
|
9901
9902
|
background-color: transparent;
|
|
@@ -9905,48 +9906,48 @@ dialog.bottom-sheet-dropdown {
|
|
|
9905
9906
|
}
|
|
9906
9907
|
/* Selected preview section */
|
|
9907
9908
|
.ina-select-dropdown__preview {
|
|
9908
|
-
padding: var(--ina-spacing-3);
|
|
9909
|
-
border-bottom: 1px solid var(--ina-stroke-primary);
|
|
9910
|
-
background-color: var(--ina-white);
|
|
9909
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
9910
|
+
border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9911
|
+
background-color: var(--ina-white, #ffffff);
|
|
9911
9912
|
}
|
|
9912
9913
|
.ina-select-dropdown__preview-label {
|
|
9913
|
-
font-size: var(--ina-font-xs);
|
|
9914
|
-
color: var(--ina-content-secondary);
|
|
9915
|
-
margin-bottom: var(--ina-spacing-1);
|
|
9914
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9915
|
+
color: var(--ina-content-secondary, #525252);
|
|
9916
|
+
margin-bottom: var(--ina-spacing-1, 0.25rem);
|
|
9916
9917
|
}
|
|
9917
9918
|
.ina-select-dropdown__preview-content {
|
|
9918
9919
|
display: flex;
|
|
9919
9920
|
flex-wrap: wrap;
|
|
9920
|
-
gap: var(--ina-spacing-1);
|
|
9921
|
+
gap: var(--ina-spacing-1, 0.25rem);
|
|
9921
9922
|
}
|
|
9922
9923
|
.ina-select-dropdown__preview-item {
|
|
9923
9924
|
display: inline-flex;
|
|
9924
9925
|
align-items: center;
|
|
9925
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
9926
|
-
font-size: var(--ina-font-xs);
|
|
9927
|
-
border-radius: var(--ina-radius-md);
|
|
9928
|
-
gap: var(--ina-spacing-2);
|
|
9926
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
9927
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9928
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9929
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9929
9930
|
}
|
|
9930
9931
|
.ina-select-dropdown__preview-item--multiple,
|
|
9931
9932
|
.ina-select-dropdown__preview-item--single {
|
|
9932
|
-
background-color: var(--ina-background-secondary);
|
|
9933
|
-
color: var(--ina-content-primary);
|
|
9933
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9934
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9934
9935
|
}
|
|
9935
9936
|
.ina-select-dropdown__preview-item-text {
|
|
9936
|
-
margin-right: var(--ina-spacing-1);
|
|
9937
|
+
margin-right: var(--ina-spacing-1, 0.25rem);
|
|
9937
9938
|
}
|
|
9938
9939
|
.ina-select-dropdown__preview-item-count {
|
|
9939
|
-
font-weight: var(--ina-font-medium);
|
|
9940
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9940
9941
|
}
|
|
9941
9942
|
.ina-select-dropdown__preview-more {
|
|
9942
9943
|
display: inline-flex;
|
|
9943
9944
|
align-items: center;
|
|
9944
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
9945
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
9945
9946
|
|
|
9946
|
-
font-size: var(--ina-font-xs);
|
|
9947
|
-
background-color: var(--ina-neutral-100);
|
|
9948
|
-
color: var(--ina-neutral-600);
|
|
9949
|
-
border-radius: var(--ina-radius-md);
|
|
9947
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9948
|
+
background-color: var(--ina-neutral-100, #f5f5f5);
|
|
9949
|
+
color: var(--ina-neutral-600, #525252);
|
|
9950
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9950
9951
|
}
|
|
9951
9952
|
/* Remove button */
|
|
9952
9953
|
.ina-select-dropdown__preview-remove {
|
|
@@ -9955,8 +9956,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9955
9956
|
border: none;
|
|
9956
9957
|
background: none;
|
|
9957
9958
|
cursor: pointer;
|
|
9958
|
-
border-radius: var(--ina-radius-full);
|
|
9959
|
-
transition: background-color var(--ina-transition-base);
|
|
9959
|
+
border-radius: var(--ina-radius-full, 9999px);
|
|
9960
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9960
9961
|
color: inherit;
|
|
9961
9962
|
display: flex;
|
|
9962
9963
|
align-items: center;
|
|
@@ -9972,45 +9973,46 @@ dialog.bottom-sheet-dropdown {
|
|
|
9972
9973
|
}
|
|
9973
9974
|
.ina-select-dropdown__preview-remove--multiple:hover,
|
|
9974
9975
|
.ina-select-dropdown__preview-remove--single:hover {
|
|
9975
|
-
background-color: var(--ina-background-tertiary);
|
|
9976
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
9976
9977
|
}
|
|
9977
9978
|
/* Options container */
|
|
9978
9979
|
.ina-select-dropdown__options {
|
|
9979
9980
|
overflow-y: auto;
|
|
9980
9981
|
scrollbar-width: thin;
|
|
9981
|
-
scrollbar-color: var(--ina-neutral-400
|
|
9982
|
-
|
|
9982
|
+
scrollbar-color: var(--ina-neutral-400, #a3a3a3)
|
|
9983
|
+
var(--ina-neutral-100, #f5f5f5);
|
|
9984
|
+
padding: var(--ina-spacing-1, 0.25rem);
|
|
9983
9985
|
}
|
|
9984
9986
|
.ina-select-dropdown__options::-webkit-scrollbar {
|
|
9985
9987
|
width: 6px;
|
|
9986
9988
|
}
|
|
9987
9989
|
.ina-select-dropdown__options::-webkit-scrollbar-track {
|
|
9988
|
-
background: var(--ina-neutral-100);
|
|
9990
|
+
background: var(--ina-neutral-100, #f5f5f5);
|
|
9989
9991
|
}
|
|
9990
9992
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb {
|
|
9991
|
-
background-color: var(--ina-neutral-400);
|
|
9992
|
-
border-radius: var(--ina-radius-full);
|
|
9993
|
+
background-color: var(--ina-neutral-400, #a3a3a3);
|
|
9994
|
+
border-radius: var(--ina-radius-full, 9999px);
|
|
9993
9995
|
}
|
|
9994
9996
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb:hover {
|
|
9995
|
-
background-color: var(--ina-neutral-500);
|
|
9997
|
+
background-color: var(--ina-neutral-500, #737373);
|
|
9996
9998
|
}
|
|
9997
9999
|
/* Individual option */
|
|
9998
10000
|
.ina-select-dropdown__option {
|
|
9999
10001
|
width: 100%;
|
|
10000
10002
|
display: flex;
|
|
10001
10003
|
align-items: center;
|
|
10002
|
-
gap: var(--ina-spacing-3);
|
|
10004
|
+
gap: var(--ina-spacing-3, 0.75rem);
|
|
10003
10005
|
padding: 10px 12px;
|
|
10004
10006
|
text-align: left;
|
|
10005
10007
|
background: none;
|
|
10006
10008
|
border: none;
|
|
10007
10009
|
cursor: pointer;
|
|
10008
10010
|
outline: none;
|
|
10009
|
-
transition: background-color var(--ina-transition-base);
|
|
10010
|
-
border-radius: var(--ina-radius-base);
|
|
10011
|
-
color: var(--ina-content-primary);
|
|
10011
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
10012
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
10013
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10012
10014
|
min-height: 40px;
|
|
10013
|
-
font-size: var(--ina-font-xs);
|
|
10015
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10014
10016
|
}
|
|
10015
10017
|
@media (min-width: 768px) {
|
|
10016
10018
|
.ina-select-dropdown__option {
|
|
@@ -10018,25 +10020,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
10018
10020
|
}
|
|
10019
10021
|
}
|
|
10020
10022
|
.ina-select-dropdown__option:hover {
|
|
10021
|
-
background-color: var(--ina-background-tertiary);
|
|
10023
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10022
10024
|
}
|
|
10023
10025
|
.ina-select-dropdown__option:focus-visible {
|
|
10024
|
-
background-color: var(--ina-background-tertiary);
|
|
10025
|
-
outline: 2px solid var(--ina-content-tertiary);
|
|
10026
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10027
|
+
outline: 2px solid var(--ina-content-tertiary, #a3a3a3);
|
|
10026
10028
|
outline-offset: -2px;
|
|
10027
10029
|
}
|
|
10028
10030
|
/* Selected state untuk multiple mode */
|
|
10029
10031
|
.ina-select-dropdown__option--selected-multiple:not(:disabled),
|
|
10030
10032
|
.ina-select-dropdown__option--selected-single:not(:disabled) {
|
|
10031
|
-
background-color: var(--ina-background-secondary);
|
|
10033
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10032
10034
|
}
|
|
10033
10035
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover,
|
|
10034
10036
|
.ina-select-dropdown__option--selected-single:not(:disabled):hover,
|
|
10035
10037
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover {
|
|
10036
|
-
background-color: var(--ina-background-tertiary);
|
|
10038
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10037
10039
|
}
|
|
10038
10040
|
.ina-select-dropdown__option--disabled {
|
|
10039
|
-
color: var(--ina-content-tertiary);
|
|
10041
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10040
10042
|
cursor: not-allowed;
|
|
10041
10043
|
}
|
|
10042
10044
|
.ina-select-dropdown__option--disabled:hover {
|
|
@@ -10055,31 +10057,31 @@ dialog.bottom-sheet-dropdown {
|
|
|
10055
10057
|
width: 16px;
|
|
10056
10058
|
height: 16px;
|
|
10057
10059
|
flex-shrink: 0;
|
|
10058
|
-
border: 1px solid var(--ina-stroke-secondary);
|
|
10059
|
-
border-radius: var(--ina-radius-base);
|
|
10060
|
-
background-color: var(--ina-neutral-25);
|
|
10061
|
-
transition: all var(--ina-transition-base);
|
|
10060
|
+
border: 1px solid var(--ina-stroke-secondary, #a3a3a3);
|
|
10061
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
10062
|
+
background-color: var(--ina-neutral-25, #ffffff);
|
|
10063
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
10062
10064
|
display: flex;
|
|
10063
10065
|
align-items: center;
|
|
10064
10066
|
justify-content: center;
|
|
10065
10067
|
}
|
|
10066
10068
|
.ina-select-dropdown__option-checkbox--checked {
|
|
10067
|
-
background-color: var(--ina-content-primary);
|
|
10068
|
-
border-color: var(--ina-stroke-primary);
|
|
10069
|
-
color: var(--ina-white);
|
|
10069
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
10070
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
10071
|
+
color: var(--ina-white, #ffffff);
|
|
10070
10072
|
}
|
|
10071
10073
|
.ina-select-dropdown__option-radio {
|
|
10072
10074
|
width: 16px;
|
|
10073
10075
|
height: 16px;
|
|
10074
10076
|
flex-shrink: 0;
|
|
10075
|
-
border: 1px solid var(--ina-content-primary);
|
|
10077
|
+
border: 1px solid var(--ina-content-primary, #1f1f1f);
|
|
10076
10078
|
border-radius: 50%;
|
|
10077
10079
|
background-color: transparent;
|
|
10078
|
-
transition: all var(--ina-transition-base);
|
|
10080
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
10079
10081
|
position: relative;
|
|
10080
10082
|
}
|
|
10081
10083
|
.ina-select-dropdown__option-radio--checked {
|
|
10082
|
-
border-color: var(--ina-content-primary);
|
|
10084
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
10083
10085
|
}
|
|
10084
10086
|
.ina-select-dropdown__option-radio-dot {
|
|
10085
10087
|
position: absolute;
|
|
@@ -10088,7 +10090,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10088
10090
|
transform: translate(-50%, -50%);
|
|
10089
10091
|
width: 8px;
|
|
10090
10092
|
height: 8px;
|
|
10091
|
-
background-color: var(--ina-content-primary);
|
|
10093
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
10092
10094
|
border-radius: 50%;
|
|
10093
10095
|
}
|
|
10094
10096
|
/* Option content */
|
|
@@ -10103,51 +10105,51 @@ dialog.bottom-sheet-dropdown {
|
|
|
10103
10105
|
white-space: nowrap;
|
|
10104
10106
|
overflow: hidden;
|
|
10105
10107
|
text-overflow: ellipsis;
|
|
10106
|
-
line-height: var(--ina-line-height-normal);
|
|
10108
|
+
line-height: var(--ina-line-height-normal, 1.5);
|
|
10107
10109
|
}
|
|
10108
10110
|
/* Option check indicator (right side) */
|
|
10109
10111
|
.ina-select-dropdown__option-check-indicator {
|
|
10110
10112
|
flex-shrink: 0;
|
|
10111
|
-
color: var(--ina-content-primary);
|
|
10113
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10112
10114
|
display: flex;
|
|
10113
10115
|
align-items: center;
|
|
10114
10116
|
justify-content: center;
|
|
10115
10117
|
}
|
|
10116
10118
|
.ina-select-dropdown__option-check-icon {
|
|
10117
|
-
color: var(--ina-content-primary);
|
|
10119
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10118
10120
|
}
|
|
10119
10121
|
/* Empty state */
|
|
10120
10122
|
.ina-select-dropdown__empty {
|
|
10121
|
-
padding: var(--ina-spacing-3);
|
|
10123
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10122
10124
|
text-align: center;
|
|
10123
|
-
color: var(--ina-content-secondary);
|
|
10124
|
-
font-size: var(--ina-font-sm);
|
|
10125
|
+
color: var(--ina-content-secondary, #525252);
|
|
10126
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10125
10127
|
font-style: italic;
|
|
10126
10128
|
}
|
|
10127
10129
|
/* Load more button */
|
|
10128
10130
|
.ina-select-dropdown__load-more {
|
|
10129
|
-
padding: var(--ina-spacing-3);
|
|
10130
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
10131
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10132
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10131
10133
|
}
|
|
10132
10134
|
.ina-select-dropdown__load-more-button {
|
|
10133
10135
|
width: 100%;
|
|
10134
10136
|
display: flex;
|
|
10135
10137
|
align-items: center;
|
|
10136
10138
|
justify-content: center;
|
|
10137
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
10138
|
-
font-size: var(--ina-font-sm);
|
|
10139
|
-
color: var(--ina-content-primary);
|
|
10140
|
-
background-color: var(--ina-background-secondary);
|
|
10141
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
10142
|
-
border-radius: var(--ina-radius-md);
|
|
10139
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
10140
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10141
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10142
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10143
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10144
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
10143
10145
|
cursor: pointer;
|
|
10144
10146
|
transition:
|
|
10145
|
-
background-color var(--ina-transition-base),
|
|
10146
|
-
border-color var(--ina-transition-base),
|
|
10147
|
-
box-shadow var(--ina-transition-base);
|
|
10147
|
+
background-color var(--ina-transition-base, 200ms ease-in-out),
|
|
10148
|
+
border-color var(--ina-transition-base, 200ms ease-in-out),
|
|
10149
|
+
box-shadow var(--ina-transition-base, 200ms ease-in-out);
|
|
10148
10150
|
}
|
|
10149
10151
|
.ina-select-dropdown__load-more-button:hover {
|
|
10150
|
-
background-color: var(--ina-background-tertiary);
|
|
10152
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10151
10153
|
}
|
|
10152
10154
|
.ina-select-dropdown__load-more-button:focus-visible {
|
|
10153
10155
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
@@ -10157,22 +10159,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
10157
10159
|
cursor: not-allowed;
|
|
10158
10160
|
}
|
|
10159
10161
|
.ina-select-dropdown__load-more-button:disabled:hover {
|
|
10160
|
-
background-color: var(--ina-background-tertiary);
|
|
10161
|
-
color: var(--ina-content-tertiary);
|
|
10162
|
-
border-color: var(--ina-content-tertiary);
|
|
10162
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10163
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10164
|
+
border-color: var(--ina-content-tertiary, #a3a3a3);
|
|
10163
10165
|
}
|
|
10164
10166
|
/* Loading state */
|
|
10165
10167
|
.ina-select-dropdown__loading {
|
|
10166
|
-
padding: var(--ina-spacing-3);
|
|
10167
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
10168
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10169
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10168
10170
|
display: flex;
|
|
10169
10171
|
align-items: center;
|
|
10170
10172
|
justify-content: center;
|
|
10171
|
-
gap: var(--ina-spacing-2);
|
|
10173
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10172
10174
|
}
|
|
10173
10175
|
.ina-select-dropdown__loading-spinner {
|
|
10174
10176
|
animation: spin 1s linear infinite;
|
|
10175
|
-
color: var(--ina-content-secondary);
|
|
10177
|
+
color: var(--ina-content-secondary, #525252);
|
|
10176
10178
|
}
|
|
10177
10179
|
@keyframes spin {
|
|
10178
10180
|
to {
|
|
@@ -10180,8 +10182,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
10180
10182
|
}
|
|
10181
10183
|
}
|
|
10182
10184
|
.ina-select-dropdown__loading-text {
|
|
10183
|
-
font-size: var(--ina-font-sm);
|
|
10184
|
-
color: var(--ina-content-secondary);
|
|
10185
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10186
|
+
color: var(--ina-content-secondary, #525252);
|
|
10185
10187
|
}
|
|
10186
10188
|
/* Size variants - Font size and padding */
|
|
10187
10189
|
/* Small size */
|
|
@@ -10210,13 +10212,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
10210
10212
|
.ina-select-dropdown--size-sm .ina-select-dropdown__search-input {
|
|
10211
10213
|
font-size: 12px;
|
|
10212
10214
|
}
|
|
10213
|
-
/* Medium size (default) - keep existing font-size 14px */
|
|
10214
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__trigger {
|
|
10215
|
-
/* padding sudah ada di base style */
|
|
10216
|
-
}
|
|
10217
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__option {
|
|
10218
|
-
/* padding sudah ada di base style */
|
|
10219
|
-
}
|
|
10220
10215
|
/* Large size - keep existing font-size 14px */
|
|
10221
10216
|
.ina-select-dropdown--size-lg .ina-select-dropdown__trigger {
|
|
10222
10217
|
padding: var(--ina-spacing-3) var(--ina-spacing-4);
|
|
@@ -10231,11 +10226,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
10231
10226
|
@media (max-width: 639px) {
|
|
10232
10227
|
.ina-select-dropdown__option {
|
|
10233
10228
|
min-height: 48px;
|
|
10234
|
-
padding: var(--ina-spacing-3);
|
|
10229
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10235
10230
|
}
|
|
10236
10231
|
|
|
10237
10232
|
.ina-select-dropdown__preview-content {
|
|
10238
|
-
gap: var(--ina-spacing-2);
|
|
10233
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10239
10234
|
}
|
|
10240
10235
|
|
|
10241
10236
|
.ina-select-dropdown__trigger--size-sm {
|
|
@@ -10250,18 +10245,18 @@ dialog.bottom-sheet-dropdown {
|
|
|
10250
10245
|
height: 40px !important;
|
|
10251
10246
|
}
|
|
10252
10247
|
.ina-select-dropdown__load-more-button {
|
|
10253
|
-
font-size: var(--ina-font-xs);
|
|
10248
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10254
10249
|
}
|
|
10255
10250
|
|
|
10256
10251
|
.ina-select-dropdown__label,
|
|
10257
10252
|
.ina-select-dropdown__trigger,
|
|
10258
10253
|
.ina-select-dropdown__trigger-text {
|
|
10259
|
-
font-size: var(--ina-font-xs) !important;
|
|
10254
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
10260
10255
|
}
|
|
10261
10256
|
}
|
|
10262
10257
|
/* Accessibility improvements */
|
|
10263
10258
|
.ina-select-dropdown__trigger:focus-visible {
|
|
10264
|
-
outline: 2px solid var(--ina-content-primary);
|
|
10259
|
+
outline: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
10265
10260
|
outline-offset: 2px;
|
|
10266
10261
|
}
|
|
10267
10262
|
/* High contrast mode */
|
|
@@ -10293,7 +10288,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10293
10288
|
padding: 8px 12px;
|
|
10294
10289
|
font-size: 12px;
|
|
10295
10290
|
font-weight: 600;
|
|
10296
|
-
color: var(--ina-content-tertiary);
|
|
10291
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10297
10292
|
line-height: 1.33; /* 16px / 12px */
|
|
10298
10293
|
pointer-events: none;
|
|
10299
10294
|
}
|
|
@@ -12710,21 +12705,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
12710
12705
|
}
|
|
12711
12706
|
/* Label */
|
|
12712
12707
|
.ina-text-area__label {
|
|
12713
|
-
font-size: var(--ina-font-sm);
|
|
12714
|
-
font-weight: var(--ina-font-medium);
|
|
12715
|
-
color: var(--ina-content-primary);
|
|
12716
|
-
margin-bottom: var(--ina-spacing-2);
|
|
12708
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
12709
|
+
font-weight: var(--ina-font-medium, 500);
|
|
12710
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
12711
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
12717
12712
|
}
|
|
12718
12713
|
/* Input wrapper */
|
|
12719
12714
|
.ina-text-area__wrapper {
|
|
12720
12715
|
display: flex;
|
|
12721
12716
|
align-items: flex-start;
|
|
12722
|
-
gap: var(--ina-spacing-2);
|
|
12723
|
-
border-radius: var(--ina-radius-lg);
|
|
12724
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
12725
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12726
|
-
background-color: var(--ina-background-primary);
|
|
12727
|
-
transition: all var(--ina-transition-base);
|
|
12717
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
12718
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
12719
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
12720
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
12721
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
12722
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
12728
12723
|
}
|
|
12729
12724
|
/* Input field */
|
|
12730
12725
|
.ina-text-area__input {
|
|
@@ -12738,10 +12733,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12738
12733
|
line-height: 1.5;
|
|
12739
12734
|
}
|
|
12740
12735
|
.ina-text-area__input::-moz-placeholder {
|
|
12741
|
-
color: var(--ina-content-tertiary);
|
|
12736
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12742
12737
|
}
|
|
12743
12738
|
.ina-text-area__input::placeholder {
|
|
12744
|
-
color: var(--ina-content-tertiary);
|
|
12739
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12745
12740
|
}
|
|
12746
12741
|
/* Prefix/suffix icons */
|
|
12747
12742
|
.ina-text-area__prefix-icon,
|
|
@@ -12760,8 +12755,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12760
12755
|
display: inline-flex;
|
|
12761
12756
|
align-items: center;
|
|
12762
12757
|
justify-content: center;
|
|
12763
|
-
color: var(--ina-content-secondary);
|
|
12764
|
-
transition: color var(--ina-transition-base);
|
|
12758
|
+
color: var(--ina-content-secondary, #525252);
|
|
12759
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
12765
12760
|
}
|
|
12766
12761
|
.ina-text-area__clear-button:hover:not(:disabled) {
|
|
12767
12762
|
color: var(--ina-content-secondary);
|
|
@@ -12781,22 +12776,34 @@ dialog.bottom-sheet-dropdown {
|
|
|
12781
12776
|
margin-top: var(--ina-spacing-1);
|
|
12782
12777
|
}
|
|
12783
12778
|
.ina-text-area__helper-text--neutral {
|
|
12784
|
-
color: var(--ina-content-secondary);
|
|
12779
|
+
color: var(--ina-content-secondary, #525252);
|
|
12785
12780
|
}
|
|
12786
12781
|
.ina-text-area__helper-text--error {
|
|
12787
|
-
color: var(--ina-negative-500);
|
|
12782
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
12788
12783
|
}
|
|
12789
12784
|
.ina-text-area__helper-text--warning {
|
|
12790
|
-
color: var(--ina-warning-500);
|
|
12785
|
+
color: var(--ina-warning-500, #eebb04);
|
|
12791
12786
|
}
|
|
12792
12787
|
.ina-text-area__helper-text--success {
|
|
12793
|
-
color: var(--ina-positive-600);
|
|
12788
|
+
color: var(--ina-positive-600, #288034);
|
|
12794
12789
|
}
|
|
12795
12790
|
/* Character count */
|
|
12796
12791
|
.ina-text-area__char-count {
|
|
12797
|
-
font-size: var(--ina-font-xs);
|
|
12798
|
-
color: var(--ina-content-secondary);
|
|
12799
|
-
margin-top: var(--ina-spacing-1);
|
|
12792
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
12793
|
+
color: var(--ina-content-secondary, #525252);
|
|
12794
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
12795
|
+
}
|
|
12796
|
+
/* Focus styles - Sesuai design Figma */
|
|
12797
|
+
.ina-text-area__wrapper:focus-within {
|
|
12798
|
+
box-shadow:
|
|
12799
|
+
0 0 0 2px #fff,
|
|
12800
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
12801
|
+
outline: none;
|
|
12802
|
+
background-color: var(--ina-background-primary, #ffffff) !important;
|
|
12803
|
+
}
|
|
12804
|
+
/* hover styles - Sesuai design Figma */
|
|
12805
|
+
.ina-text-area__wrapper:hover {
|
|
12806
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
12800
12807
|
}
|
|
12801
12808
|
/* Status variants */
|
|
12802
12809
|
.ina-text-area__wrapper--status-neutral {
|
|
@@ -12811,8 +12818,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12811
12818
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
|
|
12812
12819
|
border-color: var(--ina-negative-600);
|
|
12813
12820
|
box-shadow:
|
|
12814
|
-
0 0 0
|
|
12815
|
-
0 0 0
|
|
12821
|
+
0 0 0 2px #fff,
|
|
12822
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
12816
12823
|
}
|
|
12817
12824
|
.ina-text-area__wrapper--status-warning {
|
|
12818
12825
|
border-color: var(--ina-warning-500);
|
|
@@ -12820,8 +12827,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12820
12827
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
|
|
12821
12828
|
border-color: var(--ina-warning-600);
|
|
12822
12829
|
box-shadow:
|
|
12823
|
-
0 0 0
|
|
12824
|
-
0 0 0
|
|
12830
|
+
0 0 0 2px #fff,
|
|
12831
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
12825
12832
|
}
|
|
12826
12833
|
.ina-text-area__wrapper--status-success {
|
|
12827
12834
|
border-color: var(--ina-positive-600);
|
|
@@ -12829,8 +12836,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12829
12836
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
|
|
12830
12837
|
border-color: var(--ina-positive-600);
|
|
12831
12838
|
box-shadow:
|
|
12832
|
-
0 0 0
|
|
12833
|
-
0 0 0
|
|
12839
|
+
0 0 0 2px #fff,
|
|
12840
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
12834
12841
|
}
|
|
12835
12842
|
/* Disabled state */
|
|
12836
12843
|
.ina-text-area__wrapper--disabled {
|
|
@@ -12839,27 +12846,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
12839
12846
|
cursor: not-allowed;
|
|
12840
12847
|
}
|
|
12841
12848
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::-moz-placeholder {
|
|
12842
|
-
color: var(--ina-content-tertiary) !important;
|
|
12849
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12843
12850
|
}
|
|
12844
12851
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::placeholder {
|
|
12845
|
-
color: var(--ina-content-tertiary) !important;
|
|
12852
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12846
12853
|
}
|
|
12847
12854
|
.ina-text-area__input:disabled {
|
|
12848
12855
|
cursor: not-allowed;
|
|
12849
12856
|
opacity: 0.6;
|
|
12850
12857
|
}
|
|
12851
|
-
/* Focus styles - Sesuai design Figma */
|
|
12852
|
-
.ina-text-area__wrapper:focus-within {
|
|
12853
|
-
box-shadow:
|
|
12854
|
-
0 0 0 2px #fff,
|
|
12855
|
-
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
12856
|
-
outline: none;
|
|
12857
|
-
background-color: var(--ina-background-primary);
|
|
12858
|
-
}
|
|
12859
|
-
/* hover styles - Sesuai design Figma */
|
|
12860
|
-
.ina-text-area__wrapper:hover {
|
|
12861
|
-
background-color: var(--ina-neutral-50);
|
|
12862
|
-
}
|
|
12863
12858
|
/* Responsive adjustments */
|
|
12864
12859
|
@media (max-width: 639px) {
|
|
12865
12860
|
.ina-text-area__wrapper {
|
|
@@ -12916,7 +12911,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
12916
12911
|
.ina-text-field__label {
|
|
12917
12912
|
font-size: var(--ina-font-sm);
|
|
12918
12913
|
font-weight: var(--ina-font-medium);
|
|
12919
|
-
color: var(--ina-content-primary);
|
|
12914
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
12920
12915
|
margin-bottom: var(--ina-spacing-2);
|
|
12921
12916
|
}
|
|
12922
12917
|
/* Input wrapper */
|
|
@@ -12925,9 +12920,9 @@ dialog.bottom-sheet-dropdown {
|
|
|
12925
12920
|
align-items: center;
|
|
12926
12921
|
gap: var(--ina-spacing-2);
|
|
12927
12922
|
border-radius: var(--ina-radius-lg);
|
|
12928
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
12923
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
12929
12924
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12930
|
-
background-color: var(--ina-background-primary);
|
|
12925
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
12931
12926
|
transition: all var(--ina-transition-base);
|
|
12932
12927
|
}
|
|
12933
12928
|
/* Size variants */
|
|
@@ -12980,10 +12975,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12980
12975
|
font-family: inherit;
|
|
12981
12976
|
}
|
|
12982
12977
|
.ina-text-field__input::-moz-placeholder {
|
|
12983
|
-
color: var(--ina-content-tertiary);
|
|
12978
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12984
12979
|
}
|
|
12985
12980
|
.ina-text-field__input::placeholder {
|
|
12986
|
-
color: var(--ina-content-tertiary);
|
|
12981
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12987
12982
|
}
|
|
12988
12983
|
/* Prefix/suffix icons */
|
|
12989
12984
|
.ina-text-field__prefix-icon,
|
|
@@ -13000,11 +12995,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13000
12995
|
display: inline-flex;
|
|
13001
12996
|
align-items: center;
|
|
13002
12997
|
justify-content: center;
|
|
13003
|
-
color: var(--ina-content-dark-secondary);
|
|
12998
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
13004
12999
|
transition: color var(--ina-transition-base);
|
|
13005
13000
|
}
|
|
13006
13001
|
.ina-text-field__clear-button:hover:not(:disabled) {
|
|
13007
|
-
color: var(--ina-content-secondary);
|
|
13002
|
+
color: var(--ina-content-secondary, #525252);
|
|
13008
13003
|
}
|
|
13009
13004
|
.ina-text-field__clear-button:disabled {
|
|
13010
13005
|
cursor: not-allowed;
|
|
@@ -13028,67 +13023,67 @@ dialog.bottom-sheet-dropdown {
|
|
|
13028
13023
|
padding-top: var(--ina-spacing-1);
|
|
13029
13024
|
}
|
|
13030
13025
|
.ina-text-field__helper-text--neutral {
|
|
13031
|
-
color: var(--ina-content-secondary);
|
|
13026
|
+
color: var(--ina-content-secondary, #525252);
|
|
13032
13027
|
}
|
|
13033
13028
|
.ina-text-field__helper-text--error {
|
|
13034
|
-
color: var(--ina-negative-500);
|
|
13029
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
13035
13030
|
}
|
|
13036
13031
|
.ina-text-field__helper-text--warning {
|
|
13037
|
-
color: var(--ina-warning-500);
|
|
13032
|
+
color: var(--ina-warning-500, #eebb04);
|
|
13038
13033
|
}
|
|
13039
13034
|
.ina-text-field__helper-text--success {
|
|
13040
|
-
color: var(--ina-positive-600);
|
|
13035
|
+
color: var(--ina-positive-600, #288034);
|
|
13041
13036
|
}
|
|
13042
13037
|
/* Character count */
|
|
13043
13038
|
.ina-text-field__char-count {
|
|
13044
13039
|
font-size: var(--ina-font-xs);
|
|
13045
|
-
color: var(--ina-content-secondary);
|
|
13040
|
+
color: var(--ina-content-secondary, #525252);
|
|
13046
13041
|
}
|
|
13047
13042
|
/* Status variants */
|
|
13048
13043
|
.ina-text-field__wrapper--status-neutral {
|
|
13049
|
-
border-color: var(--ina-stroke-primary);
|
|
13044
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13050
13045
|
}
|
|
13051
13046
|
.ina-text-field__wrapper--status-neutral:focus-within {
|
|
13052
|
-
border-color: var(--ina-content-primary);
|
|
13047
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
13053
13048
|
}
|
|
13054
13049
|
.ina-text-field__wrapper--status-error {
|
|
13055
|
-
border-color: var(--ina-negative-500);
|
|
13050
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
13056
13051
|
}
|
|
13057
13052
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
|
|
13058
|
-
border-color: var(--ina-negative-600);
|
|
13053
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13059
13054
|
box-shadow:
|
|
13060
|
-
0 0 0
|
|
13061
|
-
0 0 0
|
|
13055
|
+
0 0 0 2px #fff,
|
|
13056
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13062
13057
|
}
|
|
13063
13058
|
.ina-text-field__wrapper--status-warning {
|
|
13064
|
-
border-color: var(--ina-warning-500);
|
|
13059
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13065
13060
|
}
|
|
13066
13061
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
|
|
13067
|
-
border-color: var(--ina-warning-600);
|
|
13062
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13068
13063
|
box-shadow:
|
|
13069
|
-
0 0 0
|
|
13070
|
-
0 0 0
|
|
13064
|
+
0 0 0 2px #fff,
|
|
13065
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13071
13066
|
}
|
|
13072
13067
|
.ina-text-field__wrapper--status-success {
|
|
13073
|
-
border-color: var(--ina-positive-600);
|
|
13068
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13074
13069
|
}
|
|
13075
13070
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
|
|
13076
|
-
border-color: var(--ina-positive-600);
|
|
13071
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13077
13072
|
box-shadow:
|
|
13078
|
-
0 0 0
|
|
13079
|
-
0 0 0
|
|
13073
|
+
0 0 0 2px #fff,
|
|
13074
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
13080
13075
|
}
|
|
13081
13076
|
/* Disabled state */
|
|
13082
13077
|
.ina-text-field__wrapper--disabled {
|
|
13083
|
-
background-color: var(--ina-background-tertiary);
|
|
13084
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
13078
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
13079
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
13085
13080
|
cursor: not-allowed;
|
|
13086
13081
|
}
|
|
13087
13082
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::-moz-placeholder {
|
|
13088
|
-
color: var(--ina-content-tertiary) !important;
|
|
13083
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13089
13084
|
}
|
|
13090
13085
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::placeholder {
|
|
13091
|
-
color: var(--ina-content-tertiary) !important;
|
|
13086
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13092
13087
|
}
|
|
13093
13088
|
.ina-text-field__input:disabled {
|
|
13094
13089
|
cursor: not-allowed;
|
|
@@ -13100,12 +13095,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13100
13095
|
0 0 0 2px #fff,
|
|
13101
13096
|
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13102
13097
|
outline: none;
|
|
13103
|
-
background-color: var(--ina-background-primary);
|
|
13098
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13104
13099
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13105
13100
|
}
|
|
13106
13101
|
/* hover styles - Sesuai design Figma */
|
|
13107
13102
|
.ina-text-field__wrapper:hover {
|
|
13108
|
-
background-color: var(--ina-neutral-50);
|
|
13103
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
13109
13104
|
}
|
|
13110
13105
|
/* Responsive adjustments */
|
|
13111
13106
|
@media (max-width: 639px) {
|
|
@@ -13396,11 +13391,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13396
13391
|
position: relative;
|
|
13397
13392
|
display: flex;
|
|
13398
13393
|
align-items: center;
|
|
13399
|
-
background-color: var(--ina-background-primary);
|
|
13400
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13401
|
-
border-radius: var(--ina-radius-lg);
|
|
13402
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
13403
|
-
transition: all var(--ina-transition-base);
|
|
13394
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13395
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
13396
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
13397
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
13398
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
13404
13399
|
}
|
|
13405
13400
|
/* Size variants */
|
|
13406
13401
|
.ina-time-picker--size-sm .ina-time-picker__wrapper {
|
|
@@ -13443,45 +13438,107 @@ dialog.bottom-sheet-dropdown {
|
|
|
13443
13438
|
}
|
|
13444
13439
|
}
|
|
13445
13440
|
.ina-time-picker__wrapper:hover {
|
|
13446
|
-
|
|
13441
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13442
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13447
13443
|
}
|
|
13448
13444
|
.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13449
13445
|
box-shadow:
|
|
13450
|
-
|
|
13451
|
-
|
|
13446
|
+
0 0 0 2px #fff,
|
|
13447
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13452
13448
|
outline: none;
|
|
13453
|
-
background-color: var(--ina-background-primary);
|
|
13454
|
-
border-color: var(--ina-
|
|
13449
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13450
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13451
|
+
}
|
|
13452
|
+
/* Input */
|
|
13453
|
+
.ina-time-picker__input {
|
|
13454
|
+
flex: 1;
|
|
13455
|
+
border: none;
|
|
13456
|
+
outline: none;
|
|
13457
|
+
background: transparent;
|
|
13458
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
13459
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
13460
|
+
font-weight: var(--ina-font-normal, 400);
|
|
13461
|
+
padding: 0;
|
|
13462
|
+
width: 100%;
|
|
13463
|
+
cursor: pointer;
|
|
13464
|
+
}
|
|
13465
|
+
.ina-time-picker__input:disabled {
|
|
13466
|
+
cursor: not-allowed;
|
|
13467
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
13468
|
+
}
|
|
13469
|
+
.ina-time-picker__input::-moz-placeholder {
|
|
13470
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13471
|
+
}
|
|
13472
|
+
.ina-time-picker__input::placeholder {
|
|
13473
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13474
|
+
}
|
|
13475
|
+
/* Prefix Icon */
|
|
13476
|
+
.ina-time-picker__prefix-icon {
|
|
13477
|
+
display: flex;
|
|
13478
|
+
align-items: center;
|
|
13479
|
+
justify-content: center;
|
|
13480
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
13481
|
+
margin-right: var(--ina-spacing-2, 0.5rem);
|
|
13482
|
+
}
|
|
13483
|
+
/* Suffix Icon / Clear Button */
|
|
13484
|
+
.ina-time-picker__suffix-icon,
|
|
13485
|
+
.ina-time-picker__clear-button {
|
|
13486
|
+
display: flex;
|
|
13487
|
+
align-items: center;
|
|
13488
|
+
justify-content: center;
|
|
13489
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
13490
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
13491
|
+
}
|
|
13492
|
+
.ina-time-picker__clear-button {
|
|
13493
|
+
background: none;
|
|
13494
|
+
border: none;
|
|
13495
|
+
padding: 0;
|
|
13496
|
+
cursor: pointer;
|
|
13497
|
+
}
|
|
13498
|
+
.ina-time-picker__clear-button:hover {
|
|
13499
|
+
color: var(--ina-content-secondary, #525252);
|
|
13455
13500
|
}
|
|
13456
|
-
/* ... existing code ... */
|
|
13457
13501
|
/* Status Variants */
|
|
13458
13502
|
.ina-time-picker--status-error .ina-time-picker__wrapper {
|
|
13459
|
-
border-color: var(--ina-
|
|
13503
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13460
13504
|
}
|
|
13461
13505
|
.ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13506
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13462
13507
|
box-shadow:
|
|
13463
|
-
0 0 0
|
|
13464
|
-
0 0 0
|
|
13508
|
+
0 0 0 2px #fff,
|
|
13509
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13465
13510
|
}
|
|
13466
13511
|
.ina-time-picker--status-warning .ina-time-picker__wrapper {
|
|
13467
|
-
border-color: var(--ina-warning-500);
|
|
13512
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13468
13513
|
}
|
|
13469
13514
|
.ina-time-picker--status-warning.ina-time-picker--open
|
|
13470
13515
|
.ina-time-picker__wrapper {
|
|
13516
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13471
13517
|
box-shadow:
|
|
13472
|
-
0 0 0
|
|
13473
|
-
0 0 0
|
|
13518
|
+
0 0 0 2px #fff,
|
|
13519
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13474
13520
|
}
|
|
13475
13521
|
.ina-time-picker--status-success .ina-time-picker__wrapper {
|
|
13476
|
-
border-color: var(--ina-
|
|
13522
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13477
13523
|
}
|
|
13478
13524
|
.ina-time-picker--status-success.ina-time-picker--open
|
|
13479
13525
|
.ina-time-picker__wrapper {
|
|
13526
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13480
13527
|
box-shadow:
|
|
13481
|
-
0 0 0
|
|
13482
|
-
0 0 0
|
|
13528
|
+
0 0 0 2px #fff,
|
|
13529
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
13530
|
+
}
|
|
13531
|
+
/* Disabled */
|
|
13532
|
+
.ina-time-picker--disabled .ina-time-picker__wrapper {
|
|
13533
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13534
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13535
|
+
cursor: not-allowed;
|
|
13536
|
+
opacity: 0.6;
|
|
13537
|
+
}
|
|
13538
|
+
.ina-time-picker--disabled .ina-time-picker__wrapper:hover {
|
|
13539
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13540
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13483
13541
|
}
|
|
13484
|
-
/* ... existing code ... */
|
|
13485
13542
|
/* Panel */
|
|
13486
13543
|
.ina-time-picker__panel {
|
|
13487
13544
|
position: absolute;
|
|
@@ -13490,26 +13547,30 @@ dialog.bottom-sheet-dropdown {
|
|
|
13490
13547
|
width: 100%;
|
|
13491
13548
|
min-width: 100%; /* Match trigger width by default */
|
|
13492
13549
|
z-index: 1000;
|
|
13493
|
-
background-color: var(--ina-background-primary);
|
|
13494
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13495
|
-
border-radius: var(--ina-radius-lg);
|
|
13496
|
-
box-shadow: var(
|
|
13497
|
-
|
|
13550
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13551
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
13552
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
13553
|
+
box-shadow: var(
|
|
13554
|
+
--ina-shadow-lg,
|
|
13555
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
13556
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
|
13557
|
+
);
|
|
13558
|
+
margin-top: var(--ina-spacing-2, 0.5rem);
|
|
13498
13559
|
overflow: hidden;
|
|
13499
13560
|
animation: time-picker-fade-in 0.15s ease-out;
|
|
13500
13561
|
}
|
|
13501
|
-
/* ... existing code ... */
|
|
13502
13562
|
/* Focus styles - Sesuai design Figma */
|
|
13503
13563
|
.ina-time-picker__wrapper:focus-within {
|
|
13504
13564
|
box-shadow:
|
|
13505
|
-
|
|
13506
|
-
|
|
13565
|
+
0 0 0 2px #fff,
|
|
13566
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13507
13567
|
outline: none;
|
|
13508
|
-
background-color: var(--ina-background-primary);
|
|
13568
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13569
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13509
13570
|
}
|
|
13510
13571
|
/* hover styles - Sesuai design Figma */
|
|
13511
13572
|
.ina-time-picker__wrapper:hover {
|
|
13512
|
-
background-color: var(--ina-
|
|
13573
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13513
13574
|
}
|
|
13514
13575
|
/* High Contrast Mode */
|
|
13515
13576
|
@media (prefers-contrast: high) {
|
|
@@ -13551,12 +13612,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13551
13612
|
|
|
13552
13613
|
.ina-time-picker__option {
|
|
13553
13614
|
min-height: 28px;
|
|
13554
|
-
font-size: var(--ina-font-xs);
|
|
13555
|
-
padding: var(--ina-spacing-2);
|
|
13615
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13616
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
13556
13617
|
}
|
|
13557
13618
|
|
|
13558
13619
|
.ina-time-picker__wrapper {
|
|
13559
|
-
padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
|
|
13620
|
+
padding: 0.375rem var(--ina-spacing-2, 0.5rem); /* 6px 8px */
|
|
13560
13621
|
gap: 0.375rem; /* 6px */
|
|
13561
13622
|
}
|
|
13562
13623
|
|
|
@@ -13568,11 +13629,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13568
13629
|
.ina-time-picker--size-sm .ina-time-picker__input,
|
|
13569
13630
|
.ina-time-picker--size-md .ina-time-picker__input,
|
|
13570
13631
|
.ina-time-picker--size-lg .ina-time-picker__input {
|
|
13571
|
-
font-size: var(--ina-font-xs) !important;
|
|
13632
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
13572
13633
|
}
|
|
13573
13634
|
|
|
13574
13635
|
.ina-time-picker__label {
|
|
13575
|
-
font-size: var(--ina-font-xs);
|
|
13636
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13576
13637
|
}
|
|
13577
13638
|
|
|
13578
13639
|
.ina-time-picker__prefix-icon,
|
|
@@ -13593,8 +13654,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
13593
13654
|
|
|
13594
13655
|
.ina-time-picker__action-button,
|
|
13595
13656
|
.ina-time-picker__confirm-button {
|
|
13596
|
-
font-size: var(--ina-font-xs);
|
|
13597
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
13657
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13658
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
13598
13659
|
}
|
|
13599
13660
|
}
|
|
13600
13661
|
/* Toast Component Styles */
|