@carbon/ibm-products 2.16.0 → 2.17.0-alpha.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. package/css/config-dev.css +3 -0
  2. package/css/config-dev.css.map +1 -0
  3. package/css/index-full-carbon.css +4 -4
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +1851 -37
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +4 -4
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css.map +1 -1
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  16. package/es/components/Datagrid/Datagrid.docs-page.js +1 -1
  17. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  18. package/es/components/Datagrid/useActionsColumn.js +1 -4
  19. package/es/components/Datagrid/useFlexResize.js +19 -9
  20. package/es/components/Datagrid/useInfiniteScroll.js +1 -5
  21. package/es/global/js/package-settings.js +1 -3
  22. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  23. package/lib/components/Datagrid/Datagrid.docs-page.js +1 -1
  24. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  25. package/lib/components/Datagrid/useActionsColumn.js +1 -7
  26. package/lib/components/Datagrid/useFlexResize.js +19 -9
  27. package/lib/components/Datagrid/useInfiniteScroll.js +0 -4
  28. package/lib/global/js/package-settings.js +1 -3
  29. package/package.json +6 -7
  30. package/scss/components/InlineTip/_inline-tip.scss +4 -4
  31. package/scss/components/_index-released-only-with-carbon.scss +1 -0
  32. package/scss/components/_index-released-only.scss +1 -0
  33. package/scss/config-dev.scss +3 -0
  34. package/scss/components/APIKeyModal/_storybook-styles.scss +0 -35
  35. package/scss/components/AboutModal/_storybook-styles.scss +0 -29
  36. package/scss/components/ActionBar/_storybook-styles.scss +0 -8
  37. package/scss/components/ActionSet/_storybook-styles.scss +0 -36
  38. package/scss/components/AddSelect/_storybook-styles.scss +0 -6
  39. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +0 -8
  40. package/scss/components/ButtonMenu/_storybook-styles.scss +0 -6
  41. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +0 -8
  42. package/scss/components/Card/_storybook-styles.scss +0 -12
  43. package/scss/components/Cascade/_storybook-styles.scss +0 -34
  44. package/scss/components/Checklist/_storybook-styles.scss +0 -13
  45. package/scss/components/CreateFullPage/_storybook-styles.scss +0 -67
  46. package/scss/components/CreateModal/_storybook-styles.scss +0 -54
  47. package/scss/components/CreateSidePanel/_storybook-styles.scss +0 -32
  48. package/scss/components/CreateTearsheet/_storybook-styles.scss +0 -56
  49. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -27
  50. package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -17
  51. package/scss/components/Datagrid/_storybook-styles.scss +0 -157
  52. package/scss/components/EditFullPage/_storybook-styles.scss +0 -10
  53. package/scss/components/EditInPlace/_storybook-styles.scss +0 -15
  54. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -32
  55. package/scss/components/EditTearsheet/_storybook-styles.scss +0 -59
  56. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +0 -10
  57. package/scss/components/EditUpdateCards/_storybook-styles.scss +0 -55
  58. package/scss/components/EmptyStates/_storybook-styles.scss +0 -6
  59. package/scss/components/ExampleComponent/_storybook-styles.scss +0 -6
  60. package/scss/components/ExportModal/_storybook-styles.scss +0 -6
  61. package/scss/components/ExpressiveCard/_storybook-styles.scss +0 -26
  62. package/scss/components/FilterSummary/_storybook-styles.scss +0 -16
  63. package/scss/components/ImportModal/_storybook-styles.scss +0 -6
  64. package/scss/components/InlineTip/_storybook-styles.scss +0 -20
  65. package/scss/components/MultiAddSelect/_storybook-styles.scss +0 -6
  66. package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -23
  67. package/scss/components/OptionsTile/_storybook-styles.scss +0 -29
  68. package/scss/components/PageHeader/_storybook-styles.scss +0 -90
  69. package/scss/components/ProductiveCard/_storybook-styles.scss +0 -23
  70. package/scss/components/RemoveModal/_storybook-styles.scss +0 -6
  71. package/scss/components/Saving/_storybook-styles.scss +0 -12
  72. package/scss/components/SidePanel/_storybook-styles.scss +0 -52
  73. package/scss/components/SingleAddSelect/_storybook-styles.scss +0 -6
  74. package/scss/components/StatusIcon/_storybook-styles.scss +0 -6
  75. package/scss/components/SteppedAnimatedMedia/_index.scss +0 -8
  76. package/scss/components/SteppedAnimatedMedia/_stepped-animated-media.scss +0 -6
  77. package/scss/components/SteppedAnimatedMedia/_storybook-styles.scss +0 -13
  78. package/scss/components/TagSet/_storybook-styles.scss +0 -8
  79. package/scss/components/Tearsheet/_storybook-styles.scss +0 -25
  80. package/scss/components/TooltipTrigger/_storybook-styles.scss +0 -6
  81. package/scss/components/UserProfileImage/_storybook.scss +0 -6
  82. package/scss/components/WebTerminal/_storybook-styles.scss +0 -46
@@ -3221,6 +3221,1857 @@ p.c4p--about-modal__copyright-text:first-child {
3221
3221
  margin-bottom: 1rem;
3222
3222
  }
3223
3223
 
