@patternfly/react-core 4.262.0 → 4.263.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/esm/components/Button/Button.d.ts.map +1 -1
  3. package/dist/esm/components/Button/Button.js +1 -1
  4. package/dist/esm/components/Button/Button.js.map +1 -1
  5. package/dist/esm/components/NumberInput/NumberInput.d.ts +1 -1
  6. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  7. package/dist/esm/components/NumberInput/NumberInput.js +0 -1
  8. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  9. package/dist/esm/components/Spinner/Spinner.d.ts +2 -0
  10. package/dist/esm/components/Spinner/Spinner.d.ts.map +1 -1
  11. package/dist/esm/components/Spinner/Spinner.js +2 -2
  12. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  13. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  14. package/dist/esm/helpers/Popper/Popper.js +6 -3
  15. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  16. package/dist/js/components/Button/Button.d.ts.map +1 -1
  17. package/dist/js/components/Button/Button.js +1 -1
  18. package/dist/js/components/Button/Button.js.map +1 -1
  19. package/dist/js/components/NumberInput/NumberInput.d.ts +1 -1
  20. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  21. package/dist/js/components/NumberInput/NumberInput.js +0 -1
  22. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  23. package/dist/js/components/Spinner/Spinner.d.ts +2 -0
  24. package/dist/js/components/Spinner/Spinner.d.ts.map +1 -1
  25. package/dist/js/components/Spinner/Spinner.js +2 -2
  26. package/dist/js/components/Spinner/Spinner.js.map +1 -1
  27. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  28. package/dist/js/helpers/Popper/Popper.js +6 -3
  29. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  30. package/dist/umd/react-core.min.css +1815 -1815
  31. package/dist/umd/react-core.min.js +2 -2
  32. package/package.json +2 -2
  33. package/src/components/Button/Button.tsx +1 -0
  34. package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +1 -1
  35. package/src/components/NumberInput/NumberInput.tsx +1 -2
  36. package/src/components/NumberInput/__tests__/NumberInput.test.tsx +4 -4
  37. package/src/components/NumberInput/examples/NumberInput.md +2 -0
  38. package/src/components/NumberInput/examples/NumberInputCustomStep.tsx +4 -4
  39. package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +4 -5
  40. package/src/components/NumberInput/examples/NumberInputDefault.tsx +5 -5
  41. package/src/components/NumberInput/examples/NumberInputDisabled.tsx +5 -5
  42. package/src/components/NumberInput/examples/NumberInputUnit.tsx +10 -10
  43. package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +16 -6
  44. package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +11 -11
  45. package/src/components/NumberInput/examples/NumberInputWithStatus.tsx +5 -6
  46. package/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap +3 -1
  47. package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +3 -1
  48. package/src/components/Spinner/Spinner.tsx +4 -1
  49. package/src/components/Spinner/examples/Spinner.md +4 -0
  50. package/src/components/Spinner/examples/SpinnerInline.tsx +29 -0
  51. package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +3 -1
  52. package/src/helpers/Popper/Popper.tsx +13 -3
package/dist/umd/react-core.min.css CHANGED
@@ -7310,6 +7310,331 @@ label.pf-c-check, .pf-c-check__label,
7310
7310
  --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
7311
7311
  }
7312
7312
 
7313
+ .pf-c-dual-list-selector {
7314
+ --pf-c-dual-list-selector__header--GridArea: pane-header;
7315
+ --pf-c-dual-list-selector__tools--GridArea: pane-tools;
7316
+ --pf-c-dual-list-selector__status--GridArea: pane-status;
7317
+ --pf-c-dual-list-selector__menu--GridArea: pane-menu;
7318
+ --pf-c-dual-list-selector__controls--GridArea: controls;
7319
+ --pf-c-dual-list-selector--m-chosen__header--GridArea: pane-header-c;
7320
+ --pf-c-dual-list-selector--m-chosen__tools--GridArea: pane-tools-c;
7321
+ --pf-c-dual-list-selector--m-chosen__status--GridArea: pane-status-c;
7322
+ --pf-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
7323
+ --pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
7324
+ --pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
7325
+ --pf-c-dual-list-selector__header--MarginBottom: var(--pf-global--spacer--sm);
7326
+ --pf-c-dual-list-selector__title-text--FontWeight: var(--pf-global--FontWeight--bold);
7327
+ --pf-c-dual-list-selector__tools--MarginBottom: var(--pf-global--spacer--md);
7328
+ --pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-global--spacer--sm);
7329
+ --pf-c-dual-list-selector__menu--BorderWidth: var(--pf-global--BorderWidth--sm);
7330
+ --pf-c-dual-list-selector__menu--BorderColor: var(--pf-global--BorderColor--100);
7331
+ --pf-c-dual-list-selector__menu--MinHeight: 12.5rem;
7332
+ --pf-c-dual-list-selector__menu--MaxHeight: 20rem;
7333
+ --pf-c-dual-list-selector__list-item-row--FontSize: var(--pf-global--FontSize--sm);
7334
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
7335
+ --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
7336
+ --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
7337
+ --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
7338
+ --pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100);
7339
+ --pf-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
7340
+ --pf-c-dual-list-selector__item--PaddingTop: var(--pf-global--spacer--sm);
7341
+ --pf-c-dual-list-selector__item--PaddingRight: var(--pf-global--spacer--md);
7342
+ --pf-c-dual-list-selector__item--PaddingBottom: var(--pf-global--spacer--sm);
7343
+ --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-global--spacer--md);
7344
+ --pf-c-dual-list-selector__item--m-expandable--PaddingLeft: 0;
7345
+ --pf-c-dual-list-selector__item--indent--base: calc(var(--pf-global--spacer--md) + var(--pf-global--spacer--sm) + var(--pf-c-dual-list-selector__list-item-row--FontSize));
7346
+ --pf-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-c-dual-list-selector__item--indent--base) - var(--pf-global--spacer--md));
7347
+ --pf-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-global--spacer--xs);
7348
+ --pf-c-dual-list-selector__item-text--Color: var(--pf-global--Color--100);
7349
+ --pf-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-global--active-color--100);
7350
+ --pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-global--FontWeight--bold);
7351
+ --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--100);
7352
+ --pf-c-dual-list-selector__status--MarginBottom: var(--pf-global--spacer--sm);
7353
+ --pf-c-dual-list-selector__status-text--FontSize: var(--pf-global--FontSize--sm);
7354
+ --pf-c-dual-list-selector__status-text--Color: var(--pf-global--Color--200);
7355
+ --pf-c-dual-list-selector__controls--PaddingRight: var(--pf-global--spacer--md);
7356
+ --pf-c-dual-list-selector__controls--PaddingLeft: var(--pf-global--spacer--md);
7357
+ --pf-c-dual-list-selector__item-toggle--PaddingTop: var(--pf-global--spacer--sm);
7358
+ --pf-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-global--spacer--sm);
7359
+ --pf-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-global--spacer--sm);
7360
+ --pf-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-global--spacer--md);
7361
+ --pf-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
7362
+ --pf-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
7363
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: 0;
7364
+ --pf-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
7365
+ --pf-c-dual-list-selector__item-check--MarginRight: var(--pf-global--spacer--sm);
7366
+ --pf-c-dual-list-selector__item-count--Marginleft: var(--pf-global--spacer--sm);
7367
+ --pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
7368
+ --pf-c-dual-list-selector__item-toggle-icon--Rotate: 0;
7369
+ --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
7370
+ --pf-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-global--Transition);
7371
+ --pf-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-c-dual-list-selector__list-item-row--FontSize);
7372
+ --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
7373
+ display: grid;
7374
+ grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
7375
+ grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
7376
+ grid-template-rows: repeat(3, auto) auto;
7377
+ }
7378
+
7379
+ .pf-c-dual-list-selector__pane {
7380
+ display: contents;
7381
+ }
7382
+
7383
+ .pf-c-dual-list-selector__pane.pf-m-chosen {
7384
+ --pf-c-dual-list-selector__header--GridArea: var(--pf-c-dual-list-selector--m-chosen__header--GridArea);
7385
+ --pf-c-dual-list-selector__tools--GridArea: var(--pf-c-dual-list-selector--m-chosen__tools--GridArea);
7386
+ --pf-c-dual-list-selector__status--GridArea: var(--pf-c-dual-list-selector--m-chosen__status--GridArea);
7387
+ --pf-c-dual-list-selector__menu--GridArea: var(--pf-c-dual-list-selector--m-chosen__menu--GridArea);
7388
+ }
7389
+
7390
+ .pf-c-dual-list-selector__header {
7391
+ grid-area: var(--pf-c-dual-list-selector__header--GridArea);
7392
+ margin-bottom: var(--pf-c-dual-list-selector__header--MarginBottom);
7393
+ }
7394
+
7395
+ .pf-c-dual-list-selector__title-text {
7396
+ font-weight: var(--pf-c-dual-list-selector__title-text--FontWeight);
7397
+ }
7398
+
7399
+ .pf-c-dual-list-selector__tools {
7400
+ display: flex;
7401
+ grid-area: var(--pf-c-dual-list-selector__tools--GridArea);
7402
+ margin-bottom: var(--pf-c-dual-list-selector__tools--MarginBottom);
7403
+ }
7404
+
7405
+ .pf-c-dual-list-selector__tools-filter {
7406
+ flex-grow: 1;
7407
+ }
7408
+
7409
+ .pf-c-dual-list-selector__tools-actions {
7410
+ display: flex;
7411
+ }
7412
+
7413
+ .pf-c-dual-list-selector__tools-filter ~ .pf-c-dual-list-selector__tools-actions {
7414
+ margin-left: var(--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft);
7415
+ }
7416
+
7417
+ .pf-c-dual-list-selector__status {
7418
+ display: flex;
7419
+ grid-area: var(--pf-c-dual-list-selector__status--GridArea);
7420
+ margin-bottom: var(--pf-c-dual-list-selector__status--MarginBottom);
7421
+ }
7422
+
7423
+ .pf-c-dual-list-selector__status-text {
7424
+ flex-grow: 1;
7425
+ font-size: var(--pf-c-dual-list-selector__status-text--FontSize);
7426
+ color: var(--pf-c-dual-list-selector__status-text--Color);
7427
+ }
7428
+
7429
+ .pf-c-dual-list-selector__menu {
7430
+ grid-area: var(--pf-c-dual-list-selector__menu--GridArea);
7431
+ min-height: var(--pf-c-dual-list-selector__menu--MinHeight);
7432
+ max-height: var(--pf-c-dual-list-selector__menu--MaxHeight);
7433
+ overflow: auto;
7434
+ border: var(--pf-c-dual-list-selector__menu--BorderWidth) solid var(--pf-c-dual-list-selector__menu--BorderColor);
7435
+ }
7436
+
7437
+ .pf-c-dual-list-selector__list {
7438
+ --pf-c-dual-list-selector__item-toggle-icon--Rotate: 0;
7439
+ display: flex;
7440
+ flex-direction: column;
7441
+ }
7442
+
7443
+ .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list {
7444
+ --pf-c-dual-list-selector__item-toggle--MarginTop: 0;
7445
+ --pf-c-dual-list-selector__item-toggle--MarginBottom: 0;
7446
+ }
7447
+
7448
+ .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list .pf-c-dual-list-selector__item-toggle {
7449
+ position: absolute;
7450
+ top: 0;
7451
+ left: var(--pf-c-dual-list-selector__list__list__item-toggle--Left);
7452
+ transform: translateX(var(--pf-c-dual-list-selector__list__list__item-toggle--TranslateX));
7453
+ }
7454
+
7455
+ .pf-c-dual-list-selector__list.pf-m-drag-over {
7456
+ overflow-anchor: none;
7457
+ }
7458
+
7459
+ .pf-c-dual-list-selector__list-item:focus {
7460
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
7461
+ }
7462
+
7463
+ .pf-c-dual-list-selector__list-item.pf-m-expandable {
7464
+ --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
7465
+ }
7466
+
7467
+ .pf-c-dual-list-selector__list-item.pf-m-expanded {
7468
+ --pf-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
7469
+ }
7470
+
7471
+ .pf-c-dual-list-selector__list-item.pf-m-disabled {
7472
+ --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color);
7473
+ --pf-c-dual-list-selector__item-toggle-icon--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
7474
+ pointer-events: none;
7475
+ }
7476
+
7477
+ .pf-c-dual-list-selector__list-item-row {
7478
+ display: flex;
7479
+ font-size: var(--pf-c-dual-list-selector__list-item-row--FontSize);
7480
+ background-color: var(--pf-c-dual-list-selector__list-item-row--BackgroundColor);
7481
+ }
7482
+
7483
+ .pf-c-dual-list-selector__list-item-row:hover {
7484
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
7485
+ }
7486
+
7487
+ .pf-c-dual-list-selector__list-item-row.pf-m-selected {
7488
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
7489
+ }
7490
+
7491
+ .pf-c-dual-list-selector__list-item-row.pf-m-selected .pf-c-dual-list-selector__item-text {
7492
+ --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item-row--m-selected__text--Color);
7493
+ font-weight: var(--pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
7494
+ }
7495
+
7496
+ .pf-c-dual-list-selector__list-item-row.pf-m-check {
7497
+ --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
7498
+ }
7499
+
7500
+ .pf-c-dual-list-selector__list-item-row.pf-m-ghost-row {
7501
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
7502
+ opacity: var(--pf-c-dual-list-selector__list-item--m-ghost-row--Opacity);
7503
+ }
7504
+
7505
+ .pf-c-dual-list-selector__item,
7506
+ .pf-c-dual-list-selector__main {
7507
+ display: flex;
7508
+ }
7509
+
7510
+ .pf-c-dual-list-selector__item,
7511
+ .pf-c-dual-list-selector__item-main {
7512
+ flex-basis: 100%;
7513
+ }
7514
+
7515
+ .pf-c-dual-list-selector__draggable {
7516
+ display: flex;
7517
+ }
7518
+
7519
+ .pf-c-dual-list-selector__draggable + .pf-c-dual-list-selector__item {
7520
+ --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__draggable--item--PaddingLeft);
7521
+ }
7522
+
7523
+ .pf-c-dual-list-selector__draggable .pf-c-button {
7524
+ --pf-c-button--FontSize: inherit;
7525
+ cursor: grab;
7526
+ }
7527
+
7528
+ .pf-c-dual-list-selector__draggable .pf-c-button:active {
7529
+ cursor: grabbing;
7530
+ }
7531
+
7532
+ .pf-c-dual-list-selector__item {
7533
+ position: relative;
7534
+ width: 100%;
7535
+ padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
7536
+ cursor: pointer;
7537
+ }
7538
+
7539
+ .pf-c-dual-list-selector__item-count {
7540
+ margin-left: var(--pf-c-dual-list-selector__item-count--Marginleft);
7541
+ }
7542
+
7543
+ .pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read {
7544
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor);
7545
+ }
7546
+
7547
+ .pf-c-dual-list-selector__item-text {
7548
+ overflow: hidden;
7549
+ text-overflow: ellipsis;
7550
+ white-space: nowrap;
7551
+ flex-grow: 1;
7552
+ color: var(--pf-c-dual-list-selector__item-text--Color);
7553
+ }
7554
+
7555
+ .pf-c-dual-list-selector__controls {
7556
+ grid-area: var(--pf-c-dual-list-selector__controls--GridArea);
7557
+ align-self: center;
7558
+ padding-right: var(--pf-c-dual-list-selector__controls--PaddingRight);
7559
+ padding-left: var(--pf-c-dual-list-selector__controls--PaddingLeft);
7560
+ }
7561
+
7562
+ .pf-c-dual-list-selector__item-main {
7563
+ display: flex;
7564
+ min-width: 0;
7565
+ }
7566
+
7567
+ .pf-c-dual-list-selector__item-toggle {
7568
+ padding: var(--pf-c-dual-list-selector__item-toggle--PaddingTop) var(--pf-c-dual-list-selector__item-toggle--PaddingRight) var(--pf-c-dual-list-selector__item-toggle--PaddingBottom) var(--pf-c-dual-list-selector__item-toggle--PaddingLeft);
7569
+ margin-top: var(--pf-c-dual-list-selector__item-toggle--MarginTop);
7570
+ margin-bottom: var(--pf-c-dual-list-selector__item-toggle--MarginBottom);
7571
+ }
7572
+
7573
+ .pf-c-dual-list-selector__item-check {
7574
+ display: flex;
7575
+ align-items: center;
7576
+ margin-right: var(--pf-c-dual-list-selector__item-check--MarginRight);
7577
+ }
7578
+
7579
+ .pf-c-dual-list-selector__item-toggle-icon {
7580
+ display: inline-block;
7581
+ min-width: var(--pf-c-dual-list-selector__item-toggle-icon--MinWidth);
7582
+ color: var(--pf-c-dual-list-selector__item-toggle-icon--Color, inherit);
7583
+ text-align: center;
7584
+ transition: var(--pf-c-dual-list-selector__item-toggle-icon--Transition);
7585
+ transform: rotate(var(--pf-c-dual-list-selector__item-toggle-icon--Rotate));
7586
+ }
7587
+
7588
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7589
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 1 + var(--pf-c-dual-list-selector__item--indent--base));
7590
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7591
+ }
7592
+
7593
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7594
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 2 + var(--pf-c-dual-list-selector__item--indent--base));
7595
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7596
+ }
7597
+
7598
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7599
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 3 + var(--pf-c-dual-list-selector__item--indent--base));
7600
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7601
+ }
7602
+
7603
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7604
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 4 + var(--pf-c-dual-list-selector__item--indent--base));
7605
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7606
+ }
7607
+
7608
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7609
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 5 + var(--pf-c-dual-list-selector__item--indent--base));
7610
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7611
+ }
7612
+
7613
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7614
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 6 + var(--pf-c-dual-list-selector__item--indent--base));
7615
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7616
+ }
7617
+
7618
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7619
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 7 + var(--pf-c-dual-list-selector__item--indent--base));
7620
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7621
+ }
7622
+
7623
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7624
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 8 + var(--pf-c-dual-list-selector__item--indent--base));
7625
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7626
+ }
7627
+
7628
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7629
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 9 + var(--pf-c-dual-list-selector__item--indent--base));
7630
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7631
+ }
7632
+
7633
+ .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
7634
+ --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-c-dual-list-selector__item--indent--base));
7635
+ --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
7636
+ }
7637
+
7313
7638
  .pf-c-dropdown {
7314
7639
  --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element);
7315
7640
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
@@ -7453,934 +7778,609 @@ label.pf-c-check, .pf-c-check__label,
7453
7778
  --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
7454
7779
  --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
7455
7780
  --pf-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg);
7456
- --pf-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);
7457
- position: relative;
7458
- display: inline-block;
7459
- max-width: 100%;
7460
- }
7461
-
7462
- .pf-c-dropdown .pf-c-divider {
7463
- margin-top: var(--pf-c-dropdown--c-divider--MarginTop);
7464
- margin-bottom: var(--pf-c-dropdown--c-divider--MarginBottom);
7465
- }
7466
-
7467
- .pf-c-dropdown .pf-c-divider:last-child {
7468
- --pf-c-dropdown--c-divider--MarginBottom: 0;
7469
- }
7470
-
7471
- .pf-c-dropdown > .pf-c-menu {
7472
- position: absolute;
7473
- top: var(--pf-c-dropdown--c-menu--Top);
7474
- z-index: var(--pf-c-dropdown--c-menu--ZIndex);
7475
- }
7476
-
7477
- .pf-c-dropdown.pf-m-full-height {
7478
- --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown--m-full-height__toggle--PaddingRight);
7479
- --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown--m-full-height__toggle--PaddingLeft);
7480
- --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth);
7481
- --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth);
7482
- --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth);
7483
- display: inline-flex;
7484
- align-items: center;
7485
- height: 100%;
7486
- }
7487
-
7488
- .pf-c-dropdown.pf-m-full-height .pf-c-dropdown__toggle {
7489
- align-self: stretch;
7490
- }
7491
-
7492
- .pf-c-dropdown.pf-m-full-height .pf-c-dropdown__toggle::before {
7493
- border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
7494
- }
7495
-
7496
- .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
7497
- border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
7498
- }
7499
-
7500
- .pf-c-dropdown.pf-m-expanded {
7501
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
7502
- --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
7503
- }
7504
-
7505
- .pf-c-dropdown__toggle {
7506
- position: relative;
7507
- display: flex;
7508
- align-items: center;
7509
- justify-content: space-between;
7510
- min-width: var(--pf-c-dropdown__toggle--MinWidth);
7511
- max-width: 100%;
7512
- padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
7513
- font-size: var(--pf-c-dropdown__toggle--FontSize);
7514
- font-weight: var(--pf-c-dropdown__toggle--FontWeight);
7515
- line-height: var(--pf-c-dropdown__toggle--LineHeight);
7516
- color: var(--pf-c-dropdown__toggle--Color);
7517
- background-color: var(--pf-c-dropdown__toggle--BackgroundColor);
7518
- border: none;
7519
- }
7520
-
7521
- .pf-c-dropdown__toggle::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
7522
- position: absolute;
7523
- top: 0;
7524
- right: 0;
7525
- bottom: 0;
7526
- left: 0;
7527
- content: "";
7528
- border: var(--pf-c-dropdown__toggle--before--BorderWidth) solid;
7529
- border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
7530
- }
7531
-
7532
- .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
7533
- --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
7534
- --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
7535
- pointer-events: none;
7536
- }
7537
-
7538
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
7539
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
7540
- }
7541
-
7542
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
7543
- border: 0;
7544
- }
7545
-
7546
- .pf-c-dropdown__toggle.pf-m-split-button {
7547
- padding: 0;
7548
- }
7549
-
7550
- .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
7551
- background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
7552
- }
7553
-
7554
- .pf-c-dropdown__toggle.pf-m-split-button > * {
7555
- position: relative;
7556
- padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
7557
- padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
7558
- padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
7559
- padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
7560
- }
7561
-
7562
- .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
7563
- --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
7564
- }
7565
-
7566
- .pf-c-dropdown__toggle.pf-m-split-button > *:last-child {
7567
- --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight);
7568
- }
7569
-
7570
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action {
7571
- --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight);
7572
- --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);
7573
- }
7574
-
7575
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button {
7576
- margin-right: var(--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
7577
- }
7578
-
7579
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button::before {
7580
- border-left: 0;
7581
- }
7582
-
7583
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
7584
- --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
7585
- }
7586
-
7587
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
7588
- border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
7589
- }
7590
-
7591
- .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
7592
- --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
7593
- }
7594
-
7595
- .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
7596
- display: flex;
7597
- align-items: center;
7598
- cursor: pointer;
7599
- }
7600
-
7601
- .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check > input,
7602
- .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check .pf-c-check {
7603
- cursor: pointer;
7604
- transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
7605
- }
7606
-
7607
- .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
7608
- color: var(--pf-c-dropdown__toggle-button--Color);
7609
- border: 0;
7610
- }
7611
-
7612
- .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
7613
- margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
7614
- }
7615
-
7616
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
7617
- --pf-c-dropdown__toggle--before--BorderWidth: 0;
7618
- --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
7619
- }
7620
-
7621
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
7622
- background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
7623
- border: 0;
7624
- }
7625
-
7626
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
7627
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
7628
- }
7629
-
7630
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
7631
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
7632
- }
7633
-
7634
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
7635
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
7636
- }
7637
-
7638
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
7639
- border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7640
- border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7641
- }
7642
-
7643
- .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
7644
- border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7645
- border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7646
- }
7647
-
7648
- .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
7649
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
7650
- }
7651
-
7652
- .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
7653
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
7654
- border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
7655
- }
7656
-
7657
- .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
7658
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
7659
- border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
7660
- }
7661
-
7662
- .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
7663
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
7664
- border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
7665
- }
7666
-
7667
- .pf-c-dropdown__toggle.pf-m-plain {
7668
- --pf-c-dropdown__toggle-icon--Color: var(--pf-c-dropdown--m-plain__toggle-icon--Color);
7669
- }
7670
-
7671
- .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
7672
- --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
7673
- --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
7674
- display: inline-block;
7675
- color: var(--pf-c-dropdown__toggle--m-plain--Color);
7676
- }
7677
-
7678
- .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
7679
- line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
7680
- }
7681
-
7682
- .pf-c-dropdown__toggle.pf-m-plain::before {
7683
- border: 0;
7684
- }
7685
-
7686
- .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
7687
- --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
7688
- --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-c-dropdown--m-plain--hover__toggle-icon--Color);
7781
+ --pf-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);
7782
+ position: relative;
7783
+ display: inline-block;
7784
+ max-width: 100%;
7689
7785
  }
