@carbon/ibm-products 1.35.1 → 1.36.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +278 -240
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +278 -240
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +278 -240
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +6 -3
- package/es/components/AddSelect/add-select-utils.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/es/components/Datagrid/useNestedRowExpander.js +8 -3
- package/es/components/Datagrid/useRowExpander.js +13 -1
- package/es/components/InlineEdit/InlineEdit.js +22 -385
- package/es/components/InlineEditV1/InlineEditV1.js +406 -0
- package/es/components/InlineEditV1/index.js +8 -0
- package/es/components/InlineEditV2/InlineEditV2.js +48 -21
- package/es/components/InlineEditV2/index.js +7 -0
- package/es/components/OptionsTile/OptionsTile.js +25 -10
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useControllableState.js +74 -0
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/ActionSet/ActionSet.js +6 -3
- package/lib/components/AddSelect/add-select-utils.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/lib/components/Datagrid/useColumnOrder.js +2 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
- package/lib/components/Datagrid/useRowExpander.js +13 -1
- package/lib/components/InlineEdit/InlineEdit.js +22 -379
- package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
- package/lib/components/InlineEditV1/index.js +12 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
- package/lib/components/OptionsTile/OptionsTile.js +25 -10
- package/lib/components/index.js +1 -1
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useControllableState.js +80 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +10 -10
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
- package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
- package/scss/components/InlineEditV2/_index.scss +1 -1
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
- package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
- package/scss/components/_index-released-only.scss +1 -1
- package/scss/components/_index.scss +2 -1
@@ -267,14 +267,17 @@
|
|
267
267
|
font-weight: var(--cds-body-short-01-font-weight, 400);
|
268
268
|
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
269
269
|
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
270
|
-
height: var(--cds-spacing-10, 4rem);
|
271
270
|
align-items: center;
|
271
|
+
margin: 0;
|
272
|
+
}
|
273
|
+
.c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
|
274
|
+
height: var(--cds-spacing-10, 4rem);
|
272
275
|
padding-top: var(--cds-spacing-05, 1rem);
|
273
276
|
padding-bottom: var(--cds-spacing-07, 2rem);
|
274
|
-
margin: 0;
|
275
277
|
}
|
276
278
|
|
277
|
-
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive
|
279
|
+
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive,
|
280
|
+
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn {
|
278
281
|
max-width: none;
|
279
282
|
}
|
280
283
|
|
@@ -6244,243 +6247,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6244
6247
|
transition: none;
|
6245
6248
|
}
|
6246
6249
|
}
|
6247
|
-
.c4p--inline-edit {
|
6248
|
-
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
6249
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
6250
|
-
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
6251
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
6252
|
-
position: relative;
|
6253
|
-
display: inline-block;
|
6254
|
-
min-width: calc(4 * var(--c4p--inline-edit--size));
|
6255
|
-
max-width: 100%;
|
6256
|
-
height: var(--c4p--inline-edit--size);
|
6257
|
-
background-color: var(--c4p--inline-edit--background-color);
|
6258
|
-
cursor: text;
|
6259
|
-
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);
|
6260
|
-
vertical-align: middle;
|
6261
|
-
white-space: nowrap;
|
6262
|
-
}
|
6263
|
-
.c4p--inline-edit.c4p--inline-edit--light {
|
6264
|
-
--c4p--inline-edit--background-color: transparent;
|
6265
|
-
}
|
6266
|
-
.c4p--inline-edit:hover {
|
6267
|
-
--c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
|
6268
|
-
}
|
6269
|
-
.c4p--inline-edit.c4p--inline-edit--sm {
|
6270
|
-
--c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
|
6271
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
6272
|
-
}
|
6273
|
-
.c4p--inline-edit.c4p--inline-edit--lg {
|
6274
|
-
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
6275
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
6276
|
-
}
|
6277
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
6278
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
6279
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
6280
|
-
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
6281
|
-
}
|
6282
|
-
@media screen and (prefers-contrast) {
|
6283
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
6284
|
-
outline-style: dotted;
|
6285
|
-
}
|
6286
|
-
}
|
6287
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
6288
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
6289
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
6290
|
-
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
6291
|
-
background-color: var(--cds-ui-01, #f4f4f4);
|
6292
|
-
}
|
6293
|
-
@media screen and (prefers-contrast) {
|
6294
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
6295
|
-
outline-style: dotted;
|
6296
|
-
}
|
6297
|
-
}
|
6298
|
-
.c4p--inline-edit .c4p--inline-edit__input {
|
6299
|
-
display: inline-block;
|
6300
|
-
overflow: hidden;
|
6301
|
-
width: calc(
|
6302
|
-
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
6303
|
-
);
|
6304
|
-
max-width: calc(
|
6305
|
-
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
6306
|
-
);
|
6307
|
-
min-height: var(--c4p--inline-edit--size);
|
6308
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
6309
|
-
margin-right: var(--c4p--inline-edit--toolbar-width);
|
6310
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
6311
|
-
line-height: var(--c4p--inline-edit--size);
|
6312
|
-
}
|
6313
|
-
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
6314
|
-
outline: none;
|
6315
|
-
}
|
6316
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
6317
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
6318
|
-
}
|
6319
|
-
.c4p--inline-edit .c4p--inline-edit__input::after {
|
6320
|
-
position: absolute;
|
6321
|
-
top: 0;
|
6322
|
-
left: 0;
|
6323
|
-
display: block;
|
6324
|
-
overflow: hidden;
|
6325
|
-
width: 0;
|
6326
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
6327
|
-
color: var(--cds-text-05, #6f6f6f);
|
6328
|
-
content: attr(data-placeholder);
|
6329
|
-
opacity: 0;
|
6330
|
-
visibility: hidden;
|
6331
|
-
}
|
6332
|
-
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
6333
|
-
display: inline-block;
|
6334
|
-
overflow: hidden;
|
6335
|
-
width: 0;
|
6336
|
-
height: var(--c4p--inline-edit--size);
|
6337
|
-
line-height: var(--c4p--inline-edit--size);
|
6338
|
-
opacity: 0;
|
6339
|
-
pointer-events: none;
|
6340
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
6341
|
-
}
|
6342
|
-
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
6343
|
-
width: initial;
|
6344
|
-
opacity: 1;
|
6345
|
-
}
|
6346
|
-
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
6347
|
-
position: absolute;
|
6348
|
-
top: 0;
|
6349
|
-
left: 0;
|
6350
|
-
width: 100%;
|
6351
|
-
height: 100%;
|
6352
|
-
pointer-events: none;
|
6353
|
-
}
|
6354
|
-
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
6355
|
-
cursor: not-allowed;
|
6356
|
-
pointer-events: all;
|
6357
|
-
}
|
6358
|
-
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
6359
|
-
width: initial;
|
6360
|
-
opacity: 1;
|
6361
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
6362
|
-
visibility: visible;
|
6363
|
-
}
|
6364
|
-
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
6365
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
6366
|
-
position: absolute;
|
6367
|
-
top: 0;
|
6368
|
-
right: 0;
|
6369
|
-
display: flex;
|
6370
|
-
width: var(--c4p--inline-edit--toolbar-width);
|
6371
|
-
height: 100%;
|
6372
|
-
justify-content: space-between;
|
6373
|
-
cursor: text;
|
6374
|
-
}
|
6375
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
6376
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
6377
|
-
}
|
6378
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
6379
|
-
position: absolute;
|
6380
|
-
top: 0;
|
6381
|
-
left: 0;
|
6382
|
-
display: block;
|
6383
|
-
width: 100%;
|
6384
|
-
height: 100%;
|
6385
|
-
box-sizing: border-box;
|
6386
|
-
border: 2px solid var(--cds-focus, #0f62fe);
|
6387
|
-
border-left: 0;
|
6388
|
-
content: "";
|
6389
|
-
pointer-events: none;
|
6390
|
-
}
|
6391
|
-
.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 {
|
6392
|
-
display: inline-flex;
|
6393
|
-
width: var(--c4p--inline-edit--size);
|
6394
|
-
max-width: var(--c4p--inline-edit--size);
|
6395
|
-
height: 100%;
|
6396
|
-
min-height: initial;
|
6397
|
-
max-height: var(--c4p--inline-edit--size);
|
6398
|
-
align-items: center;
|
6399
|
-
justify-content: center;
|
6400
|
-
border: 2px solid transparent;
|
6401
|
-
}
|
6402
|
-
.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 {
|
6403
|
-
outline: initial;
|
6404
|
-
}
|
6405
|
-
.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 {
|
6406
|
-
border-color: var(--cds-focus, #0f62fe);
|
6407
|
-
box-shadow: initial;
|
6408
|
-
outline: initial;
|
6409
|
-
}
|
6410
|
-
.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 {
|
6411
|
-
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
6412
|
-
}
|
6413
|
-
.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 {
|
6414
|
-
background-color: transparent;
|
6415
|
-
}
|
6416
|
-
.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] {
|
6417
|
-
border-color: transparent;
|
6418
|
-
}
|
6419
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
6420
|
-
overflow: visible;
|
6421
|
-
width: var(--c4p--inline-edit--edit-size);
|
6422
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
6423
|
-
transition-property: margin, padding;
|
6424
|
-
}
|
6425
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
6426
|
-
overflow: hidden;
|
6427
|
-
width: 0;
|
6428
|
-
padding: 0;
|
6429
|
-
border-right: 0;
|
6430
|
-
border-left: 0;
|
6431
|
-
}
|
6432
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
6433
|
-
display: inline-flex;
|
6434
|
-
width: var(--c4p--inline-edit--size);
|
6435
|
-
max-width: var(--c4p--inline-edit--size);
|
6436
|
-
height: 100%;
|
6437
|
-
min-height: initial;
|
6438
|
-
max-height: var(--c4p--inline-edit--size);
|
6439
|
-
align-items: center;
|
6440
|
-
justify-content: center;
|
6441
|
-
border: 2px solid transparent;
|
6442
|
-
}
|
6443
|
-
.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 {
|
6444
|
-
border-color: transparent;
|
6445
|
-
background-color: transparent;
|
6446
|
-
box-shadow: initial;
|
6447
|
-
outline: initial;
|
6448
|
-
}
|
6449
|
-
@media (hover: hover) {
|
6450
|
-
.c4p--inline-edit .c4p--inline-edit__edit {
|
6451
|
-
opacity: 0;
|
6452
|
-
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
6453
|
-
}
|
6454
|
-
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
6455
|
-
opacity: 1;
|
6456
|
-
}
|
6457
|
-
}
|
6458
|
-
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
6459
|
-
opacity: 1;
|
6460
|
-
}
|
6461
|
-
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
6462
|
-
display: inline-flex;
|
6463
|
-
width: var(--c4p--inline-edit--size);
|
6464
|
-
max-width: var(--c4p--inline-edit--size);
|
6465
|
-
height: 100%;
|
6466
|
-
min-height: initial;
|
6467
|
-
max-height: var(--c4p--inline-edit--size);
|
6468
|
-
align-items: center;
|
6469
|
-
justify-content: center;
|
6470
|
-
border: 2px solid transparent;
|
6471
|
-
}
|
6472
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
6473
|
-
color: var(--cds-support-error, #da1e28);
|
6474
|
-
}
|
6475
|
-
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
6476
|
-
display: block;
|
6477
|
-
overflow: visible;
|
6478
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
6479
|
-
}
|
6480
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
|
6481
|
-
color: var(--cds-support-error, #da1e28);
|
6482
|
-
}
|
6483
|
-
|
6484
6250
|
.c4p--data-spreadsheet {
|
6485
6251
|
--c4p--data-spreadsheet--total-width: 0;
|
6486
6252
|
display: inline-block;
|
@@ -7165,6 +6931,21 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7165
6931
|
border-bottom: none;
|
7166
6932
|
}
|
7167
6933
|
|
6934
|
+
.c4p--datagrid .c4p--datagrid__carbon-row-expandable {
|
6935
|
+
position: relative;
|
6936
|
+
}
|
6937
|
+
|
6938
|
+
.c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
|
6939
|
+
position: absolute;
|
6940
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
6941
|
+
top: -1px;
|
6942
|
+
left: 0;
|
6943
|
+
width: 100%;
|
6944
|
+
height: 1px;
|
6945
|
+
background-color: var(--cds-border-subtle, #e0e0e0);
|
6946
|
+
content: "";
|
6947
|
+
}
|
6948
|
+
|
7168
6949
|
/*
|
7169
6950
|
* Licensed Materials - Property of IBM
|
7170
6951
|
* 5724-Q36
|
@@ -7541,6 +7322,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
7541
7322
|
content: "";
|
7542
7323
|
}
|
7543
7324
|
|
7325
|
+
.c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
|
7326
|
+
padding: var(--cds-spacing-03, 0.5rem);
|
7327
|
+
padding-right: 0;
|
7328
|
+
}
|
7329
|
+
|
7330
|
+
.c4p--datagrid__row-expander.bx--btn {
|
7331
|
+
display: flex;
|
7332
|
+
width: var(--cds-spacing-07, 2rem);
|
7333
|
+
height: var(--cds-spacing-07, 2rem);
|
7334
|
+
min-height: var(--cds-spacing-07, 2rem);
|
7335
|
+
justify-content: center;
|
7336
|
+
padding: 0;
|
7337
|
+
}
|
7338
|
+
.c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
|
7339
|
+
fill: var(--cds-ui-05, #161616);
|
7340
|
+
}
|
7341
|
+
|
7544
7342
|
/*
|
7545
7343
|
* Licensed Materials - Property of IBM
|
7546
7344
|
* 5724-Q36
|
@@ -8169,6 +7967,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
8169
7967
|
color: #ffffff;
|
8170
7968
|
}
|
8171
7969
|
|
7970
|
+
.c4p--inline-edit {
|
7971
|
+
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
7972
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
7973
|
+
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
7974
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
7975
|
+
position: relative;
|
7976
|
+
display: inline-block;
|
7977
|
+
min-width: calc(4 * var(--c4p--inline-edit--size));
|
7978
|
+
max-width: 100%;
|
7979
|
+
height: var(--c4p--inline-edit--size);
|
7980
|
+
background-color: var(--c4p--inline-edit--background-color);
|
7981
|
+
cursor: text;
|
7982
|
+
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);
|
7983
|
+
vertical-align: middle;
|
7984
|
+
white-space: nowrap;
|
7985
|
+
}
|
7986
|
+
.c4p--inline-edit.c4p--inline-edit--light {
|
7987
|
+
--c4p--inline-edit--background-color: transparent;
|
7988
|
+
}
|
7989
|
+
.c4p--inline-edit:hover {
|
7990
|
+
--c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
|
7991
|
+
}
|
7992
|
+
.c4p--inline-edit.c4p--inline-edit--sm {
|
7993
|
+
--c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
|
7994
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
7995
|
+
}
|
7996
|
+
.c4p--inline-edit.c4p--inline-edit--lg {
|
7997
|
+
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
7998
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
7999
|
+
}
|
8000
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
8001
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
8002
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
8003
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
8004
|
+
}
|
8005
|
+
@media screen and (prefers-contrast) {
|
8006
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
8007
|
+
outline-style: dotted;
|
8008
|
+
}
|
8009
|
+
}
|
8010
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
8011
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
8012
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
8013
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
8014
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
8015
|
+
}
|
8016
|
+
@media screen and (prefers-contrast) {
|
8017
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
8018
|
+
outline-style: dotted;
|
8019
|
+
}
|
8020
|
+
}
|
8021
|
+
.c4p--inline-edit .c4p--inline-edit__input {
|
8022
|
+
display: inline-block;
|
8023
|
+
overflow: hidden;
|
8024
|
+
width: calc(
|
8025
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
8026
|
+
);
|
8027
|
+
max-width: calc(
|
8028
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
8029
|
+
);
|
8030
|
+
min-height: var(--c4p--inline-edit--size);
|
8031
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
8032
|
+
margin-right: var(--c4p--inline-edit--toolbar-width);
|
8033
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
8034
|
+
line-height: var(--c4p--inline-edit--size);
|
8035
|
+
}
|
8036
|
+
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
8037
|
+
outline: none;
|
8038
|
+
}
|
8039
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
8040
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
8041
|
+
}
|
8042
|
+
.c4p--inline-edit .c4p--inline-edit__input::after {
|
8043
|
+
position: absolute;
|
8044
|
+
top: 0;
|
8045
|
+
left: 0;
|
8046
|
+
display: block;
|
8047
|
+
overflow: hidden;
|
8048
|
+
width: 0;
|
8049
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
8050
|
+
color: var(--cds-text-05, #6f6f6f);
|
8051
|
+
content: attr(data-placeholder);
|
8052
|
+
opacity: 0;
|
8053
|
+
visibility: hidden;
|
8054
|
+
}
|
8055
|
+
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
8056
|
+
display: inline-block;
|
8057
|
+
overflow: hidden;
|
8058
|
+
width: 0;
|
8059
|
+
height: var(--c4p--inline-edit--size);
|
8060
|
+
line-height: var(--c4p--inline-edit--size);
|
8061
|
+
opacity: 0;
|
8062
|
+
pointer-events: none;
|
8063
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
8064
|
+
}
|
8065
|
+
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
8066
|
+
width: initial;
|
8067
|
+
opacity: 1;
|
8068
|
+
}
|
8069
|
+
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
8070
|
+
position: absolute;
|
8071
|
+
top: 0;
|
8072
|
+
left: 0;
|
8073
|
+
width: 100%;
|
8074
|
+
height: 100%;
|
8075
|
+
pointer-events: none;
|
8076
|
+
}
|
8077
|
+
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
8078
|
+
cursor: not-allowed;
|
8079
|
+
pointer-events: all;
|
8080
|
+
}
|
8081
|
+
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
8082
|
+
width: initial;
|
8083
|
+
opacity: 1;
|
8084
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
8085
|
+
visibility: visible;
|
8086
|
+
}
|
8087
|
+
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
8088
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
8089
|
+
position: absolute;
|
8090
|
+
top: 0;
|
8091
|
+
right: 0;
|
8092
|
+
display: flex;
|
8093
|
+
width: var(--c4p--inline-edit--toolbar-width);
|
8094
|
+
height: 100%;
|
8095
|
+
justify-content: space-between;
|
8096
|
+
cursor: text;
|
8097
|
+
}
|
8098
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
8099
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
8100
|
+
}
|
8101
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
8102
|
+
position: absolute;
|
8103
|
+
top: 0;
|
8104
|
+
left: 0;
|
8105
|
+
display: block;
|
8106
|
+
width: 100%;
|
8107
|
+
height: 100%;
|
8108
|
+
box-sizing: border-box;
|
8109
|
+
border: 2px solid var(--cds-focus, #0f62fe);
|
8110
|
+
border-left: 0;
|
8111
|
+
content: "";
|
8112
|
+
pointer-events: none;
|
8113
|
+
}
|
8114
|
+
.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 {
|
8115
|
+
display: inline-flex;
|
8116
|
+
width: var(--c4p--inline-edit--size);
|
8117
|
+
max-width: var(--c4p--inline-edit--size);
|
8118
|
+
height: 100%;
|
8119
|
+
min-height: initial;
|
8120
|
+
max-height: var(--c4p--inline-edit--size);
|
8121
|
+
align-items: center;
|
8122
|
+
justify-content: center;
|
8123
|
+
border: 2px solid transparent;
|
8124
|
+
}
|
8125
|
+
.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 {
|
8126
|
+
outline: initial;
|
8127
|
+
}
|
8128
|
+
.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 {
|
8129
|
+
border-color: var(--cds-focus, #0f62fe);
|
8130
|
+
box-shadow: initial;
|
8131
|
+
outline: initial;
|
8132
|
+
}
|
8133
|
+
.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 {
|
8134
|
+
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
8135
|
+
}
|
8136
|
+
.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 {
|
8137
|
+
background-color: transparent;
|
8138
|
+
}
|
8139
|
+
.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] {
|
8140
|
+
border-color: transparent;
|
8141
|
+
}
|
8142
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
8143
|
+
overflow: visible;
|
8144
|
+
width: var(--c4p--inline-edit--edit-size);
|
8145
|
+
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
8146
|
+
transition-property: margin, padding;
|
8147
|
+
}
|
8148
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
8149
|
+
overflow: hidden;
|
8150
|
+
width: 0;
|
8151
|
+
padding: 0;
|
8152
|
+
border-right: 0;
|
8153
|
+
border-left: 0;
|
8154
|
+
}
|
8155
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
8156
|
+
display: inline-flex;
|
8157
|
+
width: var(--c4p--inline-edit--size);
|
8158
|
+
max-width: var(--c4p--inline-edit--size);
|
8159
|
+
height: 100%;
|
8160
|
+
min-height: initial;
|
8161
|
+
max-height: var(--c4p--inline-edit--size);
|
8162
|
+
align-items: center;
|
8163
|
+
justify-content: center;
|
8164
|
+
border: 2px solid transparent;
|
8165
|
+
}
|
8166
|
+
.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 {
|
8167
|
+
border-color: transparent;
|
8168
|
+
background-color: transparent;
|
8169
|
+
box-shadow: initial;
|
8170
|
+
outline: initial;
|
8171
|
+
}
|
8172
|
+
@media (hover: hover) {
|
8173
|
+
.c4p--inline-edit .c4p--inline-edit__edit {
|
8174
|
+
opacity: 0;
|
8175
|
+
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
8176
|
+
}
|
8177
|
+
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
8178
|
+
opacity: 1;
|
8179
|
+
}
|
8180
|
+
}
|
8181
|
+
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
8182
|
+
opacity: 1;
|
8183
|
+
}
|
8184
|
+
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
8185
|
+
display: inline-flex;
|
8186
|
+
width: var(--c4p--inline-edit--size);
|
8187
|
+
max-width: var(--c4p--inline-edit--size);
|
8188
|
+
height: 100%;
|
8189
|
+
min-height: initial;
|
8190
|
+
max-height: var(--c4p--inline-edit--size);
|
8191
|
+
align-items: center;
|
8192
|
+
justify-content: center;
|
8193
|
+
border: 2px solid transparent;
|
8194
|
+
}
|
8195
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
8196
|
+
color: var(--cds-support-error, #da1e28);
|
8197
|
+
}
|
8198
|
+
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
8199
|
+
display: block;
|
8200
|
+
overflow: visible;
|
8201
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
8202
|
+
}
|
8203
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
|
8204
|
+
color: var(--cds-support-error, #da1e28);
|
8205
|
+
}
|
8206
|
+
|
8172
8207
|
.c4p--inline-edit-v2 {
|
8173
8208
|
display: flex;
|
8174
8209
|
align-items: center;
|
@@ -8194,6 +8229,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
8194
8229
|
.c4p--inline-edit-v2__text-input {
|
8195
8230
|
flex: 1;
|
8196
8231
|
}
|
8232
|
+
.c4p--inline-edit-v2__text-input-label {
|
8233
|
+
display: none;
|
8234
|
+
}
|
8197
8235
|
.c4p--inline-edit-v2__warning-icon {
|
8198
8236
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
8199
8237
|
margin-right: 0.4375rem;
|