@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.27
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -4
- package/css/index-full-carbon.css +129 -127
- 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 +69 -118
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +129 -127
- 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 +129 -127
- 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/AddSelect/AddSelectBody.js +1 -0
- package/es/components/AddSelect/AddSelectFormControl.js +92 -0
- package/es/components/AddSelect/AddSelectList.js +26 -195
- package/es/components/AddSelect/AddSelectRow.js +220 -0
- package/es/components/AddSelect/hooks/useFocus.js +35 -0
- package/es/components/Card/Card.js +8 -6
- package/es/components/Card/CardHeader.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +15 -20
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -65
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +112 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +11 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +29 -23
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/es/components/Datagrid/index.js +7 -7
- package/es/components/Datagrid/useInfiniteScroll.js +5 -1
- package/es/components/Datagrid/useOnRowClick.js +3 -3
- package/es/components/Datagrid/useSortableColumns.js +7 -5
- package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js +29 -0
- package/es/components/ExampleComponent/ExampleComponent.js +39 -5
- package/es/components/ExampleComponent/useExample.js +51 -0
- package/es/components/ExpressiveCard/ExpressiveCard.js +3 -3
- package/es/components/InlineEditV1/InlineEditV1.js +15 -20
- package/es/components/InlineEditV2/InlineEditV2.js +21 -31
- package/es/components/PageHeader/PageHeader.js +4 -3
- package/es/components/ProductiveCard/ProductiveCard.js +3 -3
- package/es/components/index.js +1 -1
- package/es/global/js/package-settings.js +24 -3
- package/es/global/js/utils/story-helper.js +9 -0
- package/es/global/js/utils/test-helper.js +38 -6
- package/lib/components/AddSelect/AddSelectBody.js +1 -0
- package/lib/components/AddSelect/AddSelectFormControl.js +110 -0
- package/lib/components/AddSelect/AddSelectList.js +29 -203
- package/lib/components/AddSelect/AddSelectRow.js +247 -0
- package/lib/components/AddSelect/hooks/useFocus.js +46 -0
- package/lib/components/Card/Card.js +7 -5
- package/lib/components/Card/CardHeader.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +14 -19
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +16 -69
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +132 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +11 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +23 -16
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useInfiniteScroll.js +5 -0
- package/lib/components/Datagrid/useOnRowClick.js +3 -3
- package/lib/components/Datagrid/useSortableColumns.js +7 -5
- package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js +40 -0
- package/lib/components/ExampleComponent/ExampleComponent.js +47 -4
- package/lib/components/ExampleComponent/useExample.js +63 -0
- package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -3
- package/lib/components/InlineEditV1/InlineEditV1.js +14 -19
- package/lib/components/InlineEditV2/InlineEditV2.js +20 -30
- package/lib/components/PageHeader/PageHeader.js +4 -3
- package/lib/components/ProductiveCard/ProductiveCard.js +3 -3
- package/lib/components/index.js +6 -0
- package/lib/global/js/package-settings.js +24 -3
- package/lib/global/js/utils/story-helper.js +13 -2
- package/lib/global/js/utils/test-helper.js +42 -8
- package/package.json +2 -2
- package/scss/components/ActionBar/_action-bar.scss +0 -4
- package/scss/components/AddSelect/_add-select.scss +4 -16
- package/scss/components/Card/_card.scss +13 -6
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +15 -2
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +18 -6
- package/scss/components/ExportModal/_export-modal.scss +0 -4
- package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +5 -89
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +42 -3
- package/scss/components/PageHeader/_page-header.scss +2 -3
- package/scss/components/ProductiveCard/_productive-card.scss +31 -2
- package/scss/components/SidePanel/_side-panel.scss +2 -1
- package/scss/components/TagSet/_tag-set.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
package/css/index.css
CHANGED
@@ -6443,7 +6443,6 @@ a.cds--overflow-menu-options__btn::before {
|
|
6443
6443
|
display: flex;
|
6444
6444
|
align-items: center;
|
6445
6445
|
justify-content: center;
|
6446
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
6447
6446
|
}
|
6448
6447
|
.c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
|
6449
6448
|
margin: 0;
|
@@ -7603,22 +7602,18 @@ a.cds--overflow-menu-options__btn::before {
|
|
7603
7602
|
fill: var(--cds-button-danger-primary, #da1e28);
|
7604
7603
|
}
|
7605
7604
|
|
7606
|
-
.cds--modal-content.c4p--export-modal__body-container {
|
7607
|
-
padding-bottom: 1.5rem;
|
7608
|
-
}
|
7609
|
-
|
7610
7605
|
.c4p--card {
|
7611
|
-
background: var(--cds-layer-01, #f4f4f4);
|
7606
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
7612
7607
|
color: var(--cds-text-primary, #161616);
|
7613
7608
|
}
|
7614
7609
|
|
7615
7610
|
.c4p--card__clickable {
|
7616
7611
|
cursor: pointer;
|
7617
|
-
transition: background 110ms;
|
7612
|
+
transition: background-color 110ms;
|
7618
7613
|
}
|
7619
7614
|
|
7620
7615
|
.c4p--card__clickable:hover {
|
7621
|
-
background: var(--cds-
|
7616
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
7622
7617
|
}
|
7623
7618
|
|
7624
7619
|
.c4p--card__media-left {
|
@@ -7678,10 +7673,10 @@ a.cds--overflow-menu-options__btn::before {
|
|
7678
7673
|
}
|
7679
7674
|
|
7680
7675
|
.c4p--card__body {
|
7681
|
-
font-size: var(--cds-body-
|
7682
|
-
font-weight: var(--cds-body-
|
7683
|
-
line-height: var(--cds-body-
|
7684
|
-
letter-spacing: var(--cds-body-
|
7676
|
+
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
7677
|
+
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
7678
|
+
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
7679
|
+
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
7685
7680
|
padding: 1rem;
|
7686
7681
|
padding-top: 0;
|
7687
7682
|
}
|
@@ -7694,15 +7689,22 @@ a.cds--overflow-menu-options__btn::before {
|
|
7694
7689
|
.c4p--card__actions {
|
7695
7690
|
display: flex;
|
7696
7691
|
flex-direction: row;
|
7697
|
-
margin: 1rem;
|
7698
|
-
margin-top: 0;
|
7699
7692
|
}
|
7700
7693
|
|
7701
7694
|
.c4p--card__icon {
|
7695
|
+
padding: 0.5rem;
|
7702
7696
|
color: inherit;
|
7703
7697
|
cursor: pointer;
|
7704
7698
|
}
|
7705
7699
|
|
7700
|
+
.c4p--card__icon:hover {
|
7701
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
7702
|
+
}
|
7703
|
+
|
7704
|
+
c4p--card__icon:active {
|
7705
|
+
color: var(--cds-link-primary-hover, #0043ce);
|
7706
|
+
}
|
7707
|
+
|
7706
7708
|
.c4p--card__link {
|
7707
7709
|
color: inherit;
|
7708
7710
|
text-decoration: inherit;
|
@@ -7714,10 +7716,10 @@ a.cds--overflow-menu-options__btn::before {
|
|
7714
7716
|
}
|
7715
7717
|
|
7716
7718
|
.c4p--card__title {
|
7717
|
-
font-size: var(--cds-
|
7718
|
-
font-weight: var(--cds-
|
7719
|
-
line-height: var(--cds-
|
7720
|
-
letter-spacing: var(--cds-
|
7719
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
7720
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
7721
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
7722
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
7721
7723
|
}
|
7722
7724
|
|
7723
7725
|
.c4p--http-errors .c4p--http-errors__content {
|
@@ -8332,24 +8334,18 @@ a.cds--overflow-menu-options__btn::before {
|
|
8332
8334
|
border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
|
8333
8335
|
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
8334
8336
|
}
|
8335
|
-
.c4p--add-select__selections-
|
8337
|
+
.c4p--add-select__selections-form-control {
|
8336
8338
|
display: flex;
|
8337
8339
|
align-items: center;
|
8338
8340
|
}
|
8339
|
-
.c4p--add-select__selections-
|
8341
|
+
.c4p--add-select__selections-form-control-label-wrapper {
|
8340
8342
|
display: flex;
|
8341
8343
|
margin-left: 1rem;
|
8342
8344
|
}
|
8343
|
-
.c4p--add-select__selections-
|
8345
|
+
.c4p--add-select__selections-form-control-label-text {
|
8344
8346
|
display: flex;
|
8345
8347
|
flex-direction: column;
|
8346
8348
|
}
|
8347
|
-
.c4p--add-select__selections-checkbox-wrapper.cds--form-item {
|
8348
|
-
flex: 0;
|
8349
|
-
}
|
8350
|
-
.c4p--add-select__selections-checkbox-wrapper .cds--checkbox-label-text {
|
8351
|
-
display: none;
|
8352
|
-
}
|
8353
8349
|
.c4p--add-select__selections-cell-avatar {
|
8354
8350
|
margin-right: 0.5rem;
|
8355
8351
|
}
|
@@ -8455,7 +8451,7 @@ a.cds--overflow-menu-options__btn::before {
|
|
8455
8451
|
flex-grow: 1;
|
8456
8452
|
overflow-x: auto;
|
8457
8453
|
}
|
8458
|
-
.c4p--add-select__columns .c4p--add-select__selections-
|
8454
|
+
.c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
|
8459
8455
|
margin-left: 0.5rem;
|
8460
8456
|
}
|
8461
8457
|
.c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
|
@@ -8656,10 +8652,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
8656
8652
|
opacity: 0;
|
8657
8653
|
}
|
8658
8654
|
|
8659
|
-
.c4p--add-select .cds--checkbox-label-text {
|
8660
|
-
padding-left: 0.5rem;
|
8661
|
-
}
|
8662
|
-
|
8663
8655
|
.c4p--add-select__multi .c4p--empty-state {
|
8664
8656
|
max-width: 16rem;
|
8665
8657
|
margin-top: 3rem;
|
@@ -11581,9 +11573,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11581
11573
|
.c4p--action-bar .c4p--action-bar__displayed-items--right {
|
11582
11574
|
justify-content: flex-end;
|
11583
11575
|
}
|
11584
|
-
.c4p--action-bar .c4p--action-bar-overflow-items {
|
11585
|
-
display: inline-block;
|
11586
|
-
}
|
11587
11576
|
.c4p--action-bar .c4p--action-bar__hidden-sizing-items {
|
11588
11577
|
position: absolute;
|
11589
11578
|
top: -100vh;
|
@@ -11785,6 +11774,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11785
11774
|
padding: 0;
|
11786
11775
|
margin: 0;
|
11787
11776
|
background-color: inherit;
|
11777
|
+
border-radius: 0;
|
11788
11778
|
color: inherit;
|
11789
11779
|
text-overflow: ellipsis;
|
11790
11780
|
white-space: nowrap;
|
@@ -12311,7 +12301,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
12311
12301
|
.c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
|
12312
12302
|
background-color: var(--cds-background, #ffffff);
|
12313
12303
|
}
|
12314
|
-
.c4p--page-header .
|
12304
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle {
|
12315
12305
|
position: absolute;
|
12316
12306
|
z-index: 100;
|
12317
12307
|
right: 0;
|
@@ -12320,7 +12310,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
12320
12310
|
.c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
|
12321
12311
|
transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
12322
12312
|
}
|
12323
|
-
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed
|
12313
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed svg {
|
12324
12314
|
transform: scaleY(-1);
|
12325
12315
|
}
|
12326
12316
|
|
@@ -12347,16 +12337,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
12347
12337
|
padding-right: 0;
|
12348
12338
|
}
|
12349
12339
|
.c4p--card__productive .c4p--card__title {
|
12350
|
-
font-size: var(--cds-
|
12351
|
-
font-weight: var(--cds-
|
12352
|
-
line-height: var(--cds-
|
12353
|
-
letter-spacing: var(--cds-
|
12340
|
+
font-size: var(--cds-heading-compact-02-font-size, 1rem);
|
12341
|
+
font-weight: var(--cds-heading-compact-02-font-weight, 600);
|
12342
|
+
line-height: var(--cds-heading-compact-02-line-height, 1.375);
|
12343
|
+
letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
|
12354
12344
|
}
|
12355
12345
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__title {
|
12356
|
-
font-size: var(--cds-
|
12357
|
-
font-weight: var(--cds-
|
12358
|
-
line-height: var(--cds-
|
12359
|
-
letter-spacing: var(--cds-
|
12346
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
12347
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
12348
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
12349
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
12360
12350
|
}
|
12361
12351
|
.c4p--card__productive .c4p--card__body {
|
12362
12352
|
padding-top: 0.5rem;
|
@@ -12370,12 +12360,36 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
12370
12360
|
justify-content: flex-end;
|
12371
12361
|
}
|
12372
12362
|
.c4p--card__productive .c4p--card__actions {
|
12363
|
+
min-height: 2rem;
|
12373
12364
|
margin: 0;
|
12374
12365
|
}
|
12375
12366
|
.c4p--card__productive .c4p--card__actions-header {
|
12376
12367
|
margin-top: calc(-1 * 0.25rem);
|
12377
12368
|
margin-right: 0.5rem;
|
12378
12369
|
}
|
12370
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button {
|
12371
|
+
min-height: 2rem;
|
12372
|
+
padding: 0 1rem;
|
12373
|
+
padding-right: 0.625rem;
|
12374
|
+
padding-left: 0.625rem;
|
12375
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
12376
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
12377
|
+
}
|
12378
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button::before {
|
12379
|
+
position: absolute;
|
12380
|
+
left: 0;
|
12381
|
+
width: 0.05rem;
|
12382
|
+
height: 1.5rem;
|
12383
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
12384
|
+
content: "";
|
12385
|
+
opacity: 1;
|
12386
|
+
}
|
12387
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
|
12388
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
12389
|
+
}
|
12390
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
|
12391
|
+
opacity: 0;
|
12392
|
+
}
|
12379
12393
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
|
12380
12394
|
.c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
|
12381
12395
|
margin-top: 0;
|
@@ -14760,6 +14774,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
14760
14774
|
border-radius: 50%;
|
14761
14775
|
}
|
14762
14776
|
|
14777
|
+
.cds--btn--ghost.c4p--user-profile-image__tooltip:focus {
|
14778
|
+
border: 0;
|
14779
|
+
box-shadow: 0 0 0 0.25rem var(--cds-focus, #0f62fe);
|
14780
|
+
}
|
14781
|
+
|
14763
14782
|
.cds--tooltip__trigger .c4p--user-profile-image svg,
|
14764
14783
|
.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
|
14765
14784
|
fill: var(--cds-layer-01, #f4f4f4);
|
@@ -15159,6 +15178,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15159
15178
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
15160
15179
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
15161
15180
|
margin-left: 1rem;
|
15181
|
+
color: var(--cds-text-primary, #161616);
|
15162
15182
|
font-family: inherit;
|
15163
15183
|
line-height: var(--c4p--inline-edit--size);
|
15164
15184
|
}
|
@@ -15226,6 +15246,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15226
15246
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
15227
15247
|
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
15228
15248
|
}
|
15249
|
+
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
15250
|
+
display: flex;
|
15251
|
+
align-items: center;
|
15252
|
+
}
|
15229
15253
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
15230
15254
|
position: absolute;
|
15231
15255
|
top: 0;
|
@@ -15241,82 +15265,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15241
15265
|
}
|
15242
15266
|
.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 {
|
15243
15267
|
display: inline-flex;
|
15244
|
-
height: 100%;
|
15245
|
-
min-height: initial;
|
15246
|
-
max-height: var(--c4p--inline-edit--size);
|
15247
|
-
align-items: center;
|
15248
|
-
justify-content: center;
|
15249
|
-
border: 2px solid transparent;
|
15250
|
-
}
|
15251
|
-
.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 {
|
15252
|
-
outline: initial;
|
15253
|
-
}
|
15254
|
-
.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 {
|
15255
|
-
border-color: var(--cds-focus, #0f62fe);
|
15256
|
-
box-shadow: initial;
|
15257
|
-
outline: initial;
|
15258
|
-
}
|
15259
|
-
.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 {
|
15260
|
-
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
15261
|
-
}
|
15262
|
-
.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 {
|
15263
|
-
background-color: transparent;
|
15264
|
-
}
|
15265
|
-
.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] {
|
15266
|
-
border-color: transparent;
|
15267
15268
|
}
|
15268
15269
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
15269
|
-
overflow: visible;
|
15270
15270
|
width: var(--c4p--inline-edit--edit-size);
|
15271
15271
|
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
15272
15272
|
transition-property: margin, padding;
|
15273
15273
|
}
|
15274
15274
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
15275
|
-
overflow: hidden;
|
15276
15275
|
width: 0;
|
15277
15276
|
padding: 0;
|
15278
15277
|
border-right: 0;
|
15279
15278
|
border-left: 0;
|
15280
15279
|
}
|
15281
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
15282
|
-
margin-right: 0;
|
15283
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
15284
|
-
transition-property: margin, padding;
|
15285
|
-
}
|
15286
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
15287
|
-
transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
15288
|
-
}
|
15289
|
-
@media (prefers-reduced-motion: reduce) {
|
15290
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
15291
|
-
transition: none;
|
15292
|
-
}
|
15293
|
-
}
|
15294
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
15295
|
-
padding-right: 0;
|
15296
|
-
padding-left: 0;
|
15297
|
-
border-right: 0;
|
15298
|
-
border-left: 0;
|
15299
|
-
margin-right: calc(-1 * var(--c4p--inline-edit--size));
|
15300
|
-
}
|
15301
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
|
15302
|
-
overflow: hidden;
|
15303
|
-
width: 0;
|
15304
|
-
}
|
15305
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
15306
|
-
display: inline-flex;
|
15307
|
-
height: 100%;
|
15308
|
-
min-height: initial;
|
15309
|
-
max-height: var(--c4p--inline-edit--size);
|
15310
|
-
align-items: center;
|
15311
|
-
justify-content: center;
|
15312
|
-
border: 2px solid transparent;
|
15313
|
-
}
|
15314
|
-
.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 {
|
15315
|
-
border-color: transparent;
|
15316
|
-
background-color: transparent;
|
15317
|
-
box-shadow: initial;
|
15318
|
-
outline: initial;
|
15319
|
-
}
|
15320
15280
|
@media (hover: hover) {
|
15321
15281
|
.c4p--inline-edit .c4p--inline-edit__edit {
|
15322
15282
|
opacity: 0;
|
@@ -15329,15 +15289,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15329
15289
|
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
15330
15290
|
opacity: 1;
|
15331
15291
|
}
|
15332
|
-
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
15333
|
-
display: inline-flex;
|
15334
|
-
height: 100%;
|
15335
|
-
min-height: initial;
|
15336
|
-
max-height: var(--c4p--inline-edit--size);
|
15337
|
-
align-items: center;
|
15338
|
-
justify-content: center;
|
15339
|
-
border: 2px solid transparent;
|
15340
|
-
}
|
15341
15292
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
15342
15293
|
color: var(--cds-support-error, #da1e28);
|
15343
15294
|
}
|
@@ -15373,7 +15324,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15373
15324
|
visibility: hidden;
|
15374
15325
|
}
|
15375
15326
|
|
15376
|
-
.c4p--inline-edit-v2
|
15327
|
+
.c4p--inline-edit-v2--focused {
|
15377
15328
|
background: var(--cds-field-01, #f4f4f4);
|
15378
15329
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
15379
15330
|
}
|
@@ -15387,8 +15338,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15387
15338
|
}
|
15388
15339
|
|
15389
15340
|
.c4p--inline-edit-v2__warning-icon {
|
15390
|
-
|
15391
|
-
margin-right: 0.4375rem;
|
15341
|
+
margin: 0.5rem;
|
15392
15342
|
color: var(--cds-support-error, #da1e28);
|
15393
15343
|
}
|
15394
15344
|
|
@@ -15418,6 +15368,39 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
15418
15368
|
outline: none;
|
15419
15369
|
}
|
15420
15370
|
|
15371
|
+
.c4p--inline-edit-v2__toolbar {
|
15372
|
+
--toolbar-width: 2rem;
|
15373
|
+
--toolbar-width-focussed: 4rem;
|
15374
|
+
display: inline-flex;
|
15375
|
+
overflow: hidden;
|
15376
|
+
width: var(--toolbar-width);
|
15377
|
+
}
|
15378
|
+
|
15379
|
+
.c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
|
15380
|
+
--toolbar-width: 2rem;
|
15381
|
+
--toolbar-width-focussed: 6rem;
|
15382
|
+
}
|
15383
|
+
|
15384
|
+
@keyframes slide-in {
|
15385
|
+
0% {
|
15386
|
+
overflow: hidden;
|
15387
|
+
width: var(--toolbar-width);
|
15388
|
+
}
|
15389
|
+
99% {
|
15390
|
+
overflow: hidden;
|
15391
|
+
width: var(--toolbar-width-focussed);
|
15392
|
+
}
|
15393
|
+
100% {
|
15394
|
+
overflow: visible;
|
15395
|
+
width: var(--toolbar-width-focussed);
|
15396
|
+
}
|
15397
|
+
}
|
15398
|
+
.c4p--inline-edit-v2--focused .c4p--inline-edit-v2__toolbar {
|
15399
|
+
overflow: initial;
|
15400
|
+
width: var(--toolbar-width-focussed);
|
15401
|
+
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
15402
|
+
}
|
15403
|
+
|
15421
15404
|
.c4p--data-spreadsheet {
|
15422
15405
|
--c4p--data-spreadsheet--total-width: 0;
|
15423
15406
|
display: inline-block;
|
@@ -16484,10 +16467,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16484
16467
|
border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
16485
16468
|
}
|
16486
16469
|
|
16487
|
-
.c4p--datagrid__customize-columns-checkbox
|
16470
|
+
.cds--form-item.cds--checkbox-wrapper.c4p--datagrid__customize-columns-checkbox {
|
16488
16471
|
display: flex;
|
16472
|
+
flex: initial;
|
16473
|
+
align-items: center;
|
16489
16474
|
justify-content: center;
|
16490
|
-
|
16475
|
+
}
|
16476
|
+
|
16477
|
+
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-visible-label {
|
16478
|
+
/* stylelint-disable-next-line */
|
16479
|
+
padding-left: 0.375rem;
|
16491
16480
|
}
|
16492
16481
|
|
16493
16482
|
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
|
@@ -16499,6 +16488,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16499
16488
|
overflow: auto;
|
16500
16489
|
}
|
16501
16490
|
|
16491
|
+
.c4p--datagrid__customize-columns-select-all {
|
16492
|
+
align-items: center;
|
16493
|
+
}
|
16494
|
+
|
16502
16495
|
.c4p--datagrid__customize-columns-select-all,
|
16503
16496
|
.c4p--datagrid__customize-columns-select-all--selected {
|
16504
16497
|
position: sticky;
|
@@ -16530,15 +16523,17 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16530
16523
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
16531
16524
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
16532
16525
|
*/
|
16533
|
-
.c4p--datagrid__row-size-
|
16534
|
-
padding: 1rem;
|
16526
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
|
16535
16527
|
background-color: var(--cds-layer-02, #ffffff);
|
16536
16528
|
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
16537
16529
|
}
|
16538
16530
|
|
16539
|
-
.
|
16531
|
+
.c4p--datagrid .c4p--datagrid__row-size-radio-button .cds--radio-button__label {
|
16532
|
+
color: var(--cds-text-primary, #161616);
|
16533
|
+
}
|
16534
|
+
|
16535
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip .cds--popover-caret {
|
16540
16536
|
background-color: var(--cds-layer-02, #ffffff);
|
16541
|
-
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
16542
16537
|
}
|
16543
16538
|
|
16544
16539
|
.c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
|
@@ -16546,6 +16541,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16546
16541
|
left: -4px;
|
16547
16542
|
}
|
16548
16543
|
|
16544
|
+
.c4p--datagrid__row-size-toggle-tip-button.cds--toggletip-button {
|
16545
|
+
display: flex;
|
16546
|
+
width: 3rem;
|
16547
|
+
height: 3rem;
|
16548
|
+
justify-content: center;
|
16549
|
+
}
|
16550
|
+
|
16549
16551
|
/*
|
16550
16552
|
* Licensed Materials - Property of IBM
|
16551
16553
|
* 5724-Q36
|