@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (229) hide show
  1. package/css/index-full-carbon.css +891 -178
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +779 -19
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +659 -77
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +683 -91
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/AddSelect/AddSelect.js +0 -3
  19. package/es/components/AddSelect/AddSelectBody.js +20 -3
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  21. package/es/components/AddSelect/AddSelectColumn.js +5 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectList.js +61 -27
  24. package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
  25. package/es/components/AddSelect/AddSelectSort.js +1 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  27. package/es/components/Card/Card.js +16 -6
  28. package/es/components/Card/CardFooter.js +3 -1
  29. package/es/components/Card/CardHeader.js +20 -1
  30. package/es/components/ComboButton/ComboButton.js +1 -1
  31. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  32. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  33. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  34. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  35. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  36. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  37. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  38. package/es/components/Datagrid/Datagrid/DatagridContent.js +149 -0
  39. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  40. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  41. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  43. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  44. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  45. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  46. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  50. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  51. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  61. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  62. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  63. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  64. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  70. package/es/components/Datagrid/index.js +3 -1
  71. package/es/components/Datagrid/useActionsColumn.js +28 -12
  72. package/es/components/Datagrid/useColumnOrder.js +8 -0
  73. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  74. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  75. package/es/components/Datagrid/useExpandedRow.js +0 -1
  76. package/es/components/Datagrid/useInlineEdit.js +71 -0
  77. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  78. package/es/components/Datagrid/useNestedRows.js +2 -2
  79. package/es/components/Datagrid/useRowExpander.js +1 -1
  80. package/es/components/Datagrid/useRowSize.js +17 -6
  81. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  82. package/es/components/Datagrid/useSelectRows.js +12 -2
  83. package/es/components/Datagrid/useSortableColumns.js +1 -1
  84. package/es/components/Datagrid/useStickyColumn.js +11 -0
  85. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  86. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  87. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  88. package/es/components/Datagrid/utils/getArgTypes.js +85 -0
  89. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  90. package/es/components/Datagrid/utils/makeData.js +46 -1
  91. package/es/components/ExportModal/ExportModal.js +1 -1
  92. package/es/components/ImportModal/ImportModal.js +3 -3
  93. package/es/components/InlineEdit/InlineEdit.js +11 -9
  94. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  95. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  96. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  97. package/es/components/OptionsTile/OptionsTile.js +1 -1
  98. package/es/components/PageHeader/PageHeader.js +1 -1
  99. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  100. package/es/components/Saving/Saving.js +1 -1
  101. package/es/components/SidePanel/SidePanel.js +1 -1
  102. package/es/components/StatusIcon/StatusIcon.js +1 -1
  103. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  104. package/es/components/WebTerminal/WebTerminal.js +1 -1
  105. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  106. package/es/components/index.js +1 -1
  107. package/es/global/js/hooks/useClickOutside.js +1 -1
  108. package/es/global/js/package-settings.js +3 -3
  109. package/es/global/js/utils/rangeWithCallback.js +13 -0
  110. package/es/global/js/utils/story-helper.js +5 -1
  111. package/es/global/js/utils/uuidv4.spec.js +4 -0
  112. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  113. package/lib/components/AddSelect/AddSelect.js +0 -4
  114. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  115. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  116. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  117. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  118. package/lib/components/AddSelect/AddSelectList.js +62 -28
  119. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  120. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  121. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  122. package/lib/components/Card/Card.js +16 -6
  123. package/lib/components/Card/CardFooter.js +3 -1
  124. package/lib/components/Card/CardHeader.js +21 -1
  125. package/lib/components/ComboButton/ComboButton.js +3 -3
  126. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  127. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  128. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  129. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  130. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  131. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  132. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  133. package/lib/components/Datagrid/Datagrid/DatagridContent.js +183 -0
  134. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  135. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  136. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  137. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  138. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  139. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  140. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  141. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +2 -2
  142. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  143. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  144. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  145. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  146. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  147. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  148. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  149. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  150. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  151. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  152. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  153. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  154. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  155. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  156. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  157. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  158. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  159. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  160. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  161. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  162. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  163. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  164. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  165. package/lib/components/Datagrid/index.js +17 -1
  166. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  167. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  168. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  169. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  170. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  171. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  172. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  173. package/lib/components/Datagrid/useNestedRows.js +3 -3
  174. package/lib/components/Datagrid/useRowExpander.js +3 -3
  175. package/lib/components/Datagrid/useRowSize.js +18 -13
  176. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  177. package/lib/components/Datagrid/useSelectRows.js +12 -2
  178. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  179. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  180. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  181. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  182. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  183. package/lib/components/Datagrid/utils/getArgTypes.js +93 -0
  184. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  185. package/lib/components/Datagrid/utils/makeData.js +47 -1
  186. package/lib/components/ExportModal/ExportModal.js +3 -3
  187. package/lib/components/ImportModal/ImportModal.js +4 -4
  188. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  189. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  190. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  191. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  192. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  193. package/lib/components/PageHeader/PageHeader.js +2 -2
  194. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  195. package/lib/components/Saving/Saving.js +5 -5
  196. package/lib/components/SidePanel/SidePanel.js +3 -3
  197. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  198. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  199. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  200. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  201. package/lib/components/index.js +12 -0
  202. package/lib/global/js/hooks/useClickOutside.js +1 -1
  203. package/lib/global/js/package-settings.js +3 -3
  204. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  205. package/lib/global/js/utils/story-helper.js +5 -1
  206. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  207. package/package.json +15 -15
  208. package/scss/components/AddSelect/_add-select.scss +127 -28
  209. package/scss/components/Card/_card.scss +1 -0
  210. package/scss/components/Cascade/_cascade.scss +1 -1
  211. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  212. package/scss/components/Datagrid/_datagrid.scss +7 -0
  213. package/scss/components/Datagrid/_storybook-styles.scss +8 -5
  214. package/scss/components/Datagrid/styles/_datagrid.scss +31 -15
  215. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  216. package/scss/components/Datagrid/styles/_index.scss +1 -0
  217. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  218. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  219. package/scss/components/Datagrid/styles/_useInlineEdit.scss +404 -0
  220. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  221. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  222. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +45 -6
  223. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  224. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  225. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  226. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  227. package/scss/components/SidePanel/_side-panel.scss +3 -6
  228. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  229. package/scss/components/_index-released-only.scss +1 -0
