@carbon/ibm-products 1.2.2 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) hide show
  1. package/css/index-full-carbon.css +392 -190
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-without-carbon-released-only.css +6 -3
  5. package/css/index-without-carbon-released-only.css.map +1 -1
  6. package/css/index-without-carbon-released-only.min.css +1 -1
  7. package/css/index-without-carbon.css +169 -3
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index.css +391 -3
  11. package/css/index.css.map +1 -1
  12. package/css/index.min.css +2 -2
  13. package/es/components/APIKeyModal/APIKeyModal.js +2 -2
  14. package/es/components/AboutModal/AboutModal.js +2 -2
  15. package/es/components/ActionBar/ActionBar.js +2 -2
  16. package/es/components/ActionBar/ActionBarItem.js +2 -2
  17. package/es/components/ActionSet/ActionSet.js +2 -2
  18. package/es/components/AddSelect/AddSelect.js +111 -0
  19. package/es/components/AddSelect/index.js +7 -0
  20. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +2 -2
  21. package/es/components/CancelableTextEdit/CancelableTextEdit.js +207 -0
  22. package/es/components/CancelableTextEdit/index.js +7 -0
  23. package/es/components/Card/Card.js +2 -2
  24. package/es/components/Cascade/Cascade.js +2 -2
  25. package/es/components/ComboButton/ComboButton.js +2 -2
  26. package/es/components/CreateSidePanel/CreateSidePanel.js +2 -2
  27. package/es/components/EditSidePanel/EditSidePanel.js +2 -2
  28. package/es/components/EmptyStates/EmptyState.js +2 -2
  29. package/es/components/EmptyStates/EmptyStateContent.js +2 -2
  30. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -2
  31. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +2 -2
  32. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -2
  33. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -2
  34. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -2
  35. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -2
  36. package/es/components/ExampleComponent/ExampleComponent.js +2 -2
  37. package/es/components/ExportModal/ExportModal.js +2 -2
  38. package/es/components/HTTPErrors/HTTPErrorContent.js +2 -2
  39. package/es/components/ImportModal/ImportModal.js +2 -2
  40. package/es/components/PageHeader/PageHeader.js +2 -2
  41. package/es/components/PageHeader/PageHeaderUtils.js +2 -2
  42. package/es/components/RemoveModal/RemoveModal.js +2 -2
  43. package/es/components/SidePanel/SidePanel.js +2 -2
  44. package/es/components/TagSet/TagSet.js +2 -2
  45. package/es/components/TagSet/TagSetModal.js +2 -2
  46. package/es/components/Tearsheet/Tearsheet.js +2 -2
  47. package/es/components/Tearsheet/TearsheetNarrow.js +2 -2
  48. package/es/components/Tearsheet/TearsheetShell.js +2 -2
  49. package/es/components/WebTerminal/WebTerminal.js +2 -2
  50. package/es/components/index.js +3 -1
  51. package/es/global/js/hooks/useWindowResize.js +2 -2
  52. package/es/global/js/package-settings.js +5 -3
  53. package/es/global/js/utils/props-helper.js +2 -2
  54. package/es/global/js/utils/story-helper.js +1 -1
  55. package/lib/components/APIKeyModal/APIKeyModal.js +2 -2
  56. package/lib/components/AboutModal/AboutModal.js +2 -2
  57. package/lib/components/ActionBar/ActionBar.js +2 -2
  58. package/lib/components/ActionBar/ActionBarItem.js +2 -2
  59. package/lib/components/ActionSet/ActionSet.js +2 -2
  60. package/lib/components/AddSelect/AddSelect.js +133 -0
  61. package/lib/components/AddSelect/index.js +13 -0
  62. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +2 -2
  63. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +226 -0
  64. package/lib/components/CancelableTextEdit/index.js +13 -0
  65. package/lib/components/Card/Card.js +2 -2
  66. package/lib/components/Cascade/Cascade.js +2 -2
  67. package/lib/components/ComboButton/ComboButton.js +2 -2
  68. package/lib/components/CreateSidePanel/CreateSidePanel.js +2 -2
  69. package/lib/components/EditSidePanel/EditSidePanel.js +2 -2
  70. package/lib/components/EmptyStates/EmptyState.js +2 -2
  71. package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
  72. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -2
  73. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +2 -2
  74. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -2
  75. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -2
  76. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -2
  77. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -2
  78. package/lib/components/ExampleComponent/ExampleComponent.js +2 -2
  79. package/lib/components/ExportModal/ExportModal.js +2 -2
  80. package/lib/components/HTTPErrors/HTTPErrorContent.js +2 -2
  81. package/lib/components/ImportModal/ImportModal.js +2 -2
  82. package/lib/components/PageHeader/PageHeader.js +2 -2
  83. package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
  84. package/lib/components/RemoveModal/RemoveModal.js +2 -2
  85. package/lib/components/SidePanel/SidePanel.js +2 -2
  86. package/lib/components/TagSet/TagSet.js +2 -2
  87. package/lib/components/TagSet/TagSetModal.js +2 -2
  88. package/lib/components/Tearsheet/Tearsheet.js +2 -2
  89. package/lib/components/Tearsheet/TearsheetNarrow.js +2 -2
  90. package/lib/components/Tearsheet/TearsheetShell.js +2 -2
  91. package/lib/components/WebTerminal/WebTerminal.js +2 -2
  92. package/lib/components/index.js +17 -1
  93. package/lib/global/js/hooks/useWindowResize.js +2 -2
  94. package/lib/global/js/package-settings.js +5 -3
  95. package/lib/global/js/utils/props-helper.js +2 -2
  96. package/lib/global/js/utils/story-helper.js +1 -1
  97. package/package.json +15 -15
  98. package/scss/components/AddSelect/_add-select.scss +73 -0
  99. package/scss/components/AddSelect/_index.scss +10 -0
  100. package/scss/components/AddSelect/_storybook-styles.scss +6 -0
  101. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +140 -0
  102. package/scss/components/CancelableTextEdit/_index.scss +8 -0
  103. package/scss/components/CancelableTextEdit/_storybook-styles.scss +15 -0
  104. package/scss/components/PageHeader/_page-header.scss +5 -4
  105. package/scss/components/_index.scss +2 -0
