@carbon/ibm-products 1.4.0 → 1.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. package/css/index-full-carbon.css +527 -90
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +9 -3
  4. package/css/index-full-carbon.min.css.map +1 -0
  5. package/css/index-without-carbon-released-only.css +157 -67
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -0
  9. package/css/index-without-carbon.css +468 -84
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +9 -3
  12. package/css/index-without-carbon.min.css.map +1 -0
  13. package/css/index.css +470 -86
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +9 -3
  16. package/css/index.min.css.map +1 -0
  17. package/es/components/ActionSet/ActionSet.js +23 -11
  18. package/es/components/ActionSet/actions.js +25 -17
  19. package/es/components/AddSelect/AddSelect.js +115 -67
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
  21. package/es/components/AddSelect/AddSelectList.js +94 -0
  22. package/es/components/AddSelect/AddSelectSidebar.js +110 -0
  23. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  24. package/es/components/ButtonMenu/ButtonMenu.js +1 -1
  25. package/es/components/CancelableTextEdit/CancelableTextEdit.js +2 -2
  26. package/es/components/Card/Card.js +6 -4
  27. package/es/components/CreateFullPage/CreateFullPage.js +30 -5
  28. package/es/components/CreateFullPage/CreateFullPageStep.js +40 -32
  29. package/es/components/CreateInfluencer/CreateInfluencer.js +25 -3
  30. package/es/components/CreateTearsheet/CreateTearsheet.js +32 -6
  31. package/es/components/CreateTearsheet/CreateTearsheetStep.js +45 -38
  32. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +24 -4
  33. package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  34. package/es/components/DataSpreadsheet/DataSpreadsheet.js +154 -0
  35. package/es/components/DataSpreadsheet/generateData.js +47 -0
  36. package/es/components/DataSpreadsheet/index.js +7 -0
  37. package/es/components/EmptyStates/EmptyState.js +1 -1
  38. package/es/components/EmptyStates/EmptyStateContent.js +2 -2
  39. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  40. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  41. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  42. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  43. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  44. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  45. package/es/components/ExportModal/ExportModal.js +39 -12
  46. package/es/components/InlineEdit/InlineEdit.js +250 -80
  47. package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
  48. package/es/components/PageHeader/PageHeader.js +9 -6
  49. package/es/components/PageHeader/PageHeaderTitle.js +10 -6
  50. package/es/components/SidePanel/SidePanel.js +33 -16
  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 +4 -5
  54. package/es/components/WebTerminal/WebTerminal.js +1 -1
  55. package/es/components/index.js +2 -1
  56. package/es/global/js/hooks/index.js +1 -0
  57. package/es/global/js/hooks/useCreateComponentStepChange.js +31 -11
  58. package/es/global/js/hooks/useResetCreateComponent.js +7 -4
  59. package/es/global/js/hooks/useRetrieveStepData.js +51 -0
  60. package/es/global/js/package-settings.js +2 -1
  61. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  62. package/es/global/js/utils/lastIndexInArray.js +26 -0
  63. package/es/settings.js +0 -5
  64. package/lib/components/ActionSet/ActionSet.js +23 -11
  65. package/lib/components/ActionSet/actions.js +25 -17
  66. package/lib/components/AddSelect/AddSelect.js +119 -67
  67. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
  68. package/lib/components/AddSelect/AddSelectList.js +112 -0
  69. package/lib/components/AddSelect/AddSelectSidebar.js +122 -0
  70. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
  71. package/lib/components/ButtonMenu/ButtonMenu.js +1 -1
  72. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +1 -1
  73. package/lib/components/Card/Card.js +6 -4
  74. package/lib/components/CreateFullPage/CreateFullPage.js +29 -4
  75. package/lib/components/CreateFullPage/CreateFullPageStep.js +38 -30
  76. package/lib/components/CreateInfluencer/CreateInfluencer.js +25 -3
  77. package/lib/components/CreateTearsheet/CreateTearsheet.js +31 -5
  78. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +43 -36
  79. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +22 -2
  80. package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +8 -6
  81. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +171 -0
  82. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  83. package/lib/components/DataSpreadsheet/index.js +13 -0
  84. package/lib/components/EmptyStates/EmptyState.js +1 -1
  85. package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
  86. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  87. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  88. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  89. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  90. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  91. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  92. package/lib/components/ExportModal/ExportModal.js +36 -11
  93. package/lib/components/InlineEdit/InlineEdit.js +247 -79
  94. package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
  95. package/lib/components/PageHeader/PageHeader.js +9 -6
  96. package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
  97. package/lib/components/SidePanel/SidePanel.js +33 -16
  98. package/lib/components/Tearsheet/Tearsheet.js +1 -1
  99. package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
  100. package/lib/components/Tearsheet/TearsheetShell.js +3 -4
  101. package/lib/components/WebTerminal/WebTerminal.js +1 -1
  102. package/lib/components/index.js +9 -1
  103. package/lib/global/js/hooks/index.js +8 -0
  104. package/lib/global/js/hooks/useCreateComponentStepChange.js +31 -11
  105. package/lib/global/js/hooks/useResetCreateComponent.js +7 -4
  106. package/lib/global/js/hooks/useRetrieveStepData.js +62 -0
  107. package/lib/global/js/package-settings.js +2 -1
  108. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  109. package/lib/global/js/utils/lastIndexInArray.js +35 -0
  110. package/lib/settings.js +0 -6
  111. package/package.json +27 -25
  112. package/scss/components/AddSelect/_add-select.scss +59 -5
  113. package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
  114. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +1 -0
  115. package/scss/components/CancelableTextEdit/_storybook-styles.scss +0 -7
  116. package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
  117. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
  118. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -6
  119. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +79 -0
  120. package/scss/components/DataSpreadsheet/_index.scss +8 -0
  121. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  122. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -8
  123. package/scss/components/InlineEdit/_inline-edit.scss +288 -10
  124. package/scss/components/InlineEdit/_storybook-styles.scss +12 -6
  125. package/scss/components/LoadingBar/_storybook-styles.scss +0 -5
  126. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
  127. package/scss/components/OptionsTile/_storybook-styles.scss +0 -7
  128. package/scss/components/PageHeader/_index.scss +1 -1
  129. package/scss/components/PageHeader/_page-header.scss +4 -1
  130. package/scss/components/ProductiveCard/_productive-card.scss +0 -4
  131. package/scss/components/SidePanel/_side-panel.scss +15 -6
  132. package/scss/components/StatusIcon/_index.scss +1 -1
  133. package/scss/components/StatusIcon/_status-icon.scss +6 -4
  134. package/scss/components/TagSet/_index.scss +1 -1
  135. package/scss/components/UserProfileImage/_index.scss +1 -1
  136. package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
  137. package/scss/components/WebTerminal/_web-terminal.scss +2 -2
  138. package/scss/components/_index.scss +1 -0
  139. package/scss/global/styles/_project-settings.scss +5 -1
  140. package/es/generated/feature-flags/feature-flags.js +0 -15
  141. package/lib/generated/feature-flags/feature-flags.js +0 -22
  142. package/scss/generated/feature-flags/_feature-flags.scss +0 -19
