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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (256) hide show
  1. package/css/index-full-carbon.css +946 -327
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -8
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +785 -168
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -8
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +720 -232
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -8
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +742 -244
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -8
  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 +22 -5
  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/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  32. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  33. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  34. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  35. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  36. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  37. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  38. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  39. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  40. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  41. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  43. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  44. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  45. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  46. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  50. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  51. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  61. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  62. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  63. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  64. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  70. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  71. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  72. package/es/components/Datagrid/index.js +3 -1
  73. package/es/components/Datagrid/useActionsColumn.js +28 -12
  74. package/es/components/Datagrid/useColumnOrder.js +8 -0
  75. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  76. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  77. package/es/components/Datagrid/useExpandedRow.js +0 -1
  78. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  79. package/es/components/Datagrid/useInlineEdit.js +71 -0
  80. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  81. package/es/components/Datagrid/useNestedRows.js +2 -2
  82. package/es/components/Datagrid/useRowExpander.js +1 -1
  83. package/es/components/Datagrid/useRowSize.js +17 -6
  84. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  85. package/es/components/Datagrid/useSelectRows.js +12 -2
  86. package/es/components/Datagrid/useSortableColumns.js +1 -1
  87. package/es/components/Datagrid/useStickyColumn.js +11 -0
  88. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  89. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  90. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  91. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  92. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  93. package/es/components/Datagrid/utils/makeData.js +46 -1
  94. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  95. package/es/components/EditUpdateCards/index.js +7 -0
  96. package/es/components/ExportModal/ExportModal.js +1 -1
  97. package/es/components/ImportModal/ImportModal.js +3 -3
  98. package/es/components/InlineEdit/InlineEdit.js +11 -9
  99. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  100. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  101. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  102. package/es/components/OptionsTile/OptionsTile.js +1 -1
  103. package/es/components/PageHeader/PageHeader.js +1 -1
  104. package/es/components/PageHeader/PageHeaderTitle.js +3 -1
  105. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  106. package/es/components/Saving/Saving.js +1 -1
  107. package/es/components/SidePanel/SidePanel.js +45 -52
  108. package/es/components/SidePanel/motion/variants.js +45 -0
  109. package/es/components/StatusIcon/StatusIcon.js +1 -1
  110. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  111. package/es/components/WebTerminal/WebTerminal.js +1 -1
  112. package/es/components/WebTerminal/preview-components/Navigation.js +1 -1
  113. package/es/components/index.js +3 -2
  114. package/es/global/js/hooks/useClickOutside.js +1 -1
  115. package/es/global/js/package-settings.js +5 -4
  116. package/es/global/js/utils/getBezierValues.js +20 -0
  117. package/es/global/js/utils/motionConstants.js +45 -0
  118. package/es/global/js/utils/rangeWithCallback.js +13 -0
  119. package/es/global/js/utils/story-helper.js +5 -1
  120. package/es/global/js/utils/uuidv4.spec.js +4 -0
  121. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  122. package/lib/components/AddSelect/AddSelect.js +0 -4
  123. package/lib/components/AddSelect/AddSelectBody.js +22 -5
  124. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  125. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  126. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  127. package/lib/components/AddSelect/AddSelectList.js +62 -28
  128. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  129. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  130. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  131. package/lib/components/Card/Card.js +16 -6
  132. package/lib/components/Card/CardFooter.js +3 -1
  133. package/lib/components/Card/CardHeader.js +21 -1
  134. package/lib/components/ComboButton/ComboButton.js +3 -3
  135. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  136. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  137. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  138. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  139. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  140. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  141. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  142. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  143. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  144. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  145. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  146. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  147. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  148. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  149. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  150. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  151. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  152. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  153. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  154. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  155. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  156. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  157. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  158. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  159. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  160. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  161. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  162. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  163. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  164. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  165. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  166. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  167. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  168. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  169. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  170. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  171. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  172. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  173. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  174. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  175. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  176. package/lib/components/Datagrid/index.js +17 -1
  177. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  178. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  179. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  180. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  181. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  182. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  183. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  184. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  185. package/lib/components/Datagrid/useNestedRows.js +3 -3
  186. package/lib/components/Datagrid/useRowExpander.js +3 -3
  187. package/lib/components/Datagrid/useRowSize.js +18 -13
  188. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  189. package/lib/components/Datagrid/useSelectRows.js +12 -2
  190. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  191. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  192. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  193. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  194. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  195. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  196. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  197. package/lib/components/Datagrid/utils/makeData.js +47 -1
  198. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  199. package/lib/components/EditUpdateCards/index.js +13 -0
  200. package/lib/components/ExportModal/ExportModal.js +3 -3
  201. package/lib/components/ImportModal/ImportModal.js +4 -4
  202. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  203. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  204. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  205. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  206. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  207. package/lib/components/PageHeader/PageHeader.js +2 -2
  208. package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
  209. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  210. package/lib/components/Saving/Saving.js +5 -5
  211. package/lib/components/SidePanel/SidePanel.js +48 -53
  212. package/lib/components/SidePanel/motion/variants.js +55 -0
  213. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  214. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  215. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  216. package/lib/components/WebTerminal/preview-components/Navigation.js +4 -4
  217. package/lib/components/index.js +21 -1
  218. package/lib/global/js/hooks/useClickOutside.js +1 -1
  219. package/lib/global/js/package-settings.js +5 -4
  220. package/lib/global/js/utils/getBezierValues.js +29 -0
  221. package/lib/global/js/utils/motionConstants.js +55 -0
  222. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  223. package/lib/global/js/utils/story-helper.js +5 -1
  224. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  225. package/package.json +18 -16
  226. package/scss/components/AddSelect/_add-select.scss +129 -30
  227. package/scss/components/Card/_card.scss +1 -0
  228. package/scss/components/Cascade/_cascade.scss +1 -1
  229. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  230. package/scss/components/Datagrid/_datagrid.scss +7 -0
  231. package/scss/components/Datagrid/_storybook-styles.scss +12 -5
  232. package/scss/components/Datagrid/styles/_datagrid.scss +31 -15
  233. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  234. package/scss/components/Datagrid/styles/_index.scss +1 -0
  235. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  236. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  237. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  238. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  239. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  240. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  241. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  242. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  243. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  244. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  245. package/scss/components/EditUpdateCards/_index.scss +8 -0
  246. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  247. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  248. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  249. package/scss/components/PageHeader/_page-header.scss +4 -0
  250. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  251. package/scss/components/SidePanel/_side-panel.scss +3 -82
  252. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  253. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  254. package/scss/components/_index-released-only.scss +1 -0
  255. package/scss/components/_index-with-carbon.scss +1 -0
  256. package/scss/components/_index.scss +1 -0
package/css/index.css CHANGED
@@ -1764,7 +1764,7 @@ input[data-invalid]:not(:focus),
1764
1764
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1765
1765
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1766
1766
  .cds--list-box[data-invalid]:not(:focus),
