@carbon/ibm-products 1.2.5 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (164) hide show
  1. package/css/index-full-carbon.css +1028 -517
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-without-carbon-released-only.css +187 -108
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +3 -3
  7. package/css/index-without-carbon.css +580 -114
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +3 -3
  10. package/css/index.css +804 -116
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +3 -3
  13. package/es/components/APIKeyModal/APIKeyModal.js +25 -29
  14. package/es/components/ActionBar/ActionBar.js +4 -1
  15. package/es/components/ActionSet/ActionSet.js +22 -10
  16. package/es/components/ActionSet/actions.js +25 -17
  17. package/es/components/AddSelect/AddSelect.js +198 -0
  18. package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
  19. package/es/components/AddSelect/AddSelectList.js +94 -0
  20. package/es/components/AddSelect/AddSelectSidebar.js +46 -0
  21. package/es/components/AddSelect/index.js +7 -0
  22. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +24 -17
  23. package/es/components/CancelableTextEdit/CancelableTextEdit.js +245 -0
  24. package/es/components/{CreateTearsheet/constants.js → CancelableTextEdit/index.js} +1 -2
  25. package/es/components/Card/Card.js +6 -4
  26. package/es/components/CreateFullPage/CreateFullPage.js +102 -258
  27. package/es/components/CreateFullPage/CreateFullPageStep.js +65 -13
  28. package/es/components/CreateFullPage/index.js +1 -2
  29. package/es/components/CreateInfluencer/CreateInfluencer.js +40 -220
  30. package/es/components/CreateTearsheet/CreateTearsheet.js +95 -146
  31. package/es/components/CreateTearsheet/CreateTearsheetStep.js +70 -20
  32. package/es/components/CreateTearsheet/index.js +0 -1
  33. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +87 -28
  34. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  35. package/es/components/ExportModal/ExportModal.js +41 -12
  36. package/es/components/ImportModal/ImportModal.js +2 -1
  37. package/es/components/InlineEdit/InlineEdit.js +373 -0
  38. package/es/components/InlineEdit/index.js +7 -0
  39. package/es/components/MultiAddSelect/MultiAddSelect.js +16 -0
  40. package/es/components/MultiAddSelect/index.js +1 -0
  41. package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
  42. package/es/components/OptionsTile/OptionsTile.js +36 -15
  43. package/es/components/PageHeader/PageHeader.js +59 -35
  44. package/es/components/PageHeader/PageHeaderTitle.js +82 -7
  45. package/es/components/PageHeader/PageHeaderUtils.js +21 -2
  46. package/es/components/RemoveModal/RemoveModal.js +4 -2
  47. package/es/components/SidePanel/SidePanel.js +33 -16
  48. package/es/components/SingleAddSelect/SingleAddSelect.js +15 -0
  49. package/es/components/SingleAddSelect/index.js +1 -0
  50. package/es/components/TagSet/TagSet.js +4 -1
  51. package/es/components/Tearsheet/Tearsheet.js +1 -1
  52. package/es/components/Tearsheet/TearsheetNarrow.js +1 -1
  53. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  54. package/es/components/Toolbar/Toolbar.js +69 -8
  55. package/es/components/WebTerminal/WebTerminal.js +1 -1
  56. package/es/components/index.js +5 -1
  57. package/es/global/js/hooks/index.js +1 -0
  58. package/es/global/js/hooks/useCreateComponentFocus.js +15 -19
  59. package/es/global/js/hooks/useCreateComponentStepChange.js +69 -79
  60. package/es/global/js/hooks/useResetCreateComponent.js +7 -4
  61. package/es/global/js/hooks/useRetrieveStepData.js +51 -0
  62. package/es/global/js/hooks/useValidCreateStepCount.js +4 -7
  63. package/es/global/js/package-settings.js +5 -1
  64. package/es/global/js/utils/lastIndexInArray.js +26 -0
  65. package/es/settings.js +0 -5
  66. package/lib/components/APIKeyModal/APIKeyModal.js +25 -29
  67. package/lib/components/ActionBar/ActionBar.js +4 -1
  68. package/lib/components/ActionSet/ActionSet.js +22 -10
  69. package/lib/components/ActionSet/actions.js +25 -17
  70. package/lib/components/AddSelect/AddSelect.js +223 -0
  71. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
  72. package/lib/components/AddSelect/AddSelectList.js +112 -0
  73. package/lib/components/AddSelect/AddSelectSidebar.js +63 -0
  74. package/lib/components/AddSelect/index.js +13 -0
  75. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +23 -16
  76. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +265 -0
  77. package/lib/components/CancelableTextEdit/index.js +13 -0
  78. package/lib/components/Card/Card.js +6 -4
  79. package/lib/components/CreateFullPage/CreateFullPage.js +102 -258
  80. package/lib/components/CreateFullPage/CreateFullPageStep.js +68 -13
  81. package/lib/components/CreateFullPage/index.js +1 -9
  82. package/lib/components/CreateInfluencer/CreateInfluencer.js +38 -231
  83. package/lib/components/CreateTearsheet/CreateTearsheet.js +97 -148
  84. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +72 -19
  85. package/lib/components/CreateTearsheet/index.js +0 -8
  86. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +86 -34
  87. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  88. package/lib/components/ExportModal/ExportModal.js +38 -11
  89. package/lib/components/ImportModal/ImportModal.js +2 -1
  90. package/lib/components/InlineEdit/InlineEdit.js +389 -0
  91. package/lib/components/InlineEdit/index.js +13 -0
  92. package/lib/components/MultiAddSelect/MultiAddSelect.js +37 -0
  93. package/lib/components/MultiAddSelect/index.js +13 -0
  94. package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
  95. package/lib/components/OptionsTile/OptionsTile.js +36 -15
  96. package/lib/components/PageHeader/PageHeader.js +59 -35
  97. package/lib/components/PageHeader/PageHeaderTitle.js +91 -9
  98. package/lib/components/PageHeader/PageHeaderUtils.js +21 -2
  99. package/lib/components/RemoveModal/RemoveModal.js +4 -2
  100. package/lib/components/SidePanel/SidePanel.js +33 -16
  101. package/lib/components/SingleAddSelect/SingleAddSelect.js +36 -0
  102. package/lib/components/SingleAddSelect/index.js +13 -0
  103. package/lib/components/TagSet/TagSet.js +4 -1
  104. package/lib/components/Tearsheet/Tearsheet.js +1 -1
  105. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
  106. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  107. package/lib/components/Toolbar/Toolbar.js +69 -6
  108. package/lib/components/WebTerminal/WebTerminal.js +1 -1
  109. package/lib/components/index.js +33 -1
  110. package/lib/global/js/hooks/index.js +8 -0
  111. package/lib/global/js/hooks/useCreateComponentFocus.js +15 -19
  112. package/lib/global/js/hooks/useCreateComponentStepChange.js +69 -79
  113. package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
  114. package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
  115. package/lib/global/js/hooks/useValidCreateStepCount.js +4 -7
  116. package/lib/global/js/package-settings.js +5 -1
  117. package/lib/global/js/utils/lastIndexInArray.js +35 -0
  118. package/lib/settings.js +0 -6
  119. package/package.json +19 -19
  120. package/scss/components/AddSelect/_add-select.scss +108 -0
  121. package/scss/components/AddSelect/_index.scss +10 -0
  122. package/scss/components/AddSelect/_storybook-styles.scss +6 -0
  123. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +19 -15
  124. package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
  125. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +212 -0
  126. package/{es/components/CreateFullPage/constants.js → scss/components/CancelableTextEdit/_index.scss} +2 -2
  127. package/scss/components/CancelableTextEdit/_storybook-styles.scss +15 -0
  128. package/scss/components/CreateFullPage/_create-full-page.scss +4 -11
  129. package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
  130. package/scss/components/CreateTearsheet/_create-tearsheet.scss +6 -10
  131. package/scss/components/InlineEdit/_index.scss +8 -0
  132. package/scss/components/InlineEdit/_inline-edit.scss +245 -0
  133. package/scss/components/InlineEdit/_storybook-styles.scss +28 -0
  134. package/scss/components/MultiAddSelect/_index.scss +1 -0
  135. package/scss/components/MultiAddSelect/_multi-add-select.scss +1 -0
  136. package/scss/components/MultiAddSelect/_storybook-styles.scss +6 -0
  137. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  138. package/scss/components/PageHeader/_index.scss +1 -1
  139. package/scss/components/PageHeader/_page-header.scss +15 -5
  140. package/scss/components/ProductiveCard/_productive-card.scss +0 -4
  141. package/scss/components/SidePanel/_side-panel.scss +15 -6
  142. package/scss/components/SingleAddSelect/_index.scss +1 -0
  143. package/scss/components/SingleAddSelect/_single-add-select.scss +1 -0
  144. package/scss/components/SingleAddSelect/_storybook-styles.scss +6 -0
  145. package/scss/components/StatusIcon/_index.scss +1 -1
  146. package/scss/components/StatusIcon/_status-icon.scss +2 -0
  147. package/scss/components/TagSet/_index.scss +1 -1
  148. package/scss/components/UserProfileImage/_index.scss +1 -1
  149. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  150. package/scss/components/_index.scss +4 -0
  151. package/scss/global/styles/_project-settings.scss +5 -1
  152. package/es/components/CreateFullPage/CreateFullPageSection.js +0 -53
  153. package/es/components/CreateTearsheet/CreateTearsheetSection.js +0 -83
  154. package/es/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -327
  155. package/es/generated/feature-flags/feature-flags.js +0 -15
  156. package/es/global/js/utils/hasValidType.js +0 -94
  157. package/lib/components/CreateFullPage/CreateFullPageSection.js +0 -74
  158. package/lib/components/CreateFullPage/constants.js +0 -16
  159. package/lib/components/CreateTearsheet/CreateTearsheetSection.js +0 -105
  160. package/lib/components/CreateTearsheet/constants.js +0 -17
  161. package/lib/components/CreateTearsheet/preview-components/MultiStepWithSectionsTearsheet.js +0 -354
  162. package/lib/generated/feature-flags/feature-flags.js +0 -22
  163. package/lib/global/js/utils/hasValidType.js +0 -110
  164. package/scss/generated/feature-flags/_feature-flags.scss +0 -19
