@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (331) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1187 -325
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +789 -171
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +4 -8
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +1068 -414
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +981 -267
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +72 -31
  23. package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
  24. package/es/components/AddSelect/AddSelectColumn.js +8 -8
  25. package/es/components/AddSelect/AddSelectFilter.js +10 -7
  26. package/es/components/AddSelect/AddSelectList.js +64 -29
  27. package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
  28. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  29. package/es/components/AddSelect/AddSelectSort.js +2 -2
  30. package/es/components/AddSelect/add-select-utils.js +9 -2
  31. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  32. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  33. package/es/components/AddSelect/hooks/usePath.js +15 -1
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/Card/Card.js +16 -6
  37. package/es/components/Card/CardFooter.js +3 -1
  38. package/es/components/Card/CardHeader.js +20 -1
  39. package/es/components/ComboButton/ComboButton.js +1 -1
  40. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  41. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
  42. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  43. package/es/components/DataSpreadsheet/DataSpreadsheet.js +64 -11
  44. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  45. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  46. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  47. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +40 -0
  48. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  49. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  50. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  51. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  52. package/es/components/Datagrid/Datagrid/DatagridRow.js +53 -6
  53. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  54. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  55. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +9 -6
  56. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  57. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  58. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  60. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  61. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  62. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  63. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  64. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  65. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
  66. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  67. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  68. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  69. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  70. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  71. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  72. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  73. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  74. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  75. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  76. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  77. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  78. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  79. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  80. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  81. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  82. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  83. package/es/components/Datagrid/index.js +3 -1
  84. package/es/components/Datagrid/useActionsColumn.js +28 -12
  85. package/es/components/Datagrid/useColumnOrder.js +8 -0
  86. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  87. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  88. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  89. package/es/components/Datagrid/useExpandedRow.js +0 -1
  90. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  91. package/es/components/Datagrid/useInlineEdit.js +71 -0
  92. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  93. package/es/components/Datagrid/useNestedRows.js +16 -4
  94. package/es/components/Datagrid/useRowExpander.js +12 -4
  95. package/es/components/Datagrid/useRowSize.js +17 -6
  96. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  97. package/es/components/Datagrid/useSelectRows.js +12 -2
  98. package/es/components/Datagrid/useSortableColumns.js +1 -1
  99. package/es/components/Datagrid/useStickyColumn.js +11 -0
  100. package/es/components/Datagrid/utils/DatagridActions.js +236 -0
  101. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  102. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  103. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  104. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  105. package/es/components/Datagrid/utils/makeData.js +47 -2
  106. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  107. package/es/components/EditUpdateCards/index.js +7 -0
  108. package/es/components/ExportModal/ExportModal.js +1 -1
  109. package/es/components/ImportModal/ImportModal.js +3 -3
  110. package/es/components/InlineEdit/InlineEdit.js +28 -426
  111. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  112. package/es/components/InlineEditV1/index.js +7 -0
  113. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  114. package/es/components/InlineEditV2/index.js +7 -0
  115. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  116. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  117. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  118. package/es/components/MultiAddSelect/index.js +6 -0
  119. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  120. package/es/components/OptionsTile/OptionsTile.js +29 -13
  121. package/es/components/PageHeader/PageHeader.js +4 -4
  122. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  123. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  124. package/es/components/RemoveModal/RemoveModal.js +20 -3
  125. package/es/components/Saving/Saving.js +1 -1
  126. package/es/components/SidePanel/SidePanel.js +45 -52
  127. package/es/components/SidePanel/motion/variants.js +45 -0
  128. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  129. package/es/components/SingleAddSelect/index.js +6 -0
  130. package/es/components/StatusIcon/StatusIcon.js +1 -1
  131. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  132. package/es/components/WebTerminal/WebTerminal.js +2 -2
  133. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  134. package/es/components/WebTerminal/hooks/index.js +6 -0
  135. package/es/components/WebTerminal/index.js +6 -0
  136. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  137. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  138. package/es/components/WebTerminal/preview-components/index.js +7 -0
  139. package/es/components/index.js +3 -2
  140. package/es/global/js/hooks/index.js +2 -1
  141. package/es/global/js/hooks/useClickOutside.js +1 -1
  142. package/es/global/js/hooks/useControllableState.js +83 -0
  143. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  144. package/es/global/js/package-settings.js +7 -4
  145. package/es/global/js/utils/getBezierValues.js +20 -0
  146. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  147. package/es/global/js/utils/motionConstants.js +45 -0
  148. package/es/global/js/utils/rangeWithCallback.js +13 -0
  149. package/es/global/js/utils/story-helper.js +5 -1
  150. package/es/global/js/utils/uuidv4.spec.js +4 -0
  151. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  152. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  153. package/lib/components/ActionSet/ActionSet.js +7 -3
  154. package/lib/components/AddSelect/AddSelect.js +5 -6
  155. package/lib/components/AddSelect/AddSelectBody.js +67 -30
  156. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  157. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  158. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  159. package/lib/components/AddSelect/AddSelectList.js +65 -30
  160. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  161. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  162. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  163. package/lib/components/AddSelect/add-select-utils.js +9 -2
  164. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  165. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  166. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  167. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  168. package/lib/components/Card/Card.js +16 -6
  169. package/lib/components/Card/CardFooter.js +3 -1
  170. package/lib/components/Card/CardHeader.js +21 -1
  171. package/lib/components/ComboButton/ComboButton.js +3 -3
  172. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  173. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
  174. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  175. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +64 -10
  176. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  177. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  178. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  179. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +51 -0
  180. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  181. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  182. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  183. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  184. package/lib/components/Datagrid/Datagrid/DatagridRow.js +63 -6
  185. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  186. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  187. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +10 -7
  188. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  189. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  190. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  191. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  192. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  193. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  194. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  195. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  196. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  197. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
  198. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  199. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  200. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  201. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  202. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  203. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  204. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  205. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  206. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  207. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  208. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  209. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  210. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  211. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  212. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  213. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  214. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  215. package/lib/components/Datagrid/index.js +17 -1
  216. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  217. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  218. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  219. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  220. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  221. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  222. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  223. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  224. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  225. package/lib/components/Datagrid/useNestedRows.js +17 -4
  226. package/lib/components/Datagrid/useRowExpander.js +17 -5
  227. package/lib/components/Datagrid/useRowSize.js +18 -13
  228. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  229. package/lib/components/Datagrid/useSelectRows.js +12 -2
  230. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  231. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  232. package/lib/components/Datagrid/utils/DatagridActions.js +260 -0
  233. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  234. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  235. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  236. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  237. package/lib/components/Datagrid/utils/makeData.js +48 -2
  238. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  239. package/lib/components/EditUpdateCards/index.js +13 -0
  240. package/lib/components/ExportModal/ExportModal.js +3 -3
  241. package/lib/components/ImportModal/ImportModal.js +4 -4
  242. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  243. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  244. package/lib/components/InlineEditV1/index.js +13 -0
  245. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  246. package/lib/components/InlineEditV2/index.js +13 -0
  247. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  248. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  249. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  250. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  251. package/lib/components/OptionsTile/OptionsTile.js +34 -17
  252. package/lib/components/PageHeader/PageHeader.js +5 -5
  253. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  254. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  255. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  256. package/lib/components/Saving/Saving.js +5 -5
  257. package/lib/components/SidePanel/SidePanel.js +48 -53
  258. package/lib/components/SidePanel/motion/variants.js +55 -0
  259. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  260. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  261. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  262. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  263. package/lib/components/WebTerminal/hooks/index.js +6 -0
  264. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  265. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  266. package/lib/components/index.js +21 -1
  267. package/lib/global/js/hooks/index.js +9 -1
  268. package/lib/global/js/hooks/useClickOutside.js +1 -1
  269. package/lib/global/js/hooks/useControllableState.js +94 -0
  270. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  271. package/lib/global/js/package-settings.js +7 -4
  272. package/lib/global/js/utils/getBezierValues.js +29 -0
  273. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  274. package/lib/global/js/utils/motionConstants.js +55 -0
  275. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  276. package/lib/global/js/utils/story-helper.js +5 -1
  277. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  278. package/package.json +18 -16
  279. package/scss/components/ActionSet/_action-set.scss +9 -4
  280. package/scss/components/AddSelect/_add-select.scss +132 -34
  281. package/scss/components/AddSelect/_index.scss +1 -1
  282. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  283. package/scss/components/Card/_card.scss +1 -0
  284. package/scss/components/Cascade/_cascade.scss +1 -1
  285. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  286. package/scss/components/Datagrid/_datagrid.scss +7 -0
  287. package/scss/components/Datagrid/_storybook-styles.scss +17 -5
  288. package/scss/components/Datagrid/styles/_datagrid.scss +87 -18
  289. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  290. package/scss/components/Datagrid/styles/_index.scss +1 -0
  291. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  292. package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
  293. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  294. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  295. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  296. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  297. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  298. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  299. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  300. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  301. package/scss/components/EditUpdateCards/_index.scss +8 -0
  302. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  303. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  304. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  305. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  306. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  307. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  308. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  309. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  310. package/scss/components/InlineEditV2/_index.scss +10 -0
  311. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  312. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  313. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  314. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  315. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  316. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  317. package/scss/components/SidePanel/_side-panel.scss +3 -82
  318. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  319. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  320. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  321. package/scss/components/SingleAddSelect/_index.scss +7 -0
  322. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  323. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  324. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  325. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  326. package/scss/components/WebTerminal/_index.scss +7 -0
  327. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  328. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  329. package/scss/components/_index-released-only.scss +2 -1
  330. package/scss/components/_index-with-carbon.scss +3 -1
  331. package/scss/components/_index.scss +3 -1