1767
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1767
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1768
1768
  outline: 2px solid var(--cds-support-error, #da1e28);
1769
1769
  outline-offset: -2px;
1770
1770
  }
@@ -1775,7 +1775,7 @@ input[data-invalid]:not(:focus),
1775
1775
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1776
1776
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1777
1777
  .cds--list-box[data-invalid]:not(:focus),
1778
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
1778
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
1779
1779
  outline-style: dotted;
1780
1780
  }
1781
1781
  }
@@ -2321,6 +2321,9 @@ fieldset[disabled] .cds--form__helper-text {
2321
2321
  z-index: 1;
2322
2322
  top: 0.8125rem;
2323
2323
  left: 1rem;
2324
+ display: flex;
2325
+ height: 1rem;
2326
+ align-items: center;
2324
2327
  margin: 0;
2325
2328
  }
2326
2329
 
@@ -2339,12 +2342,12 @@ fieldset[disabled] .cds--form__helper-text {
2339
2342
  }
2340
2343
 
2341
2344
  .cds--form--fluid .cds--text-input--invalid,
2342
- .cds--form--fluid .cds--text-input--warn {
2345
+ .cds--form--fluid .cds--text-input--warning {
2343
2346
  border-bottom: none;
2344
2347
  }
2345
2348
 
2346
2349
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
2347
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
2350
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
2348
2351
  display: block;
2349
2352
  border-style: solid;
2350
2353
  border-color: var(--cds-border-subtle);
@@ -2356,13 +2359,13 @@ fieldset[disabled] .cds--form__helper-text {
2356
2359
  top: 5rem;
2357
2360
  }
2358
2361
 
2359
- .cds--form--fluid .cds--text-input-wrapper--light {
2360
- background: var(--cds-field-02, #ffffff);
2362
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
2363
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
2364
+ outline: none;
2361
2365
  }
2362
2366
 
2363
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
2364
- outline: 2px solid transparent;
2365
- outline-offset: -2px;
2367
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
2368
+ border-bottom: 1px solid var(--cds-border-strong);
2366
2369
  }
2367
2370
 
2368
2371
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -2375,16 +2378,23 @@ fieldset[disabled] .cds--form__helper-text {
2375
2378
  }
2376
2379
  }
2377
2380
 
2378
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2381
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2382
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2379
2383
  outline: 2px solid var(--cds-focus, #0f62fe);
2380
2384
  outline-offset: -2px;
2381
2385
  }
2382
2386
  @media screen and (prefers-contrast) {
2383
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
2387
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
2388
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
2384
2389
  outline-style: dotted;
2385
2390
  }
2386
2391
  }
2387
2392
 
2393
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
2394
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
2395
+ outline: none;
2396
+ }
2397
+
2388
2398
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
2389
2399
  flex-flow: row wrap;
2390
2400
  }
@@ -5063,7 +5073,7 @@ a.cds--overflow-menu-options__btn::before {
5063
5073
  @media (prefers-reduced-motion: no-preference) {
5064
5074
  .c4p--cascade__element,
5065
5075
  .c4p--cascade__col {
5066
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
5076
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
5067
5077
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
5068
5078
  animation-fill-mode: forwards;
5069
5079
  opacity: 0;
@@ -5637,7 +5647,7 @@ a.cds--overflow-menu-options__btn::before {
5637
5647
  }
5638
5648
 
5639
5649
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5640
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5650
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5641
5651
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5642
5652
  }
5643
5653
 
@@ -5712,7 +5722,7 @@ a.cds--overflow-menu-options__btn::before {
5712
5722
 
5713
5723
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5714
5724
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5715
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5725
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5716
5726
  color: Highlight;
5717
5727
  outline: 1px solid Highlight;
5718
5728
  }
@@ -6007,26 +6017,6 @@ a.cds--overflow-menu-options__btn::before {
6007
6017
  margin-bottom: 0;
6008
6018
  }
6009
6019
 
6010
- @keyframes side-panel-exit-left {
6011
- 0% {
6012
- opacity: 1;
6013
- transform: translateX(0);
6014
- }
6015
- 100% {
6016
- opacity: 0;
6017
- transform: translateX(calc(-1 * 30rem));
6018
- }
6019
- }
6020
- @keyframes side-panel-exit-right {
6021
- 0% {
6022
- opacity: 1;
6023
- transform: translateX(0);
6024
- }
6025
- 100% {
6026
- opacity: 0;
6027
- transform: translateX(30rem);
6028
- }
6029
- }
6030
6020
  .c4p--side-panel__container {
6031
6021
  --c4p--side-panel--subtitle-opacity: 1;
6032
6022
  --c4p--side-panel--title-container-height: 0;
@@ -6046,8 +6036,6 @@ a.cds--overflow-menu-options__btn::before {
6046
6036
  box-sizing: border-box;
6047
6037
  background-color: var(--cds-layer-01, #f4f4f4);
6048
6038
  color: var(--cds-text-primary, #161616);
6049
- transition: transform 240ms;
6050
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6051
6039
  }
6052
6040
  .c4p--side-panel__container.c4p--side-panel__container--xs {
6053
6041
  width: 16rem;
@@ -6061,37 +6049,13 @@ a.cds--overflow-menu-options__btn::before {
6061
6049
  max-width: 100%;
6062
6050
  }
6063
6051
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
6064
- width: 16rem;
6065
- max-width: 100%;
6066
6052
  right: 0;
6067
6053
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6068
6054
  }
6069
- @keyframes side-panel-entrance-right {
6070
- 0% {
6071
- opacity: 0;
6072
- transform: translateX(16rem);
6073
- }
6074
- 100% {
6075
- opacity: 1;
6076
- transform: translateX(0);
6077
- }
6078
- }
6079
6055
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
6080
- width: 16rem;
6081
- max-width: 100%;
6082
6056
  left: 0;
6083
6057
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6084
6058
  }
6085
- @keyframes side-panel-entrance-left {
6086
- 0% {
6087
- opacity: 0;
6088
- transform: translateX(-16rem);
6089
- }
6090
- 100% {
6091
- opacity: 1;
6092
- transform: translateX(0);
6093
- }
6094
- }
6095
6059
  .c4p--side-panel__container.c4p--side-panel__container--sm {
6096
6060
  width: 20rem;
6097
6061
  max-width: 100%;
@@ -6104,37 +6068,13 @@ a.cds--overflow-menu-options__btn::before {
6104
6068
  max-width: 100%;
6105
6069
  }
6106
6070
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
6107
- width: 20rem;
6108
- max-width: 100%;
6109
6071
  right: 0;
6110
6072
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6111
6073
  }
6112
- @keyframes side-panel-entrance-right {
6113
- 0% {
6114
- opacity: 0;
6115
- transform: translateX(20rem);
6116
- }
6117
- 100% {
6118
- opacity: 1;
6119
- transform: translateX(0);
6120
- }
6121
- }
6122
6074
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
6123
- width: 20rem;
6124
- max-width: 100%;
6125
6075
  left: 0;
6126
6076
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6127
6077
  }
6128
- @keyframes side-panel-entrance-left {
6129
- 0% {
6130
- opacity: 0;
6131
- transform: translateX(-20rem);
6132
- }
6133
- 100% {
6134
- opacity: 1;
6135
- transform: translateX(0);
6136
- }
6137
- }
6138
6078
  .c4p--side-panel__container.c4p--side-panel__container--md {
6139
6079
  width: 30rem;
6140
6080
  max-width: 100%;
@@ -6147,37 +6087,13 @@ a.cds--overflow-menu-options__btn::before {
6147
6087
  max-width: 100%;
6148
6088
  }
6149
6089
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
6150
- width: 30rem;
6151
- max-width: 100%;
6152
6090
  right: 0;
6153
6091
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6154
6092
  }
6155
- @keyframes side-panel-entrance-right {
6156
- 0% {
6157
- opacity: 0;
6158
- transform: translateX(30rem);
6159
- }
6160
- 100% {
6161
- opacity: 1;
6162
- transform: translateX(0);
6163
- }
6164
- }
6165
6093
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
6166
- width: 30rem;
6167
- max-width: 100%;
6168
6094
  left: 0;
6169
6095
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6170
6096
  }
6171
- @keyframes side-panel-entrance-left {
6172
- 0% {
6173
- opacity: 0;
6174
- transform: translateX(-30rem);
6175
- }
6176
- 100% {
6177
- opacity: 1;
6178
- transform: translateX(0);
6179
- }
6180
- }
6181
6097
  .c4p--side-panel__container.c4p--side-panel__container--lg {
6182
6098
  width: 40rem;
6183
6099
  max-width: 100%;
@@ -6190,37 +6106,13 @@ a.cds--overflow-menu-options__btn::before {
6190
6106
  max-width: 100%;
6191
6107
  }
6192
6108
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
6193
- width: 40rem;
6194
- max-width: 100%;
6195
6109
  right: 0;
6196
6110
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6197
6111
  }
6198
- @keyframes side-panel-entrance-right {
6199
- 0% {
6200
- opacity: 0;
6201
- transform: translateX(40rem);
6202
- }
6203
- 100% {
6204
- opacity: 1;
6205
- transform: translateX(0);
6206
- }
6207
- }
6208
6112
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
6209
- width: 40rem;
6210
- max-width: 100%;
6211
6113
  left: 0;
6212
6114
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6213
6115
  }
6214
- @keyframes side-panel-entrance-left {
6215
- 0% {
6216
- opacity: 0;
6217
- transform: translateX(-40rem);
6218
- }
6219
- 100% {
6220
- opacity: 1;
6221
- transform: translateX(0);
6222
- }
6223
- }
6224
6116
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
6225
6117
  width: 75%;
6226
6118
  max-width: 100%;
@@ -6233,37 +6125,13 @@ a.cds--overflow-menu-options__btn::before {
6233
6125
  max-width: 100%;
6234
6126
  }
6235
6127
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
6236
- width: 75%;
6237
- max-width: 100%;
6238
6128
  right: 0;
6239
6129
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6240
6130
  }
