@carbon/ibm-products 2.1.2 → 2.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +562 -189
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +151 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +320 -18
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +231 -94
- 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/APIKeyModal/APIKeyModal.docs-page.js +26 -0
- package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
- package/es/components/AboutModal/AboutModal.js +1 -1
- package/es/components/Cascade/Cascade.docs-page.js +22 -0
- package/es/components/Cascade/Cascade.js +11 -1
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
- package/es/components/CreateFullPage/CreateFullPage.js +13 -0
- package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
- package/es/components/CreateModal/CreateModal.js +7 -0
- package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
- package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +19 -17
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
- package/es/components/EditFullPage/EditFullPage.js +2 -1
- package/es/components/EditSidePanel/EditSidePanel.js +1 -1
- package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
- package/es/components/EditTearsheet/EditTearsheet.js +4 -0
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/es/components/EmptyStates/EmptyState.js +4 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
- package/es/components/ExportModal/ExportModal.js +4 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
- package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
- package/es/components/RemoveModal/RemoveModal.js +6 -0
- package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
- package/es/components/StatusIcon/StatusIcon.js +10 -0
- package/es/components/Tearsheet/TearsheetShell.js +7 -1
- package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
- package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
- package/es/components/UserProfileImage/UserProfileImage.js +1 -1
- package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
- package/es/components/WebTerminal/WebTerminal.js +4 -0
- package/es/global/js/utils/StoryDocsPage.js +218 -0
- package/es/global/js/utils/story-helper.js +107 -5
- package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
- package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
- package/lib/components/AboutModal/AboutModal.js +1 -1
- package/lib/components/Cascade/Cascade.docs-page.js +33 -0
- package/lib/components/Cascade/Cascade.js +11 -1
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
- package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
- package/lib/components/CreateModal/CreateModal.js +7 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +19 -17
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
- package/lib/components/EditFullPage/EditFullPage.js +2 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
- package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
- package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/lib/components/EmptyStates/EmptyState.js +4 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
- package/lib/components/ExportModal/ExportModal.js +4 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
- package/lib/components/RemoveModal/RemoveModal.js +6 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
- package/lib/components/StatusIcon/StatusIcon.js +10 -0
- package/lib/components/Tearsheet/TearsheetShell.js +7 -1
- package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
- package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
- package/lib/components/WebTerminal/WebTerminal.js +4 -0
- package/lib/global/js/utils/StoryDocsPage.js +225 -0
- package/lib/global/js/utils/story-helper.js +114 -6
- package/package.json +8 -8
- package/scss/components/Cascade/_storybook-styles.scss +3 -2
- package/scss/components/Datagrid/_storybook-styles.scss +1 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +14 -0
- package/scss/components/NotificationsPanel/_storybook-styles.scss +12 -0
- package/scss/components/PageHeader/_storybook-styles.scss +0 -18
- package/scss/components/WebTerminal/_storybook-styles.scss +7 -12
- package/scss/components/HTTPErrors/_storybook-styles.scss +0 -20
package/css/index.css
CHANGED
@@ -76,8 +76,6 @@
|
|
76
76
|
.cds--copy-btn {
|
77
77
|
position: relative;
|
78
78
|
display: flex;
|
79
|
-
width: 2.5rem;
|
80
|
-
height: 2.5rem;
|
81
79
|
align-items: center;
|
82
80
|
justify-content: center;
|
83
81
|
padding: 0;
|
@@ -487,11 +485,13 @@
|
|
487
485
|
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
488
486
|
}
|
489
487
|
|
488
|
+
.cds--btn > .cds--snippet__icon {
|
489
|
+
margin-block-start: 0;
|
490
|
+
}
|
491
|
+
|
490
492
|
.cds--copy-btn {
|
491
493
|
display: flex;
|
492
494
|
overflow: visible;
|
493
|
-
width: 2.5rem;
|
494
|
-
height: 2.5rem;
|
495
495
|
align-items: center;
|
496
496
|
justify-content: center;
|
497
497
|
padding: 0;
|
@@ -534,16 +534,13 @@
|
|
534
534
|
right: 0;
|
535
535
|
}
|
536
536
|
|
537
|
-
.cds--snippet--inline.cds--btn
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
.cds--snippet--inline.cds--btn--md {
|
543
|
-
min-height: 1.25rem;
|
537
|
+
.cds--snippet--inline.cds--btn {
|
538
|
+
width: initial;
|
539
|
+
height: 1.25rem;
|
540
|
+
padding-inline: 0;
|
544
541
|
}
|
545
542
|
|
546
|
-
.cds--snippet--inline.cds--btn--primary:hover {
|
543
|
+
.cds--snippet--inline.cds--btn.cds--btn--primary:hover {
|
547
544
|
color: var(--cds-text-primary, #161616);
|
548
545
|
}
|
549
546
|
|
@@ -552,12 +549,8 @@
|
|
552
549
|
right: 0.5rem;
|
553
550
|
}
|
554
551
|
|
555
|
-
.cds--snippet--multi .cds--copy-btn
|
552
|
+
.cds--snippet--multi .cds--copy-btn {
|
556
553
|
z-index: 10;
|
557
|
-
width: 2rem;
|
558
|
-
height: 2rem;
|
559
|
-
min-height: 2rem;
|
560
|
-
padding: 0;
|
561
554
|
}
|
562
555
|
|
563
556
|
.cds--snippet-btn--expand {
|
@@ -807,7 +800,167 @@
|
|
807
800
|
}
|
808
801
|
|
809
802
|
/* stylelint-enable */
|
803
|
+
:root {
|
804
|
+
--cds-layout-size-height-xs: 1.5rem;
|
805
|
+
--cds-layout-size-height-sm: 2rem;
|
806
|
+
--cds-layout-size-height-md: 2.5rem;
|
807
|
+
--cds-layout-size-height-lg: 3rem;
|
808
|
+
--cds-layout-size-height-xl: 4rem;
|
809
|
+
--cds-layout-size-height-2xl: 5rem;
|
810
|
+
--cds-layout-size-height-min: 0px;
|
811
|
+
--cds-layout-size-height-max: 999999999px;
|
812
|
+
--cds-layout-density-padding-inline-condensed: 0.5rem;
|
813
|
+
--cds-layout-density-padding-inline-normal: 1rem;
|
814
|
+
--cds-layout-density-padding-inline-min: 0px;
|
815
|
+
--cds-layout-density-padding-inline-max: 999999999px;
|
816
|
+
}
|
817
|
+
|
818
|
+
.cds--layout--size-xs {
|
819
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
|
820
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
821
|
+
}
|
822
|
+
|
823
|
+
.cds--layout-constraint--size\:default-xs {
|
824
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
|
825
|
+
}
|
826
|
+
|
827
|
+
.cds--layout-constraint--size\:min-xs {
|
828
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
|
829
|
+
}
|
830
|
+
|
831
|
+
.cds--layout-constraint--size\:max-xs {
|
832
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
|
833
|
+
}
|
834
|
+
|
835
|
+
.cds--layout--size-sm {
|
836
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
|
837
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
838
|
+
}
|
839
|
+
|
840
|
+
.cds--layout-constraint--size\:default-sm {
|
841
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
|
842
|
+
}
|
843
|
+
|
844
|
+
.cds--layout-constraint--size\:min-sm {
|
845
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
|
846
|
+
}
|
847
|
+
|
848
|
+
.cds--layout-constraint--size\:max-sm {
|
849
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
|
850
|
+
}
|
851
|
+
|
852
|
+
.cds--layout--size-md {
|
853
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
|
854
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
855
|
+
}
|
856
|
+
|
857
|
+
.cds--layout-constraint--size\:default-md {
|
858
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
|
859
|
+
}
|
860
|
+
|
861
|
+
.cds--layout-constraint--size\:min-md {
|
862
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
|
863
|
+
}
|
864
|
+
|
865
|
+
.cds--layout-constraint--size\:max-md {
|
866
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
|
867
|
+
}
|
868
|
+
|
869
|
+
.cds--layout--size-lg {
|
870
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
|
871
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
872
|
+
}
|
873
|
+
|
874
|
+
.cds--layout-constraint--size\:default-lg {
|
875
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
|
876
|
+
}
|
877
|
+
|
878
|
+
.cds--layout-constraint--size\:min-lg {
|
879
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
|
880
|
+
}
|
881
|
+
|
882
|
+
.cds--layout-constraint--size\:max-lg {
|
883
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
|
884
|
+
}
|
885
|
+
|
886
|
+
.cds--layout--size-xl {
|
887
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
|
888
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
889
|
+
}
|
890
|
+
|
891
|
+
.cds--layout-constraint--size\:default-xl {
|
892
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
|
893
|
+
}
|
894
|
+
|
895
|
+
.cds--layout-constraint--size\:min-xl {
|
896
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
|
897
|
+
}
|
898
|
+
|
899
|
+
.cds--layout-constraint--size\:max-xl {
|
900
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
|
901
|
+
}
|
902
|
+
|
903
|
+
.cds--layout--size-2xl {
|
904
|
+
--cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
|
905
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context);
|
906
|
+
}
|
907
|
+
|
908
|
+
.cds--layout-constraint--size\:default-2xl {
|
909
|
+
--cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
|
910
|
+
}
|
911
|
+
|
912
|
+
.cds--layout-constraint--size\:min-2xl {
|
913
|
+
--cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
|
914
|
+
}
|
915
|
+
|
916
|
+
.cds--layout-constraint--size\:max-2xl {
|
917
|
+
--cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
|
918
|
+
}
|
919
|
+
|
920
|
+
.cds--layout--density-condensed {
|
921
|
+
--cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
922
|
+
--cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
|
923
|
+
}
|
924
|
+
|
925
|
+
.cds--layout-constraint--density\:default-condensed {
|
926
|
+
--cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
|
927
|
+
}
|
928
|
+
|
929
|
+
.cds--layout-constraint--density\:min-condensed {
|
930
|
+
--cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
931
|
+
}
|
932
|
+
|
933
|
+
.cds--layout-constraint--density\:max-condensed {
|
934
|
+
--cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
|
935
|
+
}
|
936
|
+
|
937
|
+
.cds--layout--density-normal {
|
938
|
+
--cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
|
939
|
+
--cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
|
940
|
+
}
|
941
|
+
|
942
|
+
.cds--layout-constraint--density\:default-normal {
|
943
|
+
--cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
|
944
|
+
}
|
945
|
+
|
946
|
+
.cds--layout-constraint--density\:min-normal {
|
947
|
+
--cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
|
948
|
+
}
|
949
|
+
|
950
|
+
.cds--layout-constraint--density\:max-normal {
|
951
|
+
--cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
|
952
|
+
}
|
953
|
+
|
810
954
|
.cds--btn {
|
955
|
+
--cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
|
956
|
+
--cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
957
|
+
--temp-1lh: (
|
958
|
+
var(--cds-body-compact-01-line-height, 1.28572) * 1em
|
959
|
+
);
|
960
|
+
--temp-padding-block-max: calc(
|
961
|
+
(var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
|
962
|
+
0.0625rem
|
963
|
+
);
|
811
964
|
box-sizing: border-box;
|
812
965
|
padding: 0;
|
813
966
|
border: 0;
|
@@ -823,15 +976,16 @@
|
|
823
976
|
display: inline-flex;
|
824
977
|
width: max-content;
|
825
978
|
max-width: 20rem;
|
826
|
-
|
979
|
+
height: var(--cds-layout-size-height-local);
|
827
980
|
flex-shrink: 0;
|
828
|
-
align-items: center;
|
829
981
|
justify-content: space-between;
|
830
|
-
padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
|
831
982
|
margin: 0;
|
832
983
|
border-radius: 0;
|
833
984
|
cursor: pointer;
|
834
985
|
outline: none;
|
986
|
+
padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
987
|
+
padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
|
988
|
+
padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
835
989
|
text-align: left;
|
836
990
|
text-decoration: none;
|
837
991
|
transition: background 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), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
@@ -851,10 +1005,12 @@
|
|
851
1005
|
}
|
852
1006
|
.cds--btn .cds--btn__icon {
|
853
1007
|
position: absolute;
|
854
|
-
|
1008
|
+
top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
1009
|
+
right: var(--cds-layout-density-padding-inline-local);
|
855
1010
|
width: 1rem;
|
856
1011
|
height: 1rem;
|
857
1012
|
flex-shrink: 0;
|
1013
|
+
margin-block-start: 0.0625rem;
|
858
1014
|
}
|
859
1015
|
|
860
1016
|
.cds--btn::-moz-focus-inner {
|
@@ -957,7 +1113,7 @@
|
|
957
1113
|
border-color: transparent;
|
958
1114
|
background-color: transparent;
|
959
1115
|
color: var(--cds-link-primary, #0f62fe);
|
960
|
-
padding: calc(
|
1116
|
+
padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
961
1117
|
}
|
962
1118
|
.cds--btn--ghost:hover {
|
963
1119
|
background-color: var(--cds-layer-hover);
|
@@ -989,19 +1145,19 @@
|
|
989
1145
|
color: var(--cds-text-on-color-disabled, #8d8d8d);
|
990
1146
|
outline: none;
|
991
1147
|
}
|
992
|
-
.cds--btn--ghost.cds--btn--sm {
|
993
|
-
padding: calc(0.375rem - 3px) 1rem;
|
994
|
-
}
|
995
|
-
.cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
|
996
|
-
padding: calc(0.675rem - 3px) 1rem;
|
997
|
-
}
|
998
1148
|
.cds--btn--ghost:not([disabled]) svg {
|
999
1149
|
fill: var(--cds-icon-primary, #161616);
|
1000
1150
|
}
|
1001
1151
|
|
1002
1152
|
.cds--btn--icon-only {
|
1003
|
-
|
1004
|
-
|
1153
|
+
width: var(--cds-layout-size-height-local);
|
1154
|
+
height: var(--cds-layout-size-height-local);
|
1155
|
+
justify-content: center;
|
1156
|
+
padding: 0;
|
1157
|
+
padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
|
1158
|
+
}
|
1159
|
+
.cds--btn--icon-only > :first-child {
|
1160
|
+
margin-block-start: 0.0625rem;
|
1005
1161
|
}
|
1006
1162
|
.cds--btn--icon-only .cds--btn__icon {
|
1007
1163
|
position: static;
|
@@ -1033,15 +1189,12 @@
|
|
1033
1189
|
cursor: not-allowed;
|
1034
1190
|
}
|
1035
1191
|
|
1036
|
-
.cds--
|
1037
|
-
|
1038
|
-
padding-right: 0.6875rem;
|
1039
|
-
padding-left: 0.6875rem;
|
1192
|
+
.cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
|
1193
|
+
cursor: not-allowed;
|
1040
1194
|
}
|
1041
1195
|
|
1042
|
-
.cds--
|
1043
|
-
|
1044
|
-
padding-left: 0.4375rem;
|
1196
|
+
.cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
|
1197
|
+
pointer-events: none;
|
1045
1198
|
}
|
1046
1199
|
|
1047
1200
|
.cds--btn--danger {
|
@@ -1113,7 +1266,7 @@
|
|
1113
1266
|
border-color: transparent;
|
1114
1267
|
background-color: transparent;
|
1115
1268
|
color: var(--cds-button-danger-secondary, #da1e28);
|
1116
|
-
padding: calc(
|
1269
|
+
padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
|
1117
1270
|
}
|
1118
1271
|
.cds--btn--danger--ghost:hover {
|
1119
1272
|
background-color: var(--cds-button-danger-hover, #b81921);
|
@@ -1142,46 +1295,12 @@
|
|
1142
1295
|
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
1143
1296
|
outline: none;
|
1144
1297
|
}
|
1145
|
-
.cds--btn--danger--ghost.cds--btn--sm {
|
1146
|
-
padding: calc(0.375rem - 3px) 1rem;
|
1147
|
-
}
|
1148
|
-
.cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
|
1149
|
-
padding: calc(0.675rem - 3px) 1rem;
|
1150
|
-
}
|
1151
|
-
|
1152
|
-
.cds--btn--sm {
|
1153
|
-
min-height: 2rem;
|
1154
|
-
padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
|
1155
|
-
}
|
1156
|
-
|
1157
|
-
.cds--btn--2xl:not(.cds--btn--icon-only) {
|
1158
|
-
align-items: baseline;
|
1159
|
-
padding-top: 1rem;
|
1160
|
-
padding-right: 4rem;
|
1161
|
-
padding-left: 1rem;
|
1162
|
-
min-height: 5rem;
|
1163
|
-
}
|
1164
|
-
|
1165
|
-
.cds--btn--xl:not(.cds--btn--icon-only) {
|
1166
|
-
align-items: baseline;
|
1167
|
-
padding-top: 1rem;
|
1168
|
-
padding-right: 4rem;
|
1169
|
-
padding-left: 1rem;
|
1170
|
-
min-height: 4rem;
|
1171
|
-
}
|
1172
|
-
|
1173
|
-
.cds--btn--field,
|
1174
|
-
.cds--btn--md {
|
1175
|
-
min-height: 2.5rem;
|
1176
|
-
padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
|
1177
|
-
}
|
1178
1298
|
|
1179
1299
|
.cds--btn--expressive {
|
1180
1300
|
font-size: var(--cds-body-compact-02-font-size, 1rem);
|
1181
1301
|
font-weight: var(--cds-body-compact-02-font-weight, 400);
|
1182
1302
|
line-height: var(--cds-body-compact-02-line-height, 1.375);
|
1183
1303
|
letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
|
1184
|
-
min-height: 3rem;
|
1185
1304
|
}
|
1186
1305
|
|
1187
1306
|
.cds--btn--icon-only.cds--btn--expressive {
|
@@ -1854,6 +1973,7 @@ input[data-invalid] ~ .cds--form-requirement,
|
|
1854
1973
|
.cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
|
1855
1974
|
.cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
|
1856
1975
|
.cds--time-picker--invalid ~ .cds--form-requirement,
|
1976
|
+
.cds--time-picker--warning ~ .cds--form-requirement,
|
1857
1977
|
.cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
|
1858
1978
|
.cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
|
1859
1979
|
.cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
|
@@ -1954,6 +2074,8 @@ fieldset[disabled] .cds--form__helper-text {
|
|
1954
2074
|
}
|
1955
2075
|
|
1956
2076
|
.cds--text-input {
|
2077
|
+
--cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
|
2078
|
+
--cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
|
1957
2079
|
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
1958
2080
|
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
1959
2081
|
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
@@ -1961,8 +2083,8 @@ fieldset[disabled] .cds--form__helper-text {
|
|
1961
2083
|
outline: 2px solid transparent;
|
1962
2084
|
outline-offset: -2px;
|
1963
2085
|
width: 100%;
|
1964
|
-
height:
|
1965
|
-
padding: 0
|
2086
|
+
height: var(--cds-layout-size-height-local);
|
2087
|
+
padding: 0 var(--cds-layout-density-padding-inline-local);
|
1966
2088
|
border: none;
|
1967
2089
|
border-bottom: 1px solid var(--cds-border-strong);
|
1968
2090
|
background-color: var(--cds-field);
|
@@ -1999,14 +2121,6 @@ fieldset[disabled] .cds--form__helper-text {
|
|
1999
2121
|
display: none;
|
2000
2122
|
}
|
2001
2123
|
|
2002
|
-
.cds--text-input--lg {
|
2003
|
-
height: 3rem;
|
2004
|
-
}
|
2005
|
-
|
2006
|
-
.cds--text-input--sm {
|
2007
|
-
height: 2rem;
|
2008
|
-
}
|
2009
|
-
|
2010
2124
|
.cds--password-input {
|
2011
2125
|
padding-right: 2.5rem;
|
2012
2126
|
}
|
@@ -2898,10 +3012,15 @@ fieldset[disabled] .cds--form__helper-text {
|
|
2898
3012
|
.cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
|
2899
3013
|
padding: 0.25rem;
|
2900
3014
|
margin: -0.25rem;
|
2901
|
-
cursor: pointer;
|
2902
3015
|
line-height: 0;
|
2903
3016
|
pointer-events: auto;
|
2904
3017
|
}
|
3018
|
+
.cds--tabs .cds--tabs__nav-item--icon-left {
|
3019
|
+
display: flex;
|
3020
|
+
align-items: center;
|
3021
|
+
padding-right: 0.5rem;
|
3022
|
+
margin-top: -2px;
|
3023
|
+
}
|
2905
3024
|
.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
|
2906
3025
|
padding-left: 1rem;
|
2907
3026
|
}
|
@@ -3373,6 +3492,10 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3373
3492
|
background-color: var(--cds-layer-hover);
|
3374
3493
|
}
|
3375
3494
|
|
3495
|
+
.cds--overflow-menu > :first-child {
|
3496
|
+
margin-block-start: 0;
|
3497
|
+
}
|
3498
|
+
|
3376
3499
|
.cds--overflow-menu--sm {
|
3377
3500
|
width: 2rem;
|
3378
3501
|
height: 2rem;
|
@@ -9716,6 +9839,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9716
9839
|
}
|
9717
9840
|
|
9718
9841
|
.cds--tag {
|
9842
|
+
--cds-layout-size-height-xs: 1.125rem;
|
9843
|
+
--cds-layout-size-height-sm: 1.125rem;
|
9844
|
+
--cds-layout-size-height-md: 1.5rem;
|
9845
|
+
--cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));
|
9719
9846
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
9720
9847
|
font-weight: var(--cds-label-01-font-weight, 400);
|
9721
9848
|
line-height: var(--cds-label-01-line-height, 1.33333);
|
@@ -9725,16 +9852,25 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9725
9852
|
display: inline-flex;
|
9726
9853
|
min-width: 2rem;
|
9727
9854
|
max-width: 100%;
|
9728
|
-
min-height:
|
9855
|
+
min-height: var(--cds-layout-size-height-local);
|
9729
9856
|
align-items: center;
|
9730
9857
|
justify-content: center;
|
9731
|
-
padding: 0.25rem 0.5rem;
|
9732
9858
|
margin: 0.25rem;
|
9733
9859
|
border-radius: 0.9375rem;
|
9734
9860
|
cursor: default;
|
9861
|
+
padding-inline: 0.5rem;
|
9735
9862
|
vertical-align: middle;
|
9736
9863
|
word-break: break-word;
|
9737
9864
|
}
|
9865
|
+
.cds--layout--size-xs .cds--tag {
|
9866
|
+
--cds-layout-size-height: var(--cds-layout-size-height-xs);
|
9867
|
+
}
|
9868
|
+
.cds--layout--size-sm .cds--tag {
|
9869
|
+
--cds-layout-size-height: var(--cds-layout-size-height-sm);
|
9870
|
+
}
|
9871
|
+
.cds--layout--size-md .cds--tag {
|
9872
|
+
--cds-layout-size-height: var(--cds-layout-size-height-md);
|
9873
|
+
}
|
9738
9874
|
.cds--tag.cds--tag--interactive:hover,
|
9739
9875
|
.cds--tag .cds--tag__close-icon:hover {
|
9740
9876
|
background-color: var(--cds-tag-hover-gray, #c6c6c6);
|
@@ -9905,8 +10041,8 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9905
10041
|
|
9906
10042
|
.cds--tag__close-icon {
|
9907
10043
|
display: flex;
|
9908
|
-
width:
|
9909
|
-
height:
|
10044
|
+
width: var(--cds-layout-size-height-local);
|
10045
|
+
height: var(--cds-layout-size-height-local);
|
9910
10046
|
flex-shrink: 0;
|
9911
10047
|
align-items: center;
|
9912
10048
|
justify-content: center;
|
@@ -9960,18 +10096,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9960
10096
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
9961
10097
|
}
|
9962
10098
|
|
9963
|
-
.cds--tag--sm {
|
9964
|
-
min-height: 1.125rem;
|
9965
|
-
padding: 0 0.5rem;
|
9966
|
-
}
|
9967
|
-
|
9968
10099
|
.cds--tag--sm.cds--tag--filter {
|
9969
10100
|
padding-right: 0;
|
9970
10101
|
}
|
9971
10102
|
|
9972
10103
|
.cds--tag--sm .cds--tag__close-icon {
|
9973
|
-
width: 1.125rem;
|
9974
|
-
height: 1.125rem;
|
9975
10104
|
margin-left: 0.3125rem;
|
9976
10105
|
}
|
9977
10106
|
|
@@ -16223,6 +16352,14 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16223
16352
|
padding: 0;
|
16224
16353
|
}
|
16225
16354
|
|
16355
|
+
.c4p--datagrid .cds--action-list .cds--btn {
|
16356
|
+
align-items: center;
|
16357
|
+
}
|
16358
|
+
|
16359
|
+
.c4p--datagrid .cds--action-list .cds--btn__icon {
|
16360
|
+
margin-top: 0;
|
16361
|
+
}
|
16362
|
+
|
16226
16363
|
/*
|
16227
16364
|
* Licensed Materials - Property of IBM
|
16228
16365
|
* 5724-Q36
|