@@ -2533,7 +2533,7 @@
2533
2533
  @media (prefers-reduced-motion: no-preference) {
2534
2534
  .c4p--cascade__element,
2535
2535
  .c4p--cascade__col {
2536
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2536
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2537
2537
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2538
2538
  animation-fill-mode: forwards;
2539
2539
  opacity: 0;
@@ -2965,8 +2965,7 @@
2965
2965
  box-sizing: border-box;
2966
2966
  background-color: var(--cds-layer-01, #f4f4f4);
2967
2967
  color: var(--cds-text-primary, #161616);
2968
- transition: transform 240ms;
2969
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2968
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2970
2969
  }
2971
2970
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2972
2971
  width: 16rem;
@@ -3382,8 +3381,7 @@
3382
3381
  padding: 0 1rem;
3383
3382
  margin-bottom: 0.5rem;
3384
3383
  background-color: var(--cds-layer-01, #f4f4f4);
3385
- transition: transform 150ms;
3386
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3384
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3387
3385
  }
3388
3386
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3389
3387
  min-width: 2rem;
@@ -3514,8 +3512,7 @@
3514
3512
  width: 100%;
3515
3513
  height: 100%;
3516
3514
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3517
- transition: background-color 240ms;
3518
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3515
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3519
3516
  }
3520
3517
 
3521
3518
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3662,7 +3659,7 @@
3662
3659
  /* stylelint-disable-next-line function-no-unknown */
3663
3660
  z-index: 9000;
3664
3661
  align-items: flex-end;
3665
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3662
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3666
3663
  }
3667
3664
  @media (prefers-reduced-motion: reduce) {
3668
3665
  .c4p--tearsheet.is-visible {
@@ -4444,7 +4441,6 @@
4444
4441
 
4445
4442
  /* stylelint-disable max-nesting-depth */
4446
4443
  .c4p--add-select__selections.cds--structured-list {
4447
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4448
4444
  margin-bottom: 0;
4449
4445
  }
4450
4446
  .c4p--add-select__selections-wrapper {
@@ -4452,8 +4448,11 @@
4452
4448
  }
4453
4449
  .c4p--add-select__selections-cell-wrapper {
4454
4450
  display: flex;
4451
+ height: 3rem;
4455
4452
  align-items: center;
4456
4453
  justify-content: space-between;
4454
+ padding: 0 1rem;
4455
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4457
4456
  }
4458
4457
  .c4p--add-select__selections-cell-title {
4459
4458
  display: block;
@@ -4467,17 +4466,20 @@
4467
4466
  display: block;
4468
4467
  color: var(--cds-text-secondary, #525252);
4469
4468
  }
4469
+ .c4p--add-select__selections-cell {
4470
+ display: flex;
4471
+ flex-direction: column;
4472
+ justify-content: center;
4473
+ }
4470
4474
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4471
4475
  visibility: visible;
4472
4476
  }
4473
4477
  .c4p--add-select__selections-hidden-hover {
4474
4478
  visibility: hidden;
4475
4479
  }
4476
- .c4p--add-select__selections-row-selected {
4477
- background: #e5e5e5;
4478
- }
4479
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
4480
- visibility: visible;
4480
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
4481
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4482
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4481
4483
  }
4482
4484
  .c4p--add-select__selections-checkbox {
4483
4485
  display: flex;
@@ -4485,7 +4487,7 @@
4485
4487
  }
4486
4488
  .c4p--add-select__selections-checkbox-label-wrapper {
4487
4489
  display: flex;
4488
- margin-left: 0.5rem;
4490
+ margin-left: 1rem;
4489
4491
  }
4490
4492
  .c4p--add-select__selections-checkbox-label-text {
4491
4493
  display: flex;
@@ -4503,6 +4505,13 @@
4503
4505
  .c4p--add-select__selections-cell-icon {
4504
4506
  margin-right: 0.5rem;
4505
4507
  }
4508
+ .c4p--add-select__selections-row {
4509
+ border-left: 0.125rem solid transparent;
4510
+ }
4511
+ .c4p--add-select__selections-row-meta-selected {
4512
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4513
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4514
+ }
4506
4515
 
4507
4516
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4508
4517
  color: var(--cds-interactive, #0f62fe);
@@ -4514,15 +4523,31 @@
4514
4523
  fill: currentColor;
4515
4524
  }
4516
4525
 
4526
+ .c4p--add-select cds--structured-list--selection .c4p--add-select__selections-row-selectedcds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4527
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4528
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4529
+ }
4530
+
4517
4531
  .c4p--add-select__sub-header {
4518
4532
  display: flex;
4519
4533
  align-items: flex-end;
4520
4534
  justify-content: space-between;
4521
4535
  }
4536
+ .c4p--add-select__sub-header-multi {
4537
+ padding: 0 1rem;
4538
+ }
4539
+
4540
+ .c4p--add-select cds--structured-list-row {
4541
+ border-bottom: 0;
4542
+ }
4543
+
4544
+ .c4p--add-select cds--structured-list--selection cds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4545
+ border-bottom: 0;
4546
+ }
4522
4547
 
4523
4548
  .c4p--add-select__sidebar-header {
4524
4549
  display: flex;
4525
- padding: 1.5rem 1rem 0.5rem 1rem;
4550
+ padding: 2rem 1rem 0.5rem 1rem;
4526
4551
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4527
4552
  }
4528
4553
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4548,7 +4573,7 @@
4548
4573
  }
4549
4574
 
4550
4575
  .c4p--add-select__sidebar-body {
4551
- padding: 1rem;
4576
+ padding: 0 1rem;
4552
4577
  }
4553
4578
 
4554
4579
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4581,18 +4606,44 @@
4581
4606
  .c4p--add-select__columns {
4582
4607
  display: flex;
4583
4608
  flex-direction: row;
4609
+ flex-grow: 1;
4584
4610
  overflow-x: auto;
4585
4611
  }
4612
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4613
+ margin-left: 0.5rem;
4614
+ }
4615
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4616
+ border-left: 0;
4617
+ }
4618
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4619
+ padding: 0;
4620
+ }
4621
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4622
+ height: auto;
4623
+ padding: 0 0.5rem;
4624
+ }
4625
+ .c4p--add-select__columns .c4p--add-select__tag-container {
4626
+ padding: 0 0.5rem;
4627
+ margin-bottom: 0;
4628
+ }
4629
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4630
+ padding: 0;
4631
+ }
4632
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4633
+ border-top: 0;
4634
+ }
4586
4635
 
4587
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4588
- height: 0;
4589
- padding: 0 !important;
4636
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4637
+ padding: 0 1rem;
4638
+ }
4639
+
4640
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4641
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4590
4642
  }
4591
4643
 
4592
4644
  .c4p--add-select__column {
4593
4645
  overflow: auto;
4594
- max-width: 15rem;
4595
- flex: 1 0 15rem;
4646
+ flex: 0 0 20rem;
4596
4647
  padding: 1rem;
4597
4648
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4598
4649
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4691,13 +4742,6 @@ button.c4p--add-select__global-filter-toggle--open {
4691
4742
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4692
4743
  }
4693
4744
 
4694
- .c4p--add-select .cds--structured-list-td {
4695
- height: 3rem;
4696
- padding-top: 0;
4697
- padding-bottom: 0;
4698
- vertical-align: middle;
4699
- }
4700
-
4701
4745
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4702
4746
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4703
4747
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4710,8 +4754,7 @@ button.c4p--add-select__global-filter-toggle--open {
4710
4754
  }
4711
4755
 
4712
4756
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4713
- max-width: 29rem;
4714
- flex: 0 0 50%;
4757
+ flex-basis: 22.5rem;
4715
4758
  }
