@carbon/ibm-products 2.0.0-rc.26 → 2.0.0-rc.28
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +131 -251
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -5
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +202 -219
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +131 -251
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -5
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +131 -251
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -5
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +3 -4
- package/es/components/ActionBar/ActionBar.js +13 -29
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +15 -21
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- 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/DatagridSelectAllWithToggle.js +7 -8
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -5
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +19 -5
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +19 -1
- package/es/components/Datagrid/useFiltering.js +4 -2
- package/es/components/Datagrid/useOnRowClick.js +11 -1
- package/es/components/Datagrid/useSelectRows.js +2 -0
- package/es/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +92 -30
- package/es/components/{InlineEdit → EditInPlace}/index.js +1 -1
- package/es/components/ExpressiveCard/ExpressiveCard.js +3 -3
- package/es/components/PageHeader/PageHeader.js +40 -38
- package/es/components/PageHeader/PageHeaderTitle.js +18 -18
- package/es/components/ProductiveCard/ProductiveCard.js +3 -3
- package/es/components/SidePanel/SidePanel.js +25 -26
- package/es/components/TagSet/TagSet.js +5 -7
- package/es/components/Tearsheet/TearsheetShell.js +4 -6
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useResizeObserver.js +79 -0
- package/es/global/js/hooks/useWindowResize.js +6 -0
- package/es/global/js/hooks/useWindowScroll.js +7 -0
- package/es/global/js/package-settings.js +2 -4
- package/lib/components/AboutModal/AboutModal.js +3 -4
- package/lib/components/ActionBar/ActionBar.js +13 -29
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +13 -19
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- 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/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +6 -5
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +19 -5
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +18 -1
- package/lib/components/Datagrid/useFiltering.js +4 -2
- package/lib/components/Datagrid/useOnRowClick.js +11 -1
- package/lib/components/Datagrid/useSelectRows.js +2 -0
- package/lib/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +100 -34
- package/lib/components/{InlineEdit → EditInPlace}/index.js +3 -3
- package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -3
- package/lib/components/PageHeader/PageHeader.js +40 -38
- package/lib/components/PageHeader/PageHeaderTitle.js +19 -19
- package/lib/components/ProductiveCard/ProductiveCard.js +3 -3
- package/lib/components/SidePanel/SidePanel.js +25 -26
- package/lib/components/TagSet/TagSet.js +5 -7
- package/lib/components/Tearsheet/TearsheetShell.js +4 -6
- package/lib/components/index.js +7 -7
- package/lib/global/js/hooks/useResizeObserver.js +91 -0
- package/lib/global/js/hooks/useWindowScroll.js +6 -0
- package/lib/global/js/package-settings.js +2 -4
- package/package.json +3 -4
- package/scss/components/ActionBar/_action-bar.scss +0 -4
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
- package/scss/components/Card/_card.scss +13 -6
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -7
- package/scss/components/{InlineEditV2/_inline-edit-v2.scss → EditInPlace/_edit-in-place.scss} +56 -14
- package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss +1 -1
- package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss +1 -1
- package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss +3 -15
- package/scss/components/ExportModal/_export-modal.scss +0 -4
- package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +3 -10
- package/scss/components/ProductiveCard/_productive-card.scss +31 -2
- package/scss/components/TagSet/_tag-set.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
- package/scss/components/_index-released-only-with-carbon.scss +1 -1
- package/scss/components/_index-released-only.scss +1 -1
- package/scss/components/_index-with-carbon.scss +1 -2
- package/scss/components/_index.scss +1 -2
- package/es/components/InlineEdit/InlineEdit.js +0 -47
- package/es/components/InlineEditV1/InlineEditV1.js +0 -442
- package/es/components/InlineEditV1/index.js +0 -7
- package/es/components/InlineEditV2/index.js +0 -7
- package/lib/components/InlineEdit/InlineEdit.js +0 -63
- package/lib/components/InlineEditV1/InlineEditV1.js +0 -459
- package/lib/components/InlineEditV1/index.js +0 -13
- package/lib/components/InlineEditV2/index.js +0 -13
- package/scss/components/InlineEditV1/_carbon-imports.scss +0 -6
- package/scss/components/InlineEditV1/_index.scss +0 -8
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +0 -269
- package/scss/components/InlineEditV2/_index-with-carbon.scss +0 -9
- package/scss/components/InlineEditV2/_storybook-styles.scss +0 -9
- /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
@@ -3950,22 +3950,18 @@
|
|
3950
3950
|
fill: var(--cds-button-danger-primary, #da1e28);
|
3951
3951
|
}
|
3952
3952
|
|
3953
|
-
.cds--modal-content.c4p--export-modal__body-container {
|
3954
|
-
padding-bottom: 1.5rem;
|
3955
|
-
}
|
3956
|
-
|
3957
3953
|
.c4p--card {
|
3958
|
-
background: var(--cds-layer-01, #f4f4f4);
|
3954
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
3959
3955
|
color: var(--cds-text-primary, #161616);
|
3960
3956
|
}
|
3961
3957
|
|
3962
3958
|
.c4p--card__clickable {
|
3963
3959
|
cursor: pointer;
|
3964
|
-
transition: background 110ms;
|
3960
|
+
transition: background-color 110ms;
|
3965
3961
|
}
|
3966
3962
|
|
3967
3963
|
.c4p--card__clickable:hover {
|
3968
|
-
background: var(--cds-
|
3964
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
3969
3965
|
}
|
3970
3966
|
|
3971
3967
|
.c4p--card__media-left {
|
@@ -4025,10 +4021,10 @@
|
|
4025
4021
|
}
|
4026
4022
|
|
4027
4023
|
.c4p--card__body {
|
4028
|
-
font-size: var(--cds-body-
|
4029
|
-
font-weight: var(--cds-body-
|
4030
|
-
line-height: var(--cds-body-
|
4031
|
-
letter-spacing: var(--cds-body-
|
4024
|
+
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
4025
|
+
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
4026
|
+
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
4027
|
+
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
4032
4028
|
padding: 1rem;
|
4033
4029
|
padding-top: 0;
|
4034
4030
|
}
|
@@ -4041,15 +4037,22 @@
|
|
4041
4037
|
.c4p--card__actions {
|
4042
4038
|
display: flex;
|
4043
4039
|
flex-direction: row;
|
4044
|
-
margin: 1rem;
|
4045
|
-
margin-top: 0;
|
4046
4040
|
}
|
4047
4041
|
|
4048
4042
|
.c4p--card__icon {
|
4043
|
+
padding: 0.5rem;
|
4049
4044
|
color: inherit;
|
4050
4045
|
cursor: pointer;
|
4051
4046
|
}
|
4052
4047
|
|
4048
|
+
.c4p--card__icon:hover {
|
4049
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
4050
|
+
}
|
4051
|
+
|
4052
|
+
c4p--card__icon:active {
|
4053
|
+
color: var(--cds-link-primary-hover, #0043ce);
|
4054
|
+
}
|
4055
|
+
|
4053
4056
|
.c4p--card__link {
|
4054
4057
|
color: inherit;
|
4055
4058
|
text-decoration: inherit;
|
@@ -4061,10 +4064,10 @@
|
|
4061
4064
|
}
|
4062
4065
|
|
4063
4066
|
.c4p--card__title {
|
4064
|
-
font-size: var(--cds-
|
4065
|
-
font-weight: var(--cds-
|
4066
|
-
line-height: var(--cds-
|
4067
|
-
letter-spacing: var(--cds-
|
4067
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
4068
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
4069
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
4070
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
4068
4071
|
}
|
4069
4072
|
|
4070
4073
|
.c4p--filter-summary {
|
@@ -6985,9 +6988,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6985
6988
|
.c4p--action-bar .c4p--action-bar__displayed-items--right {
|
6986
6989
|
justify-content: flex-end;
|
6987
6990
|
}
|
6988
|
-
.c4p--action-bar .c4p--action-bar-overflow-items {
|
6989
|
-
display: inline-block;
|
6990
|
-
}
|
6991
6991
|
.c4p--action-bar .c4p--action-bar__hidden-sizing-items {
|
6992
6992
|
position: absolute;
|
6993
6993
|
top: -100vh;
|
@@ -7040,6 +7040,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7040
7040
|
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
|
7041
7041
|
display: none;
|
7042
7042
|
}
|
7043
|
+
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn {
|
7044
|
+
min-height: revert;
|
7045
|
+
padding: 0;
|
7046
|
+
}
|
7047
|
+
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn--ghost:hover {
|
7048
|
+
background-color: inherit;
|
7049
|
+
}
|
7043
7050
|
@media (max-width: 41.98rem) {
|
7044
7051
|
.c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
|
7045
7052
|
display: none;
|
@@ -7189,6 +7196,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7189
7196
|
padding: 0;
|
7190
7197
|
margin: 0;
|
7191
7198
|
background-color: inherit;
|
7199
|
+
border-radius: 0;
|
7192
7200
|
color: inherit;
|
7193
7201
|
text-overflow: ellipsis;
|
7194
7202
|
white-space: nowrap;
|
@@ -7489,7 +7497,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7489
7497
|
white-space: nowrap;
|
7490
7498
|
}
|
7491
7499
|
.c4p--page-header .c4p--page-header__title-row {
|
7492
|
-
margin-top: 0;
|
7500
|
+
margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
|
7493
7501
|
margin-bottom: 0;
|
7494
7502
|
transform: translateY(0.125rem);
|
7495
7503
|
}
|
@@ -7549,9 +7557,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7549
7557
|
text-overflow: ellipsis;
|
7550
7558
|
white-space: nowrap;
|
7551
7559
|
}
|
7552
|
-
.c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
|
7553
|
-
transform: translateY(-2px);
|
7554
|
-
}
|
7555
7560
|
.c4p--page-header .c4p--page-header__title--editable {
|
7556
7561
|
display: flex;
|
7557
7562
|
overflow: visible;
|
@@ -7715,7 +7720,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7715
7720
|
.c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
|
7716
7721
|
background-color: var(--cds-background, #ffffff);
|
7717
7722
|
}
|
7718
|
-
.c4p--page-header .
|
7723
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle {
|
7719
7724
|
position: absolute;
|
7720
7725
|
z-index: 100;
|
7721
7726
|
right: 0;
|
@@ -7724,7 +7729,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7724
7729
|
.c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
|
7725
7730
|
transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
7726
7731
|
}
|
7727
|
-
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed
|
7732
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed svg {
|
7728
7733
|
transform: scaleY(-1);
|
7729
7734
|
}
|
7730
7735
|
|
@@ -7751,16 +7756,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7751
7756
|
padding-right: 0;
|
7752
7757
|
}
|
7753
7758
|
.c4p--card__productive .c4p--card__title {
|
7754
|
-
font-size: var(--cds-
|
7755
|
-
font-weight: var(--cds-
|
7756
|
-
line-height: var(--cds-
|
7757
|
-
letter-spacing: var(--cds-
|
7759
|
+
font-size: var(--cds-heading-compact-02-font-size, 1rem);
|
7760
|
+
font-weight: var(--cds-heading-compact-02-font-weight, 600);
|
7761
|
+
line-height: var(--cds-heading-compact-02-line-height, 1.375);
|
7762
|
+
letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
|
7758
7763
|
}
|
7759
7764
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__title {
|
7760
|
-
font-size: var(--cds-
|
7761
|
-
font-weight: var(--cds-
|
7762
|
-
line-height: var(--cds-
|
7763
|
-
letter-spacing: var(--cds-
|
7765
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
7766
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
7767
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
7768
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
7764
7769
|
}
|
7765
7770
|
.c4p--card__productive .c4p--card__body {
|
7766
7771
|
padding-top: 0.5rem;
|
@@ -7774,12 +7779,36 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7774
7779
|
justify-content: flex-end;
|
7775
7780
|
}
|
7776
7781
|
.c4p--card__productive .c4p--card__actions {
|
7782
|
+
min-height: 2rem;
|
7777
7783
|
margin: 0;
|
7778
7784
|
}
|
7779
7785
|
.c4p--card__productive .c4p--card__actions-header {
|
7780
7786
|
margin-top: calc(-1 * 0.25rem);
|
7781
7787
|
margin-right: 0.5rem;
|
7782
7788
|
}
|
7789
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button {
|
7790
|
+
min-height: 2rem;
|
7791
|
+
padding: 0 1rem;
|
7792
|
+
padding-right: 0.625rem;
|
7793
|
+
padding-left: 0.625rem;
|
7794
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7795
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7796
|
+
}
|
7797
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button::before {
|
7798
|
+
position: absolute;
|
7799
|
+
left: 0;
|
7800
|
+
width: 0.05rem;
|
7801
|
+
height: 1.5rem;
|
7802
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
7803
|
+
content: "";
|
7804
|
+
opacity: 1;
|
7805
|
+
}
|
7806
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
|
7807
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7808
|
+
}
|
7809
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
|
7810
|
+
opacity: 0;
|
7811
|
+
}
|
7783
7812
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
|
7784
7813
|
.c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
|
7785
7814
|
margin-top: 0;
|
@@ -9375,6 +9404,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9375
9404
|
border-radius: 50%;
|
9376
9405
|
}
|
9377
9406
|
|
9407
|
+
.cds--btn--ghost.c4p--user-profile-image__tooltip:focus {
|
9408
|
+
border: 0;
|
9409
|
+
box-shadow: 0 0 0 0.25rem var(--cds-focus, #0f62fe);
|
9410
|
+
}
|
9411
|
+
|
9378
9412
|
.cds--tooltip__trigger .c4p--user-profile-image svg,
|
9379
9413
|
.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
|
9380
9414
|
fill: var(--cds-layer-01, #f4f4f4);
|
@@ -9712,233 +9746,86 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9712
9746
|
transition: none;
|
9713
9747
|
}
|
9714
9748
|
}
|
9715
|
-
.c4p--
|
9716
|
-
--c4p--
|
9717
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9718
|
-
--c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
|
9719
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
9720
|
-
position: relative;
|
9721
|
-
display: inline-block;
|
9722
|
-
min-width: calc(4 * var(--c4p--inline-edit--size));
|
9723
|
-
max-width: 100%;
|
9724
|
-
height: var(--c4p--inline-edit--size);
|
9725
|
-
background-color: var(--c4p--inline-edit--background-color);
|
9726
|
-
cursor: text;
|
9727
|
-
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);
|
9728
|
-
vertical-align: middle;
|
9729
|
-
white-space: nowrap;
|
9730
|
-
}
|
9731
|
-
.c4p--inline-edit.c4p--inline-edit--light {
|
9732
|
-
--c4p--inline-edit--background-color: transparent;
|
9733
|
-
}
|
9734
|
-
.c4p--inline-edit:hover {
|
9735
|
-
--c4p--inline-edit--background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
9736
|
-
}
|
9737
|
-
.c4p--inline-edit.c4p--inline-edit--sm {
|
9738
|
-
--c4p--inline-edit--size: 2rem;
|
9739
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9740
|
-
}
|
9741
|
-
.c4p--inline-edit.c4p--inline-edit--lg {
|
9742
|
-
--c4p--inline-edit--size: 3rem;
|
9743
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9744
|
-
}
|
9745
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
9746
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
9747
|
-
outline: 0.125rem solid var(--cds-support-error, #da1e28);
|
9748
|
-
outline-offset: calc(-1 * 0.125rem);
|
9749
|
-
}
|
9750
|
-
@media screen and (prefers-contrast) {
|
9751
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
9752
|
-
outline-style: dotted;
|
9753
|
-
}
|
9754
|
-
}
|
9755
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
9756
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
9757
|
-
outline: 0.125rem solid var(--cds-focus, #0f62fe);
|
9758
|
-
outline-offset: calc(-1 * 0.125rem);
|
9759
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
9760
|
-
}
|
9761
|
-
@media screen and (prefers-contrast) {
|
9762
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
9763
|
-
outline-style: dotted;
|
9764
|
-
}
|
9765
|
-
}
|
9766
|
-
.c4p--inline-edit .c4p--inline-edit__input {
|
9767
|
-
display: inline-block;
|
9768
|
-
overflow: hidden;
|
9769
|
-
width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
|
9770
|
-
max-width: calc(
|
9771
|
-
100% - var(--c4p--inline-edit--toolbar-width) - 1rem
|
9772
|
-
);
|
9773
|
-
min-height: var(--c4p--inline-edit--size);
|
9774
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
9775
|
-
margin-right: var(--c4p--inline-edit--toolbar-width);
|
9776
|
-
margin-left: 1rem;
|
9777
|
-
color: var(--cds-text-primary, #161616);
|
9778
|
-
font-family: inherit;
|
9779
|
-
line-height: var(--c4p--inline-edit--size);
|
9780
|
-
}
|
9781
|
-
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
9782
|
-
outline: none;
|
9783
|
-
}
|
9784
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
9785
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9786
|
-
}
|
9787
|
-
.c4p--inline-edit .c4p--inline-edit__input::after {
|
9788
|
-
position: absolute;
|
9789
|
-
top: 0;
|
9790
|
-
left: 0;
|
9791
|
-
display: block;
|
9792
|
-
overflow: hidden;
|
9793
|
-
width: 0;
|
9794
|
-
margin-left: 1rem;
|
9795
|
-
color: var(--cds-text-helper, #6f6f6f);
|
9796
|
-
content: attr(data-placeholder);
|
9797
|
-
opacity: 0;
|
9798
|
-
visibility: hidden;
|
9799
|
-
}
|
9800
|
-
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
9801
|
-
display: inline-block;
|
9802
|
-
overflow: hidden;
|
9803
|
-
width: 0;
|
9804
|
-
height: var(--c4p--inline-edit--size);
|
9805
|
-
line-height: var(--c4p--inline-edit--size);
|
9806
|
-
opacity: 0;
|
9807
|
-
pointer-events: none;
|
9808
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9809
|
-
}
|
9810
|
-
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
9811
|
-
width: initial;
|
9812
|
-
opacity: 1;
|
9813
|
-
}
|
9814
|
-
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
9815
|
-
position: absolute;
|
9816
|
-
top: 0;
|
9817
|
-
left: 0;
|
9818
|
-
width: 100%;
|
9819
|
-
height: 100%;
|
9820
|
-
pointer-events: none;
|
9821
|
-
}
|
9822
|
-
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
9823
|
-
cursor: not-allowed;
|
9824
|
-
pointer-events: all;
|
9825
|
-
}
|
9826
|
-
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
9827
|
-
width: initial;
|
9828
|
-
opacity: 1;
|
9829
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9830
|
-
visibility: visible;
|
9831
|
-
}
|
9832
|
-
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
9833
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
9834
|
-
position: absolute;
|
9835
|
-
top: 0;
|
9836
|
-
right: 0;
|
9837
|
-
display: flex;
|
9838
|
-
height: 100%;
|
9839
|
-
justify-content: space-between;
|
9840
|
-
cursor: text;
|
9841
|
-
}
|
9842
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
9843
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9844
|
-
}
|
9845
|
-
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
9749
|
+
.c4p--edit-in-place {
|
9750
|
+
--c4p--edit-in-place--size: 2rem;
|
9846
9751
|
display: flex;
|
9847
9752
|
align-items: center;
|
9753
|
+
background: transparent;
|
9754
|
+
cursor: pointer;
|
9848
9755
|
}
|
9849
|
-
|
9850
|
-
|
9851
|
-
|
9852
|
-
left: 0;
|
9853
|
-
display: block;
|
9854
|
-
width: 100%;
|
9855
|
-
height: 100%;
|
9856
|
-
box-sizing: border-box;
|
9857
|
-
border: 2px solid var(--cds-focus, #0f62fe);
|
9858
|
-
border-left: 0;
|
9859
|
-
content: "";
|
9860
|
-
pointer-events: none;
|
9861
|
-
}
|
9862
|
-
.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 {
|
9863
|
-
display: inline-flex;
|
9864
|
-
}
|
9865
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9866
|
-
width: var(--c4p--inline-edit--edit-size);
|
9867
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9868
|
-
transition-property: margin, padding;
|
9869
|
-
}
|
9870
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9871
|
-
width: 0;
|
9872
|
-
padding: 0;
|
9873
|
-
border-right: 0;
|
9874
|
-
border-left: 0;
|
9875
|
-
}
|
9876
|
-
@media (hover: hover) {
|
9877
|
-
.c4p--inline-edit .c4p--inline-edit__edit {
|
9878
|
-
opacity: 0;
|
9879
|
-
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
9880
|
-
}
|
9881
|
-
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
9882
|
-
opacity: 1;
|
9883
|
-
}
|
9884
|
-
}
|
9885
|
-
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
9886
|
-
opacity: 1;
|
9887
|
-
}
|
9888
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
9889
|
-
color: var(--cds-support-error, #da1e28);
|
9890
|
-
}
|
9891
|
-
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
9892
|
-
display: block;
|
9893
|
-
overflow: visible;
|
9894
|
-
margin-left: 1rem;
|
9756
|
+
|
9757
|
+
.c4p--edit-in-place--sm {
|
9758
|
+
--c4p--edit-in-place--size: 2rem;
|
9895
9759
|
}
|
9896
|
-
|
9897
|
-
|
9760
|
+
|
9761
|
+
.c4p--edit-in-place--md {
|
9762
|
+
--c4p--edit-in-place--size: 2.5rem;
|
9898
9763
|
}
|
9899
9764
|
|
9900
|
-
.c4p--
|
9901
|
-
|
9902
|
-
|
9903
|
-
background: transparent;
|
9904
|
-
cursor: pointer;
|
9765
|
+
.c4p--edit-in-place--lg {
|
9766
|
+
/* April 2023 max text input size */
|
9767
|
+
--c4p--edit-in-place--size: 3rem;
|
9905
9768
|
}
|
9906
9769
|
|
9907
|
-
.c4p--
|
9770
|
+
.c4p--edit-in-place--readonly {
|
9908
9771
|
cursor: not-allowed;
|
9909
9772
|
}
|
9910
9773
|
|
9911
|
-
.c4p--
|
9774
|
+
.c4p--edit-in-place:hover {
|
9912
9775
|
background: var(--cds-field-01, #f4f4f4);
|
9913
9776
|
}
|
9914
9777
|
|
9915
|
-
.c4p--
|
9778
|
+
.c4p--edit-in-place:hover .c4p--edit-in-place__btn-edit,
|
9779
|
+
.c4p--edit-in-place__btn-edit.c4p--edit-in-place__btn-edit--always-visible {
|
9916
9780
|
visibility: visible;
|
9917
9781
|
}
|
9918
9782
|
|
9919
|
-
.c4p--
|
9783
|
+
.c4p--edit-in-place__btn-edit {
|
9920
9784
|
visibility: hidden;
|
9921
9785
|
}
|
9922
9786
|
|
9923
|
-
.c4p--
|
9787
|
+
.c4p--edit-in-place--invalid {
|
9788
|
+
outline: 2px solid var(--cds-support-error, #da1e28);
|
9789
|
+
}
|
9790
|
+
|
9791
|
+
.c4p--edit-in-place--focused {
|
9924
9792
|
background: var(--cds-field-01, #f4f4f4);
|
9925
9793
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
9926
9794
|
}
|
9927
9795
|
|
9928
|
-
.c4p--
|
9796
|
+
.c4p--edit-in-place__text-input {
|
9929
9797
|
flex: 1;
|
9930
9798
|
}
|
9931
9799
|
|
9932
|
-
.c4p--
|
9800
|
+
.c4p--edit-in-place--inherit-type .c4p--edit-in-place__text-input {
|
9801
|
+
/* match font of container */
|
9802
|
+
font-size: inherit;
|
9803
|
+
font-weight: inherit;
|
9804
|
+
letter-spacing: inherit;
|
9805
|
+
line-height: inherit;
|
9806
|
+
}
|
9807
|
+
|
9808
|
+
.c4p--edit-in-place__ellipsis {
|
9809
|
+
position: relative;
|
9810
|
+
margin-left: -1rem;
|
9811
|
+
opacity: 0;
|
9812
|
+
}
|
9813
|
+
|
9814
|
+
.c4p--edit-in-place--overflows:not(.c4p--edit-in-place--focused) .c4p--edit-in-place__ellipsis {
|
9815
|
+
opacity: 1;
|
9816
|
+
}
|
9817
|
+
|
9818
|
+
.c4p--edit-in-place__text-input-label {
|
9933
9819
|
display: none;
|
9934
9820
|
}
|
9935
9821
|
|
9936
|
-
.c4p--
|
9937
|
-
|
9822
|
+
.c4p--edit-in-place__warning-icon {
|
9823
|
+
width: 1rem;
|
9824
|
+
margin: auto 0.5rem;
|
9938
9825
|
color: var(--cds-support-error, #da1e28);
|
9939
9826
|
}
|
9940
9827
|
|
9941
|
-
.c4p--
|
9828
|
+
.c4p--edit-in-place__warning-text {
|
9942
9829
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
9943
9830
|
font-weight: var(--cds-label-01-font-weight, 400);
|
9944
9831
|
line-height: var(--cds-label-01-line-height, 1.33333);
|
@@ -9947,34 +9834,30 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9947
9834
|
color: var(--cds-support-error, #da1e28);
|
9948
9835
|
}
|
9949
9836
|
|
9950
|
-
.c4p--
|
9837
|
+
.c4p--edit-in-place__text-input.cds--text-input {
|
9951
9838
|
border: none;
|
9952
9839
|
background: transparent;
|
9953
9840
|
cursor: pointer;
|
9954
9841
|
outline: none;
|
9955
9842
|
}
|
9956
9843
|
|
9957
|
-
.c4p--
|
9958
|
-
.c4p--
|
9959
|
-
cursor: not-allowed;
|
9960
|
-
}
|
9961
|
-
|
9962
|
-
.c4p--inline-edit-v2__text-input.cds--text-input:focus,
|
9963
|
-
.c4p--inline-edit-v2__text-input.cds--text-input:active {
|
9844
|
+
.c4p--edit-in-place__text-input.cds--text-input:focus,
|
9845
|
+
.c4p--edit-in-place__text-input.cds--text-input:active {
|
9964
9846
|
outline: none;
|
9965
9847
|
}
|
9966
9848
|
|
9967
|
-
.c4p--
|
9968
|
-
--toolbar-width:
|
9969
|
-
--toolbar-width-focussed:
|
9849
|
+
.c4p--edit-in-place__toolbar {
|
9850
|
+
--toolbar-width: var(--c4p--edit-in-place--size);
|
9851
|
+
--toolbar-width-focussed: calc(2 * var(--c4p--edit-in-place--size));
|
9970
9852
|
display: inline-flex;
|
9971
|
-
overflow: hidden;
|
9972
9853
|
width: var(--toolbar-width);
|
9973
9854
|
}
|
9974
9855
|
|
9975
|
-
.c4p--
|
9976
|
-
--toolbar-width: 2rem;
|
9977
|
-
--toolbar-width-focussed:
|
9856
|
+
.c4p--edit-in-place--invalid .c4p--edit-in-place__toolbar {
|
9857
|
+
--toolbar-width: calc(var(--c4p--edit-in-place--size) + 2rem);
|
9858
|
+
--toolbar-width-focussed: calc(
|
9859
|
+
2 * var(--c4p--edit-in-place--size) + 2rem
|
9860
|
+
);
|
9978
9861
|
}
|
9979
9862
|
|
9980
9863
|
@keyframes slide-in {
|
@@ -9991,7 +9874,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9991
9874
|
width: var(--toolbar-width-focussed);
|
9992
9875
|
}
|
9993
9876
|
}
|
9994
|
-
.c4p--
|
9877
|
+
.c4p--edit-in-place--focused .c4p--edit-in-place__toolbar {
|
9995
9878
|
overflow: initial;
|
9996
9879
|
width: var(--toolbar-width-focussed);
|
9997
9880
|
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
@@ -11336,13 +11219,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11336
11219
|
border-bottom: none;
|
11337
11220
|
}
|
11338
11221
|
|
11339
|
-
/*
|
11340
|
-
* Licensed Materials - Property of IBM
|
11341
|
-
* 5724-Q36
|
11342
|
-
* (c) Copyright IBM Corp. 2021
|
11343
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11344
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11345
|
-
*/
|
11346
11222
|
.c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
|
11347
11223
|
.c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
|
11348
11224
|
/* stylelint-disable-next-line declaration-no-important */
|
@@ -11363,6 +11239,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
11363
11239
|
margin-left: 0.125rem;
|
11364
11240
|
}
|
11365
11241
|
|
11242
|
+
.c4p--datagrid__select-all-toggle-overflow.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
|
11243
|
+
width: 10rem;
|
11244
|
+
}
|
11245
|
+
|
11366
11246
|
/*
|
11367
11247
|
* Licensed Materials - Property of IBM
|
11368
11248
|
* 5724-Q36
|