@carbon/ibm-products 1.27.0 → 1.32.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (167) hide show
  1. package/css/index-full-carbon.css +570 -80
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +942 -23
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +569 -79
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +570 -80
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +0 -3
  18. package/es/components/AddSelect/AddSelectBody.js +20 -3
  19. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  20. package/es/components/AddSelect/AddSelectColumn.js +4 -3
  21. package/es/components/AddSelect/AddSelectFilter.js +4 -3
  22. package/es/components/AddSelect/AddSelectList.js +40 -14
  23. package/es/components/Card/Card.js +16 -6
  24. package/es/components/Card/CardFooter.js +3 -1
  25. package/es/components/Card/CardHeader.js +20 -1
  26. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  27. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  28. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  29. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  30. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  31. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  32. package/es/components/Datagrid/Datagrid/DatagridContent.js +127 -0
  33. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  34. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  35. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +12 -3
  36. package/es/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  37. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -40
  38. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  39. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  40. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  41. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  42. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  43. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +467 -0
  44. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  45. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  46. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  47. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  48. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  49. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  50. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  51. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +66 -0
  52. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  53. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  54. package/es/components/Datagrid/index.js +3 -1
  55. package/es/components/Datagrid/useActionsColumn.js +28 -12
  56. package/es/components/Datagrid/useColumnOrder.js +8 -0
  57. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  58. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  59. package/es/components/Datagrid/useExpandedRow.js +0 -1
  60. package/es/components/Datagrid/useInlineEdit.js +71 -0
  61. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  62. package/es/components/Datagrid/useNestedRows.js +2 -2
  63. package/es/components/Datagrid/useRowSize.js +17 -6
  64. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  65. package/es/components/Datagrid/useSelectRows.js +12 -2
  66. package/es/components/Datagrid/useStickyColumn.js +11 -0
  67. package/es/components/Datagrid/utils/DatagridActions.js +121 -0
  68. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  69. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  70. package/es/components/Datagrid/utils/getArgTypes.js +85 -0
  71. package/es/components/Datagrid/utils/getInlineEditColumns.js +121 -0
  72. package/es/components/Datagrid/utils/makeData.js +17 -1
  73. package/es/components/ImportModal/ImportModal.js +2 -2
  74. package/es/components/InlineEdit/InlineEdit.js +4 -2
  75. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  76. package/es/components/index.js +1 -1
  77. package/es/global/js/hooks/useClickOutside.js +1 -1
  78. package/es/global/js/package-settings.js +3 -3
  79. package/es/global/js/utils/rangeWithCallback.js +13 -0
  80. package/es/global/js/utils/story-helper.js +5 -1
  81. package/es/global/js/utils/uuidv4.spec.js +4 -0
  82. package/lib/components/AddSelect/AddSelect.js +0 -4
  83. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  84. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  85. package/lib/components/AddSelect/AddSelectColumn.js +3 -2
  86. package/lib/components/AddSelect/AddSelectFilter.js +3 -2
  87. package/lib/components/AddSelect/AddSelectList.js +39 -13
  88. package/lib/components/Card/Card.js +16 -6
  89. package/lib/components/Card/CardFooter.js +3 -1
  90. package/lib/components/Card/CardHeader.js +21 -1
  91. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  92. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  93. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  94. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  95. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  96. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  97. package/lib/components/Datagrid/Datagrid/DatagridContent.js +160 -0
  98. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  99. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  100. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -3
  101. package/lib/components/Datagrid/Datagrid/DraggableElement.js +5 -1
  102. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -41
  103. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  104. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  105. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  106. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  107. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  108. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +491 -0
  109. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  110. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  111. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  112. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  113. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  114. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  115. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  116. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +78 -0
  117. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +6 -5
  118. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -2
  119. package/lib/components/Datagrid/index.js +17 -1
  120. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  121. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  122. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  123. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  124. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  125. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  126. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  127. package/lib/components/Datagrid/useNestedRows.js +3 -3
  128. package/lib/components/Datagrid/useRowSize.js +18 -13
  129. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  130. package/lib/components/Datagrid/useSelectRows.js +12 -2
  131. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  132. package/lib/components/Datagrid/utils/DatagridActions.js +139 -0
  133. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  134. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  135. package/lib/components/Datagrid/utils/getArgTypes.js +93 -0
  136. package/lib/components/Datagrid/utils/getInlineEditColumns.js +133 -0
  137. package/lib/components/Datagrid/utils/makeData.js +17 -1
  138. package/lib/components/ImportModal/ImportModal.js +2 -2
  139. package/lib/components/InlineEdit/InlineEdit.js +4 -2
  140. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  141. package/lib/components/index.js +12 -0
  142. package/lib/global/js/hooks/useClickOutside.js +1 -1
  143. package/lib/global/js/package-settings.js +3 -3
  144. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  145. package/lib/global/js/utils/story-helper.js +5 -1
  146. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  147. package/package.json +13 -13
  148. package/scss/components/AddSelect/_add-select.scss +126 -28
  149. package/scss/components/Card/_card.scss +1 -0
  150. package/scss/components/Cascade/_cascade.scss +1 -1
  151. package/scss/components/CreateTearsheet/_create-tearsheet.scss +1 -0
  152. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -1
  153. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  154. package/scss/components/Datagrid/styles/_datagrid.scss +27 -4
  155. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  156. package/scss/components/Datagrid/styles/_index.scss +1 -0
  157. package/scss/components/Datagrid/styles/_useActionsColumn.scss +12 -0
  158. package/scss/components/Datagrid/styles/_useExpandedRow.scss +30 -0
  159. package/scss/components/Datagrid/styles/_useInlineEdit.scss +211 -0
  160. package/scss/components/Datagrid/styles/_useNestedRows.scss +15 -1
  161. package/scss/components/Datagrid/styles/_useStickyColumn.scss +30 -2
  162. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +44 -6
  163. package/scss/components/NotificationsPanel/_notifications-panel.scss +5 -6
  164. package/scss/components/ProductiveCard/_productive-card.scss +39 -0
  165. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  166. package/scss/components/SidePanel/_side-panel.scss +4 -6
  167. package/scss/components/_index-released-only.scss +1 -0