4716
4759
 
4717
4760
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4723,6 +4766,10 @@ button.c4p--add-select__global-filter-toggle--open {
4723
4766
  flex-direction: column;
4724
4767
  }
4725
4768
 
4769
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4770
+ max-width: 11.25rem;
4771
+ }
4772
+
4726
4773
  .c4p--add-select .c4p--add-select__items-label {
4727
4774
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4728
4775
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4763,6 +4810,33 @@ button.c4p--add-select__global-filter-toggle--open {
4763
4810
  padding-left: 0.5rem;
4764
4811
  }
4765
4812
 
4813
+ .c4p--add-select__multi .c4p--empty-state {
4814
+ max-width: 16rem;
4815
+ margin-top: 3rem;
4816
+ }
4817
+
4818
+ .c4p--add-select .cds--accordion__arrow {
4819
+ transform: rotate(0deg);
4820
+ }
4821
+
4822
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4823
+ transform: rotate(90deg);
4824
+ }
4825
+
4826
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
4827
+ margin: 0 0 0 1rem;
4828
+ }
4829
+
4830
+ .c4p--add-select cds--accordion--start cds--accordion__title {
4831
+ margin: 0 1rem 0 0.5rem;
4832
+ }
4833
+
4834
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
4835
+ padding-top: 0;
4836
+ padding-bottom: 0;
4837
+ margin-top: 0.5rem;
4838
+ }
4839
+
4766
4840
  .cds--tooltip,
4767
4841
  .cds--overflow-menu-options {
4768
4842
  z-index: 9000;
@@ -5151,8 +5225,7 @@ button.c4p--add-select__global-filter-toggle--open {
5151
5225
  max-height: 38.5rem;
5152
5226
  background-color: var(--cds-background, #ffffff);
5153
5227
  color: var(--cds-text-primary, #161616);
5154
- transition: transform 110ms;
5155
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5228
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5156
5229
  }
5157
5230
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5158
5231
  position: sticky;
@@ -5226,8 +5299,7 @@ button.c4p--add-select__global-filter-toggle--open {
5226
5299
  background-color: var(--cds-background, #ffffff);
5227
5300
  cursor: pointer;
5228
5301
  text-align: left;
5229
- transition: background-color 240ms;
5230
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5302
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5231
5303
  }
5232
5304
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5233
5305
  margin-bottom: 0.25rem;
@@ -5340,8 +5412,7 @@ button.c4p--add-select__global-filter-toggle--open {
5340
5412
  margin: 0 auto;
5341
5413
  background-color: var(--cds-layer-02, #ffffff);
5342
5414
  content: "";
5343
- transition: background-color 240ms;
5344
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5415
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5345
5416
  }
5346
5417
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5347
5418
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7883,10 +7954,6 @@ button.c4p--add-select__global-filter-toggle--open {
7883
7954
  padding-right: 1rem;
7884
7955
  }
7885
7956
 
7886
- .c4p--remove-modal .cds--modal-close {
7887
- display: none;
7888
- }
7889
-
7890
7957
  .c4p--remove-modal__body {
7891
7958
  padding-right: 20%;
7892
7959
  margin-bottom: 1rem;
@@ -9830,7 +9897,9 @@ button.c4p--add-select__global-filter-toggle--open {
9830
9897
  display: inline-block;
9831
9898
  overflow: hidden;
9832
9899
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9833
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9900
+ max-width: calc(
9901
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9902
+ );
9834
9903
  min-height: var(--c4p--inline-edit--size);
9835
9904
  /* stylelint-disable-next-line carbon/layout-token-use */
9836
9905
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10321,6 +10390,11 @@ button.c4p--add-select__global-filter-toggle--open {
10321
10390
  align-items: center;
10322
10391
  color: var(--cds-text-primary, #161616);
10323
10392
  }
10393
+ .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 {
10394
+ position: sticky;
10395
+ z-index: 1;
10396
+ left: 0;
10397
+ }
10324
10398
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10325
10399
  align-items: center;
10326
10400
  padding-top: 0;
@@ -10337,6 +10411,11 @@ button.c4p--add-select__global-filter-toggle--open {
10337
10411
  align-items: center;
10338
10412
  padding-top: 0;
10339
10413
  }
10414
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10415
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10416
+ position: sticky;
10417
+ left: 0;
10418
+ }
10340
10419
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10341
10420
  display: flex;
10342
10421
  height: 100%;
@@ -10396,9 +10475,12 @@ button.c4p--add-select__global-filter-toggle--open {
10396
10475
  height: 100%;
10397
10476
  overflow-x: auto;
10398
10477
  }
10399
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10400
- overflow: hidden;
10478
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10479
+ display: flex;
10480
+ overflow: auto;
10401
10481
  max-height: 100%;
10482
+ flex-direction: column;
10483
+ background-color: var(--cds-layer-01, #f4f4f4);
10402
10484
  }
10403
10485
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10404
10486
  display: flex;
@@ -10486,10 +10568,6 @@ button.c4p--add-select__global-filter-toggle--open {
10486
10568
  flex: 1 1 auto;
10487
10569
  }
10488
10570
 
10489
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10490
- border-bottom: none;
10491
- }
10492
-
10493
10571
  .c4p--datagrid__resizer {
10494
10572
  position: absolute;
10495
10573
  z-index: 1;
@@ -10529,6 +10607,12 @@ button.c4p--add-select__global-filter-toggle--open {
10529
10607
  .c4p--datagrid__head-hidden-select-all {
10530
10608
  padding-right: 2.5rem;
10531
10609
  }
10610
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10611
+ position: sticky;
10612
+ z-index: 1;
10613
+ left: 0;
10614
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10615
+ }
10532
10616
 
10533
10617
  .c4p--datagrid__simple-body {
10534
10618
  position: relative;
@@ -10552,15 +10636,6 @@ button.c4p--add-select__global-filter-toggle--open {
10552
10636
  min-width: 0 !important;
10553
10637
  }
10554
10638
 
10555
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10556
- width: 6px;
10557
- background-color: var(--cds-background, #ffffff);
10558
- }
10559
-
10560
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10561
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10562
- }
10563
-
10564
10639
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10565
10640
  overflow: auto;
10566
10641
  }
@@ -10708,10 +10783,21 @@ button.c4p--add-select__global-filter-toggle--open {
10708
10783
  margin: 0;
10709
10784
  }
10710
10785
 
10786
+ .c4p--datagrid .c4p--button-menu {
10787
+ height: 3rem;
10788
+ }
10789
+
10790
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10791
+ display: flex;
10792
+ width: 3rem;
10793
+ height: 3rem;
10794
+ justify-content: center;
10795
+ }
10796
+
10711
10797
  /*
10712
10798
  * Licensed Materials - Property of IBM
10713
10799
  * 5724-Q36
10714
- * (c) Copyright IBM Corp. 2020 - 2021
10800
+ * (c) Copyright IBM Corp. 2020 - 2022
10715
10801
  * US Government Users Restricted Rights - Use, duplication or disclosure
10716
10802
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10717
10803
  */
@@ -10722,6 +10808,18 @@ button.c4p--add-select__global-filter-toggle--open {
10722
10808
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10723
10809
  }
10724
10810
 
10811
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10812
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10813
+ }
10814
+
10815
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10816
+ transform: rotate(90deg);
10817
+ }
10818
+
10819
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10820
+ border-bottom: none;
10821
+ }
10822
+
10725
10823
  /*
10726
10824
  * Licensed Materials - Property of IBM
10727
10825
  * 5724-Q36
@@ -10850,14 +10948,36 @@ button.c4p--add-select__global-filter-toggle--open {
10850
10948
  /* stylelint-disable-next-line declaration-no-important */
10851
10949
  position: sticky !important;
10852
10950
  right: 0;
10853
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10951
+ display: flex;
10952
+ align-items: center;
10953
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10854
10954
  }
10855
10955
 
10856
10956
  .c4p--datagrid__right-sticky-column-header {
10857
10957
  /* stylelint-disable-next-line declaration-no-important */
10858
10958
  position: sticky !important;
10859
10959
  right: 0;
10860
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10960
+ }
10961
+
10962
+ .c4p--datagrid__left-sticky-column-cell {
10963
+ /* stylelint-disable-next-line declaration-no-important */
10964
+ position: sticky !important;
10965
+ left: 0;
10966
+ display: flex;
10967
+ align-items: center;
10968
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10969
+ }
10970
+
10971
+ .c4p--datagrid__left-sticky-column-header {
10972
+ /* stylelint-disable-next-line declaration-no-important */
10973
+ position: sticky !important;
10974
+ z-index: 1;
10975
+ left: 0;
10976
+ }
10977
+
10978
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10979
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10980
+ left: 2.5rem;
10861
10981
  }