6241
- @keyframes side-panel-entrance-right {
6242
- 0% {
6243
- opacity: 0;
6244
- transform: translateX(75%);
6245
- }
6246
- 100% {
6247
- opacity: 1;
6248
- transform: translateX(0);
6249
- }
6250
- }
6251
6131
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
6252
- width: 75%;
6253
- max-width: 100%;
6254
6132
  left: 0;
6255
6133
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6256
6134
  }
6257
- @keyframes side-panel-entrance-left {
6258
- 0% {
6259
- opacity: 0;
6260
- transform: translateX(-75%);
6261
- }
6262
- 100% {
6263
- opacity: 1;
6264
- transform: translateX(0);
6265
- }
6266
- }
6267
6135
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
6268
6136
  /* stylelint-disable-next-line max-nesting-depth */
6269
6137
  }
@@ -6396,10 +6264,7 @@ a.cds--overflow-menu-options__btn::before {
6396
6264
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
6397
6265
  position: fixed;
6398
6266
  z-index: 2;
6399
- top: calc(
6400
- var(--c4p--side-panel--title-text-height) +
6401
- var(--c4p--side-panel--label-text-height) + 3rem
6402
- );
6267
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6403
6268
  background-color: var(--cds-layer-01, #f4f4f4);
6404
6269
  }
6405
6270
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -6414,7 +6279,6 @@ a.cds--overflow-menu-options__btn::before {
6414
6279
  }
6415
6280
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
6416
6281
  position: fixed;
6417
- top: 3rem;
6418
6282
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6419
6283
  }
6420
6284
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -6435,10 +6299,7 @@ a.cds--overflow-menu-options__btn::before {
6435
6299
  }
6436
6300
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
6437
6301
  position: fixed;
6438
- top: calc(
6439
- var(--c4p--side-panel--title-text-height) +
6440
- var(--c4p--side-panel--subtitle-container-height) + 3rem
6441
- );
6302
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
6442
6303
  width: 100%;
6443
6304
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
6444
6305
  }