7690
7786
 
7691
- .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
7692
- --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
7787
+ .pf-c-dropdown .pf-c-divider {
7788
+ margin-top: var(--pf-c-dropdown--c-divider--MarginTop);
7789
+ margin-bottom: var(--pf-c-dropdown--c-divider--MarginBottom);
7693
7790
  }
7694
7791
 
7695
- .pf-c-dropdown__toggle.pf-m-primary {
7696
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
7697
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
7698
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
7699
- border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
7792
+ .pf-c-dropdown .pf-c-divider:last-child {
7793
+ --pf-c-dropdown--c-divider--MarginBottom: 0;
7700
7794
  }
7701
7795
 
7702
- .pf-c-dropdown__toggle.pf-m-primary::before,
7703
- .pf-c-dropdown__toggle.pf-m-primary .pf-c-dropdown__toggle-button::before {
7704
- border: 0;
7796
+ .pf-c-dropdown > .pf-c-menu {
7797
+ position: absolute;
7798
+ top: var(--pf-c-dropdown--c-menu--Top);
7799
+ z-index: var(--pf-c-dropdown--c-menu--ZIndex);
7705
7800
  }
7706
7801
 
7707
- .pf-c-dropdown__toggle.pf-m-primary:hover {
7708
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
7802
+ .pf-c-dropdown.pf-m-full-height {
7803
+ --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown--m-full-height__toggle--PaddingRight);
7804
+ --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown--m-full-height__toggle--PaddingLeft);
7805
+ --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth);
7806
+ --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth);
7807
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth);
7808
+ display: inline-flex;
7809
+ align-items: center;
7810
+ height: 100%;
7709
7811
  }
7710
7812
 
7711
- .pf-c-dropdown__toggle.pf-m-primary:focus {
7712
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
7813
+ .pf-c-dropdown.pf-m-full-height .pf-c-dropdown__toggle {
7814
+ align-self: stretch;
7713
7815
  }
7714
7816
 
7715
- .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
7716
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
7817
+ .pf-c-dropdown.pf-m-full-height .pf-c-dropdown__toggle::before {
7818
+ border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
7717
7819
  }
7718
7820
 
7719
- .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
7720
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
7821
+ .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
7822
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
7721
7823
  }
7722
7824
 
7723
- .pf-c-dropdown__toggle.pf-m-secondary {
7724
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
7825
+ .pf-c-dropdown.pf-m-expanded {
7826
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
7827
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
7725
7828
  }
7726
7829
 
7727
- .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
7728
- --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
7729
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
7830
+ .pf-c-dropdown__toggle {
7831
+ position: relative;
7832
+ display: flex;
7833
+ align-items: center;
7834
+ justify-content: space-between;
7835
+ min-width: var(--pf-c-dropdown__toggle--MinWidth);
7836
+ max-width: 100%;
7837
+ padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
7838
+ font-size: var(--pf-c-dropdown__toggle--FontSize);
7839
+ font-weight: var(--pf-c-dropdown__toggle--FontWeight);
7840
+ line-height: var(--pf-c-dropdown__toggle--LineHeight);
7841
+ color: var(--pf-c-dropdown__toggle--Color);
7842
+ background-color: var(--pf-c-dropdown__toggle--BackgroundColor);
7843
+ border: none;
7730
7844
  }
7731
7845
 
7732
- .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
7733
- border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
7734
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
7846
+ .pf-c-dropdown__toggle::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
7847
+ position: absolute;
7848
+ top: 0;
7849
+ right: 0;
7850
+ bottom: 0;
7851
+ left: 0;
7852
+ content: "";
7853
+ border: var(--pf-c-dropdown__toggle--before--BorderWidth) solid;
7854
+ border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
7735
7855
  }
7736
7856
 
7737
- .pf-c-dropdown__toggle.pf-m-secondary:hover {
7738
- --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
7857
+ .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
7858
+ --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
7859
+ --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
7860
+ pointer-events: none;
7739
7861
  }
7740
7862
 
7741
- .pf-c-dropdown__toggle.pf-m-secondary:focus {
7742
- --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
7863
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
7864
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
7743
7865
  }
7744
7866
 
7745
- .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
7746
- --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
7867
+ .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
7868
+ border: 0;
7747
7869
  }
7748
7870
 
7749
- .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
7750
- --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
7751
- --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
7871
+ .pf-c-dropdown__toggle.pf-m-split-button {
7872
+ padding: 0;
7752
7873
  }
7753
7874
 
7754
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
7755
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
7875
+ .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
7876
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
7756
7877
  }
7757
7878
 
7758
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
7759
- --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
7879
+ .pf-c-dropdown__toggle.pf-m-split-button > * {
7880
+ position: relative;
7881
+ padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
7882
+ padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
7883
+ padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
7884
+ padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
7760
7885
  }
7761
7886
 
7762
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
7763
- --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
7887
+ .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
7888
+ --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
7764
7889
  }
7765
7890
 
7766
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
7767
- --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
7891
+ .pf-c-dropdown__toggle.pf-m-split-button > *:last-child {
7892
+ --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight);
7768
7893
  }
7769
7894
 
7770
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
7771
- border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
7895
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action {
7896
+ --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight);
7897
+ --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);
7772
7898
  }
7773
7899
 
7774
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
7775
- --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
7900
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button {
7901
+ margin-right: var(--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
7776
7902
  }
7777
7903
 
7778
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
7779
- --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
7904
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button::before {
7905
+ border-left: 0;
7780
7906
  }
7781
7907
 
7782
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
7783
- --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
7908
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
7909
+ --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
7784
7910
  }
7785
7911
 
7786
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
7787
- border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7788
- border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7912
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
7913
+ border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
7789
7914
  }
7790
7915
 
7791
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
7792
- border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7793
- border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7916
+ .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
7917
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
7794
7918
  }
7795
7919
 
7796
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
7797
- border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
7920
+ .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
7921
+ display: flex;
7922
+ align-items: center;
7923
+ cursor: pointer;
7798
7924
  }
7799
7925
 
7800
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
7801
- border-right: 0;
7926
+ .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check > input,
7927
+ .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check .pf-c-check {
7928
+ cursor: pointer;
7929
+ transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
7802
7930
  }
7803
7931
 
7804
- .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
7932
+ .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
7933
+ color: var(--pf-c-dropdown__toggle-button--Color);
7805
7934
  border: 0;
7806
7935
  }
7807
7936
 
7808
- .pf-c-dropdown__toggle > .pf-c-badge {
7809
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
7810
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
7811
- }
7812
-
7813
- .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
7814
- overflow: hidden;
7815
- text-overflow: ellipsis;
7816
- white-space: nowrap;
7817
- }
7818
-
7819
- .pf-c-dropdown__toggle-text {
7820
- flex: 0 1 auto;
7821
- }
7822
-
7823
- .pf-c-dropdown__toggle-icon {
7824
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
7825
- margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
7826
- line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
7827
- color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
7828
- }
7829
-
7830
- .pf-c-dropdown.pf-m-top.pf-m-expanded .pf-c-dropdown__toggle-icon {
7831
- transform: rotate(var(--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
7832
- }
7833
-
7834
- .pf-c-dropdown__toggle-image {
7835
- display: inline-flex;
7836
- flex-shrink: 0;
7837
- align-self: center;
7838
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
7839
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
7840
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
7841
- line-height: 1;
7842
- }
7843
-
7844
- .pf-c-dropdown__toggle-image:last-child {
7845
- --pf-c-dropdown__toggle-image--MarginRight: 0;
7937
+ .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
7938
+ margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
7846
7939
  }
7847
7940
 
7848
- .pf-c-dropdown__menu {
7849
- position: absolute;
7850
- top: var(--pf-c-dropdown__menu--Top);
7851
- z-index: var(--pf-c-dropdown__menu--ZIndex);
7852
- padding-top: var(--pf-c-dropdown__menu--PaddingTop);
7853
- padding-bottom: var(--pf-c-dropdown__menu--PaddingBottom);
7854
- background: var(--pf-c-dropdown__menu--BackgroundColor);
7855
- background-clip: padding-box;
7856
- box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
7941
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
7942
+ --pf-c-dropdown__toggle--before--BorderWidth: 0;
7943
+ --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
7857
7944
  }
7858
7945
 
7859
- .pf-c-dropdown__menu.pf-m-static {
7860
- --pf-c-dropdown--m-top__menu--TranslateY: 0;
7861
- position: static;
7862
- top: auto;
7863
- right: auto;
7864
- bottom: auto;
7865
- left: auto;
7866
- z-index: auto;
7867
- min-width: min-content;
7946
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
7947
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
7948
+ border: 0;
7868
7949
  }
7869
7950
 
7870
- .pf-c-dropdown .pf-c-menu,
7871
- .pf-c-dropdown__menu {
7872
- min-width: 100%;
7951
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
7952
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
7873
7953
  }
7874
7954
 
7875
- .pf-c-dropdown .pf-c-menu.pf-m-align-right,
7876
- .pf-c-dropdown__menu.pf-m-align-right {
7877
- right: 0;
7955
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
7956
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
7878
7957
  }
7879
7958
 
7880
- .pf-c-dropdown .pf-c-menu.pf-m-align-left,
7881
- .pf-c-dropdown__menu.pf-m-align-left {
7882
- right: auto;
7959
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
7960
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
7883
7961
  }
7884
7962
 
7885
- @media (min-width: 576px) {
7886
- .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
7887
- .pf-c-dropdown__menu.pf-m-align-right-on-sm {
7888
- right: 0;
7889
- }
7890
-
7891
- .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
7892
- .pf-c-dropdown__menu.pf-m-align-left-on-sm {
7893
- right: auto;
7894
- }
7895
- }
7896
- @media (min-width: 768px) {
7897
- .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
7898
- .pf-c-dropdown__menu.pf-m-align-right-on-md {
7899
- right: 0;
7900
- }
7963
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
7964
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7965
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7966
+ }
7901
7967
 
7902
- .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
7903
- .pf-c-dropdown__menu.pf-m-align-left-on-md {
7904
- right: auto;
7905
- }
7968
+ .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
7969
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7970
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
7906
7971
  }
7907
- @media (min-width: 992px) {
7908
- .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
7909
- .pf-c-dropdown__menu.pf-m-align-right-on-lg {
7910
- right: 0;
7911
- }
7912
7972
 
7913
- .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
7914
- .pf-c-dropdown__menu.pf-m-align-left-on-lg {
7915
- right: auto;
7916
- }
7973
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
7974
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
7917
7975
  }
7918
- @media (min-width: 1200px) {
7919
- .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
7920
- .pf-c-dropdown__menu.pf-m-align-right-on-xl {
7921
- right: 0;
7922
- }
7923
7976
 
7924
- .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
7925
- .pf-c-dropdown__menu.pf-m-align-left-on-xl {
7926
- right: auto;
7927
- }
7977
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
7978
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
7979
+ border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
7928
7980
  }
7929
- @media (min-width: 1450px) {
7930
- .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
7931
- .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
7932
- right: 0;
7933
- }
7934
7981
 
7935
- .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
7936
- .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
7937
- right: auto;
7938
- }
7982
+ .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
7983
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
7984
+ border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
7939
7985
  }
7940
- .pf-c-dropdown.pf-m-top .pf-c-dropdown__menu {
7941
- --pf-c-dropdown__menu--Top: var(--pf-c-dropdown--m-top__menu--Top);
7942
- transform: translateY(var(--pf-c-dropdown--m-top__menu--TranslateY));
7986
+
7987
+ .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
7988
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
7989
+ border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
7943
7990
  }
7944
7991
 
7945
- .pf-c-dropdown.pf-m-top > .pf-c-menu {
7946
- --pf-c-dropdown--c-menu--Top: var(--pf-c-dropdown--m-top--c-menu--Top);
7947
- transform: translateY(var(--pf-c-dropdown--m-top--c-menu--TranslateY));
7992
+ .pf-c-dropdown__toggle.pf-m-plain {
7993
+ --pf-c-dropdown__toggle-icon--Color: var(--pf-c-dropdown--m-plain__toggle-icon--Color);
7948
7994
  }
7949
7995
 
7950
- .pf-c-dropdown__menu-item {
7951
- display: block;
7952
- width: 100%;
7953
- padding: var(--pf-c-dropdown__menu-item--PaddingTop) var(--pf-c-dropdown__menu-item--PaddingRight) var(--pf-c-dropdown__menu-item--PaddingBottom) var(--pf-c-dropdown__menu-item--PaddingLeft);
7954
- font-size: var(--pf-c-dropdown__menu-item--FontSize);
7955
- font-weight: var(--pf-c-dropdown__menu-item--FontWeight);
7956
- line-height: var(--pf-c-dropdown__menu-item--LineHeight);
7957
- color: var(--pf-c-dropdown__menu-item--Color);
7958
- text-align: left;
7959
- white-space: nowrap;
7960
- background-color: var(--pf-c-dropdown__menu-item--BackgroundColor);
7961
- border: none;
7996
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
7997
+ --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
7998
+ --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
7999
+ display: inline-block;
8000
+ color: var(--pf-c-dropdown__toggle--m-plain--Color);
7962
8001
  }
7963
8002
 
7964
- .pf-c-dropdown__menu-item:hover, .pf-c-dropdown__menu-item:focus {
7965
- --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--hover--Color);
7966
- --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--hover--BackgroundColor);
7967
- text-decoration: none;
8003
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
8004
+ line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
7968
8005
  }
7969
8006
 
7970
- .pf-c-dropdown__menu-item:disabled, .pf-c-dropdown__menu-item.pf-m-disabled, .pf-c-dropdown__menu-item.pf-m-aria-disabled {
7971
- --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--disabled--Color);
7972
- --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--disabled--BackgroundColor);
8007
+ .pf-c-dropdown__toggle.pf-m-plain::before {
8008
+ border: 0;
7973
8009
  }
7974
8010
 
7975
- .pf-c-dropdown__menu-item:disabled, .pf-c-dropdown__menu-item.pf-m-disabled {
7976
- pointer-events: none;
8011
+ .pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
8012
+ --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
8013
+ --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-c-dropdown--m-plain--hover__toggle-icon--Color);
7977
8014
  }
7978
8015
 
7979
- .pf-c-dropdown__menu-item.pf-m-aria-disabled {
7980
- cursor: default;
8016
+ .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
8017
+ --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
7981
8018
  }
7982
8019
 
7983
- .pf-c-dropdown__menu-item.pf-m-icon {
7984
- display: flex;
7985
- align-items: center;
8020
+ .pf-c-dropdown__toggle.pf-m-primary {
8021
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
8022
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
8023
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
8024
+ border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
7986
8025
  }
7987
8026
 
7988
- .pf-c-dropdown__menu-item.pf-m-icon.pf-m-description {
7989
- flex-direction: column;
7990
- align-items: start;
8027
+ .pf-c-dropdown__toggle.pf-m-primary::before,
8028
+ .pf-c-dropdown__toggle.pf-m-primary .pf-c-dropdown__toggle-button::before {
8029
+ border: 0;
7991
8030
  }
7992
8031
 
7993
- .pf-c-dropdown__menu-item.pf-m-icon .pf-c-dropdown__menu-item-main {
7994
- display: flex;
7995
- align-items: center;
8032
+ .pf-c-dropdown__toggle.pf-m-primary:hover {
8033
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
7996
8034
  }
7997
8035
 
7998
- .pf-c-dropdown__menu-item.pf-m-text {
7999
- --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--m-text--Color);
8036
+ .pf-c-dropdown__toggle.pf-m-primary:focus {
8037
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
8000
8038
  }
8001
8039
 
8002
- .pf-c-dropdown__menu-item.pf-m-text:hover, .pf-c-dropdown__menu-item.pf-m-text:focus {
8003
- --pf-c-dropdown__menu-item--BackgroundColor: transparent;
8040
+ .pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
8041
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
8004
8042
  }
8005
8043
 
8006
- .pf-c-dropdown__menu-item-icon {
8007
- display: inline-flex;
8008
- align-items: center;
8009
- justify-content: center;
8010
- width: var(--pf-c-dropdown__menu-item-icon--Width);
8011
- height: var(--pf-c-dropdown__menu-item-icon--Height);
8012
- margin-right: var(--pf-c-dropdown__menu-item-icon--MarginRight);
8044
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
8045
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
8013
8046
  }
8014
8047
 
8015
- .pf-c-dropdown__menu-item-icon > * {
8016
- max-width: 100%;
8017
- max-height: 100%;
8048
+ .pf-c-dropdown__toggle.pf-m-secondary {
8049
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
8018
8050
  }
8019
8051
 
8020
- .pf-c-dropdown__menu-item-description {
8021
- font-size: var(--pf-c-dropdown__menu-item-description--FontSize);
8022
- color: var(--pf-c-dropdown__menu-item-description--Color);
8052
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
8053
+ --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
8054
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
8023
8055
  }
8024
8056
 
8025
- .pf-c-dropdown__group + .pf-c-dropdown__group {
8026
- padding-top: var(--pf-c-dropdown__group--group--PaddingTop);
8057
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
8058
+ border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
8059
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
8027
8060
  }
8028
8061
 
8029
- .pf-c-dropdown__group-title {
8030
- padding-top: var(--pf-c-dropdown__group-title--PaddingTop);
8031
- padding-right: var(--pf-c-dropdown__group-title--PaddingRight);
8032
- padding-bottom: var(--pf-c-dropdown__group-title--PaddingBottom);
8033
- padding-left: var(--pf-c-dropdown__group-title--PaddingLeft);
8034
- font-size: var(--pf-c-dropdown__group-title--FontSize);
8035
- font-weight: var(--pf-c-dropdown__group-title--FontWeight);
8036
- color: var(--pf-c-dropdown__group-title--Color);
8062
+ .pf-c-dropdown__toggle.pf-m-secondary:hover {
8063
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
8037
8064
  }
8038
8065
 
8039
- :where(.pf-theme-dark) .pf-c-dropdown {
8040
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
8041
- --pf-c-dropdown__toggle--before--BorderTopColor: transparent;
8042
- --pf-c-dropdown__toggle--before--BorderRightColor: transparent;
8043
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
8044
- --pf-c-dropdown__toggle--before--BorderLeftColor: transparent;
8045
- --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
8046
- --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
8047
- --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
8048
- --pf-c-dropdown__menu--Top: 100%;
8049
- --pf-c-dropdown--m-top__menu--TranslateY: -100%;
8050
- --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
8066
+ .pf-c-dropdown__toggle.pf-m-secondary:focus {
8067
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
8051
8068
  }
8052
8069
 
8053
- :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
8054
- color: var(--pf-global--palette--black-100);
8070
+ .pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
8071
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
8055
8072
  }
8056
8073
 
8057
- :where(.pf-theme-dark) .pf-c-dropdown__toggle.pf-m-plain {
8058
- background: transparent;
8074
+ .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
8075
+ --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
8076
+ --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
8059
8077
  }
8060
8078
 
8061
- .pf-c-dual-list-selector {
8062
- --pf-c-dual-list-selector__header--GridArea: pane-header;
8063
- --pf-c-dual-list-selector__tools--GridArea: pane-tools;
8064
- --pf-c-dual-list-selector__status--GridArea: pane-status;
8065
- --pf-c-dual-list-selector__menu--GridArea: pane-menu;
8066
- --pf-c-dual-list-selector__controls--GridArea: controls;
8067
- --pf-c-dual-list-selector--m-chosen__header--GridArea: pane-header-c;
8068
- --pf-c-dual-list-selector--m-chosen__tools--GridArea: pane-tools-c;
8069
- --pf-c-dual-list-selector--m-chosen__status--GridArea: pane-status-c;
8070
- --pf-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
8071
- --pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
8072
- --pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
8073
- --pf-c-dual-list-selector__header--MarginBottom: var(--pf-global--spacer--sm);
8074
- --pf-c-dual-list-selector__title-text--FontWeight: var(--pf-global--FontWeight--bold);
8075
- --pf-c-dual-list-selector__tools--MarginBottom: var(--pf-global--spacer--md);
8076
- --pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-global--spacer--sm);
8077
- --pf-c-dual-list-selector__menu--BorderWidth: var(--pf-global--BorderWidth--sm);
8078
- --pf-c-dual-list-selector__menu--BorderColor: var(--pf-global--BorderColor--100);
8079
- --pf-c-dual-list-selector__menu--MinHeight: 12.5rem;
8080
- --pf-c-dual-list-selector__menu--MaxHeight: 20rem;
8081
- --pf-c-dual-list-selector__list-item-row--FontSize: var(--pf-global--FontSize--sm);
8082
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
8083
- --pf-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
8084
- --pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
8085
- --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
8086
- --pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-global--BackgroundColor--100);
8087
- --pf-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
8088
- --pf-c-dual-list-selector__item--PaddingTop: var(--pf-global--spacer--sm);
8089
- --pf-c-dual-list-selector__item--PaddingRight: var(--pf-global--spacer--md);
8090
- --pf-c-dual-list-selector__item--PaddingBottom: var(--pf-global--spacer--sm);
8091
- --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-global--spacer--md);
8092
- --pf-c-dual-list-selector__item--m-expandable--PaddingLeft: 0;
8093
- --pf-c-dual-list-selector__item--indent--base: calc(var(--pf-global--spacer--md) + var(--pf-global--spacer--sm) + var(--pf-c-dual-list-selector__list-item-row--FontSize));
8094
- --pf-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-c-dual-list-selector__item--indent--base) - var(--pf-global--spacer--md));
8095
- --pf-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-global--spacer--xs);
8096
- --pf-c-dual-list-selector__item-text--Color: var(--pf-global--Color--100);
8097
- --pf-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-global--active-color--100);
8098
- --pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-global--FontWeight--bold);
8099
- --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--100);
8100
- --pf-c-dual-list-selector__status--MarginBottom: var(--pf-global--spacer--sm);
8101
- --pf-c-dual-list-selector__status-text--FontSize: var(--pf-global--FontSize--sm);
8102
- --pf-c-dual-list-selector__status-text--Color: var(--pf-global--Color--200);
8103
- --pf-c-dual-list-selector__controls--PaddingRight: var(--pf-global--spacer--md);
8104
- --pf-c-dual-list-selector__controls--PaddingLeft: var(--pf-global--spacer--md);
8105
- --pf-c-dual-list-selector__item-toggle--PaddingTop: var(--pf-global--spacer--sm);
8106
- --pf-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-global--spacer--sm);
8107
- --pf-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-global--spacer--sm);
8108
- --pf-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-global--spacer--md);
8109
- --pf-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
8110
- --pf-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
8111
- --pf-c-dual-list-selector__list__list__item-toggle--Left: 0;
8112
- --pf-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
8113
- --pf-c-dual-list-selector__item-check--MarginRight: var(--pf-global--spacer--sm);
8114
- --pf-c-dual-list-selector__item-count--Marginleft: var(--pf-global--spacer--sm);
8115
- --pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-global--disabled-color--200);
8116
- --pf-c-dual-list-selector__item-toggle-icon--Rotate: 0;
8117
- --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
8118
- --pf-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-global--Transition);
8119
- --pf-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-c-dual-list-selector__list-item-row--FontSize);
8120
- --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
8121
- display: grid;
8122
- grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
8123
- grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
8124
- grid-template-rows: repeat(3, auto) auto;
8079
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
8080
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
8125
8081
  }