@@ -192,7 +192,7 @@ h1 {
192
192
 
193
193
  h2 {
194
194
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
195
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
195
+ font-weight: var(--cds-productive-heading-05-font-weight, 300);
196
196
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
197
197
  letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
198
198
  }
@@ -11114,8 +11114,7 @@ a.bx--overflow-menu-options__btn::before {
11114
11114
  box-sizing: border-box;
11115
11115
  background-color: var(--cds-ui-01, #f4f4f4);
11116
11116
  color: var(--cds-text-01, #161616);
11117
- transition: transform 240ms;
11118
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11117
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
11119
11118
  }
11120
11119
  .c4p--side-panel__container.c4p--side-panel__container--xs {
11121
11120
  width: 16rem;
@@ -11415,6 +11414,7 @@ a.bx--overflow-menu-options__btn::before {
11415
11414
  background-color: var(--cds-ui-01, #f4f4f4);
11416
11415
  opacity: var(--c4p--side-panel--subtitle-opacity);
11417
11416
  transform: translateY(var(--c4p--side-panel--title-y-position));
11417
+ word-break: break-word;
11418
11418
  }
11419
11419
  .c4p--side-panel__container .c4p--side-panel__label-text {
11420
11420
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -11524,8 +11524,7 @@ a.bx--overflow-menu-options__btn::before {
11524
11524
  padding: 0 var(--cds-spacing-05, 1rem);
11525
11525
  margin-bottom: var(--cds-spacing-03, 0.5rem);
11526
11526
  background-color: var(--cds-ui-01, #f4f4f4);
11527
- transition: transform 150ms;
11528
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11527
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11529
11528
  }
11530
11529
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
11531
11530
  min-width: 2rem;
@@ -11651,8 +11650,7 @@ a.bx--overflow-menu-options__btn::before {
11651
11650
  width: 100%;
11652
11651
  height: 100%;
11653
11652
  background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
11654
- transition: background-color 240ms;
11655
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
11653
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
11656
11654
  }
11657
11655
 
11658
11656
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -13379,7 +13377,7 @@ a.bx--side-nav__link--current::before {
13379
13377
 
13380
13378
  .c4p--http-errors .c4p--http-errors__title {
13381
13379
  font-size: var(--cds-productive-heading-05-font-size, 2rem);
13382
- font-weight: var(--cds-productive-heading-05-font-weight, 400);
13380
+ font-weight: var(--cds-productive-heading-05-font-weight, 300);
13383
13381
  line-height: var(--cds-productive-heading-05-line-height, 1.25);
13384
13382
  letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
13385
13383
  margin-bottom: var(--cds-spacing-04, 0.75rem);
@@ -14164,7 +14162,6 @@ a.bx--side-nav__link--current::before {
14164
14162
  }
14165
14163
 
14166
14164
  .c4p--add-select__selections.bx--structured-list {
14167
- border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14168
14165
  margin-bottom: 0;
14169
14166
  }
14170
14167
  .c4p--add-select__selections-wrapper {
@@ -14172,8 +14169,11 @@ a.bx--side-nav__link--current::before {
14172
14169
  }
14173
14170
  .c4p--add-select__selections-cell-wrapper {
14174
14171
  display: flex;
14172
+ height: 3rem;
14175
14173
  align-items: center;
14176
14174
  justify-content: space-between;
14175
+ padding: 0 var(--cds-spacing-05, 1rem);
14176
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
14177
14177
  }
14178
14178
  .c4p--add-select__selections-cell-title {
14179
14179
  display: block;
@@ -14187,17 +14187,20 @@ a.bx--side-nav__link--current::before {
14187
14187
  display: block;
14188
14188
  color: var(--cds-text-02, #525252);
14189
14189
  }
14190
+ .c4p--add-select__selections-cell {
14191
+ display: flex;
14192
+ flex-direction: column;
14193
+ justify-content: center;
14194
+ }
14190
14195
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
14191
14196
  visibility: visible;
14192
14197
  }
14193
14198
  .c4p--add-select__selections-hidden-hover {
14194
14199
  visibility: hidden;
14195
14200
  }
14196
- .c4p--add-select__selections-row-selected {
14197
- background: #e5e5e5;
14198
- }
14199
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
14200
- visibility: visible;
14201
+ .c4p--add-select__selections-row-selectedbx--structured-list-row {
14202
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
14203
+ background-color: var(--cds-selected-ui, #e0e0e0);
14201
14204
  }
14202
14205
  .c4p--add-select__selections-checkbox {
14203
14206
  display: flex;
@@ -14205,7 +14208,7 @@ a.bx--side-nav__link--current::before {
14205
14208
  }
14206
14209
  .c4p--add-select__selections-checkbox-label-wrapper {
14207
14210
  display: flex;
14208
- margin-left: var(--cds-spacing-03, 0.5rem);
14211
+ margin-left: var(--cds-spacing-05, 1rem);
14209
14212
  }
14210
14213
  .c4p--add-select__selections-checkbox-label-text {
14211
14214
  display: flex;
@@ -14223,6 +14226,13 @@ a.bx--side-nav__link--current::before {
14223
14226
  .c4p--add-select__selections-cell-icon {
14224
14227
  margin-right: var(--cds-spacing-03, 0.5rem);
14225
14228
  }
14229
+ .c4p--add-select__selections-row {
14230
+ border-left: 0.125rem solid transparent;
14231
+ }
14232
+ .c4p--add-select__selections-row-meta-selected {
14233
+ border-left: 0.125rem solid var(--cds-interactive-04, #0f62fe);
14234
+ background-color: var(--cds-hover-row, #e5e5e5);
14235
+ }
14226
14236
 
14227
14237
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
14228
14238
  color: var(--cds-interactive-04, #0f62fe);
@@ -14234,15 +14244,31 @@ a.bx--side-nav__link--current::before {
14234
14244
  fill: currentColor;
14235
14245
  }
14236
14246
 
14247
+ .c4p--add-select bx--structured-list--selection .c4p--add-select__selections-row-selectedbx--structured-list-row:hover:not(bx--structured-list-row--header-row):not(bx--structured-list-row--selected) {
14248
+ border-bottom: 1px solid var(--cds-hover-selected-ui, #cacaca);
14249
+ background-color: var(--cds-hover-selected-ui, #cacaca);
14250
+ }
14251
+
14237
14252
  .c4p--add-select__sub-header {
14238
14253
  display: flex;
14239
14254
  align-items: flex-end;
14240
14255
  justify-content: space-between;
14241
14256
  }
14257
+ .c4p--add-select__sub-header-multi {
14258
+ padding: 0 var(--cds-spacing-05, 1rem);
14259
+ }
14260
+
14261
+ .c4p--add-select bx--structured-list-row {
14262
+ border-bottom: 0;
14263
+ }
14264
+
14265
+ .c4p--add-select bx--structured-list--selection bx--structured-list-row:hover:not(bx--structured-list-row--header-row):not(bx--structured-list-row--selected) {
14266
+ border-bottom: 0;
14267
+ }
14242
14268
 
14243
14269
  .c4p--add-select__sidebar-header {
14244
14270
  display: flex;
14245
- padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
14271
+ padding: var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
14246
14272
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
14247
14273
  }
14248
14274
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -14268,7 +14294,7 @@ a.bx--side-nav__link--current::before {
14268
14294
  }
14269
14295
 
14270
14296
  .c4p--add-select__sidebar-body {
14271
- padding: var(--cds-spacing-05, 1rem);
14297
+ padding: 0 var(--cds-spacing-05, 1rem);
14272
14298
  }
14273
14299
 
14274
14300
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -14301,18 +14327,44 @@ a.bx--side-nav__link--current::before {
14301
14327
  .c4p--add-select__columns {
14302
14328
  display: flex;
14303
14329
  flex-direction: row;
14330
+ flex-grow: 1;
14304
14331
  overflow-x: auto;
14305
14332
  }
14333
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
14334
+ margin-left: var(--cds-spacing-03, 0.5rem);
14335
+ }
14336
+ .c4p--add-select__columns .c4p--add-select__selections-rowbx--structured-list-row {
14337
+ border-left: 0;
14338
+ }
14339
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
14340
+ padding: 0;
14341
+ }
14342
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
14343
+ height: auto;
14344
+ padding: 0 var(--cds-spacing-03, 0.5rem);
14345
+ }
14346
+ .c4p--add-select__columns .c4p--add-select__tag-container {
14347
+ padding: 0 var(--cds-spacing-03, 0.5rem);
14348
+ margin-bottom: 0;
14349
+ }
14350
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
14351
+ padding: 0;
14352
+ }
14353
+ .c4p--add-select__columns .c4p--add-select__selectionsbx--structured-list {
14354
+ border-top: 0;
14355
+ }
14306
14356
 
14307
- .c4p--add-select .c4p--add-select__columns .bx--structured-list-td {
14308
- height: 0;
14309
- padding: 0 !important;
14357
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
14358
+ padding: 0 var(--cds-spacing-05, 1rem);
14359
+ }
14360
+
14361
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
14362
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14310
14363
  }
14311
14364
 
14312
14365
  .c4p--add-select__column {
14313
14366
  overflow: auto;
14314
- max-width: 15rem;
14315
- flex: 1 0 15rem;
14367
+ flex: 0 0 20rem;
14316
14368
  padding: var(--cds-spacing-05, 1rem);
14317
14369
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
14318
14370
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
@@ -14423,8 +14475,7 @@ button.c4p--add-select__global-filter-toggle--open {
14423
14475
  }
14424
14476
 
14425
14477
  .c4p--add-select .c4p--tearsheet__influencer {
14426
- max-width: 29rem;
14427
- flex: 0 0 50%;
14478
+ flex-basis: 22.5rem;
14428
14479
  }
14429
14480
 
14430
14481
  .c4p--add-select .c4p--tearsheet__header-description {
@@ -14436,6 +14487,10 @@ button.c4p--add-select__global-filter-toggle--open {
14436
14487
  flex-direction: column;
14437
14488
  }
14438
14489
 
14490
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.bx--btn-set.c4p--action-set--max .c4p--action-set__action-button {
14491
+ max-width: 11.25rem;
14492
+ }
14493
+
14439
14494
  .c4p--add-select .c4p--add-select__items-label {
14440
14495
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
14441
14496
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -14447,13 +14502,6 @@ button.c4p--add-select__global-filter-toggle--open {
14447
14502
  padding-right: 0;
14448
14503
  }
14449
14504
 
14450
- .c4p--add-select .bx--structured-list-td {
14451
- height: var(--cds-layout-04, 3rem);
14452
- padding-top: 0;
14453
- padding-bottom: 0;
14454
- vertical-align: middle;
14455
- }
14456
-
14457
14505
  .c4p--add-select .bx--radio-button__appearance {
14458
14506
  margin: 0 var(--cds-spacing-05, 1rem) 0 0;
14459
14507
  }
@@ -14477,6 +14525,33 @@ button.c4p--add-select__global-filter-toggle--open {
14477
14525
  padding-left: var(--cds-spacing-03, 0.5rem);
14478
14526
  }
14479
14527
 
14528
+ .c4p--add-select__multi .c4p--empty-state {
14529
+ max-width: 16rem;
14530
+ margin-top: var(--cds-layout-04, 3rem);
14531
+ }
14532
+
14533
+ .c4p--add-select .bx--accordion__arrow {
14534
+ transform: rotate(0deg);
14535
+ }
14536
+
14537
+ .c4p--add-select .bx--accordion__item--active .bx--accordion__arrow {
14538
+ transform: rotate(90deg);
14539
+ }
14540
+
14541
+ .c4p--add-select bx--accordion--start bx--accordion__arrow {
14542
+ margin: 0 0 0 var(--cds-spacing-05, 1rem);
14543
+ }
14544
+
14545
+ .c4p--add-select bx--accordion--start bx--accordion__title {
14546
+ margin: 0 var(--cds-spacing-05, 1rem) 0 var(--cds-spacing-03, 0.5rem);
14547
+ }
14548
+
14549
+ .c4p--add-select bx--accordion__item--active bx--accordion__content {
14550
+ padding-top: 0;
14551
+ padding-bottom: 0;
14552
+ margin-top: var(--cds-spacing-03, 0.5rem);
14553
+ }
14554
+
14480
14555
  @keyframes fade-in {
14481
14556
  0% {
14482
14557
  opacity: 0;
@@ -14718,7 +14793,7 @@ button.c4p--add-select__global-filter-toggle--open {
14718
14793
  --cds-productive-heading-04-line-height: 1.28572;
14719
14794
  --cds-productive-heading-04-letter-spacing: 0;
14720
14795
  --cds-productive-heading-05-font-size: 2rem;
14721
- --cds-productive-heading-05-font-weight: 400;
14796
+ --cds-productive-heading-05-font-weight: 300;
14722
14797
  --cds-productive-heading-05-line-height: 1.25;
14723
14798
  --cds-productive-heading-05-letter-spacing: 0;
14724
14799
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -14746,7 +14821,7 @@ button.c4p--add-select__global-filter-toggle--open {
14746
14821
  --cds-expressive-heading-04-line-height: 1.28572;
14747
14822
  --cds-expressive-heading-04-letter-spacing: 0;
14748
14823
  --cds-expressive-heading-05-font-size: 2rem;
14749
- --cds-expressive-heading-05-font-weight: 400;
14824
+ --cds-expressive-heading-05-font-weight: 300;
14750
14825
  --cds-expressive-heading-05-line-height: 1.25;
14751
14826
  --cds-expressive-heading-05-letter-spacing: 0;
14752
14827
  --cds-expressive-heading-06-font-size: 2rem;
@@ -14780,7 +14855,7 @@ button.c4p--add-select__global-filter-toggle--open {
14780
14855
  --cds-display-03-line-height: 1.19;
14781
14856
  --cds-display-03-letter-spacing: 0;
14782
14857
  --cds-display-04-font-size: 2.625rem;
14783
- --cds-display-04-font-weight: 600;
14858
+ --cds-display-04-font-weight: 300;
14784
14859
  --cds-display-04-line-height: 1.19;
14785
14860
  --cds-display-04-letter-spacing: 0;
14786
14861
  --cds-legal-01-font-size: 0.75rem;
@@ -14824,7 +14899,7 @@ button.c4p--add-select__global-filter-toggle--open {
14824
14899
  --cds-heading-04-line-height: 1.28572;
14825
14900
  --cds-heading-04-letter-spacing: 0;
14826
14901
  --cds-heading-05-font-size: 2rem;
14827
- --cds-heading-05-font-weight: 400;
14902
+ --cds-heading-05-font-weight: 300;
14828
14903
  --cds-heading-05-line-height: 1.25;
14829
14904
  --cds-heading-05-letter-spacing: 0;
14830
14905
  --cds-heading-06-font-size: 2.625rem;
@@ -14844,7 +14919,7 @@ button.c4p--add-select__global-filter-toggle--open {
14844
14919
  --cds-fluid-heading-04-line-height: 1.28572;
14845
14920
  --cds-fluid-heading-04-letter-spacing: 0;
14846
14921
  --cds-fluid-heading-05-font-size: 2rem;
14847
- --cds-fluid-heading-05-font-weight: 400;
14922
+ --cds-fluid-heading-05-font-weight: 300;
14848
14923
  --cds-fluid-heading-05-line-height: 1.25;
14849
14924
  --cds-fluid-heading-05-letter-spacing: 0;
14850
14925
  --cds-fluid-heading-06-font-size: 2rem;
@@ -14878,7 +14953,7 @@ button.c4p--add-select__global-filter-toggle--open {
14878
14953
  --cds-fluid-display-03-line-height: 1.19;
14879
14954
  --cds-fluid-display-03-letter-spacing: 0;
14880
14955
  --cds-fluid-display-04-font-size: 2.625rem;
14881
- --cds-fluid-display-04-font-weight: 600;
14956
+ --cds-fluid-display-04-font-weight: 300;
14882
14957
  --cds-fluid-display-04-line-height: 1.19;
14883
14958
  --cds-fluid-display-04-letter-spacing: 0;
14884
14959
  --cds-spacing-01: 0.125rem;
@@ -14929,8 +15004,7 @@ button.c4p--add-select__global-filter-toggle--open {
14929
15004
  max-height: 38.5rem;
14930
15005
  background-color: var(--cds-ui-background, #ffffff);
14931
15006
  color: var(--cds-text-01, #161616);
14932
- transition: transform 110ms;
14933
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15007
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
14934
15008
  }
14935
15009
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
14936
15010
  position: sticky;
@@ -14995,8 +15069,7 @@ button.c4p--add-select__global-filter-toggle--open {
14995
15069
  background-color: var(--cds-ui-background, #ffffff);
14996
15070
  cursor: pointer;
14997
15071
  text-align: left;
14998
- transition: background-color 240ms;
14999
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15072
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
15000
15073
  }
15001
15074
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
15002
15075
  margin-bottom: var(--cds-spacing-02, 0.25rem);
@@ -15101,8 +15174,7 @@ button.c4p--add-select__global-filter-toggle--open {
15101
15174
  margin: 0 auto;
15102
15175
  background-color: var(--cds-ui-02, #ffffff);
15103
15176
  content: "";
15104
- transition: background-color 240ms;
15105
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
15177
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
15106
15178
  }
15107
15179
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
15108
15180
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -16894,6 +16966,28 @@ button.c4p--add-select__global-filter-toggle--open {
16894
16966
  margin-top: calc(-1 * var(--cds-spacing-02, 0.25rem));
16895
16967
  margin-right: var(--cds-spacing-03, 0.5rem);
16896
16968
  }
16969
+ .c4p--card__productive .c4p--card__actions-header .bx--btn:hover + .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
16970
+ opacity: 0;
16971
+ }
16972
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm {
16973
+ padding-right: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
16974
+ padding-left: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
16975
+ }
16976
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm::before {
16977
+ position: absolute;
16978
+ left: 0;
16979
+ width: 0.05rem;
16980
+ height: var(--cds-spacing-06, 1.5rem);
16981
+ background-color: var(--cds-hover-ui, #e5e5e5);
16982
+ content: "";
16983
+ opacity: 1;
16984
+ }
16985
+ .c4p--card__productive .c4p--card__actions-header-ghost-button.bx--btn--ghost.bx--btn--sm:hover::before {
16986
+ opacity: 0;
16987
+ }
16988
+ .c4p--card__productive .c4p--card__actions-header-ghost-button--only.bx--btn--ghost.bx--btn--sm::before {
16989
+ opacity: 0;
16990
+ }
16897
16991
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
16898
16992
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
16899
16993
  margin-top: 0;
@@ -16913,10 +17007,6 @@ button.c4p--add-select__global-filter-toggle--open {
16913
17007
  padding-right: var(--cds-spacing-05, 1rem);
16914
17008
  }
16915
17009
 
16916
- .c4p--remove-modal .bx--modal-close {
16917
- display: none;
16918
- }
16919
-
16920
17010
  .c4p--remove-modal__body {
16921
17011
  padding-right: 20%;
16922
17012
  margin-bottom: var(--cds-spacing-05, 1rem);
@@ -17855,7 +17945,7 @@ button.c4p--add-select__global-filter-toggle--open {
17855
17945
  --cds-productive-heading-04-line-height: 1.28572;
17856
17946
  --cds-productive-heading-04-letter-spacing: 0;
17857
17947
  --cds-productive-heading-05-font-size: 2rem;
17858
- --cds-productive-heading-05-font-weight: 400;
17948
+ --cds-productive-heading-05-font-weight: 300;
17859
17949
  --cds-productive-heading-05-line-height: 1.25;
17860
17950
  --cds-productive-heading-05-letter-spacing: 0;
17861
17951
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -17883,7 +17973,7 @@ button.c4p--add-select__global-filter-toggle--open {
17883
17973
  --cds-expressive-heading-04-line-height: 1.28572;
17884
17974
  --cds-expressive-heading-04-letter-spacing: 0;
17885
17975
  --cds-expressive-heading-05-font-size: 2rem;
17886
- --cds-expressive-heading-05-font-weight: 400;
17976
+ --cds-expressive-heading-05-font-weight: 300;
17887
17977
  --cds-expressive-heading-05-line-height: 1.25;
17888
17978
  --cds-expressive-heading-05-letter-spacing: 0;
17889
17979
  --cds-expressive-heading-06-font-size: 2rem;
@@ -17917,7 +18007,7 @@ button.c4p--add-select__global-filter-toggle--open {
17917
18007
  --cds-display-03-line-height: 1.19;
17918
18008
  --cds-display-03-letter-spacing: 0;
17919
18009
  --cds-display-04-font-size: 2.625rem;
17920
- --cds-display-04-font-weight: 600;
18010
+ --cds-display-04-font-weight: 300;
17921
18011
  --cds-display-04-line-height: 1.19;
17922
18012
  --cds-display-04-letter-spacing: 0;
17923
18013
  --cds-legal-01-font-size: 0.75rem;
@@ -17961,7 +18051,7 @@ button.c4p--add-select__global-filter-toggle--open {
17961
18051
  --cds-heading-04-line-height: 1.28572;
17962
18052
  --cds-heading-04-letter-spacing: 0;
17963
18053
  --cds-heading-05-font-size: 2rem;
17964
- --cds-heading-05-font-weight: 400;
18054
+ --cds-heading-05-font-weight: 300;
17965
18055
  --cds-heading-05-line-height: 1.25;
17966
18056
  --cds-heading-05-letter-spacing: 0;
17967
18057
  --cds-heading-06-font-size: 2.625rem;
@@ -17981,7 +18071,7 @@ button.c4p--add-select__global-filter-toggle--open {
17981
18071
  --cds-fluid-heading-04-line-height: 1.28572;
17982
18072
  --cds-fluid-heading-04-letter-spacing: 0;
17983
18073
  --cds-fluid-heading-05-font-size: 2rem;
17984
- --cds-fluid-heading-05-font-weight: 400;
18074
+ --cds-fluid-heading-05-font-weight: 300;
17985
18075
  --cds-fluid-heading-05-line-height: 1.25;
17986
18076
  --cds-fluid-heading-05-letter-spacing: 0;
17987
18077
  --cds-fluid-heading-06-font-size: 2rem;
@@ -18015,7 +18105,7 @@ button.c4p--add-select__global-filter-toggle--open {
18015
18105
  --cds-fluid-display-03-line-height: 1.19;
18016
18106
  --cds-fluid-display-03-letter-spacing: 0;
18017
18107
  --cds-fluid-display-04-font-size: 2.625rem;
18018
- --cds-fluid-display-04-font-weight: 600;
18108
+ --cds-fluid-display-04-font-weight: 300;
18019
18109
  --cds-fluid-display-04-line-height: 1.19;
18020
18110
  --cds-fluid-display-04-letter-spacing: 0;
18021
18111
  --cds-spacing-01: 0.125rem;
@@ -18300,7 +18390,7 @@ button.c4p--add-select__global-filter-toggle--open {
18300
18390
  --cds-productive-heading-04-line-height: 1.28572;
18301
18391
  --cds-productive-heading-04-letter-spacing: 0;
18302
18392
  --cds-productive-heading-05-font-size: 2rem;
18303
- --cds-productive-heading-05-font-weight: 400;
18393
+ --cds-productive-heading-05-font-weight: 300;
18304
18394
  --cds-productive-heading-05-line-height: 1.25;
18305
18395
  --cds-productive-heading-05-letter-spacing: 0;
18306
18396
  --cds-productive-heading-06-font-size: 2.625rem;
@@ -18328,7 +18418,7 @@ button.c4p--add-select__global-filter-toggle--open {
18328
18418
  --cds-expressive-heading-04-line-height: 1.28572;
18329
18419
  --cds-expressive-heading-04-letter-spacing: 0;
18330
18420
  --cds-expressive-heading-05-font-size: 2rem;
18331
- --cds-expressive-heading-05-font-weight: 400;
18421
+ --cds-expressive-heading-05-font-weight: 300;
18332
18422
  --cds-expressive-heading-05-line-height: 1.25;
18333
18423
  --cds-expressive-heading-05-letter-spacing: 0;
18334
18424
  --cds-expressive-heading-06-font-size: 2rem;
@@ -18362,7 +18452,7 @@ button.c4p--add-select__global-filter-toggle--open {
18362
18452
  --cds-display-03-line-height: 1.19;
18363
18453
  --cds-display-03-letter-spacing: 0;
18364
18454
  --cds-display-04-font-size: 2.625rem;
18365
- --cds-display-04-font-weight: 600;
18455
+ --cds-display-04-font-weight: 300;
18366
18456
  --cds-display-04-line-height: 1.19;
18367
18457
  --cds-display-04-letter-spacing: 0;
18368
18458
  --cds-legal-01-font-size: 0.75rem;
@@ -18406,7 +18496,7 @@ button.c4p--add-select__global-filter-toggle--open {
18406
18496
  --cds-heading-04-line-height: 1.28572;
18407
18497
  --cds-heading-04-letter-spacing: 0;
18408
18498
  --cds-heading-05-font-size: 2rem;
18409
- --cds-heading-05-font-weight: 400;
18499
+ --cds-heading-05-font-weight: 300;
18410
18500
  --cds-heading-05-line-height: 1.25;
18411
18501
  --cds-heading-05-letter-spacing: 0;
18412
18502
  --cds-heading-06-font-size: 2.625rem;
@@ -18426,7 +18516,7 @@ button.c4p--add-select__global-filter-toggle--open {
18426
18516
  --cds-fluid-heading-04-line-height: 1.28572;
18427
18517
  --cds-fluid-heading-04-letter-spacing: 0;
18428
18518
  --cds-fluid-heading-05-font-size: 2rem;
18429
- --cds-fluid-heading-05-font-weight: 400;
18519
+ --cds-fluid-heading-05-font-weight: 300;
18430
18520
  --cds-fluid-heading-05-line-height: 1.25;
18431
18521
  --cds-fluid-heading-05-letter-spacing: 0;
18432
18522
  --cds-fluid-heading-06-font-size: 2rem;
@@ -18460,7 +18550,7 @@ button.c4p--add-select__global-filter-toggle--open {
18460
18550
  --cds-fluid-display-03-line-height: 1.19;
18461
18551
  --cds-fluid-display-03-letter-spacing: 0;
18462
18552
  --cds-fluid-display-04-font-size: 2.625rem;
18463
- --cds-fluid-display-04-font-weight: 600;
18553
+ --cds-fluid-display-04-font-weight: 300;
18464
18554
  --cds-fluid-display-04-line-height: 1.19;
18465
18555
  --cds-fluid-display-04-letter-spacing: 0;
18466
18556
  --cds-spacing-01: 0.125rem;
@@ -19224,6 +19314,20 @@ button.c4p--add-select__global-filter-toggle--open {
19224
19314
  .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
19225
19315
  outline: 2px solid var(--cds-inverse-link, #78a9ff);
19226
19316
  }
19317
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight,
19318
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element,
19319
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__active-cell--highlight:focus {
19320
+ /* stylelint-disable-next-line carbon/theme-token-use */
19321
+ border-color: #82cfff;
19322
+ }
19323
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__selection-area--element::before {
19324
+ /* stylelint-disable-next-line carbon/theme-token-use */
19325
+ background-color: #00539a;
19326
+ }
19327
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__dark .c4p--data-spreadsheet__cell-editor.c4p--data-spreadsheet__cell-editor--active {
19328
+ /* stylelint-disable-next-line carbon/theme-token-use */
19329
+ outline-color: #82cfff;
19330
+ }
19227
19331
  .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
19228
19332
  position: relative;
19229
19333
  }
@@ -19353,7 +19457,7 @@ button.c4p--add-select__global-filter-toggle--open {
19353
19457
  padding-left: calc(var(--cds-spacing-03, 0.5rem) - var(--cds-spacing-01, 0.125rem));
19354
19458
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19355
19459
  background-color: var(--cds-field-01, #f4f4f4);
19356
- color: var(--cds-text-01, #161616);
19460
+ color: var(--cds-text-02, #525252);
19357
19461
  text-align: left;
19358
19462
  }
19359
19463
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-row-index=header], .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-column-index=header] {
@@ -19460,11 +19564,19 @@ button.c4p--add-select__global-filter-toggle--open {
19460
19564
  align-items: center;
19461
19565
  color: var(--cds-text-01, #161616);
19462
19566
  }
19567
+ .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 {
19568
+ position: sticky;
19569
+ z-index: 1;
19570
+ left: 0;
19571
+ }
19463
19572
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
19464
19573
  align-items: center;
19465
19574
  padding-top: 0;
19466
19575
  padding-bottom: 0;
19467
19576
  }
19577
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell.c4p--datagrid__cell--spacer {
19578
+ padding: 0;
19579
+ }
19468
19580
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox,
19469
19581
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox {
19470
19582
  /* stylelint-disable-next-line carbon/layout-token-use */
@@ -19476,6 +19588,11 @@ button.c4p--add-select__global-filter-toggle--open {
19476
19588
  align-items: center;
19477
19589
  padding-top: 0;
19478
19590
  }
19591
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
19592
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.bx--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
19593
+ position: sticky;
19594
+ left: 0;
19595
+ }
19479
19596
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.bx--table-column-checkbox {
19480
19597
  display: flex;
19481
19598
  height: 100%;
@@ -19628,10 +19745,6 @@ button.c4p--add-select__global-filter-toggle--open {
19628
19745
  flex: 1 1 auto;
19629
19746
  }
19630
19747
 
19631
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
19632
- border-bottom: none;
19633
- }
19634
-
19635
19748
  .c4p--datagrid__resizer {
19636
19749
  position: absolute;
19637
19750
  z-index: 1;
@@ -19671,6 +19784,12 @@ button.c4p--add-select__global-filter-toggle--open {
19671
19784
  .c4p--datagrid__head-hidden-select-all {
19672
19785
  padding-right: var(--cds-spacing-08, 2.5rem);
19673
19786
  }
19787
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
19788
+ position: sticky;
19789
+ z-index: 1;
19790
+ left: 0;
19791
+ background-color: var(--cds-ui-03, #e0e0e0);
19792
+ }
19674
19793
 
19675
19794
  .c4p--datagrid__simple-body {
19676
19795
  position: relative;
@@ -19841,10 +19960,19 @@ button.c4p--add-select__global-filter-toggle--open {
19841
19960
  margin: 0;
19842
19961
  }
19843
19962
 
19963
+ .c4p--datagrid .c4p--button-menu {
19964
+ height: var(--cds-spacing-09, 3rem);
19965
+ }
19966
+
19967
+ .c4p--datagrid .c4p--datagrid__table-grid-active {
19968
+ border: 2px solid var(--cds-inverse-link, #78a9ff);
19969
+ outline: 0;
19970
+ }
19971
+
19844
19972
  /*
19845
19973
  * Licensed Materials - Property of IBM
19846
19974
  * 5724-Q36
19847
- * (c) Copyright IBM Corp. 2020 - 2021
19975
+ * (c) Copyright IBM Corp. 2020 - 2022
19848
19976
  * US Government Users Restricted Rights - Use, duplication or disclosure
19849
19977
  * restricted by GSA ADP Schedule Contract with IBM Corp.
19850
19978
  */
@@ -19855,6 +19983,18 @@ button.c4p--add-select__global-filter-toggle--open {
19855
19983
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
19856
19984
  }
19857
19985
 
19986
+ .c4p--datagrid .c4p--datagrid__expander-icon {
19987
+ transition: transform 70ms cubic-bezier(0, 0, 0.38, 0.9);
19988
+ }
19989
+
19990
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
19991
+ transform: rotate(90deg);
19992
+ }
19993
+
19994
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
19995
+ border-bottom: none;
19996
+ }
19997
+
19858
19998
  /*
19859
19999
  * Licensed Materials - Property of IBM
19860
20000
  * 5724-Q36
@@ -19983,14 +20123,36 @@ button.c4p--add-select__global-filter-toggle--open {
19983
20123
  /* stylelint-disable-next-line declaration-no-important */
19984
20124
  position: sticky !important;
19985
20125
  right: 0;
19986
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
20126
+ display: flex;
20127
+ align-items: center;
20128
+ border-left: 1px solid var(--cds-ui-03, #e0e0e0);
19987
20129
  }
19988
20130
 
19989
20131
  .c4p--datagrid__right-sticky-column-header {
19990
20132
  /* stylelint-disable-next-line declaration-no-important */
19991
20133
  position: sticky !important;
19992
20134
  right: 0;
19993
- box-shadow: -2px 1px 3px var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
20135
+ }
20136
+
20137
+ .c4p--datagrid__left-sticky-column-cell {
20138
+ /* stylelint-disable-next-line declaration-no-important */
20139
+ position: sticky !important;
20140
+ left: 0;
20141
+ display: flex;
20142
+ align-items: center;
20143
+ border-right: 1px solid var(--cds-ui-03, #e0e0e0);
20144
+ }
20145
+
20146
+ .c4p--datagrid__left-sticky-column-header {
20147
+ /* stylelint-disable-next-line declaration-no-important */
20148
+ position: sticky !important;
20149
+ z-index: 1;
20150
+ left: 0;
20151
+ }
20152
+
20153
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
20154
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
20155
+ left: var(--cds-spacing-08, 2.5rem);
19994
20156
  }
19995
20157
 
19996
20158
  .c4p--datagrid__sticky-noShadow {
@@ -20006,6 +20168,12 @@ button.c4p--add-select__global-filter-toggle--open {
20006
20168
  right: 6px !important;
20007
20169
  }
20008
20170
 
20171
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
20172
+ position: sticky;
20173
+ z-index: 1;
20174
+ left: 0;
20175
+ }
20176
+
20009
20177
  /*
20010
20178
  * Licensed Materials - Property of IBM
20011
20179
  * 5724-Q36
@@ -20028,6 +20196,18 @@ button.c4p--add-select__global-filter-toggle--open {
20028
20196
  margin-bottom: var(--cds-spacing-03, 0.5rem);
20029
20197
  }
20030
20198
 
20199
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
20200
+ cursor: not-allowed;
20201
+ }
20202
+
20203
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
20204
+ pointer-events: none;
20205
+ }
20206
+
20207
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
20208
+ fill: var(--cds-disabled-03, #8d8d8d);
20209
+ }
20210
+
20031
20211
  /*
20032
20212
  * Licensed Materials - Property of IBM
20033
20213
  * 5724-Q36
@@ -20039,21 +20219,30 @@ button.c4p--add-select__global-filter-toggle--open {
20039
20219
  position: inherit;
20040
20220
  display: flex;
20041
20221
  flex-flow: column;
20042
- /* stylelint-disable-next-line declaration-no-important */
20043
- padding-top: 0 !important;
20222
+ padding: 0;
20223
+ margin: 0;
20044
20224
  }
20045
20225
 
20046
- .c4p--datagrid__customize-columns-checkbox {
20226
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
20227
+ margin-bottom: 0;
20228
+ }
20229
+
20230
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
20047
20231
  display: flex;
20048
20232
  justify-content: center;
20049
- /* stylelint-disable-next-line declaration-no-important */
20050
- margin-bottom: 0 !important;
20051
20233
  }
20052
20234
 
20053
20235
  .c4p--datagrid__customize-columns-modal--actions {
20054
20236
  display: flex;
20237
+ height: var(--cds-spacing-09, 3rem);
20055
20238
  flex-flow: row;
20056
- margin-bottom: var(--cds-spacing-06, 1.5rem);
20239
+ background-color: var(--cds-field-02, #ffffff);
20240
+ }
20241
+
20242
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
20243
+ height: var(--cds-spacing-09, 3rem);
20244
+ padding-left: var(--cds-spacing-08, 2.5rem);
20245
+ border-bottom: none;
20057
20246
  }
20058
20247
 
20059
20248
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -20061,6 +20250,7 @@ button.c4p--add-select__global-filter-toggle--open {
20061
20250
  }
20062
20251
 
20063
20252
  .c4p--datagrid__customize-columns-instructions {
20253
+ padding-left: var(--cds-spacing-05, 1rem);
20064
20254
  margin-bottom: var(--cds-spacing-06, 1.5rem);
20065
20255
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
20066
20256
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -20074,6 +20264,34 @@ button.c4p--add-select__global-filter-toggle--open {
20074
20264
  overflow: auto;
20075
20265
  }
20076
20266
 
20267
+ .c4p--datagrid__customize-columns-select-all {
20268
+ display: flex;
20269
+ height: var(--cds-spacing-09, 3rem);
20270
+ padding-left: var(--cds-spacing-08, 2.5rem);
20271
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20272
+ background-color: var(--cds-layer, #f4f4f4);
20273
+ }
20274
+
20275
+ .c4p--datagrid__customize-columns-select-all:hover {
20276
+ background-color: var(--cds-layer-hover, #e5e5e5);
20277
+ }
20278
+
20279
+ .c4p--datagrid__customize-columns-select-all-selected {
20280
+ display: flex;
20281
+ height: var(--cds-spacing-09, 3rem);
20282
+ padding-left: var(--cds-spacing-08, 2.5rem);
20283
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20284
+ background-color: var(--cds-layer-selected, #e0e0e0);
20285
+ }
20286
+
20287
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
20288
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20289
+ }
20290
+
20291
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .bx--modal-content {
20292
+ margin-bottom: 0;
20293
+ }
20294
+
20077
20295
  /*
20078
20296
  * Licensed Materials - Property of IBM
20079
20297
  * 5724-Q36
@@ -20127,6 +20345,32 @@ th.c4p--datagrid__select-all-toggle-on.button {
20127
20345
  * US Government Users Restricted Rights - Use, duplication or disclosure
20128
20346
  * restricted by GSA ADP Schedule Contract with IBM Corp.
20129
20347
  */
20348
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
20349
+ position: relative;
20350
+ padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-09, 3rem);
20351
+ }
20352
+
20353
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
20354
+ position: absolute;
20355
+ /* stylelint-disable-next-line carbon/layout-token-use */
20356
+ top: -1px;
20357
+ right: 0;
20358
+ width: calc(100% - var(--cds-spacing-09, 3rem));
20359
+ height: 1px;
20360
+ background-color: var(--cds-ui-03, #e0e0e0);
20361
+ content: "";
20362
+ }
20363
+
20364
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
20365
+ position: absolute;
20366
+ bottom: 0;
20367
+ left: 0;
20368
+ width: 100%;
20369
+ height: 1px;
20370
+ background-color: var(--cds-ui-03, #e0e0e0);
20371
+ content: "";
20372
+ }
20373
+
20130
20374
  /*
20131
20375
  * Licensed Materials - Property of IBM
20132
20376
  * 5724-Q36
@@ -20151,14 +20395,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20151
20395
 
20152
20396
  .c4p--datagrid__draggable-handleHolder {
20153
20397
  display: flex;
20154
- height: var(--cds-spacing-07, 2rem);
20155
- padding-left: var(--cds-spacing-02, 0.25rem);
20156
- margin-bottom: var(--cds-spacing-03, 0.5rem);
20157
- background: var(--cds-ui-02, #ffffff);
20398
+ height: var(--cds-spacing-09, 3rem);
20399
+ padding-left: var(--cds-spacing-05, 1rem);
20400
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20401
+ background-color: var(--cds-layer, #f4f4f4);
20158
20402
  }
20159
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
20403
+
20404
+ .c4p--datagrid__draggable-handleHolder:hover {
20405
+ background-color: var(--cds-layer-hover, #e5e5e5);
20406
+ }
20407
+
20408
+ .c4p--datagrid__draggable-handleHolder-selected {
20409
+ display: flex;
20410
+ height: var(--cds-spacing-09, 3rem);
20411
+ padding-left: var(--cds-spacing-05, 1rem);
20412
+ border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
20413
+ background-color: var(--cds-layer-selected, #e0e0e0);
20414
+ }
20415
+
20416
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
20417
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20418
+ }
20419
+
20420
+ .c4p--datagrid__draggable-handleHolder-isOver {
20160
20421
  border: 2px dashed var(--cds-focus, #0f62fe);
20161
- background-color: var(--cds-highlight, #d0e2ff);
20422
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20162
20423
  }
20163
20424
 
20164
20425
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -20166,7 +20427,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20166
20427
  width: 100%;
20167
20428
  }
20168
20429
 
20169
- .c4p--datagrid__draggable-handleHolder--grabbed {
20430
+ .c4p--datagrid__draggable-handleHolder-grabbed {
20170
20431
  background-color: var(--cds-highlight, #d0e2ff);
20171
20432
  color: var(--cds-text-01, #161616);
20172
20433
  }
@@ -20183,6 +20444,235 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
20183
20444
  white-space: nowrap;
20184
20445
  }
20185
20446
 
20447
+ /*
20448
+ * Licensed Materials - Property of IBM
20449
+ * 5724-Q36
20450
+ * (c) Copyright IBM Corp. 2021
20451
+ * US Government Users Restricted Rights - Use, duplication or disclosure
20452
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
20453
+ */
20454
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--text-input,
20455
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number input[type=number],
20456
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs,
20457
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .bx--date-picker__input {
20458
+ height: 1.5rem;
20459
+ }
20460
+
20461
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
20462
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
20463
+ height: 1.25rem;
20464
+ }
20465
+
20466
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
20467
+ max-height: none;
20468
+ }
20469
+
20470
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--text-input,
20471
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number input[type=number],
20472
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm,
20473
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .bx--date-picker__input {
20474
+ height: 2rem;
20475
+ }
20476
+
20477
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
20478
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
20479
+ height: 1.75rem;
20480
+ }
20481
+
20482
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
20483
+ max-height: none;
20484
+ }
20485
+
20486
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--text-input,
20487
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number input[type=number],
20488
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md,
20489
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .bx--date-picker__input {
20490
+ height: 2.5rem;
20491
+ }
20492
+
20493
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
20494
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
20495
+ height: 2.25rem;
20496
+ }
20497
+
20498
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
20499
+ max-height: none;
20500
+ }
20501
+
20502
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--text-input,
20503
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number input[type=number],
20504
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg,
20505
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .bx--date-picker__input {
20506
+ height: 3rem;
20507
+ }
20508
+
20509
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
20510
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
20511
+ height: 2.75rem;
20512
+ }
20513
+
20514
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
20515
+ max-height: none;
20516
+ }
20517
+
20518
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--text-input,
20519
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number input[type=number],
20520
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl,
20521
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .bx--date-picker__input {
20522
+ height: 4rem;
20523
+ }
20524
+
20525
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
20526
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
20527
+ height: 3.75rem;
20528
+ }
20529
+
20530
+ .c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
20531
+ max-height: none;
20532
+ }
20533
+
20534
+ .c4p--datagrid__inline-edit-cell {
20535
+ display: flex;
20536
+ height: 100%;
20537
+ align-items: center;
20538
+ }
20539
+
20540
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
20541
+ display: flex;
20542
+ align-items: center;
20543
+ }
20544
+
20545
+ .c4p--datagrid__inline-edit--outer-cell-button {
20546
+ width: 100%;
20547
+ height: calc(100% + 2px);
20548
+ }
20549
+
20550
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
20551
+ position: relative;
20552
+ display: flex;
20553
+ width: 100%;
20554
+ height: 100%;
20555
+ align-items: center;
20556
+ justify-content: space-between;
20557
+ padding-left: var(--cds-spacing-05, 1rem);
20558
+ color: var(--cds-text-02, #525252);
20559
+ cursor: pointer;
20560
+ outline: 0;
20561
+ }
20562
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
20563
+ padding-right: var(--cds-spacing-05, 1rem);
20564
+ }
20565
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
20566
+ padding-left: 0;
20567
+ }
20568
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
20569
+ height: var(--cds-spacing-05, 1rem);
20570
+ fill: var(--cds-icon-02, #525252);
20571
+ }
20572
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
20573
+ font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
20574
+ }
20575
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
20576
+ justify-content: flex-start;
20577
+ }
20578
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
20579
+ /* stylelint-disable-next-line */
20580
+ }
20581
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) .c4p--datagrid__inline-edit-button-icon {
20582
+ display: none;
20583
+ }
20584
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols):hover .c4p--datagrid__inline-edit-button-icon {
20585
+ display: block;
20586
+ }
20587
+
20588
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
20589
+ background-color: var(--cds-hover-selected-ui, #cacaca);
20590
+ color: var(--cds-text-01, #161616);
20591
+ }
20592
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
20593
+ fill: var(--cds-icon-01, #161616);
20594
+ }
20595
+
20596
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
20597
+ background-color: var(--cds-active-ui, #c6c6c6);
20598
+ color: var(--cds-text-01, #161616);
20599
+ cursor: text;
20600
+ }
20601
+
20602
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
20603
+ /* stylelint-disable-next-line carbon/theme-token-use */
20604
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
20605
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
20606
+ }
20607
+ @media screen and (prefers-contrast) {
20608
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
20609
+ outline-style: dotted;
20610
+ }
20611
+ }
20612
+
20613
+ .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) {
20614
+ color: var(--cds-disabled-02, #c6c6c6);
20615
+ cursor: not-allowed;
20616
+ }
20617
+
20618
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
20619
+ overflow: hidden;
20620
+ padding-right: var(--cds-spacing-05, 1rem);
20621
+ text-overflow: ellipsis;
20622
+ white-space: nowrap;
20623
+ }
20624
+
20625
+ .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 {
20626
+ padding-right: var(--cds-spacing-09, 3rem);
20627
+ }
20628
+
20629
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--text-input,
20630
+ .c4p--datagrid__inline-edit--outer-cell-button .bx--number input[type=number] {
20631
+ height: var(--cds-spacing-09, 3rem);
20632
+ }
20633
+
20634
+ .c4p--datagrid__inline-edit-button-icon {
20635
+ position: absolute;
20636
+ right: var(--cds-spacing-05, 1rem);
20637
+ }
20638
+
20639
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit {
20640
+ position: relative;
20641
+ padding: 0;
20642
+ }
20643
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
20644
+ padding-left: var(--cds-spacing-05, 1rem);
20645
+ }
20646
+ .c4p--datagrid__table-with-inline-edit.bx--data-table .c4p--datagrid__cell-inline-edit .bx--number input[type=number] {
20647
+ min-width: auto;
20648
+ padding-right: var(--cds-spacing-05, 1rem);
20649
+ }
20650
+
20651
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
20652
+ padding-bottom: var(--cds-spacing-05, 1rem);
20653
+ padding-left: var(--cds-spacing-05, 1rem);
20654
+ }
20655
+
20656
+ .c4p--datagrid__inline-edit--select.bx--dropdown,
20657
+ .c4p--datagrid__inline-edit--date .bx--date-picker__input {
20658
+ width: inherit;
20659
+ height: var(--cds-spacing-09, 3rem);
20660
+ max-height: none;
20661
+ }
20662
+
20663
+ .c4p--datagrid__inline-edit--date .bx--date-picker-container {
20664
+ width: inherit;
20665
+ }
20666
+
20667
+ .c4p--datagrid__inline-edit--date.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
20668
+ overflow: hidden;
20669
+ width: 100%;
20670
+ max-width: none;
20671
+ padding-right: var(--cds-spacing-07, 2rem);
20672
+ text-overflow: ellipsis;
20673
+ white-space: nowrap;
20674
+ }
20675
+
20186
20676
  .c4p--datagrid__datagridWrap {
20187
20677
  display: block;
20188
20678
  width: 100%;