@@ -1188,7 +1188,7 @@
1188
1188
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1189
1189
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1190
1190
  /* stylelint-disable-line no-invalid-position-at-import-rule */
1191
- @keyframes influencerMenuEntrance {
1191
+ @keyframes influencer-menu-entrance {
1192
1192
  0% {
1193
1193
  opacity: 0;
1194
1194
  transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
@@ -1198,7 +1198,7 @@
1198
1198
  transform: translateX(0);
1199
1199
  }
1200
1200
  }
1201
- @keyframes influencerMenuExit {
1201
+ @keyframes influencer-menu-exit {
1202
1202
  0% {
1203
1203
  opacity: 1;
1204
1204
  transform: translateX(0);
@@ -1233,14 +1233,14 @@
1233
1233
 
1234
1234
  .c4p--create-influencer__side-nav-opening,
1235
1235
  .c4p--create-influencer__progress-indicator-opening {
1236
- animation: influencerMenuEntrance 240ms 1;
1236
+ animation: influencer-menu-entrance 240ms 1;
1237
1237
  animation-fill-mode: forwards;
1238
1238
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
1239
1239
  }
1240
1240
 
1241
1241
  .c4p--create-influencer__side-nav-closing,
1242
1242
  .c4p--create-influencer__progress-indicator-closing {
1243
- animation: influencerMenuExit 240ms 1;
1243
+ animation: influencer-menu-exit 240ms 1;
1244
1244
  animation-fill-mode: forwards;
1245
1245
  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
1246
1246
  }
@@ -1362,20 +1362,14 @@
1362
1362
  margin-left: 0;
1363
1363
  }
1364
1364
 
1365
- .c4p--create-full-page .c4p--create-full-page__step--hidden-step,
1366
- .c4p--create-full-page .c4p--create-full-page__step--hidden-section {
1365
+ .c4p--create-full-page .c4p--create-full-page__step__step--hidden-step {
1367
1366
  display: none;
1368
1367
  }
1369
1368
 
1370
- .c4p--create-full-page .c4p--create-full-page__step--visible-section {
1369
+ .c4p--create-full-page .c4p--create-full-page__step__step--visible-step {
1371
1370
  display: block;
1372
1371
  }
1373
1372
 
1374
- .c4p--create-full-page .c4p--create-full-page__step--visible-step {
1375
- opacity: 1;
1376
- }
1377
-
1378
- .c4p--create-full-page .c4p--create-full-page__section-subtitle,
1379
1373
  .c4p--create-full-page .c4p--create-full-page__step-subtitle {
1380
1374
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
1381
1375
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -1385,7 +1379,6 @@
1385
1379
  margin-bottom: var(--cds-spacing-03, 0.5rem);
1386
1380
  }
1387
1381
 
1388
- .c4p--create-full-page .c4p--create-full-page__section-description,
1389
1382
  .c4p--create-full-page .c4p--create-full-page__step-description {
1390
1383
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
1391
1384
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -1473,8 +1466,7 @@
1473
1466
  content: "";
1474
1467
  }
1475
1468
 
1476
- .c4p--create-full-page .c4p--create-full-page__step-title,
1477
- .c4p--create-full-page .c4p--create-full-page__section-title {
1469
+ .c4p--create-full-page .c4p--create-full-page__step-title {
1478
1470
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
1479
1471
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
1480
1472
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
@@ -1682,7 +1674,7 @@
1682
1674
  stroke-dashoffset: 0;
1683
1675
  }
1684
1676
  }
1685
- @keyframes sidePanelExitLeft {
1677
+ @keyframes side-panel-exit-left {
1686
1678
  0% {
1687
1679
  opacity: 1;
1688
1680
  transform: translateX(0);
@@ -1692,7 +1684,7 @@
1692
1684
  transform: translateX(calc(-1 * 30rem));
1693
1685
  }
1694
1686
  }
1695
- @keyframes sidePanelExitRight {
1687
+ @keyframes side-panel-exit-right {
1696
1688
  0% {
1697
1689
  opacity: 1;
1698
1690
  transform: translateX(0);
@@ -1740,7 +1732,7 @@
1740
1732
  right: 0;
1741
1733
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
1742
1734
  }
1743
- @keyframes sidePanelEntranceRight {
1735
+ @keyframes side-panel-entrance-right {
1744
1736
  0% {
1745
1737
  opacity: 0;
1746
1738
  transform: translateX(16rem);
@@ -1756,7 +1748,7 @@
1756
1748
  left: 0;
1757
1749
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
1758
1750
  }
1759
- @keyframes sidePanelEntranceLeft {
1751
+ @keyframes side-panel-entrance-left {
1760
1752
  0% {
1761
1753
  opacity: 0;
1762
1754
  transform: translateX(-16rem);
@@ -1783,7 +1775,7 @@
1783
1775
  right: 0;
1784
1776
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
1785
1777
  }
1786
- @keyframes sidePanelEntranceRight {
1778
+ @keyframes side-panel-entrance-right {
1787
1779
  0% {
1788
1780
  opacity: 0;
1789
1781
  transform: translateX(20rem);
@@ -1799,7 +1791,7 @@
1799
1791
  left: 0;
1800
1792
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
1801
1793
  }
1802
- @keyframes sidePanelEntranceLeft {
1794
+ @keyframes side-panel-entrance-left {
1803
1795
  0% {
1804
1796
  opacity: 0;
1805
1797
  transform: translateX(-20rem);
@@ -1826,7 +1818,7 @@
1826
1818
  right: 0;
1827
1819
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
1828
1820
  }
1829
- @keyframes sidePanelEntranceRight {
1821
+ @keyframes side-panel-entrance-right {
1830
1822
  0% {
1831
1823
  opacity: 0;
1832
1824
  transform: translateX(30rem);
@@ -1842,7 +1834,7 @@
1842
1834
  left: 0;
1843
1835
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
1844
1836
  }
1845
- @keyframes sidePanelEntranceLeft {
1837
+ @keyframes side-panel-entrance-left {
1846
1838
  0% {
1847
1839
  opacity: 0;
1848
1840
  transform: translateX(-30rem);
@@ -1869,7 +1861,7 @@
1869
1861
  right: 0;
1870
1862
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
1871
1863
  }
1872
- @keyframes sidePanelEntranceRight {
1864
+ @keyframes side-panel-entrance-right {
1873
1865
  0% {
1874
1866
  opacity: 0;
1875
1867
  transform: translateX(40rem);
@@ -1885,7 +1877,7 @@
1885
1877
  left: 0;
1886
1878
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
1887
1879
  }
1888
- @keyframes sidePanelEntranceLeft {
1880
+ @keyframes side-panel-entrance-left {
1889
1881
  0% {
1890
1882
  opacity: 0;
1891
1883
  transform: translateX(-40rem);
@@ -1912,7 +1904,7 @@
1912
1904
  right: 0;
1913
1905
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
1914
1906
  }
1915
- @keyframes sidePanelEntranceRight {
1907
+ @keyframes side-panel-entrance-right {
1916
1908
  0% {
1917
1909
  opacity: 0;
1918
1910
  transform: translateX(75%);
@@ -1928,7 +1920,7 @@
1928
1920
  left: 0;
1929
1921
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
1930
1922
  }
1931
- @keyframes sidePanelEntranceLeft {
1923
+ @keyframes side-panel-entrance-left {
1932
1924
  0% {
1933
1925
  opacity: 0;
1934
1926
  transform: translateX(-75%);
@@ -1972,6 +1964,15 @@
1972
1964
  content: "";
1973
1965
  opacity: var(--c4p--side-panel--divider-opacity);
1974
1966
  }
1967
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion {
1968
+ z-index: 5;
1969
+ border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
1970
+ margin-bottom: var(--cds-spacing-05, 1rem);
1971
+ }
1972
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion.c4p--side-panel__title-container--no-title-animation {
1973
+ border-bottom: 0;
1974
+ margin-bottom: 0;
1975
+ }
1975
1976
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
1976
1977
  top: var(--cds-spacing-09, 3rem);
1977
1978
  }
@@ -2202,7 +2203,7 @@
2202
2203
  background-color: var(--cds-field-02, #ffffff);
2203
2204
  }
2204
2205
 
2205
- @keyframes sidePanelOverlayEntrance {
2206
+ @keyframes side-panel-overlay-entrance {
2206
2207
  0% {
2207
2208
  opacity: 0;
2208
2209
  }
@@ -2210,7 +2211,7 @@
2210
2211
  opacity: 1;
2211
2212
  }
2212
2213
  }
2213
- @keyframes sidePanelOverlayExit {
2214
+ @keyframes side-panel-overlay-exit {
2214
2215
  0% {
2215
2216
  opacity: 1;
2216
2217
  }
@@ -3210,7 +3211,7 @@
3210
3211
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3211
3212
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3212
3213
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3213
- @keyframes stepContentEntrance {
3214
+ @keyframes step-content-entrance {
3214
3215
  0% {
3215
3216
  opacity: 0;
3216
3217
  transform: translateY(-0.75rem);
@@ -3224,24 +3225,19 @@
3224
3225
  --c4p--tearsheet-create--total-width: 0;
3225
3226
  }
3226
3227
 
3227
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-step,
3228
- .c4p--tearsheet-create .c4p--tearsheet-create__step--hidden-section {
3228
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--hidden-step {
3229
3229
  display: none;
3230
3230
  }
3231
3231
 
3232
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-section {
3233
- display: block;
3234
- }
3235
-
3236
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
3237
- animation: 400ms stepContentEntrance;
3232
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
3233
+ animation: 400ms step-content-entrance;
3238
3234
  animation-fill-mode: forwards;
3239
3235
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3240
3236
  opacity: 0;
3241
3237
  }
3242
3238
 
3243
3239
  @media (prefers-reduced-motion) {
3244
- .c4p--tearsheet-create .c4p--tearsheet-create__step--visible-step {
3240
+ .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
3245
3241
  animation: none;
3246
3242
  opacity: 1;
3247
3243
  }
@@ -4455,7 +4451,7 @@
4455
4451
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4456
4452
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4457
4453
  /* stylelint-disable-line no-invalid-position-at-import-rule */
4458
- @keyframes fadeIn {
4454
+ @keyframes fade-in {
4459
4455
  0% {
4460
4456
  opacity: 0;
4461
4457
  transform: translateY(-38.5rem);
@@ -4465,7 +4461,7 @@
4465
4461
  transform: translateY(0);
4466
4462
  }
4467
4463
  }
4468
- @keyframes fadeOut {
4464
+ @keyframes fade-out {
4469
4465
  0% {
4470
4466
  opacity: 1;
4471
4467
  transform: translateY(0);
@@ -4608,8 +4604,6 @@
4608
4604
  --cds-layer-selected-hover: #4c4c4c;
4609
4605
  --cds-layer-selected-inverse: #f4f4f4;
4610
4606
  --cds-border-subtle-selected: #525252;
4611
- --cds-layer-disabled: #262626;
4612
- --cds-field-disabled: #262626;
4613
4607
  --cds-border-disabled: #262626;
4614
4608
  --cds-text-disabled: #525252;
4615
4609
  --cds-button-disabled: #525252;
@@ -5428,14 +5422,9 @@
5428
5422
  white-space: nowrap;
5429
5423
  }
5430
5424
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
5431
- display: none;
5425
+ display: inline-flex;
5432
5426
  width: 100%;
5433
5427
  }
5434
- @media (min-width: 42rem) {
5435
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container.c4p--breadcrumb-with-overflow__breadcrumb-container-with-items {
5436
- display: inline-flex;
5437
- }
5438
- }
5439
5428
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-container .bx--breadcrumb {
5440
5429
  width: 100%;
5441
5430
  flex-wrap: nowrap;
@@ -5450,11 +5439,24 @@
5450
5439
  pointer-events: none;
5451
5440
  visibility: hidden;
5452
5441
  }
5442
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
5443
+ display: none;
5444
+ }
5445
+ @media (max-width: 41.98rem) {
5446
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item {
5447
+ display: none;
5448
+ }
5449
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back,
5450
+ .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
5451
+ display: inline-flex;
5452
+ vertical-align: middle;
5453
+ }
5454
+ }
5453
5455
  .c4p--breadcrumb-with-overflow .bx--breadcrumb-item:last-child {
5454
- display: inline;
5456
+ display: inline-flex;
5455
5457
  }
5456
5458
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child {
5457
- display: inline;
5459
+ display: inline-flex;
5458
5460
  overflow: hidden;
5459
5461
  }
5460
5462
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__displayed-breadcrumb:last-child .bx--link {
@@ -5466,15 +5468,6 @@
5466
5468
  .c4p--breadcrumb-with-overflow .bx--link {
5467
5469
  max-height: 18px;
5468
5470
  }
5469
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
5470
- display: inline-flex;
5471
- margin-top: calc(-1 * var(--cds-spacing-04, 0.75rem));
5472
- }
5473
- @media (min-width: 42rem) {
5474
- .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back-button.bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
5475
- display: none;
5476
- }
5477
- }
5478
5471
 
5479
5472
  /* stylelint-disable-line no-invalid-position-at-import-rule */
5480
5473
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -5894,7 +5887,7 @@
5894
5887
  height: var(--cds-spacing-02, 0.25rem);
5895
5888
  }
5896
5889
  .c4p--page-header .c4p--page-header__breadcrumb-row:not(.c4p--page-header__breadcrumb-row--has-action-bar) {
5897
- margin-bottom: calc(-1 * var(--cds-spacing-03, 0.5rem));
5890
+ min-height: var(--cds-spacing-07, 2rem);
5898
5891
  }
5899
5892
  .c4p--page-header .c4p--page-header__breadcrumb-row--container {
5900
5893
  display: flex;
@@ -5925,7 +5918,7 @@
5925
5918
  transform: translateX(-50%) scaleX(1);
5926
5919
  transition: all 150ms ease-out;
5927
5920
  }
5928
- .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs::after,
5921
+ .c4p--page-header .c4p--page-header__breadcrumb-row--next-to-tabs:not(.c4p--page-header__has-page-actions-without-action-bar)::after,
5929
5922
  .c4p--page-header .c4p--page-header__breadcrumb-row--has-action-bar::after {
5930
5923
  /* creates a full width box shadow without causing scroll */
5931
5924
  box-shadow: 25vw 1px 0 0 var(--cds-ui-03, #e0e0e0), -25vw 1px 0 0 var(--cds-ui-03, #e0e0e0);
@@ -6113,8 +6106,6 @@
6113
6106
  top: var(--c4p--page-header--breadcrumb-top);
6114
6107
  }
6115
6108
  .c4p--page-header .c4p--page-header__title-column {
6116
- overflow: hidden;
6117
- /* required for ellipsis in title */
6118
6109
  min-height: 40px;
6119
6110
  flex: 0 0 100%;
6120
6111
  }
@@ -6129,10 +6120,17 @@
6129
6120
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
6130
6121
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
6131
6122
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
6132
- overflow: hidden;
6123
+ overflow-x: hidden;
6133
6124
  text-overflow: ellipsis;
6134
6125
  white-space: nowrap;
6135
6126
  }
6127
+ .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
6128
+ transform: translateY(-2px);
6129
+ }
6130
+ .c4p--page-header .c4p--page-header__title--editable {
6131
+ display: flex;
6132
+ overflow: visible;
6133
+ }
6136
6134
  .c4p--page-header .c4p--page-header__title-skeleton {
6137
6135
  height: var(--cds-spacing-07, 2rem);
6138
6136
  }
@@ -6419,9 +6417,6 @@
6419
6417
  justify-content: space-between;
6420
6418
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
6421
6419
  }
6422
- .c4p--card__productive .c4p--card__footer .bx--btn svg {
6423
- margin-left: var(--cds-spacing-03, 0.5rem);
6424
- }
6425
6420
  .c4p--card__productive .c4p--card__footer-no-button {
6426
6421
  justify-content: flex-end;
6427
6422
  }
@@ -6921,386 +6916,470 @@
6921
6916
  fill: #161616;
6922
6917
  }
6923
6918
 
6919
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-fatal,
6924
6920
  .c4p--status-icon--light.c4p--status-icon--light-fatal {
6925
6921
  fill: #000000;
6926
6922
  }
6927
6923
  @media (prefers-reduced-motion) {
6928
- .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6924
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
6925
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6929
6926
  animation: none;
6930
6927
  }
6931
6928
  }
6932
6929
 
6930
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-fatal,
6933
6931
  .c4p--status-icon--light.c4p--status-icon--dark-fatal {
6934
6932
  fill: #000000;
6935
6933
  }
6936
6934
  @media (prefers-reduced-motion) {
6937
- .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6935
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
6936
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6938
6937
  animation: none;
6939
6938
  }
6940
6939
  }
6941
6940
 
6941
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-critical,
6942
6942
  .c4p--status-icon--light.c4p--status-icon--light-critical {
6943
6943
  fill: #da1e28;
6944
6944
  }
6945
6945
  @media (prefers-reduced-motion) {
6946
- .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6946
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress,
6947
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6947
6948
  animation: none;
6948
6949
  }
6949
6950
  }
6950
6951
 
6952
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-critical,
6951
6953
  .c4p--status-icon--light.c4p--status-icon--dark-critical {
6952
6954
  fill: #da1e28;
6953
6955
  }
6954
6956
  @media (prefers-reduced-motion) {
6955
- .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6957
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
6958
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6956
6959
  animation: none;
6957
6960
  }
6958
6961
  }
6959
6962
 
6963
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-major-warning,
6960
6964
  .c4p--status-icon--light.c4p--status-icon--light-major-warning {
6961
6965
  fill: #ff832b;
6962
6966
  }
6963
6967
  @media (prefers-reduced-motion) {
6964
- .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6968
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
6969
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6965
6970
  animation: none;
6966
6971
  }
6967
6972
  }
6968
6973
 
6974
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-major-warning,
6969
6975
  .c4p--status-icon--light.c4p--status-icon--dark-major-warning {
6970
6976
  fill: #ff832b;
6971
6977
  }
6972
6978
  @media (prefers-reduced-motion) {
6973
- .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6979
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
6980
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6974
6981
  animation: none;
6975
6982
  }
6976
6983
  }
6977
6984
 
6985
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-minor-warning,
6978
6986
  .c4p--status-icon--light.c4p--status-icon--light-minor-warning {
6979
6987
  fill: #fddc69;
6980
6988
  }
6981
6989
  @media (prefers-reduced-motion) {
6982
- .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6990
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress,
6991
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
6983
6992
  animation: none;
6984
6993
  }
6985
6994
  }
6986
6995
 
6996
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-minor-warning,
6987
6997
  .c4p--status-icon--light.c4p--status-icon--dark-minor-warning {
6988
6998
  fill: #fddc69;
6989
6999
  }
6990
7000
  @media (prefers-reduced-motion) {
6991
- .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7001
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7002
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
6992
7003
  animation: none;
6993
7004
  }
6994
7005
  }
6995
7006
 
7007
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-undefined,
6996
7008
  .c4p--status-icon--light.c4p--status-icon--light-undefined {
6997
7009
  fill: #8a3ffc;
6998
7010
  }
6999
7011
  @media (prefers-reduced-motion) {
7000
- .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7012
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7013
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7001
7014
  animation: none;
7002
7015
  }
7003
7016
  }
7004
7017
 
7018
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-undefined,
7005
7019
  .c4p--status-icon--light.c4p--status-icon--dark-undefined {
7006
7020
  fill: #8a3ffc;
7007
7021
  }
7008
7022
  @media (prefers-reduced-motion) {
7009
- .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7023
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7024
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7010
7025
  animation: none;
7011
7026
  }
7012
7027
  }
7013
7028
 
7029
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-unknown,
7014
7030
  .c4p--status-icon--light.c4p--status-icon--light-unknown {
7015
7031
  fill: #6f6f6f;
7016
7032
  }
7017
7033
  @media (prefers-reduced-motion) {
7018
- .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7034
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7035
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7019
7036
  animation: none;
7020
7037
  }
7021
7038
  }
7022
7039
 
7040
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-unknown,
7023
7041
  .c4p--status-icon--light.c4p--status-icon--dark-unknown {
7024
7042
  fill: #6f6f6f;
7025
7043
  }
7026
7044
  @media (prefers-reduced-motion) {
7027
- .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7045
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7046
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7028
7047
  animation: none;
7029
7048
  }
7030
7049
  }
7031
7050
 
7051
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-normal,
7032
7052
  .c4p--status-icon--light.c4p--status-icon--light-normal {
7033
7053
  fill: #198038;
7034
7054
  }
7035
7055
  @media (prefers-reduced-motion) {
7036
- .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7056
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7057
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7037
7058
  animation: none;
7038
7059
  }
7039
7060
  }
7040
7061
 
7062
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-normal,
7041
7063
  .c4p--status-icon--light.c4p--status-icon--dark-normal {
7042
7064
  fill: #198038;
7043
7065
  }
7044
7066
  @media (prefers-reduced-motion) {
7045
- .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7067
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7068
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7046
7069
  animation: none;
7047
7070
  }
7048
7071
  }
7049
7072
 
7073
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-info,
7050
7074
  .c4p--status-icon--light.c4p--status-icon--light-info {
7051
7075
  fill: #0f62fe;
7052
7076
  }
7053
7077
  @media (prefers-reduced-motion) {
7054
- .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7078
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7079
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7055
7080
  animation: none;
7056
7081
  }
7057
7082
  }
7058
7083
 
7084
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-info,
7059
7085
  .c4p--status-icon--light.c4p--status-icon--dark-info {
7060
7086
  fill: #0f62fe;
7061
7087
  }
7062
7088
  @media (prefers-reduced-motion) {
7063
- .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7089
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7090
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7064
7091
  animation: none;
7065
7092
  }
7066
7093
  }
7067
7094
 
7095
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7068
7096
  .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7069
7097
  animation: rotating 8000ms infinite linear;
7070
7098
  fill: #0f62fe;
7071
7099
  }
7072
7100
  @media (prefers-reduced-motion: reduce) {
7073
- .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7101
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7102
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7074
7103
  animation: none;
7075
7104
  }
7076
7105
  }
7077
7106
 
7107
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7078
7108
  .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7079
7109
  animation: rotating 8000ms infinite linear;
7080
7110
  fill: #0f62fe;
7081
7111
  }
7082
7112
  @media (prefers-reduced-motion: reduce) {
7083
- .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7113
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7114
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7084
7115
  animation: none;
7085
7116
  }
7086
7117
  }
7087
7118
 
7119
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-running,
7088
7120
  .c4p--status-icon--light.c4p--status-icon--light-running {
7089
7121
  fill: #198038;
7090
7122
  transform: scaleY(-1);
7091
7123
  }
7092
7124
 
7125
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-running,
7093
7126
  .c4p--status-icon--light.c4p--status-icon--dark-running {
7094
7127
  fill: #198038;
7095
7128
  transform: scaleY(-1);
7096
7129
  }
7097
7130
 
7131
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-pending,
7098
7132
  .c4p--status-icon--light.c4p--status-icon--light-pending {
7099
7133
  fill: #6f6f6f;
7100
7134
  }
7101
7135
  @media (prefers-reduced-motion) {
7102
- .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7136
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress,
7137
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
7103
7138
  animation: none;
7104
7139
  }
7105
7140
  }
7106
7141
 
7142
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-pending,
7107
7143
  .c4p--status-icon--light.c4p--status-icon--dark-pending {
7108
7144
  fill: #6f6f6f;
7109
7145
  }
7110
7146
  @media (prefers-reduced-motion) {
7111
- .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7147
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
7148
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
7112
7149
  animation: none;
7113
7150
  }
7114
7151
  }
7115
7152
 
7153
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-fatal,
7116
7154
  .c4p--status-icon--dark.c4p--status-icon--light-fatal {
7117
7155
  fill: #8d8d8d;
7118
7156
  }
7119
7157
  @media (prefers-reduced-motion) {
7120
- .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7158
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7159
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7121
7160
  animation: none;
7122
7161
  }
7123
7162
  }
7124
7163
 
7164
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-fatal,
7125
7165
  .c4p--status-icon--dark.c4p--status-icon--dark-fatal {
7126
7166
  fill: #8d8d8d;
7127
7167
  }
7128
7168
  @media (prefers-reduced-motion) {
7129
- .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7169
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7170
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7130
7171
  animation: none;
7131
7172
  }
7132
7173
  }
7133
7174
 
7175
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-critical,
7134
7176
  .c4p--status-icon--dark.c4p--status-icon--light-critical {
7135
7177
  fill: #fa4d56;
7136
7178
  }
7137
7179
  @media (prefers-reduced-motion) {
7138
- .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7180
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7181
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7139
7182
  animation: none;
7140
7183
  }
7141
7184
  }
7142
7185
 
7186
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-critical,
7143
7187
  .c4p--status-icon--dark.c4p--status-icon--dark-critical {
7144
7188
  fill: #fa4d56;
7145
7189
  }
7146
7190
  @media (prefers-reduced-motion) {
7147
- .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7191
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7192
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7148
7193
  animation: none;
7149
7194
  }
7150
7195
  }
7151
7196
 
7197
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-major-warning,
7152
7198
  .c4p--status-icon--dark.c4p--status-icon--light-major-warning {
7153
7199
  fill: #ff832b;
7154
7200
  }
7155
7201
  @media (prefers-reduced-motion) {
7156
- .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7202
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7203
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7157
7204
  animation: none;
7158
7205
  }
7159
7206
  }