8126
8082
 
8127
- .pf-c-dual-list-selector__pane {
8128
- display: contents;
8083
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
8084
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
8129
8085
  }
8130
8086
 
8131
- .pf-c-dual-list-selector__pane.pf-m-chosen {
8132
- --pf-c-dual-list-selector__header--GridArea: var(--pf-c-dual-list-selector--m-chosen__header--GridArea);
8133
- --pf-c-dual-list-selector__tools--GridArea: var(--pf-c-dual-list-selector--m-chosen__tools--GridArea);
8134
- --pf-c-dual-list-selector__status--GridArea: var(--pf-c-dual-list-selector--m-chosen__status--GridArea);
8135
- --pf-c-dual-list-selector__menu--GridArea: var(--pf-c-dual-list-selector--m-chosen__menu--GridArea);
8087
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
8088
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
8136
8089
  }
8137
8090
 
8138
- .pf-c-dual-list-selector__header {
8139
- grid-area: var(--pf-c-dual-list-selector__header--GridArea);
8140
- margin-bottom: var(--pf-c-dual-list-selector__header--MarginBottom);
8091
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
8092
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
8141
8093
  }
8142
8094
 
8143
- .pf-c-dual-list-selector__title-text {
8144
- font-weight: var(--pf-c-dual-list-selector__title-text--FontWeight);
8095
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
8096
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
8145
8097
  }
8146
8098
 
8147
- .pf-c-dual-list-selector__tools {
8148
- display: flex;
8149
- grid-area: var(--pf-c-dual-list-selector__tools--GridArea);
8150
- margin-bottom: var(--pf-c-dual-list-selector__tools--MarginBottom);
8099
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
8100
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
8151
8101
  }
8152
8102
 
8153
- .pf-c-dual-list-selector__tools-filter {
8154
- flex-grow: 1;
8103
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
8104
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
8155
8105
  }
8156
8106
 
8157
- .pf-c-dual-list-selector__tools-actions {
8158
- display: flex;
8107
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
8108
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
8159
8109
  }
8160
8110
 
8161
- .pf-c-dual-list-selector__tools-filter ~ .pf-c-dual-list-selector__tools-actions {
8162
- margin-left: var(--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft);
8111
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
8112
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
8113
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
8163
8114
  }
8164
8115
 
8165
- .pf-c-dual-list-selector__status {
8166
- display: flex;
8167
- grid-area: var(--pf-c-dual-list-selector__status--GridArea);
8168
- margin-bottom: var(--pf-c-dual-list-selector__status--MarginBottom);
8116
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
8117
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
8118
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
8169
8119
  }
8170
8120
 
8171
- .pf-c-dual-list-selector__status-text {
8172
- flex-grow: 1;
8173
- font-size: var(--pf-c-dual-list-selector__status-text--FontSize);
8174
- color: var(--pf-c-dual-list-selector__status-text--Color);
8121
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
8122
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
8175
8123
  }
8176
8124
 
8177
- .pf-c-dual-list-selector__menu {
8178
- grid-area: var(--pf-c-dual-list-selector__menu--GridArea);
8179
- min-height: var(--pf-c-dual-list-selector__menu--MinHeight);
8180
- max-height: var(--pf-c-dual-list-selector__menu--MaxHeight);
8181
- overflow: auto;
8182
- border: var(--pf-c-dual-list-selector__menu--BorderWidth) solid var(--pf-c-dual-list-selector__menu--BorderColor);
8125
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
8126
+ border-right: 0;
8183
8127
  }
8184
8128
 
8185
- .pf-c-dual-list-selector__list {
8186
- --pf-c-dual-list-selector__item-toggle-icon--Rotate: 0;
8187
- display: flex;
8188
- flex-direction: column;
8129
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
8130
+ border: 0;
8189
8131
  }
8190
8132
 