@@ -6463,8 +6324,7 @@ a.cds--overflow-menu-options__btn::before {
6463
6324
  padding: 0 1rem;
6464
6325
  margin-bottom: 0.5rem;
6465
6326
  background-color: var(--cds-layer-01, #f4f4f4);
6466
- transition: transform 150ms;
6467
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6327
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
6468
6328
  }
6469
6329
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
6470
6330
  min-width: 2rem;
@@ -6595,8 +6455,6 @@ a.cds--overflow-menu-options__btn::before {
6595
6455
  width: 100%;
6596
6456
  height: 100%;
6597
6457
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
6598
- transition: background-color 240ms;
6599
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6600
6458
  }
6601
6459
 
6602
6460
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -6743,7 +6601,7 @@ a.cds--overflow-menu-options__btn::before {
6743
6601
  /* stylelint-disable-next-line function-no-unknown */
6744
6602
  z-index: 9000;
6745
6603
  align-items: flex-end;
6746
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6604
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6747
6605
  }
6748
6606
  @media (prefers-reduced-motion: reduce) {
6749
6607
  .c4p--tearsheet.is-visible {
@@ -8333,7 +8191,6 @@ a.cds--overflow-menu-options__btn::before {
8333
8191
 
8334
8192
  /* stylelint-disable max-nesting-depth */
8335
8193
  .c4p--add-select__selections.cds--structured-list {
8336
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8337
8194
  margin-bottom: 0;
8338
8195
  }
8339
8196
  .c4p--add-select__selections-wrapper {
@@ -8341,8 +8198,11 @@ a.cds--overflow-menu-options__btn::before {
8341
8198
  }
8342
8199
  .c4p--add-select__selections-cell-wrapper {
8343
8200
  display: flex;
8201
+ height: 3rem;
8344
8202
  align-items: center;
8345
8203
  justify-content: space-between;
8204
+ padding: 0 1rem;
8205
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8346
8206
  }
8347
8207
  .c4p--add-select__selections-cell-title {
8348
8208
  display: block;
@@ -8356,17 +8216,20 @@ a.cds--overflow-menu-options__btn::before {
8356
8216
  display: block;
8357
8217
  color: var(--cds-text-secondary, #525252);
8358
8218
  }
8219
+ .c4p--add-select__selections-cell {
8220
+ display: flex;
8221
+ flex-direction: column;
8222
+ justify-content: center;
8223
+ }
8359
8224
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
8360
8225
  visibility: visible;
8361
8226
  }
8362
8227
  .c4p--add-select__selections-hidden-hover {
8363
8228
  visibility: hidden;
8364
8229
  }
8365
- .c4p--add-select__selections-row-selected {
8366
- background: #e5e5e5;
8367
- }
8368
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
8369
- visibility: visible;
8230
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
8231
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
8232
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
8370
8233
  }
8371
8234
  .c4p--add-select__selections-checkbox {
8372
8235
  display: flex;
@@ -8374,7 +8237,7 @@ a.cds--overflow-menu-options__btn::before {
8374
8237
  }
8375
8238
  .c4p--add-select__selections-checkbox-label-wrapper {
8376
8239
  display: flex;
8377
- margin-left: 0.5rem;
8240
+ margin-left: 1rem;
8378
8241
  }
8379
8242
  .c4p--add-select__selections-checkbox-label-text {
8380
8243
  display: flex;
@@ -8392,6 +8255,13 @@ a.cds--overflow-menu-options__btn::before {
8392
8255
  .c4p--add-select__selections-cell-icon {
8393
8256
  margin-right: 0.5rem;
8394
8257
  }
8258
+ .c4p--add-select__selections-row {
8259
+ border-left: 0.125rem solid transparent;
8260
+ }
8261
+ .c4p--add-select__selections-row-meta-selected {
8262
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
8263
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
8264
+ }
8395
8265
 
8396
8266
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
8397
8267
  color: var(--cds-interactive, #0f62fe);
@@ -8403,15 +8273,31 @@ a.cds--overflow-menu-options__btn::before {
8403
8273
  fill: currentColor;
8404
8274
  }
8405
8275
 
8276
+ .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) {
8277
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
8278
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
8279
+ }
8280
+
8406
8281
  .c4p--add-select__sub-header {
8407
8282
  display: flex;
8408
8283
  align-items: flex-end;
8409
8284
  justify-content: space-between;
8410
8285
  }
8286
+ .c4p--add-select__sub-header-multi {
8287
+ padding: 0 1rem;
8288
+ }
8289
+
8290
+ .c4p--add-select cds--structured-list-row {
8291
+ border-bottom: 0;
8292
+ }
8293
+
8294
+ .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) {
8295
+ border-bottom: 0;
8296
+ }
8411
8297
 
8412
8298
  .c4p--add-select__sidebar-header {
8413
8299
  display: flex;
8414
- padding: 1.5rem 1rem 0.5rem 1rem;
8300
+ padding: 2rem 1rem 0.5rem 1rem;
8415
8301
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8416
8302
  }
8417
8303
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -8437,7 +8323,7 @@ a.cds--overflow-menu-options__btn::before {
8437
8323
  }
8438
8324
 
8439
8325
  .c4p--add-select__sidebar-body {
8440
- padding: 1rem;
8326
+ padding: 0 1rem;
8441
8327
  }
8442
8328
 
8443
8329
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -8470,18 +8356,44 @@ a.cds--overflow-menu-options__btn::before {
8470
8356
  .c4p--add-select__columns {
8471
8357
  display: flex;
8472
8358
  flex-direction: row;
8359
+ flex-grow: 1;
8473
8360
  overflow-x: auto;
8474
8361
  }
8362
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
8363
+ margin-left: 0.5rem;
8364
+ }
8365
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
8366
+ border-left: 0;
8367
+ }
8368
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
8369
+ padding: 0;
8370
+ }
8371
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
8372
+ height: auto;
8373
+ padding: 0 0.5rem;
8374
+ }
8375
+ .c4p--add-select__columns .c4p--add-select__tag-container {
8376
+ padding: 0 0.5rem;
8377
+ margin-bottom: 0;
8378
+ }
8379
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
8380
+ padding: 0;
8381
+ }
8382
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
8383
+ border-top: 0;
8384
+ }
8475
8385
 
8476
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
8477
- height: 0;
8478
- padding: 0 !important;
8386
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
8387
+ padding: 0 1rem;
8388
+ }
8389
+
8390
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8391
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8479
8392
  }
8480
8393
 
8481
8394
  .c4p--add-select__column {
8482
8395
  overflow: auto;
8483
- max-width: 15rem;
8484
- flex: 1 0 15rem;
8396
+ flex: 0 0 20rem;
8485
8397
  padding: 1rem;
8486
8398
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8487
8399
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -8580,13 +8492,6 @@ button.c4p--add-select__global-filter-toggle--open {
8580
8492
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
8581
8493
  }
8582
8494
 
8583
- .c4p--add-select .cds--structured-list-td {
8584
- height: 3rem;
8585
- padding-top: 0;
8586
- padding-bottom: 0;
8587
- vertical-align: middle;
8588
- }
8589
-
8590
8495
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
8591
8496
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
8592
8497
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -8599,8 +8504,7 @@ button.c4p--add-select__global-filter-toggle--open {
8599
8504
  }
8600
8505
 
8601
8506
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
8602
- max-width: 29rem;
8603
- flex: 0 0 50%;
8507
+ flex-basis: 22.5rem;
8604
8508
  }
8605
8509
 
8606
8510
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -8612,6 +8516,10 @@ button.c4p--add-select__global-filter-toggle--open {
8612
8516
  flex-direction: column;
8613
8517
  }
8614
8518
 
8519
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
8520
+ max-width: 11.25rem;
8521
+ }
8522
+
8615
8523
  .c4p--add-select .c4p--add-select__items-label {
8616
8524
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
8617
8525
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -8652,8 +8560,35 @@ button.c4p--add-select__global-filter-toggle--open {
8652
8560
  padding-left: 0.5rem;
8653
8561
  }
8654
8562
 
8655
- .cds--tooltip,
8656
- .cds--overflow-menu-options {
8563
+ .c4p--add-select__multi .c4p--empty-state {
8564
+ max-width: 16rem;
8565
+ margin-top: 3rem;
8566
+ }
8567
+
8568
+ .c4p--add-select .cds--accordion__arrow {
8569
+ transform: rotate(0deg);
8570
+ }
8571
+
8572
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
8573
+ transform: rotate(90deg);
8574
+ }
8575
+
8576
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
8577
+ margin: 0 0 0 1rem;
8578
+ }
8579
+
8580
+ .c4p--add-select cds--accordion--start cds--accordion__title {
8581
+ margin: 0 1rem 0 0.5rem;
8582
+ }
8583
+
8584
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
8585
+ padding-top: 0;
8586
+ padding-bottom: 0;
8587
+ margin-top: 0.5rem;
8588
+ }
8589
+
8590
+ .c4p--add-select .cds--tooltip,
8591
+ .c4p--add-select .cds--overflow-menu-options {
8657
8592
  z-index: 9000;
8658
8593
  }