7160
7207
 
7208
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-major-warning,
7161
7209
  .c4p--status-icon--dark.c4p--status-icon--dark-major-warning {
7162
7210
  fill: #ff832b;
7163
7211
  }
7164
7212
  @media (prefers-reduced-motion) {
7165
- .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7213
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7214
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7166
7215
  animation: none;
7167
7216
  }
7168
7217
  }
7169
7218
 
7219
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-minor-warning,
7170
7220
  .c4p--status-icon--dark.c4p--status-icon--light-minor-warning {
7171
7221
  fill: #fddc69;
7172
7222
  }
7173
7223
  @media (prefers-reduced-motion) {
7174
- .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7224
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7225
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7175
7226
  animation: none;
7176
7227
  }
7177
7228
  }
7178
7229
 
7230
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning,
7179
7231
  .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
7180
7232
  fill: #fddc69;
7181
7233
  }
7182
7234
  @media (prefers-reduced-motion) {
7183
- .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7235
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7236
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7184
7237
  animation: none;
7185
7238
  }
7186
7239
  }
7187
7240
 
7241
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-undefined,
7188
7242
  .c4p--status-icon--dark.c4p--status-icon--light-undefined {
7189
7243
  fill: #a56eff;
7190
7244
  }
7191
7245
  @media (prefers-reduced-motion) {
7192
- .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7246
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7247
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7193
7248
  animation: none;
7194
7249
  }
