@carbon/ibm-products 1.35.1 → 1.36.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +278 -240
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +6 -3
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +278 -240
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +278 -240
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/ActionSet/ActionSet.js +6 -3
- package/es/components/AddSelect/add-select-utils.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/es/components/Datagrid/useNestedRowExpander.js +8 -3
- package/es/components/Datagrid/useRowExpander.js +13 -1
- package/es/components/InlineEdit/InlineEdit.js +22 -385
- package/es/components/InlineEditV1/InlineEditV1.js +406 -0
- package/es/components/InlineEditV1/index.js +8 -0
- package/es/components/InlineEditV2/InlineEditV2.js +48 -21
- package/es/components/InlineEditV2/index.js +7 -0
- package/es/components/OptionsTile/OptionsTile.js +25 -10
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/index.js +2 -1
- package/es/global/js/hooks/useControllableState.js +74 -0
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/ActionSet/ActionSet.js +6 -3
- package/lib/components/AddSelect/add-select-utils.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +4 -3
- package/lib/components/Datagrid/useColumnOrder.js +2 -1
- package/lib/components/Datagrid/useNestedRowExpander.js +7 -2
- package/lib/components/Datagrid/useRowExpander.js +13 -1
- package/lib/components/InlineEdit/InlineEdit.js +22 -379
- package/lib/components/InlineEditV1/InlineEditV1.js +403 -0
- package/lib/components/InlineEditV1/index.js +12 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +38 -20
- package/lib/components/OptionsTile/OptionsTile.js +25 -10
- package/lib/components/index.js +1 -1
- package/lib/global/js/hooks/index.js +8 -1
- package/lib/global/js/hooks/useControllableState.js +80 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +10 -10
- package/scss/components/ActionSet/_action-set.scss +9 -4
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +18 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
- package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
- package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
- package/scss/components/InlineEditV2/_index.scss +1 -1
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +5 -1
- package/scss/components/InlineEditV2/_storybook-styles.scss +6 -0
- package/scss/components/_index-released-only.scss +1 -1
- package/scss/components/_index.scss +2 -1
@@ -5353,14 +5353,17 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
|
|
5353
5353
|
font-weight: var(--cds-body-short-01-font-weight, 400);
|
5354
5354
|
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
5355
5355
|
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
5356
|
-
height: var(--cds-spacing-10, 4rem);
|
5357
5356
|
align-items: center;
|
5357
|
+
margin: 0;
|
5358
|
+
}
|
5359
|
+
.c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
|
5360
|
+
height: var(--cds-spacing-10, 4rem);
|
5358
5361
|
padding-top: var(--cds-spacing-05, 1rem);
|
5359
5362
|
padding-bottom: var(--cds-spacing-07, 2rem);
|
5360
|
-
margin: 0;
|
5361
5363
|
}
|
5362
5364
|
|
5363
|
-
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive
|
5365
|
+
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn.bx--btn--expressive,
|
5366
|
+
.c4p--action-set.bx--btn-set .c4p--action-set__action-button.bx--btn {
|
5364
5367
|
max-width: none;
|
5365
5368
|
}
|
5366
5369
|
|
@@ -18949,243 +18952,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
18949
18952
|
transition: none;
|
18950
18953
|
}
|
18951
18954
|
}
|
18952
|
-
.c4p--inline-edit {
|
18953
|
-
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
18954
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
18955
|
-
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
18956
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
18957
|
-
position: relative;
|
18958
|
-
display: inline-block;
|
18959
|
-
min-width: calc(4 * var(--c4p--inline-edit--size));
|
18960
|
-
max-width: 100%;
|
18961
|
-
height: var(--c4p--inline-edit--size);
|
18962
|
-
background-color: var(--c4p--inline-edit--background-color);
|
18963
|
-
cursor: text;
|
18964
|
-
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);
|
18965
|
-
vertical-align: middle;
|
18966
|
-
white-space: nowrap;
|
18967
|
-
}
|
18968
|
-
.c4p--inline-edit.c4p--inline-edit--light {
|
18969
|
-
--c4p--inline-edit--background-color: transparent;
|
18970
|
-
}
|
18971
|
-
.c4p--inline-edit:hover {
|
18972
|
-
--c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
|
18973
|
-
}
|
18974
|
-
.c4p--inline-edit.c4p--inline-edit--sm {
|
18975
|
-
--c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
|
18976
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
18977
|
-
}
|
18978
|
-
.c4p--inline-edit.c4p--inline-edit--lg {
|
18979
|
-
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
18980
|
-
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
18981
|
-
}
|
18982
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
18983
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
18984
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
18985
|
-
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
18986
|
-
}
|
18987
|
-
@media screen and (prefers-contrast) {
|
18988
|
-
.c4p--inline-edit.c4p--inline-edit--invalid {
|
18989
|
-
outline-style: dotted;
|
18990
|
-
}
|
18991
|
-
}
|
18992
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
18993
|
-
/* stylelint-disable-next-line carbon/theme-token-use */
|
18994
|
-
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
18995
|
-
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
18996
|
-
background-color: var(--cds-ui-01, #f4f4f4);
|
18997
|
-
}
|
18998
|
-
@media screen and (prefers-contrast) {
|
18999
|
-
.c4p--inline-edit.c4p--inline-edit--editing {
|
19000
|
-
outline-style: dotted;
|
19001
|
-
}
|
19002
|
-
}
|
19003
|
-
.c4p--inline-edit .c4p--inline-edit__input {
|
19004
|
-
display: inline-block;
|
19005
|
-
overflow: hidden;
|
19006
|
-
width: calc(
|
19007
|
-
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19008
|
-
);
|
19009
|
-
max-width: calc(
|
19010
|
-
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19011
|
-
);
|
19012
|
-
min-height: var(--c4p--inline-edit--size);
|
19013
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
19014
|
-
margin-right: var(--c4p--inline-edit--toolbar-width);
|
19015
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
19016
|
-
line-height: var(--c4p--inline-edit--size);
|
19017
|
-
}
|
19018
|
-
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
19019
|
-
outline: none;
|
19020
|
-
}
|
19021
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
19022
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
19023
|
-
}
|
19024
|
-
.c4p--inline-edit .c4p--inline-edit__input::after {
|
19025
|
-
position: absolute;
|
19026
|
-
top: 0;
|
19027
|
-
left: 0;
|
19028
|
-
display: block;
|
19029
|
-
overflow: hidden;
|
19030
|
-
width: 0;
|
19031
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
19032
|
-
color: var(--cds-text-05, #6f6f6f);
|
19033
|
-
content: attr(data-placeholder);
|
19034
|
-
opacity: 0;
|
19035
|
-
visibility: hidden;
|
19036
|
-
}
|
19037
|
-
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
19038
|
-
display: inline-block;
|
19039
|
-
overflow: hidden;
|
19040
|
-
width: 0;
|
19041
|
-
height: var(--c4p--inline-edit--size);
|
19042
|
-
line-height: var(--c4p--inline-edit--size);
|
19043
|
-
opacity: 0;
|
19044
|
-
pointer-events: none;
|
19045
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19046
|
-
}
|
19047
|
-
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
19048
|
-
width: initial;
|
19049
|
-
opacity: 1;
|
19050
|
-
}
|
19051
|
-
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
19052
|
-
position: absolute;
|
19053
|
-
top: 0;
|
19054
|
-
left: 0;
|
19055
|
-
width: 100%;
|
19056
|
-
height: 100%;
|
19057
|
-
pointer-events: none;
|
19058
|
-
}
|
19059
|
-
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
19060
|
-
cursor: not-allowed;
|
19061
|
-
pointer-events: all;
|
19062
|
-
}
|
19063
|
-
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
19064
|
-
width: initial;
|
19065
|
-
opacity: 1;
|
19066
|
-
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19067
|
-
visibility: visible;
|
19068
|
-
}
|
19069
|
-
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
19070
|
-
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
19071
|
-
position: absolute;
|
19072
|
-
top: 0;
|
19073
|
-
right: 0;
|
19074
|
-
display: flex;
|
19075
|
-
width: var(--c4p--inline-edit--toolbar-width);
|
19076
|
-
height: 100%;
|
19077
|
-
justify-content: space-between;
|
19078
|
-
cursor: text;
|
19079
|
-
}
|
19080
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
19081
|
-
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
19082
|
-
}
|
19083
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
19084
|
-
position: absolute;
|
19085
|
-
top: 0;
|
19086
|
-
left: 0;
|
19087
|
-
display: block;
|
19088
|
-
width: 100%;
|
19089
|
-
height: 100%;
|
19090
|
-
box-sizing: border-box;
|
19091
|
-
border: 2px solid var(--cds-focus, #0f62fe);
|
19092
|
-
border-left: 0;
|
19093
|
-
content: "";
|
19094
|
-
pointer-events: none;
|
19095
|
-
}
|
19096
|
-
.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 {
|
19097
|
-
display: inline-flex;
|
19098
|
-
width: var(--c4p--inline-edit--size);
|
19099
|
-
max-width: var(--c4p--inline-edit--size);
|
19100
|
-
height: 100%;
|
19101
|
-
min-height: initial;
|
19102
|
-
max-height: var(--c4p--inline-edit--size);
|
19103
|
-
align-items: center;
|
19104
|
-
justify-content: center;
|
19105
|
-
border: 2px solid transparent;
|
19106
|
-
}
|
19107
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
|
19108
|
-
outline: initial;
|
19109
|
-
}
|
19110
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
|
19111
|
-
border-color: var(--cds-focus, #0f62fe);
|
19112
|
-
box-shadow: initial;
|
19113
|
-
outline: initial;
|
19114
|
-
}
|
19115
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
|
19116
|
-
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
19117
|
-
}
|
19118
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
|
19119
|
-
background-color: transparent;
|
19120
|
-
}
|
19121
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
|
19122
|
-
border-color: transparent;
|
19123
|
-
}
|
19124
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
19125
|
-
overflow: visible;
|
19126
|
-
width: var(--c4p--inline-edit--edit-size);
|
19127
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
19128
|
-
transition-property: margin, padding;
|
19129
|
-
}
|
19130
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
19131
|
-
overflow: hidden;
|
19132
|
-
width: 0;
|
19133
|
-
padding: 0;
|
19134
|
-
border-right: 0;
|
19135
|
-
border-left: 0;
|
19136
|
-
}
|
19137
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
19138
|
-
display: inline-flex;
|
19139
|
-
width: var(--c4p--inline-edit--size);
|
19140
|
-
max-width: var(--c4p--inline-edit--size);
|
19141
|
-
height: 100%;
|
19142
|
-
min-height: initial;
|
19143
|
-
max-height: var(--c4p--inline-edit--size);
|
19144
|
-
align-items: center;
|
19145
|
-
justify-content: center;
|
19146
|
-
border: 2px solid transparent;
|
19147
|
-
}
|
19148
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
|
19149
|
-
border-color: transparent;
|
19150
|
-
background-color: transparent;
|
19151
|
-
box-shadow: initial;
|
19152
|
-
outline: initial;
|
19153
|
-
}
|
19154
|
-
@media (hover: hover) {
|
19155
|
-
.c4p--inline-edit .c4p--inline-edit__edit {
|
19156
|
-
opacity: 0;
|
19157
|
-
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
19158
|
-
}
|
19159
|
-
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
19160
|
-
opacity: 1;
|
19161
|
-
}
|
19162
|
-
}
|
19163
|
-
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
19164
|
-
opacity: 1;
|
19165
|
-
}
|
19166
|
-
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
19167
|
-
display: inline-flex;
|
19168
|
-
width: var(--c4p--inline-edit--size);
|
19169
|
-
max-width: var(--c4p--inline-edit--size);
|
19170
|
-
height: 100%;
|
19171
|
-
min-height: initial;
|
19172
|
-
max-height: var(--c4p--inline-edit--size);
|
19173
|
-
align-items: center;
|
19174
|
-
justify-content: center;
|
19175
|
-
border: 2px solid transparent;
|
19176
|
-
}
|
19177
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
19178
|
-
color: var(--cds-support-error, #da1e28);
|
19179
|
-
}
|
19180
|
-
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
19181
|
-
display: block;
|
19182
|
-
overflow: visible;
|
19183
|
-
margin-left: var(--cds-spacing-05, 1rem);
|
19184
|
-
}
|
19185
|
-
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
|
19186
|
-
color: var(--cds-support-error, #da1e28);
|
19187
|
-
}
|
19188
|
-
|
19189
18955
|
.c4p--data-spreadsheet {
|
19190
18956
|
--c4p--data-spreadsheet--total-width: 0;
|
19191
18957
|
display: inline-block;
|
@@ -19870,6 +19636,21 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19870
19636
|
border-bottom: none;
|
19871
19637
|
}
|
19872
19638
|
|
19639
|
+
.c4p--datagrid .c4p--datagrid__carbon-row-expandable {
|
19640
|
+
position: relative;
|
19641
|
+
}
|
19642
|
+
|
19643
|
+
.c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
|
19644
|
+
position: absolute;
|
19645
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
19646
|
+
top: -1px;
|
19647
|
+
left: 0;
|
19648
|
+
width: 100%;
|
19649
|
+
height: 1px;
|
19650
|
+
background-color: var(--cds-border-subtle, #e0e0e0);
|
19651
|
+
content: "";
|
19652
|
+
}
|
19653
|
+
|
19873
19654
|
/*
|
19874
19655
|
* Licensed Materials - Property of IBM
|
19875
19656
|
* 5724-Q36
|
@@ -20246,6 +20027,23 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
20246
20027
|
content: "";
|
20247
20028
|
}
|
20248
20029
|
|
20030
|
+
.c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
|
20031
|
+
padding: var(--cds-spacing-03, 0.5rem);
|
20032
|
+
padding-right: 0;
|
20033
|
+
}
|
20034
|
+
|
20035
|
+
.c4p--datagrid__row-expander.bx--btn {
|
20036
|
+
display: flex;
|
20037
|
+
width: var(--cds-spacing-07, 2rem);
|
20038
|
+
height: var(--cds-spacing-07, 2rem);
|
20039
|
+
min-height: var(--cds-spacing-07, 2rem);
|
20040
|
+
justify-content: center;
|
20041
|
+
padding: 0;
|
20042
|
+
}
|
20043
|
+
.c4p--datagrid__row-expander.bx--btn .c4p--datagrid__row-expander--icon {
|
20044
|
+
fill: var(--cds-ui-05, #161616);
|
20045
|
+
}
|
20046
|
+
|
20249
20047
|
/*
|
20250
20048
|
* Licensed Materials - Property of IBM
|
20251
20049
|
* 5724-Q36
|
@@ -20874,6 +20672,243 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20874
20672
|
color: #ffffff;
|
20875
20673
|
}
|
20876
20674
|
|
20675
|
+
.c4p--inline-edit {
|
20676
|
+
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
20677
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
20678
|
+
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
20679
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
20680
|
+
position: relative;
|
20681
|
+
display: inline-block;
|
20682
|
+
min-width: calc(4 * var(--c4p--inline-edit--size));
|
20683
|
+
max-width: 100%;
|
20684
|
+
height: var(--c4p--inline-edit--size);
|
20685
|
+
background-color: var(--c4p--inline-edit--background-color);
|
20686
|
+
cursor: text;
|
20687
|
+
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);
|
20688
|
+
vertical-align: middle;
|
20689
|
+
white-space: nowrap;
|
20690
|
+
}
|
20691
|
+
.c4p--inline-edit.c4p--inline-edit--light {
|
20692
|
+
--c4p--inline-edit--background-color: transparent;
|
20693
|
+
}
|
20694
|
+
.c4p--inline-edit:hover {
|
20695
|
+
--c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
|
20696
|
+
}
|
20697
|
+
.c4p--inline-edit.c4p--inline-edit--sm {
|
20698
|
+
--c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
|
20699
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
20700
|
+
}
|
20701
|
+
.c4p--inline-edit.c4p--inline-edit--lg {
|
20702
|
+
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
20703
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
20704
|
+
}
|
20705
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
20706
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
20707
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
20708
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
20709
|
+
}
|
20710
|
+
@media screen and (prefers-contrast) {
|
20711
|
+
.c4p--inline-edit.c4p--inline-edit--invalid {
|
20712
|
+
outline-style: dotted;
|
20713
|
+
}
|
20714
|
+
}
|
20715
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
20716
|
+
/* stylelint-disable-next-line carbon/theme-token-use */
|
20717
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
20718
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
20719
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
20720
|
+
}
|
20721
|
+
@media screen and (prefers-contrast) {
|
20722
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
20723
|
+
outline-style: dotted;
|
20724
|
+
}
|
20725
|
+
}
|
20726
|
+
.c4p--inline-edit .c4p--inline-edit__input {
|
20727
|
+
display: inline-block;
|
20728
|
+
overflow: hidden;
|
20729
|
+
width: calc(
|
20730
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
20731
|
+
);
|
20732
|
+
max-width: calc(
|
20733
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
20734
|
+
);
|
20735
|
+
min-height: var(--c4p--inline-edit--size);
|
20736
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
20737
|
+
margin-right: var(--c4p--inline-edit--toolbar-width);
|
20738
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
20739
|
+
line-height: var(--c4p--inline-edit--size);
|
20740
|
+
}
|
20741
|
+
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
20742
|
+
outline: none;
|
20743
|
+
}
|
20744
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
|
20745
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
20746
|
+
}
|
20747
|
+
.c4p--inline-edit .c4p--inline-edit__input::after {
|
20748
|
+
position: absolute;
|
20749
|
+
top: 0;
|
20750
|
+
left: 0;
|
20751
|
+
display: block;
|
20752
|
+
overflow: hidden;
|
20753
|
+
width: 0;
|
20754
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
20755
|
+
color: var(--cds-text-05, #6f6f6f);
|
20756
|
+
content: attr(data-placeholder);
|
20757
|
+
opacity: 0;
|
20758
|
+
visibility: hidden;
|
20759
|
+
}
|
20760
|
+
.c4p--inline-edit .c4p--inline-edit__ellipsis {
|
20761
|
+
display: inline-block;
|
20762
|
+
overflow: hidden;
|
20763
|
+
width: 0;
|
20764
|
+
height: var(--c4p--inline-edit--size);
|
20765
|
+
line-height: var(--c4p--inline-edit--size);
|
20766
|
+
opacity: 0;
|
20767
|
+
pointer-events: none;
|
20768
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
20769
|
+
}
|
20770
|
+
.c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
|
20771
|
+
width: initial;
|
20772
|
+
opacity: 1;
|
20773
|
+
}
|
20774
|
+
.c4p--inline-edit .c4p--inline-edit__disabled-cover {
|
20775
|
+
position: absolute;
|
20776
|
+
top: 0;
|
20777
|
+
left: 0;
|
20778
|
+
width: 100%;
|
20779
|
+
height: 100%;
|
20780
|
+
pointer-events: none;
|
20781
|
+
}
|
20782
|
+
.c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
|
20783
|
+
cursor: not-allowed;
|
20784
|
+
pointer-events: all;
|
20785
|
+
}
|
20786
|
+
.c4p--inline-edit .c4p--inline-edit__input--empty::after {
|
20787
|
+
width: initial;
|
20788
|
+
opacity: 1;
|
20789
|
+
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
20790
|
+
visibility: visible;
|
20791
|
+
}
|
20792
|
+
.c4p--inline-edit .c4p--inline-edit__after-input-elements {
|
20793
|
+
--c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
|
20794
|
+
position: absolute;
|
20795
|
+
top: 0;
|
20796
|
+
right: 0;
|
20797
|
+
display: flex;
|
20798
|
+
width: var(--c4p--inline-edit--toolbar-width);
|
20799
|
+
height: 100%;
|
20800
|
+
justify-content: space-between;
|
20801
|
+
cursor: text;
|
20802
|
+
}
|
20803
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
20804
|
+
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
20805
|
+
}
|
20806
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
20807
|
+
position: absolute;
|
20808
|
+
top: 0;
|
20809
|
+
left: 0;
|
20810
|
+
display: block;
|
20811
|
+
width: 100%;
|
20812
|
+
height: 100%;
|
20813
|
+
box-sizing: border-box;
|
20814
|
+
border: 2px solid var(--cds-focus, #0f62fe);
|
20815
|
+
border-left: 0;
|
20816
|
+
content: "";
|
20817
|
+
pointer-events: none;
|
20818
|
+
}
|
20819
|
+
.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 {
|
20820
|
+
display: inline-flex;
|
20821
|
+
width: var(--c4p--inline-edit--size);
|
20822
|
+
max-width: var(--c4p--inline-edit--size);
|
20823
|
+
height: 100%;
|
20824
|
+
min-height: initial;
|
20825
|
+
max-height: var(--c4p--inline-edit--size);
|
20826
|
+
align-items: center;
|
20827
|
+
justify-content: center;
|
20828
|
+
border: 2px solid transparent;
|
20829
|
+
}
|
20830
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
|
20831
|
+
outline: initial;
|
20832
|
+
}
|
20833
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
|
20834
|
+
border-color: var(--cds-focus, #0f62fe);
|
20835
|
+
box-shadow: initial;
|
20836
|
+
outline: initial;
|
20837
|
+
}
|
20838
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
|
20839
|
+
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
20840
|
+
}
|
20841
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
|
20842
|
+
background-color: transparent;
|
20843
|
+
}
|
20844
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
|
20845
|
+
border-color: transparent;
|
20846
|
+
}
|
20847
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
20848
|
+
overflow: visible;
|
20849
|
+
width: var(--c4p--inline-edit--edit-size);
|
20850
|
+
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
20851
|
+
transition-property: margin, padding;
|
20852
|
+
}
|
20853
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
20854
|
+
overflow: hidden;
|
20855
|
+
width: 0;
|
20856
|
+
padding: 0;
|
20857
|
+
border-right: 0;
|
20858
|
+
border-left: 0;
|
20859
|
+
}
|
20860
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
20861
|
+
display: inline-flex;
|
20862
|
+
width: var(--c4p--inline-edit--size);
|
20863
|
+
max-width: var(--c4p--inline-edit--size);
|
20864
|
+
height: 100%;
|
20865
|
+
min-height: initial;
|
20866
|
+
max-height: var(--c4p--inline-edit--size);
|
20867
|
+
align-items: center;
|
20868
|
+
justify-content: center;
|
20869
|
+
border: 2px solid transparent;
|
20870
|
+
}
|
20871
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
|
20872
|
+
border-color: transparent;
|
20873
|
+
background-color: transparent;
|
20874
|
+
box-shadow: initial;
|
20875
|
+
outline: initial;
|
20876
|
+
}
|
20877
|
+
@media (hover: hover) {
|
20878
|
+
.c4p--inline-edit .c4p--inline-edit__edit {
|
20879
|
+
opacity: 0;
|
20880
|
+
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
20881
|
+
}
|
20882
|
+
.c4p--inline-edit:hover .c4p--inline-edit__edit {
|
20883
|
+
opacity: 1;
|
20884
|
+
}
|
20885
|
+
}
|
20886
|
+
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
20887
|
+
opacity: 1;
|
20888
|
+
}
|
20889
|
+
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
20890
|
+
display: inline-flex;
|
20891
|
+
width: var(--c4p--inline-edit--size);
|
20892
|
+
max-width: var(--c4p--inline-edit--size);
|
20893
|
+
height: 100%;
|
20894
|
+
min-height: initial;
|
20895
|
+
max-height: var(--c4p--inline-edit--size);
|
20896
|
+
align-items: center;
|
20897
|
+
justify-content: center;
|
20898
|
+
border: 2px solid transparent;
|
20899
|
+
}
|
20900
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
20901
|
+
color: var(--cds-support-error, #da1e28);
|
20902
|
+
}
|
20903
|
+
.c4p--inline-edit .c4p--inline-edit__validation-text {
|
20904
|
+
display: block;
|
20905
|
+
overflow: visible;
|
20906
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
20907
|
+
}
|
20908
|
+
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
|
20909
|
+
color: var(--cds-support-error, #da1e28);
|
20910
|
+
}
|
20911
|
+
|
20877
20912
|
.c4p--inline-edit-v2 {
|
20878
20913
|
display: flex;
|
20879
20914
|
align-items: center;
|
@@ -20899,6 +20934,9 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20899
20934
|
.c4p--inline-edit-v2__text-input {
|
20900
20935
|
flex: 1;
|
20901
20936
|
}
|
20937
|
+
.c4p--inline-edit-v2__text-input-label {
|
20938
|
+
display: none;
|
20939
|
+
}
|
20902
20940
|
.c4p--inline-edit-v2__warning-icon {
|
20903
20941
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
20904
20942
|
margin-right: 0.4375rem;
|