@carbon/ibm-products 1.32.1 → 1.34.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +210 -158
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +7 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +12 -144
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +7 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +193 -156
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +7 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +208 -156
- package/css/index.css.map +1 -1
- package/css/index.min.css +7 -3
- package/css/index.min.css.map +1 -1
- package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +30 -7
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +21 -0
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/es/components/Datagrid/utils/makeData.js +10 -1
- package/es/components/InlineEditV2/InlineEditV2.js +249 -0
- package/es/components/InlineEditV2/index.js +1 -0
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +39 -0
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
- package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +4 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +29 -5
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +84 -38
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +22 -0
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/Datagrid/utils/getInlineEditColumns.js +25 -7
- package/lib/components/Datagrid/utils/makeData.js +10 -1
- package/lib/components/InlineEditV2/InlineEditV2.js +277 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +49 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +14 -13
- package/scss/components/Datagrid/_storybook-styles.scss +11 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +0 -5
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +177 -2
- package/scss/components/InlineEdit/_inline-edit.scss +4 -2
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +81 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +0 -75
- package/scss/components/_index.scss +2 -0
@@ -10716,6 +10716,20 @@ a.bx--overflow-menu-options__btn::before {
|
|
10716
10716
|
border-radius: 0;
|
10717
10717
|
}
|
10718
10718
|
|
10719
|
+
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
10720
|
+
.bx--toggle__switch::before {
|
10721
|
+
outline: 1px solid transparent;
|
10722
|
+
}
|
10723
|
+
}
|
10724
|
+
|
10725
|
+
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
10726
|
+
.bx--toggle__switch::after,
|
10727
|
+
.bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
|
10728
|
+
outline: 1px solid transparent;
|
10729
|
+
background-color: ButtonText;
|
10730
|
+
}
|
10731
|
+
}
|
10732
|
+
|
10719
10733
|
@keyframes influencer-menu-entrance {
|
10720
10734
|
0% {
|
10721
10735
|
opacity: 0;
|
@@ -11076,26 +11090,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11076
11090
|
stroke-dashoffset: 0;
|
11077
11091
|
}
|
11078
11092
|
}
|
11079
|
-
@keyframes side-panel-exit-left {
|
11080
|
-
0% {
|
11081
|
-
opacity: 1;
|
11082
|
-
transform: translateX(0);
|
11083
|
-
}
|
11084
|
-
100% {
|
11085
|
-
opacity: 0;
|
11086
|
-
transform: translateX(calc(-1 * 30rem));
|
11087
|
-
}
|
11088
|
-
}
|
11089
|
-
@keyframes side-panel-exit-right {
|
11090
|
-
0% {
|
11091
|
-
opacity: 1;
|
11092
|
-
transform: translateX(0);
|
11093
|
-
}
|
11094
|
-
100% {
|
11095
|
-
opacity: 0;
|
11096
|
-
transform: translateX(30rem);
|
11097
|
-
}
|
11098
|
-
}
|
11099
11093
|
.c4p--side-panel__container {
|
11100
11094
|
--c4p--side-panel--subtitle-opacity: 1;
|
11101
11095
|
--c4p--side-panel--title-container-height: 0;
|
@@ -11114,7 +11108,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11114
11108
|
box-sizing: border-box;
|
11115
11109
|
background-color: var(--cds-ui-01, #f4f4f4);
|
11116
11110
|
color: var(--cds-text-01, #161616);
|
11117
|
-
transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11118
11111
|
}
|
11119
11112
|
.c4p--side-panel__container.c4p--side-panel__container--xs {
|
11120
11113
|
width: 16rem;
|
@@ -11128,37 +11121,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11128
11121
|
max-width: 100%;
|
11129
11122
|
}
|
11130
11123
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
|
11131
|
-
width: 16rem;
|
11132
|
-
max-width: 100%;
|
11133
11124
|
right: 0;
|
11134
11125
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11135
11126
|
}
|
11136
|
-
@keyframes side-panel-entrance-right {
|
11137
|
-
0% {
|
11138
|
-
opacity: 0;
|
11139
|
-
transform: translateX(16rem);
|
11140
|
-
}
|
11141
|
-
100% {
|
11142
|
-
opacity: 1;
|
11143
|
-
transform: translateX(0);
|
11144
|
-
}
|
11145
|
-
}
|
11146
11127
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
|
11147
|
-
width: 16rem;
|
11148
|
-
max-width: 100%;
|
11149
11128
|
left: 0;
|
11150
11129
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11151
11130
|
}
|
11152
|
-
@keyframes side-panel-entrance-left {
|
11153
|
-
0% {
|
11154
|
-
opacity: 0;
|
11155
|
-
transform: translateX(-16rem);
|
11156
|
-
}
|
11157
|
-
100% {
|
11158
|
-
opacity: 1;
|
11159
|
-
transform: translateX(0);
|
11160
|
-
}
|
11161
|
-
}
|
11162
11131
|
.c4p--side-panel__container.c4p--side-panel__container--sm {
|
11163
11132
|
width: 20rem;
|
11164
11133
|
max-width: 100%;
|
@@ -11171,37 +11140,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11171
11140
|
max-width: 100%;
|
11172
11141
|
}
|
11173
11142
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
|
11174
|
-
width: 20rem;
|
11175
|
-
max-width: 100%;
|
11176
11143
|
right: 0;
|
11177
11144
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11178
11145
|
}
|
11179
|
-
@keyframes side-panel-entrance-right {
|
11180
|
-
0% {
|
11181
|
-
opacity: 0;
|
11182
|
-
transform: translateX(20rem);
|
11183
|
-
}
|
11184
|
-
100% {
|
11185
|
-
opacity: 1;
|
11186
|
-
transform: translateX(0);
|
11187
|
-
}
|
11188
|
-
}
|
11189
11146
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
|
11190
|
-
width: 20rem;
|
11191
|
-
max-width: 100%;
|
11192
11147
|
left: 0;
|
11193
11148
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11194
11149
|
}
|
11195
|
-
@keyframes side-panel-entrance-left {
|
11196
|
-
0% {
|
11197
|
-
opacity: 0;
|
11198
|
-
transform: translateX(-20rem);
|
11199
|
-
}
|
11200
|
-
100% {
|
11201
|
-
opacity: 1;
|
11202
|
-
transform: translateX(0);
|
11203
|
-
}
|
11204
|
-
}
|
11205
11150
|
.c4p--side-panel__container.c4p--side-panel__container--md {
|
11206
11151
|
width: 30rem;
|
11207
11152
|
max-width: 100%;
|
@@ -11214,37 +11159,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11214
11159
|
max-width: 100%;
|
11215
11160
|
}
|
11216
11161
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
|
11217
|
-
width: 30rem;
|
11218
|
-
max-width: 100%;
|
11219
11162
|
right: 0;
|
11220
11163
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11221
11164
|
}
|
11222
|
-
@keyframes side-panel-entrance-right {
|
11223
|
-
0% {
|
11224
|
-
opacity: 0;
|
11225
|
-
transform: translateX(30rem);
|
11226
|
-
}
|
11227
|
-
100% {
|
11228
|
-
opacity: 1;
|
11229
|
-
transform: translateX(0);
|
11230
|
-
}
|
11231
|
-
}
|
11232
11165
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
|
11233
|
-
width: 30rem;
|
11234
|
-
max-width: 100%;
|
11235
11166
|
left: 0;
|
11236
11167
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11237
11168
|
}
|
11238
|
-
@keyframes side-panel-entrance-left {
|
11239
|
-
0% {
|
11240
|
-
opacity: 0;
|
11241
|
-
transform: translateX(-30rem);
|
11242
|
-
}
|
11243
|
-
100% {
|
11244
|
-
opacity: 1;
|
11245
|
-
transform: translateX(0);
|
11246
|
-
}
|
11247
|
-
}
|
11248
11169
|
.c4p--side-panel__container.c4p--side-panel__container--lg {
|
11249
11170
|
width: 40rem;
|
11250
11171
|
max-width: 100%;
|
@@ -11257,37 +11178,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11257
11178
|
max-width: 100%;
|
11258
11179
|
}
|
11259
11180
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
|
11260
|
-
width: 40rem;
|
11261
|
-
max-width: 100%;
|
11262
11181
|
right: 0;
|
11263
11182
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11264
11183
|
}
|
11265
|
-
@keyframes side-panel-entrance-right {
|
11266
|
-
0% {
|
11267
|
-
opacity: 0;
|
11268
|
-
transform: translateX(40rem);
|
11269
|
-
}
|
11270
|
-
100% {
|
11271
|
-
opacity: 1;
|
11272
|
-
transform: translateX(0);
|
11273
|
-
}
|
11274
|
-
}
|
11275
11184
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
|
11276
|
-
width: 40rem;
|
11277
|
-
max-width: 100%;
|
11278
11185
|
left: 0;
|
11279
11186
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11280
11187
|
}
|
11281
|
-
@keyframes side-panel-entrance-left {
|
11282
|
-
0% {
|
11283
|
-
opacity: 0;
|
11284
|
-
transform: translateX(-40rem);
|
11285
|
-
}
|
11286
|
-
100% {
|
11287
|
-
opacity: 1;
|
11288
|
-
transform: translateX(0);
|
11289
|
-
}
|
11290
|
-
}
|
11291
11188
|
.c4p--side-panel__container.c4p--side-panel__container--max {
|
11292
11189
|
width: 75%;
|
11293
11190
|
max-width: 100%;
|
@@ -11300,37 +11197,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11300
11197
|
max-width: 100%;
|
11301
11198
|
}
|
11302
11199
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
|
11303
|
-
width: 75%;
|
11304
|
-
max-width: 100%;
|
11305
11200
|
right: 0;
|
11306
11201
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11307
11202
|
}
|
11308
|
-
@keyframes side-panel-entrance-right {
|
11309
|
-
0% {
|
11310
|
-
opacity: 0;
|
11311
|
-
transform: translateX(75%);
|
11312
|
-
}
|
11313
|
-
100% {
|
11314
|
-
opacity: 1;
|
11315
|
-
transform: translateX(0);
|
11316
|
-
}
|
11317
|
-
}
|
11318
11203
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
|
11319
|
-
width: 75%;
|
11320
|
-
max-width: 100%;
|
11321
11204
|
left: 0;
|
11322
11205
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11323
11206
|
}
|
11324
|
-
@keyframes side-panel-entrance-left {
|
11325
|
-
0% {
|
11326
|
-
opacity: 0;
|
11327
|
-
transform: translateX(-75%);
|
11328
|
-
}
|
11329
|
-
100% {
|
11330
|
-
opacity: 1;
|
11331
|
-
transform: translateX(0);
|
11332
|
-
}
|
11333
|
-
}
|
11334
11207
|
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
|
11335
11208
|
content: none;
|
11336
11209
|
}
|
@@ -11650,7 +11523,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11650
11523
|
width: 100%;
|
11651
11524
|
height: 100%;
|
11652
11525
|
background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
|
11653
|
-
transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11654
11526
|
}
|
11655
11527
|
|
11656
11528
|
.c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
|
@@ -13081,6 +12953,7 @@ a.bx--side-nav__link--current::before {
|
|
13081
12953
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
13082
12954
|
.bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
|
13083
12955
|
fill: ButtonText;
|
12956
|
+
background-color: ButtonText;
|
13084
12957
|
}
|
13085
12958
|
}
|
13086
12959
|
|
@@ -13894,8 +13767,8 @@ a.bx--side-nav__link--current::before {
|
|
13894
13767
|
height: 2.5rem;
|
13895
13768
|
padding: var(--cds-spacing-04, 0.75rem);
|
13896
13769
|
border: var(--cds-spacing-01, 0.125rem) solid transparent;
|
13897
|
-
background-color: transparent;
|
13898
13770
|
border-radius: 0;
|
13771
|
+
background-color: transparent;
|
13899
13772
|
cursor: pointer;
|
13900
13773
|
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
13901
13774
|
}
|
@@ -16756,6 +16629,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16756
16629
|
transform: translateY(-2px);
|
16757
16630
|
vertical-align: middle;
|
16758
16631
|
}
|
16632
|
+
.c4p--page-header .c4p--page-header__title-wrapper {
|
16633
|
+
font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
|
16634
|
+
font-weight: var(--cds-productive-heading-04-font-weight, 400);
|
16635
|
+
line-height: var(--cds-productive-heading-04-line-height, 1.28572);
|
16636
|
+
letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
|
16637
|
+
}
|
16759
16638
|
.c4p--page-header .c4p--page-header__page-actions {
|
16760
16639
|
flex: 0 0 100%;
|
16761
16640
|
margin-top: var(--cds-spacing-05, 1rem);
|
@@ -19131,8 +19010,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19131
19010
|
.c4p--inline-edit .c4p--inline-edit__input {
|
19132
19011
|
display: inline-block;
|
19133
19012
|
overflow: hidden;
|
19134
|
-
width: calc(
|
19135
|
-
|
19013
|
+
width: calc(
|
19014
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19015
|
+
);
|
19016
|
+
max-width: calc(
|
19017
|
+
100% - var(--c4p--inline-edit--toolbar-width) - var(--cds-spacing-05, 1rem)
|
19018
|
+
);
|
19136
19019
|
min-height: var(--c4p--inline-edit--size);
|
19137
19020
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
19138
19021
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
@@ -19968,11 +19851,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
19968
19851
|
height: var(--cds-spacing-09, 3rem);
|
19969
19852
|
}
|
19970
19853
|
|
19971
|
-
.c4p--datagrid .c4p--datagrid__table-grid-active {
|
19972
|
-
border: 2px solid var(--cds-inverse-link, #78a9ff);
|
19973
|
-
outline: 0;
|
19974
|
-
}
|
19975
|
-
|
19976
19854
|
/*
|
19977
19855
|
* Licensed Materials - Property of IBM
|
19978
19856
|
* 5724-Q36
|
@@ -20464,7 +20342,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20464
20342
|
|
20465
20343
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::before,
|
20466
20344
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .bx--number__control-btn::after {
|
20467
|
-
height: 1.25rem;
|
20345
|
+
height: calc(1.5rem - 0.25rem);
|
20468
20346
|
}
|
20469
20347
|
|
20470
20348
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xs.bx--list-box {
|
@@ -20480,7 +20358,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20480
20358
|
|
20481
20359
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::before,
|
20482
20360
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .bx--number__control-btn::after {
|
20483
|
-
height:
|
20361
|
+
height: calc(2rem - 0.25rem);
|
20484
20362
|
}
|
20485
20363
|
|
20486
20364
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-sm.bx--list-box {
|
@@ -20496,7 +20374,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20496
20374
|
|
20497
20375
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::before,
|
20498
20376
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .bx--number__control-btn::after {
|
20499
|
-
height: 2.25rem;
|
20377
|
+
height: calc(2.5rem - 0.25rem);
|
20500
20378
|
}
|
20501
20379
|
|
20502
20380
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-md.bx--list-box {
|
@@ -20512,7 +20390,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20512
20390
|
|
20513
20391
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::before,
|
20514
20392
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .bx--number__control-btn::after {
|
20515
|
-
height:
|
20393
|
+
height: calc(3rem - 0.25rem);
|
20516
20394
|
}
|
20517
20395
|
|
20518
20396
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-lg.bx--list-box {
|
@@ -20528,13 +20406,17 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20528
20406
|
|
20529
20407
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::before,
|
20530
20408
|
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .bx--number__control-btn::after {
|
20531
|
-
height:
|
20409
|
+
height: calc(4rem - 0.25rem);
|
20532
20410
|
}
|
20533
20411
|
|
20534
20412
|
.c4p--datagrid .c4p--datagrid__inline-edit--select.c4p--datagrid__inline-edit--select-xl.bx--list-box {
|
20535
20413
|
max-height: none;
|
20536
20414
|
}
|
20537
20415
|
|
20416
|
+
.c4p--datagrid {
|
20417
|
+
--c4p--datagrid--grid-header-height: 0;
|
20418
|
+
}
|
20419
|
+
|
20538
20420
|
.c4p--datagrid__inline-edit-cell {
|
20539
20421
|
display: flex;
|
20540
20422
|
height: 100%;
|
@@ -20553,6 +20435,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20553
20435
|
|
20554
20436
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
|
20555
20437
|
position: relative;
|
20438
|
+
z-index: 2;
|
20556
20439
|
display: flex;
|
20557
20440
|
width: 100%;
|
20558
20441
|
height: 100%;
|
@@ -20569,6 +20452,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20569
20452
|
}
|
20570
20453
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
|
20571
20454
|
padding-left: 0;
|
20455
|
+
cursor: default;
|
20572
20456
|
}
|
20573
20457
|
.c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
|
20574
20458
|
height: var(--cds-spacing-05, 1rem);
|
@@ -20678,11 +20562,125 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20678
20562
|
white-space: nowrap;
|
20679
20563
|
}
|
20680
20564
|
|
20681
|
-
.bx--data-table .c4p--datagrid__carbon-row-hover-active td {
|
20565
|
+
.c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-hover-active td {
|
20682
20566
|
border-top-color: var(--cds-hover-ui, #e5e5e5);
|
20683
20567
|
background-color: var(--cds-hover-ui, #e5e5e5);
|
20684
20568
|
}
|
20685
20569
|
|
20570
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
|
20571
|
+
position: absolute;
|
20572
|
+
z-index: 2;
|
20573
|
+
bottom: 0;
|
20574
|
+
left: 0;
|
20575
|
+
width: 2px;
|
20576
|
+
height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
|
20577
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20578
|
+
content: "";
|
20579
|
+
}
|
20580
|
+
|
20581
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
|
20582
|
+
position: absolute;
|
20583
|
+
z-index: 2;
|
20584
|
+
right: 0;
|
20585
|
+
bottom: 0;
|
20586
|
+
width: 2px;
|
20587
|
+
height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
|
20588
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20589
|
+
content: "";
|
20590
|
+
}
|
20591
|
+
|
20592
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active .bx--data-table-content::before {
|
20593
|
+
position: absolute;
|
20594
|
+
z-index: 2;
|
20595
|
+
top: 0;
|
20596
|
+
right: 0;
|
20597
|
+
left: 0;
|
20598
|
+
width: var(--c4p--datagrid--grid-width);
|
20599
|
+
height: 2px;
|
20600
|
+
background-color: var(--cds-inverse-link, #78a9ff);
|
20601
|
+
}
|
20602
|
+
|
20603
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
|
20604
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
|
20605
|
+
height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
|
20606
|
+
}
|
20607
|
+
|
20608
|
+
.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
|
20609
|
+
outline: 2px solid var(--cds-inverse-link, #78a9ff);
|
20610
|
+
outline-offset: -2px;
|
20611
|
+
}
|
20612
|
+
|
20613
|
+
.c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
|
20614
|
+
padding-top: var(--cds-spacing-01, 0.125rem);
|
20615
|
+
}
|
20616
|
+
|
20617
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .bx--form-requirement,
|
20618
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .bx--form-requirement {
|
20619
|
+
position: absolute;
|
20620
|
+
z-index: 3;
|
20621
|
+
top: calc(100% - var(--cds-spacing-01, 0.125rem));
|
20622
|
+
width: 100%;
|
20623
|
+
padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-03, 0.5rem);
|
20624
|
+
margin: 0;
|
20625
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
20626
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-danger-02, #da1e28);
|
20627
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
20628
|
+
}
|
20629
|
+
|
20630
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box[data-invalid]:focus-within ~ .bx--form-requirement {
|
20631
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
20632
|
+
}
|
20633
|
+
|
20634
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--list-box__invalid-icon,
|
20635
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input__invalid-icon,
|
20636
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
|
20637
|
+
z-index: 4;
|
20638
|
+
top: calc(100% + var(--cds-spacing-04, 0.75rem) + var(--cds-spacing-01, 0.125rem));
|
20639
|
+
right: var(--cds-spacing-03, 0.5rem);
|
20640
|
+
}
|
20641
|
+
|
20642
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__invalid {
|
20643
|
+
top: calc(100% + var(--cds-spacing-02, 0.25rem) + var(--cds-spacing-01, 0.125rem));
|
20644
|
+
}
|
20645
|
+
|
20646
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
|
20647
|
+
position: absolute;
|
20648
|
+
top: 0;
|
20649
|
+
left: var(--cds-spacing-01, 0.125rem);
|
20650
|
+
width: calc(100% - (var(--cds-spacing-01, 0.125rem) * 2));
|
20651
|
+
height: var(--cds-spacing-01, 0.125rem);
|
20652
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
20653
|
+
content: "";
|
20654
|
+
}
|
20655
|
+
|
20656
|
+
.c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
|
20657
|
+
position: absolute;
|
20658
|
+
top: var(--cds-spacing-01, 0.125rem);
|
20659
|
+
left: var(--cds-spacing-03, 0.5rem);
|
20660
|
+
width: calc(100% - (var(--cds-spacing-03, 0.5rem) * 2));
|
20661
|
+
height: 1px;
|
20662
|
+
background-color: var(--cds-ui-03, #e0e0e0);
|
20663
|
+
content: "";
|
20664
|
+
}
|
20665
|
+
|
20666
|
+
.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::before {
|
20667
|
+
background-color: var(--cds-ui-03, #e0e0e0);
|
20668
|
+
}
|
20669
|
+
.c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--form-requirement::after {
|
20670
|
+
background-color: transparent;
|
20671
|
+
}
|
20672
|
+
|
20673
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--text-input:focus,
|
20674
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus,
|
20675
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number]:focus ~ .bx--number__controls .bx--number__control-btn:hover,
|
20676
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number__control-btn:focus {
|
20677
|
+
outline-color: var(--cds-support-01, #da1e28);
|
20678
|
+
}
|
20679
|
+
|
20680
|
+
.c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
|
20681
|
+
background-color: var(--cds-support-01, #da1e28);
|
20682
|
+
}
|
20683
|
+
|
20686
20684
|
.c4p--datagrid__datagridWrap {
|
20687
20685
|
display: block;
|
20688
20686
|
width: 100%;
|
@@ -20845,6 +20843,60 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20845
20843
|
margin-bottom: var(--cds-spacing-05, 1rem);
|
20846
20844
|
}
|
20847
20845
|
|
20846
|
+
.c4p--inline-edit-v2 {
|
20847
|
+
display: flex;
|
20848
|
+
align-items: center;
|
20849
|
+
background: transparent;
|
20850
|
+
cursor: pointer;
|
20851
|
+
}
|
20852
|
+
.c4p--inline-edit-v2-readonly {
|
20853
|
+
cursor: not-allowed;
|
20854
|
+
}
|
20855
|
+
.c4p--inline-edit-v2:hover {
|
20856
|
+
background: var(--cds-hover-ui, #e5e5e5);
|
20857
|
+
}
|
20858
|
+
.c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
|
20859
|
+
visibility: visible;
|
20860
|
+
}
|
20861
|
+
.c4p--inline-edit-v2__btn-edit {
|
20862
|
+
visibility: hidden;
|
20863
|
+
}
|
20864
|
+
.c4p--inline-edit-v2-focused {
|
20865
|
+
background: var(--cds-hover-ui, #e5e5e5);
|
20866
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
20867
|
+
}
|
20868
|
+
.c4p--inline-edit-v2__text-input {
|
20869
|
+
flex: 1;
|
20870
|
+
}
|
20871
|
+
.c4p--inline-edit-v2__warning-icon {
|
20872
|
+
color: var(--cds-support-01, #da1e28);
|
20873
|
+
}
|
20874
|
+
.c4p--inline-edit-v2__warning-text {
|
20875
|
+
font-size: var(--cds-caption-01-font-size, 0.75rem);
|
20876
|
+
font-weight: var(--cds-caption-01-font-weight, 400);
|
20877
|
+
line-height: var(--cds-caption-01-line-height, 1.33333);
|
20878
|
+
letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
|
20879
|
+
margin-top: var(--cds-spacing-03, 0.5rem);
|
20880
|
+
color: var(--cds-support-01, #da1e28);
|
20881
|
+
}
|
20882
|
+
|
20883
|
+
.c4p--inline-edit-v2__text-input.bx--text-input {
|
20884
|
+
border: none;
|
20885
|
+
background: transparent;
|
20886
|
+
cursor: pointer;
|
20887
|
+
outline: none;
|
20888
|
+
}
|
20889
|
+
|
20890
|
+
.c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.bx--text-input {
|
20891
|
+
color: var(--cds-disabled-02, #c6c6c6);
|
20892
|
+
cursor: not-allowed;
|
20893
|
+
}
|
20894
|
+
|
20895
|
+
.c4p--inline-edit-v2__text-input.bx--text-input:focus,
|
20896
|
+
.c4p--inline-edit-v2__text-input.bx--text-input:active {
|
20897
|
+
outline: none;
|
20898
|
+
}
|
20899
|
+
|
20848
20900
|
@font-face {
|
20849
20901
|
font-display: auto;
|
20850
20902
|
font-family: "IBM Plex Mono";
|
@@ -27795,7 +27847,7 @@ button.bx--dropdown-text:focus {
|
|
27795
27847
|
}
|
27796
27848
|
|
27797
27849
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
27798
|
-
.bx--inline-
|
27850
|
+
.bx--inline-notification .bx--inline-notification__close-icon {
|
27799
27851
|
fill: ButtonText;
|
27800
27852
|
}
|
27801
27853
|
}
|
@@ -28055,7 +28107,7 @@ button.bx--dropdown-text:focus {
|
|
28055
28107
|
}
|
28056
28108
|
|
28057
28109
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
28058
|
-
.bx--toast-
|
28110
|
+
.bx--toast-notification .bx--toast-notification__close-icon {
|
28059
28111
|
fill: ButtonText;
|
28060
28112
|
}
|
28061
28113
|
}
|