7195
7250
  }
7196
7251
 
7252
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-undefined,
7197
7253
  .c4p--status-icon--dark.c4p--status-icon--dark-undefined {
7198
7254
  fill: #a56eff;
7199
7255
  }
7200
7256
  @media (prefers-reduced-motion) {
7201
- .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7257
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7258
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7202
7259
  animation: none;
7203
7260
  }
7204
7261
  }
7205
7262
 
7263
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-unknown,
7206
7264
  .c4p--status-icon--dark.c4p--status-icon--light-unknown {
7207
7265
  fill: #8d8d8d;
7208
7266
  }
7209
7267
  @media (prefers-reduced-motion) {
7210
- .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7268
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7269
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7211
7270
  animation: none;
7212
7271
  }
7213
7272
  }
7214
7273
 
7274
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-unknown,
7215
7275
  .c4p--status-icon--dark.c4p--status-icon--dark-unknown {
7216
7276
  fill: #8d8d8d;
7217
7277
  }
7218
7278
  @media (prefers-reduced-motion) {
7219
- .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7279
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7280
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7220
7281
  animation: none;
7221
7282
  }
7222
7283
  }
7223
7284
 
7285
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-normal,
7224
7286
  .c4p--status-icon--dark.c4p--status-icon--light-normal {
7225
7287
  fill: #24a148;
7226
7288
  }