package/css/index.css CHANGED
@@ -1668,12 +1668,61 @@
1668
1668
  margin-bottom: 0;
1669
1669
  }
1670
1670
 
1671
- .cds--label .cds--tooltip__trigger {
1671
+ .cds--label + .cds--tooltip {
1672
+ position: relative;
1673
+ top: 0.2rem;
1674
+ left: 0.5rem;
1675
+ }
1676
+
1677
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
1678
+ box-sizing: border-box;
1679
+ padding: 0;
1680
+ border: 0;
1681
+ margin: 0;
1682
+ font-family: inherit;
1683
+ font-size: 100%;
1684
+ vertical-align: baseline;
1685
+ display: inline-block;
1686
+ padding: 0;
1687
+ border: 0;
1688
+ appearance: none;
1689
+ background: none;
1690
+ cursor: pointer;
1691
+ text-align: start;
1692
+ width: 100%;
1693
+ display: flex;
1694
+ align-items: center;
1695
+ justify-content: center;
1672
1696
  font-size: var(--cds-label-01-font-size, 0.75rem);
1673
1697
  font-weight: var(--cds-label-01-font-weight, 400);
1674
1698
  line-height: var(--cds-label-01-line-height, 1.33333);
1675
1699
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1676
1700
  }
1701
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
1702
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
1703
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
1704
+ box-sizing: inherit;
1705
+ }
1706
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
1707
+ border: 0;
1708
+ }
1709
+
1710
+ .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
1711
+ outline: 1px solid var(--cds-focus, #0f62fe);
1712
+ }
1713
+
1714
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
1715
+ fill: var(--cds-icon-secondary, #525252);
1716
+ }
1717
+
1718
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
1719
+ fill: var(--cds-icon-primary, #161616);
1720
+ }
1721
+
1722
+ .cds--label + .cds--toggletip {
1723
+ top: 0.2rem;
1724
+ left: 0.5rem;
1725
+ }
1677
1726
 
1678
1727
  .cds--label.cds--skeleton {
1679
1728
  position: relative;
@@ -1715,7 +1764,7 @@ input[data-invalid]:not(:focus),
1715
1764
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1716
1765
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1717
1766
  .cds--list-box[data-invalid]:not(:focus),
1718
- .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) {
1719
1768
  outline: 2px solid var(--cds-support-error, #da1e28);
1720
1769
  outline-offset: -2px;
1721
1770
  }
@@ -1726,7 +1775,7 @@ input[data-invalid]:not(:focus),
1726
1775
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
1727
1776
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
1728
1777
  .cds--list-box[data-invalid]:not(:focus),
1729
- .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) {
1730
1779
  outline-style: dotted;
1731
1780
  }
1732
1781
  }
@@ -2272,6 +2321,9 @@ fieldset[disabled] .cds--form__helper-text {
2272
2321
  z-index: 1;
2273
2322
  top: 0.8125rem;
2274
2323
  left: 1rem;
2324
+ display: flex;
2325
+ height: 1rem;
2326
+ align-items: center;
2275
2327
  margin: 0;
2276
2328
  }
2277
2329
 
@@ -2290,12 +2342,12 @@ fieldset[disabled] .cds--form__helper-text {
2290
2342
  }
2291
2343
 
2292
2344
  .cds--form--fluid .cds--text-input--invalid,
2293
- .cds--form--fluid .cds--text-input--warn {
2345
+ .cds--form--fluid .cds--text-input--warning {
2294
2346
  border-bottom: none;
2295
2347
  }
2296
2348
 
2297
2349
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
2298
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
2350
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
2299
2351
  display: block;
2300
2352
  border-style: solid;
2301
2353
  border-color: var(--cds-border-subtle);
@@ -2307,13 +2359,13 @@ fieldset[disabled] .cds--form__helper-text {
2307
2359
  top: 5rem;
2308
2360
  }
2309
2361
 
2310
- .cds--form--fluid .cds--text-input-wrapper--light {
2311
- 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;
2312
2365
  }
2313
2366
 
2314
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
2315
- outline: 2px solid transparent;
2316
- outline-offset: -2px;
2367
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
2368
+ border-bottom: 1px solid var(--cds-border-strong);
2317
2369
  }
2318
2370
 
2319
2371
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -2326,16 +2378,23 @@ fieldset[disabled] .cds--form__helper-text {
2326
2378
  }
2327
2379
  }
2328
2380
 
2329
- .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 {
2330
2383
  outline: 2px solid var(--cds-focus, #0f62fe);
2331
2384
  outline-offset: -2px;
2332
2385
  }
2333
2386
  @media screen and (prefers-contrast) {
2334
- .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 {
2335
2389
  outline-style: dotted;
2336
2390
  }
2337
2391
  }
2338
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
+
2339
2398
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
2340
2399
  flex-flow: row wrap;
2341
2400
  }
@@ -2569,6 +2628,7 @@ fieldset[disabled] .cds--form__helper-text {
2569
2628
  appearance: none;
2570
2629
  background: none;
2571
2630
  cursor: pointer;
2631
+ text-align: start;
2572
2632
  width: 100%;
2573
2633
  display: flex;
2574
2634
  width: 2.5rem;
@@ -2719,6 +2779,7 @@ fieldset[disabled] .cds--form__helper-text {
2719
2779
  appearance: none;
2720
2780
  background: none;
2721
2781
  cursor: pointer;
2782
+ text-align: start;
2722
2783
  outline: 2px solid transparent;
2723
2784
  outline-offset: -2px;
2724
2785
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -3049,14 +3110,17 @@ fieldset[disabled] .cds--form__helper-text {
3049
3110
  font-weight: var(--cds-body-short-01-font-weight, 400);
3050
3111
  line-height: var(--cds-body-short-01-line-height, 1.28572);
3051
3112
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3052
- height: 4rem;
3053
3113
  align-items: center;
3114
+ margin: 0;
3115
+ }
3116
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
3117
+ height: 4rem;
3054
3118
  padding-top: 1rem;
3055
3119
  padding-bottom: 2rem;
3056
- margin: 0;
3057
3120
  }
3058
3121
 
3059
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
3122
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
3123
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
3060
3124
  max-width: none;
3061
3125
  }
3062
3126
 
