@carbon/ibm-products 2.0.0-rc.27 → 2.0.0-rc.29
Sign up to get free protection for your applications and to get access to all the features.
- package/css/config.css +3 -0
- package/css/config.css.map +1 -0
- package/css/index-full-carbon.css +126 -355
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +6 -6
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +196 -252
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +4 -4
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +126 -355
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +6 -6
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +126 -355
- package/css/index.css.map +1 -1
- package/css/index.min.css +6 -6
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.js +44 -66
- package/es/components/ActionBar/ActionBar.js +13 -29
- package/es/components/AddSelect/AddSelectBody.js +4 -2
- package/es/components/AddSelect/AddSelectColumn.js +11 -5
- package/es/components/AddSelect/AddSelectFilter.js +5 -4
- package/es/components/AddSelect/AddSelectRow.js +3 -3
- package/es/components/AddSelect/AddSelectSort.js +2 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +15 -21
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +7 -8
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- 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 +8 -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/index.js +1 -0
- package/es/components/Datagrid/useEditableCell.js +13 -0
- package/es/components/Datagrid/useFiltering.js +4 -2
- package/es/components/Datagrid/useInlineEdit.js +16 -11
- 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/ExampleComponent/ExampleDeprecatedComponent.js +24 -0
- package/es/components/PageHeader/PageHeader.js +36 -35
- package/es/components/PageHeader/PageHeaderTitle.js +18 -18
- package/es/components/SidePanel/SidePanel.js +25 -26
- package/es/components/TagSet/TagSet.js +5 -7
- package/es/components/Tearsheet/Tearsheet.js +5 -0
- package/es/components/Tearsheet/TearsheetShell.js +4 -6
- package/es/components/index.js +1 -2
- 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 +4 -6
- package/es/settings.js +40 -20
- package/lib/components/AboutModal/AboutModal.js +43 -66
- package/lib/components/ActionBar/ActionBar.js +13 -29
- package/lib/components/AddSelect/AddSelectBody.js +4 -2
- package/lib/components/AddSelect/AddSelectColumn.js +11 -5
- package/lib/components/AddSelect/AddSelectFilter.js +4 -3
- package/lib/components/AddSelect/AddSelectRow.js +2 -2
- package/lib/components/AddSelect/AddSelectSort.js +2 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +13 -19
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
- 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 +8 -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/index.js +8 -0
- package/lib/components/Datagrid/useEditableCell.js +23 -0
- package/lib/components/Datagrid/useFiltering.js +4 -2
- package/lib/components/Datagrid/useInlineEdit.js +22 -11
- 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/ExampleComponent/ExampleDeprecatedComponent.js +38 -0
- package/lib/components/PageHeader/PageHeader.js +36 -35
- package/lib/components/PageHeader/PageHeaderTitle.js +19 -19
- package/lib/components/SidePanel/SidePanel.js +25 -26
- package/lib/components/TagSet/TagSet.js +5 -7
- package/lib/components/Tearsheet/Tearsheet.js +5 -0
- package/lib/components/Tearsheet/TearsheetShell.js +4 -6
- package/lib/components/index.js +7 -15
- 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 +4 -6
- package/lib/settings.js +43 -21
- package/package.json +3 -4
- package/scss/components/AboutModal/_about-modal.scss +34 -53
- package/scss/components/AboutModal/_storybook-styles.scss +10 -4
- package/scss/components/AddSelect/_add-select.scss +7 -3
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
- 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/PageHeader/_page-header.scss +1 -7
- 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 -3
- package/scss/components/_index.scss +1 -3
- package/scss/config.scss +1 -0
- 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/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
- package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
- package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
- package/es/components/ModifiedTabs/index.js +0 -1
- 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/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
- package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
- package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
- package/lib/components/ModifiedTabs/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/ModifiedTabs/_carbon-imports.scss +0 -10
- package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
- package/scss/components/ModifiedTabs/_index.scss +0 -8
- package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
- package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
- /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
@@ -842,61 +842,66 @@
|
|
842
842
|
}
|
843
843
|
|
844
844
|
.c4p--about-modal .c4p--about-modal__logo {
|
845
|
-
margin: 1rem;
|
845
|
+
margin: 1rem 1rem 2rem 1rem;
|
846
846
|
}
|
847
847
|
|
848
848
|
.c4p--about-modal .c4p--about-modal__header {
|
849
|
-
padding: 0 20% 0
|
849
|
+
padding: 0 20% 0 1rem;
|
850
850
|
margin-bottom: 0;
|
851
851
|
grid-row: auto;
|
852
852
|
}
|
853
853
|
|
854
854
|
.c4p--about-modal .c4p--about-modal__title {
|
855
|
-
font-size: var(--cds-
|
856
|
-
font-weight: var(--cds-
|
857
|
-
line-height: var(--cds-
|
858
|
-
letter-spacing: var(--cds-
|
855
|
+
font-size: var(--cds-heading-04-font-size, 1.75rem);
|
856
|
+
font-weight: var(--cds-heading-04-font-weight, 400);
|
857
|
+
line-height: var(--cds-heading-04-line-height, 1.28572);
|
858
|
+
letter-spacing: var(--cds-heading-04-letter-spacing, 0);
|
859
859
|
color: var(--cds-text-primary, #161616);
|
860
860
|
}
|
861
861
|
|
862
862
|
.c4p--about-modal .c4p--about-modal__body {
|
863
|
-
font-size: var(--cds-body-
|
864
|
-
font-weight: var(--cds-body-
|
865
|
-
line-height: var(--cds-body-
|
866
|
-
letter-spacing: var(--cds-body-
|
863
|
+
font-size: var(--cds-body-compact-02-font-size, 1rem);
|
864
|
+
font-weight: var(--cds-body-compact-02-font-weight, 400);
|
865
|
+
line-height: var(--cds-body-compact-02-line-height, 1.375);
|
866
|
+
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
|
867
867
|
min-height: 4rem;
|
868
868
|
padding: 0 20% 0 1rem;
|
869
|
+
margin-bottom: 1.5rem;
|
869
870
|
grid-row: auto;
|
870
871
|
overflow-x: hidden;
|
871
872
|
overflow-y: auto;
|
872
873
|
}
|
873
874
|
|
874
|
-
.c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
|
875
|
-
min-height: calc(4rem + 2.5rem);
|
876
|
-
margin-bottom: calc(3rem + 2.5rem);
|
877
|
-
}
|
878
|
-
|
879
|
-
.c4p--about-modal.c4p--about-modal--with-tabs .cds--modal-content--overflow-indicator {
|
880
|
-
bottom: calc(3rem + 2.5rem);
|
881
|
-
}
|
882
|
-
|
883
875
|
.c4p--about-modal .cds--modal-content--overflow-indicator {
|
876
|
+
bottom: 1.5rem;
|
884
877
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
|
885
878
|
}
|
886
879
|
|
887
880
|
.c4p--about-modal .c4p--about-modal__links-container {
|
888
|
-
|
881
|
+
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
882
|
+
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
883
|
+
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
884
|
+
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
885
|
+
margin-top: 1.5rem;
|
886
|
+
}
|
887
|
+
|
888
|
+
.c4p--about-modal .c4p--about-modal__version {
|
889
|
+
color: var(--cds-text-secondary, #525252);
|
889
890
|
}
|
890
891
|
|
891
892
|
.c4p--about-modal .c4p--about-modal__links-container a + a {
|
892
893
|
padding-left: 0.5rem;
|
893
|
-
border-left: 1px solid var(--cds-
|
894
|
+
border-left: 1px solid var(--cds-border-strong-01, #8d8d8d);
|
894
895
|
margin-left: 0.5rem;
|
895
896
|
}
|
896
897
|
|
897
|
-
.c4p--about-modal .c4p--about-
|
898
|
+
.c4p--about-modal .c4p--about-modal__content,
|
898
899
|
.c4p--about-modal .c4p--about-modal__copyright-text {
|
899
|
-
|
900
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
901
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
902
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
903
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
904
|
+
margin-top: 1.5rem;
|
900
905
|
margin-bottom: 0;
|
901
906
|
color: var(--cds-text-secondary, #525252);
|
902
907
|
}
|
@@ -905,51 +910,33 @@
|
|
905
910
|
margin-top: 1rem;
|
906
911
|
}
|
907
912
|
|
913
|
+
p.c4p--about-modal__content:first-child,
|
914
|
+
p.c4p--about-modal__copyright-text:first-child {
|
915
|
+
margin-top: 2rem;
|
916
|
+
}
|
917
|
+
|
908
918
|
.c4p--about-modal .c4p--about-modal__footer {
|
909
919
|
position: relative;
|
910
|
-
height:
|
920
|
+
height: calc(
|
921
|
+
1rem + 0.25rem + 1.5rem + 2rem
|
922
|
+
);
|
911
923
|
flex-direction: column;
|
912
924
|
justify-content: center;
|
913
|
-
background-color: var(--cds-
|
914
|
-
color: var(--cds-text-inverse, #ffffff);
|
915
|
-
}
|
916
|
-
|
917
|
-
.c4p--about-modal .c4p--about-modal__tab-container {
|
918
|
-
position: absolute;
|
919
|
-
bottom: 0;
|
920
|
-
}
|
921
|
-
|
922
|
-
.c4p--about-modal .c4p--about-modal__version-label,
|
923
|
-
.c4p--about-modal .c4p--about-modal__version-number {
|
924
|
-
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
925
|
-
font-weight: var(--cds-body-short-01-font-weight, 400);
|
926
|
-
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
927
|
-
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
928
|
-
padding-left: 1rem;
|
929
|
-
margin-top: 0;
|
930
|
-
margin-bottom: 0;
|
931
|
-
color: var(--cds-text-inverse, #ffffff);
|
932
|
-
}
|
933
|
-
|
934
|
-
.c4p--about-modal .c4p--about-modal__version-label {
|
935
|
-
font-weight: 600;
|
936
|
-
}
|
937
|
-
|
938
|
-
.c4p--about-modal .cds--tabs .cds--tabs__nav-link,
|
939
|
-
.c4p--about-modal .cds--tab-content {
|
940
|
-
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
941
|
-
font-weight: var(--cds-body-short-01-font-weight, 400);
|
942
|
-
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
943
|
-
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
925
|
+
background-color: var(--cds-layer-02, #ffffff);
|
944
926
|
}
|
945
927
|
|
946
|
-
.c4p--about-modal .
|
947
|
-
|
928
|
+
.c4p--about-modal .c4p--about-modal__footer-label {
|
929
|
+
font-size: var(--cds-label-01-font-size, 0.75rem);
|
930
|
+
font-weight: var(--cds-label-01-font-weight, 400);
|
931
|
+
line-height: var(--cds-label-01-line-height, 1.33333);
|
932
|
+
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
933
|
+
padding: 1rem 0 0 1rem;
|
934
|
+
margin-bottom: 0.25rem;
|
935
|
+
color: var(--cds-text-secondary, #525252);
|
948
936
|
}
|
949
937
|
|
950
|
-
.c4p--about-modal .
|
951
|
-
|
952
|
-
align-items: center;
|
938
|
+
.c4p--about-modal .c4p--about-modal__footer-content {
|
939
|
+
padding: 0 0 1rem 1rem;
|
953
940
|
}
|
954
941
|
|
955
942
|
.c4p--action-set {
|
@@ -4215,76 +4202,6 @@ c4p--card__icon:active {
|
|
4215
4202
|
background: var(--cds-layer-02, #ffffff);
|
4216
4203
|
}
|
4217
4204
|
|
4218
|
-
.c4p--modified-tabs .c4p--modified-tabs__tab-label {
|
4219
|
-
display: flex;
|
4220
|
-
width: 100%;
|
4221
|
-
align-items: flex-end;
|
4222
|
-
justify-content: space-between;
|
4223
|
-
}
|
4224
|
-
|
4225
|
-
.c4p--modified-tabs__tab-new,
|
4226
|
-
.c4p--modified-tabs__tab {
|
4227
|
-
position: relative;
|
4228
|
-
display: inline-block;
|
4229
|
-
width: 100%;
|
4230
|
-
height: 100%;
|
4231
|
-
}
|
4232
|
-
|
4233
|
-
.c4p--modified-tabs__tab-new-img,
|
4234
|
-
.c4p--modified-tabs__tab-close {
|
4235
|
-
position: absolute;
|
4236
|
-
top: -0.75rem;
|
4237
|
-
right: -1rem;
|
4238
|
-
overflow: hidden;
|
4239
|
-
width: 2.5rem;
|
4240
|
-
height: 2.5rem;
|
4241
|
-
padding: 0.75rem;
|
4242
|
-
border: 0.125rem solid transparent;
|
4243
|
-
background-color: transparent;
|
4244
|
-
border-radius: 0;
|
4245
|
-
cursor: pointer;
|
4246
|
-
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
4247
|
-
}
|
4248
|
-
@media (prefers-reduced-motion: reduce) {
|
4249
|
-
.c4p--modified-tabs__tab-new-img,
|
4250
|
-
.c4p--modified-tabs__tab-close {
|
4251
|
-
transition: none;
|
4252
|
-
}
|
4253
|
-
}
|
4254
|
-
|
4255
|
-
.c4p--modified-tabs__tab-new-icon {
|
4256
|
-
display: flex;
|
4257
|
-
align-items: center;
|
4258
|
-
justify-content: center;
|
4259
|
-
padding: 0;
|
4260
|
-
margin-top: 0.125rem;
|
4261
|
-
}
|
4262
|
-
|
4263
|
-
.c4p--modified-tabs__tab-close:focus {
|
4264
|
-
border-color: var(--cds-button-primary, #0f62fe);
|
4265
|
-
outline: none;
|
4266
|
-
}
|
4267
|
-
|
4268
|
-
.c4p--modified-tabs__tab-close:hover {
|
4269
|
-
background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
4270
|
-
}
|
4271
|
-
|
4272
|
-
.c4p--modified-tabs__tab-new-img {
|
4273
|
-
display: flex;
|
4274
|
-
align-items: center;
|
4275
|
-
justify-content: center;
|
4276
|
-
padding: 0;
|
4277
|
-
}
|
4278
|
-
|
4279
|
-
.c4p--modified-tabs .cds--tabs__nav-item.cds--tabs__nav-link {
|
4280
|
-
width: 10rem;
|
4281
|
-
}
|
4282
|
-
|
4283
|
-
.c4p--modified-tabs .cds--tab--overflow-nav-button--previous,
|
4284
|
-
.c4p--modified-tabs .cds--tab--overflow-nav-button--next {
|
4285
|
-
z-index: 2;
|
4286
|
-
}
|
4287
|
-
|
4288
4205
|
.c4p--add-select__header {
|
4289
4206
|
padding: 1rem;
|
4290
4207
|
padding-bottom: 0;
|
@@ -4500,6 +4417,10 @@ c4p--card__icon:active {
|
|
4500
4417
|
border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
|
4501
4418
|
}
|
4502
4419
|
|
4420
|
+
.c4p--add-select-sort_overflow {
|
4421
|
+
z-index: 9999;
|
4422
|
+
}
|
4423
|
+
|
4503
4424
|
.c4p--add-select__tags {
|
4504
4425
|
display: flex;
|
4505
4426
|
align-items: center;
|
@@ -4512,7 +4433,7 @@ c4p--card__icon:active {
|
|
4512
4433
|
|
4513
4434
|
.c4p--add-select__global-filter {
|
4514
4435
|
position: absolute;
|
4515
|
-
z-index:
|
4436
|
+
z-index: 999999;
|
4516
4437
|
right: 0;
|
4517
4438
|
width: 100%;
|
4518
4439
|
max-width: 40rem;
|
@@ -4676,8 +4597,8 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4676
4597
|
margin-top: 0.5rem;
|
4677
4598
|
}
|
4678
4599
|
|
4679
|
-
.c4p--add-select .cds--tooltip,
|
4680
|
-
.c4p--add-select .cds--overflow-menu-options {
|
4600
|
+
.c4p--add-select + div .cds--tooltip,
|
4601
|
+
.c4p--add-select + div .cds--overflow-menu-options {
|
4681
4602
|
z-index: 9000;
|
4682
4603
|
}
|
4683
4604
|
|
@@ -7040,6 +6961,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7040
6961
|
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
|
7041
6962
|
display: none;
|
7042
6963
|
}
|
6964
|
+
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn {
|
6965
|
+
min-height: revert;
|
6966
|
+
padding: 0;
|
6967
|
+
}
|
6968
|
+
.c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn--ghost:hover {
|
6969
|
+
background-color: inherit;
|
6970
|
+
}
|
7043
6971
|
@media (max-width: 41.98rem) {
|
7044
6972
|
.c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
|
7045
6973
|
display: none;
|
@@ -7490,7 +7418,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7490
7418
|
white-space: nowrap;
|
7491
7419
|
}
|
7492
7420
|
.c4p--page-header .c4p--page-header__title-row {
|
7493
|
-
margin-top: 0;
|
7421
|
+
margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
|
7494
7422
|
margin-bottom: 0;
|
7495
7423
|
transform: translateY(0.125rem);
|
7496
7424
|
}
|
@@ -7550,9 +7478,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7550
7478
|
text-overflow: ellipsis;
|
7551
7479
|
white-space: nowrap;
|
7552
7480
|
}
|
7553
|
-
.c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
|
7554
|
-
transform: translateY(-2px);
|
7555
|
-
}
|
7556
7481
|
.c4p--page-header .c4p--page-header__title--editable {
|
7557
7482
|
display: flex;
|
7558
7483
|
overflow: visible;
|
@@ -9742,233 +9667,86 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9742
9667
|
transition: none;
|
9743
9668
|
}
|
9744
9669
|
}
|
9745
|
-
.c4p--
|
9746
|
-
--c4p--
|
9747
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9748
|
-
--c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
|
9749
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
9750
|
-
position: relative;
|
9751
|
-
display: inline-block;
|
9752
|
-
min-width: calc(4 * var(--c4p--inline-edit--size));
|
9753
|
-
max-width: 100%;
|
9754
|
-
height: var(--c4p--inline-edit--size);
|
9755
|
-
background-color: var(--c4p--inline-edit--background-color);
|
9756
|
-
cursor: text;
|
9757
|
-
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);
|
9758
|
-
vertical-align: middle;
|
9759
|
-
white-space: nowrap;
|
9760
|
-
}
|
9761
|
-
.c4p--inline-edit.c4p--inline-edit--light {
|
9762
|
-
--c4p--inline-edit--background-color: transparent;
|
9763
|
-
}
|
9764
|
-
.c4p--inline-edit:hover {
|
9765
|
-
--c4p--inline-edit--background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
|
9766
|
-
}
|
9767
|
-
.c4p--inline-edit.c4p--inline-edit--sm {
|
9768
|
-
--c4p--inline-edit--size: 2rem;
|
9769
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9770
|
-
}
|
9771
|
-
.c4p--inline-edit.c4p--inline-edit--lg {
|
9772
|
-
--c4p--inline-edit--size: 3rem;
|
9773
|
-
--c4p--inline-edit--icon-size: 1rem;
|
9774
|
-
}
|
9775
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
9776
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
9777
|
-
outline: 0.125rem solid var(--cds-support-error, #da1e28);
|
9778
|
-
outline-offset: calc(-1 * 0.125rem);
|
9779
|
-
}
|
9780
|
-
@media screen and (prefers-contrast) {
|
9781
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
9782
|
-
outline-style: dotted;
|
9783
|
-
}
|
9784
|
-
}
|
9785
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
9786
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
9787
|
-
outline: 0.125rem solid var(--cds-focus, #0f62fe);
|
9788
|
-
outline-offset: calc(-1 * 0.125rem);
|
9789
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
9790
|
-
}
|
9791
|
-
@media screen and (prefers-contrast) {
|
9792
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
9793
|
-
outline-style: dotted;
|
9794
|
-
}
|
9795
|
-
}
|
9796
|
-
.c4p--inline-edit .c4p--inline-edit__input {
|
9797
|
-
display: inline-block;
|
9798
|
-
overflow: hidden;
|
9799
|
-
width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
|
9800
|
-
max-width: calc(
|
9801
|
-
100% - var(--c4p--inline-edit--toolbar-width) - 1rem
|
9802
|
-
);
|
9803
|
-
min-height: var(--c4p--inline-edit--size);
|
9804
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
9805
|
-
margin-right: var(--c4p--inline-edit--toolbar-width);
|
9806
|
-
margin-left: 1rem;
|
9807
|
-
color: var(--cds-text-primary, #161616);
|
9808
|
-
font-family: inherit;
|
9809
|
-
line-height: var(--c4p--inline-edit--size);
|
9810
|
-
}
|
9811
|
-
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
9812
|
-
outline: none;
|
9813
|
-
}
|
9814
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
9815
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9816
|
-
}
|
9817
|
-
.c4p--inline-edit .c4p--inline-edit__input::after {
|
9818
|
-
position: absolute;
|
9819
|
-
top: 0;
|
9820
|
-
left: 0;
|
9821
|
-
display: block;
|
9822
|
-
overflow: hidden;
|
9823
|
-
width: 0;
|
9824
|
-
margin-left: 1rem;
|
9825
|
-
color: var(--cds-text-helper, #6f6f6f);
|
9826
|
-
content: attr(data-placeholder);
|
9827
|
-
opacity: 0;
|
9828
|
-
visibility: hidden;
|
9829
|
-
}
|
9830
|
-
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
9831
|
-
display: inline-block;
|
9832
|
-
overflow: hidden;
|
9833
|
-
width: 0;
|
9834
|
-
height: var(--c4p--inline-edit--size);
|
9835
|
-
line-height: var(--c4p--inline-edit--size);
|
9836
|
-
opacity: 0;
|
9837
|
-
pointer-events: none;
|
9838
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9839
|
-
}
|
9840
|
-
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
9841
|
-
width: initial;
|
9842
|
-
opacity: 1;
|
9843
|
-
}
|
9844
|
-
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
9845
|
-
position: absolute;
|
9846
|
-
top: 0;
|
9847
|
-
left: 0;
|
9848
|
-
width: 100%;
|
9849
|
-
height: 100%;
|
9850
|
-
pointer-events: none;
|
9851
|
-
}
|
9852
|
-
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
9853
|
-
cursor: not-allowed;
|
9854
|
-
pointer-events: all;
|
9855
|
-
}
|
9856
|
-
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
9857
|
-
width: initial;
|
9858
|
-
opacity: 1;
|
9859
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9860
|
-
visibility: visible;
|
9861
|
-
}
|
9862
|
-
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
9863
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
9864
|
-
position: absolute;
|
9865
|
-
top: 0;
|
9866
|
-
right: 0;
|
9867
|
-
display: flex;
|
9868
|
-
height: 100%;
|
9869
|
-
justify-content: space-between;
|
9870
|
-
cursor: text;
|
9871
|
-
}
|
9872
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
9873
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9874
|
-
}
|
9875
|
-
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
9670
|
+
.c4p--edit-in-place {
|
9671
|
+
--c4p--edit-in-place--size: 2rem;
|
9876
9672
|
display: flex;
|
9877
9673
|
align-items: center;
|
9674
|
+
background: transparent;
|
9675
|
+
cursor: pointer;
|
9878
9676
|
}
|
9879
|
-
|
9880
|
-
|
9881
|
-
|
9882
|
-
left: 0;
|
9883
|
-
display: block;
|
9884
|
-
width: 100%;
|
9885
|
-
height: 100%;
|
9886
|
-
box-sizing: border-box;
|
9887
|
-
border: 2px solid var(--cds-focus, #0f62fe);
|
9888
|
-
border-left: 0;
|
9889
|
-
content: "";
|
9890
|
-
pointer-events: none;
|
9891
|
-
}
|
9892
|
-
.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 {
|
9893
|
-
display: inline-flex;
|
9894
|
-
}
|
9895
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9896
|
-
width: var(--c4p--inline-edit--edit-size);
|
9897
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9898
|
-
transition-property: margin, padding;
|
9899
|
-
}
|
9900
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9901
|
-
width: 0;
|
9902
|
-
padding: 0;
|
9903
|
-
border-right: 0;
|
9904
|
-
border-left: 0;
|
9905
|
-
}
|
9906
|
-
@media (hover: hover) {
|
9907
|
-
.c4p--inline-edit .c4p--inline-edit__edit {
|
9908
|
-
opacity: 0;
|
9909
|
-
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
9910
|
-
}
|
9911
|
-
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
9912
|
-
opacity: 1;
|
9913
|
-
}
|
9914
|
-
}
|
9915
|
-
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
9916
|
-
opacity: 1;
|
9917
|
-
}
|
9918
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
9919
|
-
color: var(--cds-support-error, #da1e28);
|
9920
|
-
}
|
9921
|
-
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
9922
|
-
display: block;
|
9923
|
-
overflow: visible;
|
9924
|
-
margin-left: 1rem;
|
9677
|
+
|
9678
|
+
.c4p--edit-in-place--sm {
|
9679
|
+
--c4p--edit-in-place--size: 2rem;
|
9925
9680
|
}
|
9926
|
-
|
9927
|
-
|
9681
|
+
|
9682
|
+
.c4p--edit-in-place--md {
|
9683
|
+
--c4p--edit-in-place--size: 2.5rem;
|
9928
9684
|
}
|
9929
9685
|
|
9930
|
-
.c4p--
|
9931
|
-
|
9932
|
-
|
9933
|
-
background: transparent;
|
9934
|
-
cursor: pointer;
|
9686
|
+
.c4p--edit-in-place--lg {
|
9687
|
+
/* April 2023 max text input size */
|
9688
|
+
--c4p--edit-in-place--size: 3rem;
|
9935
9689
|
}
|
9936
9690
|
|
9937
|
-
.c4p--
|
9691
|
+
.c4p--edit-in-place--readonly {
|
9938
9692
|
cursor: not-allowed;
|
9939
9693
|
}
|
9940
9694
|
|
9941
|
-
.c4p--
|
9695
|
+
.c4p--edit-in-place:hover {
|
9942
9696
|
background: var(--cds-field-01, #f4f4f4);
|
9943
9697
|
}
|
9944
9698
|
|
9945
|
-
.c4p--
|
9699
|
+
.c4p--edit-in-place:hover .c4p--edit-in-place__btn-edit,
|
9700
|
+
.c4p--edit-in-place__btn-edit.c4p--edit-in-place__btn-edit--always-visible {
|
9946
9701
|
visibility: visible;
|
9947
9702
|
}
|
9948
9703
|
|
9949
|
-
.c4p--
|
9704
|
+
.c4p--edit-in-place__btn-edit {
|
9950
9705
|
visibility: hidden;
|
9951
9706
|
}
|
9952
9707
|
|
9953
|
-
.c4p--
|
9708
|
+
.c4p--edit-in-place--invalid {
|
9709
|
+
outline: 2px solid var(--cds-support-error, #da1e28);
|
9710
|
+
}
|
9711
|
+
|
9712
|
+
.c4p--edit-in-place--focused {
|
9954
9713
|
background: var(--cds-field-01, #f4f4f4);
|
9955
9714
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
9956
9715
|
}
|
9957
9716
|
|
9958
|
-
.c4p--
|
9717
|
+
.c4p--edit-in-place__text-input {
|
9959
9718
|
flex: 1;
|
9960
9719
|
}
|
9961
9720
|
|
9962
|
-
.c4p--
|
9721
|
+
.c4p--edit-in-place--inherit-type .c4p--edit-in-place__text-input {
|
9722
|
+
/* match font of container */
|
9723
|
+
font-size: inherit;
|
9724
|
+
font-weight: inherit;
|
9725
|
+
letter-spacing: inherit;
|
9726
|
+
line-height: inherit;
|
9727
|
+
}
|
9728
|
+
|
9729
|
+
.c4p--edit-in-place__ellipsis {
|
9730
|
+
position: relative;
|
9731
|
+
margin-left: -1rem;
|
9732
|
+
opacity: 0;
|
9733
|
+
}
|
9734
|
+
|
9735
|
+
.c4p--edit-in-place--overflows:not(.c4p--edit-in-place--focused) .c4p--edit-in-place__ellipsis {
|
9736
|
+
opacity: 1;
|
9737
|
+
}
|
9738
|
+
|
9739
|
+
.c4p--edit-in-place__text-input-label {
|
9963
9740
|
display: none;
|
9964
9741
|
}
|
9965
9742
|
|
9966
|
-
.c4p--
|
9967
|
-
|
9743
|
+
.c4p--edit-in-place__warning-icon {
|
9744
|
+
width: 1rem;
|
9745
|
+
margin: auto 0.5rem;
|
9968
9746
|
color: var(--cds-support-error, #da1e28);
|
9969
9747
|
}
|
9970
9748
|
|
9971
|
-
.c4p--
|
9749
|
+
.c4p--edit-in-place__warning-text {
|
9972
9750
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
9973
9751
|
font-weight: var(--cds-label-01-font-weight, 400);
|
9974
9752
|
line-height: var(--cds-label-01-line-height, 1.33333);
|
@@ -9977,34 +9755,30 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9977
9755
|
color: var(--cds-support-error, #da1e28);
|
9978
9756
|
}
|
9979
9757
|
|
9980
|
-
.c4p--
|
9758
|
+
.c4p--edit-in-place__text-input.cds--text-input {
|
9981
9759
|
border: none;
|
9982
9760
|
background: transparent;
|
9983
9761
|
cursor: pointer;
|
9984
9762
|
outline: none;
|
9985
9763
|
}
|
9986
9764
|
|
9987
|
-
.c4p--
|
9988
|
-
.c4p--
|
9989
|
-
cursor: not-allowed;
|
9990
|
-
}
|
9991
|
-
|
9992
|
-
.c4p--inline-edit-v2__text-input.cds--text-input:focus,
|
9993
|
-
.c4p--inline-edit-v2__text-input.cds--text-input:active {
|
9765
|
+
.c4p--edit-in-place__text-input.cds--text-input:focus,
|
9766
|
+
.c4p--edit-in-place__text-input.cds--text-input:active {
|
9994
9767
|
outline: none;
|
9995
9768
|
}
|
9996
9769
|
|
9997
|
-
.c4p--
|
9998
|
-
--toolbar-width:
|
9999
|
-
--toolbar-width-focussed:
|
9770
|
+
.c4p--edit-in-place__toolbar {
|
9771
|
+
--toolbar-width: var(--c4p--edit-in-place--size);
|
9772
|
+
--toolbar-width-focussed: calc(2 * var(--c4p--edit-in-place--size));
|
10000
9773
|
display: inline-flex;
|
10001
|
-
overflow: hidden;
|
10002
9774
|
width: var(--toolbar-width);
|
10003
9775
|
}
|
10004
9776
|
|
10005
|
-
.c4p--
|
10006
|
-
--toolbar-width: 2rem;
|
10007
|
-
--toolbar-width-focussed:
|
9777
|
+
.c4p--edit-in-place--invalid .c4p--edit-in-place__toolbar {
|
9778
|
+
--toolbar-width: calc(var(--c4p--edit-in-place--size) + 2rem);
|
9779
|
+
--toolbar-width-focussed: calc(
|
9780
|
+
2 * var(--c4p--edit-in-place--size) + 2rem
|
9781
|
+
);
|
10008
9782
|
}
|
10009
9783
|
|
10010
9784
|
@keyframes slide-in {
|
@@ -10021,7 +9795,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10021
9795
|
width: var(--toolbar-width-focussed);
|
10022
9796
|
}
|
10023
9797
|
}
|
10024
|
-
.c4p--
|
9798
|
+
.c4p--edit-in-place--focused .c4p--edit-in-place__toolbar {
|
10025
9799
|
overflow: initial;
|
10026
9800
|
width: var(--toolbar-width-focussed);
|
10027
9801
|
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
@@ -10265,7 +10039,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10265
10039
|
.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
|
10266
10040
|
.c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
|
10267
10041
|
background-color: var(--cds-background-inverse, #393939);
|
10268
|
-
color: var(--cds-text-
|
10042
|
+
color: var(--cds-text-inverse, #ffffff);
|
10269
10043
|
/* stylelint-disable-next-line max-nesting-depth */
|
10270
10044
|
}
|
10271
10045
|
.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
|
@@ -11366,13 +11140,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11366
11140
|
border-bottom: none;
|
11367
11141
|
}
|
11368
11142
|
|
11369
|
-
/*
|
11370
|
-
* Licensed Materials - Property of IBM
|
11371
|
-
* 5724-Q36
|
11372
|
-
* (c) Copyright IBM Corp. 2021
|
11373
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11374
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11375
|
-
*/
|
11376
11143
|
.c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
|
11377
11144
|
.c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
|
11378
11145
|
/* stylelint-disable-next-line declaration-no-important */
|
@@ -11393,6 +11160,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
11393
11160
|
margin-left: 0.125rem;
|
11394
11161
|
}
|
11395
11162
|
|
11163
|
+
.c4p--datagrid__select-all-toggle-overflow.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
|
11164
|
+
width: 10rem;
|
11165
|
+
}
|
11166
|
+
|
11396
11167
|
/*
|
11397
11168
|
* Licensed Materials - Property of IBM
|
11398
11169
|
* 5724-Q36
|