@carbon/ibm-products 2.21.0 → 2.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -5
- package/css/index-full-carbon.css +531 -251
- 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 +199 -177
- 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 +243 -189
- 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 +223 -192
- 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/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/useRowIsMouseOver.js +3 -1
- 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/SidePanel/SidePanel.js +145 -189
- package/es/components/TagSet/TagSet.js +21 -5
- 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/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/useRowIsMouseOver.js +3 -1
- 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/SidePanel/SidePanel.js +145 -189
- package/lib/components/TagSet/TagSet.js +21 -5
- 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/Datagrid/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_datagrid.scss +9 -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/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
@@ -2152,6 +2152,10 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2152
2152
|
margin-bottom: 0;
|
2153
2153
|
}
|
2154
2154
|
|
2155
|
+
/* One or two values
|
2156
|
+
* - width (first value)
|
2157
|
+
* - min-width (optional second value)
|
2158
|
+
*/
|
2155
2159
|
@keyframes hide-feedback {
|
2156
2160
|
0% {
|
2157
2161
|
opacity: 1;
|
@@ -2378,76 +2382,90 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2378
2382
|
white-space: nowrap;
|
2379
2383
|
}
|
2380
2384
|
|
2385
|
+
.c4p--side-panel--scrolls {
|
2386
|
+
overflow: auto;
|
2387
|
+
overflow-x: hidden;
|
2388
|
+
}
|
2389
|
+
|
2381
2390
|
.c4p--side-panel__container {
|
2382
|
-
--c4p--side-panel--
|
2383
|
-
--c4p--side-panel--
|
2384
|
-
--c4p--side-panel--title-
|
2385
|
-
--c4p--side-panel--
|
2386
|
-
--c4p--side-panel--action-bar-container-height: 0;
|
2387
|
-
--c4p--side-panel--divider-opacity: 0;
|
2388
|
-
--c4p--side-panel--title-y-position: 0;
|
2389
|
-
--c4p--side-panel--content-bottom-padding: 4rem;
|
2390
|
-
--c4p--side-panel--collapsed-title-y-position: 1rem;
|
2391
|
-
--c4p--side-panel--label-text-height: 0;
|
2392
|
-
--c4p--side-panel--title-padding-right: 3rem;
|
2391
|
+
--c4p--side-panel--title-stop: 1rem;
|
2392
|
+
--c4p--side-panel--scroll-animation-progress: 0;
|
2393
|
+
--c4p--side-panel--title-padding-right: 2rem;
|
2394
|
+
--c4p--side-panel--actions-height: 4rem;
|
2393
2395
|
position: fixed;
|
2394
2396
|
z-index: 9000;
|
2395
2397
|
top: 3rem;
|
2398
|
+
display: grid;
|
2396
2399
|
height: calc(100% - 3rem);
|
2397
2400
|
box-sizing: border-box;
|
2398
2401
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2399
2402
|
color: var(--cds-text-primary, #161616);
|
2403
|
+
grid-template-rows: 1fr auto; /* titles and content */
|
2400
2404
|
}
|
2401
2405
|
.c4p--side-panel__container.c4p--side-panel__container--xs {
|
2406
|
+
/* any value is single value list */
|
2402
2407
|
width: 16rem;
|
2403
2408
|
max-width: 100%;
|
2404
2409
|
}
|
2405
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-
|
2406
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-
|
2407
|
-
|
2410
|
+
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2411
|
+
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2412
|
+
/* any value is single value list */
|
2408
2413
|
width: 16rem;
|
2409
2414
|
max-width: 100%;
|
2410
2415
|
}
|
2411
2416
|
.c4p--side-panel__container.c4p--side-panel__container--sm {
|
2417
|
+
/* any value is single value list */
|
2412
2418
|
width: 20rem;
|
2413
2419
|
max-width: 100%;
|
2414
2420
|
}
|
2415
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-
|
2416
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-
|
2417
|
-
|
2421
|
+
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2422
|
+
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2423
|
+
/* any value is single value list */
|
2418
2424
|
width: 20rem;
|
2419
2425
|
max-width: 100%;
|
2420
2426
|
}
|
2421
2427
|
.c4p--side-panel__container.c4p--side-panel__container--md {
|
2428
|
+
/* any value is single value list */
|
2422
2429
|
width: 30rem;
|
2423
2430
|
max-width: 100%;
|
2424
2431
|
}
|
2425
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-
|
2426
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-
|
2427
|
-
|
2432
|
+
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2433
|
+
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2434
|
+
/* any value is single value list */
|
2428
2435
|
width: 30rem;
|
2429
2436
|
max-width: 100%;
|
2430
2437
|
}
|
2431
2438
|
.c4p--side-panel__container.c4p--side-panel__container--lg {
|
2439
|
+
/* any value is single value list */
|
2432
2440
|
width: 40rem;
|
2433
2441
|
max-width: 100%;
|
2434
2442
|
}
|
2435
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-
|
2436
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-
|
2437
|
-
|
2443
|
+
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2444
|
+
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2445
|
+
/* any value is single value list */
|
2438
2446
|
width: 40rem;
|
2439
2447
|
max-width: 100%;
|
2440
2448
|
}
|
2441
2449
|
.c4p--side-panel__container.c4p--side-panel__container--2xl {
|
2442
|
-
|
2450
|
+
/* any value is single value list */
|
2451
|
+
width: 40rem;
|
2452
|
+
min-width: 75%;
|
2443
2453
|
max-width: 100%;
|
2444
2454
|
}
|
2445
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-
|
2446
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-
|
2447
|
-
|
2448
|
-
width:
|
2455
|
+
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
|
2456
|
+
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2457
|
+
/* any value is single value list */
|
2458
|
+
width: 40rem;
|
2459
|
+
min-width: 75%;
|
2449
2460
|
max-width: 100%;
|
2450
2461
|
}
|
2462
|
+
.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 {
|
2463
|
+
/* if the title does not scroll then we have a child scrolling section. */
|
2464
|
+
grid-template-rows: auto 1fr auto; /* titles content actions */
|
2465
|
+
}
|
2466
|
+
.c4p--side-panel__container.c4p--side-panel__container--condensed-actions {
|
2467
|
+
--c4p--side-panel--actions-height: 3rem;
|
2468
|
+
}
|
2451
2469
|
.c4p--side-panel__container .c4p--side-panel__actions-container {
|
2452
2470
|
width: 100%;
|
2453
2471
|
}
|
@@ -2459,46 +2477,30 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2459
2477
|
left: 0;
|
2460
2478
|
border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2461
2479
|
}
|
2462
|
-
.c4p--side-panel__container.c4p--side-panel__container-
|
2463
|
-
/* stylelint-disable-next-line max-nesting-depth */
|
2464
|
-
}
|
2465
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
|
2466
|
-
content: none;
|
2467
|
-
}
|
2468
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar {
|
2469
|
-
/* stylelint-disable-next-line max-nesting-depth */
|
2470
|
-
}
|
2471
|
-
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
|
2472
|
-
position: absolute;
|
2473
|
-
bottom: 0;
|
2474
|
-
left: 0;
|
2475
|
-
width: 100%;
|
2476
|
-
height: 1px;
|
2477
|
-
background-color: var(--cds-border-subtle-02, #e0e0e0);
|
2478
|
-
content: "";
|
2479
|
-
opacity: var(--c4p--side-panel--divider-opacity);
|
2480
|
-
}
|
2481
|
-
.c4p--side-panel__container.c4p--side-panel__container-without-overlay {
|
2480
|
+
.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 {
|
2482
2481
|
box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
2483
2482
|
}
|
2484
|
-
.c4p--side-panel__container .c4p--side-
|
2483
|
+
.c4p--side-panel__container .c4p--side-panel__header {
|
2484
|
+
--c4p--side-panel--title-padding-bottom: 1rem;
|
2485
2485
|
position: sticky;
|
2486
2486
|
z-index: 4;
|
2487
|
-
|
2487
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2488
|
+
top: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
|
2488
2489
|
padding: 1rem;
|
2490
|
+
padding-bottom: 0;
|
2489
2491
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2490
2492
|
/* stylelint-disable-next-line max-nesting-depth */
|
2491
2493
|
}
|
2492
|
-
.c4p--side-panel__container .c4p--side-
|
2493
|
-
padding-bottom: 0.5rem;
|
2494
|
+
.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 {
|
2495
|
+
--c4p--side-panel--title-padding-bottom: 0.5rem;
|
2494
2496
|
}
|
2495
|
-
.c4p--side-panel__container .c4p--side-
|
2497
|
+
.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 {
|
2496
2498
|
padding-top: 2rem;
|
2497
2499
|
}
|
2498
|
-
.c4p--side-panel__container .c4p--side-
|
2500
|
+
.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 {
|
2499
2501
|
padding-top: 2.5rem;
|
2500
2502
|
}
|
2501
|
-
.c4p--side-panel__container .c4p--side-
|
2503
|
+
.c4p--side-panel__container .c4p--side-panel__header::before {
|
2502
2504
|
position: absolute;
|
2503
2505
|
bottom: 0;
|
2504
2506
|
left: 0;
|
@@ -2506,47 +2508,56 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2506
2508
|
height: 1px;
|
2507
2509
|
background-color: var(--cds-border-subtle-02, #e0e0e0);
|
2508
2510
|
content: "";
|
2509
|
-
opacity: var(--c4p--side-panel--
|
2511
|
+
opacity: var(--c4p--side-panel--scroll-animation-progress);
|
2512
|
+
z-index: 9;
|
2513
|
+
}
|
2514
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation {
|
2515
|
+
position: relative;
|
2516
|
+
top: 0;
|
2517
|
+
}
|
2518
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation::before {
|
2519
|
+
opacity: 1;
|
2510
2520
|
}
|
2511
|
-
.c4p--side-panel__container .c4p--side-
|
2521
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion {
|
2512
2522
|
z-index: 5;
|
2513
2523
|
border-bottom: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2514
2524
|
margin-bottom: 1rem;
|
2515
2525
|
}
|
2516
|
-
.c4p--side-panel__container .c4p--side-
|
2526
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion.c4p--side-panel__header--no-title-animation {
|
2517
2527
|
border-bottom: 0;
|
2518
2528
|
margin-bottom: 0;
|
2519
2529
|
}
|
2520
|
-
.c4p--side-panel__container .c4p--side-
|
2521
|
-
top:
|
2522
|
-
}
|
2523
|
-
.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 {
|
2524
|
-
top: 2.5rem;
|
2530
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__collapsed-title-text {
|
2531
|
+
top: 1rem;
|
2525
2532
|
}
|
2526
|
-
.c4p--side-panel__container .c4p--side-
|
2527
|
-
|
2533
|
+
.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 {
|
2534
|
+
top: 1.5rem;
|
2528
2535
|
}
|
2529
|
-
.c4p--side-panel__container .c4p--side-
|
2536
|
+
.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step:not(:has(.c4p--side-panel__title-text)) {
|
2530
2537
|
height: calc(2.5rem + 0.25rem);
|
2531
2538
|
padding: 1rem 1rem 0.5rem 1rem;
|
2532
2539
|
}
|
2533
|
-
.c4p--side-panel__container .c4p--side-panel__title-
|
2540
|
+
.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 {
|
2534
2541
|
background-color: transparent;
|
2535
2542
|
}
|
2536
|
-
.c4p--side-panel__container.c4p--side-panel__container--has-slug {
|
2537
|
-
--c4p--side-panel--title-padding-right:
|
2543
|
+
.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 {
|
2544
|
+
--c4p--side-panel--title-padding-right: 4rem;
|
2538
2545
|
}
|
2539
|
-
.c4p--side-panel__container.c4p--side-panel__container-
|
2540
|
-
|
2541
|
-
}
|
2542
|
-
.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
|
2543
|
-
top: 0;
|
2546
|
+
.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 {
|
2547
|
+
--c4p--side-panel--title-padding-right: 5rem;
|
2544
2548
|
}
|
2545
|
-
.c4p--side-panel__container
|
2546
|
-
|
2549
|
+
.c4p--side-panel__container .c4p--side-panel__animated-scroll-wrapper {
|
2550
|
+
display: grid;
|
2551
|
+
grid-template-rows: auto 1fr;
|
2547
2552
|
}
|
2548
|
-
.c4p--side-panel__container
|
2549
|
-
|
2553
|
+
.c4p--side-panel__container .c4p--side-panel__title {
|
2554
|
+
position: sticky;
|
2555
|
+
z-index: 4;
|
2556
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2557
|
+
top: var(--c4p--side-panel--title-stop);
|
2558
|
+
/* border-bottom used instead of padding which wrapped text shows through */
|
2559
|
+
border-bottom: var(--c4p--side-panel--title-padding-bottom) solid transparent;
|
2560
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
2550
2561
|
}
|
2551
2562
|
.c4p--side-panel__container .c4p--side-panel__title-text {
|
2552
2563
|
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
@@ -2559,12 +2570,14 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2559
2570
|
padding-right: var(--c4p--side-panel--title-padding-right);
|
2560
2571
|
-webkit-box-orient: vertical;
|
2561
2572
|
-webkit-line-clamp: 2;
|
2562
|
-
|
2563
|
-
|
2564
|
-
|
2565
|
-
|
2566
|
-
|
2567
|
-
|
2573
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2574
|
+
}
|
2575
|
+
.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
|
2576
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2577
|
+
transform: translateY(calc(-1 * 1rem * var(--c4p--side-panel--scroll-animation-progress)));
|
2578
|
+
}
|
2579
|
+
.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__title-text {
|
2580
|
+
position: static;
|
2568
2581
|
}
|
2569
2582
|
.c4p--side-panel__container .c4p--side-panel__label-text {
|
2570
2583
|
font-size: var(--cds-label-01-font-size, 0.75rem);
|
@@ -2573,9 +2586,8 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2573
2586
|
letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
|
2574
2587
|
overflow: hidden;
|
2575
2588
|
padding-right: var(--c4p--side-panel--title-padding-right);
|
2576
|
-
opacity: var(--c4p--side-panel--
|
2589
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2577
2590
|
text-overflow: ellipsis;
|
2578
|
-
transform: translateY(var(--c4p--side-panel--title-y-position));
|
2579
2591
|
white-space: nowrap;
|
2580
2592
|
}
|
2581
2593
|
.c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
|
@@ -2590,9 +2602,13 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2590
2602
|
-webkit-box-orient: vertical;
|
2591
2603
|
-webkit-line-clamp: 2;
|
2592
2604
|
position: absolute;
|
2593
|
-
|
2594
|
-
|
2595
|
-
|
2605
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2606
|
+
top: 0;
|
2607
|
+
opacity: var(--c4p--side-panel--scroll-animation-progress);
|
2608
|
+
}
|
2609
|
+
.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__collapsed-title-text {
|
2610
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
2611
|
+
transform: translateY(calc(1rem * (1 - var(--c4p--side-panel--scroll-animation-progress))));
|
2596
2612
|
}
|
2597
2613
|
.c4p--side-panel__container .c4p--side-panel__subtitle-text {
|
2598
2614
|
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
@@ -2600,75 +2616,41 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2600
2616
|
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
2601
2617
|
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
2602
2618
|
overflow: hidden;
|
2603
|
-
padding:
|
2619
|
+
padding-right: var(--c4p--side-panel--title-padding-right);
|
2620
|
+
padding-bottom: 1rem;
|
2604
2621
|
-webkit-box-orient: vertical;
|
2605
2622
|
-webkit-line-clamp: 3;
|
2606
|
-
opacity: var(--c4p--side-panel--
|
2623
|
+
opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
|
2607
2624
|
}
|
2608
|
-
.c4p--side-panel__container .c4p--side-
|
2609
|
-
position: fixed;
|
2625
|
+
.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
|
2610
2626
|
z-index: 2;
|
2611
|
-
top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
|
2612
2627
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2613
2628
|
}
|
2614
|
-
.c4p--side-panel__container .c4p--side-
|
2615
|
-
top: var(--c4p--side-panel--title-text-height);
|
2616
|
-
}
|
2617
|
-
.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
|
2629
|
+
.c4p--side-panel__container .c4p--side-panel__title-text + .c4p--side-panel__subtitle-text {
|
2618
2630
|
padding-top: 1rem;
|
2619
|
-
padding-right: 3rem;
|
2620
|
-
}
|
2621
|
-
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
|
2622
|
-
top: 0;
|
2623
|
-
}
|
2624
|
-
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
|
2625
|
-
position: fixed;
|
2626
|
-
height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
|
2627
2631
|
}
|
2628
2632
|
.c4p--side-panel__container .c4p--side-panel__inner-content {
|
2629
|
-
|
2630
|
-
|
2631
|
-
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));
|
2632
|
-
overflow-x: hidden;
|
2633
|
+
padding: 1rem;
|
2634
|
+
padding-top: 0;
|
2633
2635
|
}
|
2634
|
-
.c4p--side-panel__container.c4p--side-
|
2635
|
-
|
2636
|
+
.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__action-toolbar) + .c4p--side-panel__inner-content,
|
2637
|
+
.c4p--side-panel__container .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
|
2638
|
+
padding-top: 0.5rem;
|
2636
2639
|
}
|
2637
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content
|
2638
|
-
|
2640
|
+
.c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
|
2641
|
+
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%);
|
2642
|
+
border-block-end-color: var(--cds-ai-border-strong, #4589ff);
|
2639
2643
|
}
|
2640
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-
|
2641
|
-
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));
|
2644
|
+
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__inner-content--static {
|
2642
2645
|
padding-top: 1rem;
|
2643
2646
|
}
|
2644
|
-
.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content-no-actions {
|
2645
|
-
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)));
|
2646
|
-
}
|
2647
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2648
|
-
position: fixed;
|
2649
|
-
top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
|
2650
|
-
width: 100%;
|
2651
|
-
border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
|
2652
|
-
}
|
2653
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
|
2654
|
-
margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
|
2655
|
-
}
|
2656
|
-
.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 {
|
2657
|
-
border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
|
2658
|
-
margin-bottom: 1rem;
|
2659
|
-
}
|
2660
2647
|
.c4p--side-panel__container .c4p--side-panel__action-toolbar {
|
2661
2648
|
position: sticky;
|
2662
2649
|
z-index: 4;
|
2663
|
-
/* stylelint-disable-next-line carbon/layout-token-use */
|
2664
|
-
top: var(--c4p--side-panel--title-height);
|
2665
2650
|
display: flex;
|
2666
2651
|
align-items: center;
|
2667
2652
|
justify-content: flex-start;
|
2668
|
-
padding: 0 1rem;
|
2669
|
-
margin-bottom: 0.5rem;
|
2670
2653
|
background-color: var(--cds-layer-01, #f4f4f4);
|
2671
|
-
transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
2672
2654
|
}
|
2673
2655
|
.c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
|
2674
2656
|
margin-right: 0.5rem;
|
@@ -2700,21 +2682,13 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2700
2682
|
}
|
2701
2683
|
.c4p--side-panel__container .c4p--side-panel__slug-and-close {
|
2702
2684
|
position: fixed;
|
2703
|
-
z-index:
|
2685
|
+
z-index: 10; /* must be higher than title container border bottom */
|
2704
2686
|
top: 0;
|
2705
2687
|
right: 0;
|
2706
2688
|
display: flex;
|
2707
2689
|
}
|
2708
|
-
.c4p--side-panel__container .c4p--side-panel__body-content {
|
2709
|
-
padding: 1rem;
|
2710
|
-
padding-top: 0;
|
2711
|
-
}
|
2712
|
-
.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--2xl {
|
2713
|
-
width: 100%;
|
2714
|
-
max-width: 100%;
|
2715
|
-
}
|
2716
2690
|
.c4p--side-panel__container .c4p--side-panel__actions-container {
|
2717
|
-
position:
|
2691
|
+
position: sticky;
|
2718
2692
|
bottom: 0;
|
2719
2693
|
border-top: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
2720
2694
|
background-color: var(--cds-layer-01, #f4f4f4);
|
@@ -2734,13 +2708,11 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2734
2708
|
width: 25%;
|
2735
2709
|
}
|
2736
2710
|
}
|
2737
|
-
.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
|
2738
|
-
height:
|
2739
|
-
}
|
2740
|
-
.c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
|
2741
|
-
height: 3rem;
|
2711
|
+
.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
|
2712
|
+
height: var(--c4p--side-panel--actions-height);
|
2742
2713
|
}
|
2743
2714
|
.c4p--side-panel__container.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--sm {
|
2715
|
+
/* any value is single value list */
|
2744
2716
|
width: 16rem;
|
2745
2717
|
max-width: 100%;
|
2746
2718
|
}
|
@@ -2855,14 +2827,14 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2855
2827
|
}
|
2856
2828
|
|
2857
2829
|
.c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
|
2858
|
-
width: calc(75% - 1rem);
|
2859
|
-
padding-right: calc(75% * 0.2 - 1rem);
|
2830
|
+
width: calc(40rem 75% - 1rem);
|
2831
|
+
padding-right: calc(40rem 75% * 0.2 - 1rem);
|
2860
2832
|
margin-bottom: 0.25rem;
|
2861
2833
|
}
|
2862
2834
|
|
2863
2835
|
.c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
|
2864
|
-
width: calc(75% - 1rem);
|
2865
|
-
padding-right: calc(75% * 0.2 - 1rem);
|
2836
|
+
width: calc(40rem 75% - 1rem);
|
2837
|
+
padding-right: calc(40rem 75% * 0.2 - 1rem);
|
2866
2838
|
padding-bottom: 1rem;
|
2867
2839
|
border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
|
2868
2840
|
color: var(--cds-text-secondary, #525252);
|
@@ -3554,7 +3526,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3554
3526
|
}
|
3555
3527
|
|
3556
3528
|
.c4p--card .cds--slug {
|
3557
|
-
background: linear-gradient(
|
3529
|
+
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;
|
3558
3530
|
position: absolute;
|
3559
3531
|
top: 1rem;
|
3560
3532
|
right: 1rem;
|
@@ -3583,7 +3555,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
3583
3555
|
}
|
3584
3556
|
|
3585
3557
|
.c4p--card--has-slug {
|
3586
|
-
background: linear-gradient(
|
3558
|
+
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;
|
3587
3559
|
border: 1px solid var(--cds-border-tile);
|
3588
3560
|
}
|
3589
3561
|
|
@@ -4191,9 +4163,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4191
4163
|
}
|
4192
4164
|
}
|
4193
4165
|
.c4p--notifications-panel__container {
|
4166
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
4167
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
4168
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
4169
|
+
--cds-ai-border-start: #4589ff;
|
4170
|
+
--cds-ai-border-strong: #78a9ff;
|
4171
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
4194
4172
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
4195
4173
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
4196
4174
|
--cds-ai-gradient-start-02: transparent;
|
4175
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
4197
4176
|
--cds-background: #161616;
|
4198
4177
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
4199
4178
|
--cds-background-brand: #0f62fe;
|
@@ -4209,11 +4188,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4209
4188
|
--cds-border-strong-02: #8d8d8d;
|
4210
4189
|
--cds-border-strong-03: #a8a8a8;
|
4211
4190
|
--cds-border-subtle-00: #393939;
|
4212
|
-
--cds-border-subtle-01: #
|
4213
|
-
--cds-border-subtle-02: #
|
4191
|
+
--cds-border-subtle-01: #525252;
|
4192
|
+
--cds-border-subtle-02: #6f6f6f;
|
4214
4193
|
--cds-border-subtle-03: #6f6f6f;
|
4215
|
-
--cds-border-subtle-selected-01: #
|
4216
|
-
--cds-border-subtle-selected-02: #
|
4194
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
4195
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
4217
4196
|
--cds-border-subtle-selected-03: #8d8d8d;
|
4218
4197
|
--cds-border-tile-01: #525252;
|
4219
4198
|
--cds-border-tile-02: #6f6f6f;
|
@@ -4275,20 +4254,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4275
4254
|
--cds-skeleton-element: #393939;
|
4276
4255
|
--cds-slug-background: #c6c6c6;
|
4277
4256
|
--cds-slug-background-hover: #e0e0e0;
|
4278
|
-
--cds-slug-callout-aura-end: rgba(
|
4257
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
4279
4258
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
4280
4259
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
4281
4260
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
4282
|
-
--cds-slug-callout-aura-start: rgba(
|
4261
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
4283
4262
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
4284
4263
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
4285
4264
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
4265
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
4266
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
4267
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
4268
|
+
--cds-slug-callout-caret-center: #3f68af;
|
4286
4269
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
4287
4270
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
4288
4271
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
4289
4272
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
4290
4273
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
4291
4274
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
4275
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
4276
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
4292
4277
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
4293
4278
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
4294
4279
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -7838,9 +7823,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7838
7823
|
despite of which carbon theme the user has.
|
7839
7824
|
*/
|
7840
7825
|
.c4p--web-terminal {
|
7826
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
7827
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
7828
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
7829
|
+
--cds-ai-border-start: #4589ff;
|
7830
|
+
--cds-ai-border-strong: #78a9ff;
|
7831
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
7841
7832
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
7842
7833
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
7843
7834
|
--cds-ai-gradient-start-02: transparent;
|
7835
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
7844
7836
|
--cds-background: #262626;
|
7845
7837
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
7846
7838
|
--cds-background-brand: #0f62fe;
|
@@ -7856,11 +7848,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7856
7848
|
--cds-border-strong-02: #a8a8a8;
|
7857
7849
|
--cds-border-strong-03: #c6c6c6;
|
7858
7850
|
--cds-border-subtle-00: #525252;
|
7859
|
-
--cds-border-subtle-01: #
|
7860
|
-
--cds-border-subtle-02: #
|
7851
|
+
--cds-border-subtle-01: #6f6f6f;
|
7852
|
+
--cds-border-subtle-02: #8d8d8d;
|
7861
7853
|
--cds-border-subtle-03: #8d8d8d;
|
7862
|
-
--cds-border-subtle-selected-01: #
|
7863
|
-
--cds-border-subtle-selected-02: #
|
7854
|
+
--cds-border-subtle-selected-01: #8d8d8d;
|
7855
|
+
--cds-border-subtle-selected-02: #a8a8a8;
|
7864
7856
|
--cds-border-subtle-selected-03: #a8a8a8;
|
7865
7857
|
--cds-border-tile-01: #6f6f6f;
|
7866
7858
|
--cds-border-tile-02: #8d8d8d;
|
@@ -7922,20 +7914,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7922
7914
|
--cds-skeleton-element: #525252;
|
7923
7915
|
--cds-slug-background: #c6c6c6;
|
7924
7916
|
--cds-slug-background-hover: #e0e0e0;
|
7925
|
-
--cds-slug-callout-aura-end: rgba(
|
7917
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
7926
7918
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
7927
7919
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
7928
7920
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
7929
|
-
--cds-slug-callout-aura-start: rgba(
|
7921
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
7930
7922
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
7931
7923
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
7932
7924
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
7925
|
+
--cds-slug-callout-caret-bottom: #465060;
|
7926
|
+
--cds-slug-callout-caret-bottom-background: #2d3f5c;
|
7927
|
+
--cds-slug-callout-caret-bottom-background-actions: #253042;
|
7928
|
+
--cds-slug-callout-caret-center: #456fb5;
|
7933
7929
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
7934
7930
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
7935
7931
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
7936
7932
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
7937
7933
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
7938
7934
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
7935
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
7936
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
7939
7937
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
7940
7938
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
7941
7939
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -8252,9 +8250,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
8252
8250
|
}
|
8253
8251
|
|
8254
8252
|
.c4p--web-terminal__documentation-overflow {
|
8253
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
8254
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
8255
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
8256
|
+
--cds-ai-border-start: #4589ff;
|
8257
|
+
--cds-ai-border-strong: #78a9ff;
|
8258
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
8255
8259
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
8256
8260
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
8257
8261
|
--cds-ai-gradient-start-02: transparent;
|
8262
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
8258
8263
|
--cds-background: #161616;
|
8259
8264
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
8260
8265
|
--cds-background-brand: #0f62fe;
|
@@ -8270,11 +8275,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
8270
8275
|
--cds-border-strong-02: #8d8d8d;
|
8271
8276
|
--cds-border-strong-03: #a8a8a8;
|
8272
8277
|
--cds-border-subtle-00: #393939;
|
8273
|
-
--cds-border-subtle-01: #
|
8274
|
-
--cds-border-subtle-02: #
|
8278
|
+
--cds-border-subtle-01: #525252;
|
8279
|
+
--cds-border-subtle-02: #6f6f6f;
|
8275
8280
|
--cds-border-subtle-03: #6f6f6f;
|
8276
|
-
--cds-border-subtle-selected-01: #
|
8277
|
-
--cds-border-subtle-selected-02: #
|
8281
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
8282
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
8278
8283
|
--cds-border-subtle-selected-03: #8d8d8d;
|
8279
8284
|
--cds-border-tile-01: #525252;
|
8280
8285
|
--cds-border-tile-02: #6f6f6f;
|
@@ -8336,20 +8341,26 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
8336
8341
|
--cds-skeleton-element: #393939;
|
8337
8342
|
--cds-slug-background: #c6c6c6;
|
8338
8343
|
--cds-slug-background-hover: #e0e0e0;
|
8339
|
-
--cds-slug-callout-aura-end: rgba(
|
8344
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
8340
8345
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
8341
8346
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
8342
8347
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
8343
|
-
--cds-slug-callout-aura-start: rgba(
|
8348
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
8344
8349
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
8345
8350
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
8346
8351
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
8352
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
8353
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
8354
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
8355
|
+
--cds-slug-callout-caret-center: #3f68af;
|
8347
8356
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
8348
8357
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
8349
8358
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
8350
8359
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
8351
8360
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
8352
8361
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
8362
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
8363
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
8353
8364
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
8354
8365
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
8355
8366
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -9554,6 +9565,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9554
9565
|
position: sticky;
|
9555
9566
|
z-index: 1;
|
9556
9567
|
left: 0;
|
9568
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
9557
9569
|
}
|
9558
9570
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
|
9559
9571
|
align-items: center;
|
@@ -9575,6 +9587,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9575
9587
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
|
9576
9588
|
position: sticky;
|
9577
9589
|
left: 0;
|
9590
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
9578
9591
|
}
|
9579
9592
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
|
9580
9593
|
display: flex;
|
@@ -9651,6 +9664,9 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9651
9664
|
height: 100%;
|
9652
9665
|
overflow-x: auto;
|
9653
9666
|
}
|
9667
|
+
.c4p--datagrid__grid-container .c4p--datagrid-filter-panel + .c4p--datagrid__table-container-inner .cds--data-table-content {
|
9668
|
+
height: fit-content;
|
9669
|
+
}
|
9654
9670
|
.c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
|
9655
9671
|
display: flex;
|
9656
9672
|
overflow: auto;
|
@@ -9788,7 +9804,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9788
9804
|
}
|
9789
9805
|
|
9790
9806
|
.c4p--datagrid__resizableColumn:hover {
|
9791
|
-
background-color: var(--cds-
|
9807
|
+
background-color: var(--cds-layer-selected-hover);
|
9792
9808
|
}
|
9793
9809
|
.c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
|
9794
9810
|
border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
|
@@ -10335,6 +10351,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10335
10351
|
display: flex;
|
10336
10352
|
align-items: center;
|
10337
10353
|
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
10354
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
10338
10355
|
}
|
10339
10356
|
|
10340
10357
|
.c4p--datagrid__right-sticky-column-header {
|
@@ -10350,6 +10367,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10350
10367
|
display: flex;
|
10351
10368
|
align-items: center;
|
10352
10369
|
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
10370
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
10353
10371
|
}
|
10354
10372
|
|
10355
10373
|
.c4p--datagrid__left-sticky-column-header {
|
@@ -11344,6 +11362,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
|
|
11344
11362
|
min-width: auto;
|
11345
11363
|
}
|
11346
11364
|
|
11365
|
+
.c4p--datagrid .cds--pagination {
|
11366
|
+
background-color: var(--cds-layer-02, #ffffff);
|
11367
|
+
}
|
11368
|
+
|
11347
11369
|
:root {
|
11348
11370
|
--cds-grid-gutter: 2rem;
|
11349
11371
|
--cds-grid-columns: 4;
|
@@ -14483,9 +14505,16 @@ a.cds--side-nav__link--current::before {
|
|
14483
14505
|
/* stylelint-disable function-no-unknown */
|
14484
14506
|
/* stylelint-disable max-nesting-depth */
|
14485
14507
|
.c4p--guidebanner {
|
14508
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
14509
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
14510
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
14511
|
+
--cds-ai-border-start: #4589ff;
|
14512
|
+
--cds-ai-border-strong: #78a9ff;
|
14513
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
14486
14514
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
14487
14515
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
14488
14516
|
--cds-ai-gradient-start-02: transparent;
|
14517
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
14489
14518
|
--cds-background: #161616;
|
14490
14519
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
14491
14520
|
--cds-background-brand: #0f62fe;
|
@@ -14501,11 +14530,11 @@ a.cds--side-nav__link--current::before {
|
|
14501
14530
|
--cds-border-strong-02: #8d8d8d;
|
14502
14531
|
--cds-border-strong-03: #a8a8a8;
|
14503
14532
|
--cds-border-subtle-00: #393939;
|
14504
|
-
--cds-border-subtle-01: #
|
14505
|
-
--cds-border-subtle-02: #
|
14533
|
+
--cds-border-subtle-01: #525252;
|
14534
|
+
--cds-border-subtle-02: #6f6f6f;
|
14506
14535
|
--cds-border-subtle-03: #6f6f6f;
|
14507
|
-
--cds-border-subtle-selected-01: #
|
14508
|
-
--cds-border-subtle-selected-02: #
|
14536
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
14537
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
14509
14538
|
--cds-border-subtle-selected-03: #8d8d8d;
|
14510
14539
|
--cds-border-tile-01: #525252;
|
14511
14540
|
--cds-border-tile-02: #6f6f6f;
|
@@ -14567,20 +14596,26 @@ a.cds--side-nav__link--current::before {
|
|
14567
14596
|
--cds-skeleton-element: #393939;
|
14568
14597
|
--cds-slug-background: #c6c6c6;
|
14569
14598
|
--cds-slug-background-hover: #e0e0e0;
|
14570
|
-
--cds-slug-callout-aura-end: rgba(
|
14599
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
14571
14600
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
14572
14601
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
14573
14602
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
14574
|
-
--cds-slug-callout-aura-start: rgba(
|
14603
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
14575
14604
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
14576
14605
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
14577
14606
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
14607
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
14608
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
14609
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
14610
|
+
--cds-slug-callout-caret-center: #3f68af;
|
14578
14611
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
14579
14612
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
14580
14613
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
14581
14614
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
14582
14615
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
14583
14616
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
14617
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
14618
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
14584
14619
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
14585
14620
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
14586
14621
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -15271,9 +15306,16 @@ a.cds--side-nav__link--current::before {
|
|
15271
15306
|
}
|
15272
15307
|
}
|
15273
15308
|
.c4p--non-linear-reading__dark {
|
15309
|
+
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
15310
|
+
--cds-ai-aura-start: rgba(69, 137, 255, 0.1);
|
15311
|
+
--cds-ai-border-end: rgba(166, 200, 255, 0.24);
|
15312
|
+
--cds-ai-border-start: #4589ff;
|
15313
|
+
--cds-ai-border-strong: #78a9ff;
|
15314
|
+
--cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
|
15274
15315
|
--cds-ai-gradient-end: rgba(38, 38, 38, 0);
|
15275
15316
|
--cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
|
15276
15317
|
--cds-ai-gradient-start-02: transparent;
|
15318
|
+
--cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
|
15277
15319
|
--cds-background: #161616;
|
15278
15320
|
--cds-background-active: rgba(141, 141, 141, 0.4);
|
15279
15321
|
--cds-background-brand: #0f62fe;
|
@@ -15289,11 +15331,11 @@ a.cds--side-nav__link--current::before {
|
|
15289
15331
|
--cds-border-strong-02: #8d8d8d;
|
15290
15332
|
--cds-border-strong-03: #a8a8a8;
|
15291
15333
|
--cds-border-subtle-00: #393939;
|
15292
|
-
--cds-border-subtle-01: #
|
15293
|
-
--cds-border-subtle-02: #
|
15334
|
+
--cds-border-subtle-01: #525252;
|
15335
|
+
--cds-border-subtle-02: #6f6f6f;
|
15294
15336
|
--cds-border-subtle-03: #6f6f6f;
|
15295
|
-
--cds-border-subtle-selected-01: #
|
15296
|
-
--cds-border-subtle-selected-02: #
|
15337
|
+
--cds-border-subtle-selected-01: #6f6f6f;
|
15338
|
+
--cds-border-subtle-selected-02: #8d8d8d;
|
15297
15339
|
--cds-border-subtle-selected-03: #8d8d8d;
|
15298
15340
|
--cds-border-tile-01: #525252;
|
15299
15341
|
--cds-border-tile-02: #6f6f6f;
|
@@ -15355,20 +15397,26 @@ a.cds--side-nav__link--current::before {
|
|
15355
15397
|
--cds-skeleton-element: #393939;
|
15356
15398
|
--cds-slug-background: #c6c6c6;
|
15357
15399
|
--cds-slug-background-hover: #e0e0e0;
|
15358
|
-
--cds-slug-callout-aura-end: rgba(
|
15400
|
+
--cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
|
15359
15401
|
--cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
|
15360
15402
|
--cds-slug-callout-aura-end-hover-02: transparent;
|
15361
15403
|
--cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
|
15362
|
-
--cds-slug-callout-aura-start: rgba(
|
15404
|
+
--cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
|
15363
15405
|
--cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
|
15364
15406
|
--cds-slug-callout-aura-start-hover-02: transparent;
|
15365
15407
|
--cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
|
15408
|
+
--cds-slug-callout-caret-bottom: #3d4655;
|
15409
|
+
--cds-slug-callout-caret-bottom-background: #213250;
|
15410
|
+
--cds-slug-callout-caret-bottom-background-actions: #192436;
|
15411
|
+
--cds-slug-callout-caret-center: #3f68af;
|
15366
15412
|
--cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
|
15367
15413
|
--cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
|
15368
15414
|
--cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
|
15369
15415
|
--cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
|
15370
15416
|
--cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
|
15371
15417
|
--cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
|
15418
|
+
--cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
|
15419
|
+
--cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
|
15372
15420
|
--cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
|
15373
15421
|
--cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
15374
15422
|
--cds-slug-hollow-hover: #b5b5b5;
|
@@ -15744,4 +15792,10 @@ a.cds--side-nav__link--current::before {
|
|
15744
15792
|
display: none;
|
15745
15793
|
}
|
15746
15794
|
|
15795
|
+
.c4p--delimited-list-truncate {
|
15796
|
+
overflow: hidden;
|
15797
|
+
text-overflow: ellipsis;
|
15798
|
+
white-space: nowrap;
|
15799
|
+
}
|
15800
|
+
|
15747
15801
|
/*# sourceMappingURL=index-without-carbon.css.map */
|