10862
10982
 
10863
10983
  .c4p--datagrid__sticky-noShadow {
@@ -10873,6 +10993,12 @@ button.c4p--add-select__global-filter-toggle--open {
10873
10993
  right: 6px !important;
10874
10994
  }
10875
10995
 
10996
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10997
+ position: sticky;
10998
+ z-index: 1;
10999
+ left: 0;
11000
+ }
11001
+
10876
11002
  /*
10877
11003
  * Licensed Materials - Property of IBM
10878
11004
  * 5724-Q36
@@ -10895,6 +11021,18 @@ button.c4p--add-select__global-filter-toggle--open {
10895
11021
  margin-bottom: 0.5rem;
10896
11022
  }
10897
11023
 
11024
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11025
+ cursor: not-allowed;
11026
+ }
11027
+
11028
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11029
+ pointer-events: none;
11030
+ }
11031
+
11032
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11033
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11034
+ }
11035
+
10898
11036
  /*
10899
11037
  * Licensed Materials - Property of IBM
10900
11038
  * 5724-Q36
@@ -10906,145 +11044,584 @@ button.c4p--add-select__global-filter-toggle--open {
10906
11044
  position: inherit;
10907
11045
  display: flex;
10908
11046
  flex-flow: column;
10909
- /* stylelint-disable-next-line declaration-no-important */
10910
- padding-top: 0 !important;
11047
+ padding: 0;
11048
+ margin: 0;
11049
+ }
11050
+
11051
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11052
+ margin-bottom: 0;
11053
+ }
11054
+
11055
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11056
+ display: flex;
11057
+ justify-content: center;
11058
+ }
11059
+
11060
+ .c4p--datagrid__customize-columns-modal--actions {
11061
+ display: flex;
11062
+ height: 3rem;
11063
+ flex-flow: row;
11064
+ background-color: var(--cds-field-02, #ffffff);
11065
+ }
11066
+
11067
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11068
+ height: 3rem;
11069
+ padding-left: 2.5rem;
11070
+ border-bottom: none;
11071
+ }
11072
+
11073
+ .c4p--datagrid__customize-columns-modal--actions > button {
11074
+ margin-left: 1rem;
11075
+ }
11076
+
11077
+ .c4p--datagrid__customize-columns-instructions {
11078
+ padding-left: 1rem;
11079
+ margin-bottom: 1.5rem;
11080
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
11081
+ font-weight: var(--cds-body-long-01-font-weight, 400);
11082
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
11083
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11084
+ color: var(--cds-text-primary, #161616);
11085
+ }
11086
+
11087
+ .c4p--datagrid__customize-columns-column-list {
11088
+ position: relative;
11089
+ overflow: auto;
11090
+ }
11091
+
11092
+ .c4p--datagrid__customize-columns-select-all {
11093
+ display: flex;
11094
+ height: 3rem;
11095
+ padding-left: 2.5rem;
11096
+ border-bottom: 1px solid var(--cds-layer-active);
11097
+ background-color: var(--cds-layer-01, #f4f4f4);
11098
+ }
11099
+
11100
+ .c4p--datagrid__customize-columns-select-all:hover {
11101
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11102
+ }
11103
+
11104
+ .c4p--datagrid__customize-columns-select-all-selected {
11105
+ display: flex;
11106
+ height: 3rem;
11107
+ padding-left: 2.5rem;
11108
+ border-bottom: 1px solid var(--cds-layer-active);
11109
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11110
+ }
11111
+
11112
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11113
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11114
+ }
11115
+
11116
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11117
+ margin-bottom: 0;
11118
+ }
11119
+
11120
+ /*
11121
+ * Licensed Materials - Property of IBM
11122
+ * 5724-Q36
11123
+ * (c) Copyright IBM Corp. 2021
11124
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11125
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11126
+ */
11127
+ .c4p--datagrid__row-size-dropdown {
11128
+ padding: 1rem;
11129
+ background-color: var(--cds-background, #ffffff);
11130
+ 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));
11131
+ }
11132
+
11133
+ .c4p--datagrid__row-size-button--open {
11134
+ background-color: var(--cds-background, #ffffff);
11135
+ 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));
11136
+ }
11137
+
11138
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11139
+ /* stylelint-disable-next-line carbon/layout-token-use */
11140
+ left: -4px;
11141
+ }
11142
+
11143
+ /*
11144
+ * Licensed Materials - Property of IBM
11145
+ * 5724-Q36
11146
+ * (c) Copyright IBM Corp. 2021
11147
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11148
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11149
+ */
11150
+ th.c4p--datagrid__select-all-toggle-on,
11151
+ td.c4p--datagrid__select-all-toggle-on {
11152
+ /* stylelint-disable-next-line declaration-no-important */
11153
+ width: 4.5rem !important;
11154
+ /* stylelint-disable-next-line declaration-no-important */
11155
+ min-width: initial !important;
11156
+ box-sizing: border-box;
11157
+ flex: 0 0 auto;
11158
+ }
11159
+
11160
+ th.c4p--datagrid__select-all-toggle-on {
11161
+ display: flex;
11162
+ align-items: center;
11163
+ justify-content: center;
11164
+ }
11165
+
11166
+ th.c4p--datagrid__select-all-toggle-on.button {
11167
+ margin-left: 0.125rem;
11168
+ }
11169
+
11170
+ /*
11171
+ * Licensed Materials - Property of IBM
11172
+ * 5724-Q36
11173
+ * (c) Copyright IBM Corp. 2022
11174
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11175
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11176
+ */
11177
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11178
+ position: relative;
11179
+ padding: 1rem 1rem 1.5rem 3rem;
11180
+ }
11181
+
11182
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11183
+ position: absolute;
11184
+ /* stylelint-disable-next-line carbon/layout-token-use */
11185
+ top: -1px;
11186
+ right: 0;
11187
+ width: calc(100% - 3rem);
11188
+ height: 1px;
11189
+ background-color: var(--cds-layer-accent);
11190
+ content: "";
11191
+ }
11192
+
11193
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11194
+ position: absolute;
11195
+ bottom: 0;
11196
+ left: 0;
11197
+ width: 100%;
11198
+ height: 1px;
11199
+ background-color: var(--cds-layer-accent);
11200
+ content: "";
11201
+ }
11202
+
11203
+ /*
11204
+ * Licensed Materials - Property of IBM
11205
+ * 5724-Q36
11206
+ * (c) Copyright IBM Corp. 2022
11207
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11208
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11209
+ */
11210
+ .c4p--datagrid__draggable-handleStyle {
11211
+ display: flex;
11212
+ align-items: center;
11213
+ margin-right: 0.5rem;
11214
+ cursor: grab;
11215
+ }
11216
+
11217
+ .c4p--datagrid__draggable-handleStyle.disabled {
11218
+ pointer-events: none;
11219
+ }
11220
+
11221
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11222
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11223
+ }
11224
+
11225
+ .c4p--datagrid__draggable-handleHolder {
11226
+ display: flex;
11227
+ height: 3rem;
11228
+ padding-left: 1rem;
11229
+ border-bottom: 1px solid var(--cds-layer-active);
11230
+ background-color: var(--cds-layer);
11231
+ }
11232
+
11233
+ .c4p--datagrid__draggable-handleHolder:hover {
11234
+ background-color: var(--cds-layer-hover);
11235
+ }
11236
+
11237
+ .c4p--datagrid__draggable-handleHolder-selected {
11238
+ display: flex;
11239
+ height: 3rem;
11240
+ padding-left: 1rem;
11241
+ border-bottom: 1px solid var(--cds-layer-active);
11242
+ background-color: var(--cds-layer-selected);
11243
+ }
11244
+
11245
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11246
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11247
+ }
11248
+
11249
+ .c4p--datagrid__draggable-handleHolder-isOver {
11250
+ border: 2px dashed var(--cds-focus, #0f62fe);
11251
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11252
+ }
11253
+
11254
+ .c4p--datagrid__draggable-handleHolder-droppable {
11255
+ display: flex;
11256
+ width: 100%;
11257
+ }
11258
+
11259
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11260
+ background-color: var(--cds-highlight, #d0e2ff);
11261
+ color: var(--cds-text-primary, #161616);
11262
+ }
11263
+
11264
+ .c4p--datagrid__shared-ui--assistive-text {
11265
+ position: absolute;
11266
+ overflow: hidden;
11267
+ width: 0;
11268
+ height: 0;
11269
+ padding: 0;
11270
+ border: 0;
11271
+ clip: rect(0 0 0 0);
11272
+ text-transform: none;
11273
+ white-space: nowrap;
11274
+ }
11275
+
11276
+ /*
11277
+ * Licensed Materials - Property of IBM
11278
+ * 5724-Q36
11279
+ * (c) Copyright IBM Corp. 2021
11280
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11281
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11282
+ */
11283
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11284
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11285
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11286
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11287
+ height: 1.5rem;
11288
+ }
11289
+
11290
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11291
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11292
+ height: calc(1.5rem - 0.25rem);
11293
+ }
11294
+
11295
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11296
+ max-height: none;
11297
+ }
11298
+
11299
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11300
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11301
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11302
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11303
+ height: 2rem;
11304
+ }
11305
+
11306
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11307
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11308
+ height: calc(2rem - 0.25rem);
11309
+ }
11310
+
11311
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11312
+ max-height: none;
11313
+ }
11314
+
11315
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11316
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11317
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11318
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11319
+ height: 2.5rem;
11320
+ }
11321
+
11322
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11323
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11324
+ height: calc(2.5rem - 0.25rem);
11325
+ }
11326
+
11327
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11328
+ max-height: none;
11329
+ }
11330
+
11331
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11332
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11333
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11334
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11335
+ height: 3rem;
11336
+ }
11337
+
11338
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11339
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11340
+ height: calc(3rem - 0.25rem);
11341
+ }
11342
+
11343
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11344
+ max-height: none;
11345
+ }
11346
+
11347
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11348
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11349
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11350
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11351
+ height: 4rem;
11352
+ }
11353
+
11354
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11355
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11356
+ height: calc(4rem - 0.25rem);
11357
+ }
11358
+
11359
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11360
+ max-height: none;
11361
+ }
11362
+
11363
+ .c4p--datagrid__inline-edit-cell {
11364
+ display: flex;
11365
+ height: 100%;
11366
+ align-items: center;
11367
+ }
11368
+
11369
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11370
+ display: flex;
11371
+ align-items: center;
11372
+ }
11373
+
11374
+ .c4p--datagrid__inline-edit--outer-cell-button {
11375
+ width: 100%;
11376
+ height: calc(100% + 2px);
11377
+ }
11378
+
11379
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11380
+ position: relative;
11381
+ display: flex;
11382
+ width: 100%;
11383
+ height: 100%;
11384
+ align-items: center;
11385
+ justify-content: space-between;
11386
+ padding-left: 1rem;
11387
+ color: var(--cds-text-secondary, #525252);
11388
+ cursor: pointer;
11389
+ outline: 0;
11390
+ }
11391
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11392
+ height: 1rem;
11393
+ padding-right: 1rem;
11394
+ }
11395
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11396
+ padding-left: 0;
11397
+ cursor: default;
11398
+ }
11399
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11400
+ height: 1rem;
11401
+ fill: var(--cds-icon-secondary, #525252);
11402
+ }
11403
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11404
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11405
+ }
11406
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11407
+ justify-content: flex-start;
11408
+ }
11409
+ .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) {
11410
+ /* stylelint-disable-next-line */
11411
+ }
11412
+ .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 {
11413
+ display: none;
11414
+ }
11415
+ .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 {
11416
+ display: block;
11417
+ }
11418
+
11419
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11420
+ background-color: var(--cds-layer-active);
11421
+ color: var(--cds-text-primary, #161616);
11422
+ }
11423
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11424
+ fill: var(--cds-icon-primary, #161616);
11425
+ }
11426
+
11427
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11428
+ background-color: var(--cds-layer-active);
11429
+ color: var(--cds-text-primary, #161616);
11430
+ cursor: text;
11431
+ }
11432
+
11433
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11434
+ /* stylelint-disable-next-line carbon/theme-token-use */
11435
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11436
+ outline-offset: calc(-1 * 0.125rem);
11437
+ }
11438
+ @media screen and (prefers-contrast) {
11439
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11440
+ outline-style: dotted;
11441
+ }
11442
+ }
11443
+
11444
+ .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) {
11445
+ color: var(--cds-button-disabled, #c6c6c6);
11446
+ cursor: not-allowed;
11447
+ }
11448
+
11449
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11450
+ overflow: hidden;
11451
+ padding-right: 1rem;
11452
+ text-overflow: ellipsis;
11453
+ white-space: nowrap;
11454
+ }
11455
+
11456
+ .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 {
11457
+ padding-right: 3rem;
11458
+ }
11459
+
11460
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11461
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11462
+ height: 3rem;
11463
+ }
11464
+
11465
+ .c4p--datagrid__inline-edit-button-icon {
11466
+ position: absolute;
11467
+ right: 1rem;
11468
+ }
11469
+
11470
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11471
+ position: relative;
11472
+ padding: 0;
11473
+ }
11474
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11475
+ padding-left: 1rem;
11476
+ }
11477
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11478
+ min-width: auto;
11479
+ padding-right: 1rem;
11480
+ }
11481
+
11482
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11483
+ padding-bottom: 1rem;
11484
+ padding-left: 1rem;
10911
11485
  }