7227
7289
  @media (prefers-reduced-motion) {
7228
- .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7290
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7291
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7229
7292
  animation: none;
7230
7293
  }
7231
7294
  }
7232
7295
 
7296
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-normal,
7233
7297
  .c4p--status-icon--dark.c4p--status-icon--dark-normal {
7234
7298
  fill: #24a148;
7235
7299
  }
7236
7300
  @media (prefers-reduced-motion) {
7237
- .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7301
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7302
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7238
7303
  animation: none;
7239
7304
  }
7240
7305
  }
7241
7306
 
7307
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-info,
7242
7308
  .c4p--status-icon--dark.c4p--status-icon--light-info {
7243
7309
  fill: #4589ff;
7244
7310
  }
7245
7311
  @media (prefers-reduced-motion) {
7246
- .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7312
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7313
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7247
7314
  animation: none;
7248
7315
  }
7249
7316
  }
7250
7317
 
7318
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-info,
7251
7319
  .c4p--status-icon--dark.c4p--status-icon--dark-info {
7252
7320
  fill: #4589ff;
7253
7321
  }
7254
7322
  @media (prefers-reduced-motion) {
7255
- .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7323
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7324
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7256
7325
  animation: none;
7257
7326
  }
7258
7327
  }
7259
7328
 
7329
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7260
7330
  .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7261
