@carbon/ibm-products 2.21.0 → 2.23.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -4
- package/css/index-full-carbon.css +559 -357
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +227 -267
- 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 +271 -295
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +251 -298
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/es/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +26 -0
- package/es/components/Datagrid/useDefaultStringRenderer.js +3 -3
- package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/es/components/Datagrid/useSortableColumns.js +15 -5
- package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
- package/es/components/DelimitedList/DelimitedList.js +73 -0
- package/es/components/DelimitedList/index.js +8 -0
- package/es/components/FilterSummary/FilterSummary.js +100 -19
- package/es/components/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +31 -7
- package/es/components/TagSet/TagSetOverflow.js +13 -8
- package/es/components/index.js +2 -1
- package/es/global/js/hooks/useResizeObserver.js +5 -2
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +30 -72
- package/lib/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +36 -0
- package/lib/components/Datagrid/useDefaultStringRenderer.js +3 -3
- package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
- package/lib/components/Datagrid/useSortableColumns.js +15 -5
- package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
- package/lib/components/DelimitedList/DelimitedList.js +78 -0
- package/lib/components/DelimitedList/index.js +12 -0
- package/lib/components/FilterSummary/FilterSummary.js +103 -23
- package/lib/components/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +31 -7
- package/lib/components/TagSet/TagSetOverflow.js +12 -7
- package/lib/components/index.js +8 -1
- package/lib/global/js/hooks/useResizeObserver.js +5 -2
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +9 -8
- package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -38
- package/scss/components/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +24 -1
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
- package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
- package/scss/components/DelimitedList/_delimited-list.scss +27 -0
- package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
- package/scss/components/DelimitedList/_index.scss +8 -0
- package/scss/components/EditSidePanel/_edit-side-panel.scss +0 -18
- package/scss/components/FilterSummary/_filter-summary.scss +22 -1
- package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
- package/scss/components/SidePanel/_side-panel.scss +155 -187
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/telemetry.yml +790 -0
@@ -2058,6 +2058,10 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2058
2058
|
border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2059
2059
|
}
|
2060
2060
|
|
2061
|
+
/* One or two values
|
2062
|
+
* - width (first value)
|
2063
|
+
* - min-width (optional second value)
|
2064
|
+
*/
|
2061
2065
|
@keyframes hide-feedback {
|
2062
2066
|
0% {
|
2063
2067
|
opacity: 1;
|
@@ -2284,76 +2288,90 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2284
2288
|
white-space: nowrap;
|
2285
2289
|
}
|
2286
2290
|
|
2291
|
+
.c4p--side-panel--scrolls {
|
2292
|
+
overflow: auto;
|
2293
|
+
overflow-x: hidden;
|
2294
|
+
}
|
2295
|
+
|
2287
2296
|
.c4p--side-panel__container {
|
2288
|
-
--c4p--side-panel--
|
2289
|
-
--c4p--side-panel--
|
2290
|
-
--c4p--side-panel--title-
|
2291
|
-
--c4p--side-panel--
|
2292
|
-
--c4p--side-panel--action-bar-container-height: 0;
|
2293
|
-
--c4p--side-panel--divider-opacity: 0;
|
2294
|
-
--c4p--side-panel--title-y-position: 0;
|
2295
|
-
--c4p--side-panel--content-bottom-padding: 4rem;
|
2296
|
-
--c4p--side-panel--collapsed-title-y-position: 1rem;
|
2297
|
-
--c4p--side-panel--label-text-height: 0;
|
2298
|
-
--c4p--side-panel--title-padding-right: 3rem;
|
2297
|
+
--c4p--side-panel--title-stop: 1rem;
|
2298
|
+
--c4p--side-panel--scroll-animation-progress: 0;
|
2299
|
+
--c4p--side-panel--title-padding-right: 2rem;
|
2300
|
+
--c4p--side-panel--actions-height: 4rem;
|
2299
2301
|
position: fixed;
|
2300
2302
|
z-index: 9000;
|
2301
2303
|
top: 3rem;
|
2304
|
+
display: grid;
|
2302
2305
|
height: calc(100% - 3rem);
|
2303
2306
|
box-sizing: border-box;
|
2304
2307
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2305
2308
|
color: var(--cds-text-primary, #161616);
|
2309
|
+
grid-template-rows: 1fr auto; /* titles and content */
|
2306
2310
|
}
|
2307
2311
|
.c4p--side-panel__container.c4p--side-panel__container--xs {
|
2312
|
+
/* any value is single value list */
|
2308
2313
|
width: 16rem;
|
2309
2314
|
max-width: 100%;
|
2310
2315
|
}
|
2311
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-
|
2312
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-
|
2313
|
-
|
2316
|
+
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2317
|
+
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2318
|
+
/* any value is single value list */
|
2314
2319
|
width: 16rem;
|
2315
2320
|
max-width: 100%;
|
2316
2321
|
}
|
2317
2322
|
.c4p--side-panel__container.c4p--side-panel__container--sm {
|
2323
|
+
/* any value is single value list */
|
2318
2324
|
width: 20rem;
|
2319
2325
|
max-width: 100%;
|
2320
2326
|
}
|
2321
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-
|
2322
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-
|
2323
|
-
|
2327
|
+
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2328
|
+
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2329
|
+
/* any value is single value list */
|
2324
2330
|
width: 20rem;
|
2325
2331
|
max-width: 100%;
|
2326
2332
|
}
|
2327
2333
|
.c4p--side-panel__container.c4p--side-panel__container--md {
|
2334
|
+
/* any value is single value list */
|
2328
2335
|
width: 30rem;
|
2329
2336
|
max-width: 100%;
|
2330
2337
|
}
|
2331
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-
|
2332
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-
|
2333
|
-
|
2338
|
+
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2339
|
+
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2340
|
+
/* any value is single value list */
|
2334
2341
|
width: 30rem;
|
2335
2342
|
max-width: 100%;
|
2336
2343
|
}
|
2337
2344
|
.c4p--side-panel__container.c4p--side-panel__container--lg {
|
2345
|
+
/* any value is single value list */
|
2338
2346
|
width: 40rem;
|
2339
2347
|
max-width: 100%;
|
2340
2348
|
}
|
2341
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-
|
2342
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-
|
2343
|
-
|
2349
|
+
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2350
|
+
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2351
|
+
/* any value is single value list */
|
2344
2352
|
width: 40rem;
|
2345
2353
|
max-width: 100%;
|
2346
2354
|
}
|
2347
2355
|
.c4p--side-panel__container.c4p--side-panel__container--2xl {
|
2348
|
-
|
2356
|
+
/* any value is single value list */
|
2357
|
+
width: 40rem;
|
2358
|
+
min-width: 75%;
|
2349
2359
|
max-width: 100%;
|
2350
2360
|
}
|
2351
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-
|
2352
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-
|
2353
|
-
|
2354
|
-
width:
|
2361
|
+
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2362
|
+
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2363
|
+
/* any value is single value list */
|
2364
|
+
width: 40rem;
|
2365
|
+
min-width: 75%;
|
2355
2366
|
max-width: 100%;
|
2356
2367
|
}
|
2368
|
+
.c4p--side-panel__container:not(:has(.c4p--side-panel__animated-scroll-wrapper)), .c4p--side-panel__container.c4p--side-panel__container--has-no-animated-scroll-wrapper {
|
2369
|
+
/* if the title does not scroll then we have a child scrolling section. */
|
2370
|
+
grid-template-rows: auto 1fr auto; /* titles content actions */
|
2371
|
+
}
|
2372
|
+
.c4p--side-panel__container.c4p--side-panel__container--condensed-actions {
|
2373
|
+
--c4p--side-panel--actions-height: 3rem;
|
2374
|
+
}
|
2357
2375
|
.c4p--side-panel__container .c4p--side-panel__actions-container {
|
2358
2376
|
width: 100%;
|
2359
2377
|
}
|
@@ -2365,46 +2383,30 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2365
2383
|
left: 0;
|
2366
2384
|
border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2367
2385
|
}
|
2368
|
-
.c4p--side-panel__container.c4p--side-panel__container-
|
2369
|
-
/* stylelint-disable-next-line max-nesting-depth */
|
2370
|
-
}
|
2371
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
|
2372
|
-
content: none;
|
2373
|
-
}
|
2374
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar {
|
2375
|
-
/* stylelint-disable-next-line max-nesting-depth */
|
2376
|
-
}
|
2377
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
|
2378
|
-
position: absolute;
|
2379
|
-
bottom: 0;
|
2380
|
-
left: 0;
|
2381
|
-
width: 100%;
|
2382
|
-
height: 1px;
|
2383
|
-
background-color: var(--cds-border-subtle-02, #e0e0e0);
|
2384
|
-
content: "";
|
2385
|
-
opacity: var(--c4p--side-panel--divider-opacity);
|
2386
|
-
}
|
2387
|
-
.c4p--side-panel__container.c4p--side-panel__container-without-overlay {
|
2386
|
+
.c4p--side-panel__container.c4p--side-panel__container--slide-in, .c4p--side-panel__container.c4p--side-panel__container:not(:has(+ .c4p--side-panel__overlay)), .c4p--side-panel__container.c4p--side-panel__container--has-no-overlay {
|
2388
2387
|
box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
2389
2388
|
}
|
2390
|
-
.c4p--side-panel__container .c4p--side-
|
2389
|
+
.c4p--side-panel__container .c4p--side-panel__header {
|
2390
|
+
--c4p--side-panel--title-padding-bottom: 1rem;
|
2391
2391
|
position: sticky;
|
2392
2392
|
z-index: 4;
|
2393
|
-
|
2393
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2394
|
+
top: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
|
2394
2395
|
padding: 1rem;
|
2396
|
+
padding-bottom: 0;
|
2395
2397
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2396
2398
|
/* stylelint-disable-next-line max-nesting-depth */
|
2397
2399
|
}
|
2398
|
-
.c4p--side-panel__container .c4p--side-
|
2399
|
-
padding-bottom: 0.5rem;
|
2400
|
+
.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__subtitle-text), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-subtitle {
|
2401
|
+
--c4p--side-panel--title-padding-bottom: 0.5rem;
|
2400
2402
|
}
|
2401
|
-
.c4p--side-panel__container .c4p--side-
|
2403
|
+
.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back {
|
2402
2404
|
padding-top: 2rem;
|
2403
2405
|
}
|
2404
|
-
.c4p--side-panel__container .c4p--side-
|
2406
|
+
.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button.cds--btn--md), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back.cds--btn--md {
|
2405
2407
|
padding-top: 2.5rem;
|
2406
2408
|
}
|
2407
|
-
.c4p--side-panel__container .c4p--side-
|
2409
|
+
.c4p--side-panel__container .c4p--side-panel__header::before {
|
2408
2410
|
position: absolute;
|
2409
2411
|
bottom: 0;
|
2410
2412
|
left: 0;
|
@@ -2412,47 +2414,56 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2412
2414
|
height: 1px;
|
2413
2415
|
background-color: var(--cds-border-subtle-02, #e0e0e0);
|
2414
2416
|
content: "";
|
2415
|
-
opacity: var(--c4p--side-panel--
|
2417
|
+
opacity: var(--c4p--side-panel--scroll-animation-progress);
|
2418
|
+
z-index: 9;
|
2419
|
+
}
|
2420
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation {
|
2421
|
+
position: relative;
|
2422
|
+
top: 0;
|
2416
2423
|
}
|
2417
|
-
.c4p--side-panel__container .c4p--side-
|
2424
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation::before {
|
2425
|
+
opacity: 1;
|
2426
|
+
}
|
2427
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion {
|
2418
2428
|
z-index: 5;
|
2419
2429
|
border-bottom: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2420
2430
|
margin-bottom: 1rem;
|
2421
2431
|
}
|
2422
|
-
.c4p--side-panel__container .c4p--side-
|
2432
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion.c4p--side-panel__header--no-title-animation {
|
2423
2433
|
border-bottom: 0;
|
2424
2434
|
margin-bottom: 0;
|
2425
2435
|
}
|
2426
|
-
.c4p--side-panel__container .c4p--side-
|
2427
|
-
top:
|
2428
|
-
}
|
2429
|
-
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
|
2430
|
-
top: 2.5rem;
|
2436
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__collapsed-title-text {
|
2437
|
+
top: 1rem;
|
2431
2438
|
}
|
2432
|
-
.c4p--side-panel__container .c4p--side-
|
2433
|
-
|
2439
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
|
2440
|
+
top: 1.5rem;
|
2434
2441
|
}
|
2435
|
-
.c4p--side-panel__container .c4p--side-
|
2442
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step:not(:has(.c4p--side-panel__title-text)) {
|
2436
2443
|
height: calc(2.5rem + 0.25rem);
|
2437
2444
|
padding: 1rem 1rem 0.5rem 1rem;
|
2438
2445
|
}
|
2439
|
-
.c4p--side-panel__container .c4p--side-panel__title-
|
2446
|
+
.c4p--side-panel__container .c4p--side-panel__header:not(:has(.c4p--side-panel__title-text))::before, .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-no-title::before {
|
2440
2447
|
background-color: transparent;
|
2441
2448
|
}
|
2442
|
-
.c4p--side-panel__container.c4p--side-panel__container--has-slug {
|
2443
|
-
--c4p--side-panel--title-padding-right:
|
2444
|
-
}
|
2445
|
-
.c4p--side-panel__container.c4p--side-panel__container-is-animating {
|
2446
|
-
pointer-events: none;
|
2449
|
+
.c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar), .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar, .c4p--side-panel__container.c4p--side-panel__container--has-slug {
|
2450
|
+
--c4p--side-panel--title-padding-right: 4rem;
|
2447
2451
|
}
|
2448
|
-
.c4p--side-panel__container.c4p--side-panel__container-
|
2449
|
-
|
2452
|
+
.c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar).c4p--side-panel__container--has-slug, .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar.c4p--side-panel__container--has-slug {
|
2453
|
+
--c4p--side-panel--title-padding-right: 5rem;
|
2450
2454
|
}
|
2451
|
-
.c4p--side-panel__container
|
2452
|
-
|
2455
|
+
.c4p--side-panel__container .c4p--side-panel__animated-scroll-wrapper {
|
2456
|
+
display: grid;
|
2457
|
+
grid-template-rows: auto 1fr;
|
2453
2458
|
}
|
2454
|
-
.c4p--side-panel__container
|
2455
|
-
|
2459
|
+
.c4p--side-panel__container .c4p--side-panel__title {
|
2460
|
+
position: sticky;
|
2461
|
+
z-index: 4;
|
2462
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2463
|
+
top: var(--c4p--side-panel--title-stop);
|
2464
|
+
/* border-bottom used instead of padding which wrapped text shows through */
|
2465
|
+
border-bottom: var(--c4p--side-panel--title-padding-bottom) solid transparent;
|
2466
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
2456
2467
|
}
|
2457
2468
|
.c4p--side-panel__container .c4p--side-panel__title-text {
|
2458
2469
|
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
@@ -2465,12 +2476,14 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2465
2476
|
padding-right: var(--c4p--side-panel--title-padding-right);
|
2466
2477
|
-webkit-box-orient: vertical;
|
2467
2478
|
-webkit-line-clamp: 2;
|
2468
|
-
|
2469
|
-
|
2470
|
-
|
2471
|
-
|
2472
|
-
|
2473
|
-
|
2479
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2480
|
+
}
|
2481
|
+
.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
|
2482
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2483
|
+
transform: translateY(calc(-1 * 1rem * var(--c4p--side-panel--scroll-animation-progress)));
|
2484
|
+
}
|
2485
|
+
.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__title-text {
|
2486
|
+
position: static;
|
2474
2487
|
}
|
2475
2488
|
.c4p--side-panel__container .c4p--side-panel__label-text {
|
2476
2489
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
@@ -2479,9 +2492,8 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2479
2492
|
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
2480
2493
|
overflow: hidden;
|
2481
2494
|
padding-right: var(--c4p--side-panel--title-padding-right);
|
2482
|
-
opacity: var(--c4p--side-panel--
|
2495
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2483
2496
|
text-overflow: ellipsis;
|
2484
|
-
transform: translateY(var(--c4p--side-panel--title-y-position));
|
2485
2497
|
white-space: nowrap;
|
2486
2498
|
}
|
2487
2499
|
.c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
|
@@ -2496,9 +2508,13 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2496
2508
|
-webkit-box-orient: vertical;
|
2497
2509
|
-webkit-line-clamp: 2;
|
2498
2510
|
position: absolute;
|
2499
|
-
|
2500
|
-
|
2501
|
-
|
2511
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2512
|
+
top: 0;
|
2513
|
+
opacity: var(--c4p--side-panel--scroll-animation-progress);
|
2514
|
+
}
|
2515
|
+
.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__collapsed-title-text {
|
2516
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2517
|
+
transform: translateY(calc(1rem * (1 - var(--c4p--side-panel--scroll-animation-progress))));
|
2502
2518
|
}
|
2503
2519
|
.c4p--side-panel__container .c4p--side-panel__subtitle-text {
|
2504
2520
|
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
@@ -2506,75 +2522,41 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2506
2522
|
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
2507
2523
|
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
2508
2524
|
overflow: hidden;
|
2509
|
-
padding:
|
2525
|
+
padding-right: var(--c4p--side-panel--title-padding-right);
|
2526
|
+
padding-bottom: 1rem;
|
2510
2527
|
-webkit-box-orient: vertical;
|
2511
2528
|
-webkit-line-clamp: 3;
|
2512
|
-
opacity: var(--c4p--side-panel--
|
2529
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2513
2530
|
}
|
2514
|
-
.c4p--side-panel__container .c4p--side-
|
2515
|
-
position: fixed;
|
2531
|
+
.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2516
2532
|
z-index: 2;
|
2517
|
-
top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
|
2518
2533
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2519
2534
|
}
|
2520
|
-
.c4p--side-panel__container .c4p--side-
|
2521
|
-
top: var(--c4p--side-panel--title-text-height);
|
2522
|
-
}
|
2523
|
-
.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
|
2535
|
+
.c4p--side-panel__container .c4p--side-panel__title-text + .c4p--side-panel__subtitle-text {
|
2524
2536
|
padding-top: 1rem;
|
2525
|
-
padding-right: 3rem;
|
2526
|
-
}
|
2527
|
-
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
|
2528
|
-
top: 0;
|
2529
|
-
}
|
2530
|
-
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
|
2531
|
-
position: fixed;
|
2532
|
-
height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
|
2533
2537
|
}
|
2534
2538
|
.c4p--side-panel__container .c4p--side-panel__inner-content {
|
2535
|
-
|
2536
|
-
|
2537
|
-
margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height));
|
2538
|
-
overflow-x: hidden;
|
2539
|
+
padding: 1rem;
|
2540
|
+
padding-top: 0;
|
2539
2541
|
}
|
2540
|
-
.c4p--side-panel__container.c4p--side-
|
2541
|
-
|
2542
|
+
.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__action-toolbar) + .c4p--side-panel__inner-content,
|
2543
|
+
.c4p--side-panel__container .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
|
2544
|
+
padding-top: 0.5rem;
|
2542
2545
|
}
|
2543
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content
|
2544
|
-
|
2546
|
+
.c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
|
2547
|
+
background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
|
2548
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
2545
2549
|
}
|
2546
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-
|
2547
|
-
height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (3rem + 4rem));
|
2550
|
+
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__inner-content--static {
|
2548
2551
|
padding-top: 1rem;
|
2549
2552
|
}
|
2550
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content-no-actions {
|
2551
|
-
height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height)));
|
2552
|
-
}
|
2553
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2554
|
-
position: fixed;
|
2555
|
-
top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
|
2556
|
-
width: 100%;
|
2557
|
-
border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
|
2558
|
-
}
|
2559
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
|
2560
|
-
margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
|
2561
|
-
}
|
2562
|
-
.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
|
2563
|
-
border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
|
2564
|
-
margin-bottom: 1rem;
|
2565
|
-
}
|
2566
2553
|
.c4p--side-panel__container .c4p--side-panel__action-toolbar {
|
2567
2554
|
position: sticky;
|
2568
2555
|
z-index: 4;
|
2569
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
2570
|
-
top: var(--c4p--side-panel--title-height);
|
2571
2556
|
display: flex;
|
2572
2557
|
align-items: center;
|
2573
2558
|
justify-content: flex-start;
|
2574
|
-
padding: 0 1rem;
|
2575
|
-
margin-bottom: 0.5rem;
|
2576
2559
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2577
|
-
transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
2578
2560
|
}
|
2579
2561
|
.c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
|
2580
2562
|
margin-right: 0.5rem;
|
@@ -2606,21 +2588,13 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2606
2588
|
}
|
2607
2589
|
.c4p--side-panel__container .c4p--side-panel__slug-and-close {
|
2608
2590
|
position: fixed;
|
2609
|
-
z-index:
|
2591
|
+
z-index: 10; /* must be higher than title container border bottom */
|
2610
2592
|
top: 0;
|
2611
2593
|
right: 0;
|
2612
2594
|
display: flex;
|
2613
2595
|
}
|
2614
|
-
.c4p--side-panel__container .c4p--side-panel__body-content {
|
2615
|
-
padding: 1rem;
|
2616
|
-
padding-top: 0;
|
2617
|
-
}
|
2618
|
-
.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--2xl {
|
2619
|
-
width: 100%;
|
2620
|
-
max-width: 100%;
|
2621
|
-
}
|
2622
2596
|
.c4p--side-panel__container .c4p--side-panel__actions-container {
|
2623
|
-
position:
|
2597
|
+
position: sticky;
|
2624
2598
|
bottom: 0;
|
2625
2599
|
border-top: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2626
2600
|
background-color: var(--cds-layer-01, #f4f4f4);
|
@@ -2640,13 +2614,11 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2640
2614
|
width: 25%;
|
2641
2615
|
}
|
2642
2616
|
}
|
2643
|
-
.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
|
2644
|
-
height:
|
2645
|
-
}
|
2646
|
-
.c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
|
2647
|
-
height: 3rem;
|
2617
|
+
.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
|
2618
|
+
height: var(--c4p--side-panel--actions-height);
|
2648
2619
|
}
|
2649
2620
|
.c4p--side-panel__container.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--sm {
|
2621
|
+
/* any value is single value list */
|
2650
2622
|
width: 16rem;
|
2651
2623
|
max-width: 100%;
|
2652
2624
|
}
|
@@ -2704,76 +2676,6 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2704
2676
|
padding-right: calc(20% - 1rem);
|
2705
2677
|
}
|
2706
2678
|
|
2707
|
-
.c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
|
2708
|
-
width: calc(16rem - 1rem);
|
2709
|
-
padding-right: calc(16rem * 0.2 - 1rem);
|
2710
|
-
margin-bottom: 0.25rem;
|
2711
|
-
}
|
2712
|
-
|
2713
|
-
.c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
|
2714
|
-
width: calc(16rem - 1rem);
|
2715
|
-
padding-right: calc(16rem * 0.2 - 1rem);
|
2716
|
-
padding-bottom: 1rem;
|
2717
|
-
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2718
|
-
color: var(--cds-text-secondary, #525252);
|
2719
|
-
}
|
2720
|
-
|
2721
|
-
.c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
|
2722
|
-
width: calc(20rem - 1rem);
|
2723
|
-
padding-right: calc(20rem * 0.2 - 1rem);
|
2724
|
-
margin-bottom: 0.25rem;
|
2725
|
-
}
|
2726
|
-
|
2727
|
-
.c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
|
2728
|
-
width: calc(20rem - 1rem);
|
2729
|
-
padding-right: calc(20rem * 0.2 - 1rem);
|
2730
|
-
padding-bottom: 1rem;
|
2731
|
-
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2732
|
-
color: var(--cds-text-secondary, #525252);
|
2733
|
-
}
|
2734
|
-
|
2735
|
-
.c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
|
2736
|
-
width: calc(30rem - 1rem);
|
2737
|
-
padding-right: calc(30rem * 0.2 - 1rem);
|
2738
|
-
margin-bottom: 0.25rem;
|
2739
|
-
}
|
2740
|
-
|
2741
|
-
.c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
|
2742
|
-
width: calc(30rem - 1rem);
|
2743
|
-
padding-right: calc(30rem * 0.2 - 1rem);
|
2744
|
-
padding-bottom: 1rem;
|
2745
|
-
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2746
|
-
color: var(--cds-text-secondary, #525252);
|
2747
|
-
}
|
2748
|
-
|
2749
|
-
.c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
|
2750
|
-
width: calc(40rem - 1rem);
|
2751
|
-
padding-right: calc(40rem * 0.2 - 1rem);
|
2752
|
-
margin-bottom: 0.25rem;
|
2753
|
-
}
|
2754
|
-
|
2755
|
-
.c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
|
2756
|
-
width: calc(40rem - 1rem);
|
2757
|
-
padding-right: calc(40rem * 0.2 - 1rem);
|
2758
|
-
padding-bottom: 1rem;
|
2759
|
-
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2760
|
-
color: var(--cds-text-secondary, #525252);
|
2761
|
-
}
|
2762
|
-
|
2763
|
-
.c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
|
2764
|
-
width: calc(75% - 1rem);
|
2765
|
-
padding-right: calc(75% * 0.2 - 1rem);
|
2766
|
-
margin-bottom: 0.25rem;
|
2767
|
-
}
|
2768
|
-
|
2769
|
-
.c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
|
2770
|
-
width: calc(75% - 1rem);
|
2771
|
-
padding-right: calc(75% * 0.2 - 1rem);
|
2772
|
-
padding-bottom: 1rem;
|
2773
|
-
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2774
|
-
color: var(--cds-text-secondary, #525252);
|
2775
|
-
}
|
2776
|
-
|
2777
2679
|
.cds--form.c4p--create-side-panel__form {
|
2778
2680
|
padding-top: 1rem;
|
2779
2681
|
}
|
@@ -2805,32 +2707,10 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2805
2707
|
display: none;
|
2806
2708
|
}
|
2807
2709
|
|
2808
|
-
.c4p--create-side-
|
2809
|
-
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
2810
|
-
font-weight: var(--cds-heading-03-font-weight, 400);
|
2811
|
-
line-height: var(--cds-heading-03-line-height, 1.4);
|
2812
|
-
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
2813
|
-
margin-bottom: 0.25rem;
|
2814
|
-
}
|
2815
|
-
|
2816
|
-
.c4p--create-side-panel__subtitle {
|
2817
|
-
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
2818
|
-
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
2819
|
-
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
2820
|
-
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
2821
|
-
margin-bottom: 0.5rem;
|
2710
|
+
.c4p--create-side-panel .c4p--side-panel__subtitle-text {
|
2822
2711
|
color: var(--cds-text-secondary, #525252);
|
2823
2712
|
}
|
2824
2713
|
|
2825
|
-
.c4p--side-panel .c4p--create-side-panel__actions-container {
|
2826
|
-
position: absolute;
|
2827
|
-
z-index: 4;
|
2828
|
-
right: 0;
|
2829
|
-
bottom: 0;
|
2830
|
-
width: 100%;
|
2831
|
-
margin-bottom: 0;
|
2832
|
-
}
|
2833
|
-
|
2834
2714
|
.c4p--tearsheet.c4p--tearsheet {
|
2835
2715
|
z-index: 9001;
|
2836
2716
|
align-items: flex-end;
|
@@ -3249,6 +3129,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3249
3129
|
position: sticky;
|
3250
3130
|
z-index: 1;
|
3251
3131
|
left: 0;
|
3132
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
3252
3133
|
}
|
3253
3134
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
|
3254
3135
|
align-items: center;
|
@@ -3270,6 +3151,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3270
3151
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
|
3271
3152
|
position: sticky;
|
3272
3153
|
left: 0;
|
3154
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
3273
3155
|
}
|
3274
3156
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
|
3275
3157
|
display: flex;
|
@@ -3320,6 +3202,15 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3320
3202
|
background-color: var(--cds-background, #ffffff);
|
3321
3203
|
}
|
3322
3204
|
|
3205
|
+
.c4p--datagrid th.c4p--datagrid__with-slug {
|
3206
|
+
background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
|
3207
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
3208
|
+
}
|
3209
|
+
|
3210
|
+
.c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
|
3211
|
+
margin-left: 0.5rem;
|
3212
|
+
}
|
3213
|
+
|
3323
3214
|
.c4p--datagrid__grid-container {
|
3324
3215
|
display: block;
|
3325
3216
|
width: 100%;
|
@@ -3346,6 +3237,9 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3346
3237
|
height: 100%;
|
3347
3238
|
overflow-x: auto;
|
3348
3239
|
}
|
3240
|
+
.c4p--datagrid__grid-container .c4p--datagrid-filter-panel + .c4p--datagrid__table-container-inner .cds--data-table-content {
|
3241
|
+
height: fit-content;
|
3242
|
+
}
|
3349
3243
|
.c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
|
3350
3244
|
display: flex;
|
3351
3245
|
overflow: auto;
|
@@ -3388,6 +3282,9 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3388
3282
|
-webkit-line-clamp: 2;
|
3389
3283
|
white-space: initial;
|
3390
3284
|
}
|
3285
|
+
.c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--slug {
|
3286
|
+
width: fit-content;
|
3287
|
+
}
|
3391
3288
|
.c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
|
3392
3289
|
display: flex;
|
3393
3290
|
overflow: hidden;
|
@@ -3483,7 +3380,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3483
3380
|
}
|
3484
3381
|
|
3485
3382
|
.c4p--datagrid__resizableColumn:hover {
|
3486
|
-
background-color: var(--cds-
|
3383
|
+
background-color: var(--cds-layer-selected-hover);
|
3487
3384
|
}
|
3488
3385
|
.c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
|
3489
3386
|
border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
|
@@ -4030,6 +3927,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
4030
3927
|
display: flex;
|
4031
3928
|
align-items: center;
|
4032
3929
|
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
3930
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
4033
3931
|
}
|
4034
3932
|
|
4035
3933
|
.c4p--datagrid__right-sticky-column-header {
|
@@ -4045,6 +3943,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
4045
3943
|
display: flex;
|
4046
3944
|
align-items: center;
|
4047
3945
|
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
3946
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
4048
3947
|
}
|
4049
3948
|
|
4050
3949
|
.c4p--datagrid__left-sticky-column-header {
|
@@ -5043,16 +4942,34 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
5043
4942
|
width: 100%;
|
5044
4943
|
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
5045
4944
|
height: 3rem;
|
5046
|
-
align-items:
|
4945
|
+
align-items: start;
|
5047
4946
|
padding: 0.5rem;
|
5048
4947
|
border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
|
5049
4948
|
background: var(--cds-layer-01, #f4f4f4);
|
5050
4949
|
}
|
4950
|
+
.c4p--filter-summary.c4p--filter-summary__expanded {
|
4951
|
+
height: fit-content;
|
4952
|
+
}
|
5051
4953
|
|
5052
4954
|
.c4p--filter-summary .c4p--tag-set.c4p--tag-set.c4p--filter-summary__clear-button-inline {
|
5053
4955
|
width: auto;
|
5054
4956
|
}
|
5055
4957
|
|
4958
|
+
.c4p--filter-summary__view-all--wrapper {
|
4959
|
+
position: absolute;
|
4960
|
+
top: 0.5rem;
|
4961
|
+
right: 0;
|
4962
|
+
}
|
4963
|
+
|
4964
|
+
.c4p--filter-summary__expanded .c4p--filter-summary__clear-all-button.cds--btn {
|
4965
|
+
margin-right: 2rem;
|
4966
|
+
}
|
4967
|
+
|
4968
|
+
.c4p--filter-summary__view-all--wrapper .c4p--filter-summary__view-all--chevron-multiline {
|
4969
|
+
transform: rotate(180deg);
|
4970
|
+
transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
4971
|
+
}
|
4972
|
+
|
5056
4973
|
.c4p--datagrid__datagridWrap {
|
5057
4974
|
display: block;
|
5058
4975
|
width: 100%;
|
@@ -5091,6 +5008,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
5091
5008
|
min-width: auto;
|
5092
5009
|
}
|
5093
5010
|
|
5011
|
+
.c4p--datagrid .cds--pagination {
|
5012
|
+
background-color: var(--cds-layer-02, #ffffff);
|
5013
|
+
}
|
5014
|
+
|
5094
5015
|
.c4p--edit-in-place {
|
5095
5016
|
--c4p--edit-in-place--size: 2rem;
|
5096
5017
|
display: flex;
|
@@ -5465,7 +5386,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
5465
5386
|
}
|
5466
5387
|
|
5467
5388
|
.c4p--card .cds--slug {
|
5468
|
-
background: linear-gradient(
|
5389
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
5469
5390
|
position: absolute;
|
5470
5391
|
top: 1rem;
|
5471
5392
|
right: 1rem;
|
@@ -5494,7 +5415,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
5494
5415
|
}
|
5495
5416
|
|
5496
5417
|
.c4p--card--has-slug {
|
5497
|
-
background: linear-gradient(
|
5418
|
+
background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
|
5498
5419
|
border: 1px solid var(--cds-border-tile);
|
5499
5420
|
}
|
5500
5421
|
|
@@ -6087,9 +6008,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6087
6008
|
}
|
6088
6009
|
}
|
6089
6010
|
.c4p--notifications-panel__container {
|
6011
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
6012
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
6013
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
6014
|
+
--cds-ai-border-start: #4589ff;
|
6015
|
+
--cds-ai-border-strong: #78a9ff;
|
6016
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
6090
6017
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
6091
6018
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
6092
6019
|
--cds-ai-gradient-start-02: transparent;
|
6020
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
6093
6021
|
--cds-background: #161616;
|
6094
6022
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
6095
6023
|
--cds-background-brand: #0f62fe;
|
@@ -6105,11 +6033,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6105
6033
|
--cds-border-strong-02: #8d8d8d;
|
6106
6034
|
--cds-border-strong-03: #a8a8a8;
|
6107
6035
|
--cds-border-subtle-00: #393939;
|
6108
|
-
--cds-border-subtle-01: #
|
6109
|
-
--cds-border-subtle-02: #
|
6036
|
+
--cds-border-subtle-01: #525252;
|
6037
|
+
--cds-border-subtle-02: #6f6f6f;
|
6110
6038
|
--cds-border-subtle-03: #6f6f6f;
|
6111
|
-
--cds-border-subtle-selected-01: #
|
6112
|
-
--cds-border-subtle-selected-02: #
|
6039
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
6040
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
6113
6041
|
--cds-border-subtle-selected-03: #8d8d8d;
|
6114
6042
|
--cds-border-tile-01: #525252;
|
6115
6043
|
--cds-border-tile-02: #6f6f6f;
|
@@ -6171,20 +6099,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6171
6099
|
--cds-skeleton-element: #393939;
|
6172
6100
|
--cds-slug-background: #c6c6c6;
|
6173
6101
|
--cds-slug-background-hover: #e0e0e0;
|
6174
|
-
--cds-slug-callout-aura-end: rgba(
|
6102
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
6175
6103
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
6176
6104
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
6177
6105
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
6178
|
-
--cds-slug-callout-aura-start: rgba(
|
6106
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
6179
6107
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
6180
6108
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
6181
6109
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
6110
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
6111
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
6112
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
6113
|
+
--cds-slug-callout-caret-center: #3f68af;
|
6182
6114
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
6183
6115
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
6184
6116
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
6185
6117
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
6186
6118
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
6187
6119
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
6120
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
6121
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
6188
6122
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
6189
6123
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
6190
6124
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -9889,9 +9823,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9889
9823
|
despite of which carbon theme the user has.
|
9890
9824
|
*/
|
9891
9825
|
.c4p--web-terminal {
|
9826
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
9827
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
9828
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
9829
|
+
--cds-ai-border-start: #4589ff;
|
9830
|
+
--cds-ai-border-strong: #78a9ff;
|
9831
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
9892
9832
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
9893
9833
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
9894
9834
|
--cds-ai-gradient-start-02: transparent;
|
9835
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
9895
9836
|
--cds-background: #262626;
|
9896
9837
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
9897
9838
|
--cds-background-brand: #0f62fe;
|
@@ -9907,11 +9848,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9907
9848
|
--cds-border-strong-02: #a8a8a8;
|
9908
9849
|
--cds-border-strong-03: #c6c6c6;
|
9909
9850
|
--cds-border-subtle-00: #525252;
|
9910
|
-
--cds-border-subtle-01: #
|
9911
|
-
--cds-border-subtle-02: #
|
9851
|
+
--cds-border-subtle-01: #6f6f6f;
|
9852
|
+
--cds-border-subtle-02: #8d8d8d;
|
9912
9853
|
--cds-border-subtle-03: #8d8d8d;
|
9913
|
-
--cds-border-subtle-selected-01: #
|
9914
|
-
--cds-border-subtle-selected-02: #
|
9854
|
+
--cds-border-subtle-selected-01: #8d8d8d;
|
9855
|
+
--cds-border-subtle-selected-02: #a8a8a8;
|
9915
9856
|
--cds-border-subtle-selected-03: #a8a8a8;
|
9916
9857
|
--cds-border-tile-01: #6f6f6f;
|
9917
9858
|
--cds-border-tile-02: #8d8d8d;
|
@@ -9973,20 +9914,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9973
9914
|
--cds-skeleton-element: #525252;
|
9974
9915
|
--cds-slug-background: #c6c6c6;
|
9975
9916
|
--cds-slug-background-hover: #e0e0e0;
|
9976
|
-
--cds-slug-callout-aura-end: rgba(
|
9917
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
9977
9918
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
9978
9919
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
9979
9920
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
9980
|
-
--cds-slug-callout-aura-start: rgba(
|
9921
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
9981
9922
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
9982
9923
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
9983
9924
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
9925
|
+
--cds-slug-callout-caret-bottom: #465060;
|
9926
|
+
--cds-slug-callout-caret-bottom-background: #2d3f5c;
|
9927
|
+
--cds-slug-callout-caret-bottom-background-actions: #253042;
|
9928
|
+
--cds-slug-callout-caret-center: #456fb5;
|
9984
9929
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
9985
9930
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
9986
9931
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
9987
9932
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
9988
9933
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
9989
9934
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
9935
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
9936
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
9990
9937
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
9991
9938
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
9992
9939
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -10303,9 +10250,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10303
10250
|
}
|
10304
10251
|
|
10305
10252
|
.c4p--web-terminal__documentation-overflow {
|
10253
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
10254
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
10255
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
10256
|
+
--cds-ai-border-start: #4589ff;
|
10257
|
+
--cds-ai-border-strong: #78a9ff;
|
10258
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
10306
10259
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
10307
10260
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
10308
10261
|
--cds-ai-gradient-start-02: transparent;
|
10262
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
10309
10263
|
--cds-background: #161616;
|
10310
10264
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
10311
10265
|
--cds-background-brand: #0f62fe;
|
@@ -10321,11 +10275,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10321
10275
|
--cds-border-strong-02: #8d8d8d;
|
10322
10276
|
--cds-border-strong-03: #a8a8a8;
|
10323
10277
|
--cds-border-subtle-00: #393939;
|
10324
|
-
--cds-border-subtle-01: #
|
10325
|
-
--cds-border-subtle-02: #
|
10278
|
+
--cds-border-subtle-01: #525252;
|
10279
|
+
--cds-border-subtle-02: #6f6f6f;
|
10326
10280
|
--cds-border-subtle-03: #6f6f6f;
|
10327
|
-
--cds-border-subtle-selected-01: #
|
10328
|
-
--cds-border-subtle-selected-02: #
|
10281
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
10282
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
10329
10283
|
--cds-border-subtle-selected-03: #8d8d8d;
|
10330
10284
|
--cds-border-tile-01: #525252;
|
10331
10285
|
--cds-border-tile-02: #6f6f6f;
|
@@ -10387,20 +10341,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10387
10341
|
--cds-skeleton-element: #393939;
|
10388
10342
|
--cds-slug-background: #c6c6c6;
|
10389
10343
|
--cds-slug-background-hover: #e0e0e0;
|
10390
|
-
--cds-slug-callout-aura-end: rgba(
|
10344
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
10391
10345
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
10392
10346
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
10393
10347
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
10394
|
-
--cds-slug-callout-aura-start: rgba(
|
10348
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
10395
10349
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
10396
10350
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
10397
10351
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
10352
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
10353
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
10354
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
10355
|
+
--cds-slug-callout-caret-center: #3f68af;
|
10398
10356
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
10399
10357
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
10400
10358
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
10401
10359
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
10402
10360
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
10403
10361
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
10362
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
10363
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
10404
10364
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
10405
10365
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
10406
10366
|
--cds-slug-hollow-hover: #b5b5b5;
|