@@ -3118,6 +3182,7 @@ fieldset[disabled] .cds--form__helper-text {
3118
3182
  appearance: none;
3119
3183
  background: none;
3120
3184
  cursor: pointer;
3185
+ text-align: start;
3121
3186
  width: 100%;
3122
3187
  outline: 2px solid transparent;
3123
3188
  outline-offset: -2px;
@@ -5011,7 +5076,7 @@ a.cds--overflow-menu-options__btn::before {
5011
5076
  @media (prefers-reduced-motion: no-preference) {
5012
5077
  .c4p--cascade__element,
5013
5078
  .c4p--cascade__col {
5014
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
5079
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
5015
5080
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
5016
5081
  animation-fill-mode: forwards;
5017
5082
  opacity: 0;
@@ -5157,6 +5222,7 @@ a.cds--overflow-menu-options__btn::before {
5157
5222
  appearance: none;
5158
5223
  background: none;
5159
5224
  cursor: pointer;
5225
+ text-align: start;
5160
5226
  width: 100%;
5161
5227
  border-bottom: 1px dotted var(--cds-border-strong);
5162
5228
  border-radius: 0;
@@ -5376,6 +5442,7 @@ a.cds--overflow-menu-options__btn::before {
5376
5442
  appearance: none;
5377
5443
  background: none;
5378
5444
  cursor: pointer;
5445
+ text-align: start;
5379
5446
  width: 100%;
5380
5447
  display: flex;
5381
5448
  text-align: left;
@@ -5583,7 +5650,7 @@ a.cds--overflow-menu-options__btn::before {
5583
5650
  }
5584
5651
 
5585
5652
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5586
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5653
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5587
5654
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5588
5655
  }
5589
5656
 
@@ -5658,7 +5725,7 @@ a.cds--overflow-menu-options__btn::before {
5658
5725
 
5659
5726
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5660
5727
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5661
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
5728
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5662
5729
  color: Highlight;
5663
5730
  outline: 1px solid Highlight;
5664
5731
  }
@@ -5953,26 +6020,6 @@ a.cds--overflow-menu-options__btn::before {
5953
6020
  margin-bottom: 0;
5954
6021
  }
5955
6022
 
5956
- @keyframes side-panel-exit-left {
5957
- 0% {
5958
- opacity: 1;
5959
- transform: translateX(0);
5960
- }
5961
- 100% {
5962
- opacity: 0;
5963
- transform: translateX(calc(-1 * 30rem));
5964
- }
5965
- }
5966
- @keyframes side-panel-exit-right {
5967
- 0% {
5968
- opacity: 1;
5969
- transform: translateX(0);
5970
- }
5971
- 100% {
5972
- opacity: 0;
5973
- transform: translateX(30rem);
5974
- }
5975
- }
5976
6023
  .c4p--side-panel__container {
5977
6024
  --c4p--side-panel--subtitle-opacity: 1;
5978
6025
  --c4p--side-panel--title-container-height: 0;
@@ -5992,8 +6039,6 @@ a.cds--overflow-menu-options__btn::before {
5992
6039
  box-sizing: border-box;
5993
6040
  background-color: var(--cds-layer-01, #f4f4f4);
5994
6041
  color: var(--cds-text-primary, #161616);
5995
- transition: transform 240ms;
5996
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5997
6042
  }
5998
6043
  .c4p--side-panel__container.c4p--side-panel__container--xs {
5999
6044
  width: 16rem;
@@ -6007,37 +6052,13 @@ a.cds--overflow-menu-options__btn::before {
6007
6052
  max-width: 100%;
6008
6053
  }
6009
6054
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
6010
- width: 16rem;
6011
- max-width: 100%;
6012
6055
  right: 0;
6013
6056
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6014
6057
  }
6015
- @keyframes side-panel-entrance-right {
6016
- 0% {
6017
- opacity: 0;
6018
- transform: translateX(16rem);
6019
- }
6020
- 100% {
6021
- opacity: 1;
6022
- transform: translateX(0);
6023
- }
6024
- }
6025
6058
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
6026
- width: 16rem;
6027
- max-width: 100%;
6028
6059
  left: 0;
6029
6060
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6030
6061
  }
6031
- @keyframes side-panel-entrance-left {
6032
- 0% {
6033
- opacity: 0;
6034
- transform: translateX(-16rem);
6035
- }
6036
- 100% {
6037
- opacity: 1;
6038
- transform: translateX(0);
6039
- }
6040
- }
6041
6062
  .c4p--side-panel__container.c4p--side-panel__container--sm {
6042
6063
  width: 20rem;
6043
6064
  max-width: 100%;
@@ -6050,37 +6071,13 @@ a.cds--overflow-menu-options__btn::before {
6050
6071
  max-width: 100%;
6051
6072
  }
6052
6073
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
6053
- width: 20rem;
6054
- max-width: 100%;
6055
6074
  right: 0;
6056
6075
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6057
6076
  }
6058
- @keyframes side-panel-entrance-right {
6059
- 0% {
6060
- opacity: 0;
6061
- transform: translateX(20rem);
6062
- }
6063
- 100% {
6064
- opacity: 1;
6065
- transform: translateX(0);
6066
- }
6067
- }
6068
6077
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
6069
- width: 20rem;
6070
- max-width: 100%;
6071
6078
  left: 0;
6072
6079
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6073
6080
  }
6074
- @keyframes side-panel-entrance-left {
6075
- 0% {
6076
- opacity: 0;
6077
- transform: translateX(-20rem);
6078
- }
6079
- 100% {
6080
- opacity: 1;
6081
- transform: translateX(0);
6082
- }
6083
- }
6084
6081
  .c4p--side-panel__container.c4p--side-panel__container--md {
6085
6082
  width: 30rem;
6086
6083
  max-width: 100%;
@@ -6093,37 +6090,13 @@ a.cds--overflow-menu-options__btn::before {
6093
6090
  max-width: 100%;
6094
6091
  }
6095
6092
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
6096
- width: 30rem;
6097
- max-width: 100%;
6098
6093
  right: 0;
6099
6094
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6100
6095
  }
6101
- @keyframes side-panel-entrance-right {
6102
- 0% {
6103
- opacity: 0;
6104
- transform: translateX(30rem);
6105
- }
6106
- 100% {
6107
- opacity: 1;
6108
- transform: translateX(0);
6109
- }
6110
- }
6111
6096
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
6112
- width: 30rem;
6113
- max-width: 100%;
6114
6097
  left: 0;
6115
6098
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6116
6099
  }
6117
- @keyframes side-panel-entrance-left {
6118
- 0% {
6119
- opacity: 0;
6120
- transform: translateX(-30rem);
6121
- }
6122
- 100% {
6123
- opacity: 1;
6124
- transform: translateX(0);
6125
- }
6126
- }
6127
6100
  .c4p--side-panel__container.c4p--side-panel__container--lg {
6128
6101
  width: 40rem;
6129
6102
  max-width: 100%;
@@ -6136,37 +6109,13 @@ a.cds--overflow-menu-options__btn::before {
6136
6109
  max-width: 100%;
6137
6110
  }
6138
6111
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
6139
- width: 40rem;
6140
- max-width: 100%;
6141
6112
  right: 0;
6142
6113
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6143
6114
  }
6144
- @keyframes side-panel-entrance-right {
6145
- 0% {
6146
- opacity: 0;
6147
- transform: translateX(40rem);
6148
- }
6149
- 100% {
6150
- opacity: 1;
6151
- transform: translateX(0);
6152
- }
6153
- }
6154
6115
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
6155
- width: 40rem;
6156
- max-width: 100%;
6157
6116
  left: 0;
6158
6117
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6159
6118
  }
6160
- @keyframes side-panel-entrance-left {
6161
- 0% {
6162
- opacity: 0;
6163
- transform: translateX(-40rem);
6164
- }
6165
- 100% {
6166
- opacity: 1;
6167
- transform: translateX(0);
6168
- }
6169
- }
6170
6119
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
6171
6120
  width: 75%;
6172
6121
  max-width: 100%;
@@ -6179,37 +6128,13 @@ a.cds--overflow-menu-options__btn::before {
6179
6128
  max-width: 100%;
6180
6129
  }
6181
6130
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
6182
- width: 75%;
6183
- max-width: 100%;
6184
6131
  right: 0;
6185
6132
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6186
6133
  }
6187
- @keyframes side-panel-entrance-right {
6188
- 0% {
6189
- opacity: 0;
6190
- transform: translateX(75%);
6191
- }
6192
- 100% {
6193
- opacity: 1;
6194
- transform: translateX(0);
6195
- }
6196
- }
6197
6134
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
6198
- width: 75%;
6199
- max-width: 100%;
6200
6135
  left: 0;
6201
6136
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
6202
6137
  }
6203
- @keyframes side-panel-entrance-left {
6204
- 0% {
6205
- opacity: 0;
6206
- transform: translateX(-75%);
6207
- }
6208
- 100% {
6209
- opacity: 1;
6210
- transform: translateX(0);
6211
- }
6212
- }
6213
6138
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
6214
6139
  /* stylelint-disable-next-line max-nesting-depth */
6215
6140
  }
@@ -6342,10 +6267,7 @@ a.cds--overflow-menu-options__btn::before {
6342
6267
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
6343
6268
  position: fixed;
6344
6269
  z-index: 2;
6345
- top: calc(
6346
- var(--c4p--side-panel--title-text-height) +
6347
- var(--c4p--side-panel--label-text-height) + 3rem
6348
- );
6270
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6349
6271
  background-color: var(--cds-layer-01, #f4f4f4);
6350
6272
  }
6351
6273
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -6360,7 +6282,6 @@ a.cds--overflow-menu-options__btn::before {
6360
6282
  }
6361
6283
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
6362
6284
  position: fixed;
6363
- top: 3rem;
6364
6285
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
6365
6286
  }
6366
6287
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -6381,10 +6302,7 @@ a.cds--overflow-menu-options__btn::before {
6381
6302
  }
6382
6303
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
6383
6304
  position: fixed;
6384
- top: calc(
6385
- var(--c4p--side-panel--title-text-height) +
6386
- var(--c4p--side-panel--subtitle-container-height) + 3rem
6387
- );
6305
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
6388
6306
  width: 100%;
6389
6307
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
6390
6308
  }