package/css/index.css CHANGED
@@ -4065,7 +4065,7 @@ fieldset[disabled] .bx--form__helper-text {
4065
4065
  outline: 2px solid transparent;
4066
4066
  outline-offset: -2px;
4067
4067
  border-bottom: 1px solid transparent;
4068
- background-color: var(--cds-field-disabled, #f4f4f4);
4068
+ background-color: var(--cds-field, #f4f4f4);
4069
4069
  color: var(--cds-text-disabled, #c6c6c6);
4070
4070
  cursor: not-allowed;
4071
4071
  -webkit-text-fill-color: var(--cds-disabled-02, #c6c6c6);
@@ -11580,7 +11580,7 @@ a.bx--overflow-menu-options__btn::before {
11580
11580
  /* stylelint-disable-line no-invalid-position-at-import-rule */
11581
11581
  /* stylelint-disable-line no-invalid-position-at-import-rule */
11582
11582
  /* stylelint-disable-line no-invalid-position-at-import-rule */
11583
- @keyframes influencerMenuEntrance {
11583
+ @keyframes influencer-menu-entrance {
11584
11584
  0% {
11585
11585
  opacity: 0;
11586
11586
  transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
@@ -11590,7 +11590,7 @@ a.bx--overflow-menu-options__btn::before {
11590
11590
  transform: translateX(0);
11591
11591
  }
11592
11592
  }
11593
- @keyframes influencerMenuExit {
11593
+ @keyframes influencer-menu-exit {
11594
11594
  0% {
11595
11595
  opacity: 1;
11596
11596
  transform: translateX(0);
@@ -11625,14 +11625,14 @@ a.bx--overflow-menu-options__btn::before {
11625
11625
 
11626
11626
  .c4p--create-influencer__side-nav-opening,
11627
11627
  .c4p--create-influencer__progress-indicator-opening {
11628
- animation: influencerMenuEntrance 240ms 1;
11628
+ animation: influencer-menu-entrance 240ms 1;
11629
11629
  animation-fill-mode: forwards;
11630
11630
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
11631
11631
  }
11632
11632
 
11633
11633
  .c4p--create-influencer__side-nav-closing,
11634
11634
  .c4p--create-influencer__progress-indicator-closing {
11635
- animation: influencerMenuExit 240ms 1;
11635
+ animation: influencer-menu-exit 240ms 1;
11636
11636
  animation-fill-mode: forwards;
11637
11637
  transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
11638
11638
  }
@@ -12253,7 +12253,7 @@ a.bx--overflow-menu-options__btn::before {
12253
12253
  stroke-dashoffset: 0;
12254
12254
  }
12255
12255
  }
12256
- @keyframes sidePanelExitLeft {
12256
+ @keyframes side-panel-exit-left {
12257
12257
  0% {
12258
12258
  opacity: 1;
12259
12259
  transform: translateX(0);
@@ -12263,7 +12263,7 @@ a.bx--overflow-menu-options__btn::before {
12263
12263
  transform: translateX(calc(-1 * 30rem));
12264
12264
  }
12265
12265
  }
12266
- @keyframes sidePanelExitRight {
12266
+ @keyframes side-panel-exit-right {
12267
12267
  0% {
12268
12268
  opacity: 1;
12269
12269
  transform: translateX(0);
@@ -12311,7 +12311,7 @@ a.bx--overflow-menu-options__btn::before {
12311
12311
  right: 0;
12312
12312
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
12313
12313
  }
12314
- @keyframes sidePanelEntranceRight {
12314
+ @keyframes side-panel-entrance-right {
12315
12315
  0% {
12316
12316
  opacity: 0;
12317
12317
  transform: translateX(16rem);
@@ -12327,7 +12327,7 @@ a.bx--overflow-menu-options__btn::before {
12327
12327
  left: 0;
12328
12328
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
12329
12329
  }
12330
- @keyframes sidePanelEntranceLeft {
12330
+ @keyframes side-panel-entrance-left {
12331
12331
  0% {
12332
12332
  opacity: 0;
12333
12333
  transform: translateX(-16rem);
@@ -12354,7 +12354,7 @@ a.bx--overflow-menu-options__btn::before {
12354
12354
  right: 0;
12355
12355
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
12356
12356
  }
12357
- @keyframes sidePanelEntranceRight {
12357
+ @keyframes side-panel-entrance-right {
12358
12358
  0% {
12359
12359
  opacity: 0;
12360
12360
  transform: translateX(20rem);
@@ -12370,7 +12370,7 @@ a.bx--overflow-menu-options__btn::before {
12370
12370
  left: 0;
12371
12371
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
12372
12372
  }
12373
- @keyframes sidePanelEntranceLeft {
12373
+ @keyframes side-panel-entrance-left {
12374
12374
  0% {
12375
12375
  opacity: 0;
12376
12376
  transform: translateX(-20rem);
@@ -12397,7 +12397,7 @@ a.bx--overflow-menu-options__btn::before {
12397
12397
  right: 0;
12398
12398
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
12399
12399
  }
12400
- @keyframes sidePanelEntranceRight {
12400
+ @keyframes side-panel-entrance-right {
12401
12401
  0% {
12402
12402
  opacity: 0;
12403
12403
  transform: translateX(30rem);
@@ -12413,7 +12413,7 @@ a.bx--overflow-menu-options__btn::before {
12413
12413
  left: 0;
12414
12414
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
12415
12415
  }
12416
- @keyframes sidePanelEntranceLeft {
12416
+ @keyframes side-panel-entrance-left {
12417
12417
  0% {
12418
12418
  opacity: 0;
12419
12419
  transform: translateX(-30rem);
@@ -12440,7 +12440,7 @@ a.bx--overflow-menu-options__btn::before {
12440
12440
  right: 0;
12441
12441
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
12442
12442
  }
12443
- @keyframes sidePanelEntranceRight {
12443
+ @keyframes side-panel-entrance-right {
12444
12444
  0% {
12445
12445
  opacity: 0;
12446
12446
  transform: translateX(40rem);
@@ -12456,7 +12456,7 @@ a.bx--overflow-menu-options__btn::before {
12456
12456
  left: 0;
12457
12457
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
12458
12458
  }
12459
- @keyframes sidePanelEntranceLeft {
12459
+ @keyframes side-panel-entrance-left {
12460
12460
  0% {
12461
12461
  opacity: 0;
12462
12462
  transform: translateX(-40rem);
@@ -12483,7 +12483,7 @@ a.bx--overflow-menu-options__btn::before {
12483
12483
  right: 0;
12484
12484
  border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
12485
12485
  }
12486
- @keyframes sidePanelEntranceRight {
12486
+ @keyframes side-panel-entrance-right {
12487
12487
  0% {
12488
12488
  opacity: 0;
12489
12489
  transform: translateX(75%);
@@ -12499,7 +12499,7 @@ a.bx--overflow-menu-options__btn::before {
12499
12499
  left: 0;
12500
12500
  border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
12501
12501
  }
12502
- @keyframes sidePanelEntranceLeft {
12502
+ @keyframes side-panel-entrance-left {
12503
12503
  0% {
12504
12504
  opacity: 0;
12505
12505
  transform: translateX(-75%);
@@ -12543,6 +12543,15 @@ a.bx--overflow-menu-options__btn::before {
12543
12543
  content: "";
12544
12544
  opacity: var(--c4p--side-panel--divider-opacity);
12545
12545
  }
12546
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion {
12547
+ z-index: 5;
12548
+ border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
12549
+ margin-bottom: var(--cds-spacing-05, 1rem);
12550
+ }
12551
+ .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion.c4p--side-panel__title-container--no-title-animation {
12552
+ border-bottom: 0;
12553
+ margin-bottom: 0;
12554
+ }
12546
12555
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
12547
12556
  top: var(--cds-spacing-09, 3rem);
12548
12557
  }
@@ -12773,7 +12782,7 @@ a.bx--overflow-menu-options__btn::before {
12773
12782
  background-color: var(--cds-field-02, #ffffff);
12774
12783
  }
12775
12784
 
12776
- @keyframes sidePanelOverlayEntrance {
12785
+ @keyframes side-panel-overlay-entrance {
12777
12786
  0% {
12778
12787
  opacity: 0;
12779
12788
  }
@@ -12781,7 +12790,7 @@ a.bx--overflow-menu-options__btn::before {
12781
12790
  opacity: 1;
12782
12791
  }
12783
12792
  }
12784
- @keyframes sidePanelOverlayExit {
12793
+ @keyframes side-panel-overlay-exit {
12785
12794
  0% {
12786
12795
  opacity: 1;
12787
12796
  }
@@ -14149,7 +14158,7 @@ a.bx--side-nav__link--current::before {
14149
14158
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14150
14159
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14151
14160
  /* stylelint-disable-line no-invalid-position-at-import-rule */
14152
- @keyframes stepContentEntrance {
14161
+ @keyframes step-content-entrance {
14153
14162
  0% {
14154
14163
  opacity: 0;
14155
14164
  transform: translateY(-0.75rem);
@@ -14168,7 +14177,7 @@ a.bx--side-nav__link--current::before {
14168
14177
  }
14169
14178
 
14170
14179
  .c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
14171
- animation: 400ms stepContentEntrance;
14180
+ animation: 400ms step-content-entrance;
14172
14181
  animation-fill-mode: forwards;
14173
14182
  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14174
14183
  opacity: 0;
@@ -16623,27 +16632,60 @@ a.bx--side-nav__link--current::before {
16623
16632
  .c4p--add-select__selections {
16624
16633
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
16625
16634
  }
16635
+ .c4p--add-select__selections-wrapper {
16636
+ display: block;
16637
+ }
16638
+ .c4p--add-select__selections-cell-wrapper {
16639
+ display: flex;
16640
+ align-items: center;
16641
+ justify-content: space-between;
16642
+ }
16626
16643
 
16627
- .c4p--add-select__influencer-header {
16644
+ .c4p--add-select__sidebar-header {
16628
16645
  display: flex;
16629
16646
  padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
16630
16647
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
16631
16648
  }
16632
- .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
16649
+ .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
16633
16650
  font-size: var(--cds-productive-heading-02-font-size, 1rem);
16634
16651
  font-weight: var(--cds-productive-heading-02-font-weight, 600);
16635
16652
  line-height: var(--cds-productive-heading-02-line-height, 1.375);
16636
16653
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
16637
16654
  }
16638
16655
 
16639
- .c4p--add-select__influencer-title {
16656
+ .c4p--add-select__sidebar-title {
16640
16657
  margin-right: var(--cds-spacing-03, 0.5rem);
16641
16658
  }
16642
16659
 
16643
- .c4p--add-select__influencer-body {
16660
+ .c4p--add-select__sidebar-body {
16644
16661
  padding: var(--cds-spacing-05, 1rem);
16645
16662
  }
16646
16663
 
16664
+ .c4p--add-select .c4p--add-select__sidebar-item-header {
16665
+ font-size: var(--cds-label-01-font-size, 0.75rem);
16666
+ font-weight: var(--cds-label-01-font-weight, 400);
16667
+ line-height: var(--cds-label-01-line-height, 1.33333);
16668
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16669
+ }
16670
+
16671
+ .c4p--add-select .c4p--add-select__sidebar-item-body {
16672
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
16673
+ font-weight: var(--cds-body-long-01-font-weight, 400);
16674
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
16675
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
16676
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16677
+ }
16678
+
16679
+ .c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
16680
+ background: var(--cds-disabled-02, #c6c6c6);
16681
+ }
16682
+
16683
+ .c4p--add-select .c4p--add-select__sidebar-accordion-title {
16684
+ display: flex;
16685
+ align-items: center;
16686
+ justify-content: space-between;
16687
+ }
16688
+
16647
16689
  .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
16648
16690
  max-width: 29rem;
16649
16691
  flex: 0 0 50%;
@@ -16660,6 +16702,25 @@ a.bx--side-nav__link--current::before {
16660
16702
  padding-right: 0;
16661
16703
  }
16662
16704
 
16705
+ .c4p--add-select .bx--structured-list-td {
16706
+ padding-bottom: var(--cds-spacing-05, 1rem);
16707
+ }
16708
+
16709
+ .c4p--add-select .bx--radio-button-wrapper .bx--radio-button__label {
16710
+ justify-content: left;
16711
+ }
16712
+
16713
+ .c4p--add-select .bx--breadcrumb .bx--link {
16714
+ cursor: pointer;
16715
+ }
16716
+
16717
+ .bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
16718
+ opacity: 1;
16719
+ }
16720
+ .bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
16721
+ opacity: 0;
16722
+ }
16723
+
16663
16724
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16664
16725
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16665
16726
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -16823,7 +16884,7 @@ a.bx--side-nav__link--current::before {
16823
16884
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16824
16885
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16825
16886
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16826
- @keyframes fadeIn {
16887
+ @keyframes fade-in {
16827
16888
  0% {
16828
16889
  opacity: 0;
16829
16890
  transform: translateY(-38.5rem);
@@ -16833,7 +16894,7 @@ a.bx--side-nav__link--current::before {
16833
16894
  transform: translateY(0);
16834
16895
  }
16835
16896
  }
16836
- @keyframes fadeOut {
16897
+ @keyframes fade-out {
16837
16898
  0% {
16838
16899
  opacity: 1;
16839
16900
  transform: translateY(0);
@@ -16976,8 +17037,6 @@ a.bx--side-nav__link--current::before {
16976
17037
  --cds-layer-selected-hover: #4c4c4c;
16977
17038
  --cds-layer-selected-inverse: #f4f4f4;
16978
17039
  --cds-border-subtle-selected: #525252;
16979
- --cds-layer-disabled: #262626;
16980
- --cds-field-disabled: #262626;
16981
17040
  --cds-border-disabled: #262626;
16982
17041
  --cds-text-disabled: #525252;
16983
17042
  --cds-button-disabled: #525252;
@@ -18528,7 +18587,7 @@ a.bx--side-nav__link--current::before {
18528
18587
 
18529
18588
  .bx--search-input[disabled] {
18530
18589
  border-bottom: 1px solid transparent;
18531
- background-color: var(--cds-field-disabled, #f4f4f4);
18590
+ background-color: var(--cds-field, #f4f4f4);
18532
18591
  color: var(--cds-disabled-02, #c6c6c6);
18533
18592
  cursor: not-allowed;
18534
18593
  }
@@ -19434,6 +19493,8 @@ a.bx--side-nav__link--current::before {
19434
19493
  .c4p--page-header .c4p--page-header__title--editable {
19435
19494
  display: flex;
19436
19495
  overflow: visible;
19496
+ margin-top: calc(-1 * var(--cds-spacing-01, 0.125rem));
19497
+ margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
19437
19498
  }
19438
19499
  .c4p--page-header .c4p--page-header__title-skeleton {
19439
19500
  height: var(--cds-spacing-07, 2rem);
@@ -19721,9 +19782,6 @@ a.bx--side-nav__link--current::before {
19721
19782
  justify-content: space-between;
19722
19783
  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
19723
19784
  }
19724
- .c4p--card__productive .c4p--card__footer .bx--btn svg {
19725
- margin-left: var(--cds-spacing-03, 0.5rem);
19726
- }
19727
19785
  .c4p--card__productive .c4p--card__footer-no-button {
19728
19786
  justify-content: flex-end;
19729
19787
  }
@@ -20240,386 +20298,470 @@ a.bx--side-nav__link--current::before {
20240
20298
  fill: #161616;
20241
20299
  }
20242
20300
 
20301
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-fatal,
20243
20302
  .c4p--status-icon--light.c4p--status-icon--light-fatal {
20244
20303
  fill: #000000;
20245
20304
  }
20246
20305
  @media (prefers-reduced-motion) {
20247
- .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20306
+ .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,
20307
+ .c4p--status-icon--light.c4p--status-icon--light-fatal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20248
20308
  animation: none;
20249
20309
  }
20250
20310
  }
20251
20311
 
20312
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-fatal,
20252
20313
  .c4p--status-icon--light.c4p--status-icon--dark-fatal {
20253
20314
  fill: #000000;
20254
20315
  }
20255
20316
  @media (prefers-reduced-motion) {
20256
- .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20317
+ .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,
20318
+ .c4p--status-icon--light.c4p--status-icon--dark-fatal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20257
20319
  animation: none;
20258
20320
  }
20259
20321
  }
20260
20322
 
20323
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-critical,
20261
20324
  .c4p--status-icon--light.c4p--status-icon--light-critical {
20262
20325
  fill: #da1e28;
20263
20326
  }
20264
20327
  @media (prefers-reduced-motion) {
20265
- .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20328
+ .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,
20329
+ .c4p--status-icon--light.c4p--status-icon--light-critical .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20266
20330
  animation: none;
20267
20331
  }
20268
20332
  }
20269
20333
 
20334
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-critical,
20270
20335
  .c4p--status-icon--light.c4p--status-icon--dark-critical {
20271
20336
  fill: #da1e28;
20272
20337
  }
20273
20338
  @media (prefers-reduced-motion) {
20274
- .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20339
+ .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,
20340
+ .c4p--status-icon--light.c4p--status-icon--dark-critical .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20275
20341
  animation: none;
20276
20342
  }
20277
20343
  }
20278
20344
 
20345
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-major-warning,
20279
20346
  .c4p--status-icon--light.c4p--status-icon--light-major-warning {
20280
20347
  fill: #ff832b;
20281
20348
  }
20282
20349
  @media (prefers-reduced-motion) {
20283
- .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20350
+ .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,
20351
+ .c4p--status-icon--light.c4p--status-icon--light-major-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20284
20352
  animation: none;
20285
20353
  }
20286
20354
  }
20287
20355
 
20356
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-major-warning,
20288
20357
  .c4p--status-icon--light.c4p--status-icon--dark-major-warning {
20289
20358
  fill: #ff832b;
20290
20359
  }
20291
20360
  @media (prefers-reduced-motion) {
20292
- .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20361
+ .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,
20362
+ .c4p--status-icon--light.c4p--status-icon--dark-major-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20293
20363
  animation: none;
20294
20364
  }
20295
20365
  }
20296
20366
 
20367
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-minor-warning,
20297
20368
  .c4p--status-icon--light.c4p--status-icon--light-minor-warning {
20298
20369
  fill: #fddc69;
20299
20370
  }
20300
20371
  @media (prefers-reduced-motion) {
20301
- .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20372
+ .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,
20373
+ .c4p--status-icon--light.c4p--status-icon--light-minor-warning .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20302
20374
  animation: none;
20303
20375
  }
20304
20376
  }
20305
20377
 
20378
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-minor-warning,
20306
20379
  .c4p--status-icon--light.c4p--status-icon--dark-minor-warning {
20307
20380
  fill: #fddc69;
20308
20381
  }
20309
20382
  @media (prefers-reduced-motion) {
20310
- .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20383
+ .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,
20384
+ .c4p--status-icon--light.c4p--status-icon--dark-minor-warning .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20311
20385
  animation: none;
20312
20386
  }
20313
20387
  }
20314
20388
 
20389
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-undefined,
20315
20390
  .c4p--status-icon--light.c4p--status-icon--light-undefined {
20316
20391
  fill: #8a3ffc;
20317
20392
  }
20318
20393
  @media (prefers-reduced-motion) {
20319
- .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20394
+ .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,
20395
+ .c4p--status-icon--light.c4p--status-icon--light-undefined .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20320
20396
  animation: none;
20321
20397
  }
20322
20398
  }
20323
20399
 
20400
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-undefined,
20324
20401
  .c4p--status-icon--light.c4p--status-icon--dark-undefined {
20325
20402
  fill: #8a3ffc;
20326
20403
  }
20327
20404
  @media (prefers-reduced-motion) {
20328
- .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20405
+ .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,
20406
+ .c4p--status-icon--light.c4p--status-icon--dark-undefined .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20329
20407
  animation: none;
20330
20408
  }
20331
20409
  }
20332
20410
 
20411
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-unknown,
20333
20412
  .c4p--status-icon--light.c4p--status-icon--light-unknown {
20334
20413
  fill: #6f6f6f;
20335
20414
  }
20336
20415
  @media (prefers-reduced-motion) {
20337
- .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20416
+ .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,
20417
+ .c4p--status-icon--light.c4p--status-icon--light-unknown .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20338
20418
  animation: none;
20339
20419
  }
20340
20420
  }
20341
20421
 
20422
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-unknown,
20342
20423
  .c4p--status-icon--light.c4p--status-icon--dark-unknown {
20343
20424
  fill: #6f6f6f;
20344
20425
  }
20345
20426
  @media (prefers-reduced-motion) {
20346
- .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20427
+ .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,
20428
+ .c4p--status-icon--light.c4p--status-icon--dark-unknown .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20347
20429
  animation: none;
20348
20430
  }
20349
20431
  }
20350
20432
 
20433
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-normal,
20351
20434
  .c4p--status-icon--light.c4p--status-icon--light-normal {
20352
20435
  fill: #198038;
20353
20436
  }
20354
20437
  @media (prefers-reduced-motion) {
20355
- .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20438
+ .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,
20439
+ .c4p--status-icon--light.c4p--status-icon--light-normal .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20356
20440
  animation: none;
20357
20441
  }
20358
20442
  }
20359
20443
 
20444
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-normal,
20360
20445
  .c4p--status-icon--light.c4p--status-icon--dark-normal {
20361
20446
  fill: #198038;
20362
20447
  }
20363
20448
  @media (prefers-reduced-motion) {
20364
- .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20449
+ .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,
20450
+ .c4p--status-icon--light.c4p--status-icon--dark-normal .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20365
20451
  animation: none;
20366
20452
  }
20367
20453
  }
20368
20454
 
20455
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-info,
20369
20456
  .c4p--status-icon--light.c4p--status-icon--light-info {
20370
20457
  fill: #0f62fe;
20371
20458
  }
20372
20459
  @media (prefers-reduced-motion) {
20373
- .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20460
+ .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,
20461
+ .c4p--status-icon--light.c4p--status-icon--light-info .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20374
20462
  animation: none;
20375
20463
  }
20376
20464
  }
20377
20465
 
20466
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-info,
20378
20467
  .c4p--status-icon--light.c4p--status-icon--dark-info {
20379
20468
  fill: #0f62fe;
20380
20469
  }
20381
20470
  @media (prefers-reduced-motion) {
20382
- .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20471
+ .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,
20472
+ .c4p--status-icon--light.c4p--status-icon--dark-info .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20383
20473
  animation: none;
20384
20474
  }
20385
20475
  }
20386
20476
 
20477
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
20387
20478
  .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20388
20479
  animation: rotating 8000ms infinite linear;
20389
20480
  fill: #0f62fe;
20390
20481
  }
20391
20482
  @media (prefers-reduced-motion: reduce) {
20392
- .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20483
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-in-progress,
20484
+ .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20393
20485
  animation: none;
20394
20486
  }
20395
20487
  }
20396
20488
 
20489
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
20397
20490
  .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20398
20491
  animation: rotating 8000ms infinite linear;
20399
20492
  fill: #0f62fe;
20400
20493
  }
20401
20494
  @media (prefers-reduced-motion: reduce) {
20402
- .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20495
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-in-progress,
20496
+ .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20403
20497
  animation: none;
20404
20498
  }
20405
20499
  }
20406
20500
 
20501
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-running,
20407
20502
  .c4p--status-icon--light.c4p--status-icon--light-running {
20408
20503
  fill: #198038;
20409
20504
  transform: scaleY(-1);
20410
20505
  }
20411
20506
 
20507
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-running,
20412
20508
  .c4p--status-icon--light.c4p--status-icon--dark-running {
20413
20509
  fill: #198038;
20414
20510
  transform: scaleY(-1);
20415
20511
  }
20416
20512
 
20513
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--light-pending,
20417
20514
  .c4p--status-icon--light.c4p--status-icon--light-pending {
20418
20515
  fill: #6f6f6f;
20419
20516
  }
20420
20517
  @media (prefers-reduced-motion) {
20421
- .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20518
+ .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,
20519
+ .c4p--status-icon--light.c4p--status-icon--light-pending .c4p--status-icon--light.c4p--status-icon--light-in-progress {
20422
20520
  animation: none;
20423
20521
  }
20424
20522
  }
20425
20523
 
20524
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--light.c4p--status-icon--dark-pending,
20426
20525
  .c4p--status-icon--light.c4p--status-icon--dark-pending {
20427
20526
  fill: #6f6f6f;
20428
20527
  }
20429
20528
  @media (prefers-reduced-motion) {
20430
- .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20529
+ .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,
20530
+ .c4p--status-icon--light.c4p--status-icon--dark-pending .c4p--status-icon--light.c4p--status-icon--dark-in-progress {
20431
20531
  animation: none;
20432
20532
  }
20433
20533
  }
20434
20534
 
20535
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-fatal,
20435
20536
  .c4p--status-icon--dark.c4p--status-icon--light-fatal {
20436
20537
  fill: #8d8d8d;
20437
20538
  }
20438
20539
  @media (prefers-reduced-motion) {
20439
- .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20540
+ .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,
20541
+ .c4p--status-icon--dark.c4p--status-icon--light-fatal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20440
20542
  animation: none;
20441
20543
  }
20442
20544
  }
20443
20545
 
20546
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-fatal,
20444
20547
  .c4p--status-icon--dark.c4p--status-icon--dark-fatal {
20445
20548
  fill: #8d8d8d;
20446
20549
  }
20447
20550
  @media (prefers-reduced-motion) {
20448
- .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20551
+ .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,
20552
+ .c4p--status-icon--dark.c4p--status-icon--dark-fatal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20449
20553
  animation: none;
20450
20554
  }
20451
20555
  }
20452
20556
 
20557
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-critical,
20453
20558
  .c4p--status-icon--dark.c4p--status-icon--light-critical {
20454
20559
  fill: #fa4d56;
20455
20560
  }
20456
20561
  @media (prefers-reduced-motion) {
20457
- .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20562
+ .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,
20563
+ .c4p--status-icon--dark.c4p--status-icon--light-critical .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20458
20564
  animation: none;
20459
20565
  }
20460
20566
  }
20461
20567
 
20568
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-critical,
20462
20569
  .c4p--status-icon--dark.c4p--status-icon--dark-critical {
20463
20570
  fill: #fa4d56;
20464
20571
  }
20465
20572
  @media (prefers-reduced-motion) {
20466
- .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20573
+ .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,
20574
+ .c4p--status-icon--dark.c4p--status-icon--dark-critical .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20467
20575
  animation: none;
20468
20576
  }
20469
20577
  }
20470
20578
 
20579
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-major-warning,
20471
20580
  .c4p--status-icon--dark.c4p--status-icon--light-major-warning {
20472
20581
  fill: #ff832b;
20473
20582
  }
20474
20583
  @media (prefers-reduced-motion) {
20475
- .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20584
+ .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,
20585
+ .c4p--status-icon--dark.c4p--status-icon--light-major-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20476
20586
  animation: none;
20477
20587
  }
20478
20588
  }
20479
20589
 
20590
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-major-warning,
20480
20591
  .c4p--status-icon--dark.c4p--status-icon--dark-major-warning {
20481
20592
  fill: #ff832b;
20482
20593
  }
20483
20594
  @media (prefers-reduced-motion) {
20484
- .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20595
+ .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,
20596
+ .c4p--status-icon--dark.c4p--status-icon--dark-major-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20485
20597
  animation: none;
20486
20598
  }
20487
20599
  }
20488
20600
 
20601
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-minor-warning,
20489
20602
  .c4p--status-icon--dark.c4p--status-icon--light-minor-warning {
20490
20603
  fill: #fddc69;
20491
20604
  }
20492
20605
  @media (prefers-reduced-motion) {
20493
- .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20606
+ .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,
20607
+ .c4p--status-icon--dark.c4p--status-icon--light-minor-warning .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20494
20608
  animation: none;
20495
20609
  }
20496
20610
  }
20497
20611
 
20612
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning,
20498
20613
  .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning {
20499
20614
  fill: #fddc69;
20500
20615
  }
20501
20616
  @media (prefers-reduced-motion) {
20502
- .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20617
+ .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,
20618
+ .c4p--status-icon--dark.c4p--status-icon--dark-minor-warning .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20503
20619
  animation: none;
20504
20620
  }
20505
20621
  }
20506
20622
 
20623
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-undefined,
20507
20624
  .c4p--status-icon--dark.c4p--status-icon--light-undefined {
20508
20625
  fill: #a56eff;
20509
20626
  }
20510
20627
  @media (prefers-reduced-motion) {
20511
- .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20628
+ .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,
20629
+ .c4p--status-icon--dark.c4p--status-icon--light-undefined .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20512
20630
  animation: none;
20513
20631
  }
20514
20632
  }
20515
20633
 
20634
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-undefined,
20516
20635
  .c4p--status-icon--dark.c4p--status-icon--dark-undefined {
20517
20636
  fill: #a56eff;
20518
20637
  }
20519
20638
  @media (prefers-reduced-motion) {
20520
- .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20639
+ .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,
20640
+ .c4p--status-icon--dark.c4p--status-icon--dark-undefined .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20521
20641
  animation: none;
20522
20642
  }
20523
20643
  }
20524
20644
 
20645
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-unknown,
20525
20646
  .c4p--status-icon--dark.c4p--status-icon--light-unknown {
20526
20647
  fill: #8d8d8d;
20527
20648
  }
20528
20649
  @media (prefers-reduced-motion) {
20529
- .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20650
+ .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,
20651
+ .c4p--status-icon--dark.c4p--status-icon--light-unknown .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20530
20652
  animation: none;
20531
20653
  }
20532
20654
  }
20533
20655
 
20656
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-unknown,
20534
20657
  .c4p--status-icon--dark.c4p--status-icon--dark-unknown {
20535
20658
  fill: #8d8d8d;
20536
20659
  }
20537
20660
  @media (prefers-reduced-motion) {
20538
- .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20661
+ .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,
20662
+ .c4p--status-icon--dark.c4p--status-icon--dark-unknown .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20539
20663
  animation: none;
20540
20664
  }
20541
20665
  }
20542
20666
 
20667
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-normal,
20543
20668
  .c4p--status-icon--dark.c4p--status-icon--light-normal {
20544
20669
  fill: #24a148;
20545
20670
  }
20546
20671
  @media (prefers-reduced-motion) {
20547
- .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20672
+ .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,
20673
+ .c4p--status-icon--dark.c4p--status-icon--light-normal .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20548
20674
  animation: none;
20549
20675
  }
20550
20676
  }
20551
20677
 
20678
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-normal,
20552
20679
  .c4p--status-icon--dark.c4p--status-icon--dark-normal {
20553
20680
  fill: #24a148;
20554
20681
  }
20555
20682
  @media (prefers-reduced-motion) {
20556
- .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20683
+ .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,
20684
+ .c4p--status-icon--dark.c4p--status-icon--dark-normal .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20557
20685
  animation: none;
20558
20686
  }
20559
20687
  }
20560
20688
 
20689
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-info,
20561
20690
  .c4p--status-icon--dark.c4p--status-icon--light-info {
20562
20691
  fill: #4589ff;
20563
20692
  }
20564
20693
  @media (prefers-reduced-motion) {
20565
- .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20694
+ .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,
20695
+ .c4p--status-icon--dark.c4p--status-icon--light-info .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20566
20696
  animation: none;
20567
20697
  }
20568
20698
  }
20569
20699
 
20700
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-info,
20570
20701
  .c4p--status-icon--dark.c4p--status-icon--dark-info {
20571
20702
  fill: #4589ff;
20572
20703
  }
20573
20704
  @media (prefers-reduced-motion) {
20574
- .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20705
+ .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,
20706
+ .c4p--status-icon--dark.c4p--status-icon--dark-info .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20575
20707
  animation: none;
20576
20708
  }
20577
20709
  }
20578
20710
 
20711
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
20579
20712
  .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20580
20713
  animation: rotating 8000ms infinite linear;
20581
20714
  fill: #4589ff;
20582
20715
  }
20583
20716
  @media (prefers-reduced-motion: reduce) {
20584
- .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20717
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-in-progress,
20718
+ .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20585
20719
  animation: none;
20586
20720
  }
20587
20721
  }
20588
20722
 
20723
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
20589
20724
  .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20590
20725
  animation: rotating 8000ms infinite linear;
20591
20726
  fill: #4589ff;
20592
20727
  }
20593
20728
  @media (prefers-reduced-motion: reduce) {
20594
- .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20729
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-in-progress,
20730
+ .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20595
20731
  animation: none;
20596
20732
  }
20597
20733
  }
20598
20734
 
20735
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-running,
20599
20736
  .c4p--status-icon--dark.c4p--status-icon--light-running {
20600
20737
  fill: #24a148;
20601
20738
  transform: scaleY(-1);
20602
20739
  }
20603
20740
 
20741
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-running,
20604
20742
  .c4p--status-icon--dark.c4p--status-icon--dark-running {
20605
20743
  fill: #24a148;
20606
20744
  transform: scaleY(-1);
20607
20745
  }
20608
20746
 
20747
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--light-pending,
20609
20748
  .c4p--status-icon--dark.c4p--status-icon--light-pending {
20610
20749
  fill: #8d8d8d;
20611
20750
  }
20612
20751
  @media (prefers-reduced-motion) {
20613
- .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20752
+ .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,
20753
+ .c4p--status-icon--dark.c4p--status-icon--light-pending .c4p--status-icon--dark.c4p--status-icon--light-in-progress {
20614
20754
  animation: none;
20615
20755
  }
20616
20756
  }
20617
20757
 
20758
+ .bx--btn.bx--btn--icon-only.bx--tooltip__trigger .c4p--status-icon--dark.c4p--status-icon--dark-pending,
20618
20759
  .c4p--status-icon--dark.c4p--status-icon--dark-pending {
20619
20760
  fill: #8d8d8d;
20620
20761
  }
20621
20762
  @media (prefers-reduced-motion) {
20622
- .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20763
+ .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,
20764
+ .c4p--status-icon--dark.c4p--status-icon--dark-pending .c4p--status-icon--dark.c4p--status-icon--dark-in-progress {
20623
20765
  animation: none;
20624
20766
  }
20625
20767
  }
@@ -21029,7 +21171,7 @@ a.bx--side-nav__link--current::before {
21029
21171
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21030
21172
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21031
21173
  /* stylelint-disable-line no-invalid-position-at-import-rule */
21032
- @keyframes webTerminalEntrance {
21174
+ @keyframes web-terminal-entrance {
21033
21175
  0% {
21034
21176
  opacity: 0;
21035
21177
  transform: translateX(36.5rem);
@@ -21039,7 +21181,7 @@ a.bx--side-nav__link--current::before {
21039
21181
  transform: translateX(0);
21040
21182
  }
21041
21183
  }
21042
- @keyframes webTerminalExit {
21184
+ @keyframes web-terminal-exit {
21043
21185
  0% {
21044
21186
  opacity: 1;
21045
21187
  transform: translateX(0);
@@ -21187,8 +21329,6 @@ a.bx--side-nav__link--current::before {
21187
21329
  --cds-layer-selected-hover: #656565;
21188
21330
  --cds-layer-selected-inverse: #f4f4f4;
21189
21331
  --cds-border-subtle-selected: #6f6f6f;
21190
- --cds-layer-disabled: #393939;
21191
- --cds-field-disabled: #393939;
21192
21332
  --cds-border-disabled: #393939;
21193
21333
  --cds-text-disabled: #6f6f6f;
21194
21334
  --cds-button-disabled: #6f6f6f;
@@ -21633,8 +21773,6 @@ a.bx--side-nav__link--current::before {
21633
21773
  --cds-layer-selected-hover: #4c4c4c;
21634
21774
  --cds-layer-selected-inverse: #f4f4f4;
21635
21775
  --cds-border-subtle-selected: #525252;
21636
- --cds-layer-disabled: #262626;
21637
- --cds-field-disabled: #262626;
21638
21776
  --cds-border-disabled: #262626;
21639
21777
  --cds-text-disabled: #525252;
21640
21778
  --cds-button-disabled: #525252;
@@ -22588,6 +22726,7 @@ a.bx--side-nav__link--current::before {
22588
22726
  .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__main {
22589
22727
  position: relative;
22590
22728
  display: inline-flex;
22729
+ width: 100%;
22591
22730
  min-height: var(--size);
22592
22731
  vertical-align: top;
22593
22732
  }
@@ -22698,17 +22837,262 @@ a.bx--side-nav__link--current::before {
22698
22837
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22699
22838
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22700
22839
  .c4p--inline-edit {
22701
- display: inline-flex;
22702
- align-content: center;
22840
+ --c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
22841
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
22842
+ --c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
22843
+ position: relative;
22844
+ display: inline-block;
22845
+ max-width: 100%;
22846
+ height: var(--c4p--inline-edit--size);
22847
+ background-color: var(--c4p--inline-edit--background-color);
22848
+ cursor: text;
22849
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
22850
+ vertical-align: middle;
22851
+ white-space: nowrap;
22703
22852
  }
22704
-
22705
- .c4p--inline-edit .c4p--inline-edit__value {
22853
+ .c4p--inline-edit.c4p--inline-edit--light {
22854
+ --c4p--inline-edit--background-color: transparent;
22855
+ }
22856
+ .c4p--inline-edit:hover {
22857
+ --c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
22858
+ }
22859
+ .c4p--inline-edit.c4p--inline-edit--sm {
22860
+ --c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
22861
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
22862
+ }
22863
+ .c4p--inline-edit.c4p--inline-edit--lg {
22864
+ --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
22865
+ --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
22866
+ }
22867
+ .c4p--inline-edit.c4p--inline-edit--invalid {
22868
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
22869
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
22870
+ }
22871
+ @media screen and (prefers-contrast) {
22872
+ .c4p--inline-edit.c4p--inline-edit--invalid {
22873
+ outline-style: dotted;
22874
+ }
22875
+ }
22876
+ .c4p--inline-edit.c4p--inline-edit--editing {
22877
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
22878
+ outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
22879
+ background-color: var(--cds-ui-01, #f4f4f4);
22880
+ }
22881
+ @media screen and (prefers-contrast) {
22882
+ .c4p--inline-edit.c4p--inline-edit--editing {
22883
+ outline-style: dotted;
22884
+ }
22885
+ }
22886
+ .c4p--inline-edit .c4p--inline-edit__input {
22887
+ display: inline-block;
22888
+ overflow: hidden;
22889
+ min-width: calc(100% - 3 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
22890
+ max-width: calc(100% - 3 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
22891
+ min-height: var(--c4p--inline-edit--size);
22892
+ margin-right: calc(3 * var(--c4p--inline-edit--size));
22893
+ margin-left: var(--cds-spacing-05, 1rem);
22894
+ line-height: var(--c4p--inline-edit--size);
22895
+ }
22896
+ .c4p--inline-edit .c4p--inline-edit__input:focus {
22897
+ outline: none;
22898
+ }
22899
+ .c4p--inline-edit .c4p--inline-edit__input::after {
22900
+ position: absolute;
22901
+ top: 0;
22902
+ left: 0;
22903
+ display: block;
22904
+ margin-left: var(--cds-spacing-05, 1rem);
22905
+ color: var(--cds-text-05, #6f6f6f);
22906
+ content: attr(data-placeholder);
22907
+ opacity: 0;
22908
+ }
22909
+ .c4p--inline-edit .c4p--inline-edit__ellipsis {
22910
+ display: inline-block;
22911
+ overflow: hidden;
22912
+ width: 0;
22913
+ height: var(--c4p--inline-edit--size);
22914
+ line-height: var(--c4p--inline-edit--size);
22915
+ opacity: 0;
22916
+ pointer-events: none;
22917
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
22918
+ }
22919
+ .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
22920
+ width: initial;
22921
+ opacity: 1;
22922
+ }
22923
+ .c4p--inline-edit .c4p--inline-edit__disabled-cover {
22924
+ position: absolute;
22925
+ top: 0;
22926
+ left: 0;
22927
+ width: 100%;
22928
+ height: 100%;
22929
+ pointer-events: none;
22930
+ }
22931
+ .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
22932
+ cursor: not-allowed;
22933
+ pointer-events: all;
22934
+ }
22935
+ .c4p--inline-edit .c4p--inline-edit__input--empty::after {
22936
+ opacity: 1;
22937
+ transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
22938
+ }
22939
+ .c4p--inline-edit .c4p--inline-edit__after-input-elements {
22940
+ position: absolute;
22941
+ top: 0;
22942
+ right: 0;
22706
22943
  display: flex;
22707
- align-items: center;
22944
+ width: calc(3 * var(--c4p--inline-edit--size));
22945
+ height: 100%;
22946
+ justify-content: space-between;
22947
+ cursor: text;
22948
+ }
22949
+ .c4p--inline-edit .c4p--inline-edit__toolbar--animation {
22950
+ clip-path: polygon(0 0, -100vw 0, -100vw -100vh, 100vw -100vh, 100vw 0, 100% 0, 100% 100%, 100vw 100%, 100vw 100vh, -100vw 100vh, -100vw 100%, 0 100%);
22951
+ }
22952
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
22953
+ position: absolute;
22954
+ top: 0;
22955
+ left: 0;
22956
+ display: block;
22957
+ width: 100%;
22958
+ height: 100%;
22959
+ box-sizing: border-box;
22960
+ border: 2px solid var(--cds-focus, #0f62fe);
22961
+ border-left: 0;
22962
+ content: "";
22963
+ pointer-events: none;
22964
+ }
22965
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
22966
+ display: inline-flex;
22967
+ width: var(--c4p--inline-edit--size);
22968
+ height: 100%;
22969
+ min-height: initial;
22970
+ max-height: var(--c4p--inline-edit--size);
22971
+ padding: calc(
22972
+ 0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
22973
+ );
22974
+ border: 2px solid transparent;
22975
+ }
22976
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
22977
+ outline: initial;
22978
+ }
22979
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
22980
+ border-color: var(--cds-focus, #0f62fe);
22981
+ box-shadow: initial;
22982
+ outline: initial;
22983
+ }
22984
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
22985
+ box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
22986
+ }
22987
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
22988
+ background-color: transparent;
22989
+ }
22990
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
22991
+ border-color: transparent;
22992
+ }
22993
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
22994
+ margin-right: calc(-1 * var(--c4p--inline-edit--size));
22995
+ transition: margin-right 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
22996
+ }
22997
+ .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--saveable .c4p--inline-edit__save {
22998
+ margin-right: 0;
22999
+ }
23000
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
23001
+ display: inline-flex;
23002
+ width: var(--c4p--inline-edit--size);
23003
+ height: 100%;
23004
+ min-height: initial;
23005
+ max-height: var(--c4p--inline-edit--size);
23006
+ padding: calc(
23007
+ 0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
23008
+ );
23009
+ border: 2px solid transparent;
23010
+ }
23011
+ .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
23012
+ border-color: transparent;
23013
+ background-color: transparent;
23014
+ box-shadow: initial;
23015
+ outline: initial;
23016
+ }
23017
+ .c4p--inline-edit .c4p--inline-edit__edit--hover-visible {
23018
+ opacity: 0;
23019
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
23020
+ }
23021
+ .c4p--inline-edit:hover .c4p--inline-edit__edit--hover-visible {
23022
+ opacity: 1;
23023
+ }
23024
+ .c4p--inline-edit .c4p--inline-edit__validation-icon {
23025
+ display: inline-flex;
23026
+ width: var(--c4p--inline-edit--size);
23027
+ height: 100%;
23028
+ min-height: initial;
23029
+ max-height: var(--c4p--inline-edit--size);
23030
+ padding: calc(
23031
+ 0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
23032
+ );
23033
+ border: 2px solid transparent;
23034
+ }
23035
+ .c4p--inline-edit.c4p--inline-edit--warn .c4p--inline-edit__validation-icon {
23036
+ color: var(--cds-support-warning, #f1c21b);
23037
+ }
23038
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
23039
+ color: var(--cds-support-error, #da1e28);
23040
+ }
23041
+ .c4p--inline-edit .c4p--inline-edit__validation-text {
23042
+ display: block;
23043
+ overflow: visible;
23044
+ margin-left: var(--cds-spacing-05, 1rem);
23045
+ }
23046
+ .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
23047
+ color: var(--cds-support-error, #da1e28);
22708
23048
  }
22709
23049
 
22710
- .c4p--inline-edit .c4p--inline-edit__button {
22711
- margin-left: var(--cds-spacing-03, 0.5rem);
23050
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
23051
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
23052
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
23053
+ .c4p--data-spreadsheet {
23054
+ display: inline-block;
23055
+ border-spacing: 0;
23056
+ }
23057
+ .c4p--data-spreadsheet button.c4p--data-spreadsheet__td {
23058
+ margin: 0;
23059
+ background-color: transparent;
23060
+ }
23061
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .td {
23062
+ border-bottom: 0;
23063
+ }
23064
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
23065
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
23066
+ height: 2.25rem;
23067
+ padding: 0 var(--cds-spacing-03, 0.5rem);
23068
+ border: 0;
23069
+ margin: 0;
23070
+ color: var(--cds-text-01, #161616);
23071
+ }
23072
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th:last-child,
23073
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td:last-child {
23074
+ border-right: 1px solid var(--cds-text-03, #a8a8a8);
23075
+ }
23076
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
23077
+ .c4p--data-spreadsheet button.c4p--data-spreadsheet__td-th {
23078
+ border-right: 1px solid var(--cds-text-03, #a8a8a8);
23079
+ border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
23080
+ background-color: var(--cds-ui-01, #f4f4f4);
23081
+ cursor: pointer;
23082
+ }
23083
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
23084
+ border-right: 1px solid var(--cds-ui-03, #e0e0e0);
23085
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
23086
+ cursor: cell;
23087
+ text-align: left;
23088
+ }
23089
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th {
23090
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
23091
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
23092
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
23093
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
23094
+ color: var(--cds-text-01, #161616);
23095
+ text-align: left;
22712
23096
  }
22713
23097
 
22714
23098
  /*# sourceMappingURL=index.css.map */