package/css/index.css CHANGED
@@ -3042,6 +3042,296 @@ em {
3042
3042
  font-size: 0;
3043
3043
  }
3044
3044
 
3045
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3046
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3047
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3048
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3049
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3050
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3051
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3052
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3053
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3054
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3055
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3056
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3057
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3058
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3059
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3060
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3061
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3062
+ .bx--structured-list--selection .bx--structured-list-td,
3063
+ .bx--structured-list--selection .bx--structured-list-th {
3064
+ padding-right: 1rem;
3065
+ padding-left: 1rem;
3066
+ }
3067
+ .bx--structured-list--selection .bx--structured-list-td:first-child,
3068
+ .bx--structured-list--selection .bx--structured-list-th:first-child {
3069
+ padding-right: 1rem;
3070
+ padding-left: 1rem;
3071
+ }
3072
+
3073
+ .bx--structured-list-input {
3074
+ display: none;
3075
+ }
3076
+
3077
+ .bx--structured-list {
3078
+ box-sizing: border-box;
3079
+ padding: 0;
3080
+ border: 0;
3081
+ margin: 0;
3082
+ font-family: inherit;
3083
+ font-size: 100%;
3084
+ vertical-align: baseline;
3085
+ display: table;
3086
+ width: 100%;
3087
+ margin-bottom: 5rem;
3088
+ background-color: transparent;
3089
+ border-collapse: collapse;
3090
+ border-spacing: 0;
3091
+ overflow-x: auto;
3092
+ overflow-y: hidden;
3093
+ }
3094
+ .bx--structured-list *,
3095
+ .bx--structured-list *::before,
3096
+ .bx--structured-list *::after {
3097
+ box-sizing: inherit;
3098
+ }
3099
+ .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
3100
+ padding: 0.5rem;
3101
+ }
3102
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
3103
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
3104
+ padding-left: 1rem;
3105
+ }
3106
+ .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
3107
+ padding-right: 1rem;
3108
+ padding-left: 0;
3109
+ }
3110
+
3111
+ .bx--structured-list-row {
3112
+ display: table-row;
3113
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3114
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3115
+ }
3116
+
3117
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
3118
+ border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
3119
+ background-color: var(--cds-hover-row, #e5e5e5);
3120
+ cursor: pointer;
3121
+ }
3122
+
3123
+ .bx--structured-list-row.bx--structured-list-row--selected {
3124
+ background-color: var(--cds-selected-ui, #e0e0e0);
3125
+ }
3126
+
3127
+ .bx--structured-list-row.bx--structured-list-row--header-row {
3128
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
3129
+ cursor: inherit;
3130
+ }
3131
+
3132
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3133
+ outline: 2px solid var(--cds-focus, #0f62fe);
3134
+ outline-offset: -2px;
3135
+ }
3136
+ @media screen and (prefers-contrast) {
3137
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3138
+ outline-style: dotted;
3139
+ }
3140
+ }
3141
+
3142
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
3143
+ .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
3144
+ color: var(--cds-text-01, #161616);
3145
+ }
3146
+
3147
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
3148
+ border-top: 1px solid var(--cds-ui-01, #f4f4f4);
3149
+ }
3150
+
3151
+ .bx--structured-list-thead {
3152
+ display: table-header-group;
3153
+ vertical-align: middle;
3154
+ }
3155
+
3156
+ .bx--structured-list-th {
3157
+ box-sizing: border-box;
3158
+ padding: 0;
3159
+ border: 0;
3160
+ margin: 0;
3161
+ font-family: inherit;
3162
+ font-size: 100%;
3163
+ vertical-align: baseline;
3164
+ padding: 1rem 0.5rem 0.5rem 0.5rem;
3165
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3166
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
3167
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3168
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3169
+ display: table-cell;
3170
+ height: 2.5rem;
3171
+ color: var(--cds-text-01, #161616);
3172
+ font-weight: 600;
3173
+ text-align: left;
3174
+ text-transform: none;
3175
+ vertical-align: top;
3176
+ }
3177
+ .bx--structured-list-th *,
3178
+ .bx--structured-list-th *::before,
3179
+ .bx--structured-list-th *::after {
3180
+ box-sizing: inherit;
3181
+ }
3182
+
3183
+ .bx--structured-list-tbody {
3184
+ display: table-row-group;
3185
+ vertical-align: middle;
3186
+ }
3187
+
3188
+ .bx--structured-list-td {
3189
+ box-sizing: border-box;
3190
+ padding: 0;
3191
+ border: 0;
3192
+ margin: 0;
3193
+ font-family: inherit;
3194
+ font-size: 100%;
3195
+ vertical-align: baseline;
3196
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
3197
+ font-weight: var(--cds-body-long-01-font-weight, 400);
3198
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
3199
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3200
+ padding: 1rem 0.5rem 1.5rem 0.5rem;
3201
+ position: relative;
3202
+ display: table-cell;
3203
+ max-width: 36rem;
3204
+ color: var(--cds-text-02, #525252);
3205
+ transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3206
+ }
3207
+ .bx--structured-list-td *,
3208
+ .bx--structured-list-td *::before,
3209
+ .bx--structured-list-td *::after {
3210
+ box-sizing: inherit;
3211
+ }
3212
+
3213
+ .bx--structured-list-content--nowrap {
3214
+ white-space: nowrap;
3215
+ }
3216
+
3217
+ .bx--structured-list-svg {
3218
+ display: inline-block;
3219
+ fill: transparent;
3220
+ transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3221
+ vertical-align: middle;
3222
+ }
3223
+
3224
+ .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
3225
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3226
+ fill: var(--cds-icon-01, #161616);
3227
+ }
3228
+
3229
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
3230
+ width: 8%;
3231
+ }
3232
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
3233
+ width: 30%;
3234
+ }
3235
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
3236
+ width: 15%;
3237
+ }
3238
+ .bx--structured-list.bx--skeleton span {
3239
+ position: relative;
3240
+ padding: 0;
3241
+ border: none;
3242
+ background: var(--cds-skeleton-01, #e5e5e5);
3243
+ box-shadow: none;
3244
+ pointer-events: none;
3245
+ display: block;
3246
+ width: 75%;
3247
+ height: 1rem;
3248
+ }
3249
+ .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
3250
+ border: none;
3251
+ cursor: default;
3252
+ outline: none;
3253
+ }
3254
+ .bx--structured-list.bx--skeleton span::before {
3255
+ position: absolute;
3256
+ top: 0;
3257
+ left: 0;
3258
+ width: 100%;
3259
+ height: 100%;
3260
+ animation: 3000ms ease-in-out skeleton infinite;
3261
+ background: var(--cds-skeleton-02, #c6c6c6);
3262
+ content: "";
3263
+ will-change: transform-origin, transform, opacity;
3264
+ }
3265
+ @media (prefers-reduced-motion: reduce) {
3266
+ .bx--structured-list.bx--skeleton span::before {
3267
+ animation: none;
3268
+ }
3269
+ }
3270
+
3271
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
3272
+ width: 5%;
3273
+ }
3274
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
3275
+ display: none;
3276
+ }
3277
+
3278
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3279
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3280
+ fill: ButtonText;
3281
+ }
3282
+ }
3283
+
3284
+ .c4p--add-select__header {
3285
+ padding: var(--cds-spacing-05, 1rem);
3286
+ padding-bottom: 0;
3287
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3288
+ }
3289
+ .c4p--add-select__header .c4p--add-select__items-label {
3290
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3291
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
3292
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3293
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3294
+ }
3295
+
3296
+ .c4p--add-select__items-label {
3297
+ margin-right: var(--cds-spacing-03, 0.5rem);
3298
+ }
3299
+ .c4p--add-select__items-label-container {
3300
+ display: flex;
3301
+ align-items: center;
3302
+ margin-top: var(--cds-spacing-05, 1rem);
3303
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
3304
+ }
3305
+
3306
+ .c4p--add-select__selections {
3307
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3308
+ }
3309
+
3310
+ .c4p--add-select__influencer-header {
3311
+ display: flex;
3312
+ padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
3313
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3314
+ }
3315
+ .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
3316
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
3317
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
3318
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
3319
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3320
+ }
3321
+
3322
+ .c4p--add-select__influencer-title {
3323
+ margin-right: var(--cds-spacing-03, 0.5rem);
3324
+ }
3325
+
3326
+ .c4p--add-select__influencer-body {
3327
+ padding: var(--cds-spacing-05, 1rem);
3328
+ }
3329
+
3330
+ .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
3331
+ max-width: 29rem;
3332
+ flex: 0 0 50%;
3333
+ }
3334
+
3045
3335
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3046
3336
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3047
3337
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -18887,7 +19177,8 @@ a.bx--side-nav__link--current::before {
18887
19177
  display: block;
18888
19178
  width: 100%;
18889
19179
  height: 100%;
18890
- animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19180
+ animation: background-and-shadow-appear 1000ms linear paused forwards;
19181
+ animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
18891
19182
  content: "";
18892
19183
  z-index: -1;
18893
19184
  }