@@ -6409,8 +6327,7 @@ a.cds--overflow-menu-options__btn::before {
6409
6327
  padding: 0 1rem;
6410
6328
  margin-bottom: 0.5rem;
6411
6329
  background-color: var(--cds-layer-01, #f4f4f4);
6412
- transition: transform 150ms;
6413
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6330
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
6414
6331
  }
6415
6332
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
6416
6333
  min-width: 2rem;
@@ -6541,8 +6458,6 @@ a.cds--overflow-menu-options__btn::before {
6541
6458
  width: 100%;
6542
6459
  height: 100%;
6543
6460
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
6544
- transition: background-color 240ms;
6545
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
6546
6461
  }
6547
6462
 
6548
6463
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -6689,7 +6604,7 @@ a.cds--overflow-menu-options__btn::before {
6689
6604
  /* stylelint-disable-next-line function-no-unknown */
6690
6605
  z-index: 9000;
6691
6606
  align-items: flex-end;
6692
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6607
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
6693
6608
  }
6694
6609
  @media (prefers-reduced-motion: reduce) {
6695
6610
  .c4p--tearsheet.is-visible {
@@ -8279,7 +8194,6 @@ a.cds--overflow-menu-options__btn::before {
8279
8194
 
8280
8195
  /* stylelint-disable max-nesting-depth */
8281
8196
  .c4p--add-select__selections.cds--structured-list {
8282
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8283
8197
  margin-bottom: 0;
8284
8198
  }
8285
8199
  .c4p--add-select__selections-wrapper {
@@ -8287,8 +8201,11 @@ a.cds--overflow-menu-options__btn::before {
8287
8201
  }
8288
8202
  .c4p--add-select__selections-cell-wrapper {
8289
8203
  display: flex;
8204
+ height: 3rem;
8290
8205
  align-items: center;
8291
8206
  justify-content: space-between;
8207
+ padding: 0 1rem;
8208
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8292
8209
  }
8293
8210
  .c4p--add-select__selections-cell-title {
8294
8211
  display: block;
@@ -8302,17 +8219,21 @@ a.cds--overflow-menu-options__btn::before {
8302
8219
  display: block;
8303
8220
  color: var(--cds-text-secondary, #525252);
8304
8221
  }
8305
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
8222
+ .c4p--add-select__selections-cell {
8223
+ display: flex;
8224
+ flex-direction: column;
8225
+ justify-content: center;
8226
+ }
8227
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
8228
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
8306
8229
  visibility: visible;
8307
8230
  }
8308
8231
  .c4p--add-select__selections-hidden-hover {
8309
8232
  visibility: hidden;
8310
8233
  }
8311
- .c4p--add-select__selections-row-selected {
8312
- background: #e5e5e5;
8313
- }
8314
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
8315
- visibility: visible;
8234
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
8235
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
8236
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
8316
8237
  }
8317
8238
  .c4p--add-select__selections-checkbox {
8318
8239
  display: flex;
@@ -8320,7 +8241,7 @@ a.cds--overflow-menu-options__btn::before {
8320
8241
  }
8321
8242
  .c4p--add-select__selections-checkbox-label-wrapper {
8322
8243
  display: flex;
8323
- margin-left: 0.5rem;
8244
+ margin-left: 1rem;
8324
8245
  }
8325
8246
  .c4p--add-select__selections-checkbox-label-text {
8326
8247
  display: flex;
@@ -8338,6 +8259,13 @@ a.cds--overflow-menu-options__btn::before {
8338
8259
  .c4p--add-select__selections-cell-icon {
8339
8260
  margin-right: 0.5rem;
8340
8261
  }
8262
+ .c4p--add-select__selections-row {
8263
+ border-left: 0.125rem solid transparent;
8264
+ }
8265
+ .c4p--add-select__selections-row-meta--selected {
8266
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
8267
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
8268
+ }
8341
8269
 
8342
8270
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
8343
8271
  color: var(--cds-interactive, #0f62fe);
@@ -8354,10 +8282,21 @@ a.cds--overflow-menu-options__btn::before {
8354
8282
  align-items: flex-end;
8355
8283
  justify-content: space-between;
8356
8284
  }
8285
+ .c4p--add-select__sub-header-multi {
8286
+ padding: 0 1rem;
8287
+ }
8288
+
8289
+ .c4p--add-select .cds--structured-list-row {
8290
+ border-bottom: 0;
8291
+ }
8292
+
8293
+ .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) {
8294
+ border-bottom: 0;
8295
+ }
8357
8296
 
8358
8297
  .c4p--add-select__sidebar-header {
8359
8298
  display: flex;
8360
- padding: 1.5rem 1rem 0.5rem 1rem;
8299
+ padding: 2rem 1rem 0.5rem 1rem;
8361
8300
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
8362
8301
  }
8363
8302
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -8383,7 +8322,7 @@ a.cds--overflow-menu-options__btn::before {
8383
8322
  }
8384
8323
 
8385
8324
  .c4p--add-select__sidebar-body {
8386
- padding: 1rem;
8325
+ padding: 0 1rem;
8387
8326
  }
8388
8327
 
8389
8328
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -8416,18 +8355,44 @@ a.cds--overflow-menu-options__btn::before {
8416
8355
  .c4p--add-select__columns {
8417
8356
  display: flex;
8418
8357
  flex-direction: row;
8358
+ flex-grow: 1;
8419
8359
  overflow-x: auto;
8420
8360
  }
8361
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
8362
+ margin-left: 0.5rem;
8363
+ }
8364
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
8365
+ border-left: 0;
8366
+ }
8367
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
8368
+ padding: 0;
8369
+ }
8370
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
8371
+ height: auto;
8372
+ padding: 0 0.5rem;
8373
+ }
8374
+ .c4p--add-select__columns .c4p--add-select__tags {
8375
+ padding: 0 0.5rem;
8376
+ margin-bottom: 0;
8377
+ }
8378
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
8379
+ padding: 0;
8380
+ }
8381
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
8382
+ border-top: 0;
8383
+ }
8421
8384
 
8422
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
8423
- height: 0;
8424
- padding: 0 !important;
8385
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
8386
+ padding: 0 1rem;
8387
+ }
8388
+
8389
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8390
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8425
8391
  }
8426
8392
 
8427
8393
  .c4p--add-select__column {
8428
8394
  overflow: auto;
8429
- max-width: 15rem;
8430
- flex: 1 0 15rem;
8395
+ flex: 0 0 20rem;
8431
8396
  padding: 1rem;
8432
8397
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8433
8398
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -8445,13 +8410,13 @@ a.cds--overflow-menu-options__btn::before {
8445
8410
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
8446
8411
  }
8447
8412
 
8448
- .c4p--add-select__tag-container {
8413
+ .c4p--add-select__tags {
8449
8414
  display: flex;
8450
8415
  align-items: center;
8451
8416
  margin-top: 1rem;
8452
8417
  margin-bottom: 0.5rem;
8453
8418
  }
8454
- .c4p--add-select__tag-container-label {
8419
+ .c4p--add-select__tags-label {
8455
8420
  margin-right: 0.5rem;
8456
8421
  }
8457
8422
 
@@ -8526,13 +8491,6 @@ button.c4p--add-select__global-filter-toggle--open {
8526
8491
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
8527
8492
  }
8528
8493
 
8529
- .c4p--add-select .cds--structured-list-td {
8530
- height: 3rem;
8531
- padding-top: 0;
8532
- padding-bottom: 0;
8533
- vertical-align: middle;
8534
- }
8535
-
8536
8494
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
8537
8495
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
8538
8496
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -8540,13 +8498,16 @@ button.c4p--add-select__global-filter-toggle--open {
8540
8498
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8541
8499
  }
8542
8500
 
8543
- .c4p--add-select__tag-container .cds--tag {
8501
+ .c4p--add-select__selections .cds--list-box__menu {
8502
+ left: auto;
8503
+ }
8504
+
8505
+ .c4p--add-select__tags .cds--tag {
8544
8506
  margin: 0;
8545
8507
  }
8546
8508
 
8547
8509
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
8548
- max-width: 29rem;
8549
- flex: 0 0 50%;
8510
+ flex-basis: 22.5rem;
8550
8511
  }
8551
8512
 
8552
8513
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -8558,6 +8519,10 @@ button.c4p--add-select__global-filter-toggle--open {
8558
8519
  flex-direction: column;
8559
8520
  }
8560
8521
 
8522
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
8523
+ max-width: 11.25rem;
8524
+ }
8525
+
8561
8526
  .c4p--add-select .c4p--add-select__items-label {
8562
8527
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
8563
8528
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -8598,19 +8563,46 @@ button.c4p--add-select__global-filter-toggle--open {
8598
8563
  padding-left: 0.5rem;
8599
8564
  }
8600
8565
 
8601
- .cds--tooltip,
8602
- .cds--overflow-menu-options {
8603
- z-index: 9000;
8566
+ .c4p--add-select__multi .c4p--empty-state {
8567
+ max-width: 16rem;
8568
+ margin-top: 3rem;
8604
8569
  }
8605
8570
 
8606
- @keyframes fade-in {
8607
- 0% {
8608
- opacity: 0;
8609
- transform: translateY(-38.5rem);
8610
- }
8611
- 100% {
8612
- opacity: 1;
8613
- transform: translateY(0);
8571
+ .c4p--add-select .cds--accordion__arrow {
8572
+ transform: rotate(0deg);
8573
+ }
8574
+
8575
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
8576
+ transform: rotate(90deg);
8577
+ }
8578
+
8579
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
8580
+ margin: 0 0 0 1rem;
8581
+ }
8582
+
8583
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
8584
+ margin: 0 1rem 0 0.5rem;
8585
+ }
8586
+
8587
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
8588
+ padding-top: 0;
8589
+ padding-bottom: 0;
8590
+ margin-top: 0.5rem;
8591
+ }
8592
+
8593
+ .c4p--add-select .cds--tooltip,
8594
+ .c4p--add-select .cds--overflow-menu-options {
8595
+ z-index: 9000;
8596
+ }
8597
+
8598
+ @keyframes fade-in {
8599
+ 0% {
8600
+ opacity: 0;
8601
+ transform: translateY(-38.5rem);
8602
+ }
8603
+ 100% {
8604
+ opacity: 1;
8605
+ transform: translateY(0);
8614
8606
  }
8615
8607
  }
8616
8608
  @keyframes fade-out {
@@ -8744,6 +8736,10 @@ button.c4p--add-select__global-filter-toggle--open {
8744
8736
  --cds-helper-text-01-font-size: 0.75rem;
8745
8737
  --cds-helper-text-01-line-height: 1.33333;
8746
8738
  --cds-helper-text-01-letter-spacing: 0.32px;
8739
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8740
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8741
+ --cds-helper-text-02-line-height: 1.28572;
8742
+ --cds-helper-text-02-letter-spacing: 0.16px;
8747
8743
  --cds-body-short-01-font-size: 0.875rem;
8748
8744
  --cds-body-short-01-font-weight: 400;
8749
8745
  --cds-body-short-01-line-height: 1.28572;
@@ -8997,8 +8993,7 @@ button.c4p--add-select__global-filter-toggle--open {
8997
8993
  max-height: 38.5rem;
8998
8994
  background-color: var(--cds-background, #ffffff);
8999
8995
  color: var(--cds-text-primary, #161616);
9000
- transition: transform 110ms;
9001
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
8996
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
9002
8997
  }
9003
8998
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
9004
8999
  position: sticky;
@@ -9072,8 +9067,7 @@ button.c4p--add-select__global-filter-toggle--open {
9072
9067
  background-color: var(--cds-background, #ffffff);
9073
9068
  cursor: pointer;
9074
9069
  text-align: left;
9075
- transition: background-color 240ms;
9076
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9070
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9077
9071
  }
9078
9072
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
9079
9073
  margin-bottom: 0.25rem;
@@ -9186,8 +9180,7 @@ button.c4p--add-select__global-filter-toggle--open {
9186
9180
  margin: 0 auto;
9187
9181
  background-color: var(--cds-layer-02, #ffffff);
9188
9182
  content: "";
9189
- transition: background-color 240ms;
9190
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
9183
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9191
9184
  }
9192
9185
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
9193
9186
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -12290,10 +12283,6 @@ button.c4p--add-select__global-filter-toggle--open {
12290
12283
  padding-right: 1rem;
12291
12284
  }
12292
12285
 
12293
- .c4p--remove-modal .cds--modal-close {
12294
- display: none;
12295
- }
12296
-
12297
12286
  .c4p--remove-modal__body {
12298
12287
  padding-right: 20%;
12299
12288
  margin-bottom: 1rem;
@@ -13036,6 +13025,7 @@ button.c4p--add-select__global-filter-toggle--open {
13036
13025
  appearance: none;
13037
13026
  background: none;
13038
13027
  cursor: pointer;
13028
+ text-align: start;
13039
13029
  outline: 2px solid transparent;
13040
13030
  outline-offset: -2px;
13041
13031
  position: absolute;
@@ -13498,13 +13488,13 @@ button.c4p--add-select__global-filter-toggle--open {
13498
13488
  .cds--popover--left-top .cds--popover-content {
13499
13489
  top: -50%;
13500
13490
  right: 100%;
13501
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13491
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13502
13492
  }
13503
13493
 
13504
13494
  .cds--popover--left-bottom .cds--popover-content {
13505
13495
  right: 100%;
13506
13496
  bottom: -50%;
13507
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13497
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13508
13498
  }
13509
13499
 
13510
13500
  .cds--popover--left .cds--popover-content::before,
@@ -13725,6 +13715,10 @@ button.c4p--add-select__global-filter-toggle--open {
13725
13715
  --cds-helper-text-01-font-size: 0.75rem;
13726
13716
  --cds-helper-text-01-line-height: 1.33333;
13727
13717
  --cds-helper-text-01-letter-spacing: 0.32px;
13718
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
13719
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
13720
+ --cds-helper-text-02-line-height: 1.28572;
13721
+ --cds-helper-text-02-letter-spacing: 0.16px;
13728
13722
  --cds-body-short-01-font-size: 0.875rem;
13729
13723
  --cds-body-short-01-font-weight: 400;
13730
13724
  --cds-body-short-01-line-height: 1.28572;
@@ -14142,6 +14136,10 @@ button.c4p--add-select__global-filter-toggle--open {
14142
14136
  --cds-helper-text-01-font-size: 0.75rem;
14143
14137
  --cds-helper-text-01-line-height: 1.33333;
14144
14138
  --cds-helper-text-01-letter-spacing: 0.32px;
14139
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
14140
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
14141
+ --cds-helper-text-02-line-height: 1.28572;
14142
+ --cds-helper-text-02-letter-spacing: 0.16px;
14145
14143
  --cds-body-short-01-font-size: 0.875rem;
14146
14144
  --cds-body-short-01-font-weight: 400;
14147
14145
  --cds-body-short-01-line-height: 1.28572;
@@ -14948,7 +14946,9 @@ button.c4p--add-select__global-filter-toggle--open {
14948
14946
  display: inline-block;
14949
14947
  overflow: hidden;
14950
14948
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14951
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
14949
+ max-width: calc(
14950
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
14951
+ );
14952
14952
  min-height: var(--c4p--inline-edit--size);
14953
14953
  /* stylelint-disable-next-line carbon/layout-token-use */
14954
14954
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -15151,6 +15151,74 @@ button.c4p--add-select__global-filter-toggle--open {
15151
15151
  color: var(--cds-support-error, #da1e28);
15152
15152
  }
15153
15153
 
15154
+ .c4p--inline-edit-v2 {
15155
+ display: flex;
15156
+ align-items: center;
15157
+ background: transparent;
15158
+ cursor: pointer;
15159
+ }
15160
+
15161
+ .c4p--inline-edit-v2-readonly {
15162
+ cursor: not-allowed;
15163
+ }
15164
+
15165
+ .c4p--inline-edit-v2:hover {
15166
+ background: var(--cds-field-01, #f4f4f4);
15167
+ }
15168
+
15169
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
15170
+ visibility: visible;
15171
+ }
15172
+
15173
+ .c4p--inline-edit-v2__btn-edit {
15174
+ visibility: hidden;
15175
+ }
15176
+
15177
+ .c4p--inline-edit-v2-focused {
15178
+ background: var(--cds-field-01, #f4f4f4);
15179
+ outline: 2px solid var(--cds-focus, #0f62fe);
15180
+ }
15181
+
15182
+ .c4p--inline-edit-v2__text-input {
15183
+ flex: 1;
15184
+ }
15185
+
15186
+ .c4p--inline-edit-v2__text-input-label {
15187
+ display: none;
15188
+ }
15189
+
15190
+ .c4p--inline-edit-v2__warning-icon {
15191
+ /* stylelint-disable-next-line carbon/layout-token-use */
15192
+ margin-right: 0.4375rem;
15193
+ color: var(--cds-support-error, #da1e28);
15194
+ }
15195
+
15196
+ .c4p--inline-edit-v2__warning-text {
15197
+ font-size: var(--cds-label-01-font-size, 0.75rem);
15198
+ font-weight: var(--cds-label-01-font-weight, 400);
15199
+ line-height: var(--cds-label-01-line-height, 1.33333);
15200
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
15201
+ margin-top: 0.5rem;
15202
+ color: var(--cds-support-error, #da1e28);
15203
+ }
15204
+
15205
+ .c4p--inline-edit-v2__text-input.cds--text-input {
15206
+ border: none;
15207
+ background: transparent;
15208
+ cursor: pointer;
15209
+ outline: none;
15210
+ }
15211
+
15212
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
15213
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
15214
+ cursor: not-allowed;
15215
+ }
15216
+
15217
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
15218
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
15219
+ outline: none;
15220
+ }
15221
+
15154
15222
  .c4p--data-spreadsheet {
15155
15223
  --c4p--data-spreadsheet--total-width: 0;
15156
15224
  display: inline-block;
@@ -15439,6 +15507,11 @@ button.c4p--add-select__global-filter-toggle--open {
15439
15507
  align-items: center;
15440
15508
  color: var(--cds-text-primary, #161616);
15441
15509
  }
15510
+ .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 {
15511
+ position: sticky;
15512
+ z-index: 1;
15513
+ left: 0;
15514
+ }
15442
15515
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
15443
15516
  align-items: center;
15444
15517
  padding-top: 0;
@@ -15455,6 +15528,11 @@ button.c4p--add-select__global-filter-toggle--open {
15455
15528
  align-items: center;
15456
15529
  padding-top: 0;
15457
15530
  }
15531
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
15532
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
15533
+ position: sticky;
15534
+ left: 0;
15535
+ }
15458
15536
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
15459
15537
  display: flex;
15460
15538
  height: 100%;
@@ -15514,9 +15592,12 @@ button.c4p--add-select__global-filter-toggle--open {
15514
15592
  height: 100%;
15515
15593
  overflow-x: auto;
15516
15594
  }
15517
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
15518
- overflow: hidden;
15595
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
15596
+ display: flex;
15597
+ overflow: auto;
15519
15598
  max-height: 100%;
15599
+ flex-direction: column;
15600
+ background-color: var(--cds-layer-01, #f4f4f4);
15520
15601
  }
15521
15602
  .c4p--datagrid__grid-container .c4p--datagrid__head {
15522
15603
  display: flex;
@@ -15547,6 +15628,12 @@ button.c4p--add-select__global-filter-toggle--open {
15547
15628
  text-overflow: ellipsis;
15548
15629
  white-space: nowrap;
15549
15630
  }
15631
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
15632
+ display: -webkit-box;
15633
+ -webkit-box-orient: vertical;
15634
+ -webkit-line-clamp: 2;
15635
+ white-space: initial;
15636
+ }
15550
15637
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
15551
15638
  display: flex;
15552
15639
  overflow: hidden;
@@ -15598,10 +15685,6 @@ button.c4p--add-select__global-filter-toggle--open {
15598
15685
  flex: 1 1 auto;
15599
15686
  }
15600
15687
 
15601
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
15602
- border-bottom: none;
15603
- }
15604
-
15605
15688
  .c4p--datagrid__resizer {
15606
15689
  position: absolute;
15607
15690
  z-index: 1;
@@ -15641,6 +15724,12 @@ button.c4p--add-select__global-filter-toggle--open {
15641
15724
  .c4p--datagrid__head-hidden-select-all {
15642
15725
  padding-right: 2.5rem;
15643
15726
  }
15727
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15728
+ position: sticky;
15729
+ z-index: 1;
15730
+ left: 0;
15731
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
15732
+ }
15644
15733
 
15645
15734
  .c4p--datagrid__simple-body {
15646
15735
  position: relative;
@@ -15664,15 +15753,6 @@ button.c4p--add-select__global-filter-toggle--open {
15664
15753
  min-width: 0 !important;
15665
15754
  }
15666
15755
 
15667
- .c4p--datagrid__table-simple::-webkit-scrollbar {
15668
- width: 6px;
15669
- background-color: var(--cds-background, #ffffff);
15670
- }
15671
-
15672
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
15673
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
15674
- }
15675
-
15676
15756
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
15677
15757
  overflow: auto;
15678
15758
  }
@@ -15734,8 +15814,22 @@ button.c4p--add-select__global-filter-toggle--open {
15734
15814
  max-height: 100%;
15735
15815
  }
15736
15816
 
15737
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
15738
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
15817
+ .c4p--datagrid__carbon-row-expanded {
15818
+ position: relative;
15819
+ }
15820
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
15821
+ position: absolute;
15822
+ z-index: 2;
15823
+ /* stylelint-disable-next-line carbon/layout-token-use */
15824
+ top: var(--c4p--datagrid--row-height);
15825
+ /* stylelint-disable-next-line carbon/layout-token-use */
15826
+ left: calc(
15827
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
15828
+ );
15829
+ width: 1px;
15830
+ height: var(--c4p--datagrid--indicator-height);
15831
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
15832
+ content: "";
15739
15833
  }
15740
15834
 
15741
15835
  .c4p--datagrid .cds--data-table-header {
@@ -15820,10 +15914,53 @@ button.c4p--add-select__global-filter-toggle--open {
15820
15914
  margin: 0;
15821
15915
  }
15822
15916
 
15917
+ .c4p--datagrid .c4p--button-menu {
15918
+ height: 3rem;
15919
+ }
15920
+
15921
+ .c4p--datagrid .c4p--datagrid__row-size-button {
15922
+ display: flex;
15923
+ width: 3rem;
15924
+ height: 3rem;
15925
+ justify-content: center;
15926
+ }
15927
+
15928
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
15929
+ overflow: hidden;
15930
+ height: 100vh;
15931
+ }
15932
+
15933
+ .c4p--datagrid .cds--modal {
15934
+ width: 100%;
15935
+ }
15936
+
15937
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
15938
+ flex-shrink: 0;
15939
+ background-color: var(--cds-interactive, #0f62fe);
15940
+ }
15941
+
15942
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
15943
+ fill: var(--cds-background, #ffffff);
15944
+ }
15945
+
15946
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
15947
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
15948
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
15949
+ background-color: var(--cds-button-primary-hover, #0050e6);
15950
+ }
15951
+
15952
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
15953
+ background-color: transparent;
15954
+ }
15955
+
15956
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
15957
+ position: absolute;
15958
+ }
15959
+
15823
15960
  /*
15824
15961
  * Licensed Materials - Property of IBM
15825
15962
  * 5724-Q36
15826
- * (c) Copyright IBM Corp. 2020 - 2021
15963
+ * (c) Copyright IBM Corp. 2020 - 2022
15827
15964
  * US Government Users Restricted Rights - Use, duplication or disclosure
15828
15965
  * restricted by GSA ADP Schedule Contract with IBM Corp.
15829
15966
  */
@@ -15834,6 +15971,33 @@ button.c4p--add-select__global-filter-toggle--open {
15834
15971
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15835
15972
  }
15836
15973
 
15974
+ .c4p--datagrid .c4p--datagrid__expander-icon {
15975
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15976
+ }
15977
+
15978
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
15979
+ transform: rotate(90deg);
15980
+ }
15981
+
15982
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
15983
+ border-bottom: none;
15984
+ }
15985
+
15986
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
15987
+ position: relative;
15988
+ }
15989
+
15990
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
15991
+ position: absolute;
15992
+ /* stylelint-disable-next-line carbon/layout-token-use */
15993
+ top: -1px;
15994
+ left: 0;
15995
+ width: 100%;
15996
+ height: 1px;
15997
+ background-color: var(--cds-border-subtle);
15998
+ content: "";
15999
+ }
16000
+
15837
16001
  /*
15838
16002
  * Licensed Materials - Property of IBM
15839
16003
  * 5724-Q36
@@ -15962,14 +16126,36 @@ button.c4p--add-select__global-filter-toggle--open {
15962
16126
  /* stylelint-disable-next-line declaration-no-important */
15963
16127
  position: sticky !important;
15964
16128
  right: 0;
15965
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16129
+ display: flex;
16130
+ align-items: center;
16131
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
15966
16132
  }
15967
16133
 
15968
16134
  .c4p--datagrid__right-sticky-column-header {
15969
16135
  /* stylelint-disable-next-line declaration-no-important */
15970
16136
  position: sticky !important;
15971
16137
  right: 0;
15972
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
16138
+ }
16139
+
16140
+ .c4p--datagrid__left-sticky-column-cell {
16141
+ /* stylelint-disable-next-line declaration-no-important */
16142
+ position: sticky !important;
16143
+ left: 0;
16144
+ display: flex;
16145
+ align-items: center;
16146
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16147
+ }
16148
+
16149
+ .c4p--datagrid__left-sticky-column-header {
16150
+ /* stylelint-disable-next-line declaration-no-important */
16151
+ position: sticky !important;
16152
+ z-index: 1;
16153
+ left: 0;
16154
+ }
16155
+
16156
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16157
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16158
+ left: 2.5rem;
15973
16159
  }
15974
16160
 
15975
16161
  .c4p--datagrid__sticky-noShadow {
@@ -15985,6 +16171,12 @@ button.c4p--add-select__global-filter-toggle--open {
15985
16171
  right: 6px !important;
15986
16172
  }
15987
16173
 
16174
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
16175
+ position: sticky;
16176
+ z-index: 1;
16177
+ left: 0;
16178
+ }
16179
+
15988
16180
  /*
15989
16181
  * Licensed Materials - Property of IBM
15990
16182
  * 5724-Q36
@@ -16007,6 +16199,18 @@ button.c4p--add-select__global-filter-toggle--open {
16007
16199
  margin-bottom: 0.5rem;
16008
16200
  }
16009
16201
 
16202
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
16203
+ cursor: not-allowed;
16204
+ }
16205
+
16206
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
16207
+ pointer-events: none;
16208
+ }
16209
+
16210
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
16211
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
16212
+ }
16213
+
16010
16214
  /*
16011
16215
  * Licensed Materials - Property of IBM
16012
16216
  * 5724-Q36
@@ -16018,21 +16222,30 @@ button.c4p--add-select__global-filter-toggle--open {
16018
16222
  position: inherit;
16019
16223
  display: flex;
16020
16224
  flex-flow: column;
16021
- /* stylelint-disable-next-line declaration-no-important */
16022
- padding-top: 0 !important;
16225
+ padding: 0;
16226
+ margin: 0;
16023
16227
  }
16024
16228
 
16025
- .c4p--datagrid__customize-columns-checkbox {
16229
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16230
+ margin-bottom: 0;
16231
+ }
16232
+
16233
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
16026
16234
  display: flex;
16027
16235
  justify-content: center;
16028
- /* stylelint-disable-next-line declaration-no-important */
16029
- margin-bottom: 0 !important;
16030
16236
  }
16031
16237
 
16032
16238
  .c4p--datagrid__customize-columns-modal--actions {
16033
16239
  display: flex;
16240
+ height: 3rem;
16034
16241
  flex-flow: row;
16035
- margin-bottom: 1.5rem;
16242
+ background-color: var(--cds-field-02, #ffffff);
16243
+ }
16244
+
16245
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
16246
+ height: 3rem;
16247
+ padding-left: 2.5rem;
16248
+ border-bottom: none;
16036
16249
  }
16037
16250
 
16038
16251
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -16040,6 +16253,7 @@ button.c4p--add-select__global-filter-toggle--open {
16040
16253
  }
16041
16254
 
16042
16255
  .c4p--datagrid__customize-columns-instructions {
16256
+ padding-left: 1rem;
16043
16257
  margin-bottom: 1.5rem;
16044
16258
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
16045
16259
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -16053,6 +16267,36 @@ button.c4p--add-select__global-filter-toggle--open {
16053
16267
  overflow: auto;
16054
16268
  }
16055
16269
 
16270
+ .c4p--datagrid__customize-columns-select-all {
16271
+ display: flex;
16272
+ height: 3rem;
16273
+ align-items: center;
16274
+ padding-left: 2.5rem;
16275
+ border-bottom: 1px solid var(--cds-layer-active);
16276
+ background-color: var(--cds-layer-01, #f4f4f4);
16277
+ }
16278
+
16279
+ .c4p--datagrid__customize-columns-select-all:hover {
16280
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
16281
+ }
16282
+
16283
+ .c4p--datagrid__customize-columns-select-all-selected {
16284
+ display: flex;
16285
+ height: 3rem;
16286
+ align-items: center;
16287
+ padding-left: 2.5rem;
16288
+ border-bottom: 1px solid var(--cds-layer-active);
16289
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
16290
+ }
16291
+
16292
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
16293
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
16294
+ }
16295
+
16296
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
16297
+ margin-bottom: 0;
16298
+ }
16299
+
16056
16300
  /*
16057
16301
  * Licensed Materials - Property of IBM
16058
16302
  * 5724-Q36
@@ -16061,7 +16305,6 @@ button.c4p--add-select__global-filter-toggle--open {
16061
16305
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16062
16306
  */
16063
16307
  .c4p--datagrid__row-size-dropdown {
16064
- position: absolute;
16065
16308
  padding: 1rem;
16066
16309
  background-color: var(--cds-background, #ffffff);
16067
16310
  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));
@@ -16072,6 +16315,11 @@ button.c4p--add-select__global-filter-toggle--open {
16072
16315
  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));
16073
16316
  }
16074
16317
 
16318
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
16319
+ /* stylelint-disable-next-line carbon/layout-token-use */
16320
+ left: -4px;
16321
+ }
16322
+
16075
16323
  /*
16076
16324
  * Licensed Materials - Property of IBM
16077
16325
  * 5724-Q36
@@ -16099,10 +16347,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
16099
16347
  margin-left: 0.125rem;
16100
16348
  }
16101
16349
 
16102
- .c4p--datagrid__expanded-row-content {
16103
- padding: 1rem 1rem 1.5rem 4rem;
16104
- }
16105
-
16106
16350
  /*
16107
16351
  * Licensed Materials - Property of IBM
16108
16352
  * 5724-Q36
@@ -16110,10 +16354,60 @@ th.c4p--datagrid__select-all-toggle-on.button {
16110
16354
  * US Government Users Restricted Rights - Use, duplication or disclosure
16111
16355
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16112
16356
  */
16113
- .c4p--datagrid__draggable-handleStyle {
16114
- display: flex;
16115
- align-items: center;
16116
- margin-right: 0.5rem;
16357
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
16358
+ position: relative;
16359
+ padding: 1rem 1rem 1.5rem 3rem;
16360
+ }
16361
+
16362
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
16363
+ position: absolute;
16364
+ /* stylelint-disable-next-line carbon/layout-token-use */
16365
+ top: -1px;
16366
+ right: 0;
16367
+ width: calc(100% - 3rem);
16368
+ height: 1px;
16369
+ background-color: var(--cds-layer-accent);
16370
+ content: "";
16371
+ }
16372
+
16373
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
16374
+ position: absolute;
16375
+ bottom: 0;
16376
+ left: 0;
16377
+ width: 100%;
16378
+ height: 1px;
16379
+ background-color: var(--cds-layer-accent);
16380
+ content: "";
16381
+ }
16382
+
16383
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
16384
+ padding: 0.5rem;
16385
+ padding-right: 0;
16386
+ }
16387
+
16388
+ .c4p--datagrid__row-expander.cds--btn {
16389
+ display: flex;
16390
+ width: 2rem;
16391
+ height: 2rem;
16392
+ min-height: 2rem;
16393
+ justify-content: center;
16394
+ padding: 0;
16395
+ }
16396
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
16397
+ fill: var(--cds-layer-selected-inverse, #161616);
16398
+ }
16399
+
16400
+ /*
16401
+ * Licensed Materials - Property of IBM
16402
+ * 5724-Q36
16403
+ * (c) Copyright IBM Corp. 2022
16404
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16405
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16406
+ */
16407
+ .c4p--datagrid__draggable-handleStyle {
16408
+ display: flex;
16409
+ align-items: center;
16410
+ margin-right: 0.5rem;
16117
16411
  cursor: grab;
16118
16412
  }
16119
16413
 
@@ -16127,14 +16421,31 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16127
16421
 
16128
16422
  .c4p--datagrid__draggable-handleHolder {
16129
16423
  display: flex;
16130
- height: 2rem;
16131
- padding-left: 0.25rem;
16132
- margin-bottom: 0.5rem;
16133
- background: var(--cds-layer-02, #ffffff);
16424
+ height: 3rem;
16425
+ padding-left: 1rem;
16426
+ border-bottom: 1px solid var(--cds-layer-active);
16427
+ background-color: var(--cds-layer);
16428
+ }
16429
+
16430
+ .c4p--datagrid__draggable-handleHolder:hover {
16431
+ background-color: var(--cds-layer-hover);
16432
+ }
16433
+
16434
+ .c4p--datagrid__draggable-handleHolder-selected {
16435
+ display: flex;
16436
+ height: 3rem;
16437
+ padding-left: 1rem;
16438
+ border-bottom: 1px solid var(--cds-layer-active);
16439
+ background-color: var(--cds-layer-selected);
16134
16440
  }
16135
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
16441
+
16442
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
16443
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16444
+ }
16445
+
16446
+ .c4p--datagrid__draggable-handleHolder-isOver {
16136
16447
  border: 2px dashed var(--cds-focus, #0f62fe);
16137
- background-color: var(--cds-highlight, #d0e2ff);
16448
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
16138
16449
  }
16139
16450
 
16140
16451
  .c4p--datagrid__draggable-handleHolder-droppable {
@@ -16142,7 +16453,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16142
16453
  width: 100%;
16143
16454
  }
16144
16455
 
16145
- .c4p--datagrid__draggable-handleHolder--grabbed {
16456
+ .c4p--datagrid__draggable-handleHolder-grabbed {
16146
16457
  background-color: var(--cds-highlight, #d0e2ff);
16147
16458
  color: var(--cds-text-primary, #161616);
16148
16459
  }
@@ -16159,6 +16470,365 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16159
16470
  white-space: nowrap;
16160
16471
  }
16161
16472
 
16473
+ /*
16474
+ * Licensed Materials - Property of IBM
16475
+ * 5724-Q36
16476
+ * (c) Copyright IBM Corp. 2021
16477
+ * US Government Users Restricted Rights - Use, duplication or disclosure
16478
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
16479
+ */
16480
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
16481
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
16482
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16483
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
16484
+ height: 1.5rem;
16485
+ }
16486
+
16487
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
16488
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
16489
+ height: calc(1.5rem - 0.25rem);
16490
+ }
16491
+
16492
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
16493
+ max-height: none;
16494
+ }
16495
+
16496
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
16497
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
16498
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16499
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
16500
+ height: 2rem;
16501
+ }
16502
+
16503
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
16504
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
16505
+ height: calc(2rem - 0.25rem);
16506
+ }
16507
+
16508
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
16509
+ max-height: none;
16510
+ }
16511
+
16512
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
16513
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
16514
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16515
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
16516
+ height: 2.5rem;
16517
+ }
16518
+
16519
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
16520
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
16521
+ height: calc(2.5rem - 0.25rem);
16522
+ }
16523
+
16524
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
16525
+ max-height: none;
16526
+ }
16527
+
16528
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
16529
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
16530
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16531
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
16532
+ height: 3rem;
16533
+ }
16534
+
16535
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
16536
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
16537
+ height: calc(3rem - 0.25rem);
16538
+ }
16539
+
16540
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
16541
+ max-height: none;
16542
+ }
16543
+
16544
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
16545
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
16546
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
16547
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
16548
+ height: 4rem;
16549
+ }
16550
+
16551
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
16552
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
16553
+ height: calc(4rem - 0.25rem);
16554
+ }
16555
+
16556
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
16557
+ max-height: none;
16558
+ }
16559
+
16560
+ .c4p--datagrid {
16561
+ --c4p--datagrid--grid-header-height: 0;
16562
+ }
16563
+
16564
+ .c4p--datagrid__inline-edit-cell {
16565
+ display: flex;
16566
+ height: 100%;
16567
+ align-items: center;
16568
+ }
16569
+
16570
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
16571
+ display: flex;
16572
+ align-items: center;
16573
+ }
16574
+
16575
+ .c4p--datagrid__inline-edit--outer-cell-button {
16576
+ width: 100%;
16577
+ height: calc(100% + 2px);
16578
+ }
16579
+
16580
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
16581
+ position: relative;
16582
+ display: flex;
16583
+ width: 100%;
16584
+ height: 100%;
16585
+ align-items: center;
16586
+ justify-content: space-between;
16587
+ padding-left: 1rem;
16588
+ color: var(--cds-text-secondary, #525252);
16589
+ cursor: pointer;
16590
+ outline: 0;
16591
+ }
16592
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
16593
+ height: 1rem;
16594
+ padding-right: 1rem;
16595
+ }
16596
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
16597
+ padding-left: 0;
16598
+ cursor: default;
16599
+ }
16600
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
16601
+ height: 1rem;
16602
+ fill: var(--cds-icon-secondary, #525252);
16603
+ }
16604
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
16605
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
16606
+ }
16607
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
16608
+ justify-content: flex-start;
16609
+ }
16610
+ .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) {
16611
+ /* stylelint-disable-next-line */
16612
+ }
16613
+ .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 {
16614
+ display: none;
16615
+ }
16616
+ .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 {
16617
+ display: block;
16618
+ }
16619
+
16620
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
16621
+ background-color: var(--cds-layer-active);
16622
+ color: var(--cds-text-primary, #161616);
16623
+ }
16624
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
16625
+ fill: var(--cds-icon-primary, #161616);
16626
+ }
16627
+
16628
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
16629
+ background-color: var(--cds-layer-active);
16630
+ color: var(--cds-text-primary, #161616);
16631
+ cursor: text;
16632
+ }
16633
+
16634
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16635
+ /* stylelint-disable-next-line carbon/theme-token-use */
16636
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16637
+ outline-offset: calc(-1 * 0.125rem);
16638
+ }
16639
+ @media screen and (prefers-contrast) {
16640
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
16641
+ outline-style: dotted;
16642
+ }
16643
+ }
16644
+
16645
+ .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) {
16646
+ color: var(--cds-button-disabled, #c6c6c6);
16647
+ cursor: not-allowed;
16648
+ }
16649
+
16650
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
16651
+ overflow: hidden;
16652
+ padding-right: 1rem;
16653
+ text-overflow: ellipsis;
16654
+ white-space: nowrap;
16655
+ }
16656
+
16657
+ .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 {
16658
+ padding-right: 3rem;
16659
+ }
16660
+
16661
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
16662
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
16663
+ height: 3rem;
16664
+ }
16665
+
16666
+ .c4p--datagrid__inline-edit-button-icon {
16667
+ position: absolute;
16668
+ right: 1rem;
16669
+ }
16670
+
16671
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
16672
+ position: relative;
16673
+ padding: 0;
16674
+ }
16675
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
16676
+ padding-left: 1rem;
16677
+ }
16678
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
16679
+ min-width: auto;
16680
+ padding-right: 1rem;
16681
+ }
16682
+
16683
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
16684
+ padding-bottom: 1rem;
16685
+ padding-left: 1rem;
16686
+ }
16687
+
16688
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16689
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
16690
+ width: inherit;
16691
+ }
16692
+
16693
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
16694
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16695
+ width: 100%;
16696
+ height: 3rem;
16697
+ max-height: none;
16698
+ }
16699
+
16700
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
16701
+ width: inherit;
16702
+ }
16703
+
16704
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
16705
+ overflow: hidden;
16706
+ width: 100%;
16707
+ max-width: none;
16708
+ padding-right: 2rem;
16709
+ text-overflow: ellipsis;
16710
+ white-space: nowrap;
16711
+ }
16712
+
16713
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
16714
+ border-top-color: var(--cds-layer-hover);
16715
+ background-color: var(--cds-layer-hover);
16716
+ }
16717
+
16718
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
16719
+ position: absolute;
16720
+ z-index: 2;
16721
+ bottom: 0;
16722
+ left: 0;
16723
+ width: 2px;
16724
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16725
+ background-color: var(--cds-link-inverse, #78a9ff);
16726
+ content: "";
16727
+ }
16728
+
16729
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
16730
+ position: absolute;
16731
+ z-index: 2;
16732
+ right: 0;
16733
+ bottom: 0;
16734
+ width: 2px;
16735
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
16736
+ background-color: var(--cds-link-inverse, #78a9ff);
16737
+ content: "";
16738
+ }
16739
+
16740
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
16741
+ position: absolute;
16742
+ z-index: 2;
16743
+ top: 0;
16744
+ right: 0;
16745
+ left: 0;
16746
+ width: var(--c4p--datagrid--grid-width);
16747
+ height: 2px;
16748
+ background-color: var(--cds-link-inverse, #78a9ff);
16749
+ }
16750
+
16751
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
16752
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
16753
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
16754
+ }
16755
+
16756
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
16757
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
16758
+ outline-offset: -2px;
16759
+ }
16760
+
16761
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
16762
+ padding-top: 0.125rem;
16763
+ }
16764
+
16765
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
16766
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
16767
+ position: absolute;
16768
+ z-index: 3;
16769
+ top: calc(100% - 0.125rem);
16770
+ width: 100%;
16771
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
16772
+ margin: 0;
16773
+ background-color: var(--cds-layer-01, #f4f4f4);
16774
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
16775
+ outline-offset: calc(-1 * 0.125rem);
16776
+ }
16777
+
16778
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
16779
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
16780
+ }
16781
+
16782
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
16783
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
16784
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16785
+ z-index: 4;
16786
+ top: calc(100% + 0.75rem + 0.125rem);
16787
+ right: 0.5rem;
16788
+ }
16789
+
16790
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
16791
+ top: calc(100% + 0.25rem + 0.125rem);
16792
+ }
16793
+
16794
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16795
+ position: absolute;
16796
+ top: 0;
16797
+ left: 0.125rem;
16798
+ width: calc(100% - (0.125rem * 2));
16799
+ height: 0.125rem;
16800
+ background-color: var(--cds-layer-01, #f4f4f4);
16801
+ content: "";
16802
+ }
16803
+
16804
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16805
+ position: absolute;
16806
+ top: 0.125rem;
16807
+ left: 0.5rem;
16808
+ width: calc(100% - (0.5rem * 2));
16809
+ height: 1px;
16810
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16811
+ content: "";
16812
+ }
16813
+
16814
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
16815
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
16816
+ }
16817
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
16818
+ background-color: transparent;
16819
+ }
16820
+
16821
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
16822
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
16823
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
16824
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
16825
+ outline-color: var(--cds-support-error, #da1e28);
16826
+ }
16827
+
16828
+ .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 {
16829
+ background-color: var(--cds-support-error, #da1e28);
16830
+ }
16831
+
16162
16832
  /*
16163
16833
  * Licensed Materials - Property of IBM
16164
16834
  * 5724-Q36
@@ -16166,6 +16836,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16166
16836
  * US Government Users Restricted Rights - Use, duplication or disclosure
16167
16837
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16168
16838
  */
16839
+ /* stylelint-disable max-nesting-depth */
16169
16840
  .c4p--datagrid__datagridWrap {
16170
16841
  display: block;
16171
16842
  width: 100%;
@@ -16173,6 +16844,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16173
16844
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
16174
16845
  display: none;
16175
16846
  }
16847
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16848
+ left: 0.125rem;
16849
+ width: 112px;
16850
+ }
16176
16851
 
16177
16852
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
16178
16853
  left: 0.125rem;
@@ -16192,4 +16867,43 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
16192
16867
  overflow-x: unset;
16193
16868
  }
16194
16869
 
16870
+ /* stylelint-disable max-nesting-depth */
16871
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
16872
+ /* Used id for overriding the SVG path fill */
16873
+ }
16874
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
16875
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
16876
+ background-color: #0050e6;
16877
+ }
16878
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
16879
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
16880
+ box-shadow: none;
16881
+ }
16882
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
16883
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
16884
+ fill: #ffffff;
16885
+ }
16886
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
16887
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
16888
+ background-color: transparent;
16889
+ }
16890
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
16891
+ background-color: #0f62fe;
16892
+ color: #ffffff;
16893
+ }
16894
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
16895
+ animation-duration: 700ms;
16896
+ animation-fill-mode: forwards;
16897
+ animation-iteration-count: infinite;
16898
+ animation-name: rotate;
16899
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
16900
+ }
16901
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
16902
+ background-color: transparent;
16903
+ }
16904
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
16905
+ background-color: #0f62fe;
16906
+ color: #ffffff;
16907
+ }
16908
+
16195
16909
  /*# sourceMappingURL=index.css.map */