8191
- .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list {
8192
- --pf-c-dual-list-selector__item-toggle--MarginTop: 0;
8193
- --pf-c-dual-list-selector__item-toggle--MarginBottom: 0;
8133
+ .pf-c-dropdown__toggle > .pf-c-badge {
8134
+ --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
8135
+ --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
8194
8136
  }
8195
8137
 
8196
- .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list .pf-c-dual-list-selector__item-toggle {
8197
- position: absolute;
8198
- top: 0;
8199
- left: var(--pf-c-dual-list-selector__list__list__item-toggle--Left);
8200
- transform: translateX(var(--pf-c-dual-list-selector__list__list__item-toggle--TranslateX));
8138
+ .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
8139
+ overflow: hidden;
8140
+ text-overflow: ellipsis;
8141
+ white-space: nowrap;
8201
8142
  }
8202
8143
 
8203
- .pf-c-dual-list-selector__list.pf-m-drag-over {
8204
- overflow-anchor: none;
8144
+ .pf-c-dropdown__toggle-text {
8145
+ flex: 0 1 auto;
8205
8146
  }
8206
8147
 
8207
- .pf-c-dual-list-selector__list-item:focus {
8208
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
8148
+ .pf-c-dropdown__toggle-icon {
8149
+ margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
8150
+ margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
8151
+ line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
8152
+ color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
8209
8153
  }
8210
8154
 
8211
- .pf-c-dual-list-selector__list-item.pf-m-expandable {
8212
- --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
8155
+ .pf-c-dropdown.pf-m-top.pf-m-expanded .pf-c-dropdown__toggle-icon {
8156
+ transform: rotate(var(--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
8213
8157
  }
8214
8158
 
8215
- .pf-c-dual-list-selector__list-item.pf-m-expanded {
8216
- --pf-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
8159
+ .pf-c-dropdown__toggle-image {
8160
+ display: inline-flex;
8161
+ flex-shrink: 0;
8162
+ align-self: center;
8163
+ margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
8164
+ margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
8165
+ margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
8166
+ line-height: 1;
8217
8167
  }
8218
8168
 
8219
- .pf-c-dual-list-selector__list-item.pf-m-disabled {
8220
- --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color);
8221
- --pf-c-dual-list-selector__item-toggle-icon--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
8222
- pointer-events: none;
8169
+ .pf-c-dropdown__toggle-image:last-child {
8170
+ --pf-c-dropdown__toggle-image--MarginRight: 0;
8223
8171
  }
8224
8172
 
8225
- .pf-c-dual-list-selector__list-item-row {
8226
- display: flex;
8227
- font-size: var(--pf-c-dual-list-selector__list-item-row--FontSize);
8228
- background-color: var(--pf-c-dual-list-selector__list-item-row--BackgroundColor);
8173
+ .pf-c-dropdown__menu {
8174
+ position: absolute;
8175
+ top: var(--pf-c-dropdown__menu--Top);
8176
+ z-index: var(--pf-c-dropdown__menu--ZIndex);
8177
+ padding-top: var(--pf-c-dropdown__menu--PaddingTop);
8178
+ padding-bottom: var(--pf-c-dropdown__menu--PaddingBottom);
8179
+ background: var(--pf-c-dropdown__menu--BackgroundColor);
8180
+ background-clip: padding-box;
8181
+ box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
8229
8182
  }
8230
8183
 
8231
- .pf-c-dual-list-selector__list-item-row:hover {
8232
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
8184
+ .pf-c-dropdown__menu.pf-m-static {
8185
+ --pf-c-dropdown--m-top__menu--TranslateY: 0;
8186
+ position: static;
8187
+ top: auto;
8188
+ right: auto;
8189
+ bottom: auto;
8190
+ left: auto;
8191
+ z-index: auto;
8192
+ min-width: min-content;
8233
8193
  }
8234
8194
 
8235
- .pf-c-dual-list-selector__list-item-row.pf-m-selected {
8236
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
8195
+ .pf-c-dropdown .pf-c-menu,
8196
+ .pf-c-dropdown__menu {
8197
+ min-width: 100%;
8237
8198
  }
8238
8199
 
8239
- .pf-c-dual-list-selector__list-item-row.pf-m-selected .pf-c-dual-list-selector__item-text {
8240
- --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item-row--m-selected__text--Color);
8241
- font-weight: var(--pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
8200
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right,
8201
+ .pf-c-dropdown__menu.pf-m-align-right {
8202
+ right: 0;
8242
8203
  }
8243
8204
 
8244
- .pf-c-dual-list-selector__list-item-row.pf-m-check {
8245
- --pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
8205
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left,
8206
+ .pf-c-dropdown__menu.pf-m-align-left {
8207
+ right: auto;
8246
8208
  }
8247
8209
 
8248
- .pf-c-dual-list-selector__list-item-row.pf-m-ghost-row {
8249
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
8250
- opacity: var(--pf-c-dual-list-selector__list-item--m-ghost-row--Opacity);
8251
- }
8210
+ @media (min-width: 576px) {
8211
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
8212
+ .pf-c-dropdown__menu.pf-m-align-right-on-sm {
8213
+ right: 0;
8214
+ }
8252
8215
 
8253
- .pf-c-dual-list-selector__item,
8254
- .pf-c-dual-list-selector__main {
8255
- display: flex;
8216
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
8217
+ .pf-c-dropdown__menu.pf-m-align-left-on-sm {
8218
+ right: auto;
8219
+ }
8256
8220
  }
8221
+ @media (min-width: 768px) {
8222
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
8223
+ .pf-c-dropdown__menu.pf-m-align-right-on-md {
8224
+ right: 0;
8225
+ }
8257
8226
 
8258
- .pf-c-dual-list-selector__item,
8259
- .pf-c-dual-list-selector__item-main {
8260
- flex-basis: 100%;
8227
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
8228
+ .pf-c-dropdown__menu.pf-m-align-left-on-md {
8229
+ right: auto;
8230
+ }
8261
8231
  }
8232
+ @media (min-width: 992px) {
8233
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
8234
+ .pf-c-dropdown__menu.pf-m-align-right-on-lg {
8235
+ right: 0;
8236
+ }
8262
8237
 
8263
- .pf-c-dual-list-selector__draggable {
8264
- display: flex;
8238
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
8239
+ .pf-c-dropdown__menu.pf-m-align-left-on-lg {
8240
+ right: auto;
8241
+ }
8265
8242
  }
8243
+ @media (min-width: 1200px) {
8244
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
8245
+ .pf-c-dropdown__menu.pf-m-align-right-on-xl {
8246
+ right: 0;
8247
+ }
8266
8248
 
8267
- .pf-c-dual-list-selector__draggable + .pf-c-dual-list-selector__item {
8268
- --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__draggable--item--PaddingLeft);
8249
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
8250
+ .pf-c-dropdown__menu.pf-m-align-left-on-xl {
8251
+ right: auto;
8252
+ }
8269
8253
  }
8254
+ @media (min-width: 1450px) {
8255
+ .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
8256
+ .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
8257
+ right: 0;
8258
+ }
8270
8259
 
8271
- .pf-c-dual-list-selector__draggable .pf-c-button {
8272
- --pf-c-button--FontSize: inherit;
8273
- cursor: grab;
8260
+ .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
8261
+ .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
8262
+ right: auto;
8263
+ }
8264
+ }
8265
+ .pf-c-dropdown.pf-m-top .pf-c-dropdown__menu {
8266
+ --pf-c-dropdown__menu--Top: var(--pf-c-dropdown--m-top__menu--Top);
8267
+ transform: translateY(var(--pf-c-dropdown--m-top__menu--TranslateY));
8274
8268
  }
8275
8269
 
8276
- .pf-c-dual-list-selector__draggable .pf-c-button:active {
8277
- cursor: grabbing;
8270
+ .pf-c-dropdown.pf-m-top > .pf-c-menu {
8271
+ --pf-c-dropdown--c-menu--Top: var(--pf-c-dropdown--m-top--c-menu--Top);
8272
+ transform: translateY(var(--pf-c-dropdown--m-top--c-menu--TranslateY));
8278
8273
  }
8279
8274
 
8280
- .pf-c-dual-list-selector__item {
8281
- position: relative;
8275
+ .pf-c-dropdown__menu-item {
8276
+ display: block;
8282
8277
  width: 100%;
8283
- padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
8284
- cursor: pointer;
8278
+ padding: var(--pf-c-dropdown__menu-item--PaddingTop) var(--pf-c-dropdown__menu-item--PaddingRight) var(--pf-c-dropdown__menu-item--PaddingBottom) var(--pf-c-dropdown__menu-item--PaddingLeft);
8279
+ font-size: var(--pf-c-dropdown__menu-item--FontSize);
8280
+ font-weight: var(--pf-c-dropdown__menu-item--FontWeight);
8281
+ line-height: var(--pf-c-dropdown__menu-item--LineHeight);
8282
+ color: var(--pf-c-dropdown__menu-item--Color);
8283
+ text-align: left;
8284
+ white-space: nowrap;
8285
+ background-color: var(--pf-c-dropdown__menu-item--BackgroundColor);
8286
+ border: none;
8285
8287
  }
8286
8288
 
8287
- .pf-c-dual-list-selector__item-count {
8288
- margin-left: var(--pf-c-dual-list-selector__item-count--Marginleft);
8289
+ .pf-c-dropdown__menu-item:hover, .pf-c-dropdown__menu-item:focus {
8290
+ --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--hover--Color);
8291
+ --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--hover--BackgroundColor);
8292
+ text-decoration: none;
8289
8293
  }
8290
8294
 
8291
- .pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read {
8292
- --pf-c-badge--m-read--BackgroundColor: var(--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor);
8295
+ .pf-c-dropdown__menu-item:disabled, .pf-c-dropdown__menu-item.pf-m-disabled, .pf-c-dropdown__menu-item.pf-m-aria-disabled {
8296
+ --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--disabled--Color);
8297
+ --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--disabled--BackgroundColor);
8293
8298
  }
8294
8299
 
8295
- .pf-c-dual-list-selector__item-text {
8296
- overflow: hidden;
8297
- text-overflow: ellipsis;
8298
- white-space: nowrap;
8299
- flex-grow: 1;
8300
- color: var(--pf-c-dual-list-selector__item-text--Color);
8300
+ .pf-c-dropdown__menu-item:disabled, .pf-c-dropdown__menu-item.pf-m-disabled {
8301
+ pointer-events: none;
8301
8302
  }
8302
8303
 
8303
- .pf-c-dual-list-selector__controls {
8304
- grid-area: var(--pf-c-dual-list-selector__controls--GridArea);
8305
- align-self: center;
8306
- padding-right: var(--pf-c-dual-list-selector__controls--PaddingRight);
8307
- padding-left: var(--pf-c-dual-list-selector__controls--PaddingLeft);
8304
+ .pf-c-dropdown__menu-item.pf-m-aria-disabled {
8305
+ cursor: default;
8308
8306
  }
8309
8307
 
8310
- .pf-c-dual-list-selector__item-main {
8308
+ .pf-c-dropdown__menu-item.pf-m-icon {
8311
8309
  display: flex;
8312
- min-width: 0;
8310
+ align-items: center;
8313
8311
  }
8314
8312
 
8315
- .pf-c-dual-list-selector__item-toggle {
8316
- padding: var(--pf-c-dual-list-selector__item-toggle--PaddingTop) var(--pf-c-dual-list-selector__item-toggle--PaddingRight) var(--pf-c-dual-list-selector__item-toggle--PaddingBottom) var(--pf-c-dual-list-selector__item-toggle--PaddingLeft);
8317
- margin-top: var(--pf-c-dual-list-selector__item-toggle--MarginTop);
8318
- margin-bottom: var(--pf-c-dual-list-selector__item-toggle--MarginBottom);
8313
+ .pf-c-dropdown__menu-item.pf-m-icon.pf-m-description {
8314
+ flex-direction: column;
8315
+ align-items: start;
8319
8316
  }
8320
8317
 
8321
- .pf-c-dual-list-selector__item-check {
8318
+ .pf-c-dropdown__menu-item.pf-m-icon .pf-c-dropdown__menu-item-main {
8322
8319
  display: flex;
8323
8320
  align-items: center;
8324
- margin-right: var(--pf-c-dual-list-selector__item-check--MarginRight);
8325
- }
8326
-
8327
- .pf-c-dual-list-selector__item-toggle-icon {
8328
- display: inline-block;
8329
- min-width: var(--pf-c-dual-list-selector__item-toggle-icon--MinWidth);
8330
- color: var(--pf-c-dual-list-selector__item-toggle-icon--Color, inherit);
8331
- text-align: center;
8332
- transition: var(--pf-c-dual-list-selector__item-toggle-icon--Transition);
8333
- transform: rotate(var(--pf-c-dual-list-selector__item-toggle-icon--Rotate));
8334
8321
  }
8335
8322
 
8336
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8337
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 1 + var(--pf-c-dual-list-selector__item--indent--base));
8338
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8323
+ .pf-c-dropdown__menu-item.pf-m-text {
8324
+ --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--m-text--Color);
8339
8325
  }
8340
8326
 
8341
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8342
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 2 + var(--pf-c-dual-list-selector__item--indent--base));
8343
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8327
+ .pf-c-dropdown__menu-item.pf-m-text:hover, .pf-c-dropdown__menu-item.pf-m-text:focus {
8328
+ --pf-c-dropdown__menu-item--BackgroundColor: transparent;
8344
8329
  }
8345
8330
 
8346
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8347
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 3 + var(--pf-c-dual-list-selector__item--indent--base));
8348
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8331
+ .pf-c-dropdown__menu-item-icon {
8332
+ display: inline-flex;
8333
+ align-items: center;
8334
+ justify-content: center;
8335
+ width: var(--pf-c-dropdown__menu-item-icon--Width);
8336
+ height: var(--pf-c-dropdown__menu-item-icon--Height);
8337
+ margin-right: var(--pf-c-dropdown__menu-item-icon--MarginRight);
8349
8338
  }
8350
8339
 
8351
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8352
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 4 + var(--pf-c-dual-list-selector__item--indent--base));
8353
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8340
+ .pf-c-dropdown__menu-item-icon > * {
8341
+ max-width: 100%;
8342
+ max-height: 100%;
8354
8343
  }
8355
8344
 
8356
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8357
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 5 + var(--pf-c-dual-list-selector__item--indent--base));
8358
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8345
+ .pf-c-dropdown__menu-item-description {
8346
+ font-size: var(--pf-c-dropdown__menu-item-description--FontSize);
8347
+ color: var(--pf-c-dropdown__menu-item-description--Color);
8359
8348
  }
8360
8349
 
8361
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8362
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 6 + var(--pf-c-dual-list-selector__item--indent--base));
8363
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8350
+ .pf-c-dropdown__group + .pf-c-dropdown__group {
8351
+ padding-top: var(--pf-c-dropdown__group--group--PaddingTop);
8364
8352
  }
8365
8353
 
8366
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8367
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 7 + var(--pf-c-dual-list-selector__item--indent--base));
8368
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8354
+ .pf-c-dropdown__group-title {
8355
+ padding-top: var(--pf-c-dropdown__group-title--PaddingTop);
8356
+ padding-right: var(--pf-c-dropdown__group-title--PaddingRight);
8357
+ padding-bottom: var(--pf-c-dropdown__group-title--PaddingBottom);
8358
+ padding-left: var(--pf-c-dropdown__group-title--PaddingLeft);
8359
+ font-size: var(--pf-c-dropdown__group-title--FontSize);
8360
+ font-weight: var(--pf-c-dropdown__group-title--FontWeight);
8361
+ color: var(--pf-c-dropdown__group-title--Color);
8369
8362
  }
8370
8363
 
8371
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8372
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 8 + var(--pf-c-dual-list-selector__item--indent--base));
8373
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8364
+ :where(.pf-theme-dark) .pf-c-dropdown {
8365
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
8366
+ --pf-c-dropdown__toggle--before--BorderTopColor: transparent;
8367
+ --pf-c-dropdown__toggle--before--BorderRightColor: transparent;
8368
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
8369
+ --pf-c-dropdown__toggle--before--BorderLeftColor: transparent;
8370
+ --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
8371
+ --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
8372
+ --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
8373
+ --pf-c-dropdown__menu--Top: 100%;
8374
+ --pf-c-dropdown--m-top__menu--TranslateY: -100%;
8375
+ --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
8374
8376
  }
8375
8377
 
8376
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8377
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 9 + var(--pf-c-dual-list-selector__item--indent--base));
8378
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8378
+ :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
8379
+ color: var(--pf-global--palette--black-100);
8379
8380
  }
8380
8381
 
8381
- .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item {
8382
- --pf-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-c-dual-list-selector__item--indent--base));
8383
- --pf-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-c-dual-list-selector__item--PaddingLeft);
8382
+ :where(.pf-theme-dark) .pf-c-dropdown__toggle.pf-m-plain {
8383
+ background: transparent;
8384
8384
  }
8385
8385
 
8386
8386
  .pf-c-empty-state {
@@ -9496,205 +9496,526 @@ label.pf-c-check, .pf-c-check__label,
9496
9496
  line-height: 1;
9497
9497
  }
9498
9498
 
9499
- .pf-c-icon.pf-m-inline .pf-c-spinner {
9500
- --pf-c-spinner--diameter: 1em;
9499
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
9500
+ --pf-c-spinner--diameter: 1em;
9501
+ }
9502
+
9503
+ .pf-c-icon.pf-m-sm {
9504
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
9505
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
9506
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9507
+ }
9508
+
9509
+ .pf-c-icon.pf-m-md {
9510
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
9511
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
9512
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9513
+ }
9514
+
9515
+ .pf-c-icon.pf-m-lg {
9516
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
9517
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
9518
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9519
+ }
9520
+
9521
+ .pf-c-icon.pf-m-xl {
9522
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
9523
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
9524
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9525
+ }
9526
+
9527
+ .pf-c-icon.pf-m-in-progress {
9528
+ --pf-c-icon__content--Opacity: 0;
9529
+ --pf-c-icon__progress--Opacity: 1;
9530
+ }
9531
+
9532
+ .pf-c-icon__content,
9533
+ .pf-c-icon__progress {
9534
+ font-size: var(--pf-c-icon__content--FontSize);
9535
+ }
9536
+
9537
+ .pf-c-icon__content svg,
9538
+ .pf-c-icon__progress svg {
9539
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
9540
+ }
9541
+
9542
+ .pf-c-icon__content.pf-m-sm,
9543
+ .pf-c-icon__progress.pf-m-sm {
9544
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9545
+ }
9546
+
9547
+ .pf-c-icon__content.pf-m-md,
9548
+ .pf-c-icon__progress.pf-m-md {
9549
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9550
+ }
9551
+
9552
+ .pf-c-icon__content.pf-m-lg,
9553
+ .pf-c-icon__progress.pf-m-lg {
9554
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9555
+ }
9556
+
9557
+ .pf-c-icon__content.pf-m-xl,
9558
+ .pf-c-icon__progress.pf-m-xl {
9559
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9560
+ }
9561
+
9562
+ .pf-c-icon__content {
9563
+ color: var(--pf-c-icon__content--Color);
9564
+ opacity: var(--pf-c-icon__content--Opacity, 1);
9565
+ }
9566
+
9567
+ .pf-c-icon__content.pf-m-danger {
9568
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9569
+ }
9570
+
9571
+ .pf-c-icon__content.pf-m-warning {
9572
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9573
+ }
9574
+
9575
+ .pf-c-icon__content.pf-m-success {
9576
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9577
+ }
9578
+
9579
+ .pf-c-icon__content.pf-m-info {
9580
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9581
+ }
9582
+
9583
+ .pf-c-icon__content.pf-m-default {
9584
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9585
+ }
9586
+
9587
+ .pf-c-icon__progress {
9588
+ position: absolute;
9589
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9590
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
9591
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9592
+ }
9593
+
9594
+ .pf-c-input-group {
9595
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9596
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9597
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9598
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9599
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9600
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9601
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9602
+ }
9603
+
9604
+ .pf-c-input-group {
9605
+ --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9606
+ --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9607
+ --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9608
+ --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9609
+ --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9610
+ --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9611
+ --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9612
+ --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9613
+ --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9614
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9615
+ --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9616
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9617
+ --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9618
+ --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9619
+ --pf-c-input-group--c-form-control--MarginRight: 0;
9620
+ color: var(--pf-global--Color--100);
9621
+ display: flex;
9622
+ width: 100%;
9623
+ background-color: var(--pf-c-input-group--BackgroundColor);
9624
+ }
9625
+
9626
+ .pf-c-input-group.pf-m-plain {
9627
+ --pf-c-input-group--BackgroundColor: transparent;
9628
+ }
9629
+
9630
+ .pf-c-input-group > * + * {
9631
+ margin-left: -1px;
9632
+ }
9633
+
9634
+ .pf-c-input-group > :focus,
9635
+ .pf-c-input-group > :focus-within {
9636
+ z-index: var(--pf-c-input-group--child--ZIndex);
9637
+ }
9638
+
9639
+ .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9640
+ margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9641
+ }
9642
+
9643
+ .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9644
+ .pf-c-input-group textarea {
9645
+ flex: 2;
9646
+ min-width: 0;
9647
+ }
9648
+
9649
+ .pf-c-input-group textarea {
9650
+ min-height: var(--pf-c-input-group__textarea--MinHeight);
9651
+ }
9652
+
9653
+ .pf-c-input-group__text {
9654
+ display: flex;
9655
+ align-items: center;
9656
+ padding-right: var(--pf-c-input-group__text--PaddingRight);
9657
+ padding-left: var(--pf-c-input-group__text--PaddingLeft);
9658
+ font-size: var(--pf-c-input-group__text--FontSize);
9659
+ color: var(--pf-c-input-group__text--Color);
9660
+ text-align: center;
9661
+ background-color: var(--pf-c-input-group__text--BackgroundColor);
9662
+ border: var(--pf-c-input-group__text--BorderWidth) solid;
9663
+ border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9664
+ }
9665
+
9666
+ label.pf-c-input-group__text {
9667
+ cursor: pointer;
9501
9668
  }
9502
9669
 
9503
- .pf-c-icon.pf-m-sm {
9504
- --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
9505
- --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
9506
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9670
+ .pf-c-input-group__text.pf-m-plain {
9671
+ --pf-c-input-group__text--BorderWidth: 0;
9672
+ margin-left: 0;
9507
9673
  }
9508
9674
 
9509
- .pf-c-icon.pf-m-md {
9510
- --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
9511
- --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
9512
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9675
+ :where(.pf-theme-dark) .pf-c-input-group {
9676
+ --pf-c-input-group--BackgroundColor: transparent;
9677
+ --pf-c-input-group__text--BorderTopColor: transparent;
9678
+ --pf-c-input-group__text--BorderRightColor: transparent;
9679
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9680
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9681
+ --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9513
9682
  }
9514
9683
 
9515
- .pf-c-icon.pf-m-lg {
9516
- --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
9517
- --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
9518
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9684
+ :where(.pf-theme-dark) .pf-c-input-group > * + * {
9685
+ margin-left: 0;
9686
+ border-left: 1px solid var(--pf-global--palette--black-700);
9519
9687
  }
9520
9688
 
9521
- .pf-c-icon.pf-m-xl {
9522
- --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
9523
- --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
9524
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9689
+ :where(.pf-theme-dark) .pf-c-input-group__text {
9690
+ --pf-c-input-group__text--BorderTopColor: transparent;
9691
+ --pf-c-input-group__text--BorderRightColor: transparent;
9692
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9693
+ --pf-c-input-group__text--BorderLeftColor: transparent;
9525
9694
  }
9526
9695
 
9527
- .pf-c-icon.pf-m-in-progress {
9528
- --pf-c-icon__content--Opacity: 0;
9529
- --pf-c-icon__progress--Opacity: 1;
9696
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9697
+ --pf-c-input-group__text--BackgroundColor: transparent;
9530
9698
  }
9531
9699
 
9532
- .pf-c-icon__content,
9533
- .pf-c-icon__progress {
9534
- font-size: var(--pf-c-icon__content--FontSize);
9700
+ .pf-c-jump-links {
9701
+ --pf-c-jump-links__list--Display: flex;
9702
+ --pf-c-jump-links__list--Visibility: visible;
9703
+ --pf-c-jump-links__list--PaddingTop: 0;
9704
+ --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
9705
+ --pf-c-jump-links__list--PaddingBottom: 0;
9706
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
9707
+ --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
9708
+ --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
9709
+ --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
9710
+ --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
9711
+ --pf-c-jump-links__list--FlexDirection: row;
9712
+ --pf-c-jump-links--m-vertical__list--FlexDirection: column;
9713
+ --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
9714
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9715
+ --pf-c-jump-links__list--before--BorderRightWidth: 0;
9716
+ --pf-c-jump-links__list--before--BorderBottomWidth: 0;
9717
+ --pf-c-jump-links__list--before--BorderLeftWidth: 0;
9718
+ --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
9719
+ --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
9720
+ --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9721
+ --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
9722
+ --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
9723
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
9724
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
9725
+ --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
9726
+ --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
9727
+ --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
9728
+ --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
9729
+ --pf-c-jump-links__link--before--BorderTopWidth: 0;
9730
+ --pf-c-jump-links__link--before--BorderRightWidth: 0;
9731
+ --pf-c-jump-links__link--before--BorderBottomWidth: 0;
9732
+ --pf-c-jump-links__link--before--BorderLeftWidth: 0;
9733
+ --pf-c-jump-links__link--before--BorderColor: transparent;
9734
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
9735
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
9736
+ --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
9737
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
9738
+ --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
9739
+ --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
9740
+ --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
9741
+ --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
9742
+ --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
9743
+ --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
9744
+ --pf-c-jump-links__label--Display: block;
9745
+ --pf-c-jump-links__label--Visibility: visible;
9746
+ --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
9747
+ --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
9748
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
9749
+ --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
9750
+ --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
9751
+ --pf-c-jump-links__toggle--Display: none;
9752
+ --pf-c-jump-links__toggle--Visibility: hidden;
9753
+ --pf-c-jump-links__toggle-icon--Color: currentcolor;
9754
+ --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
9755
+ --pf-c-jump-links__toggle-icon--Rotate: 0;
9756
+ --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
9757
+ --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9758
+ --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
9759
+ --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
9760
+ display: flex;
9535
9761
  }
9536
9762
 
9537
- .pf-c-icon__content svg,
9538
- .pf-c-icon__progress svg {
9539
- vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
9763
+ .pf-c-jump-links.pf-m-center {
9764
+ justify-content: center;
9540
9765
  }
9541
9766
 
9542
- .pf-c-icon__content.pf-m-sm,
9543
- .pf-c-icon__progress.pf-m-sm {
9544
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9767
+ .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
9768
+ align-items: center;
9545
9769
  }
9546
9770
 
9547
- .pf-c-icon__content.pf-m-md,
9548
- .pf-c-icon__progress.pf-m-md {
9549
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9771
+ .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
9772
+ --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
9773
+ --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
9774
+ --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
9775
+ --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
9776
+ --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
9777
+ --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
9778
+ --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
9779
+ --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
9780
+ --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
9781
+ flex-direction: column;
9550
9782
  }
9551
9783
 
9552
- .pf-c-icon__content.pf-m-lg,
9553
- .pf-c-icon__progress.pf-m-lg {
9554
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9784
+ .pf-c-jump-links.pf-m-expandable {
9785
+ --pf-c-jump-links__list--Display: none;
9786
+ --pf-c-jump-links__list--Visibility: hidden;
9787
+ --pf-c-jump-links__toggle--Display: block;
9788
+ --pf-c-jump-links__toggle--Visibility: visible;
9789
+ --pf-c-jump-links__label--Display: none;
9790
+ --pf-c-jump-links__label--Visibility: hidden;
9555
9791
  }
9556
9792
 
9557
- .pf-c-icon__content.pf-m-xl,
9558
- .pf-c-icon__progress.pf-m-xl {
9559
- --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9793
+ .pf-c-jump-links.pf-m-non-expandable {
9794
+ --pf-c-jump-links__list--Display: flex;
9795
+ --pf-c-jump-links__list--Visibility: visible;
9796
+ --pf-c-jump-links__toggle--Display: none;
9797
+ --pf-c-jump-links__toggle--Visibility: hidden;
9798
+ --pf-c-jump-links__label--Display: block;
9799
+ --pf-c-jump-links__label--Visibility: visible;
9560
9800
  }
9561
9801
 
9562
- .pf-c-icon__content {
9563
- color: var(--pf-c-icon__content--Color);
9564
- opacity: var(--pf-c-icon__content--Opacity, 1);
9802
+ @media (min-width: 576px) {
9803
+ .pf-c-jump-links.pf-m-expandable-on-sm {
9804
+ --pf-c-jump-links__list--Display: none;
9805
+ --pf-c-jump-links__list--Visibility: hidden;
9806
+ --pf-c-jump-links__toggle--Display: block;
9807
+ --pf-c-jump-links__toggle--Visibility: visible;
9808
+ --pf-c-jump-links__label--Display: none;
9809
+ --pf-c-jump-links__label--Visibility: hidden;
9810
+ }
9811
+
9812
+ .pf-c-jump-links.pf-m-non-expandable-on-sm {
9813
+ --pf-c-jump-links__list--Display: flex;
9814
+ --pf-c-jump-links__list--Visibility: visible;
9815
+ --pf-c-jump-links__toggle--Display: none;
9816
+ --pf-c-jump-links__toggle--Visibility: hidden;
9817
+ --pf-c-jump-links__label--Display: block;
9818
+ --pf-c-jump-links__label--Visibility: visible;
9819
+ }
9565
9820
  }
9821
+ @media (min-width: 768px) {
9822
+ .pf-c-jump-links.pf-m-expandable-on-md {
9823
+ --pf-c-jump-links__list--Display: none;
9824
+ --pf-c-jump-links__list--Visibility: hidden;
9825
+ --pf-c-jump-links__toggle--Display: block;
9826
+ --pf-c-jump-links__toggle--Visibility: visible;
9827
+ --pf-c-jump-links__label--Display: none;
9828
+ --pf-c-jump-links__label--Visibility: hidden;
9829
+ }
9566
9830
 
9567
- .pf-c-icon__content.pf-m-danger {
9568
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9831
+ .pf-c-jump-links.pf-m-non-expandable-on-md {
9832
+ --pf-c-jump-links__list--Display: flex;
9833
+ --pf-c-jump-links__list--Visibility: visible;
9834
+ --pf-c-jump-links__toggle--Display: none;
9835
+ --pf-c-jump-links__toggle--Visibility: hidden;
9836
+ --pf-c-jump-links__label--Display: block;
9837
+ --pf-c-jump-links__label--Visibility: visible;
9838
+ }
9569
9839
  }
9840
+ @media (min-width: 992px) {
9841
+ .pf-c-jump-links.pf-m-expandable-on-lg {
9842
+ --pf-c-jump-links__list--Display: none;
9843
+ --pf-c-jump-links__list--Visibility: hidden;
9844
+ --pf-c-jump-links__toggle--Display: block;
9845
+ --pf-c-jump-links__toggle--Visibility: visible;
9846
+ --pf-c-jump-links__label--Display: none;
9847
+ --pf-c-jump-links__label--Visibility: hidden;
9848
+ }
9570
9849
 
9571
- .pf-c-icon__content.pf-m-warning {
9572
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9850
+ .pf-c-jump-links.pf-m-non-expandable-on-lg {
9851
+ --pf-c-jump-links__list--Display: flex;
9852
+ --pf-c-jump-links__list--Visibility: visible;
9853
+ --pf-c-jump-links__toggle--Display: none;
9854
+ --pf-c-jump-links__toggle--Visibility: hidden;
9855
+ --pf-c-jump-links__label--Display: block;
9856
+ --pf-c-jump-links__label--Visibility: visible;
9857
+ }
9573
9858
  }
9859
+ @media (min-width: 1200px) {
9860
+ .pf-c-jump-links.pf-m-expandable-on-xl {
9861
+ --pf-c-jump-links__list--Display: none;
9862
+ --pf-c-jump-links__list--Visibility: hidden;
9863
+ --pf-c-jump-links__toggle--Display: block;
9864
+ --pf-c-jump-links__toggle--Visibility: visible;
9865
+ --pf-c-jump-links__label--Display: none;
9866
+ --pf-c-jump-links__label--Visibility: hidden;
9867
+ }
9574
9868
 
9575
- .pf-c-icon__content.pf-m-success {
9576
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9869
+ .pf-c-jump-links.pf-m-non-expandable-on-xl {
9870
+ --pf-c-jump-links__list--Display: flex;
9871
+ --pf-c-jump-links__list--Visibility: visible;
9872
+ --pf-c-jump-links__toggle--Display: none;
9873
+ --pf-c-jump-links__toggle--Visibility: hidden;
9874
+ --pf-c-jump-links__label--Display: block;
9875
+ --pf-c-jump-links__label--Visibility: visible;
9876
+ }
9577
9877
  }
9878
+ @media (min-width: 1450px) {
9879
+ .pf-c-jump-links.pf-m-expandable-on-2xl {
9880
+ --pf-c-jump-links__list--Display: none;
9881
+ --pf-c-jump-links__list--Visibility: hidden;
9882
+ --pf-c-jump-links__toggle--Display: block;
9883
+ --pf-c-jump-links__toggle--Visibility: visible;
9884
+ --pf-c-jump-links__label--Display: none;
9885
+ --pf-c-jump-links__label--Visibility: hidden;
9886
+ }
9578
9887
 
9579
- .pf-c-icon__content.pf-m-info {
9580
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9888
+ .pf-c-jump-links.pf-m-non-expandable-on-2xl {
9889
+ --pf-c-jump-links__list--Display: flex;
9890
+ --pf-c-jump-links__list--Visibility: visible;
9891
+ --pf-c-jump-links__toggle--Display: none;
9892
+ --pf-c-jump-links__toggle--Visibility: hidden;
9893
+ --pf-c-jump-links__label--Display: block;
9894
+ --pf-c-jump-links__label--Visibility: visible;
9895
+ }
9896
+ }
9897
+ .pf-c-jump-links.pf-m-expanded {
9898
+ --pf-c-jump-links__list--Display: flex;
9899
+ --pf-c-jump-links__list--Visibility: visible;
9900
+ --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
9901
+ --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
9902
+ --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
9581
9903
  }
9582
9904
 
9583
- .pf-c-icon__content.pf-m-default {
9584
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9905
+ .pf-c-jump-links__list {
9906
+ position: relative;
9907
+ display: var(--pf-c-jump-links__list--Display);
9908
+ flex-direction: var(--pf-c-jump-links__list--FlexDirection);
9909
+ padding-top: var(--pf-c-jump-links__list--PaddingTop);
9910
+ padding-right: var(--pf-c-jump-links__list--PaddingRight);
9911
+ padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
9912
+ padding-left: var(--pf-c-jump-links__list--PaddingLeft);
9913
+ visibility: var(--pf-c-jump-links__list--Visibility);
9585
9914
  }
9586
9915
 
9587
- .pf-c-icon__progress {
9916
+ .pf-c-jump-links__list::before {
9588
9917
  position: absolute;
9589
- top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9590
- opacity: var(--pf-c-icon__progress--Opacity, 0);
9591
- transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9918
+ top: 0;
9919
+ right: 0;
9920
+ bottom: 0;
9921
+ left: 0;
9922
+ pointer-events: none;
9923
+ content: "";
9924
+ border: solid var(--pf-c-jump-links__list--before--BorderColor);
9925
+ border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
9592
9926
  }
9593
9927
 
9594
- .pf-c-input-group {
9595
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9596
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9597
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9598
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9599
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9600
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9601
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9928
+ .pf-c-jump-links__list .pf-c-jump-links__list {
9929
+ --pf-c-jump-links__list--PaddingTop: 0;
9930
+ --pf-c-jump-links__list--PaddingBottom: 0;
9931
+ --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
9932
+ --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
9933
+ --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
9934
+ margin-top: var(--pf-c-jump-links__list__list--MarginTop);
9602
9935
  }
9603
9936
 
9604
- .pf-c-input-group {
9605
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
9606
- --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
9607
- --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
9608
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9609
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
9610
- --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
9611
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
9612
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
9613
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
9614
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
9615
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
9616
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
9617
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
9618
- --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
9619
- --pf-c-input-group--c-form-control--MarginRight: 0;
9620
- color: var(--pf-global--Color--100);
9937
+ .pf-c-jump-links__link {
9938
+ position: relative;
9621
9939
  display: flex;
9622
- width: 100%;
9623
- background-color: var(--pf-c-input-group--BackgroundColor);
9624
- }
9625
-
9626
- .pf-c-input-group.pf-m-plain {
9627
- --pf-c-input-group--BackgroundColor: transparent;
9940
+ flex: 1;
9941
+ padding-top: var(--pf-c-jump-links__link--PaddingTop);
9942
+ padding-right: var(--pf-c-jump-links__link--PaddingRight);
9943
+ padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
9944
+ padding-left: var(--pf-c-jump-links__link--PaddingLeft);
9945
+ text-decoration: none;
9946
+ outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
9628
9947
  }
9629
9948
 
9630
- .pf-c-input-group > * + * {
9631
- margin-left: -1px;
9949
+ .pf-c-jump-links__link:hover {
9950
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
9632
9951
  }
9633
9952
 
9634
- .pf-c-input-group > :focus,
9635
- .pf-c-input-group > :focus-within {
9636
- z-index: var(--pf-c-input-group--child--ZIndex);
9953
+ .pf-c-jump-links__link:focus {
9954
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
9637
9955
  }
9638
9956
 
9639
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
9640
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
9957
+ .pf-c-jump-links__link::before {
9958
+ position: absolute;
9959
+ top: 0;
9960
+ right: 0;
9961
+ bottom: 0;
9962
+ left: 0;
9963
+ pointer-events: none;
9964
+ content: "";
9965
+ border-color: var(--pf-c-jump-links__link--before--BorderColor);
9966
+ border-style: solid;
9967
+ border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
9641
9968
  }
9642
9969
 
9643
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
9644
- .pf-c-input-group textarea {
9645
- flex: 2;
9646
- min-width: 0;
9970
+ .pf-c-jump-links__item {
9971
+ --pf-c-jump-links__list--before--BorderColor: transparent;
9647
9972
  }
9648
9973
 
9649
- .pf-c-input-group textarea {
9650
- min-height: var(--pf-c-input-group__textarea--MinHeight);
9974
+ .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
9975
+ --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
9976
+ --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
9977
+ --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
9978
+ --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
9651
9979
  }
9652
9980
 
9653
- .pf-c-input-group__text {
9654
- display: flex;
9655
- align-items: center;
9656
- padding-right: var(--pf-c-input-group__text--PaddingRight);
9657
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
9658
- font-size: var(--pf-c-input-group__text--FontSize);
9659
- color: var(--pf-c-input-group__text--Color);
9660
- text-align: center;
9661
- background-color: var(--pf-c-input-group__text--BackgroundColor);
9662
- border: var(--pf-c-input-group__text--BorderWidth) solid;
9663
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
9981
+ .pf-c-jump-links__link-text {
9982
+ color: var(--pf-c-jump-links__link-text--Color);
9664
9983
  }
9665
9984
 
9666
- label.pf-c-input-group__text {
9667
- cursor: pointer;
9985
+ .pf-c-jump-links__label {
9986
+ display: var(--pf-c-jump-links__label--Display);
9987
+ margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
9988
+ visibility: var(--pf-c-jump-links__label--Visibility);
9668
9989
  }
9669
9990
 
9670
- .pf-c-input-group__text.pf-m-plain {
9671
- --pf-c-input-group__text--BorderWidth: 0;
9672
- margin-left: 0;
9991
+ .pf-c-jump-links__main {
9992
+ display: flex;
9993
+ flex-direction: column;
9673
9994
  }
9674
9995
 
9675
- :where(.pf-theme-dark) .pf-c-input-group {
9676
- --pf-c-input-group--BackgroundColor: transparent;
9677
- --pf-c-input-group__text--BorderTopColor: transparent;
9678
- --pf-c-input-group__text--BorderRightColor: transparent;
9679
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9680
- --pf-c-input-group__text--BorderLeftColor: transparent;
9681
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
9996
+ .pf-c-jump-links__toggle {
9997
+ display: var(--pf-c-jump-links__toggle--Display);
9998
+ margin-top: var(--pf-c-jump-links__toggle--MarginTop);
9999
+ margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10000
+ margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10001
+ visibility: var(--pf-c-jump-links__toggle--Visibility);
9682
10002
  }
9683
10003
 
9684
- :where(.pf-theme-dark) .pf-c-input-group > * + * {
9685
- margin-left: 0;
9686
- border-left: 1px solid var(--pf-global--palette--black-700);
10004
+ .pf-c-jump-links__toggle .pf-c-button {
10005
+ display: flex;
10006
+ align-items: center;
9687
10007
  }
9688
10008
 
9689
- :where(.pf-theme-dark) .pf-c-input-group__text {
9690
- --pf-c-input-group__text--BorderTopColor: transparent;
9691
- --pf-c-input-group__text--BorderRightColor: transparent;
9692
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9693
- --pf-c-input-group__text--BorderLeftColor: transparent;
10009
+ .pf-c-jump-links__toggle-icon {
10010
+ display: inline-block;
10011
+ color: var(--pf-c-jump-links__toggle-icon--Color);
10012
+ transition: var(--pf-c-jump-links__toggle-icon--Transition);
10013
+ transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
9694
10014
  }
9695
10015
 
9696
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
9697
- --pf-c-input-group__text--BackgroundColor: transparent;
10016
+ .pf-c-jump-links__toggle-text {
10017
+ margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10018
+ color: var(--pf-c-jump-links__toggle-text--Color);
9698
10019
  }
9699
10020
 
9700
10021
  .pf-c-sidebar {
@@ -9871,476 +10192,155 @@ label.pf-c-input-group__text {
9871
10192
  --pf-c-sidebar__panel--FlexBasis: 75%;
9872
10193
  }
9873
10194
 
9874
- .pf-c-sidebar__panel.pf-m-width-100 {
9875
- --pf-c-sidebar__panel--FlexBasis: 100%;
9876
- }
9877
-
9878
- @media (min-width: 576px) {
9879
- .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9880
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9881
- }
9882
-
9883
- .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9884
- --pf-c-sidebar__panel--FlexBasis: 25%;
9885
- }
9886
-
9887
- .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9888
- --pf-c-sidebar__panel--FlexBasis: 33%;
9889
- }
9890
-
9891
- .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9892
- --pf-c-sidebar__panel--FlexBasis: 50%;
9893
- }
9894
-
9895
- .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9896
- --pf-c-sidebar__panel--FlexBasis: 66%;
9897
- }
9898
-
9899
- .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9900
- --pf-c-sidebar__panel--FlexBasis: 75%;
9901
- }
9902
-
9903
- .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9904
- --pf-c-sidebar__panel--FlexBasis: 100%;
9905
- }
9906
- }
9907
- @media (min-width: 768px) {
9908
- .pf-c-sidebar__panel.pf-m-width-default-on-md {
9909
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9910
- }
9911
-
9912
- .pf-c-sidebar__panel.pf-m-width-25-on-md {
9913
- --pf-c-sidebar__panel--FlexBasis: 25%;
9914
- }
9915
-
9916
- .pf-c-sidebar__panel.pf-m-width-33-on-md {
9917
- --pf-c-sidebar__panel--FlexBasis: 33%;
9918
- }
9919
-
9920
- .pf-c-sidebar__panel.pf-m-width-50-on-md {
9921
- --pf-c-sidebar__panel--FlexBasis: 50%;
9922
- }
9923
-
9924
- .pf-c-sidebar__panel.pf-m-width-66-on-md {
9925
- --pf-c-sidebar__panel--FlexBasis: 66%;
9926
- }
9927
-
9928
- .pf-c-sidebar__panel.pf-m-width-75-on-md {
9929
- --pf-c-sidebar__panel--FlexBasis: 75%;
9930
- }
9931
-
9932
- .pf-c-sidebar__panel.pf-m-width-100-on-md {
9933
- --pf-c-sidebar__panel--FlexBasis: 100%;
9934
- }
9935
- }
9936
- @media (min-width: 992px) {
9937
- .pf-c-sidebar__panel.pf-m-width-default-on-lg {
9938
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9939
- }
9940
-
9941
- .pf-c-sidebar__panel.pf-m-width-25-on-lg {
9942
- --pf-c-sidebar__panel--FlexBasis: 25%;
9943
- }
9944
-
9945
- .pf-c-sidebar__panel.pf-m-width-33-on-lg {
9946
- --pf-c-sidebar__panel--FlexBasis: 33%;
9947
- }
9948
-
9949
- .pf-c-sidebar__panel.pf-m-width-50-on-lg {
9950
- --pf-c-sidebar__panel--FlexBasis: 50%;
9951
- }
9952
-
9953
- .pf-c-sidebar__panel.pf-m-width-66-on-lg {
9954
- --pf-c-sidebar__panel--FlexBasis: 66%;
9955
- }
9956
-
9957
- .pf-c-sidebar__panel.pf-m-width-75-on-lg {
9958
- --pf-c-sidebar__panel--FlexBasis: 75%;
9959
- }
9960
-
9961
- .pf-c-sidebar__panel.pf-m-width-100-on-lg {
9962
- --pf-c-sidebar__panel--FlexBasis: 100%;
9963
- }
10195
+ .pf-c-sidebar__panel.pf-m-width-100 {
10196
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9964
10197
  }
9965
- @media (min-width: 1200px) {
9966
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10198
+
10199
+ @media (min-width: 576px) {
10200
+ .pf-c-sidebar__panel.pf-m-width-default-on-sm {
9967
10201
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9968
10202
  }
9969
10203
 
9970
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10204
+ .pf-c-sidebar__panel.pf-m-width-25-on-sm {
9971
10205
  --pf-c-sidebar__panel--FlexBasis: 25%;
9972
10206
  }
9973
10207
 
9974
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10208
+ .pf-c-sidebar__panel.pf-m-width-33-on-sm {
9975
10209
  --pf-c-sidebar__panel--FlexBasis: 33%;
9976
10210
  }
9977
10211
 
9978
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10212
+ .pf-c-sidebar__panel.pf-m-width-50-on-sm {
9979
10213
  --pf-c-sidebar__panel--FlexBasis: 50%;
9980
10214
  }
9981
10215
 
9982
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10216
+ .pf-c-sidebar__panel.pf-m-width-66-on-sm {
9983
10217
  --pf-c-sidebar__panel--FlexBasis: 66%;
9984
10218
  }
9985
10219
 
9986
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10220
+ .pf-c-sidebar__panel.pf-m-width-75-on-sm {
9987
10221
  --pf-c-sidebar__panel--FlexBasis: 75%;
9988
10222
  }
9989
10223
 
9990
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10224
+ .pf-c-sidebar__panel.pf-m-width-100-on-sm {
9991
10225
  --pf-c-sidebar__panel--FlexBasis: 100%;
9992
10226
  }
9993
10227
  }
9994
- @media (min-width: 1450px) {
9995
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10228
+ @media (min-width: 768px) {
10229
+ .pf-c-sidebar__panel.pf-m-width-default-on-md {
9996
10230
  --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9997
10231
  }
9998
10232
 
9999
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10233
+ .pf-c-sidebar__panel.pf-m-width-25-on-md {
10000
10234
  --pf-c-sidebar__panel--FlexBasis: 25%;
10001
10235
  }
10002
10236
 
10003
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10237
+ .pf-c-sidebar__panel.pf-m-width-33-on-md {
10004
10238
  --pf-c-sidebar__panel--FlexBasis: 33%;
10005
10239
  }
10006
10240
 
10007
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10241
+ .pf-c-sidebar__panel.pf-m-width-50-on-md {
10008
10242
  --pf-c-sidebar__panel--FlexBasis: 50%;
10009
10243
  }
10010
10244
 
10011
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10245
+ .pf-c-sidebar__panel.pf-m-width-66-on-md {
10012
10246
  --pf-c-sidebar__panel--FlexBasis: 66%;
10013
10247
  }
10014
10248
 
10015
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10249
+ .pf-c-sidebar__panel.pf-m-width-75-on-md {
10016
10250
  --pf-c-sidebar__panel--FlexBasis: 75%;
10017
10251
  }
10018
10252
 
10019
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10020
- --pf-c-sidebar__panel--FlexBasis: 100%;
10021
- }
10022
- }
10023
- .pf-c-jump-links {
10024
- --pf-c-jump-links__list--Display: flex;
10025
- --pf-c-jump-links__list--Visibility: visible;
10026
- --pf-c-jump-links__list--PaddingTop: 0;
10027
- --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
10028
- --pf-c-jump-links__list--PaddingBottom: 0;
10029
- --pf-c-jump-links__list--PaddingLeft: var(--pf-global--spacer--md);
10030
- --pf-c-jump-links--m-vertical__list--PaddingTop: var(--pf-global--spacer--md);
10031
- --pf-c-jump-links--m-vertical__list--PaddingRight: 0;
10032
- --pf-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-global--spacer--md);
10033
- --pf-c-jump-links--m-vertical__list--PaddingLeft: 0;
10034
- --pf-c-jump-links__list--FlexDirection: row;
10035
- --pf-c-jump-links--m-vertical__list--FlexDirection: column;
10036
- --pf-c-jump-links__list--before--BorderColor: var(--pf-global--BorderColor--100);
10037
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10038
- --pf-c-jump-links__list--before--BorderRightWidth: 0;
10039
- --pf-c-jump-links__list--before--BorderBottomWidth: 0;
10040
- --pf-c-jump-links__list--before--BorderLeftWidth: 0;
10041
- --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
10042
- --pf-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
10043
- --pf-c-jump-links__list__list--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10044
- --pf-c-jump-links__link--PaddingTop: var(--pf-global--spacer--md);
10045
- --pf-c-jump-links__link--PaddingRight: var(--pf-global--spacer--md);
10046
- --pf-c-jump-links__link--PaddingBottom: var(--pf-global--spacer--md);
10047
- --pf-c-jump-links__link--PaddingLeft: var(--pf-global--spacer--md);
10048
- --pf-c-jump-links__list__list__link--PaddingTop: var(--pf-global--spacer--sm);
10049
- --pf-c-jump-links__list__list__link--PaddingLeft: var(--pf-global--spacer--lg);
10050
- --pf-c-jump-links__list__list__link--PaddingBottom: var(--pf-global--spacer--sm);
10051
- --pf-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-global--spacer--sm));
10052
- --pf-c-jump-links__link--before--BorderTopWidth: 0;
10053
- --pf-c-jump-links__link--before--BorderRightWidth: 0;
10054
- --pf-c-jump-links__link--before--BorderBottomWidth: 0;
10055
- --pf-c-jump-links__link--before--BorderLeftWidth: 0;
10056
- --pf-c-jump-links__link--before--BorderColor: transparent;
10057
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-global--BorderWidth--lg);
10058
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
10059
- --pf-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-global--primary-color--100);
10060
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
10061
- --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
10062
- --pf-c-jump-links__link-text--Color: var(--pf-global--Color--200);
10063
- --pf-c-jump-links__link--hover__link-text--Color: var(--pf-global--Color--100);
10064
- --pf-c-jump-links__link--focus__link-text--Color: var(--pf-global--Color--100);
10065
- --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
10066
- --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
10067
- --pf-c-jump-links__label--Display: block;
10068
- --pf-c-jump-links__label--Visibility: visible;
10069
- --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
10070
- --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
10071
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
10072
- --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
10073
- --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
10074
- --pf-c-jump-links__toggle--Display: none;
10075
- --pf-c-jump-links__toggle--Visibility: hidden;
10076
- --pf-c-jump-links__toggle-icon--Color: currentcolor;
10077
- --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
10078
- --pf-c-jump-links__toggle-icon--Rotate: 0;
10079
- --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
10080
- --pf-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
10081
- --pf-c-jump-links__toggle-text--MarginLeft: var(--pf-global--spacer--md);
10082
- --pf-c-jump-links__toggle-text--Color: var(--pf-global--Color--100);
10083
- display: flex;
10084
- }
10085
-
10086
- .pf-c-jump-links.pf-m-center {
10087
- justify-content: center;
10088
- }
10089
-
10090
- .pf-c-jump-links.pf-m-center .pf-c-jump-links__main {
10091
- align-items: center;
10092
- }
10093
-
10094
- .pf-c-jump-links.pf-m-vertical, .pf-c-jump-links.pf-m-expandable {
10095
- --pf-c-jump-links__list--PaddingTop: var(--pf-c-jump-links--m-vertical__list--PaddingTop);
10096
- --pf-c-jump-links__list--PaddingRight: var(--pf-c-jump-links--m-vertical__list--PaddingRight);
10097
- --pf-c-jump-links__list--PaddingBottom: var(--pf-c-jump-links--m-vertical__list--PaddingBottom);
10098
- --pf-c-jump-links__list--PaddingLeft: var(--pf-c-jump-links--m-vertical__list--PaddingLeft);
10099
- --pf-c-jump-links__list--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth);
10100
- --pf-c-jump-links__list--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth);
10101
- --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
10102
- --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
10103
- --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection);
10104
- flex-direction: column;
10105
- }
10106
-
10107
- .pf-c-jump-links.pf-m-expandable {
10108
- --pf-c-jump-links__list--Display: none;
10109
- --pf-c-jump-links__list--Visibility: hidden;
10110
- --pf-c-jump-links__toggle--Display: block;
10111
- --pf-c-jump-links__toggle--Visibility: visible;
10112
- --pf-c-jump-links__label--Display: none;
10113
- --pf-c-jump-links__label--Visibility: hidden;
10114
- }
10115
-
10116
- .pf-c-jump-links.pf-m-non-expandable {
10117
- --pf-c-jump-links__list--Display: flex;
10118
- --pf-c-jump-links__list--Visibility: visible;
10119
- --pf-c-jump-links__toggle--Display: none;
10120
- --pf-c-jump-links__toggle--Visibility: hidden;
10121
- --pf-c-jump-links__label--Display: block;
10122
- --pf-c-jump-links__label--Visibility: visible;
10123
- }
10124
-
10125
- @media (min-width: 576px) {
10126
- .pf-c-jump-links.pf-m-expandable-on-sm {
10127
- --pf-c-jump-links__list--Display: none;
10128
- --pf-c-jump-links__list--Visibility: hidden;
10129
- --pf-c-jump-links__toggle--Display: block;
10130
- --pf-c-jump-links__toggle--Visibility: visible;
10131
- --pf-c-jump-links__label--Display: none;
10132
- --pf-c-jump-links__label--Visibility: hidden;
10133
- }
10134
-
10135
- .pf-c-jump-links.pf-m-non-expandable-on-sm {
10136
- --pf-c-jump-links__list--Display: flex;
10137
- --pf-c-jump-links__list--Visibility: visible;
10138
- --pf-c-jump-links__toggle--Display: none;
10139
- --pf-c-jump-links__toggle--Visibility: hidden;
10140
- --pf-c-jump-links__label--Display: block;
10141
- --pf-c-jump-links__label--Visibility: visible;
10142
- }
10143
- }
10144
- @media (min-width: 768px) {
10145
- .pf-c-jump-links.pf-m-expandable-on-md {
10146
- --pf-c-jump-links__list--Display: none;
10147
- --pf-c-jump-links__list--Visibility: hidden;
10148
- --pf-c-jump-links__toggle--Display: block;
10149
- --pf-c-jump-links__toggle--Visibility: visible;
10150
- --pf-c-jump-links__label--Display: none;
10151
- --pf-c-jump-links__label--Visibility: hidden;
10152
- }
10153
-
10154
- .pf-c-jump-links.pf-m-non-expandable-on-md {
10155
- --pf-c-jump-links__list--Display: flex;
10156
- --pf-c-jump-links__list--Visibility: visible;
10157
- --pf-c-jump-links__toggle--Display: none;
10158
- --pf-c-jump-links__toggle--Visibility: hidden;
10159
- --pf-c-jump-links__label--Display: block;
10160
- --pf-c-jump-links__label--Visibility: visible;
10161
- }
10162
- }
10163
- @media (min-width: 992px) {
10164
- .pf-c-jump-links.pf-m-expandable-on-lg {
10165
- --pf-c-jump-links__list--Display: none;
10166
- --pf-c-jump-links__list--Visibility: hidden;
10167
- --pf-c-jump-links__toggle--Display: block;
10168
- --pf-c-jump-links__toggle--Visibility: visible;
10169
- --pf-c-jump-links__label--Display: none;
10170
- --pf-c-jump-links__label--Visibility: hidden;
10171
- }
10172
-
10173
- .pf-c-jump-links.pf-m-non-expandable-on-lg {
10174
- --pf-c-jump-links__list--Display: flex;
10175
- --pf-c-jump-links__list--Visibility: visible;
10176
- --pf-c-jump-links__toggle--Display: none;
10177
- --pf-c-jump-links__toggle--Visibility: hidden;
10178
- --pf-c-jump-links__label--Display: block;
10179
- --pf-c-jump-links__label--Visibility: visible;
10180
- }
10181
- }
10182
- @media (min-width: 1200px) {
10183
- .pf-c-jump-links.pf-m-expandable-on-xl {
10184
- --pf-c-jump-links__list--Display: none;
10185
- --pf-c-jump-links__list--Visibility: hidden;
10186
- --pf-c-jump-links__toggle--Display: block;
10187
- --pf-c-jump-links__toggle--Visibility: visible;
10188
- --pf-c-jump-links__label--Display: none;
10189
- --pf-c-jump-links__label--Visibility: hidden;
10190
- }
10191
-
10192
- .pf-c-jump-links.pf-m-non-expandable-on-xl {
10193
- --pf-c-jump-links__list--Display: flex;
10194
- --pf-c-jump-links__list--Visibility: visible;
10195
- --pf-c-jump-links__toggle--Display: none;
10196
- --pf-c-jump-links__toggle--Visibility: hidden;
10197
- --pf-c-jump-links__label--Display: block;
10198
- --pf-c-jump-links__label--Visibility: visible;
10199
- }
10200
- }
10201
- @media (min-width: 1450px) {
10202
- .pf-c-jump-links.pf-m-expandable-on-2xl {
10203
- --pf-c-jump-links__list--Display: none;
10204
- --pf-c-jump-links__list--Visibility: hidden;
10205
- --pf-c-jump-links__toggle--Display: block;
10206
- --pf-c-jump-links__toggle--Visibility: visible;
10207
- --pf-c-jump-links__label--Display: none;
10208
- --pf-c-jump-links__label--Visibility: hidden;
10209
- }
10210
-
10211
- .pf-c-jump-links.pf-m-non-expandable-on-2xl {
10212
- --pf-c-jump-links__list--Display: flex;
10213
- --pf-c-jump-links__list--Visibility: visible;
10214
- --pf-c-jump-links__toggle--Display: none;
10215
- --pf-c-jump-links__toggle--Visibility: hidden;
10216
- --pf-c-jump-links__label--Display: block;
10217
- --pf-c-jump-links__label--Visibility: visible;
10218
- }
10219
- }
10220
- .pf-c-jump-links.pf-m-expanded {
10221
- --pf-c-jump-links__list--Display: flex;
10222
- --pf-c-jump-links__list--Visibility: visible;
10223
- --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
10224
- --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
10225
- --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
10226
- }
10227
-
10228
- .pf-c-jump-links__list {
10229
- position: relative;
10230
- display: var(--pf-c-jump-links__list--Display);
10231
- flex-direction: var(--pf-c-jump-links__list--FlexDirection);
10232
- padding-top: var(--pf-c-jump-links__list--PaddingTop);
10233
- padding-right: var(--pf-c-jump-links__list--PaddingRight);
10234
- padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
10235
- padding-left: var(--pf-c-jump-links__list--PaddingLeft);
10236
- visibility: var(--pf-c-jump-links__list--Visibility);
10237
- }
10238
-
10239
- .pf-c-jump-links__list::before {
10240
- position: absolute;
10241
- top: 0;
10242
- right: 0;
10243
- bottom: 0;
10244
- left: 0;
10245
- pointer-events: none;
10246
- content: "";
10247
- border: solid var(--pf-c-jump-links__list--before--BorderColor);
10248
- border-width: var(--pf-c-jump-links__list--before--BorderTopWidth) var(--pf-c-jump-links__list--before--BorderRightWidth) var(--pf-c-jump-links__list--before--BorderBottomWidth) var(--pf-c-jump-links__list--before--BorderLeftWidth);
10253
+ .pf-c-sidebar__panel.pf-m-width-100-on-md {
10254
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10255
+ }
10249
10256
  }
10257
+ @media (min-width: 992px) {
10258
+ .pf-c-sidebar__panel.pf-m-width-default-on-lg {
10259
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10260
+ }
10250
10261
 
10251
- .pf-c-jump-links__list .pf-c-jump-links__list {
10252
- --pf-c-jump-links__list--PaddingTop: 0;
10253
- --pf-c-jump-links__list--PaddingBottom: 0;
10254
- --pf-c-jump-links__link--PaddingTop: var(--pf-c-jump-links__list__list__link--PaddingTop);
10255
- --pf-c-jump-links__link--PaddingBottom: var(--pf-c-jump-links__list__list__link--PaddingBottom);
10256
- --pf-c-jump-links__link--PaddingLeft: var(--pf-c-jump-links__list__list__link--PaddingLeft);
10257
- margin-top: var(--pf-c-jump-links__list__list--MarginTop);
10258
- }
10262
+ .pf-c-sidebar__panel.pf-m-width-25-on-lg {
10263
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10264
+ }
10259
10265
 
10260
- .pf-c-jump-links__link {
10261
- position: relative;
10262
- display: flex;
10263
- flex: 1;
10264
- padding-top: var(--pf-c-jump-links__link--PaddingTop);
10265
- padding-right: var(--pf-c-jump-links__link--PaddingRight);
10266
- padding-bottom: var(--pf-c-jump-links__link--PaddingBottom);
10267
- padding-left: var(--pf-c-jump-links__link--PaddingLeft);
10268
- text-decoration: none;
10269
- outline-offset: var(--pf-c-jump-links__link--OutlineOffset);
10270
- }
10266
+ .pf-c-sidebar__panel.pf-m-width-33-on-lg {
10267
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10268
+ }
10271
10269
 
10272
- .pf-c-jump-links__link:hover {
10273
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--hover__link-text--Color);
10274
- }
10270
+ .pf-c-sidebar__panel.pf-m-width-50-on-lg {
10271
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10272
+ }
10275
10273
 
10276
- .pf-c-jump-links__link:focus {
10277
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__link--focus__link-text--Color);
10278
- }
10274
+ .pf-c-sidebar__panel.pf-m-width-66-on-lg {
10275
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10276
+ }
10279
10277
 
10280
- .pf-c-jump-links__link::before {
10281
- position: absolute;
10282
- top: 0;
10283
- right: 0;
10284
- bottom: 0;
10285
- left: 0;
10286
- pointer-events: none;
10287
- content: "";
10288
- border-color: var(--pf-c-jump-links__link--before--BorderColor);
10289
- border-style: solid;
10290
- border-width: var(--pf-c-jump-links__link--before--BorderTopWidth) var(--pf-c-jump-links__link--before--BorderRightWidth) var(--pf-c-jump-links__link--before--BorderBottomWidth) var(--pf-c-jump-links__link--before--BorderLeftWidth);
10291
- }
10278
+ .pf-c-sidebar__panel.pf-m-width-75-on-lg {
10279
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10280
+ }
10292
10281
 
10293
- .pf-c-jump-links__item {
10294
- --pf-c-jump-links__list--before--BorderColor: transparent;
10282
+ .pf-c-sidebar__panel.pf-m-width-100-on-lg {
10283
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10284
+ }
10295
10285
  }
10286
+ @media (min-width: 1200px) {
10287
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
10288
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10289
+ }
10296
10290
 
10297
- .pf-c-jump-links__item.pf-m-current > .pf-c-jump-links__link {
10298
- --pf-c-jump-links__link--before--BorderTopWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderTopWidth);
10299
- --pf-c-jump-links__link--before--BorderLeftWidth: var(--pf-c-jump-links__item--m-current__link--before--BorderLeftWidth);
10300
- --pf-c-jump-links__link--before--BorderColor: var(--pf-c-jump-links__item--m-current__link--before--BorderColor);
10301
- --pf-c-jump-links__link-text--Color: var(--pf-c-jump-links__item--m-current__link-text--Color);
10302
- }
10291
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
10292
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10293
+ }
10303
10294
 
10304
- .pf-c-jump-links__link-text {
10305
- color: var(--pf-c-jump-links__link-text--Color);
10306
- }
10295
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
10296
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10297
+ }
10307
10298
 
10308
- .pf-c-jump-links__label {
10309
- display: var(--pf-c-jump-links__label--Display);
10310
- margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
10311
- visibility: var(--pf-c-jump-links__label--Visibility);
10312
- }
10299
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
10300
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10301
+ }
10313
10302
 
10314
- .pf-c-jump-links__main {
10315
- display: flex;
10316
- flex-direction: column;
10317
- }
10303
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
10304
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10305
+ }
10318
10306
 
10319
- .pf-c-jump-links__toggle {
10320
- display: var(--pf-c-jump-links__toggle--Display);
10321
- margin-top: var(--pf-c-jump-links__toggle--MarginTop);
10322
- margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
10323
- margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
10324
- visibility: var(--pf-c-jump-links__toggle--Visibility);
10325
- }
10307
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
10308
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10309
+ }
10326
10310
 
10327
- .pf-c-jump-links__toggle .pf-c-button {
10328
- display: flex;
10329
- align-items: center;
10311
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
10312
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10313
+ }
10330
10314
  }
10315
+ @media (min-width: 1450px) {
10316
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
10317
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
10318
+ }
10331
10319
 
10332
- .pf-c-jump-links__toggle-icon {
10333
- display: inline-block;
10334
- color: var(--pf-c-jump-links__toggle-icon--Color);
10335
- transition: var(--pf-c-jump-links__toggle-icon--Transition);
10336
- transform: rotate(var(--pf-c-jump-links__toggle-icon--Rotate));
10337
- }
10320
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
10321
+ --pf-c-sidebar__panel--FlexBasis: 25%;
10322
+ }
10338
10323
 
10339
- .pf-c-jump-links__toggle-text {
10340
- margin-left: var(--pf-c-jump-links__toggle-text--MarginLeft);
10341
- color: var(--pf-c-jump-links__toggle-text--Color);
10342
- }
10324
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
10325
+ --pf-c-sidebar__panel--FlexBasis: 33%;
10326
+ }
10343
10327
 
10328
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
10329
+ --pf-c-sidebar__panel--FlexBasis: 50%;
10330
+ }
10331
+
10332
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
10333
+ --pf-c-sidebar__panel--FlexBasis: 66%;
10334
+ }
10335
+
10336
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
10337
+ --pf-c-sidebar__panel--FlexBasis: 75%;
10338
+ }
10339
+
10340
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
10341
+ --pf-c-sidebar__panel--FlexBasis: 100%;
10342
+ }
10343
+ }
10344
10344
  .pf-c-label {
10345
10345
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10346
10346
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -18113,102 +18113,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18113
18113
 
18114
18114
  label.pf-c-radio, .pf-c-radio__label,
18115
18115
  .pf-c-radio__input {
18116
- cursor: pointer;
18117
- }
18118
-
18119
- .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
18120
- .pf-c-radio__input:disabled,
18121
- .pf-c-radio__input.pf-m-disabled {
18122
- --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
18123
- cursor: not-allowed;
18124
- }
18125
-
18126
- .pf-c-simple-list {
18127
- --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
18128
- --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
18129
- --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
18130
- --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
18131
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
18132
- --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
18133
- --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
18134
- --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
18135
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
18136
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
18137
- --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
18138
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18139
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18140
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18141
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
18142
- --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
18143
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18144
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
18145
- --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
18146
- --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
18147
- --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
18148
- --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
18149
- --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
18150
- --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
18151
- --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
18152
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
18153
- --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
18154
- }
18155
-
18156
- .pf-c-simple-list__item-link {
18157
- display: block;
18158
- width: 100%;
18159
- padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
18160
- font-size: var(--pf-c-simple-list__item-link--FontSize);
18161
- font-weight: var(--pf-c-simple-list__item-link--FontWeight);
18162
- color: var(--pf-c-simple-list__item-link--Color);
18163
- text-align: left;
18164
- background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
18165
- border: none;
18166
- }
18167
-
18168
- .pf-c-simple-list__item-link:hover {
18169
- text-decoration: none;
18170
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
18171
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
18172
- }
18173
-
18174
- .pf-c-simple-list__item-link:focus {
18175
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
18176
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
18177
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
18178
- }
18179
-
18180
- .pf-c-simple-list__item-link:active {
18181
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
18182
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
18183
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
18184
- }
18185
-
18186
- .pf-c-simple-list__item-link.pf-m-current {
18187
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
18188
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
18189
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
18190
- }
18191
-
18192
- .pf-c-simple-list__title {
18193
- padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
18194
- font-size: var(--pf-c-simple-list__title--FontSize);
18195
- font-weight: var(--pf-c-simple-list__title--FontWeight);
18196
- color: var(--pf-c-simple-list__title--Color);
18197
- }
18198
-
18199
- .pf-c-simple-list__section + .pf-c-simple-list__section {
18200
- margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18201
- }
18202
-
18203
- :where(.pf-theme-dark) .pf-c-simple-list {
18204
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
18205
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
18206
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18207
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18208
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18209
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
18210
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18211
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
18116
+ cursor: pointer;
18117
+ }
18118
+
18119
+ .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
18120
+ .pf-c-radio__input:disabled,
18121
+ .pf-c-radio__input.pf-m-disabled {
18122
+ --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
18123
+ cursor: not-allowed;
18212
18124
  }
18213
18125
 
18214
18126
  .pf-c-select {
@@ -18454,406 +18366,690 @@ label.pf-c-radio, .pf-c-radio__label,
18454
18366
  border: 0;
18455
18367
  }
18456
18368
 
18457
- .pf-c-select__toggle::before {
18458
- --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
18459
- position: absolute;
18460
- top: 0;
18461
- right: 0;
18462
- bottom: 0;
18463
- left: 0;
18464
- content: "";
18465
- border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
18466
- border-style: solid;
18467
- border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
18369
+ .pf-c-select__toggle::before {
18370
+ --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
18371
+ position: absolute;
18372
+ top: 0;
18373
+ right: 0;
18374
+ bottom: 0;
18375
+ left: 0;
18376
+ content: "";
18377
+ border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
18378
+ border-style: solid;
18379
+ border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
18380
+ }
18381
+
18382
+ .pf-c-select__toggle:hover {
18383
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
18384
+ }
18385
+
18386
+ .pf-c-select__toggle:focus, .pf-c-select__toggle:focus-within {
18387
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
18388
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
18389
+ }
18390
+
18391
+ .pf-c-select__toggle:active, .pf-c-select__toggle.pf-m-active {
18392
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--active--before--BorderBottomColor);
18393
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--active--before--BorderBottomWidth);
18394
+ }
18395
+
18396
+ .pf-m-expanded > .pf-c-select__toggle {
18397
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--m-expanded--before--BorderBottomColor);
18398
+ --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
18399
+ }
18400
+
18401
+ .pf-c-select__toggle.pf-m-plain {
18402
+ --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18403
+ }
18404
+
18405
+ .pf-c-select__toggle.pf-m-plain::before {
18406
+ border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18407
+ }
18408
+
18409
+ .pf-c-select__toggle.pf-m-plain:hover, .pf-c-select__toggle.pf-m-plain:active, .pf-c-select__toggle.pf-m-plain.pf-m-active, .pf-c-select__toggle.pf-m-plain:focus, .pf-c-select.pf-m-expanded > .pf-c-select__toggle.pf-m-plain {
18410
+ --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
18411
+ }
18412
+
18413
+ .pf-c-select__toggle.pf-m-typeahead {
18414
+ --pf-c-select__toggle--PaddingTop: 0;
18415
+ --pf-c-select__toggle--PaddingRight: 0;
18416
+ --pf-c-select__toggle--PaddingBottom: 0;
18417
+ }
18418
+
18419
+ .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control {
18420
+ overflow: hidden;
18421
+ text-overflow: ellipsis;
18422
+ white-space: nowrap;
18423
+ --pf-c-form-control--invalid--BackgroundUrl: none;
18424
+ position: relative;
18425
+ height: auto;
18426
+ }
18427
+
18428
+ .pf-c-select__toggle .pf-c-select__toggle-clear {
18429
+ padding-right: var(--pf-c-select__toggle-clear--PaddingRight);
18430
+ padding-left: var(--pf-c-select__toggle-clear--PaddingLeft);
18431
+ margin-left: auto;
18432
+ }
18433
+
18434
+ .pf-c-select__toggle .pf-c-select__toggle-button {
18435
+ color: var(--pf-c-select__toggle-button--Color);
18436
+ }
18437
+
18438
+ .pf-c-select__toggle .pf-c-select__toggle-clear + .pf-c-select__toggle-button {
18439
+ padding-left: var(--pf-c-select__toggle-clear--toggle-button--PaddingLeft);
18440
+ }
18441
+
18442
+ .pf-c-select__toggle.pf-m-placeholder {
18443
+ --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
18444
+ }
18445
+
18446
+ .pf-c-select__toggle-arrow {
18447
+ color: var(--pf-c-select__toggle-arrow--Color, inherit);
18448
+ }
18449
+
18450
+ * + .pf-c-select__toggle-arrow {
18451
+ margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
18452
+ margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);
18453
+ }
18454
+
18455
+ .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
18456
+ transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
18457
+ }
18458
+
18459
+ .pf-c-select__toggle-text {
18460
+ overflow: hidden;
18461
+ text-overflow: ellipsis;
18462
+ white-space: nowrap;
18463
+ color: var(--pf-c-select__toggle-text--Color, inherit);
18464
+ }
18465
+
18466
+ .pf-c-select__toggle-wrapper {
18467
+ display: flex;
18468
+ flex: 1;
18469
+ flex-wrap: wrap;
18470
+ align-items: center;
18471
+ justify-content: flex-start;
18472
+ min-width: 0;
18473
+ max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18474
+ white-space: normal;
18475
+ }
18476
+
18477
+ .pf-c-select__toggle-wrapper > :not(:last-child) {
18478
+ margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18479
+ }
18480
+
18481
+ .pf-c-select__toggle-wrapper > .pf-c-form-control {
18482
+ margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18483
+ }
18484
+
18485
+ .pf-c-select__toggle-wrapper .pf-c-chip-group {
18486
+ margin-top: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginTop);
18487
+ margin-bottom: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom);
18488
+ }
18489
+
18490
+ .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18491
+ margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18492
+ }
18493
+
18494
+ .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18495
+ margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18496
+ }
18497
+
18498
+ .pf-c-select__toggle-status-icon {
18499
+ margin-left: var(--pf-c-select__toggle-status-icon--MarginLeft);
18500
+ color: var(--pf-c-select__toggle-status-icon--Color);
18501
+ }
18502
+
18503
+ .pf-c-select__toggle-badge {
18504
+ display: flex;
18505
+ padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18506
+ }
18507
+
18508
+ .pf-c-select__toggle-typeahead {
18509
+ flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
18510
+ flex-grow: 1;
18511
+ min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
18512
+ flex-shrink: 0;
18513
+ }
18514
+
18515
+ .pf-c-select__toggle-typeahead.pf-c-form-control {
18516
+ background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
18517
+ border-top: var(--pf-c-select__toggle-typeahead--BorderTop);
18518
+ border-right: var(--pf-c-select__toggle-typeahead--BorderRight);
18519
+ border-bottom-color: transparent;
18520
+ border-left: var(--pf-c-select__toggle-typeahead--BorderLeft);
18521
+ }
18522
+
18523
+ .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18524
+ padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18525
+ }
18526
+
18527
+ .pf-c-select__menu {
18528
+ position: absolute;
18529
+ top: var(--pf-c-select__menu--Top);
18530
+ z-index: var(--pf-c-select__menu--ZIndex);
18531
+ width: var(--pf-c-select__menu--Width);
18532
+ min-width: var(--pf-c-select__menu--MinWidth);
18533
+ padding-top: var(--pf-c-select__menu--PaddingTop);
18534
+ padding-bottom: var(--pf-c-select__menu--PaddingBottom);
18535
+ background-color: var(--pf-c-select__menu--BackgroundColor);
18536
+ background-clip: padding-box;
18537
+ box-shadow: var(--pf-c-select__menu--BoxShadow);
18538
+ }
18539
+
18540
+ .pf-c-select__menu.pf-m-align-right {
18541
+ right: 0;
18542
+ }
18543
+
18544
+ .pf-c-select.pf-m-top .pf-c-select__menu {
18545
+ top: 0;
18546
+ transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18547
+ }
18548
+
18549
+ .pf-c-select__menu.pf-m-static {
18550
+ --pf-c-select__menu--m-top--TranslateY: 0;
18551
+ position: static;
18552
+ top: auto;
18553
+ right: auto;
18554
+ bottom: auto;
18555
+ left: auto;
18556
+ z-index: auto;
18557
+ min-width: min-content;
18558
+ }
18559
+
18560
+ .pf-c-select__menu-fieldset {
18561
+ border: 0;
18562
+ }
18563
+
18564
+ .pf-c-select__menu-wrapper {
18565
+ display: flex;
18566
+ }
18567
+
18568
+ .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
18569
+ --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
18570
+ --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
18571
+ --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
18572
+ }
18573
+
18574
+ .pf-c-select__menu-item {
18575
+ position: relative;
18576
+ width: var(--pf-c-select__menu-item--Width);
18577
+ padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
18578
+ font-size: var(--pf-c-select__menu-item--FontSize);
18579
+ font-weight: var(--pf-c-select__menu-item--FontWeight);
18580
+ line-height: var(--pf-c-select__menu-item--LineHeight);
18581
+ color: var(--pf-c-select__menu-item--Color);
18582
+ text-align: left;
18583
+ white-space: nowrap;
18584
+ background-color: transparent;
18585
+ border: none;
18586
+ }
18587
+
18588
+ .pf-c-select__menu-item:hover, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18589
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
18590
+ text-decoration: none;
18591
+ }
18592
+
18593
+ .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18594
+ background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
18595
+ }
18596
+
18597
+ .pf-c-select__menu-wrapper:focus-within,
18598
+ .pf-c-select__menu-wrapper.pf-m-focus, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18599
+ position: relative;
18600
+ background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
18601
+ }
18602
+
18603
+ .pf-c-select__menu-item.pf-m-link {
18604
+ --pf-c-select__menu-item--PaddingRight: 0;
18605
+ --pf-c-select__menu-item-main--PaddingRight: 0;
18606
+ --pf-c-select__menu-item-description--PaddingRight: 0;
18607
+ --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-link--Width);
18608
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-link--hover--BackgroundColor);
18609
+ --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-link--focus--BackgroundColor);
18610
+ flex-grow: 1;
18611
+ }
18612
+
18613
+ .pf-c-select__menu-item.pf-m-action {
18614
+ --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-action--Color);
18615
+ --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-action--Width);
18616
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-action--hover--BackgroundColor);
18617
+ --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-action--focus--BackgroundColor);
18618
+ display: flex;
18619
+ align-items: flex-start;
18620
+ font-size: var(--pf-c-select__menu-item--m-action--FontSize);
18621
+ }
18622
+
18623
+ .pf-c-select__menu-item.pf-m-action:hover {
18624
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--hover--Color);
18468
18625
  }