@@ -19026,7 +19317,8 @@ a.bx--side-nav__link--current::before {
19026
19317
  display: block;
19027
19318
  width: 100%;
19028
19319
  height: 100%;
19029
- animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19320
+ animation: background-appear 1000ms linear paused forwards;
19321
+ animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
19030
19322
  content: "";
19031
19323
  }
19032
19324
  .c4p--page-header .c4p--page-header__action-bar-column--influenced-by-collapse-button {
@@ -19197,7 +19489,8 @@ a.bx--side-nav__link--current::before {
19197
19489
  display: block;
19198
19490
  width: 100%;
19199
19491
  height: 100%;
19200
- animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
19492
+ animation: background-appear 1000ms linear paused forwards;
19493
+ animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
19201
19494
  content: "";
19202
19495
  }
19203
19496
  .c4p--page-header .c4p--page-header__page-actions-content {
@@ -22257,5 +22550,100 @@ a.bx--side-nav__link--current::before {
22257
22550
  transition: none;
22258
22551
  }
22259
22552
  }
22553
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22554
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22555
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22556
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit {
22557
+ --size: var(--cds-spacing-08, 2.5rem);
22558
+ position: relative;
22559
+ width: 100%;
22560
+ min-height: var(--size);
22561
+ }
22562
+
22563
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--xl {
22564
+ --size: $spacing-09;
22565
+ }
22566
+
22567
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22568
+ height: var(--size);
22569
+ padding-right: calc(2 * var(--size));
22570
+ }
22571
+
22572
+ .c4p--cancelable-text-edit__buttons {
22573
+ position: absolute;
22574
+ top: 0;
22575
+ right: 0;
22576
+ }
22577
+
22578
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22579
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22580
+ width: var(--size);
22581
+ height: var(--size);
22582
+ min-height: var(--size);
22583
+ }
22584
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22585
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22586
+ border-color: var(--cds-hover-field, #e5e5e5);
22587
+ border-bottom: 1px solid transparent;
22588
+ background-clip: content-box;
22589
+ box-shadow: initial;
22590
+ }
22591
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22592
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22593
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22594
+ border-width: 2px;
22595
+ border-color: var(--cds-focus, #0f62fe);
22596
+ box-shadow: initial;
22597
+ }
22598
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22599
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22600
+ padding: 1px;
22601
+ }
22602
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22603
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22604
+ background-color: transparent;
22605
+ }
22606
+
22607
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22608
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22609
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22610
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22611
+ border: 2px solid transparent;
22612
+ }
22613
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22614
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover,
22615
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22616
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22617
+ border-top: 2px solid transparent;
22618
+ border-bottom: 2px solid transparent;
22619
+ background-clip: content-box;
22620
+ }
22621
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22622
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22623
+ border-right: 2px solid transparent;
22624
+ }
22625
+
22626
+ .c4p--cancelable-text-edit--invalid > .bx--form-requirement,
22627
+ .c4p--cancelable-text-edit--warn > .bx--form-requirement {
22628
+ display: block;
22629
+ max-height: initial;
22630
+ margin-left: calc(20% + 1.25rem);
22631
+ }
22632
+
22633
+ .c4p--cancelable-text-edit--invalid > .bx--form-requirement {
22634
+ color: var(--cds-text-error, #da1e28);
22635
+ }
22636
+
22637
+ .c4p--cancelable-text-edit .bx--text-input {
22638
+ padding-right: calc(2 * var(--size));
22639
+ }
22640
+
22641
+ .c4p--cancelable-text-edit .bx--text-input--invalid {
22642
+ padding-right: calc(3 * var(--size));
22643
+ }
22644
+
22645
+ .c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22646
+ margin-right: var(--cds-spacing-11, 5rem);
22647
+ }
22260
22648
 
22261
22649
  /*# sourceMappingURL=index.css.map */