10912
11486
 
10913
- .c4p--datagrid__customize-columns-checkbox {
10914
- display: flex;
10915
- justify-content: center;
10916
- /* stylelint-disable-next-line declaration-no-important */
10917
- margin-bottom: 0 !important;
11487
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11488
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11489
+ width: inherit;
10918
11490
  }
10919
11491
 
10920
- .c4p--datagrid__customize-columns-modal--actions {
10921
- display: flex;
10922
- flex-flow: row;
10923
- margin-bottom: 1.5rem;
11492
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11493
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11494
+ width: 100%;
11495
+ height: 3rem;
11496
+ max-height: none;
10924
11497
  }
10925
11498
 
10926
- .c4p--datagrid__customize-columns-modal--actions > button {
10927
- margin-left: 1rem;
11499
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11500
+ width: inherit;
10928
11501
  }
10929
11502
 
10930
- .c4p--datagrid__customize-columns-instructions {
10931
- margin-bottom: 1.5rem;
10932
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
10933
- font-weight: var(--cds-body-long-01-font-weight, 400);
10934
- line-height: var(--cds-body-long-01-line-height, 1.42857);
10935
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
10936
- color: var(--cds-text-primary, #161616);
11503
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11504
+ overflow: hidden;
11505
+ width: 100%;
11506
+ max-width: none;
11507
+ padding-right: 2rem;
11508
+ text-overflow: ellipsis;
11509
+ white-space: nowrap;
10937
11510
  }
10938
11511
 
10939
- .c4p--datagrid__customize-columns-column-list {
10940
- position: relative;
10941
- overflow: auto;
11512
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11513
+ border-top-color: var(--cds-layer-hover);
11514
+ background-color: var(--cds-layer-hover);
10942
11515
  }
10943
11516
 
10944
- /*
10945
- * Licensed Materials - Property of IBM
10946
- * 5724-Q36
10947
- * (c) Copyright IBM Corp. 2021
10948
- * US Government Users Restricted Rights - Use, duplication or disclosure
10949
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10950
- */
10951
- .c4p--datagrid__row-size-dropdown {
11517
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
10952
11518
  position: absolute;
10953
- padding: 1rem;
10954
- background-color: var(--cds-background, #ffffff);
10955
- 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));
11519
+ z-index: 2;
11520
+ bottom: 0;
11521
+ left: 0;
11522
+ width: 2px;
11523
+ height: calc(100% - 50px);
11524
+ background-color: var(--cds-link-inverse, #78a9ff);
11525
+ content: "";
10956
11526
  }
10957
11527
 
10958
- .c4p--datagrid__row-size-button--open {
10959
- background-color: var(--cds-background, #ffffff);
10960
- 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));
11528
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11529
+ position: absolute;
11530
+ z-index: 2;
11531
+ right: 0;
11532
+ bottom: 0;
11533
+ width: 2px;
11534
+ height: calc(100% - 50px);
11535
+ background-color: var(--cds-link-inverse, #78a9ff);
11536
+ content: "";
10961
11537
  }
10962
11538
 
10963
- /*
10964
- * Licensed Materials - Property of IBM
10965
- * 5724-Q36
10966
- * (c) Copyright IBM Corp. 2021
10967
- * US Government Users Restricted Rights - Use, duplication or disclosure
10968
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10969
- */
10970
- th.c4p--datagrid__select-all-toggle-on,
10971
- td.c4p--datagrid__select-all-toggle-on {
10972
- /* stylelint-disable-next-line declaration-no-important */
10973
- width: 4.5rem !important;
10974
- /* stylelint-disable-next-line declaration-no-important */
10975
- min-width: initial !important;
10976
- box-sizing: border-box;
10977
- flex: 0 0 auto;
11539
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-grid-active thead::before {
11540
+ position: absolute;
11541
+ z-index: 2;
11542
+ top: 0;
11543
+ right: 0;
11544
+ left: 0;
11545
+ width: var(--c4p--datagrid--grid-width);
11546
+ height: 2px;
11547
+ background-color: var(--cds-link-inverse, #78a9ff);
10978
11548
  }
10979
11549
 
10980
- th.c4p--datagrid__select-all-toggle-on {
10981
- display: flex;
10982
- align-items: center;
10983
- justify-content: center;
11550
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11551
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11552
+ height: calc(100% - 2px);
10984
11553
  }
10985
11554
 
10986
- th.c4p--datagrid__select-all-toggle-on.button {
10987
- margin-left: 0.125rem;
11555
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11556
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11557
+ outline-offset: -2px;
10988
11558
  }
10989
11559
 
10990
- .c4p--datagrid__expanded-row-content {
10991
- padding: 1rem 1rem 1.5rem 4rem;
11560
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11561
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11562
+ position: absolute;
11563
+ z-index: 3;
11564
+ top: calc(100% - 0.125rem);
11565
+ width: 100%;
11566
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11567
+ margin: 0;
11568
+ background-color: var(--cds-layer-01, #f4f4f4);
11569
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11570
+ outline-offset: calc(-1 * 0.125rem);
10992
11571
  }
10993
11572
 
10994
- /*
10995
- * Licensed Materials - Property of IBM
10996
- * 5724-Q36
10997
- * (c) Copyright IBM Corp. 2022
10998
- * US Government Users Restricted Rights - Use, duplication or disclosure
10999
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11000
- */
11001
- .c4p--datagrid__draggable-handleStyle {
11002
- display: flex;
11003
- align-items: center;
11004
- margin-right: 0.5rem;
11005
- cursor: grab;
11573
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11574
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11006
11575
  }
11007
11576
 
11008
- .c4p--datagrid__draggable-handleStyle.disabled {
11009
- pointer-events: none;
11577
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11578
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11579
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11580
+ z-index: 4;
11581
+ top: calc(100% + 0.75rem + 0.125rem);
11582
+ right: 0.5rem;
11010
11583
  }
11011
11584
 
11012
- svg.c4p--datagrid__draggable-handleStyle.disable {
11013
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11585
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11586
+ top: calc(100% + 0.25rem + 0.125rem);
11014
11587
  }
11015
11588
 
11016
- .c4p--datagrid__draggable-handleHolder {
11017
- display: flex;
11018
- height: 2rem;
11019
- padding-left: 0.25rem;
11020
- margin-bottom: 0.5rem;
11021
- background: var(--cds-layer-02, #ffffff);
11589
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11590
+ position: absolute;
11591
+ top: 0;
11592
+ left: 0.125rem;
11593
+ width: calc(100% - (0.125rem * 2));
11594
+ height: 0.125rem;
11595
+ background-color: var(--cds-layer-01, #f4f4f4);
11596
+ content: "";
11022
11597
  }
11023
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11024
- border: 2px dashed var(--cds-focus, #0f62fe);
11025
- background-color: var(--cds-highlight, #d0e2ff);
11598
+
11599
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11600
+ position: absolute;
11601
+ top: 0.125rem;
11602
+ left: 0.5rem;
11603
+ width: calc(100% - (0.5rem * 2));
11604
+ height: 1px;
11605
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11606
+ content: "";
11026
11607
  }
11027
11608
 
11028
- .c4p--datagrid__draggable-handleHolder-droppable {
11029
- display: flex;
11030
- width: 100%;
11609
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11610
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11611
+ }
11612
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11613
+ background-color: transparent;
11031
11614
  }
11032
11615
 
11033
- .c4p--datagrid__draggable-handleHolder--grabbed {
11034
- background-color: var(--cds-highlight, #d0e2ff);
11035
- color: var(--cds-text-primary, #161616);
11616
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11617
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11618
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11619
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11620
+ outline-color: var(--cds-support-error, #da1e28);
11036
11621
  }
11037
11622
 
11038
- .c4p--datagrid__shared-ui--assistive-text {
11039
- position: absolute;
11040
- overflow: hidden;
11041
- width: 0;
11042
- height: 0;
11043
- padding: 0;
11044
- border: 0;
11045
- clip: rect(0 0 0 0);
11046
- text-transform: none;
11047
- white-space: nowrap;
11623
+ .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 {
11624
+ background-color: var(--cds-support-error, #da1e28);
11048
11625
  }
11049
11626
 
11050
11627
  /*
@@ -11054,6 +11631,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11054
11631
  * US Government Users Restricted Rights - Use, duplication or disclosure
11055
11632
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11056
11633
  */
11634
+ /* stylelint-disable max-nesting-depth */
11057
11635
  .c4p--datagrid__datagridWrap {
11058
11636
  display: block;
11059
11637
  width: 100%;
@@ -11061,6 +11639,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11061
11639
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11062
11640
  display: none;
11063
11641
  }
11642
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11643
+ left: 0.125rem;
11644
+ width: 112px;
11645
+ }
11064
11646
 
11065
11647
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11066
11648
  left: 0.125rem;
@@ -13182,7 +13764,7 @@ a.cds--side-nav__link--current::before {
13182
13764
  /* stylelint-disable-next-line function-no-unknown */
13183
13765
  z-index: 9000;
13184
13766
  align-items: flex-end;
13185
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13767
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13186
13768
  }
13187
13769
 
13188
13770
  @media (prefers-reduced-motion: reduce) {
@@ -15074,6 +15656,10 @@ em {
15074
15656
  --cds-button-secondary-hover: #5e5e5e;
15075
15657
  --cds-button-tertiary-hover: #f4f4f4;
15076
15658
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15659
+ --cds-notification-background-error: #393939;
15660
+ --cds-notification-background-success: #393939;
15661
+ --cds-notification-background-info: #393939;
15662
+ --cds-notification-background-warning: #393939;
15077
15663
  --cds-notification-action-tertiary-inverse: #0f62fe;
15078
15664
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15079
15665
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15238,6 +15824,10 @@ em {
15238
15824
  --cds-button-secondary-hover: #5e5e5e;
15239
15825
  --cds-button-tertiary-hover: #f4f4f4;
15240
15826
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15827
+ --cds-notification-background-error: #262626;
15828
+ --cds-notification-background-success: #262626;
15829
+ --cds-notification-background-info: #262626;
15830
+ --cds-notification-background-warning: #262626;
15241
15831
  --cds-notification-action-tertiary-inverse: #0f62fe;
15242
15832
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15243
15833
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -16515,7 +17105,7 @@ input[data-invalid]:not(:focus),
16515
17105
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16516
17106
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16517
17107
  .cds--list-box[data-invalid]:not(:focus),
16518
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17108
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16519
17109
  outline: 2px solid var(--cds-support-error, #da1e28);
16520
17110
  outline-offset: -2px;
16521
17111
  }
@@ -16526,7 +17116,7 @@ input[data-invalid]:not(:focus),
16526
17116
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16527
17117
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16528
17118
  .cds--list-box[data-invalid]:not(:focus),
16529
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17119
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16530
17120
  outline-style: dotted;
16531
17121
  }
16532
17122
  }
@@ -17257,6 +17847,9 @@ fieldset[disabled] .cds--form__helper-text {
17257
17847
  z-index: 1;
17258
17848
  top: 0.8125rem;
17259
17849
  left: 1rem;
17850
+ display: flex;
17851
+ height: 1rem;
17852
+ align-items: center;
17260
17853
  margin: 0;
17261
17854
  }
17262
17855
 
@@ -17275,12 +17868,12 @@ fieldset[disabled] .cds--form__helper-text {
17275
17868
  }
17276
17869
 
17277
17870
  .cds--form--fluid .cds--text-input--invalid,
17278
- .cds--form--fluid .cds--text-input--warn {
17871
+ .cds--form--fluid .cds--text-input--warning {
17279
17872
  border-bottom: none;
17280
17873
  }
17281
17874
 
17282
17875
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
17283
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
17876
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
17284
17877
  display: block;
17285
17878
  border-style: solid;
17286
17879
  border-color: var(--cds-border-subtle);
@@ -17292,13 +17885,13 @@ fieldset[disabled] .cds--form__helper-text {
17292
17885
  top: 5rem;
17293
17886
  }
17294
17887
 
17295
- .cds--form--fluid .cds--text-input-wrapper--light {
17296
- background: var(--cds-field-02, #ffffff);
17888
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
17889
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
17890
+ outline: none;
17297
17891
  }
17298
17892
 
17299
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
17300
- outline: 2px solid transparent;
17301
- outline-offset: -2px;
17893
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
17894
+ border-bottom: 1px solid var(--cds-border-strong);
17302
17895
  }
17303
17896
 
17304
17897
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -17311,16 +17904,23 @@ fieldset[disabled] .cds--form__helper-text {
17311
17904
  }
17312
17905
  }
17313
17906
 
17314
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17907
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17908
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17315
17909
  outline: 2px solid var(--cds-focus, #0f62fe);
17316
17910
  outline-offset: -2px;
17317
17911
  }
17318
17912
  @media screen and (prefers-contrast) {
17319
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17913
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17914
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17320
17915
  outline-style: dotted;
17321
17916
  }
17322
17917
  }
17323
17918
 
17919
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
17920
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
17921
+ outline: none;
17922
+ }
17923
+
17324
17924
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
17325
17925
  flex-flow: row wrap;
17326
17926
  }
@@ -22294,6 +22894,106 @@ button.cds--dropdown-text:focus {
22294
22894
  }
22295
22895
 
22296
22896
  /* stylelint-enable */
22897
+ .cds--text-input--fluid.cds--text-input-wrapper {
22898
+ position: relative;
22899
+ height: 100%;
22900
+ background: var(--cds-field);
22901
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
22902
+ }
22903
+
22904
+ .cds--text-input--fluid .cds--label {
22905
+ position: absolute;
22906
+ z-index: 1;
22907
+ top: 0.8125rem;
22908
+ left: 1rem;
22909
+ display: flex;
22910
+ height: 1rem;
22911
+ align-items: center;
22912
+ margin: 0;
22913
+ }
22914
+
22915
+ .cds--text-input--fluid .cds--form__helper-text {
22916
+ display: none;
22917
+ }
22918
+
22919
+ .cds--text-input--fluid .cds--text-input {
22920
+ min-height: 4rem;
22921
+ padding: 2rem 1rem 0.8125rem;
22922
+ }
22923
+
22924
+ .cds--text-input__divider,
22925
+ .cds--text-input--fluid .cds--text-input__divider {
22926
+ display: none;
22927
+ }
22928
+
22929
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
22930
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22931
+ display: block;
22932
+ }
22933
+
22934
+ .cds--text-input--fluid input[data-invalid] {
22935
+ outline: none;
22936
+ }
22937
+
22938
+ .cds--text-input--fluid .cds--form-requirement {
22939
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
22940
+ margin: 0;
22941
+ }
22942
+
22943
+ .cds--text-input--fluid .cds--text-input--invalid,
22944
+ .cds--text-input--fluid .cds--text-input--warning {
22945
+ border-bottom: none;
22946
+ }
22947
+
22948
+ .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
22949
+ .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
22950
+ display: block;
22951
+ border-style: solid;
22952
+ border-color: var(--cds-border-subtle);
22953
+ border-bottom: none;
22954
+ margin: 0 1rem;
22955
+ }
22956
+
22957
+ .cds--text-input--fluid .cds--text-input__invalid-icon {
22958
+ top: 5rem;
22959
+ }
22960
+
22961
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
22962
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
22963
+ outline: none;
22964
+ }
22965
+
22966
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22967
+ border-bottom: 1px solid var(--cds-border-strong);
22968
+ }
22969
+
22970
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22971
+ outline: 2px solid var(--cds-support-error, #da1e28);
22972
+ outline-offset: -2px;
22973
+ }
22974
+ @media screen and (prefers-contrast) {
22975
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22976
+ outline-style: dotted;
22977
+ }
22978
+ }
22979
+
22980
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22981
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22982
+ outline: 2px solid var(--cds-focus, #0f62fe);
22983
+ outline-offset: -2px;
22984
+ }
22985
+ @media screen and (prefers-contrast) {
22986
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22987
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22988
+ outline-style: dotted;
22989
+ }
22990
+ }
22991
+
22992
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
22993
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
22994
+ outline: none;
22995
+ }
22996
+
22297
22997
  @keyframes stroke {
22298
22998
  100% {
22299
22999
  stroke-dashoffset: 0;
@@ -22996,6 +23696,10 @@ button.cds--dropdown-text:focus {
22996
23696
  background-color: transparent;
22997
23697
  }
22998
23698
 
23699
+ .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
23700
+ visibility: hidden;
23701
+ }
23702
+
22999
23703
  .cds--inline-notification {
23000
23704
  position: relative;
23001
23705
  display: flex;
@@ -26038,13 +26742,13 @@ span.cds--pagination__text.cds--pagination__items-count {
26038
26742
  .cds--popover--left-top .cds--popover-content {
26039
26743
  top: -50%;
26040
26744
  right: 100%;
26041
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
26745
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
26042
26746
  }
26043
26747
 
26044
26748
  .cds--popover--left-bottom .cds--popover-content {
26045
26749
  right: 100%;
26046
26750
  bottom: -50%;
26047
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
26751
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
26048
26752
  }
26049
26753
 
26050
26754
  .cds--popover--left .cds--popover-content::before,
@@ -28948,7 +29652,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28948
29652
  }
28949
29653
 
28950
29654
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28951
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29655
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28952
29656
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
28953
29657
  }
28954
29658
 
@@ -29023,7 +29727,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29023
29727
 
29024
29728
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
29025
29729
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
29026
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29730
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
29027
29731
  color: Highlight;
29028
29732
  outline: 1px solid Highlight;
29029
29733
  }
@@ -29084,6 +29788,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29084
29788
  min-height: 2rem;
29085
29789
  flex: 1;
29086
29790
  align-items: center;
29791
+ padding-top: 0.4375rem;
29792
+ padding-bottom: 0.4375rem;
29087
29793
  }