18469
18626
 
18470
- .pf-c-select__toggle:hover {
18471
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
18627
+ .pf-c-select__menu-item.pf-m-action:focus {
18628
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
18472
18629
  }
18473
18630
 
18474
- .pf-c-select__toggle:focus, .pf-c-select__toggle:focus-within {
18475
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
18476
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
18631
+ .pf-c-select__menu-item.pf-m-action:disabled {
18632
+ --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
18477
18633
  }
18478
18634
 
18479
- .pf-c-select__toggle:active, .pf-c-select__toggle.pf-m-active {
18480
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--active--before--BorderBottomColor);
18481
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--active--before--BorderBottomWidth);
18635
+ .pf-c-select__menu-item.pf-m-favorite-action {
18636
+ --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
18637
+ --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
18638
+ --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
18482
18639
  }
18483
18640
 
18484
- .pf-m-expanded > .pf-c-select__toggle {
18485
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--m-expanded--before--BorderBottomColor);
18486
- --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-c-select__toggle--m-expanded--before--BorderBottomWidth);
18641
+ .pf-c-select__menu-item.pf-m-selected {
18642
+ --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18643
+ --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
18487
18644
  }
18488
18645
 
18489
- .pf-c-select__toggle.pf-m-plain {
18490
- --pf-c-select__toggle-arrow--Color: var(--pf-c-select--m-plain__toggle-arrow--Color);
18646
+ .pf-c-select__menu-item.pf-m-description {
18647
+ white-space: normal;
18491
18648
  }
18492
18649
 
18493
- .pf-c-select__toggle.pf-m-plain::before {
18494
- border-color: var(--pf-c-select__toggle--m-plain--before--BorderColor);
18650
+ .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18651
+ --pf-c-select__menu-item--PaddingRight: 0;
18495
18652
  }
18496
18653
 
18497
- .pf-c-select__toggle.pf-m-plain:hover, .pf-c-select__toggle.pf-m-plain:active, .pf-c-select__toggle.pf-m-plain.pf-m-active, .pf-c-select__toggle.pf-m-plain:focus, .pf-c-select.pf-m-expanded > .pf-c-select__toggle.pf-m-plain {
18498
- --pf-c-select--m-plain__toggle-arrow--Color: var(--pf-c-select--m-plain--hover__toggle-arrow--Color);
18654
+ .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18655
+ white-space: nowrap;
18499
18656
  }
18500
18657
 
18501
- .pf-c-select__toggle.pf-m-typeahead {
18502
- --pf-c-select__toggle--PaddingTop: 0;
18503
- --pf-c-select__toggle--PaddingRight: 0;
18504
- --pf-c-select__toggle--PaddingBottom: 0;
18658
+ .pf-c-select__menu-wrapper.pf-m-disabled, .pf-c-select__menu-item:disabled, .pf-c-select__menu-item.pf-m-disabled {
18659
+ --pf-c-select__menu-item-count--Color: var(--pf-c-select__menu-item--disabled__menu-item-count--Color);
18660
+ color: var(--pf-c-select__menu-item--disabled--Color);
18661
+ pointer-events: none;
18662
+ background-color: var(--pf-c-select__menu-item--disabled--BackgroundColor);
18505
18663
  }
18506
18664
 
18507
- .pf-c-select__toggle.pf-m-typeahead .pf-c-form-control {
18508
- overflow: hidden;
18509
- text-overflow: ellipsis;
18510
- white-space: nowrap;
18511
- --pf-c-form-control--invalid--BackgroundUrl: none;
18512
- position: relative;
18513
- height: auto;
18665
+ .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18666
+ width: 100%;
18514
18667
  }
18515
18668
 
18516
- .pf-c-select__toggle .pf-c-select__toggle-clear {
18517
- padding-right: var(--pf-c-select__toggle-clear--PaddingRight);
18518
- padding-left: var(--pf-c-select__toggle-clear--PaddingLeft);
18519
- margin-left: auto;
18669
+ .pf-c-select__menu-item.pf-m-load {
18670
+ --pf-c-select__menu-item--hover--BackgroundColor: transparent;
18671
+ --pf-c-select__menu-item--focus--BackgroundColor: transparent;
18672
+ --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-load--Color);
18520
18673
  }
18521
18674
 
18522
- .pf-c-select__toggle .pf-c-select__toggle-button {
18523
- color: var(--pf-c-select__toggle-button--Color);
18675
+ .pf-c-select__list-item.pf-m-loading {
18676
+ padding-top: var(--pf-c-select__list-item--m-loading--PaddingTop);
18677
+ text-align: center;
18524
18678
  }
18525
18679
 
18526
- .pf-c-select__toggle .pf-c-select__toggle-clear + .pf-c-select__toggle-button {
18527
- padding-left: var(--pf-c-select__toggle-clear--toggle-button--PaddingLeft);
18680
+ .pf-c-select__menu-item-main {
18681
+ position: relative;
18682
+ display: block;
18683
+ padding-right: var(--pf-c-select__menu-item-main--PaddingRight);
18684
+ white-space: nowrap;
18528
18685
  }
18529
18686
 
18530
- .pf-c-select__toggle.pf-m-placeholder {
18531
- --pf-c-select__toggle-text--Color: var(--pf-c-select__toggle--m-placeholder__toggle-text--Color);
18687
+ .pf-c-select__menu-item-row {
18688
+ display: flex;
18532
18689
  }
18533
18690
 
18534
- .pf-c-select__toggle-arrow {
18535
- color: var(--pf-c-select__toggle-arrow--Color, inherit);
18691
+ .pf-c-select__menu-item-text {
18692
+ flex-grow: 1;
18536
18693
  }
18537
18694
 
18538
- * + .pf-c-select__toggle-arrow {
18539
- margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
18540
- margin-left: var(--pf-c-select__toggle-arrow--MarginLeft);
18695
+ .pf-c-select__menu-item-count {
18696
+ align-self: center;
18697
+ margin-left: var(--pf-c-select__menu-item-count--MarginLeft);
18698
+ font-size: var(--pf-c-select__menu-item-count--FontSize);
18699
+ color: var(--pf-c-select__menu-item-count--Color);
18541
18700
  }
18542
18701
 
18543
- .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
18544
- transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
18702
+ .pf-c-select__menu-item-description {
18703
+ display: block;
18704
+ padding-right: var(--pf-c-select__menu-item-description--PaddingRight);
18705
+ font-size: var(--pf-c-select__menu-item-description--FontSize);
18706
+ color: var(--pf-c-select__menu-item-description--Color);
18545
18707
  }
18546
18708
 
18547
- .pf-c-select__toggle-text {
18548
- overflow: hidden;
18549
- text-overflow: ellipsis;
18550
- white-space: nowrap;
18551
- color: var(--pf-c-select__toggle-text--Color, inherit);
18709
+ .pf-c-select__menu-item-icon {
18710
+ position: absolute;
18711
+ top: var(--pf-c-select__menu-item-icon--Top);
18712
+ right: var(--pf-c-select__menu-item-icon--Right);
18713
+ font-size: var(--pf-c-select__menu-item-icon--FontSize);
18714
+ color: var(--pf-c-select__menu-item-icon--Color);
18715
+ transform: translateY(var(--pf-c-select__menu-item-icon--TranslateY));
18552
18716
  }
18553
18717
 
18554
- .pf-c-select__toggle-wrapper {
18718
+ .pf-c-select__menu-item-action-icon {
18555
18719
  display: flex;
18556
- flex: 1;
18557
- flex-wrap: wrap;
18558
18720
  align-items: center;
18559
- justify-content: flex-start;
18560
- min-width: 0;
18561
- max-width: var(--pf-c-select__toggle-wrapper--MaxWidth);
18562
- white-space: normal;
18563
- }
18564
-
18565
- .pf-c-select__toggle-wrapper > :not(:last-child) {
18566
- margin-right: var(--pf-c-select__toggle-wrapper--not-last-child--MarginRight);
18721
+ min-height: var(--pf-c-select__menu-item-action-icon--MinHeight);
18567
18722
  }
18568
18723
 
18569
- .pf-c-select__toggle-wrapper > .pf-c-form-control {
18570
- margin-top: calc(-1 * var(--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop));
18724
+ .pf-c-select__menu-item--match {
18725
+ font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18726
+ background-color: inherit;
18571
18727
  }
18572
18728
 
18573
- .pf-c-select__toggle-wrapper .pf-c-chip-group {
18574
- margin-top: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginTop);
18575
- margin-bottom: var(--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom);
18729
+ .pf-c-select__menu-group + .pf-c-select__menu-group {
18730
+ padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
18576
18731
  }
18577
18732
 
18578
- .pf-c-select__toggle-wrapper > .pf-c-select__toggle-typeahead:first-child {
18579
- margin-left: calc(-1 * var(--pf-c-select__toggle--PaddingLeft));
18733
+ .pf-c-select__menu-search {
18734
+ padding: var(--pf-c-select__menu-search--PaddingTop) var(--pf-c-select__menu-search--PaddingRight) var(--pf-c-select__menu-search--PaddingBottom) var(--pf-c-select__menu-search--PaddingLeft);
18580
18735
  }
18581
18736
 
18582
- .pf-c-select__toggle-icon + .pf-c-select__toggle-text {
18583
- margin-left: var(--pf-c-select__toggle-icon--toggle-text--MarginLeft);
18737
+ .pf-c-select__menu-group-title {
18738
+ padding-top: var(--pf-c-select__menu-group-title--PaddingTop);
18739
+ padding-right: var(--pf-c-select__menu-group-title--PaddingRight);
18740
+ padding-bottom: var(--pf-c-select__menu-group-title--PaddingBottom);
18741
+ padding-left: var(--pf-c-select__menu-group-title--PaddingLeft);
18742
+ font-size: var(--pf-c-select__menu-group-title--FontSize);
18743
+ font-weight: var(--pf-c-select__menu-group-title--FontWeight);
18744
+ color: var(--pf-c-select__menu-group-title--Color);
18584
18745
  }
18585
18746
 
18586
- .pf-c-select__toggle-status-icon {
18587
- margin-left: var(--pf-c-select__toggle-status-icon--MarginLeft);
18588
- color: var(--pf-c-select__toggle-status-icon--Color);
18747
+ .pf-c-select__menu-footer {
18748
+ padding: var(--pf-c-select__menu-footer--PaddingTop) var(--pf-c-select__menu-footer--PaddingRight) var(--pf-c-select__menu-footer--PaddingBottom) var(--pf-c-select__menu-footer--PaddingLeft);
18749
+ margin-top: var(--pf-c-select__menu-footer--MarginTop);
18750
+ margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
18751
+ box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
18589
18752
  }
18590
18753
 
18591
- .pf-c-select__toggle-badge {
18592
- display: flex;
18593
- padding-left: var(--pf-c-select__toggle-badge--PaddingLeft);
18754
+ :where(.pf-theme-dark) .pf-c-select {
18755
+ --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
18756
+ --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
18757
+ --pf-c-select__toggle--before--BorderTopColor: transparent;
18758
+ --pf-c-select__toggle--before--BorderRightColor: transparent;
18759
+ --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
18760
+ --pf-c-select__toggle--before--BorderLeftColor: transparent;
18761
+ --pf-c-select__menu--Top: 100%;
18762
+ --pf-c-select__menu--m-top--TranslateY: -100%;
18763
+ --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18764
+ --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
18594
18765
  }
18595
18766
 
18596
- .pf-c-select__toggle-typeahead {
18597
- flex-basis: var(--pf-c-select__toggle-typeahead--FlexBasis);
18598
- flex-grow: 1;
18599
- min-width: var(--pf-c-select__toggle-typeahead--MinWidth);
18600
- flex-shrink: 0;
18767
+ :where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
18768
+ color: var(--pf-global--palette--black-100);
18601
18769
  }
18602
18770
 
18603
- .pf-c-select__toggle-typeahead.pf-c-form-control {
18604
- background-color: var(--pf-c-select__toggle-typeahead--BackgroundColor);
18605
- border-top: var(--pf-c-select__toggle-typeahead--BorderTop);
18606
- border-right: var(--pf-c-select__toggle-typeahead--BorderRight);
18607
- border-bottom-color: transparent;
18608
- border-left: var(--pf-c-select__toggle-typeahead--BorderLeft);
18771
+ .pf-c-simple-list {
18772
+ --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
18773
+ --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
18774
+ --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
18775
+ --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
18776
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
18777
+ --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
18778
+ --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
18779
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
18780
+ --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
18781
+ --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
18782
+ --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
18783
+ --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18784
+ --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
18785
+ --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18786
+ --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
18787
+ --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
18788
+ --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18789
+ --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
18790
+ --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
18791
+ --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
18792
+ --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
18793
+ --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
18794
+ --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
18795
+ --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
18796
+ --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
18797
+ --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
18798
+ --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
18609
18799
  }
18610
18800
 
18611
- .pf-c-select__toggle-typeahead.pf-c-form-control:focus {
18612
- padding-bottom: var(--pf-c-select__toggle-typeahead--focus--PaddingBottom);
18801
+ .pf-c-simple-list__item-link {
18802
+ display: block;
18803
+ width: 100%;
18804
+ padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
18805
+ font-size: var(--pf-c-simple-list__item-link--FontSize);
18806
+ font-weight: var(--pf-c-simple-list__item-link--FontWeight);
18807
+ color: var(--pf-c-simple-list__item-link--Color);
18808
+ text-align: left;
18809
+ background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
18810
+ border: none;
18613
18811
  }
18614
18812
 
18615
- .pf-c-select__menu {
18616
- position: absolute;
18617
- top: var(--pf-c-select__menu--Top);
18618
- z-index: var(--pf-c-select__menu--ZIndex);
18619
- width: var(--pf-c-select__menu--Width);
18620
- min-width: var(--pf-c-select__menu--MinWidth);
18621
- padding-top: var(--pf-c-select__menu--PaddingTop);
18622
- padding-bottom: var(--pf-c-select__menu--PaddingBottom);
18623
- background-color: var(--pf-c-select__menu--BackgroundColor);
18624
- background-clip: padding-box;
18625
- box-shadow: var(--pf-c-select__menu--BoxShadow);
18813
+ .pf-c-simple-list__item-link:hover {
18814
+ text-decoration: none;
18815
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
18816
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
18626
18817
  }
18627
18818
 
18628
- .pf-c-select__menu.pf-m-align-right {
18629
- right: 0;
18819
+ .pf-c-simple-list__item-link:focus {
18820
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
18821
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
18822
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
18630
18823
  }
18631
18824
 
18632
- .pf-c-select.pf-m-top .pf-c-select__menu {
18633
- top: 0;
18634
- transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
18825
+ .pf-c-simple-list__item-link:active {
18826
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
18827
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
18828
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
18635
18829
  }
18636
18830
 
18637
- .pf-c-select__menu.pf-m-static {
18638
- --pf-c-select__menu--m-top--TranslateY: 0;
18639
- position: static;
18640
- top: auto;
18641
- right: auto;
18642
- bottom: auto;
18643
- left: auto;
18644
- z-index: auto;
18645
- min-width: min-content;
18831
+ .pf-c-simple-list__item-link.pf-m-current {
18832
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
18833
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
18834
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
18646
18835
  }
18647
18836
 
18648
- .pf-c-select__menu-fieldset {
18649
- border: 0;
18837
+ .pf-c-simple-list__title {
18838
+ padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
18839
+ font-size: var(--pf-c-simple-list__title--FontSize);
18840
+ font-weight: var(--pf-c-simple-list__title--FontWeight);
18841
+ color: var(--pf-c-simple-list__title--Color);
18650
18842
  }
18651
18843
 
18652
- .pf-c-select__menu-wrapper {
18653
- display: flex;
18844
+ .pf-c-simple-list__section + .pf-c-simple-list__section {
18845
+ margin-top: var(--pf-c-simple-list__section--section--MarginTop);
18654
18846
  }
18655
18847
 
18656
- .pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action {
18657
- --pf-c-select__menu-item--m-favorite-action--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
18658
- --pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
18659
- --pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
18848
+ :where(.pf-theme-dark) .pf-c-simple-list {
18849
+ --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
18850
+ --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
18851
+ --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
18852
+ --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18853
+ --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
18854
+ --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
18855
+ --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
18856
+ --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
18660
18857
  }
18661
18858
 
18662
- .pf-c-select__menu-item {
18859
+ .pf-c-skeleton {
18860
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
18861
+ --pf-c-skeleton--Width: auto;
18862
+ --pf-c-skeleton--Height: auto;
18863
+ --pf-c-skeleton--BorderRadius: var(--pf-global--BorderRadius--sm);
18864
+ --pf-c-skeleton--before--PaddingBottom: 0;
18865
+ --pf-c-skeleton--before--Height: auto;
18866
+ --pf-c-skeleton--before--Content: " ";
18867
+ --pf-c-skeleton--after--LinearGradientAngle: 90deg;
18868
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-150);
18869
+ --pf-c-skeleton--after--LinearGradientColorStop2: #ededed;
18870
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-150);
18871
+ --pf-c-skeleton--after--TranslateX: -100%;
18872
+ --pf-c-skeleton--after--AnimationName: pf-c-skeleton-loading;
18873
+ --pf-c-skeleton--after--AnimationDuration: 2s;
18874
+ --pf-c-skeleton--after--AnimationIterationCount: infinite;
18875
+ --pf-c-skeleton--after--AnimationTimingFunction: linear;
18876
+ --pf-c-skeleton--after--AnimationDelay: .5s;
18877
+ --pf-c-skeleton--m-circle--BorderRadius: var(--pf-global--BorderRadius--lg);
18878
+ --pf-c-skeleton--m-circle--before--PaddingBottom: 100%;
18879
+ --pf-c-skeleton--m-text-4xl--Height: calc(var(--pf-global--FontSize--4xl) * var(--pf-global--LineHeight--sm));
18880
+ --pf-c-skeleton--m-text-3xl--Height: calc(var(--pf-global--FontSize--3xl) * var(--pf-global--LineHeight--sm));
18881
+ --pf-c-skeleton--m-text-2xl--Height: calc(var(--pf-global--FontSize--2xl) * var(--pf-global--LineHeight--sm));
18882
+ --pf-c-skeleton--m-text-xl--Height: calc(var(--pf-global--FontSize--xl) * var(--pf-global--LineHeight--sm));
18883
+ --pf-c-skeleton--m-text-lg--Height: calc(var(--pf-global--FontSize--lg) * var(--pf-global--LineHeight--md));
18884
+ --pf-c-skeleton--m-text-md--Height: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
18885
+ --pf-c-skeleton--m-text-sm--Height: calc(var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--md));
18886
+ --pf-c-skeleton--m-width-sm--Width: 6.25rem;
18887
+ --pf-c-skeleton--m-width-md--Width: 12.5rem;
18888
+ --pf-c-skeleton--m-width-lg--Width: 18.75rem;
18889
+ --pf-c-skeleton--m-width-25--Width: 25%;
18890
+ --pf-c-skeleton--m-width-33--Width: calc(100% / 3);
18891
+ --pf-c-skeleton--m-width-50--Width: 50%;
18892
+ --pf-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
18893
+ --pf-c-skeleton--m-width-75--Width: 75%;
18894
+ --pf-c-skeleton--m-height-sm--Height: 6.25rem;
18895
+ --pf-c-skeleton--m-height-md--Height: 12.5rem;
18896
+ --pf-c-skeleton--m-height-lg--Height: 18.75rem;
18897
+ --pf-c-skeleton--m-height-25--Height: 25%;
18898
+ --pf-c-skeleton--m-height-33--Height: calc(100% / 3);
18899
+ --pf-c-skeleton--m-height-50--Height: 50%;
18900
+ --pf-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
18901
+ --pf-c-skeleton--m-height-75--Height: 75%;
18902
+ --pf-c-skeleton--m-height-100--Height: 100%;
18663
18903
  position: relative;
18664
- width: var(--pf-c-select__menu-item--Width);
18665
- padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
18666
- font-size: var(--pf-c-select__menu-item--FontSize);
18667
- font-weight: var(--pf-c-select__menu-item--FontWeight);
18668
- line-height: var(--pf-c-select__menu-item--LineHeight);
18669
- color: var(--pf-c-select__menu-item--Color);
18670
- text-align: left;
18671
- white-space: nowrap;
18672
- background-color: transparent;
18673
- border: none;
18674
- }
18675
-
18676
- .pf-c-select__menu-item:hover, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18677
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--hover__menu-item--m-action--Color);
18678
- text-decoration: none;
18904
+ width: var(--pf-c-skeleton--Width);
18905
+ height: var(--pf-c-skeleton--Height);
18906
+ overflow: hidden;
18907
+ background-color: var(--pf-c-skeleton--BackgroundColor);
18908
+ border-radius: var(--pf-c-skeleton--BorderRadius);
18909
+ transform: translate(0);
18679
18910
  }
18680
18911
 
18681
- .pf-c-select__menu-wrapper:hover, .pf-c-select__menu-item:hover {
18682
- background-color: var(--pf-c-select__menu-item--hover--BackgroundColor);
18912
+ .pf-c-skeleton::before {
18913
+ display: block;
18914
+ height: var(--pf-c-skeleton--before--Height);
18915
+ padding-bottom: var(--pf-c-skeleton--before--PaddingBottom);
18916
+ content: var(--pf-c-skeleton--before--Content);
18683
18917
  }
18684
18918
 
18685
- .pf-c-select__menu-wrapper:focus-within,
18686
- .pf-c-select__menu-wrapper.pf-m-focus, .pf-c-select__menu-item:focus, .pf-c-select__menu-item.pf-m-focus {
18687
- position: relative;
18688
- background-color: var(--pf-c-select__menu-item--focus--BackgroundColor);
18919
+ .pf-c-skeleton::after {
18920
+ position: absolute;
18921
+ top: 0;
18922
+ right: 0;
18923
+ bottom: 0;
18924
+ left: 0;
18925
+ display: block;
18926
+ content: "";
18927
+ background: linear-gradient(var(--pf-c-skeleton--after--LinearGradientAngle), var(--pf-c-skeleton--after--LinearGradientColorStop1), var(--pf-c-skeleton--after--LinearGradientColorStop2), var(--pf-c-skeleton--after--LinearGradientColorStop3));
18928
+ transform: translate3d(var(--pf-c-skeleton--after--TranslateX), 0, 0);
18929
+ animation: var(--pf-c-skeleton--after--AnimationName) var(--pf-c-skeleton--after--AnimationDuration) var(--pf-c-skeleton--after--AnimationTimingFunction) var(--pf-c-skeleton--after--AnimationDelay) var(--pf-c-skeleton--after--AnimationIterationCount);
18689
18930
  }
18690
18931
 
18691
- .pf-c-select__menu-item.pf-m-link {
18692
- --pf-c-select__menu-item--PaddingRight: 0;
18693
- --pf-c-select__menu-item-main--PaddingRight: 0;
18694
- --pf-c-select__menu-item-description--PaddingRight: 0;
18695
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-link--Width);
18696
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-link--hover--BackgroundColor);
18697
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-link--focus--BackgroundColor);
18698
- flex-grow: 1;
18932
+ .pf-c-skeleton.pf-m-circle {
18933
+ --pf-c-skeleton--BorderRadius: var(--pf-c-skeleton--m-circle--BorderRadius);
18699
18934
  }
18700
18935
 
18701
- .pf-c-select__menu-item.pf-m-action {
18702
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-action--Color);
18703
- --pf-c-select__menu-item--Width: var(--pf-c-select__menu-item--m-action--Width);
18704
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-c-select__menu-item--m-action--hover--BackgroundColor);
18705
- --pf-c-select__menu-item--focus--BackgroundColor: var(--pf-c-select__menu-item--m-action--focus--BackgroundColor);
18706
- display: flex;
18707
- align-items: flex-start;
18708
- font-size: var(--pf-c-select__menu-item--m-action--FontSize);
18936
+ .pf-c-skeleton.pf-m-square, .pf-c-skeleton.pf-m-circle {
18937
+ --pf-c-skeleton--before--Height: 0;
18938
+ --pf-c-skeleton--before--PaddingBottom: var(--pf-c-skeleton--m-circle--before--PaddingBottom);
18709
18939
  }
18710
18940
 
18711
- .pf-c-select__menu-item.pf-m-action:hover {
18712
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--hover--Color);
18941
+ .pf-c-skeleton.pf-m-width-sm {
18942
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-sm--Width);
18713
18943
  }
18714
18944
 
18715
- .pf-c-select__menu-item.pf-m-action:focus {
18716
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-action--focus--Color);
18945
+ .pf-c-skeleton.pf-m-width-md {
18946
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-md--Width);
18717
18947
  }
18718
18948
 
18719
- .pf-c-select__menu-item.pf-m-action:disabled {
18720
- --pf-c-select__menu-item--disabled--Color: var(--pf-c-select__menu-item--m-action--disabled--Color);
18949
+ .pf-c-skeleton.pf-m-width-lg {
18950
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-lg--Width);
18721
18951
  }
18722
18952
 
18723
- .pf-c-select__menu-item.pf-m-favorite-action {
18724
- --pf-c-select__menu-item--m-action--Color: var(--pf-c-select__menu-item--m-favorite-action--Color);
18725
- --pf-c-select__menu-item--m-action--hover--Color: var(--pf-c-select__menu-item--m-favorite-action--hover--Color);
18726
- --pf-c-select__menu-item--m-action--focus--Color: var(--pf-c-select__menu-item--m-favorite-action--focus--Color);
18953
+ .pf-c-skeleton.pf-m-width-25 {
18954
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-25--Width);
18727
18955
  }
18728
18956
 
18729
- .pf-c-select__menu-item.pf-m-selected {
18730
- --pf-c-select__menu-item--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
18731
- --pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight);
18957
+ .pf-c-skeleton.pf-m-width-33 {
18958
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-33--Width);
18732
18959
  }
18733
18960
 
18734
- .pf-c-select__menu-item.pf-m-description {
18735
- white-space: normal;
18961
+ .pf-c-skeleton.pf-m-width-50 {
18962
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-50--Width);
18736
18963
  }
18737
18964
 
18738
- .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) {
18739
- --pf-c-select__menu-item--PaddingRight: 0;
18965
+ .pf-c-skeleton.pf-m-width-66 {
18966
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-66--Width);
18740
18967
  }
18741
18968
 
18742
- .pf-c-select__menu-item.pf-m-description .pf-c-check__label {
18743
- white-space: nowrap;
18969
+ .pf-c-skeleton.pf-m-width-75 {
18970
+ --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-75--Width);
18744
18971
  }
18745
18972
 
18746
- .pf-c-select__menu-wrapper.pf-m-disabled, .pf-c-select__menu-item:disabled, .pf-c-select__menu-item.pf-m-disabled {
18747
- --pf-c-select__menu-item-count--Color: var(--pf-c-select__menu-item--disabled__menu-item-count--Color);
18748
- color: var(--pf-c-select__menu-item--disabled--Color);
18749
- pointer-events: none;
18750
- background-color: var(--pf-c-select__menu-item--disabled--BackgroundColor);
18973
+ .pf-c-skeleton.pf-m-height-sm {
18974
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-sm--Height);
18751
18975
  }
18752
18976
 
18753
- .pf-c-select__menu-item.pf-c-check .pf-c-check__label {
18754
- width: 100%;
18977
+ .pf-c-skeleton.pf-m-height-md {
18978
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-md--Height);
18755
18979
  }
18756
18980
 
18757
- .pf-c-select__menu-item.pf-m-load {
18758
- --pf-c-select__menu-item--hover--BackgroundColor: transparent;
18759
- --pf-c-select__menu-item--focus--BackgroundColor: transparent;
18760
- --pf-c-select__menu-item--Color: var(--pf-c-select__menu-item--m-load--Color);
18981
+ .pf-c-skeleton.pf-m-height-lg {
18982
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
18761
18983
  }
18762
18984
 
18763
- .pf-c-select__list-item.pf-m-loading {
18764
- padding-top: var(--pf-c-select__list-item--m-loading--PaddingTop);
18765
- text-align: center;
18985
+ .pf-c-skeleton.pf-m-height-25 {
18986
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
18766
18987
  }
18767
18988
 
18768
- .pf-c-select__menu-item-main {
18769
- position: relative;
18770
- display: block;
18771
- padding-right: var(--pf-c-select__menu-item-main--PaddingRight);
18772
- white-space: nowrap;
18989
+ .pf-c-skeleton.pf-m-height-33 {
18990
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
18773
18991
  }
18774
18992
 
18775
- .pf-c-select__menu-item-row {
18776
- display: flex;
18993
+ .pf-c-skeleton.pf-m-height-50 {
18994
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
18777
18995
  }
18778
18996
 
18779
- .pf-c-select__menu-item-text {
18780
- flex-grow: 1;
18997
+ .pf-c-skeleton.pf-m-height-66 {
18998
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
18781
18999
  }
18782
19000
 
18783
- .pf-c-select__menu-item-count {
18784
- align-self: center;
18785
- margin-left: var(--pf-c-select__menu-item-count--MarginLeft);
18786
- font-size: var(--pf-c-select__menu-item-count--FontSize);
18787
- color: var(--pf-c-select__menu-item-count--Color);
19001
+ .pf-c-skeleton.pf-m-height-75 {
19002
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
18788
19003
  }
18789
19004
 
18790
- .pf-c-select__menu-item-description {
18791
- display: block;
18792
- padding-right: var(--pf-c-select__menu-item-description--PaddingRight);
18793
- font-size: var(--pf-c-select__menu-item-description--FontSize);
18794
- color: var(--pf-c-select__menu-item-description--Color);
19005
+ .pf-c-skeleton.pf-m-height-100 {
19006
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
18795
19007
  }
18796
19008
 
18797
- .pf-c-select__menu-item-icon {
18798
- position: absolute;
18799
- top: var(--pf-c-select__menu-item-icon--Top);
18800
- right: var(--pf-c-select__menu-item-icon--Right);
18801
- font-size: var(--pf-c-select__menu-item-icon--FontSize);
18802
- color: var(--pf-c-select__menu-item-icon--Color);
18803
- transform: translateY(var(--pf-c-select__menu-item-icon--TranslateY));
19009
+ .pf-c-skeleton.pf-m-text-4xl {
19010
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
18804
19011
  }
18805
19012
 
18806
- .pf-c-select__menu-item-action-icon {
18807
- display: flex;
18808
- align-items: center;
18809
- min-height: var(--pf-c-select__menu-item-action-icon--MinHeight);
19013
+ .pf-c-skeleton.pf-m-text-3xl {
19014
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
18810
19015
  }
18811
19016
 
18812
- .pf-c-select__menu-item--match {
18813
- font-weight: var(--pf-c-select__menu-item--match--FontWeight);
18814
- background-color: inherit;
19017
+ .pf-c-skeleton.pf-m-text-2xl {
19018
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
18815
19019
  }
18816
19020
 
18817
- .pf-c-select__menu-group + .pf-c-select__menu-group {
18818
- padding-top: var(--pf-c-select__menu-group--menu-group--PaddingTop);
19021
+ .pf-c-skeleton.pf-m-text-xl {
19022
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
18819
19023
  }
18820
19024
 
18821
- .pf-c-select__menu-search {
18822
- padding: var(--pf-c-select__menu-search--PaddingTop) var(--pf-c-select__menu-search--PaddingRight) var(--pf-c-select__menu-search--PaddingBottom) var(--pf-c-select__menu-search--PaddingLeft);
19025
+ .pf-c-skeleton.pf-m-text-lg {
19026
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
18823
19027
  }
18824
19028
 
18825
- .pf-c-select__menu-group-title {
18826
- padding-top: var(--pf-c-select__menu-group-title--PaddingTop);
18827
- padding-right: var(--pf-c-select__menu-group-title--PaddingRight);
18828
- padding-bottom: var(--pf-c-select__menu-group-title--PaddingBottom);
18829
- padding-left: var(--pf-c-select__menu-group-title--PaddingLeft);
18830
- font-size: var(--pf-c-select__menu-group-title--FontSize);
18831
- font-weight: var(--pf-c-select__menu-group-title--FontWeight);
18832
- color: var(--pf-c-select__menu-group-title--Color);
19029
+ .pf-c-skeleton.pf-m-text-md {
19030
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
18833
19031
  }
18834
19032
 
18835
- .pf-c-select__menu-footer {
18836
- padding: var(--pf-c-select__menu-footer--PaddingTop) var(--pf-c-select__menu-footer--PaddingRight) var(--pf-c-select__menu-footer--PaddingBottom) var(--pf-c-select__menu-footer--PaddingLeft);
18837
- margin-top: var(--pf-c-select__menu-footer--MarginTop);
18838
- margin-bottom: var(--pf-c-select__menu-footer--MarginBottom);
18839
- box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
19033
+ .pf-c-skeleton.pf-m-text-sm {
19034
+ --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
18840
19035
  }
18841
19036
 
18842
- :where(.pf-theme-dark) .pf-c-select {
18843
- --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
18844
- --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
18845
- --pf-c-select__toggle--before--BorderTopColor: transparent;
18846
- --pf-c-select__toggle--before--BorderRightColor: transparent;
18847
- --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
18848
- --pf-c-select__toggle--before--BorderLeftColor: transparent;
18849
- --pf-c-select__menu--Top: 100%;
18850
- --pf-c-select__menu--m-top--TranslateY: -100%;
18851
- --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18852
- --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
19037
+ @keyframes pf-c-skeleton-loading {
19038
+ 0% {
19039
+ transform: translateX(-100%);
19040
+ }
19041
+ 60% {
19042
+ transform: translateX(100%);
19043
+ }
19044
+ 100% {
19045
+ transform: translateX(100%);
19046
+ }
18853
19047
  }
18854
-
18855
- :where(.pf-theme-dark) .pf-c-select__toggle:disabled, :where(.pf-theme-dark) .pf-c-select__toggle.pf-m-disabled {
18856
- color: var(--pf-global--palette--black-100);
19048
+ :where(.pf-theme-dark) .pf-c-skeleton {
19049
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
19050
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
19051
+ --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
19052
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
18857
19053
  }
18858
19054
 
18859
19055
  .pf-c-skip-to-content {
@@ -19090,202 +19286,6 @@ label.pf-c-radio, .pf-c-radio__label,
19090
19286
  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
19091
19287
  }
19092
19288
 
19093
- .pf-c-skeleton {
19094
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
19095
- --pf-c-skeleton--Width: auto;
19096
- --pf-c-skeleton--Height: auto;
19097
- --pf-c-skeleton--BorderRadius: var(--pf-global--BorderRadius--sm);
19098
- --pf-c-skeleton--before--PaddingBottom: 0;
19099
- --pf-c-skeleton--before--Height: auto;
19100
- --pf-c-skeleton--before--Content: " ";
19101
- --pf-c-skeleton--after--LinearGradientAngle: 90deg;
19102
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-150);
19103
- --pf-c-skeleton--after--LinearGradientColorStop2: #ededed;
19104
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-150);
19105
- --pf-c-skeleton--after--TranslateX: -100%;
19106
- --pf-c-skeleton--after--AnimationName: pf-c-skeleton-loading;
19107
- --pf-c-skeleton--after--AnimationDuration: 2s;
19108
- --pf-c-skeleton--after--AnimationIterationCount: infinite;
19109
- --pf-c-skeleton--after--AnimationTimingFunction: linear;
19110
- --pf-c-skeleton--after--AnimationDelay: .5s;
19111
- --pf-c-skeleton--m-circle--BorderRadius: var(--pf-global--BorderRadius--lg);
19112
- --pf-c-skeleton--m-circle--before--PaddingBottom: 100%;
19113
- --pf-c-skeleton--m-text-4xl--Height: calc(var(--pf-global--FontSize--4xl) * var(--pf-global--LineHeight--sm));
19114
- --pf-c-skeleton--m-text-3xl--Height: calc(var(--pf-global--FontSize--3xl) * var(--pf-global--LineHeight--sm));
19115
- --pf-c-skeleton--m-text-2xl--Height: calc(var(--pf-global--FontSize--2xl) * var(--pf-global--LineHeight--sm));
19116
- --pf-c-skeleton--m-text-xl--Height: calc(var(--pf-global--FontSize--xl) * var(--pf-global--LineHeight--sm));
19117
- --pf-c-skeleton--m-text-lg--Height: calc(var(--pf-global--FontSize--lg) * var(--pf-global--LineHeight--md));
19118
- --pf-c-skeleton--m-text-md--Height: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
19119
- --pf-c-skeleton--m-text-sm--Height: calc(var(--pf-global--FontSize--sm) * var(--pf-global--LineHeight--md));
19120
- --pf-c-skeleton--m-width-sm--Width: 6.25rem;
19121
- --pf-c-skeleton--m-width-md--Width: 12.5rem;
19122
- --pf-c-skeleton--m-width-lg--Width: 18.75rem;
19123
- --pf-c-skeleton--m-width-25--Width: 25%;
19124
- --pf-c-skeleton--m-width-33--Width: calc(100% / 3);
19125
- --pf-c-skeleton--m-width-50--Width: 50%;
19126
- --pf-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
19127
- --pf-c-skeleton--m-width-75--Width: 75%;
19128
- --pf-c-skeleton--m-height-sm--Height: 6.25rem;
19129
- --pf-c-skeleton--m-height-md--Height: 12.5rem;
19130
- --pf-c-skeleton--m-height-lg--Height: 18.75rem;
19131
- --pf-c-skeleton--m-height-25--Height: 25%;
19132
- --pf-c-skeleton--m-height-33--Height: calc(100% / 3);
19133
- --pf-c-skeleton--m-height-50--Height: 50%;
19134
- --pf-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
19135
- --pf-c-skeleton--m-height-75--Height: 75%;
19136
- --pf-c-skeleton--m-height-100--Height: 100%;
19137
- position: relative;
19138
- width: var(--pf-c-skeleton--Width);
19139
- height: var(--pf-c-skeleton--Height);
19140
- overflow: hidden;
19141
- background-color: var(--pf-c-skeleton--BackgroundColor);
19142
- border-radius: var(--pf-c-skeleton--BorderRadius);
19143
- transform: translate(0);
19144
- }
19145
-
19146
- .pf-c-skeleton::before {
19147
- display: block;
19148
- height: var(--pf-c-skeleton--before--Height);
19149
- padding-bottom: var(--pf-c-skeleton--before--PaddingBottom);
19150
- content: var(--pf-c-skeleton--before--Content);
19151
- }
19152
-
19153
- .pf-c-skeleton::after {
19154
- position: absolute;
19155
- top: 0;
19156
- right: 0;
19157
- bottom: 0;
19158
- left: 0;
19159
- display: block;
19160
- content: "";
19161
- background: linear-gradient(var(--pf-c-skeleton--after--LinearGradientAngle), var(--pf-c-skeleton--after--LinearGradientColorStop1), var(--pf-c-skeleton--after--LinearGradientColorStop2), var(--pf-c-skeleton--after--LinearGradientColorStop3));
19162
- transform: translate3d(var(--pf-c-skeleton--after--TranslateX), 0, 0);
19163
- animation: var(--pf-c-skeleton--after--AnimationName) var(--pf-c-skeleton--after--AnimationDuration) var(--pf-c-skeleton--after--AnimationTimingFunction) var(--pf-c-skeleton--after--AnimationDelay) var(--pf-c-skeleton--after--AnimationIterationCount);
19164
- }
19165
-
19166
- .pf-c-skeleton.pf-m-circle {
19167
- --pf-c-skeleton--BorderRadius: var(--pf-c-skeleton--m-circle--BorderRadius);
19168
- }
19169
-
19170
- .pf-c-skeleton.pf-m-square, .pf-c-skeleton.pf-m-circle {
19171
- --pf-c-skeleton--before--Height: 0;
19172
- --pf-c-skeleton--before--PaddingBottom: var(--pf-c-skeleton--m-circle--before--PaddingBottom);
19173
- }
19174
-
19175
- .pf-c-skeleton.pf-m-width-sm {
19176
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-sm--Width);
19177
- }
19178
-
19179
- .pf-c-skeleton.pf-m-width-md {
19180
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-md--Width);
19181
- }
19182
-
19183
- .pf-c-skeleton.pf-m-width-lg {
19184
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-lg--Width);
19185
- }
19186
-
19187
- .pf-c-skeleton.pf-m-width-25 {
19188
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-25--Width);
19189
- }
19190
-
19191
- .pf-c-skeleton.pf-m-width-33 {
19192
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-33--Width);
19193
- }
19194
-
19195
- .pf-c-skeleton.pf-m-width-50 {
19196
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-50--Width);
19197
- }
19198
-
19199
- .pf-c-skeleton.pf-m-width-66 {
19200
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-66--Width);
19201
- }
19202
-
19203
- .pf-c-skeleton.pf-m-width-75 {
19204
- --pf-c-skeleton--Width: var(--pf-c-skeleton--m-width-75--Width);
19205
- }
19206
-
19207
- .pf-c-skeleton.pf-m-height-sm {
19208
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-sm--Height);
19209
- }
19210
-
19211
- .pf-c-skeleton.pf-m-height-md {
19212
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-md--Height);
19213
- }
19214
-
19215
- .pf-c-skeleton.pf-m-height-lg {
19216
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-lg--Height);
19217
- }
19218
-
19219
- .pf-c-skeleton.pf-m-height-25 {
19220
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-25--Height);
19221
- }
19222
-
19223
- .pf-c-skeleton.pf-m-height-33 {
19224
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-33--Height);
19225
- }
19226
-
19227
- .pf-c-skeleton.pf-m-height-50 {
19228
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-50--Height);
19229
- }
19230
-
19231
- .pf-c-skeleton.pf-m-height-66 {
19232
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-66--Height);
19233
- }
19234
-
19235
- .pf-c-skeleton.pf-m-height-75 {
19236
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-75--Height);
19237
- }
19238
-
19239
- .pf-c-skeleton.pf-m-height-100 {
19240
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-height-100--Height);
19241
- }
19242
-
19243
- .pf-c-skeleton.pf-m-text-4xl {
19244
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-4xl--Height);
19245
- }
19246
-
19247
- .pf-c-skeleton.pf-m-text-3xl {
19248
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-3xl--Height);
19249
- }
19250
-
19251
- .pf-c-skeleton.pf-m-text-2xl {
19252
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-2xl--Height);
19253
- }
19254
-
19255
- .pf-c-skeleton.pf-m-text-xl {
19256
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-xl--Height);
19257
- }
19258
-
19259
- .pf-c-skeleton.pf-m-text-lg {
19260
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-lg--Height);
19261
- }
19262
-
19263
- .pf-c-skeleton.pf-m-text-md {
19264
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-md--Height);
19265
- }
19266
-
19267
- .pf-c-skeleton.pf-m-text-sm {
19268
- --pf-c-skeleton--Height: var(--pf-c-skeleton--m-text-sm--Height);
19269
- }
19270
-
19271
- @keyframes pf-c-skeleton-loading {
19272
- 0% {
19273
- transform: translateX(-100%);
19274
- }
19275
- 60% {
19276
- transform: translateX(100%);
19277
- }
19278
- 100% {
19279
- transform: translateX(100%);
19280
- }
19281
- }
19282
- :where(.pf-theme-dark) .pf-c-skeleton {
19283
- --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
19284
- --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
19285
- --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
19286
- --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
19287
- }
19288
-
19289
19289
  .pf-c-spinner {
19290
19290
  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
19291
19291
  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);