7331
  animation: rotating 8000ms infinite linear;
7262
7332
  fill: #4589ff;
7263
7333
  }
7264
7334
  @media (prefers-reduced-motion: reduce) {
7265
- .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7335
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7336
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7266
7337
  animation: none;
7267
7338
  }
7268
7339
  }
7269
7340
 
7341
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7270
7342
  .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7271
7343
  animation: rotating 8000ms infinite linear;
7272
7344
  fill: #4589ff;
7273
7345
  }
7274
7346
  @media (prefers-reduced-motion: reduce) {
7275
- .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7347
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7348
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7276
7349
  animation: none;
7277
7350
  }
7278
7351
  }
7279
7352
 
7353
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-running,
7280
7354
  .c4p--status-icon--dark.c4p--status-icon--light-running {
7281
7355
  fill: #24a148;
7282
7356
  transform: scaleY(-1);
7283
7357
  }
7284
7358
 
7359
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-running,
7285
7360
  .c4p--status-icon--dark.c4p--status-icon--dark-running {
7286
7361
  fill: #24a148;
7287
7362
  transform: scaleY(-1);
7288
7363
  }
7289
7364
 
7365
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-pending,
7290
7366
  .c4p--status-icon--dark.c4p--status-icon--light-pending {
7291
7367
  fill: #8d8d8d;
7292
7368
  }
7293
7369
  @media (prefers-reduced-motion) {
7294
- .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7370
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
7371
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
7295
7372
  animation: none;
7296
7373
  }
7297
7374
  }
7298
7375
 
7376
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-pending,
7299
7377
  .c4p--status-icon--dark.c4p--status-icon--dark-pending {
7300
7378
  fill: #8d8d8d;
7301
7379
  }
7302
7380
  @media (prefers-reduced-motion) {
7303
- .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7381
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
7382
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
7304
7383
  animation: none;
7305
7384
  }
7306
7385
  }