8659
8594
 
@@ -9055,8 +8990,7 @@ button.c4p--add-select__global-filter-toggle--open {
9055
8990
  max-height: 38.5rem;
9056
8991
  background-color: var(--cds-background, #ffffff);
9057
8992
  color: var(--cds-text-primary, #161616);
9058
- transition: transform 110ms;
9059
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
8993
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
9060
8994
  }
9061
8995
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
9062
8996
  position: sticky;
@@ -9130,8 +9064,7 @@ button.c4p--add-select__global-filter-toggle--open {
9130
9064
  background-color: var(--cds-background, #ffffff);
9131
9065
  cursor: pointer;
9132
9066
  text-align: left;
9133
- transition: background-color 240ms;
9134
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9067
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9135
9068
  }
9136
9069
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
9137
9070
  margin-bottom: 0.25rem;
@@ -9244,8 +9177,7 @@ button.c4p--add-select__global-filter-toggle--open {
9244
9177
  margin: 0 auto;
9245
9178
  background-color: var(--cds-layer-02, #ffffff);
9246
9179
  content: "";
9247
- transition: background-color 240ms;
9248
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9180
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9249
9181
  }
9250
9182
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
9251
9183
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -12118,6 +12050,12 @@ button.c4p--add-select__global-filter-toggle--open {
12118
12050
  transform: translateY(-2px);
12119
12051
  vertical-align: middle;
12120
12052
  }
12053
+ .c4p--page-header .c4p--page-header__title-wrapper {
12054
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
12055
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
12056
+ line-height: var(--cds-productive-heading-04-line-height, 1.28572);
12057
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
12058
+ }
12121
12059
  .c4p--page-header .c4p--page-header__page-actions {
12122
12060
  flex: 0 0 100%;
12123
12061
  margin-top: 1rem;
@@ -12348,10 +12286,6 @@ button.c4p--add-select__global-filter-toggle--open {
12348
12286
  padding-right: 1rem;
12349
12287
  }
12350
12288
 
12351
- .c4p--remove-modal .cds--modal-close {
12352
- display: none;
12353
- }
12354
-
12355
12289
  .c4p--remove-modal__body {
12356
12290
  padding-right: 20%;
12357
12291
  margin-bottom: 1rem;
@@ -13557,13 +13491,13 @@ button.c4p--add-select__global-filter-toggle--open {
13557
13491
  .cds--popover--left-top .cds--popover-content {
13558
13492
  top: -50%;
13559
13493
  right: 100%;
13560
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13494
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13561
13495
  }
13562
13496
 
13563
13497
  .cds--popover--left-bottom .cds--popover-content {
13564
13498
  right: 100%;
13565
13499
  bottom: -50%;
13566
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13500
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13567
13501
  }
13568
13502
 
13569
13503
  .cds--popover--left .cds--popover-content::before,
@@ -15015,7 +14949,9 @@ button.c4p--add-select__global-filter-toggle--open {
15015
14949
  display: inline-block;
15016
14950
  overflow: hidden;
15017
14951
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
15018
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14952
+ max-width: calc(
14953
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
14954
+ );
15019
14955
  min-height: var(--c4p--inline-edit--size);
15020
14956
  /* stylelint-disable-next-line carbon/layout-token-use */
15021
14957
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -15506,6 +15442,11 @@ button.c4p--add-select__global-filter-toggle--open {
15506
15442
  align-items: center;
15507
15443
  color: var(--cds-text-primary, #161616);
15508
15444
  }
15445
+ .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 {
15446
+ position: sticky;
15447
+ z-index: 1;
15448
+ left: 0;
15449
+ }
15509
15450
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
15510
15451
  align-items: center;
15511
15452
  padding-top: 0;
@@ -15522,6 +15463,11 @@ button.c4p--add-select__global-filter-toggle--open {
15522
15463
  align-items: center;
15523
15464
  padding-top: 0;
15524
15465
  }
15466
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
15467
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
15468
+ position: sticky;
15469
+ left: 0;
15470
+ }
15525
15471
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
15526
15472
  display: flex;
15527
15473
  height: 100%;
@@ -15581,9 +15527,12 @@ button.c4p--add-select__global-filter-toggle--open {
15581
15527
  height: 100%;
15582
15528
  overflow-x: auto;
15583
15529
  }
15584
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
15585
- overflow: hidden;
15530
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
15531
+ display: flex;
15532
+ overflow: auto;
15586
15533
  max-height: 100%;
15534
+ flex-direction: column;
15535
+ background-color: var(--cds-layer-01, #f4f4f4);
15587
15536
  }
15588
15537
  .c4p--datagrid__grid-container .c4p--datagrid__head {
15589
15538
  display: flex;
@@ -15671,10 +15620,6 @@ button.c4p--add-select__global-filter-toggle--open {
15671
15620
  flex: 1 1 auto;
15672
15621
  }
15673
15622
 
15674
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
15675
- border-bottom: none;
15676
- }
15677
-
15678
15623
  .c4p--datagrid__resizer {
15679
15624
  position: absolute;
15680
15625
  z-index: 1;
@@ -15714,6 +15659,12 @@ button.c4p--add-select__global-filter-toggle--open {
15714
15659
  .c4p--datagrid__head-hidden-select-all {
15715
15660
  padding-right: 2.5rem;
15716
15661
  }
15662
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15663
+ position: sticky;
15664
+ z-index: 1;
15665
+ left: 0;
15666
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
15667
+ }
15717
15668
 
15718
15669
  .c4p--datagrid__simple-body {
15719
15670
  position: relative;
@@ -15737,15 +15688,6 @@ button.c4p--add-select__global-filter-toggle--open {
15737
15688
  min-width: 0 !important;
15738
15689
  }
15739
15690
 
15740
- .c4p--datagrid__table-simple::-webkit-scrollbar {
15741
- width: 6px;
15742
- background-color: var(--cds-background, #ffffff);
15743
- }
15744
-
15745
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
15746
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
15747
- }
15748
-
15749
15691
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
15750
15692
  overflow: auto;
15751
15693
  }
@@ -15893,10 +15835,21 @@ button.c4p--add-select__global-filter-toggle--open {
15893
15835
  margin: 0;
15894
15836
  }
15895
15837
 
15896
- /*
15897
- * Licensed Materials - Property of IBM
15838
+ .c4p--datagrid .c4p--button-menu {
15839
+ height: 3rem;
15840
+ }
15841
+
15842
+ .c4p--datagrid .c4p--datagrid__row-size-button {
15843
+ display: flex;
15844
+ width: 3rem;
15845
+ height: 3rem;
15846
+ justify-content: center;
15847
+ }
15848
+
15849
+ /*
15850
+ * Licensed Materials - Property of IBM
15898
15851
  * 5724-Q36
15899
- * (c) Copyright IBM Corp. 2020 - 2021
15852
+ * (c) Copyright IBM Corp. 2020 - 2022
15900
15853
  * US Government Users Restricted Rights - Use, duplication or disclosure
15901
15854
  * restricted by GSA ADP Schedule Contract with IBM Corp.
15902
15855
  */
@@ -15907,6 +15860,18 @@ button.c4p--add-select__global-filter-toggle--open {
15907
15860
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15908
15861
  }
15909
15862
 
15863
+ .c4p--datagrid .c4p--datagrid__expander-icon {
15864
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15865
+ }
15866
+
15867
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
15868
+ transform: rotate(90deg);
15869
+ }
15870
+
15871
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
15872
+ border-bottom: none;
15873
+ }
15874
+
15910
15875
  /*
15911
15876
  * Licensed Materials - Property of IBM
15912
15877
  * 5724-Q36
@@ -16035,14 +16000,36 @@ button.c4p--add-select__global-filter-toggle--open {
16035
16000
  /* stylelint-disable-next-line declaration-no-important */
16036
16001
  position: sticky !important;
16037
16002
  right: 0;
16038
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16003
+ display: flex;
16004
+ align-items: center;
16005
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16039
16006
  }
16040
16007
 
16041
16008
  .c4p--datagrid__right-sticky-column-header {
16042
16009
  /* stylelint-disable-next-line declaration-no-important */
16043
16010
  position: sticky !important;
16044
16011
  right: 0;
16045
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16012
+ }
16013
+
16014
+ .c4p--datagrid__left-sticky-column-cell {
16015
+ /* stylelint-disable-next-line declaration-no-important */
16016
+ position: sticky !important;
16017
+ left: 0;
16018
+ display: flex;
16019
+ align-items: center;
16020
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16021
+ }
16022
+
16023
+ .c4p--datagrid__left-sticky-column-header {
16024
+ /* stylelint-disable-next-line declaration-no-important */
16025
+ position: sticky !important;
16026
+ z-index: 1;
16027
+ left: 0;
16028
+ }
16029
+
16030
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16031
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16032
+ left: 2.5rem;
16046
16033
  }
16047
16034
 
16048
16035
  .c4p--datagrid__sticky-noShadow {
@@ -16058,6 +16045,12 @@ button.c4p--add-select__global-filter-toggle--open {
16058
16045
  right: 6px !important;
16059
16046
  }
16060
16047
 
16048
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
16049
+ position: sticky;
16050
+ z-index: 1;
16051
+ left: 0;
16052
+ }
16053
+
16061
16054
  /*
16062
16055
  * Licensed Materials - Property of IBM
16063
16056
  * 5724-Q36
@@ -16080,6 +16073,18 @@ button.c4p--add-select__global-filter-toggle--open {
16080
16073
  margin-bottom: 0.5rem;
16081
16074
  }
16082
16075
 
16076
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
16077
+ cursor: not-allowed;
16078
+ }
16079
+
16080
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
16081
+ pointer-events: none;
16082
+ }
16083
+
16084
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
16085
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
16086
+ }
16087
+
16083
16088
  /*
16084
16089
  * Licensed Materials - Property of IBM
16085
16090
  * 5724-Q36
@@ -16091,21 +16096,30 @@ button.c4p--add-select__global-filter-toggle--open {
16091
16096
  position: inherit;
16092
16097
  display: flex;
16093
16098
  flex-flow: column;
16094
- /* stylelint-disable-next-line declaration-no-important */
16095
- padding-top: 0 !important;
16099
+ padding: 0;
16100
+ margin: 0;
16096
16101
  }
16097
16102
 
16098
- .c4p--datagrid__customize-columns-checkbox {
16103
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16104
+ margin-bottom: 0;
16105
+ }
16106
+
16107
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16099
16108
  display: flex;
16100
16109
  justify-content: center;
16101
- /* stylelint-disable-next-line declaration-no-important */
16102
- margin-bottom: 0 !important;
16103
16110
  }
16104
16111
 
16105
16112
  .c4p--datagrid__customize-columns-modal--actions {
16106
16113
  display: flex;
16114
+ height: 3rem;
16107
16115
  flex-flow: row;
16108
- margin-bottom: 1.5rem;
16116
+ background-color: var(--cds-field-02, #ffffff);
16117
+ }
16118
+
16119
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
16120
+ height: 3rem;
16121
+ padding-left: 2.5rem;
16122
+ border-bottom: none;
16109
16123
  }
16110
16124
 
16111
16125
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -16113,6 +16127,7 @@ button.c4p--add-select__global-filter-toggle--open {
16113
16127
  }
16114
16128
 
16115
16129
  .c4p--datagrid__customize-columns-instructions {
16130
+ padding-left: 1rem;
16116
16131
  margin-bottom: 1.5rem;
16117
16132
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
16118
16133
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -16126,6 +16141,36 @@ button.c4p--add-select__global-filter-toggle--open {
16126
16141
  overflow: auto;
16127
16142
  }
16128
16143
 
16144
+ .c4p--datagrid__customize-columns-select-all {
16145
+ display: flex;
16146
+ height: 3rem;
16147
+ align-items: center;
16148
+ padding-left: 2.5rem;
16149
+ border-bottom: 1px solid var(--cds-layer-active);
16150
+ background-color: var(--cds-layer-01, #f4f4f4);
16151
+ }
16152
+
16153
+ .c4p--datagrid__customize-columns-select-all:hover {
16154
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
16155
+ }
16156
+
16157
+ .c4p--datagrid__customize-columns-select-all-selected {
16158
+ display: flex;
16159
+ height: 3rem;
16160
+ align-items: center;
16161
+ padding-left: 2.5rem;
16162
+ border-bottom: 1px solid var(--cds-layer-active);
16163
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
16164
+ }
16165
+
16166
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
16167
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
16168
+ }
16169
+
16170
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
16171
+ margin-bottom: 0;
16172
+ }
16173
+
16129
16174
  /*
16130
16175
  * Licensed Materials - Property of IBM
16131
16176
  * 5724-Q36
@@ -16134,7 +16179,6 @@ button.c4p--add-select__global-filter-toggle--open {
16134
16179
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16135
16180
  */
16136
16181
  .c4p--datagrid__row-size-dropdown {
16137
- position: absolute;
16138
16182
  padding: 1rem;
16139
16183
  background-color: var(--cds-background, #ffffff);
16140
16184
  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));
@@ -16145,6 +16189,11 @@ button.c4p--add-select__global-filter-toggle--open {
16145
16189
  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));
16146
16190
  }
16147
16191
 
16192
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
16193
+ /* stylelint-disable-next-line carbon/layout-token-use */
16194
+ left: -4px;
16195
+ }
16196
+
16148
16197
  /*
16149
16198
  * Licensed Materials - Property of IBM
16150
16199
  * 5724-Q36
@@ -16172,8 +16221,37 @@ th.c4p--datagrid__select-all-toggle-on.button {
16172
16221
  margin-left: 0.125rem;
16173
16222
  }
16174
16223
 
16175
- .c4p--datagrid__expanded-row-content {
16176
- padding: 1rem 1rem 1.5rem 4rem;
16224
+ /*
16225
+ * Licensed Materials - Property of IBM
16226
+ * 5724-Q36
16227
+ * (c) Copyright IBM Corp. 2022
16228
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16229
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16230
+ */
16231
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
16232
+ position: relative;
16233
+ padding: 1rem 1rem 1.5rem 3rem;
16234
+ }
16235
+
16236
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
16237
+ position: absolute;
16238
+ /* stylelint-disable-next-line carbon/layout-token-use */
16239
+ top: -1px;
16240
+ right: 0;
16241
+ width: calc(100% - 3rem);
16242
+ height: 1px;
16243
+ background-color: var(--cds-layer-accent);
16244
+ content: "";
16245
+ }
16246
+
16247
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
16248
+ position: absolute;
16249
+ bottom: 0;
16250
+ left: 0;
16251
+ width: 100%;
16252
+ height: 1px;
16253
+ background-color: var(--cds-layer-accent);
16254
+ content: "";
16177
16255
  }