29088
29794
  .cds--tree-node__label:hover {
29089
29795
  background-color: var(--cds-layer-hover-01, #e8e8e8);
@@ -29118,7 +29824,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29118
29824
  }
29119
29825
 
29120
29826
  .cds--tree-parent-node__toggle {
29121
- padding: 0;
29827
+ display: flex;
29828
+ align-items: center;
29829
+ align-self: flex-start;
29830
+ padding: 0.0625rem 0;
29122
29831
  border: 0;
29123
29832
  margin-right: 0.5rem;
29124
29833
  }
@@ -29142,6 +29851,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29142
29851
  .cds--tree-node__icon {
29143
29852
  min-width: 1rem;
29144
29853
  min-height: 1rem;
29854
+ align-self: flex-start;
29855
+ margin-top: 0.0625rem;
29145
29856
  margin-right: 0.5rem;
29146
29857
  fill: var(--cds-icon-secondary, #525252);
29147
29858
  }
@@ -29174,6 +29885,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29174
29885
 
29175
29886
  .cds--tree--xs .cds--tree-node__label {
29176
29887
  min-height: 1.5rem;
29888
+ padding-top: 0.25rem;
29889
+ padding-bottom: 0.25rem;
29177
29890
  }
29178
29891
 
29179
29892
  .cds--content {