3224
+ .c4p--datagrid__table-toolbar > section {
3225
+ z-index: 2;
3226
+ overflow: visible;
3227
+ }
3228
+
3229
+ .c4p--datagrid__full-height,
3230
+ .c4p--datagrid__full-height table,
3231
+ .c4p--datagrid__full-height tbody {
3232
+ height: 100%;
3233
+ }
3234
+
3235
+ .c4p--datagrid__grid-container::-webkit-scrollbar-thumb {
3236
+ background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
3237
+ }
3238
+
3239
+ .c4p--datagrid__grid-container table {
3240
+ /* Removes additional scroll introduced by Carbon table */
3241
+ overflow: hidden;
3242
+ }
3243
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .cds--table-header-label {
3244
+ display: flex;
3245
+ height: 100%;
3246
+ align-items: center;
3247
+ color: var(--cds-text-primary, #161616);
3248
+ }
3249
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
3250
+ position: sticky;
3251
+ z-index: 1;
3252
+ left: 0;
3253
+ }
3254
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
3255
+ align-items: center;
3256
+ padding-top: 0;
3257
+ padding-bottom: 0;
3258
+ }
3259
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox,
3260
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox {
3261
+ /* stylelint-disable-next-line carbon/layout-token-use */
3262
+ padding-top: 0.6875rem;
3263
+ }
3264
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell,
3265
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell {
3266
+ display: flex;
3267
+ align-items: center;
3268
+ padding-top: 0;
3269
+ }
3270
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
3271
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
3272
+ position: sticky;
3273
+ left: 0;
3274
+ }
3275
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
3276
+ display: flex;
3277
+ height: 100%;
3278
+ align-items: center;
3279
+ padding-top: 0;
3280
+ }
3281
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xs .c4p--datagrid__cell {
3282
+ padding-top: 0.125rem;
3283
+ padding-bottom: 0.125rem;
3284
+ }
3285
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--md .c4p--datagrid__cell {
3286
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
3287
+ padding-top: 0.4375rem;
3288
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
3289
+ padding-bottom: 0.375rem;
3290
+ }
3291
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
3292
+ padding-top: 1rem;
3293
+ padding-bottom: 1rem;
3294
+ }
3295
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .c4p--datagrid__cell {
3296
+ padding-top: 1rem;
3297
+ }
3298
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-header-label {
3299
+ padding-top: 1rem;
3300
+ }
3301
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-column-checkbox {
3302
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
3303
+ padding-top: 0.8125rem;
3304
+ }
3305
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
3306
+ padding-bottom: 1rem;
3307
+ }
3308
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .cds--table-header-label {
3309
+ padding-bottom: 1rem;
3310
+ }
3311
+ .c4p--datagrid__grid-container table.c4p--datagrid__variable-row-height tr.c4p--datagrid__carbon-row {
3312
+ height: auto;
3313
+ }
3314
+
3315
+ .c4p--datagrid__grid-container::-webkit-scrollbar-thumb {
3316
+ background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
3317
+ }
3318
+
3319
+ .c4p--datagrid__grid-container::-webkit-scrollbar {
3320
+ width: 6px;
3321
+ background-color: var(--cds-background, #ffffff);
3322
+ }
3323
+
3324
+ .c4p--datagrid__grid-container {
3325
+ display: block;
3326
+ width: 100%;
3327
+ padding-top: 0;
3328
+ }
3329
+ .c4p--datagrid__grid-container .cds--data-table-header__description {
3330
+ overflow: hidden;
3331
+ text-overflow: ellipsis;
3332
+ white-space: nowrap;
3333
+ }
3334
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
3335
+ overflow: hidden;
3336
+ max-width: 80ch;
3337
+ text-overflow: ellipsis;
3338
+ white-space: nowrap;
3339
+ }
3340
+ @media (min-width: 42rem) {
3341
+ .c4p--datagrid__grid-container .cds--data-table-header__title {
3342
+ max-width: 55ch;
3343
+ }
3344
+ }
3345
+ .c4p--datagrid__grid-container .cds--data-table-content {
3346
+ width: 100%;
3347
+ height: 100%;
3348
+ overflow-x: auto;
3349
+ }
3350
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
3351
+ display: flex;
3352
+ overflow: auto;
3353
+ max-height: 100%;
3354
+ flex-direction: column;
3355
+ background-color: var(--cds-layer-01, #f4f4f4);
3356
+ }
3357
+ .c4p--datagrid__grid-container .c4p--datagrid__head {
3358
+ display: flex;
3359
+ }
3360
+ .c4p--datagrid__grid-container .c4p--datagrid__head .header {
3361
+ /* Each cell should grow equally */
3362
+ width: 1%;
3363
+ align-items: center;
3364
+ }
3365
+ .c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar {
3366
+ scrollbar-width: thin;
3367
+ }
3368
+ .c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
3369
+ background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
3370
+ }
3371
+ .c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
3372
+ width: 6px;
3373
+ background-color: var(--cds-background, #ffffff);
3374
+ }
3375
+ .c4p--datagrid__grid-container .c4p--datagrid__cell {
3376
+ display: flex;
3377
+ /* Each cell should grow equally */
3378
+ width: 1%;
3379
+ }
3380
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer {
3381
+ overflow: hidden;
3382
+ width: 100%;
3383
+ text-overflow: ellipsis;
3384
+ white-space: nowrap;
3385
+ }
3386
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
3387
+ display: -webkit-box;
3388
+ -webkit-box-orient: vertical;
3389
+ -webkit-line-clamp: 2;
3390
+ white-space: initial;
3391
+ }
3392
+ .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
3393
+ display: flex;
3394
+ overflow: hidden;
3395
+ width: 100%;
3396
+ height: 100%;
3397
+ flex-direction: column;
3398
+ }
3399
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row {
3400
+ /* stylelint-disable-next-line declaration-no-important */
3401
+ flex: none !important;
3402
+ }
3403
+ .c4p--datagrid__grid-container .c4p--datagrid__carbon-row .c4p--datagrid__carbon-row:hover a {
3404
+ /* stylelint-disable-next-line declaration-no-important */
3405
+ color: var(--cds-link-primary-hover, #0043ce) !important;
3406
+ }
3407
+ .c4p--datagrid__grid-container .cds--select-input {
3408
+ -webkit-appearance: none;
3409
+ }
3410
+ .c4p--datagrid__grid-container th.cds--table-column-checkbox {
3411
+ display: block;
3412
+ }
3413
+ .c4p--datagrid__grid-container td.cds--table-column-checkbox,
3414
+ .c4p--datagrid__grid-container th.cds--table-column-checkbox {
3415
+ /* stylelint-disable-next-line declaration-no-important */
3416
+ width: 3rem !important;
3417
+ /* stylelint-disable-next-line declaration-no-important */
3418
+ padding-right: 1rem !important;
3419
+ }
3420
+
3421
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
3422
+ display: table;
3423
+ height: 100%;
3424
+ }
3425
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple .c4p--empty-state {
3426
+ max-width: 280px;
3427
+ }
3428
+
3429
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover {
3430
+ background: transparent;
3431
+ }
3432
+
3433
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover td {
3434
+ border-bottom: none;
3435
+ background: transparent;
3436
+ }
3437
+
3438
+ .c4p--datagrid__empty-state .c4p--datagrid__table-simple td {
3439
+ padding: 5rem;
3440
+ }
3441
+
3442
+ .c4p--datagrid__empty-state .c4p--datagrid__grid-container {
3443
+ flex: 1 1 auto;
3444
+ }
3445
+
3446
+ .c4p--datagrid__empty-state .c4p--datagrid__empty-state-cell {
3447
+ border-bottom: none;
3448
+ }
3449
+
3450
+ .c4p--datagrid__resizer {
3451
+ position: absolute;
3452
+ z-index: 1;
3453
+ top: 0;
3454
+ right: 0;
3455
+ display: inline-block;
3456
+ width: 0.25rem;
3457
+ height: 100%;
3458
+ background: transparent;
3459
+ touch-action: none;
3460
+ transform: translateX(50%);
3461
+ }
3462
+
3463
+ .c4p--datagrid__resizer:hover {
3464
+ background: transparent;
3465
+ }
3466
+
3467
+ .c4p--datagrid__sortableColumn:hover {
3468
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
3469
+ }
3470
+
3471
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple.cds--data-table.c4p--datagrid__table-is-resizing {
3472
+ overflow-y: hidden;
3473
+ }
3474
+
3475
+ .c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
3476
+ border-right: 0.125rem solid var(--cds-button-secondary-hover, #474747);
3477
+ }
3478
+ .c4p--datagrid__resizableColumn.c4p--datagrid__isSorted {
3479
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
3480
+ }
3481
+
3482
+ .c4p--datagrid__resizableColumn:hover {
3483
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
3484
+ }
3485
+ .c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
3486
+ border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
3487
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
3488
+ }
3489
+
3490
+ .c4p--datagrid__header-actions-column:hover {
3491
+ background-color: var(--cds-layer-accent);
3492
+ }
3493
+
3494
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only {
3495
+ opacity: 0;
3496
+ }
3497
+
3498
+ .c4p--datagrid .c4p--datagrid__carbon-row:hover .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only,
3499
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only:focus,
3500
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only[aria-expanded=true] {
3501
+ opacity: 1;
3502
+ }
3503
+
3504
+ .c4p--datagrid__head-hidden-select-all {
3505
+ padding-right: 3rem;
3506
+ }
3507
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
3508
+ position: sticky;
3509
+ z-index: 1;
3510
+ left: 0;
3511
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
3512
+ }
3513
+
3514
+ .c4p--datagrid__simple-body {
3515
+ position: relative;
3516
+ display: table;
3517
+ overflow: hidden auto;
3518
+ scrollbar-width: thin;
3519
+ }
3520
+
3521
+ .c4p--datagrid__simple-body::-webkit-scrollbar-thumb {
3522
+ background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
3523
+ }
3524
+
3525
+ .c4p--datagrid__simple-body::-webkit-scrollbar {
3526
+ width: 6px;
3527
+ background-color: var(--cds-background, #ffffff);
3528
+ }
3529
+
3530
+ .c4p--datagrid__sticky.c4p--datagrid__table-simple {
3531
+ /* stylelint-disable-next-line declaration-no-important */
3532
+ min-width: 0 !important;
3533
+ }
3534
+
3535
+ .c4p--datagrid__sticky.c4p--datagrid__simple-body {
3536
+ overflow: auto;
3537
+ }
3538
+
3539
+ .c4p--datagrid__sticky.c4p--datagrid__table-simple thead > div {
3540
+ overflow: hidden;
3541
+ /* stylelint-disable-next-line declaration-no-important */
3542
+ width: 100% !important;
3543
+ }
3544
+
3545
+ .c4p--datagrid__sticky thead {
3546
+ display: flex;
3547
+ }
3548
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
3549
+ width: auto;
3550
+ }
3551
+
3552
+ .c4p--datagrid__displayFlex {
3553
+ position: relative;
3554
+ display: flex;
3555
+ width: 100%;
3556
+ height: 100%;
3557
+ flex-direction: row;
3558
+ }
3559
+
3560
+ .c4p--datagrid__table-container-inner {
3561
+ overflow: hidden;
3562
+ flex: 1;
3563
+ }
3564
+
3565
+ .c4p--datagrid__datagridWithPanel {
3566
+ position: relative;
3567
+ display: flex;
3568
+ height: 100%;
3569
+ flex-direction: column;
3570
+ }
3571
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
3572
+ display: flex;
3573
+ overflow: visible;
3574
+ flex-direction: column;
3575
+ }
3576
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
3577
+ width: 100%;
3578
+ }
3579
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
3580
+ display: flex;
3581
+ overflow: visible;
3582
+ background-color: var(--cds-layer-01, #f4f4f4);
3583
+ }
3584
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
3585
+ border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
3586
+ }
3587
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
3588
+ height: 100%;
3589
+ }
3590
+
3591
+ .c4p--datagrid__table-container {
3592
+ position: relative;
3593
+ display: flex;
3594
+ overflow: auto;
3595
+ width: 100%;
3596
+ max-height: 100%;
3597
+ overflow-y: auto;
3598
+ }
3599
+
3600
+ .c4p--datagrid__carbon-row-expanded {
3601
+ position: relative;
3602
+ }
3603
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
3604
+ position: absolute;
3605
+ z-index: 2;
3606
+ /* stylelint-disable-next-line carbon/layout-token-use */
3607
+ top: var(--c4p--datagrid--row-height);
3608
+ /* stylelint-disable-next-line carbon/layout-token-use */
3609
+ left: calc(var(--c4p--datagrid--indicator-offset-amount) + 1rem);
3610
+ width: 1px;
3611
+ height: var(--c4p--datagrid--indicator-height);
3612
+ border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
3613
+ content: "";
3614
+ }
3615
+
3616
+ .c4p--datagrid .cds--data-table-header {
3617
+ background: transparent;
3618
+ }
3619
+
3620
+ .c4p--datagrid__dense-header {
3621
+ display: flex;
3622
+ flex-wrap: wrap;
3623
+ }
3624
+ .c4p--datagrid__dense-header .cds--data-table-header {
3625
+ flex: 1 1 auto;
3626
+ padding-bottom: 1rem;
3627
+ }
3628
+ .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
3629
+ display: flex;
3630
+ flex: 1 0 auto;
3631
+ align-items: flex-end;
3632
+ }
3633
+ .c4p--datagrid__dense-header .cds--table-toolbar {
3634
+ background: transparent;
3635
+ }
3636
+ .c4p--datagrid__dense-header .cds__table-container {
3637
+ flex: 1 1 100%;
3638
+ }
3639
+ .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
3640
+ position: relative;
3641
+ }
3642
+ .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider::before {
3643
+ position: absolute;
3644
+ top: 50%;
3645
+ left: 0;
3646
+ width: 1px;
3647
+ height: 1rem;
3648
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3649
+ content: "";
3650
+ transform: translateY(-50%);
3651
+ }
3652
+
3653
+ .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row) {
3654
+ position: relative;
3655
+ }
3656
+
3657
+ .c4p--datagrid .cds--data-table--selected:not(.c4p--datagrid__active-row)::before {
3658
+ position: absolute;
3659
+ top: 0;
3660
+ left: 0;
3661
+ width: 0.25rem;
3662
+ height: 100%;
3663
+ background-color: var(--cds-background-brand, #0f62fe);
3664
+ content: "";
3665
+ }
3666
+
3667
+ .c4p--datagrid__table-toolbar .cds--batch-summary__para {
3668
+ white-space: nowrap;
3669
+ }
3670
+
3671
+ .c4p--datagrid__table-toolbar .cds--batch-actions .cds--batch-actions--active {
3672
+ overflow-x: hidden;
3673
+ }
3674
+
3675
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu {
3676
+ display: flex;
3677
+ min-width: 2.5rem;
3678
+ justify-content: center;
3679
+ margin-right: 0.75rem;
3680
+ }
3681
+
3682
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu {
3683
+ min-width: calc(6rem + 0.5rem);
3684
+ }
3685
+
3686
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger {
3687
+ display: flex;
3688
+ width: 100%;
3689
+ min-width: 3rem;
3690
+ justify-content: center;
3691
+ padding: 0;
3692
+ margin: 0;
3693
+ }
3694
+ .c4p--datagrid__table-toolbar .c4p--datagrid__button-menu--icon-only.c4p--button-menu .c4p--button-menu__trigger .cds--btn__icon {
3695
+ margin: 0;
3696
+ }
3697
+
3698
+ .c4p--datagrid .c4p--button-menu {
3699
+ height: 3rem;
3700
+ }
3701
+
3702
+ .c4p--datagrid .c4p--datagrid__row-size-button {
3703
+ display: flex;
3704
+ width: 3rem;
3705
+ height: 3rem;
3706
+ justify-content: center;
3707
+ }
3708
+
3709
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
3710
+ flex: 0 0 auto;
3711
+ margin-right: 0.5rem;
3712
+ }
3713
+
3714
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
3715
+ width: 10px;
3716
+ height: 7px;
3717
+ }
3718
+
3719
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
3720
+ background: var(--cds-layer);
3721
+ }
3722
+
3723
+ .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
3724
+ border-radius: 5px;
3725
+ }
3726
+
3727
+ .c4p--datagrid__virtualScrollContainer {
3728
+ width: 100%;
3729
+ }
3730
+
3731
+ .c4p--datagrid .cds--modal {
3732
+ width: 100%;
3733
+ }
3734
+
3735
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
3736
+ flex-shrink: 0;
3737
+ background-color: var(--cds-interactive, #0f62fe);
3738
+ }
3739
+
3740
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
3741
+ fill: var(--cds-background, #ffffff);
3742
+ }
3743
+
3744
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
3745
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
3746
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
3747
+ background-color: var(--cds-button-primary-hover, #0050e6);
3748
+ }
3749
+
3750
+ .c4p--datagrid__toolbar-options.c4p--datagrid__toolbar-options {
3751
+ background-color: var(--cds-layer-02, #ffffff);
3752
+ }
3753
+
3754
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
3755
+ background-color: transparent;
3756
+ }
3757
+
3758
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
3759
+ position: absolute;
3760
+ }
3761
+
3762
+ .c4p--datagrid__table-toolbar--sm .c4p--filter-summary,
3763
+ .c4p--datagrid__table-toolbar--xs .c4p--filter-summary {
3764
+ padding: 0 0.5rem;
3765
+ }
3766
+
3767
+ .c4p--datagrid .c4p--datagrid__head-wrap {
3768
+ background-color: var(--cds-layer-accent);
3769
+ }
3770
+
3771
+ .c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {
3772
+ padding: 0;
3773
+ }
3774
+
3775
+ .c4p--datagrid .cds--action-list .cds--btn__icon {
3776
+ margin-top: 0;
3777
+ }
3778
+
3779
+ .c4p--datagrid .c4p--datagrid__col-resizer-range {
3780
+ position: absolute;
3781
+ z-index: 2;
3782
+ top: 0;
3783
+ right: calc(0.5rem * -1);
3784
+ width: 1rem;
3785
+ height: 100%;
3786
+ margin: 0;
3787
+ -moz-appearance: initial;
3788
+ -webkit-appearance: none;
3789
+ appearance: none;
3790
+ background: transparent;
3791
+ }
3792
+
3793
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus {
3794
+ outline: 0;
3795
+ }
3796
+
3797
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::before {
3798
+ position: absolute;
3799
+ top: 50%;
3800
+ left: 50%;
3801
+ width: 2px;
3802
+ height: var(--c4p--datagrid--header-height);
3803
+ background-color: var(--cds-focus, #0f62fe);
3804
+ content: "";
3805
+ transform: translate(-50%, -50%);
3806
+ }
3807
+
3808
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator {
3809
+ position: absolute;
3810
+ z-index: 2;
3811
+ right: calc(0.5rem * -1);
3812
+ width: 0.5rem;
3813
+ height: 0.5rem;
3814
+ border-radius: 100%;
3815
+ margin: 0;
3816
+ background-color: var(--cds-focus, #0f62fe);
3817
+ transform: translate(-50%, 0);
3818
+ }
3819
+
3820
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator::after {
3821
+ position: absolute;
3822
+ /* stylelint-disable-next-line carbon/layout-token-use */
3823
+ top: calc(var(--c4p--datagrid--row-height) - 20px);
3824
+ right: 0.25rem;
3825
+ width: 1px;
3826
+ height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
3827
+ background-color: var(--cds-layer-active-01, #c6c6c6);
3828
+ content: "";
3829
+ }
3830
+
3831
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-webkit-slider-thumb {
3832
+ width: 16px;
3833
+ height: 16px;
3834
+ border: none;
3835
+ border-radius: 50%;
3836
+ -webkit-appearance: none;
3837
+ appearance: none;
3838
+ background: transparent;
3839
+ }
3840
+
3841
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-moz-range-thumb {
3842
+ visibility: hidden;
3843
+ }
3844
+
3845
+ /*
3846
+ * Licensed Materials - Property of IBM
3847
+ * 5724-Q36
3848
+ * (c) Copyright IBM Corp. 2020 - 2022
3849
+ * US Government Users Restricted Rights - Use, duplication or disclosure
3850
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
3851
+ */
3852
+ .cds--data-table tr.c4p--datagrid__carbon-nested-row {
3853
+ border-left: 1px solid transparent;
3854
+ }
3855
+ .cds--data-table tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__cell {
3856
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
3857
+ }
3858
+
3859
+ .c4p--datagrid .c4p--datagrid__expander-icon {
3860
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
3861
+ }
3862
+
3863
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
3864
+ transform: rotate(90deg);
3865
+ }
3866
+
3867
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
3868
+ border-bottom: none;
3869
+ }
3870
+
3871
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
3872
+ position: relative;
3873
+ }
3874
+
3875
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
3876
+ position: absolute;
3877
+ /* stylelint-disable-next-line carbon/layout-token-use */
3878
+ top: -1px;
3879
+ left: 0;
3880
+ width: 100%;
3881
+ height: 1px;
3882
+ background-color: var(--cds-border-subtle);
3883
+ content: "";
3884
+ }
3885
+
3886
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
3887
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
3888
+ border-bottom: none;
3889
+ }
3890
+
3891
+ .cds--data-table td.c4p--datagrid__expandable-row-cell {
3892
+ padding-left: 0.5rem;
3893
+ }
3894
+
3895
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
3896
+ border-bottom: none;
3897
+ }
3898
+
3899
+ /*
3900
+ * Licensed Materials - Property of IBM
3901
+ * 5724-Q36
3902
+ * (c) Copyright IBM Corp. 2020
3903
+ * US Government Users Restricted Rights - Use, duplication or disclosure
3904
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
3905
+ */
3906
+ .c4p--datagrid__expanded-row .cds--data-table-container {
3907
+ width: calc(100% - 2rem);
3908
+ border-left: 2px solid var(--cds-background-brand, #0f62fe);
3909
+ margin-left: 2rem;
3910
+ overflow-x: hidden;
3911
+ }
3912
+ .c4p--datagrid__expanded-row .cds--data-table-container tr.c4p--datagrid__carbon-nested-row {
3913
+ border-left: none;
3914
+ }
3915
+
3916
+ .c4p--datagrid__expanded-row .cds--data-table-container th {
3917
+ padding-top: 0;
3918
+ padding-bottom: 0;
3919
+ border-top-color: var(--cds-layer-accent-01, #e0e0e0);
3920
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
3921
+ }
3922
+
3923
+ /**
3924
+ * Copyright IBM Corp. 2020, 2023
3925
+ *
3926
+ * This source code is licensed under the Apache-2.0 license found in the
3927
+ * LICENSE file in the root directory of this source tree.
3928
+ */
3929
+ .c4p--datagrid__sortableColumn .cds--table-header-label .header-title {
3930
+ display: inline-block;
3931
+ width: auto;
3932
+ }
3933
+ .c4p--datagrid__sortableColumn .cds--table-header-label {
3934
+ display: block;
3935
+ width: 100%;
3936
+ height: 100%;
3937
+ }
3938
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
3939
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
3940
+ .c4p--datagrid__sortableColumn .cds--table-header-label button:focus .c4p--datagrid__sortable-icon {
3941
+ /* stylelint-disable-next-line declaration-no-important */
3942
+ background: none !important;
3943
+ /* stylelint-disable-next-line declaration-no-important */
3944
+ color: var(--cds-text-primary, #161616) !important;
3945
+ }
3946
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus + .c4p--datagrid__resizer,
3947
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active + .c4p--datagrid__resizer {
3948
+ z-index: -1;
3949
+ }
3950
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort {
3951
+ width: 100%;
3952
+ min-width: 100%;
3953
+ padding: 0 1rem;
3954
+ border: none;
3955
+ /* stylelint-disable-next-line declaration-no-important */
3956
+ background: none !important;
3957
+ /* stylelint-disable-next-line declaration-no-important */
3958
+ color: var(--cds-text-primary, #161616) !important;
3959
+ font: inherit;
3960
+ }
3961
+ .c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort .c4p--datagrid__sortable-icon {
3962
+ fill: var(--cds-text-primary, #161616);
3963
+ opacity: 0;
3964
+ visibility: hidden;
3965
+ }
3966
+ .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
3967
+ width: calc(100% + 2rem);
3968
+ margin: 0 calc(-1 * 1rem);
3969
+ }
3970
+
3971
+ .c4p--datagrid__sortableColumn:hover .cds--table-header-label .c4p--datagrid__sortable-icon,
3972
+ .c4p--datagrid__sortableColumn:focus-within .cds--table-header-label .c4p--datagrid__sortable-icon,
3973
+ .c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label .c4p--datagrid__sortable-icon {
3974
+ opacity: 1;
3975
+ visibility: visible;
3976
+ }
3977
+
3978
+ /*
3979
+ * Licensed Materials - Property of IBM
3980
+ * 5724-Q36
3981
+ * (c) Copyright IBM Corp. 2020
3982
+ * US Government Users Restricted Rights - Use, duplication or disclosure
3983
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
3984
+ */
3985
+ .c4p--datagrid__right-align-header {
3986
+ width: 100%;
3987
+ text-align: right;
3988
+ }
3989
+
3990
+ .c4p--datagrid__right-align-header button {
3991
+ text-align: right;
3992
+ }
3993
+
3994
+ .c4p--datagrid__right-align-cell-renderer {
3995
+ width: 100%;
3996
+ /* stylelint-disable-next-line carbon/layout-token-use */
3997
+ padding-right: 23px;
3998
+ text-align: right;
3999
+ }
4000
+
4001
+ .c4p--datagrid__right-align-cell-renderer.sortDisabled {
4002
+ padding-right: 0;
4003
+ }
4004
+
4005
+ .c4p--datagrid__center-align-header,
4006
+ .c4p--datagrid__center-align-header .c4p--datagrid--table-sort {
4007
+ width: 100%;
4008
+ text-align: center;
4009
+ }
4010
+
4011
+ .c4p--datagrid__center-align-cell-renderer {
4012
+ margin-right: auto;
4013
+ margin-left: auto;
4014
+ }
4015
+
4016
+ /*
4017
+ * Licensed Materials - Property of IBM
4018
+ * 5724-Q36
4019
+ * (c) Copyright IBM Corp. 2021
4020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4021
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4022
+ */
4023
+ .c4p--datagrid__right-sticky-column-cell {
4024
+ /* stylelint-disable-next-line declaration-no-important */
4025
+ position: sticky !important;
4026
+ right: 0;
4027
+ display: flex;
4028
+ align-items: center;
4029
+ border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
4030
+ }
4031
+
4032
+ .c4p--datagrid__right-sticky-column-header {
4033
+ /* stylelint-disable-next-line declaration-no-important */
4034
+ position: sticky !important;
4035
+ right: 0;
4036
+ }
4037
+
4038
+ .c4p--datagrid__left-sticky-column-cell {
4039
+ /* stylelint-disable-next-line declaration-no-important */
4040
+ position: sticky !important;
4041
+ left: 0;
4042
+ display: flex;
4043
+ align-items: center;
4044
+ border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
4045
+ }
4046
+
4047
+ .c4p--datagrid__left-sticky-column-header {
4048
+ /* stylelint-disable-next-line declaration-no-important */
4049
+ position: sticky !important;
4050
+ z-index: 1;
4051
+ left: 0;
4052
+ }
4053
+
4054
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
4055
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
4056
+ left: 3rem;
4057
+ }
4058
+
4059
+ .c4p--datagrid__sticky-noShadow {
4060
+ box-shadow: none;
4061
+ }
4062
+
4063
+ .c4p--datagrid__sticky-column-noShadow .c4p--datagrid__right-sticky-column-cell {
4064
+ box-shadow: none;
4065
+ }
4066
+
4067
+ .c4p--datagrid__right-sticky-column-offset-scroll {
4068
+ /* stylelint-disable-next-line */
4069
+ right: 6px !important;
4070
+ }
4071
+
4072
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
4073
+ position: sticky;
4074
+ z-index: 1;
4075
+ left: 0;
4076
+ }
4077
+
4078
+ /*
4079
+ * Licensed Materials - Property of IBM
4080
+ * 5724-Q36
4081
+ * (c) Copyright IBM Corp. 2021
4082
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4083
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4084
+ */
4085
+ .c4p--datagrid__actions-column-cell {
4086
+ display: flex;
4087
+ flex-flow: column;
4088
+ justify-content: center;
4089
+ }
4090
+
4091
+ .c4p--datagrid__actions-column-content {
4092
+ display: flex;
4093
+ justify-content: center;
4094
+ }
4095
+
4096
+ .c4p--datagrid__actions-column-loading {
4097
+ margin-bottom: 0.5rem;
4098
+ }
4099
+
4100
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
4101
+ cursor: not-allowed;
4102
+ }
4103
+
4104
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
4105
+ pointer-events: none;
4106
+ }
4107
+
4108
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
4109
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
4110
+ }
4111
+
4112
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
4113
+ display: flex;
4114
+ flex-flow: column;
4115
+ }
4116
+
4117
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
4118
+ height: 3rem;
4119
+ padding-left: 3rem;
4120
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
4121
+ }
4122
+
4123
+ .cds--form-item.cds--checkbox-wrapper.c4p--datagrid__customize-columns-checkbox {
4124
+ display: flex;
4125
+ flex: initial;
4126
+ align-items: center;
4127
+ justify-content: center;
4128
+ }
4129
+
4130
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-visible-label {
4131
+ /* stylelint-disable-next-line */
4132
+ padding-left: 0.375rem;
4133
+ }
4134
+
4135
+ .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
4136
+ margin-bottom: 0;
4137
+ }
4138
+
4139
+ .c4p--datagrid__customize-columns-column-list {
4140
+ position: relative;
4141
+ overflow: auto;
4142
+ }
4143
+
4144
+ .c4p--datagrid__customize-columns-select-all {
4145
+ align-items: center;
4146
+ }
4147
+
4148
+ .c4p--datagrid__customize-columns-select-all,
4149
+ .c4p--datagrid__customize-columns-select-all--selected {
4150
+ position: sticky;
4151
+ z-index: 1;
4152
+ top: 0;
4153
+ display: flex;
4154
+ height: 3rem;
4155
+ padding-left: 2.5rem;
4156
+ border-bottom: 1px solid var(--cds-layer-active);
4157
+ background-color: var(--cds-layer);
4158
+ }
4159
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
4160
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
4161
+ font-weight: 600;
4162
+ }
4163
+
4164
+ .c4p--datagrid__customize-columns-select-all:hover {
4165
+ background-color: var(--cds-layer-hover);
4166
+ }
4167
+
4168
+ .c4p--datagrid__customize-columns-select-all--selected {
4169
+ background-color: var(--cds-layer-selected);
4170
+ }
4171
+
4172
+ /*
4173
+ * Licensed Materials - Property of IBM
4174
+ * 5724-Q36
4175
+ * (c) Copyright IBM Corp. 2021
4176
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4177
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4178
+ */
4179
+ .c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
4180
+ background-color: var(--cds-layer-02, #ffffff);
4181
+ box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
4182
+ }
4183
+
4184
+ .c4p--datagrid .c4p--datagrid__row-size-radio-button .cds--radio-button__label {
4185
+ color: var(--cds-text-primary, #161616);
4186
+ }
4187
+
4188
+ .c4p--datagrid .c4p--datagrid__row-size-toggle-tip .cds--popover-caret {
4189
+ background-color: var(--cds-layer-02, #ffffff);
4190
+ }
4191
+
4192
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
4193
+ /* stylelint-disable-next-line carbon/layout-token-use */
4194
+ left: -4px;
4195
+ }
4196
+
4197
+ .c4p--datagrid__row-size-toggle-tip-button.cds--toggletip-button {
4198
+ display: flex;
4199
+ width: 3rem;
4200
+ height: 3rem;
4201
+ justify-content: center;
4202
+ }
4203
+
4204
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td,
4205
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td {
4206
+ align-items: flex-start;
4207
+ padding-top: 1rem;
4208
+ padding-bottom: 1rem;
4209
+ }
4210
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__actions-column-cell,
4211
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__actions-column-cell {
4212
+ padding-left: 0.5rem;
4213
+ }
4214
+
4215
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center th .cds--table-header-label,
4216
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top th .cds--table-header-label {
4217
+ align-items: flex-start;
4218
+ }
4219
+
4220
+ .c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
4221
+ align-items: flex-start;
4222
+ padding-top: 0.75rem;
4223
+ }
4224
+
4225
+ .c4p--datagrid__row-size__row-settings-trigger--open.cds--btn--ghost {
4226
+ background-color: var(--cds-layer-02, #ffffff);
4227
+ }
4228
+
4229
+ /*
4230
+ * Licensed Materials - Property of IBM
4231
+ * 5724-Q36
4232
+ * (c) Copyright IBM Corp. 2022
4233
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4234
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4235
+ */
4236
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4237
+ .c4p--datagrid-filter-flyout__container {
4238
+ position: relative;
4239
+ }
4240
+
4241
+ .c4p--datagrid-filter-flyout {
4242
+ position: absolute;
4243
+ top: 3rem;
4244
+ right: 0;
4245
+ display: none;
4246
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4247
+ width: 40.125rem;
4248
+ background-color: var(--cds-layer-02, #ffffff);
4249
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4250
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
4251
+ }
4252
+
4253
+ .c4p--datagrid-filter-flyout--open {
4254
+ display: grid;
4255
+ }
4256
+
4257
+ .c4p--datagrid-filter-flyout--batch {
4258
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4259
+ min-height: 21.625rem;
4260
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4261
+ grid-template-rows: 1fr 3rem;
4262
+ }
4263
+
4264
+ .c4p--datagrid-filter-flyout--instant {
4265
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4266
+ min-height: 17.625rem;
4267
+ grid-template-rows: 1fr;
4268
+ }
4269
+
4270
+ .c4p--datagrid-filter-flyout__inner-container {
4271
+ padding: 1rem 1rem 3rem 1rem;
4272
+ }
4273
+
4274
+ .c4p--datagrid-filter-flyout__inner-container::before {
4275
+ position: absolute;
4276
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4277
+ top: -0.4375rem;
4278
+ right: 1px;
4279
+ display: block;
4280
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4281
+ width: 2.875rem;
4282
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4283
+ height: 0.9375rem;
4284
+ background-color: var(--cds-layer-02, #ffffff);
4285
+ content: "";
4286
+ }
4287
+
4288
+ .c4p--datagrid-filter-flyout__title {
4289
+ display: block;
4290
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
4291
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
4292
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
4293
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
4294
+ margin-bottom: 1.5rem;
4295
+ }
4296
+
4297
+ .c4p--datagrid-filter-flyout__filters {
4298
+ display: grid;
4299
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4300
+ gap: 1rem 2rem;
4301
+ grid-template-columns: 1fr 1fr;
4302
+ }
4303
+
4304
+ .c4p--datagrid-filter-flyout__trigger.cds--btn {
4305
+ display: flex;
4306
+ width: 3rem;
4307
+ height: 3rem;
4308
+ justify-content: center;
4309
+ }
4310
+
4311
+ .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
4312
+ position: relative;
4313
+ background-color: var(--cds-layer-02, #ffffff);
4314
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4315
+ box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
4316
+ }
4317
+
4318
+ .c4p--datagrid-filter-flyout .cds--fieldset {
4319
+ margin-bottom: 0;
4320
+ }
4321
+
4322
+ /*
4323
+ * Licensed Materials - Property of IBM
4324
+ * 5724-Q36
4325
+ * (c) Copyright IBM Corp. 2022
4326
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4327
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4328
+ */
4329
+ .c4p--datagrid-filter-panel__container {
4330
+ position: relative;
4331
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4332
+ width: 20rem;
4333
+ height: clamp(var(--filter-panel-min-height), 100%, 100vh);
4334
+ border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
4335
+ background-color: var(--cds-layer-01, #f4f4f4);
4336
+ }
4337
+
4338
+ .c4p--datagrid-filter-panel--open {
4339
+ border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
4340
+ }
4341
+
4342
+ .c4p--datagrid-filter-panel__container::before {
4343
+ position: absolute;
4344
+ top: -1px;
4345
+ left: 0;
4346
+ display: block;
4347
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4348
+ width: 2.9375rem;
4349
+ height: 1px;
4350
+ background-color: var(--cds-layer-01, #f4f4f4);
4351
+ content: "";
4352
+ }
4353
+
4354
+ .c4p--datagrid-filter-panel__inner-container {
4355
+ position: relative;
4356
+ z-index: 0;
4357
+ overflow: auto;
4358
+ padding: 0 1rem;
4359
+ overscroll-behavior: contain;
4360
+ }
4361
+
4362
+ .c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
4363
+ padding-bottom: 5rem;
4364
+ }
4365
+
4366
+ .c4p--datagrid-filter-panel {
4367
+ position: sticky;
4368
+ top: 0;
4369
+ }
4370
+
4371
+ .c4p--datagrid-filter-panel__heading {
4372
+ display: flex;
4373
+ justify-content: space-between;
4374
+ padding-left: 1rem;
4375
+ border-bottom: 1px solid transparent;
4376
+ }
4377
+
4378
+ .c4p--datagrid-filter-panel__heading--with-divider {
4379
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4380
+ }
4381
+
4382
+ .c4p--datagrid-filter-panel__title {
4383
+ padding: 1rem 0;
4384
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
4385
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
4386
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
4387
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
4388
+ }
4389
+
4390
+ .c4p--datagrid-filter-panel__search {
4391
+ padding: 0 1rem 1.5rem;
4392
+ }
4393
+
4394
+ .c4p--datagrid-filter-panel__category-title {
4395
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
4396
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
4397
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
4398
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
4399
+ margin-bottom: 1rem;
4400
+ color: var(--cds-text-secondary, #525252);
4401
+ }
4402
+
4403
+ .c4p--datagrid-filter-panel__category {
4404
+ padding-bottom: 1.5rem;
4405
+ }
4406
+
4407
+ .c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
4408
+ margin-bottom: 1rem;
4409
+ }
4410
+
4411
+ .c4p--datagrid-filter-panel__action-set {
4412
+ position: sticky;
4413
+ z-index: 1;
4414
+ bottom: 0;
4415
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
4416
+ height: 4rem;
4417
+ margin-top: auto;
4418
+ }
4419
+
4420
+ .c4p--datagrid-filter-panel__container .cds--accordion__title {
4421
+ margin: 0;
4422
+ }
4423
+
4424
+ .c4p--datagrid-filter-panel__container .cds--accordion__arrow {
4425
+ margin: 0.125rem 0 0;
4426
+ }
4427
+
4428
+ .c4p--datagrid-filter-panel__container .cds--accordion__content {
4429
+ padding-right: 0;
4430
+ padding-left: 0;
4431
+ }
4432
+
4433
+ .c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
4434
+ margin-bottom: 1rem;
4435
+ }
4436
+
4437
+ .cds--btn.c4p--datagrid-filter-panel-open-button {
4438
+ display: flex;
4439
+ width: 3rem;
4440
+ height: 3rem;
4441
+ justify-content: center;
4442
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4443
+ border-bottom: none;
4444
+ }
4445
+
4446
+ .cds--btn.c4p--datagrid-filter-panel__view-all-button {
4447
+ margin-left: -1rem;
4448
+ }
4449
+
4450
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
4451
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
4452
+ /* stylelint-disable-next-line declaration-no-important */
4453
+ width: 4.5rem !important;
4454
+ /* stylelint-disable-next-line declaration-no-important */
4455
+ min-width: initial !important;
4456
+ box-sizing: border-box;
4457
+ flex: 0 0 auto;
4458
+ }
4459
+
4460
+ th.c4p--datagrid__select-all-toggle-on {
4461
+ display: flex;
4462
+ align-items: center;
4463
+ justify-content: center;
4464
+ }
4465
+
4466
+ th.c4p--datagrid__select-all-toggle-on.button {
4467
+ margin-left: 0.125rem;
4468
+ }
4469
+
4470
+ .c4p--datagrid__select-all-toggle-overflow.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
4471
+ width: 10rem;
4472
+ }
4473
+
4474
+ /*
4475
+ * Licensed Materials - Property of IBM
4476
+ * 5724-Q36
4477
+ * (c) Copyright IBM Corp. 2022
4478
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4479
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4480
+ */
4481
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
4482
+ position: relative;
4483
+ padding: 1rem 1rem 1.5rem 4rem;
4484
+ }
4485
+
4486
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
4487
+ position: absolute;
4488
+ /* stylelint-disable-next-line carbon/layout-token-use */
4489
+ top: -1px;
4490
+ right: 0;
4491
+ width: calc(100% - 3rem);
4492
+ height: 1px;
4493
+ background-color: var(--cds-layer-accent);
4494
+ content: "";
4495
+ }
4496
+
4497
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
4498
+ position: absolute;
4499
+ bottom: 0;
4500
+ left: 0;
4501
+ width: 100%;
4502
+ height: 1px;
4503
+ background-color: var(--cds-layer-accent);
4504
+ content: "";
4505
+ }
4506
+
4507
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
4508
+ padding: 0.5rem;
4509
+ padding-right: 0;
4510
+ }
4511
+
4512
+ .c4p--datagrid__row-expander.cds--btn {
4513
+ display: flex;
4514
+ width: 2rem;
4515
+ height: 2rem;
4516
+ min-height: 2rem;
4517
+ align-items: center;
4518
+ justify-content: center;
4519
+ padding: 0;
4520
+ }
4521
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
4522
+ fill: var(--cds-layer-selected-inverse, #161616);
4523
+ }
4524
+
4525
+ .c4p--datagrid .cds--data-table tbody tr:hover + .c4p--datagrid__expanded-row,
4526
+ .c4p--datagrid .c4p--datagrid__expanded-row:hover,
4527
+ .c4p--datagrid .c4p--datagrid__expandable-row--hover td {
4528
+ background: var(--cds-layer-hover);
4529
+ }
4530
+
4531
+ .c4p--datagrid__draggable-handleStyle {
4532
+ display: flex;
4533
+ align-items: center;
4534
+ margin-right: 0.5rem;
4535
+ }
4536
+
4537
+ .c4p--datagrid__draggable-handleStyle.disabled {
4538
+ pointer-events: none;
4539
+ }
4540
+
4541
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
4542
+ fill: var(--cds-icon-on-color-disabled, #8d8d8d);
4543
+ }
4544
+
4545
+ .c4p--datagrid__draggable-underlay {
4546
+ position: absolute;
4547
+ width: 100%;
4548
+ }
4549
+
4550
+ .c4p--datagrid__draggable-underlay-item {
4551
+ width: 100%;
4552
+ height: 3rem;
4553
+ border: 2px dashed var(--cds-focus, #0f62fe);
4554
+ /* stylelint-disable-next-line carbon/theme-token-use */
4555
+ background-color: #edf5ff;
4556
+ }
4557
+
4558
+ .c4p--datagrid__draggable-handleHolder {
4559
+ position: relative;
4560
+ display: flex;
4561
+ height: 3rem;
4562
+ border-bottom: 1px solid var(--cds-layer-active);
4563
+ background-color: var(--cds-layer);
4564
+ cursor: grab;
4565
+ }
4566
+
4567
+ .c4p--datagrid__draggable-handleHolder:hover {
4568
+ background-color: var(--cds-layer-hover);
4569
+ }
4570
+
4571
+ .c4p--datagrid__draggable-handleHolder:focus {
4572
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
4573
+ outline: none;
4574
+ }
4575
+
4576
+ .c4p--datagrid__draggable-handleHolder--selected {
4577
+ background-color: var(--cds-layer-selected);
4578
+ }
4579
+
4580
+ .c4p--datagrid__draggable-handleHolder--dragging {
4581
+ z-index: 2;
4582
+ background-color: var(--cds-highlight, #d0e2ff);
4583
+ color: var(--cds-text-primary, #161616);
4584
+ outline: none;
4585
+ }
4586
+
4587
+ .c4p--datagrid__draggable-handleHolder:active,
4588
+ .c4p--datagrid__draggable-handleHolder--dragging {
4589
+ cursor: grabbing;
4590
+ }
4591
+
4592
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
4593
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4594
+ }
4595
+
4596
+ .c4p--datagrid__draggable-handleHolder-droppable {
4597
+ display: flex;
4598
+ width: 100%;
4599
+ align-items: center;
4600
+ padding-left: 1rem;
4601
+ /* stylelint-disable-next-line carbon/type-token-use */
4602
+ line-height: 1;
4603
+ transition-property: opacity;
4604
+ }
4605
+
4606
+ .c4p--datagrid__draggable-handleHolder-droppable.c4p--datagrid__draggable-handleHolder-droppable--origin {
4607
+ opacity: 0.5;
4608
+ transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
4609
+ }
4610
+
4611
+ .c4p--datagrid__draggable-handleHolder--sticky {
4612
+ color: var(--cds-text-on-color-disabled, #8d8d8d);
4613
+ }
4614
+
4615
+ .c4p--datagrid__shared-ui--assistive-text {
4616
+ position: absolute;
4617
+ overflow: hidden;
4618
+ width: 0;
4619
+ height: 0;
4620
+ padding: 0;
4621
+ border: 0;
4622
+ clip: rect(0 0 0 0);
4623
+ text-transform: none;
4624
+ white-space: nowrap;
4625
+ }
4626
+
4627
+ /*
4628
+ * Licensed Materials - Property of IBM
4629
+ * 5724-Q36
4630
+ * (c) Copyright IBM Corp. 2021
4631
+ * US Government Users Restricted Rights - Use, duplication or disclosure
4632
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
4633
+ */
4634
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
4635
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
4636
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
4637
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
4638
+ height: 1.5rem;
4639
+ }
4640
+
4641
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
4642
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
4643
+ height: calc(1.5rem - 0.25rem);
4644
+ }
4645
+
4646
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
4647
+ max-height: none;
4648
+ }
4649
+
4650
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
4651
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
4652
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
4653
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
4654
+ height: 2rem;
4655
+ }
4656
+
4657
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
4658
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
4659
+ height: calc(2rem - 0.25rem);
4660
+ }
4661
+
4662
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
4663
+ max-height: none;
4664
+ }
4665
+
4666
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
4667
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
4668
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
4669
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
4670
+ height: 2.5rem;
4671
+ }
4672
+
4673
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
4674
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
4675
+ height: calc(2.5rem - 0.25rem);
4676
+ }
4677
+
4678
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
4679
+ max-height: none;
4680
+ }
4681
+
4682
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
4683
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
4684
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
4685
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
4686
+ height: 3rem;
4687
+ }
4688
+
4689
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
4690
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
4691
+ height: calc(3rem - 0.25rem);
4692
+ }
4693
+
4694
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
4695
+ max-height: none;
4696
+ }
4697
+
4698
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
4699
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
4700
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
4701
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
4702
+ height: 4rem;
4703
+ }
4704
+
4705
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
4706
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
4707
+ height: calc(4rem - 0.25rem);
4708
+ }
4709
+
4710
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
4711
+ max-height: none;
4712
+ }
4713
+
4714
+ .c4p--datagrid {
4715
+ --c4p--datagrid--grid-header-height: 0;
4716
+ }
4717
+
4718
+ .c4p--datagrid__inline-edit-cell {
4719
+ display: flex;
4720
+ height: 100%;
4721
+ align-items: center;
4722
+ }
4723
+
4724
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
4725
+ display: flex;
4726
+ align-items: center;
4727
+ }
4728
+
4729
+ .c4p--datagrid__inline-edit--outer-cell-button {
4730
+ width: 100%;
4731
+ height: calc(100% + 2px);
4732
+ }
4733
+
4734
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
4735
+ position: relative;
4736
+ display: flex;
4737
+ width: 100%;
4738
+ height: 100%;
4739
+ align-items: center;
4740
+ justify-content: space-between;
4741
+ padding-left: 1rem;
4742
+ color: var(--cds-text-secondary, #525252);
4743
+ cursor: pointer;
4744
+ outline: 0;
4745
+ /* stylelint-disable-next-line */
4746
+ }
4747
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
4748
+ height: 1rem;
4749
+ padding-right: 1rem;
4750
+ }
4751
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
4752
+ padding-left: 0;
4753
+ cursor: default;
4754
+ }
4755
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
4756
+ height: 1rem;
4757
+ fill: var(--cds-icon-secondary, #525252);
4758
+ }
4759
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
4760
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
4761
+ }
4762
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
4763
+ justify-content: flex-start;
4764
+ }
4765
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
4766
+ display: none;
4767
+ }
4768
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:hover .c4p--datagrid__inline-edit-button-icon, .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active .c4p--datagrid__inline-edit-button-icon {
4769
+ display: block;
4770
+ }
4771
+
4772
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
4773
+ background-color: var(--cds-layer-active);
4774
+ color: var(--cds-text-primary, #161616);
4775
+ }
4776
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
4777
+ fill: var(--cds-icon-primary, #161616);
4778
+ }
4779
+
4780
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
4781
+ background-color: var(--cds-layer-active);
4782
+ color: var(--cds-text-primary, #161616);
4783
+ cursor: text;
4784
+ }
4785
+
4786
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
4787
+ /* stylelint-disable-next-line carbon/theme-token-use */
4788
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
4789
+ outline-offset: calc(-1 * 0.125rem);
4790
+ }
4791
+ @media screen and (prefers-contrast) {
4792
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
4793
+ outline-style: dotted;
4794
+ }
4795
+ }
4796
+
4797
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button--disabled:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
4798
+ color: var(--cds-button-disabled, #c6c6c6);
4799
+ cursor: not-allowed;
4800
+ }
4801
+
4802
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
4803
+ overflow: hidden;
4804
+ padding-right: 1rem;
4805
+ text-overflow: ellipsis;
4806
+ white-space: nowrap;
4807
+ }
4808
+
4809
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label.c4p--datagrid__inline-edit-button-label-with-icon {
4810
+ padding-right: 3rem;
4811
+ }
4812
+
4813
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
4814
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
4815
+ height: 3rem;
4816
+ }
4817
+
4818
+ .c4p--datagrid__inline-edit-button-icon {
4819
+ position: absolute;
4820
+ right: 1rem;
4821
+ }
4822
+
4823
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
4824
+ position: relative;
4825
+ padding: 0;
4826
+ }
4827
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
4828
+ padding-left: 1rem;
4829
+ }
4830
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
4831
+ min-width: auto;
4832
+ padding-right: 1rem;
4833
+ }
4834
+
4835
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
4836
+ padding-bottom: 1rem;
4837
+ padding-left: 1rem;
4838
+ }
4839
+
4840
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
4841
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
4842
+ width: inherit;
4843
+ }
4844
+
4845
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
4846
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
4847
+ width: 100%;
4848
+ height: 3rem;
4849
+ max-height: none;
4850
+ }
4851
+
4852
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
4853
+ width: inherit;
4854
+ }
4855
+
4856
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
4857
+ overflow: hidden;
4858
+ width: 100%;
4859
+ max-width: none;
4860
+ padding-right: 2rem;
4861
+ text-overflow: ellipsis;
4862
+ white-space: nowrap;
4863
+ }
4864
+
4865
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
4866
+ border-top-color: var(--cds-layer-hover);
4867
+ background-color: var(--cds-layer-hover);
4868
+ }
4869
+
4870
+ .c4p--datagrid .c4p--datagrid__grid-container-active::before {
4871
+ position: absolute;
4872
+ z-index: 2;
4873
+ bottom: 0;
4874
+ left: 0;
4875
+ width: 2px;
4876
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
4877
+ background-color: var(--cds-link-inverse, #78a9ff);
4878
+ content: "";
4879
+ }
4880
+
4881
+ .c4p--datagrid .c4p--datagrid__grid-container-active::after {
4882
+ position: absolute;
4883
+ z-index: 2;
4884
+ right: 0;
4885
+ bottom: 0;
4886
+ width: 2px;
4887
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
4888
+ background-color: var(--cds-link-inverse, #78a9ff);
4889
+ content: "";
4890
+ }
4891
+
4892
+ .c4p--datagrid .c4p--datagrid__grid-container-active .cds--data-table-content::before {
4893
+ position: absolute;
4894
+ z-index: 2;
4895
+ top: 0;
4896
+ right: 0;
4897
+ left: 0;
4898
+ width: var(--c4p--datagrid--grid-width);
4899
+ height: 2px;
4900
+ background-color: var(--cds-link-inverse, #78a9ff);
4901
+ }
4902
+
4903
+ .c4p--datagrid .c4p--datagrid__grid-container-active.c4p--datagrid__grid-container-active--without-toolbar::before,
4904
+ .c4p--datagrid .c4p--datagrid__grid-container-active.c4p--datagrid__grid-container-active--without-toolbar::after {
4905
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
4906
+ }
4907
+
4908
+ .c4p--datagrid .c4p--datagrid__grid-container-active .c4p--datagrid__table-container {
4909
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
4910
+ outline-offset: -2px;
4911
+ }
4912
+
4913
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
4914
+ padding-top: 0.125rem;
4915
+ }
4916
+
4917
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
4918
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
4919
+ position: absolute;
4920
+ z-index: 3;
4921
+ top: calc(100% - 0.125rem);
4922
+ width: 100%;
4923
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
4924
+ margin: 0;
4925
+ background-color: var(--cds-layer-01, #f4f4f4);
4926
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
4927
+ outline-offset: calc(-1 * 0.125rem);
4928
+ }
4929
+
4930
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
4931
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
4932
+ }
4933
+
4934
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
4935
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
4936
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
4937
+ z-index: 4;
4938
+ top: calc(100% + 0.75rem + 0.125rem);
4939
+ right: 0.5rem;
4940
+ }
4941
+
4942
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
4943
+ top: calc(100% + 0.25rem + 0.125rem);
4944
+ }
4945
+
4946
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
4947
+ position: absolute;
4948
+ top: 0;
4949
+ left: 0.125rem;
4950
+ width: calc(100% - 0.125rem * 2);
4951
+ height: 0.125rem;
4952
+ background-color: var(--cds-layer-01, #f4f4f4);
4953
+ content: "";
4954
+ }
4955
+
4956
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
4957
+ position: absolute;
4958
+ top: 0.125rem;
4959
+ left: 0.5rem;
4960
+ width: calc(100% - 0.5rem * 2);
4961
+ height: 1px;
4962
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
4963
+ content: "";
4964
+ }
4965
+
4966
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
4967
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
4968
+ }
4969
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
4970
+ background-color: transparent;
4971
+ }
4972
+
4973
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
4974
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
4975
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
4976
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
4977
+ outline-color: var(--cds-support-error, #da1e28);
4978
+ }
4979
+
4980
+ .c4p--datagrid .cds--text-input:focus {
4981
+ background: var(--cds-field-01, #f4f4f4);
4982
+ }
4983
+
4984
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
4985
+ background-color: var(--cds-support-error, #da1e28);
4986
+ }
4987
+
4988
+ /* stylelint-disable max-nesting-depth */
4989
+ .c4p--button-menu {
4990
+ min-width: 160px;
4991
+ }
4992
+ .c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
4993
+ background-color: var(--cds-button-primary, #0f62fe);
4994
+ }
4995
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
4996
+ background-color: var(--cds-button-primary-hover, #0050e6);
4997
+ }
4998
+ .c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
4999
+ background-color: var(--cds-button-tertiary, #0f62fe);
5000
+ }
5001
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
5002
+ background-color: var(--cds-button-tertiary-hover, #0050e6);
5003
+ }
5004
+ .c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
5005
+ background-color: transparent;
5006
+ }
5007
+ .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
5008
+ background-color: var(--cds-layer-hover);
5009
+ }
5010
+ .c4p--button-menu .c4p--button-menu__trigger {
5011
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5012
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
5013
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
5014
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
5015
+ display: flex;
5016
+ width: 100%;
5017
+ align-items: center;
5018
+ justify-content: space-between;
5019
+ padding: 0 1rem;
5020
+ }
5021
+
5022
+ .c4p--button-menu__options.cds--overflow-menu-options::after {
5023
+ content: initial;
5024
+ }
5025
+
5026
+ .c4p--filter-summary {
5027
+ display: flex;
5028
+ width: 100%;
5029
+ /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
5030
+ height: 3rem;
5031
+ align-items: center;
5032
+ padding: 0.5rem;
5033
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
5034
+ background: var(--cds-layer-01, #f4f4f4);
5035
+ }
5036
+
5037
+ .c4p--datagrid__datagridWrap {
5038
+ display: block;
5039
+ width: 100%;
5040
+ }
5041
+ .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
5042
+ display: none;
5043
+ }
5044
+
5045
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
5046
+ display: flex;
5047
+ width: 3rem;
5048
+ height: 3rem;
5049
+ align-items: center;
5050
+ justify-content: center;
5051
+ padding-top: 0;
5052
+ }
5053
+
5054
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
5055
+ padding: 1rem;
5056
+ background-color: var(--cds-layer);
5057
+ }
5058
+
5059
+ .c4p--datagrid__datagridWrap-simple {
5060
+ display: flex;
5061
+ width: 100%;
5062
+ height: 100%;
5063
+ flex-direction: column;
5064
+ /* stylelint-disable-next-line */
5065
+ }
5066
+ .c4p--datagrid__datagridWrap-simple :global .cds--pagination {
5067
+ /* stylelint-disable-next-line declaration-property-value-disallowed-list */
5068
+ overflow-x: unset;
5069
+ }
5070
+
5071
+ .c4p--datagrid .cds--menu-button__trigger:not(.cds--btn--ghost) {
5072
+ min-width: auto;
5073
+ }
5074
+
3224
5075
  .c4p--edit-in-place {
3225
5076
  --c4p--edit-in-place--size: 2rem;
3226
5077
  display: flex;
@@ -6442,43 +8293,6 @@ button.c4p--add-select__global-filter-toggle--open {
6442
8293
  box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
6443
8294
  }
6444
8295
 
6445
- .c4p--button-menu {
6446
- min-width: 160px;
6447
- }
6448
- .c4p--button-menu.c4p--button-menu__wrapper--primary, .c4p--button-menu.c4p--button-menu__wrapper--primary.cds--overflow-menu.cds--overflow-menu--open {
6449
- background-color: var(--cds-button-primary, #0f62fe);
6450
- }
6451
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--primary:hover {
6452
- background-color: var(--cds-button-primary-hover, #0050e6);
6453
- }
6454
- .c4p--button-menu.c4p--button-menu__wrapper--tertiary, .c4p--button-menu.c4p--button-menu__wrapper--tertiary.cds--overflow-menu.cds--overflow-menu--open {
6455
- background-color: var(--cds-button-tertiary, #0f62fe);
6456
- }
6457
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--tertiary:hover {
6458
- background-color: var(--cds-button-tertiary-hover, #0050e6);
6459
- }
6460
- .c4p--button-menu.c4p--button-menu__wrapper--ghost, .c4p--button-menu.c4p--button-menu__wrapper--ghost.cds--overflow-menu.cds--overflow-menu--open {
6461
- background-color: transparent;
6462
- }
6463
- .c4p--button-menu.cds--overflow-menu.c4p--button-menu__wrapper--ghost:hover {
6464
- background-color: var(--cds-layer-hover);
6465
- }
6466
- .c4p--button-menu .c4p--button-menu__trigger {
6467
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6468
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6469
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6470
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6471
- display: flex;
6472
- width: 100%;
6473
- align-items: center;
6474
- justify-content: space-between;
6475
- padding: 0 1rem;
6476
- }
6477
-
6478
- .c4p--button-menu__options.cds--overflow-menu-options::after {
6479
- content: initial;
6480
- }
6481
-
6482
8296
  .c4p--button-set-with-overflow.c4p--button-set-with-overflow {
6483
8297
  display: flex;
6484
8298
  width: 100%;