16178
16256
 
16179
16257
  /*
@@ -16200,14 +16278,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16200
16278
 
16201
16279
  .c4p--datagrid__draggable-handleHolder {
16202
16280
  display: flex;
16203
- height: 2rem;
16204
- padding-left: 0.25rem;
16205
- margin-bottom: 0.5rem;
16206
- background: var(--cds-layer-02, #ffffff);
16281
+ height: 3rem;
16282
+ padding-left: 1rem;
16283
+ border-bottom: 1px solid var(--cds-layer-active);
16284
+ background-color: var(--cds-layer);
16207
16285
  }
16208
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
16286
+
16287
+ .c4p--datagrid__draggable-handleHolder:hover {
16288
+ background-color: var(--cds-layer-hover);
16289
+ }
16290
+
16291
+ .c4p--datagrid__draggable-handleHolder-selected {
16292
+ display: flex;
16293
+ height: 3rem;
16294
+ padding-left: 1rem;
16295
+ border-bottom: 1px solid var(--cds-layer-active);
16296
+ background-color: var(--cds-layer-selected);
16297
+ }
16298
+
16299
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
16300
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16301
+ }
16302
+
16303
+ .c4p--datagrid__draggable-handleHolder-isOver {
16209
16304
  border: 2px dashed var(--cds-focus, #0f62fe);
16210
- background-color: var(--cds-highlight, #d0e2ff);
16305
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16211
16306
  }
16212
16307
 
16213
16308
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -16215,7 +16310,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16215
16310
  width: 100%;
16216
16311
  }
16217
16312
 
16218
- .c4p--datagrid__draggable-handleHolder--grabbed {
16313
+ .c4p--datagrid__draggable-handleHolder-grabbed {
16219
16314
  background-color: var(--cds-highlight, #d0e2ff);
16220
16315
  color: var(--cds-text-primary, #161616);
16221
16316
  }
@@ -16232,6 +16327,365 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16232
16327
  white-space: nowrap;
16233
16328
  }
16234
16329
 
16330
+ /*
16331
+ * Licensed Materials - Property of IBM
16332
+ * 5724-Q36
16333
+ * (c) Copyright IBM Corp. 2021
16334
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16335
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16336
+ */
16337
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
16338
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
16339
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16340
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
16341
+ height: 1.5rem;
16342
+ }
16343
+
16344
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
16345
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
16346
+ height: calc(1.5rem - 0.25rem);
16347
+ }
16348
+
16349
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
16350
+ max-height: none;
16351
+ }
16352
+
16353
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
16354
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
16355
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16356
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
16357
+ height: 2rem;
16358
+ }
16359
+
16360
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
16361
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
16362
+ height: calc(2rem - 0.25rem);
16363
+ }
16364
+
16365
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
16366
+ max-height: none;
16367
+ }
16368
+
16369
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
16370
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
16371
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16372
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
16373
+ height: 2.5rem;
16374
+ }
16375
+
16376
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
16377
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
16378
+ height: calc(2.5rem - 0.25rem);
16379
+ }
16380
+
16381
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
16382
+ max-height: none;
16383
+ }
16384
+
16385
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
16386
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
16387
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16388
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
16389
+ height: 3rem;
16390
+ }
16391
+
16392
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
16393
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
16394
+ height: calc(3rem - 0.25rem);
16395
+ }
16396
+
16397
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
16398
+ max-height: none;
16399
+ }
16400
+
16401
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
16402
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
16403
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16404
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
16405
+ height: 4rem;
16406
+ }
16407
+
16408
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
16409
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
16410
+ height: calc(4rem - 0.25rem);
16411
+ }
16412
+
16413
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
16414
+ max-height: none;
16415
+ }
16416
+
16417
+ .c4p--datagrid {
16418
+ --c4p--datagrid--grid-header-height: 0;
16419
+ }
16420
+
16421
+ .c4p--datagrid__inline-edit-cell {
16422
+ display: flex;
16423
+ height: 100%;
16424
+ align-items: center;
16425
+ }
16426
+
16427
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
16428
+ display: flex;
16429
+ align-items: center;
16430
+ }
16431
+
16432
+ .c4p--datagrid__inline-edit--outer-cell-button {
16433
+ width: 100%;
16434
+ height: calc(100% + 2px);
16435
+ }
16436
+
16437
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
16438
+ position: relative;
16439
+ display: flex;
16440
+ width: 100%;
16441
+ height: 100%;
16442
+ align-items: center;
16443
+ justify-content: space-between;
16444
+ padding-left: 1rem;
16445
+ color: var(--cds-text-secondary, #525252);
16446
+ cursor: pointer;
16447
+ outline: 0;
16448
+ }
16449
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
16450
+ height: 1rem;
16451
+ padding-right: 1rem;
16452
+ }
16453
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
16454
+ padding-left: 0;
16455
+ cursor: default;
16456
+ }
16457
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
16458
+ height: 1rem;
16459
+ fill: var(--cds-icon-secondary, #525252);
16460
+ }
16461
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
16462
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16463
+ }
16464
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
16465
+ justify-content: flex-start;
16466
+ }
16467
+ .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) {
16468
+ /* stylelint-disable-next-line */
16469
+ }
16470
+ .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 {
16471
+ display: none;
16472
+ }
16473
+ .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 {
16474
+ display: block;
16475
+ }
16476
+
16477
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
16478
+ background-color: var(--cds-layer-active);
16479
+ color: var(--cds-text-primary, #161616);
16480
+ }
16481
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
16482
+ fill: var(--cds-icon-primary, #161616);
16483
+ }
16484
+
16485
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
16486
+ background-color: var(--cds-layer-active);
16487
+ color: var(--cds-text-primary, #161616);
16488
+ cursor: text;
16489
+ }
16490
+
16491
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16492
+ /* stylelint-disable-next-line carbon/theme-token-use */
16493
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16494
+ outline-offset: calc(-1 * 0.125rem);
16495
+ }
16496
+ @media screen and (prefers-contrast) {
16497
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16498
+ outline-style: dotted;
16499
+ }
16500
+ }
16501
+
16502
+ .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) {
16503
+ color: var(--cds-button-disabled, #c6c6c6);
16504
+ cursor: not-allowed;
16505
+ }
16506
+
16507
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
16508
+ overflow: hidden;
16509
+ padding-right: 1rem;
16510
+ text-overflow: ellipsis;
16511
+ white-space: nowrap;
16512
+ }
16513
+
16514
+ .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 {
16515
+ padding-right: 3rem;
16516
+ }
16517
+
16518
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
16519
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
16520
+ height: 3rem;
16521
+ }
16522
+
16523
+ .c4p--datagrid__inline-edit-button-icon {
16524
+ position: absolute;
16525
+ right: 1rem;
16526
+ }
16527
+
16528
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
16529
+ position: relative;
16530
+ padding: 0;
16531
+ }
16532
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
16533
+ padding-left: 1rem;
16534
+ }
16535
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
16536
+ min-width: auto;
16537
+ padding-right: 1rem;
16538
+ }
16539
+
16540
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
16541
+ padding-bottom: 1rem;
16542
+ padding-left: 1rem;
16543
+ }
16544
+
16545
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16546
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
16547
+ width: inherit;
16548
+ }
16549
+
16550
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16551
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16552
+ width: 100%;
16553
+ height: 3rem;
16554
+ max-height: none;
16555
+ }
16556
+
16557
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
16558
+ width: inherit;
16559
+ }
16560
+
16561
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16562
+ overflow: hidden;
16563
+ width: 100%;
16564
+ max-width: none;
16565
+ padding-right: 2rem;
16566
+ text-overflow: ellipsis;
16567
+ white-space: nowrap;
16568
+ }
16569
+
16570
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
16571
+ border-top-color: var(--cds-layer-hover);
16572
+ background-color: var(--cds-layer-hover);
16573
+ }
16574
+
16575
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
16576
+ position: absolute;
16577
+ z-index: 2;
16578
+ bottom: 0;
16579
+ left: 0;
16580
+ width: 2px;
16581
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16582
+ background-color: var(--cds-link-inverse, #78a9ff);
16583
+ content: "";
16584
+ }
16585
+
16586
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
16587
+ position: absolute;
16588
+ z-index: 2;
16589
+ right: 0;
16590
+ bottom: 0;
16591
+ width: 2px;
16592
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16593
+ background-color: var(--cds-link-inverse, #78a9ff);
16594
+ content: "";
16595
+ }
16596
+
16597
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
16598
+ position: absolute;
16599
+ z-index: 2;
16600
+ top: 0;
16601
+ right: 0;
16602
+ left: 0;
16603
+ width: var(--c4p--datagrid--grid-width);
16604
+ height: 2px;
16605
+ background-color: var(--cds-link-inverse, #78a9ff);
16606
+ }
16607
+
16608
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
16609
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
16610
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
16611
+ }
16612
+
16613
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
16614
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
16615
+ outline-offset: -2px;
16616
+ }
16617
+
16618
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
16619
+ padding-top: 0.125rem;
16620
+ }
16621
+
16622
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
16623
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
16624
+ position: absolute;
16625
+ z-index: 3;
16626
+ top: calc(100% - 0.125rem);
16627
+ width: 100%;
16628
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
16629
+ margin: 0;
16630
+ background-color: var(--cds-layer-01, #f4f4f4);
16631
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
16632
+ outline-offset: calc(-1 * 0.125rem);
16633
+ }
16634
+
16635
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
16636
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16637
+ }
16638
+
16639
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
16640
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
16641
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16642
+ z-index: 4;
16643
+ top: calc(100% + 0.75rem + 0.125rem);
16644
+ right: 0.5rem;
16645
+ }
16646
+
16647
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16648
+ top: calc(100% + 0.25rem + 0.125rem);
16649
+ }
16650
+
16651
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16652
+ position: absolute;
16653
+ top: 0;
16654
+ left: 0.125rem;
16655
+ width: calc(100% - (0.125rem * 2));
16656
+ height: 0.125rem;
16657
+ background-color: var(--cds-layer-01, #f4f4f4);
16658
+ content: "";
16659
+ }
16660
+
16661
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16662
+ position: absolute;
16663
+ top: 0.125rem;
16664
+ left: 0.5rem;
16665
+ width: calc(100% - (0.5rem * 2));
16666
+ height: 1px;
16667
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16668
+ content: "";
16669
+ }
16670
+
16671
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16672
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16673
+ }
16674
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16675
+ background-color: transparent;
16676
+ }
16677
+
16678
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
16679
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
16680
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
16681
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
16682
+ outline-color: var(--cds-support-error, #da1e28);
16683
+ }
16684
+
16685
+ .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 {
16686
+ background-color: var(--cds-support-error, #da1e28);
16687
+ }
16688
+
16235
16689
  /*
16236
16690
  * Licensed Materials - Property of IBM
16237
16691
  * 5724-Q36
@@ -16239,6 +16693,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16239
16693
  * US Government Users Restricted Rights - Use, duplication or disclosure
16240
16694
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16241
16695
  */
16696
+ /* stylelint-disable max-nesting-depth */
16242
16697
  .c4p--datagrid__datagridWrap {
16243
16698
  display: block;
16244
16699
  width: 100%;
@@ -16246,6 +16701,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16246
16701
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
16247
16702
  display: none;
16248
16703
  }
16704
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16705
+ left: 0.125rem;
16706
+ width: 112px;
16707
+ }
16249
16708
 
16250
16709
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16251
16710
  left: 0.125rem;
@@ -16265,4 +16724,43 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16265
16724
  overflow-x: unset;
16266
16725
  }
16267
16726
 
16727
+ /* stylelint-disable max-nesting-depth */
16728
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
16729
+ /* Used id for overriding the SVG path fill */
16730
+ }
16731
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
16732
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
16733
+ background-color: #0050e6;
16734
+ }
16735
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
16736
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
16737
+ box-shadow: none;
16738
+ }
16739
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
16740
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
16741
+ fill: #ffffff;
16742
+ }
16743
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
16744
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
16745
+ background-color: transparent;
16746
+ }
16747
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
16748
+ background-color: #0f62fe;
16749
+ color: #ffffff;
16750
+ }
16751
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
16752
+ animation-duration: 700ms;
16753
+ animation-fill-mode: forwards;
16754
+ animation-iteration-count: infinite;
16755
+ animation-name: rotate;
16756
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
16757
+ }
16758
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
16759
+ background-color: transparent;
16760
+ }
16761
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
16762
+ background-color: #0f62fe;
16763
+ color: #ffffff;
16764
+ }
16765
+
16268
16766
  /*# sourceMappingURL=index.css.map */