@patternfly/react-table 4.45.0 → 4.48.1

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 (6) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/dist/umd/react-table.css +1783 -1599
  3. package/dist/umd/react-table.js +18 -27
  4. package/dist/umd/react-table.min.css +199 -15
  5. package/dist/umd/react-table.min.js +2 -2
  6. package/package.json +6 -6
package/dist/umd/react-table.css CHANGED
@@ -526,10 +526,16 @@
526
526
  }
527
527
 
528
528
  .pf-c-table thead.pf-m-nested-column-header th,
529
- .pf-c-table thead.pf-m-nested-column-header td {
529
+ .pf-c-table thead.pf-m-nested-column-header td,
530
+ .pf-c-table thead.pf-m-nested-column-header input {
530
531
  vertical-align: middle;
531
532
  }
532
533
 
534
+ .pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
535
+ display: flex;
536
+ align-items: center;
537
+ }
538
+
533
539
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
534
540
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
535
541
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -569,7 +575,7 @@
569
575
  border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
570
576
  }
571
577
 
572
- .pf-c-table tbody .pf-c-table__check > input {
578
+ .pf-c-table tbody .pf-c-table__check input {
573
579
  margin-top: var(--pf-c-table__check--input--MarginTop);
574
580
  vertical-align: top;
575
581
  }
@@ -905,10 +911,17 @@
905
911
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
906
912
  }
907
913
 
908
- .pf-c-table__check > input:not([disabled]) {
914
+ .pf-c-table__check label:not([disabled]),
915
+ .pf-c-table__check input:not([disabled]) {
909
916
  cursor: pointer;
910
917
  }
911
918
 
919
+ .pf-c-table__check label {
920
+ display: block;
921
+ padding: inherit;
922
+ margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
923
+ }
924
+
912
925
  .pf-c-table__favorite .pf-c-button {
913
926
  --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);
914
927
  --pf-c-button--FontSize: var(--pf-c-table__favorite--c-button--FontSize);
@@ -4319,7 +4332,7 @@
4319
4332
  text-align: right;
4320
4333
  }
4321
4334
 
4322
- @media (min-width: 768px) {
4335
+ @media screen and (min-width: 768px) {
4323
4336
  .pf-c-form.pf-m-horizontal {
4324
4337
  --pf-c-form__group-label--PaddingBottom: 0;
4325
4338
  }
@@ -4343,6 +4356,150 @@
4343
4356
  grid-column: 2;
4344
4357
  }
4345
4358
  }
4359
+ @media screen and (min-width: 0) {
4360
+ .pf-c-form.pf-m-horizontal-on-xs {
4361
+ --pf-c-form__group-label--PaddingBottom: 0;
4362
+ }
4363
+
4364
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
4365
+ display: grid;
4366
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4367
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4368
+ }
4369
+
4370
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
4371
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4372
+ }
4373
+
4374
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
4375
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4376
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4377
+ }
4378
+
4379
+ .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
4380
+ grid-column: 2;
4381
+ }
4382
+ }
4383
+ @media (min-width: 576px) {
4384
+ .pf-c-form.pf-m-horizontal-on-sm {
4385
+ --pf-c-form__group-label--PaddingBottom: 0;
4386
+ }
4387
+
4388
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
4389
+ display: grid;
4390
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4391
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4392
+ }
4393
+
4394
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
4395
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4396
+ }
4397
+
4398
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
4399
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4400
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4401
+ }
4402
+
4403
+ .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
4404
+ grid-column: 2;
4405
+ }
4406
+ }
4407
+ @media (min-width: 768px) {
4408
+ .pf-c-form.pf-m-horizontal-on-md {
4409
+ --pf-c-form__group-label--PaddingBottom: 0;
4410
+ }
4411
+
4412
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
4413
+ display: grid;
4414
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4415
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4416
+ }
4417
+
4418
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
4419
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4420
+ }
4421
+
4422
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
4423
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4424
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4425
+ }
4426
+
4427
+ .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
4428
+ grid-column: 2;
4429
+ }
4430
+ }
4431
+ @media (min-width: 992px) {
4432
+ .pf-c-form.pf-m-horizontal-on-lg {
4433
+ --pf-c-form__group-label--PaddingBottom: 0;
4434
+ }
4435
+
4436
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
4437
+ display: grid;
4438
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4439
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4440
+ }
4441
+
4442
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
4443
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4444
+ }
4445
+
4446
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
4447
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4448
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4449
+ }
4450
+
4451
+ .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
4452
+ grid-column: 2;
4453
+ }
4454
+ }
4455
+ @media (min-width: 1200px) {
4456
+ .pf-c-form.pf-m-horizontal-on-xl {
4457
+ --pf-c-form__group-label--PaddingBottom: 0;
4458
+ }
4459
+
4460
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
4461
+ display: grid;
4462
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4463
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4464
+ }
4465
+
4466
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
4467
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4468
+ }
4469
+
4470
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
4471
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4472
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4473
+ }
4474
+
4475
+ .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
4476
+ grid-column: 2;
4477
+ }
4478
+ }
4479
+ @media (min-width: 1450px) {
4480
+ .pf-c-form.pf-m-horizontal-on-2xl {
4481
+ --pf-c-form__group-label--PaddingBottom: 0;
4482
+ }
4483
+
4484
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
4485
+ display: grid;
4486
+ grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
4487
+ grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
4488
+ }
4489
+
4490
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
4491
+ padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
4492
+ }
4493
+
4494
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
4495
+ --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
4496
+ transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
4497
+ }
4498
+
4499
+ .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
4500
+ grid-column: 2;
4501
+ }
4502
+ }
4346
4503
  .pf-c-form.pf-m-limit-width {
4347
4504
  max-width: var(--pf-c-form--m-limit-width--MaxWidth);
4348
4505
  }
@@ -5523,14 +5680,15 @@ label.pf-c-check, .pf-c-check__label,
5523
5680
  }
5524
5681
 
5525
5682
  .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
5683
+ --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
5526
5684
  pointer-events: none;
5527
5685
  }
5528
5686
 
5529
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
5687
+ .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 {
5530
5688
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
5531
5689
  }
5532
5690
 
5533
- .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
5691
+ .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 {
5534
5692
  border: 0;
5535
5693
  }
5536
5694
 
@@ -5538,13 +5696,16 @@ label.pf-c-check, .pf-c-check__label,
5538
5696
  padding: 0;
5539
5697
  }
5540
5698
 
5699
+ .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
5700
+ background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
5701
+ }
5702
+
5541
5703
  .pf-c-dropdown__toggle.pf-m-split-button > * {
5542
5704
  position: relative;
5543
5705
  padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
5544
5706
  padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
5545
5707
  padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
5546
5708
  padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
5547
- background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
5548
5709
  }
5549
5710
 
5550
5711
  .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
@@ -5576,6 +5737,10 @@ label.pf-c-check, .pf-c-check__label,
5576
5737
  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);
5577
5738
  }
5578
5739
 
5740
+ .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] {
5741
+ --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
5742
+ }
5743
+
5579
5744
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
5580
5745
  display: flex;
5581
5746
  align-items: center;
@@ -5648,14 +5813,14 @@ label.pf-c-check, .pf-c-check__label,
5648
5813
  border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
5649
5814
  }
5650
5815
 
5651
- .pf-c-dropdown__toggle.pf-m-plain {
5816
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
5652
5817
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
5653
5818
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
5654
5819
  display: inline-block;
5655
5820
  color: var(--pf-c-dropdown__toggle--m-plain--Color);
5656
5821
  }
5657
5822
 
5658
- .pf-c-dropdown__toggle.pf-m-plain > * {
5823
+ .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
5659
5824
  line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
5660
5825
  }
5661
5826
 
@@ -5672,13 +5837,13 @@ label.pf-c-check, .pf-c-check__label,
5672
5837
  }
5673
5838
 
5674
5839
  .pf-c-dropdown__toggle.pf-m-primary {
5675
- --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5676
- --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5677
5840
  border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
5678
5841
  }
5679
5842
 
5680
- .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
5843
+ .pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
5681
5844
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5845
+ --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
5846
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
5682
5847
  }
5683
5848
 
5684
5849
  .pf-c-dropdown__toggle.pf-m-primary::before {
@@ -5697,17 +5862,20 @@ label.pf-c-check, .pf-c-check__label,
5697
5862
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
5698
5863
  }
5699
5864
 
5700
- .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
5865
+ .pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
5701
5866
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
5702
5867
  }
5703
5868
 
5704
5869
  .pf-c-dropdown__toggle.pf-m-secondary {
5870
+ border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5871
+ }
5872
+
5873
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
5705
5874
  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
5706
5875
  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
5707
- border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5708
5876
  }
5709
5877
 
5710
- .pf-c-dropdown__toggle.pf-m-secondary::before {
5878
+ .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
5711
5879
  border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
5712
5880
  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
5713
5881
  }
@@ -10876,6 +11044,22 @@ button.pf-c-breadcrumb__link {
10876
11044
  --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
10877
11045
  }
10878
11046
 
11047
+ .pf-c-description-list.pf-m-fill-columns {
11048
+ display: block;
11049
+ column-count: var(--pf-c-description-list--GridTemplateColumns--count);
11050
+ margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
11051
+ }
11052
+
11053
+ .pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
11054
+ display: inline-grid;
11055
+ width: 100%;
11056
+ margin-bottom: var(--pf-c-description-list--RowGap);
11057
+ break-inside: avoid;
11058
+ page-break-inside: avoid;
11059
+ -webkit-column-break-inside: avoid;
11060
+ -moz-column-break-inside: avoid;
11061
+ }
11062
+
10879
11063
  .pf-c-description-list__group {
10880
11064
  display: grid;
10881
11065
  grid-column: var(--pf-c-description-list__group--GridColumn);
@@ -17554,6 +17738,80 @@ ul.pf-c-list {
17554
17738
  transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
17555
17739
  }
17556
17740
 
17741
+ .pf-c-overflow-menu {
17742
+ --pf-c-overflow-menu--spacer--base: var(--pf-global--spacer--md);
17743
+ --pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
17744
+ --pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
17745
+ --pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
17746
+ --pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
17747
+ --pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
17748
+ --pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
17749
+ --pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
17750
+ --pf-c-overflow-menu__group--m-icon-button-group--space-items: 0;
17751
+ display: inline-flex;
17752
+ align-items: center;
17753
+ }
17754
+
17755
+ .pf-c-overflow-menu__content {
17756
+ display: flex;
17757
+ align-items: center;
17758
+ }
17759
+
17760
+ .pf-c-overflow-menu__group {
17761
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--spacer);
17762
+ display: flex;
17763
+ align-items: center;
17764
+ }
17765
+
17766
+ .pf-c-overflow-menu__group.pf-m-button-group {
17767
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--spacer);
17768
+ }
17769
+
17770
+ .pf-c-overflow-menu__group.pf-m-button-group > * {
17771
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--space-items);
17772
+ }
17773
+
17774
+ .pf-c-overflow-menu__group.pf-m-icon-button-group {
17775
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--spacer);
17776
+ }
17777
+
17778
+ .pf-c-overflow-menu__group.pf-m-icon-button-group > * {
17779
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--space-items);
17780
+ }
17781
+
17782
+ .pf-c-overflow-menu__item {
17783
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__item--spacer);
17784
+ }
17785
+
17786
+ .pf-c-overflow-menu__content,
17787
+ .pf-c-overflow-menu__control,
17788
+ .pf-c-overflow-menu__group,
17789
+ .pf-c-overflow-menu__item {
17790
+ margin-right: var(--pf-c-overflow-menu--spacer);
17791
+ }
17792
+
17793
+ .pf-c-overflow-menu__content:last-child,
17794
+ .pf-c-overflow-menu__control:last-child,
17795
+ .pf-c-overflow-menu__group:last-child,
17796
+ .pf-c-overflow-menu__item:last-child {
17797
+ --pf-c-overflow-menu--spacer: 0;
17798
+ }
17799
+
17800
+ .pf-c-overflow-menu > .pf-c-divider,
17801
+ .pf-c-overflow-menu__group > .pf-c-divider {
17802
+ --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer);
17803
+ }
17804
+
17805
+ .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
17806
+ .pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
17807
+ margin-right: var(--pf-c-overflow-menu--spacer);
17808
+ }
17809
+
17810
+ .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
17811
+ .pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
17812
+ --pf-c-overflow-menu--spacer: 0;
17813
+ }
17814
+
17557
17815
  .pf-c-options-menu {
17558
17816
  --pf-c-options-menu__toggle--BackgroundColor: transparent;
17559
17817
  --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
@@ -17806,169 +18064,446 @@ ul.pf-c-list {
17806
18064
  color: var(--pf-c-options-menu__group-title--Color);
17807
18065
  }
17808
18066
 
17809
- .pf-c-overflow-menu {
17810
- --pf-c-overflow-menu--spacer--base: var(--pf-global--spacer--md);
17811
- --pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
17812
- --pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
17813
- --pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
17814
- --pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
17815
- --pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
17816
- --pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
17817
- --pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
17818
- --pf-c-overflow-menu__group--m-icon-button-group--space-items: 0;
17819
- display: inline-flex;
17820
- align-items: center;
17821
- }
17822
-
17823
- .pf-c-overflow-menu__content {
17824
- display: flex;
17825
- align-items: center;
17826
- }
17827
-
17828
- .pf-c-overflow-menu__group {
17829
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--spacer);
17830
- display: flex;
17831
- align-items: center;
17832
- }
17833
-
17834
- .pf-c-overflow-menu__group.pf-m-button-group {
17835
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--spacer);
17836
- }
17837
-
17838
- .pf-c-overflow-menu__group.pf-m-button-group > * {
17839
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--space-items);
17840
- }
17841
-
17842
- .pf-c-overflow-menu__group.pf-m-icon-button-group {
17843
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--spacer);
17844
- }
17845
-
17846
- .pf-c-overflow-menu__group.pf-m-icon-button-group > * {
17847
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--space-items);
17848
- }
17849
-
17850
- .pf-c-overflow-menu__item {
17851
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__item--spacer);
17852
- }
17853
-
17854
- .pf-c-overflow-menu__content,
17855
- .pf-c-overflow-menu__control,
17856
- .pf-c-overflow-menu__group,
17857
- .pf-c-overflow-menu__item {
17858
- margin-right: var(--pf-c-overflow-menu--spacer);
18067
+ .pf-c-pagination {
18068
+ --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
18069
+ --pf-c-pagination--m-bottom--child--MarginRight: 0;
18070
+ --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
18071
+ --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
18072
+ --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
18073
+ --pf-c-pagination__nav--Display: none;
18074
+ --pf-c-pagination__nav--Visibility: hidden;
18075
+ --pf-c-pagination--m-display-summary__nav--Display: none;
18076
+ --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
18077
+ --pf-c-pagination--m-display-full__nav--Display: inline-flex;
18078
+ --pf-c-pagination--m-display-full__nav--Visibility: visible;
18079
+ --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
18080
+ --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
18081
+ --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
18082
+ --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
18083
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-global--spacer--md);
18084
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-global--spacer--md);
18085
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
18086
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-global--spacer--form-element);
18087
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-global--spacer--sm);
18088
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-global--spacer--form-element);
18089
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-global--spacer--sm);
18090
+ --pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-global--spacer--md);
18091
+ --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
18092
+ --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
18093
+ --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
18094
+ --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
18095
+ --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
18096
+ --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
18097
+ --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
18098
+ --pf-c-pagination__total-items--Display: block;
18099
+ --pf-c-pagination__total-items--Visibility: visible;
18100
+ --pf-c-pagination--m-display-summary__total-items--Display: block;
18101
+ --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
18102
+ --pf-c-pagination--m-display-full__total-items--Display: none;
18103
+ --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
18104
+ --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
18105
+ --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
18106
+ --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
18107
+ --pf-c-pagination--m-sticky--md--PaddingRight: var(--pf-global--spacer--md);
18108
+ --pf-c-pagination--m-sticky--md--PaddingBottom: var(--pf-global--spacer--md);
18109
+ --pf-c-pagination--m-sticky--md--PaddingLeft: var(--pf-global--spacer--md);
18110
+ --pf-c-pagination--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
18111
+ --pf-c-pagination--m-sticky--Top: 0;
18112
+ --pf-c-pagination--m-bottom--BackgroundColor: var(--pf-global--BackgroundColor--100);
18113
+ --pf-c-pagination--m-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18114
+ --pf-c-pagination--m-bottom--Bottom: 0;
18115
+ --pf-c-pagination--m-bottom--md--PaddingTop: var(--pf-global--spacer--md);
18116
+ --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-global--spacer--md);
18117
+ --pf-c-pagination--m-bottom--md--PaddingBottom: var(--pf-global--spacer--md);
18118
+ --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-global--spacer--md);
18119
+ --pf-c-pagination--m-bottom--xl--PaddingRight: var(--pf-global--spacer--lg);
18120
+ --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
18121
+ --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18122
+ --pf-c-pagination--c-options-menu--Display: none;
18123
+ --pf-c-pagination--c-options-menu--Visibility: hidden;
18124
+ --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
18125
+ --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
18126
+ --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
18127
+ --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
18128
+ display: flex;
18129
+ flex-wrap: wrap;
18130
+ align-items: center;
18131
+ justify-content: flex-end;
17859
18132
  }
17860
18133
 
17861
- .pf-c-overflow-menu__content:last-child,
17862
- .pf-c-overflow-menu__control:last-child,
17863
- .pf-c-overflow-menu__group:last-child,
17864
- .pf-c-overflow-menu__item:last-child {
17865
- --pf-c-overflow-menu--spacer: 0;
18134
+ @media screen and (min-width: 768px) {
18135
+ .pf-c-pagination {
18136
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
18137
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
18138
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
18139
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
18140
+ --pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight);
18141
+ --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
18142
+ --pf-c-pagination--m-bottom--BoxShadow: none;
18143
+ --pf-c-pagination--c-options-menu--Display: inline-flex;
18144
+ --pf-c-pagination--c-options-menu--Visibility: visible;
18145
+ --pf-c-pagination__nav--Display: inline-flex;
18146
+ --pf-c-pagination__nav--Visibility: visible;
18147
+ --pf-c-pagination__total-items--Display: none;
18148
+ --pf-c-pagination__total-items--Visibility: hidden;
18149
+ }
17866
18150
  }
17867
-
17868
- .pf-c-overflow-menu > .pf-c-divider,
17869
- .pf-c-overflow-menu__group > .pf-c-divider {
17870
- --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer);
18151
+ @media screen and (min-width: 1200px) {
18152
+ .pf-c-pagination {
18153
+ --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
18154
+ --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
18155
+ }
17871
18156
  }
17872
-
17873
- .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
17874
- .pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
17875
- margin-right: var(--pf-c-overflow-menu--spacer);
18157
+ .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
18158
+ margin-right: var(--pf-c-pagination--child--MarginRight);
17876
18159
  }
17877
18160
 
17878
- .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
17879
- .pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
17880
- --pf-c-overflow-menu--spacer: 0;
18161
+ .pf-c-pagination .pf-c-options-menu {
18162
+ display: var(--pf-c-pagination--c-options-menu--Display);
18163
+ visibility: var(--pf-c-pagination--c-options-menu--Visibility);
17881
18164
  }
17882
18165
 
17883
- .pf-c-page__sidebar.pf-m-light {
17884
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
17885
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
17886
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
17887
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
17888
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
17889
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
17890
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
18166
+ .pf-c-pagination.pf-m-bottom {
18167
+ --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
18168
+ --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18169
+ --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18170
+ --pf-c-pagination--m-sticky--BoxShadow: var(--pf-c-pagination--m-bottom--m-sticky--BoxShadow);
18171
+ --pf-c-pagination--m-sticky--Top: auto;
18172
+ position: sticky;
18173
+ bottom: var(--pf-c-pagination--m-bottom--Bottom);
18174
+ justify-content: center;
18175
+ background-color: var(--pf-c-pagination--m-bottom--BackgroundColor);
18176
+ box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow);
17891
18177
  }
17892
18178
 
17893
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
17894
- --pf-global--Color--100: var(--pf-global--Color--light-100);
17895
- --pf-global--Color--200: var(--pf-global--Color--light-200);
17896
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
17897
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
17898
- --pf-global--link--Color: var(--pf-global--link--Color--light);
17899
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
17900
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
18179
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button {
18180
+ --pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
18181
+ --pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
18182
+ outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
17901
18183
  }
17902
18184
 
17903
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
17904
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
18185
+ .pf-c-pagination.pf-m-bottom.pf-m-static {
18186
+ --pf-c-pagination--m-bottom--MarginTop: 0;
18187
+ --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18188
+ position: relative;
18189
+ box-shadow: none;
17905
18190
  }
17906
18191
 
17907
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
17908
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
17909
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
17910
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
17911
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
17912
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
17913
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17914
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17915
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17916
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
17917
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
17918
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
17919
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
17920
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
17921
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
17922
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
17923
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
18192
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18193
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18194
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18195
+ display: none;
18196
+ visibility: hidden;
17924
18197
  }
17925
18198
 
17926
- .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
17927
- --pf-hidden-visible--visible--Visibility: visible;
17928
- --pf-hidden-visible--hidden--Display: none;
17929
- --pf-hidden-visible--hidden--Visibility: hidden;
17930
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17931
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17932
- display: var(--pf-hidden-visible--Display);
17933
- visibility: var(--pf-hidden-visible--Visibility);
18199
+ .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18200
+ position: absolute;
18201
+ display: block;
18202
+ visibility: visible;
17934
18203
  }
17935
18204
 
17936
- .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
17937
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17938
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18205
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18206
+ display: flex;
18207
+ flex-basis: 100%;
18208
+ justify-content: space-between;
18209
+ visibility: visible;
17939
18210
  }
17940
18211
 
17941
- @media screen and (min-width: 576px) {
17942
- .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
17943
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17944
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18212
+ @media screen and (min-width: 768px) {
18213
+ .pf-c-pagination.pf-m-bottom {
18214
+ --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18215
+ --pf-c-pagination--m-bottom--MarginTop: 0;
18216
+ --pf-c-pagination--m-bottom--Bottom: auto;
18217
+ position: relative;
18218
+ justify-content: flex-end;
18219
+ padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
17945
18220
  }
17946
18221
 
17947
- .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
17948
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17949
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18222
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18223
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18224
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18225
+ display: block;
18226
+ visibility: visible;
17950
18227
  }
17951
- }
17952
- @media screen and (min-width: 768px) {
17953
- .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
17954
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17955
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18228
+
18229
+ .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18230
+ position: relative;
17956
18231
  }
17957
18232
 
17958
- .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
17959
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17960
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18233
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18234
+ display: inline-flex;
18235
+ flex-basis: auto;
17961
18236
  }
17962
18237
  }
17963
- @media screen and (min-width: 992px) {
17964
- .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
17965
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17966
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17967
- }
18238
+ .pf-c-pagination.pf-m-sticky {
18239
+ --pf-c-pagination--m-bottom--Bottom: 0;
18240
+ position: sticky;
18241
+ top: var(--pf-c-pagination--m-sticky--Top);
18242
+ z-index: var(--pf-c-pagination--m-sticky--ZIndex);
18243
+ padding-top: var(--pf-c-pagination--m-sticky--PaddingTop);
18244
+ padding-right: var(--pf-c-pagination--m-sticky--PaddingRight);
18245
+ padding-bottom: var(--pf-c-pagination--m-sticky--PaddingBottom);
18246
+ padding-left: var(--pf-c-pagination--m-sticky--PaddingLeft);
18247
+ background-color: var(--pf-c-pagination--m-sticky--BackgroundColor);
18248
+ box-shadow: var(--pf-c-pagination--m-sticky--BoxShadow);
18249
+ }
17968
18250
 
17969
- .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
17970
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17971
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18251
+ @media screen and (min-width: 768px) {
18252
+ .pf-c-pagination.pf-m-sticky {
18253
+ padding: var(--pf-c-pagination--m-sticky--md--PaddingTop) var(--pf-c-pagination--m-sticky--md--PaddingRight) var(--pf-c-pagination--m-sticky--md--PaddingBottom) var(--pf-c-pagination--m-sticky--md--PaddingLeft);
18254
+ }
18255
+ }
18256
+ .pf-c-pagination .pf-c-options-menu__toggle {
18257
+ font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
18258
+ }
18259
+
18260
+ .pf-c-pagination.pf-m-compact {
18261
+ --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
18262
+ }
18263
+
18264
+ .pf-c-pagination__nav {
18265
+ display: var(--pf-c-pagination__nav--Display);
18266
+ justify-content: flex-end;
18267
+ visibility: var(--pf-c-pagination__nav--Visibility);
18268
+ }
18269
+
18270
+ .pf-c-pagination__nav-control .pf-c-button {
18271
+ padding-right: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
18272
+ padding-left: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
18273
+ font-size: var(--pf-c-pagination__nav-control--c-button--FontSize);
18274
+ }
18275
+
18276
+ .pf-c-pagination.pf-m-compact .pf-c-pagination__nav-control + .pf-c-pagination__nav-control {
18277
+ margin-left: var(--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
18278
+ }
18279
+
18280
+ .pf-c-pagination__nav-page-select {
18281
+ display: flex;
18282
+ align-items: center;
18283
+ padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
18284
+ padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);
18285
+ }
18286
+
18287
+ .pf-c-pagination__nav-page-select > * {
18288
+ font-size: var(--pf-c-pagination__nav-page-select--FontSize);
18289
+ white-space: nowrap;
18290
+ }
18291
+
18292
+ .pf-c-pagination__nav-page-select > *:not(:last-child) {
18293
+ margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
18294
+ }
18295
+
18296
+ .pf-c-pagination__nav-page-select .pf-c-form-control {
18297
+ width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
18298
+ }
18299
+
18300
+ .pf-c-pagination__total-items {
18301
+ display: var(--pf-c-pagination__total-items--Display);
18302
+ visibility: var(--pf-c-pagination__total-items--Visibility);
18303
+ }
18304
+
18305
+ .pf-c-pagination.pf-m-display-summary {
18306
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18307
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18308
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18309
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18310
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18311
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18312
+ }
18313
+
18314
+ .pf-c-pagination.pf-m-display-full {
18315
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18316
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18317
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18318
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18319
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18320
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18321
+ }
18322
+
18323
+ @media (min-width: 576px) {
18324
+ .pf-c-pagination.pf-m-display-summary-on-sm {
18325
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18326
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18327
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18328
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18329
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18330
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18331
+ }
18332
+
18333
+ .pf-c-pagination.pf-m-display-full-on-sm {
18334
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18335
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18336
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18337
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18338
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18339
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18340
+ }
18341
+ }
18342
+ @media (min-width: 768px) {
18343
+ .pf-c-pagination.pf-m-display-summary-on-md {
18344
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18345
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18346
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18347
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18348
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18349
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18350
+ }
18351
+
18352
+ .pf-c-pagination.pf-m-display-full-on-md {
18353
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18354
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18355
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18356
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18357
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18358
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18359
+ }
18360
+ }
18361
+ @media (min-width: 992px) {
18362
+ .pf-c-pagination.pf-m-display-summary-on-lg {
18363
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18364
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18365
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18366
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18367
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18368
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18369
+ }
18370
+
18371
+ .pf-c-pagination.pf-m-display-full-on-lg {
18372
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18373
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18374
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18375
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18376
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18377
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18378
+ }
18379
+ }
18380
+ @media (min-width: 1200px) {
18381
+ .pf-c-pagination.pf-m-display-summary-on-xl {
18382
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18383
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18384
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18385
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18386
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18387
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18388
+ }
18389
+
18390
+ .pf-c-pagination.pf-m-display-full-on-xl {
18391
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18392
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18393
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18394
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18395
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18396
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18397
+ }
18398
+ }
18399
+ @media (min-width: 1450px) {
18400
+ .pf-c-pagination.pf-m-display-summary-on-2xl {
18401
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18402
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18403
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18404
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18405
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18406
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18407
+ }
18408
+
18409
+ .pf-c-pagination.pf-m-display-full-on-2xl {
18410
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18411
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18412
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18413
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18414
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18415
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18416
+ }
18417
+ }
18418
+ .pf-c-page__sidebar.pf-m-light {
18419
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
18420
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
18421
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
18422
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
18423
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
18424
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
18425
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
18426
+ }
18427
+
18428
+ .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
18429
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
18430
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
18431
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
18432
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
18433
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
18434
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
18435
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
18436
+ }
18437
+
18438
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
18439
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
18440
+ }
18441
+
18442
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
18443
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
18444
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
18445
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
18446
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
18447
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
18448
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
18449
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
18450
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
18451
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
18452
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
18453
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
18454
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
18455
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
18456
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
18457
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
18458
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
18459
+ }
18460
+
18461
+ .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
18462
+ --pf-hidden-visible--visible--Visibility: visible;
18463
+ --pf-hidden-visible--hidden--Display: none;
18464
+ --pf-hidden-visible--hidden--Visibility: hidden;
18465
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
18466
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18467
+ display: var(--pf-hidden-visible--Display);
18468
+ visibility: var(--pf-hidden-visible--Visibility);
18469
+ }
18470
+
18471
+ .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
18472
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
18473
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18474
+ }
18475
+
18476
+ @media screen and (min-width: 576px) {
18477
+ .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
18478
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
18479
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18480
+ }
18481
+
18482
+ .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
18483
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
18484
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18485
+ }
18486
+ }
18487
+ @media screen and (min-width: 768px) {
18488
+ .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
18489
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
18490
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18491
+ }
18492
+
18493
+ .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
18494
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
18495
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
18496
+ }
18497
+ }
18498
+ @media screen and (min-width: 992px) {
18499
+ .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
18500
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
18501
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
18502
+ }
18503
+
18504
+ .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
18505
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
18506
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17972
18507
  }
17973
18508
  }
17974
18509
  @media screen and (min-width: 1200px) {
@@ -18725,357 +19260,6 @@ ul.pf-c-list {
18725
19260
  flex: 1 0 auto;
18726
19261
  }
18727
19262
 
18728
- .pf-c-pagination {
18729
- --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
18730
- --pf-c-pagination--m-bottom--child--MarginRight: 0;
18731
- --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
18732
- --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
18733
- --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
18734
- --pf-c-pagination__nav--Display: none;
18735
- --pf-c-pagination__nav--Visibility: hidden;
18736
- --pf-c-pagination--m-display-summary__nav--Display: none;
18737
- --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
18738
- --pf-c-pagination--m-display-full__nav--Display: inline-flex;
18739
- --pf-c-pagination--m-display-full__nav--Visibility: visible;
18740
- --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
18741
- --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
18742
- --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
18743
- --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
18744
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-global--spacer--md);
18745
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-global--spacer--md);
18746
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
18747
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-global--spacer--form-element);
18748
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-global--spacer--sm);
18749
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-global--spacer--form-element);
18750
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-global--spacer--sm);
18751
- --pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-global--spacer--md);
18752
- --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
18753
- --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
18754
- --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
18755
- --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
18756
- --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
18757
- --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
18758
- --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
18759
- --pf-c-pagination__total-items--Display: block;
18760
- --pf-c-pagination__total-items--Visibility: visible;
18761
- --pf-c-pagination--m-display-summary__total-items--Display: block;
18762
- --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
18763
- --pf-c-pagination--m-display-full__total-items--Display: none;
18764
- --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
18765
- --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
18766
- --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
18767
- --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
18768
- --pf-c-pagination--m-sticky--md--PaddingRight: var(--pf-global--spacer--md);
18769
- --pf-c-pagination--m-sticky--md--PaddingBottom: var(--pf-global--spacer--md);
18770
- --pf-c-pagination--m-sticky--md--PaddingLeft: var(--pf-global--spacer--md);
18771
- --pf-c-pagination--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
18772
- --pf-c-pagination--m-sticky--Top: 0;
18773
- --pf-c-pagination--m-bottom--BackgroundColor: var(--pf-global--BackgroundColor--100);
18774
- --pf-c-pagination--m-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18775
- --pf-c-pagination--m-bottom--Bottom: 0;
18776
- --pf-c-pagination--m-bottom--md--PaddingTop: var(--pf-global--spacer--md);
18777
- --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-global--spacer--md);
18778
- --pf-c-pagination--m-bottom--md--PaddingBottom: var(--pf-global--spacer--md);
18779
- --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-global--spacer--md);
18780
- --pf-c-pagination--m-bottom--xl--PaddingRight: var(--pf-global--spacer--lg);
18781
- --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
18782
- --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18783
- --pf-c-pagination--c-options-menu--Display: none;
18784
- --pf-c-pagination--c-options-menu--Visibility: hidden;
18785
- --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
18786
- --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
18787
- --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
18788
- --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
18789
- display: flex;
18790
- flex-wrap: wrap;
18791
- align-items: center;
18792
- justify-content: flex-end;
18793
- }
18794
-
18795
- @media screen and (min-width: 768px) {
18796
- .pf-c-pagination {
18797
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
18798
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
18799
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
18800
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
18801
- --pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight);
18802
- --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
18803
- --pf-c-pagination--m-bottom--BoxShadow: none;
18804
- --pf-c-pagination--c-options-menu--Display: inline-flex;
18805
- --pf-c-pagination--c-options-menu--Visibility: visible;
18806
- --pf-c-pagination__nav--Display: inline-flex;
18807
- --pf-c-pagination__nav--Visibility: visible;
18808
- --pf-c-pagination__total-items--Display: none;
18809
- --pf-c-pagination__total-items--Visibility: hidden;
18810
- }
18811
- }
18812
- @media screen and (min-width: 1200px) {
18813
- .pf-c-pagination {
18814
- --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
18815
- --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
18816
- }
18817
- }
18818
- .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
18819
- margin-right: var(--pf-c-pagination--child--MarginRight);
18820
- }
18821
-
18822
- .pf-c-pagination .pf-c-options-menu {
18823
- display: var(--pf-c-pagination--c-options-menu--Display);
18824
- visibility: var(--pf-c-pagination--c-options-menu--Visibility);
18825
- }
18826
-
18827
- .pf-c-pagination.pf-m-bottom {
18828
- --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
18829
- --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18830
- --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18831
- --pf-c-pagination--m-sticky--BoxShadow: var(--pf-c-pagination--m-bottom--m-sticky--BoxShadow);
18832
- --pf-c-pagination--m-sticky--Top: auto;
18833
- position: sticky;
18834
- bottom: var(--pf-c-pagination--m-bottom--Bottom);
18835
- justify-content: center;
18836
- background-color: var(--pf-c-pagination--m-bottom--BackgroundColor);
18837
- box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow);
18838
- }
18839
-
18840
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button {
18841
- --pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
18842
- --pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
18843
- outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
18844
- }
18845
-
18846
- .pf-c-pagination.pf-m-bottom.pf-m-static {
18847
- --pf-c-pagination--m-bottom--MarginTop: 0;
18848
- --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18849
- position: relative;
18850
- box-shadow: none;
18851
- }
18852
-
18853
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18854
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18855
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18856
- display: none;
18857
- visibility: hidden;
18858
- }
18859
-
18860
- .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18861
- position: absolute;
18862
- display: block;
18863
- visibility: visible;
18864
- }
18865
-
18866
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18867
- display: flex;
18868
- flex-basis: 100%;
18869
- justify-content: space-between;
18870
- visibility: visible;
18871
- }
18872
-
18873
- @media screen and (min-width: 768px) {
18874
- .pf-c-pagination.pf-m-bottom {
18875
- --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18876
- --pf-c-pagination--m-bottom--MarginTop: 0;
18877
- --pf-c-pagination--m-bottom--Bottom: auto;
18878
- position: relative;
18879
- justify-content: flex-end;
18880
- padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
18881
- }
18882
-
18883
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18884
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18885
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18886
- display: block;
18887
- visibility: visible;
18888
- }
18889
-
18890
- .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18891
- position: relative;
18892
- }
18893
-
18894
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18895
- display: inline-flex;
18896
- flex-basis: auto;
18897
- }
18898
- }
18899
- .pf-c-pagination.pf-m-sticky {
18900
- --pf-c-pagination--m-bottom--Bottom: 0;
18901
- position: sticky;
18902
- top: var(--pf-c-pagination--m-sticky--Top);
18903
- z-index: var(--pf-c-pagination--m-sticky--ZIndex);
18904
- padding-top: var(--pf-c-pagination--m-sticky--PaddingTop);
18905
- padding-right: var(--pf-c-pagination--m-sticky--PaddingRight);
18906
- padding-bottom: var(--pf-c-pagination--m-sticky--PaddingBottom);
18907
- padding-left: var(--pf-c-pagination--m-sticky--PaddingLeft);
18908
- background-color: var(--pf-c-pagination--m-sticky--BackgroundColor);
18909
- box-shadow: var(--pf-c-pagination--m-sticky--BoxShadow);
18910
- }
18911
-
18912
- @media screen and (min-width: 768px) {
18913
- .pf-c-pagination.pf-m-sticky {
18914
- padding: var(--pf-c-pagination--m-sticky--md--PaddingTop) var(--pf-c-pagination--m-sticky--md--PaddingRight) var(--pf-c-pagination--m-sticky--md--PaddingBottom) var(--pf-c-pagination--m-sticky--md--PaddingLeft);
18915
- }
18916
- }
18917
- .pf-c-pagination .pf-c-options-menu__toggle {
18918
- font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
18919
- }
18920
-
18921
- .pf-c-pagination.pf-m-compact {
18922
- --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
18923
- }
18924
-
18925
- .pf-c-pagination__nav {
18926
- display: var(--pf-c-pagination__nav--Display);
18927
- justify-content: flex-end;
18928
- visibility: var(--pf-c-pagination__nav--Visibility);
18929
- }
18930
-
18931
- .pf-c-pagination__nav-control .pf-c-button {
18932
- padding-right: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
18933
- padding-left: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
18934
- font-size: var(--pf-c-pagination__nav-control--c-button--FontSize);
18935
- }
18936
-
18937
- .pf-c-pagination.pf-m-compact .pf-c-pagination__nav-control + .pf-c-pagination__nav-control {
18938
- margin-left: var(--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
18939
- }
18940
-
18941
- .pf-c-pagination__nav-page-select {
18942
- display: flex;
18943
- align-items: center;
18944
- padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
18945
- padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);
18946
- }
18947
-
18948
- .pf-c-pagination__nav-page-select > * {
18949
- font-size: var(--pf-c-pagination__nav-page-select--FontSize);
18950
- white-space: nowrap;
18951
- }
18952
-
18953
- .pf-c-pagination__nav-page-select > *:not(:last-child) {
18954
- margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
18955
- }
18956
-
18957
- .pf-c-pagination__nav-page-select .pf-c-form-control {
18958
- width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
18959
- }
18960
-
18961
- .pf-c-pagination__total-items {
18962
- display: var(--pf-c-pagination__total-items--Display);
18963
- visibility: var(--pf-c-pagination__total-items--Visibility);
18964
- }
18965
-
18966
- .pf-c-pagination.pf-m-display-summary {
18967
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18968
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18969
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18970
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18971
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18972
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18973
- }
18974
-
18975
- .pf-c-pagination.pf-m-display-full {
18976
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18977
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18978
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18979
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18980
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18981
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18982
- }
18983
-
18984
- @media (min-width: 576px) {
18985
- .pf-c-pagination.pf-m-display-summary-on-sm {
18986
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18987
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18988
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18989
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18990
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18991
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18992
- }
18993
-
18994
- .pf-c-pagination.pf-m-display-full-on-sm {
18995
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18996
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18997
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18998
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18999
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
19000
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
19001
- }
19002
- }
19003
- @media (min-width: 768px) {
19004
- .pf-c-pagination.pf-m-display-summary-on-md {
19005
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
19006
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
19007
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
19008
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
19009
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
19010
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
19011
- }
19012
-
19013
- .pf-c-pagination.pf-m-display-full-on-md {
19014
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
19015
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
19016
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
19017
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
19018
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
19019
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
19020
- }
19021
- }
19022
- @media (min-width: 992px) {
19023
- .pf-c-pagination.pf-m-display-summary-on-lg {
19024
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
19025
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
19026
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
19027
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
19028
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
19029
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
19030
- }
19031
-
19032
- .pf-c-pagination.pf-m-display-full-on-lg {
19033
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
19034
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
19035
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
19036
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
19037
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
19038
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
19039
- }
19040
- }
19041
- @media (min-width: 1200px) {
19042
- .pf-c-pagination.pf-m-display-summary-on-xl {
19043
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
19044
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
19045
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
19046
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
19047
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
19048
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
19049
- }
19050
-
19051
- .pf-c-pagination.pf-m-display-full-on-xl {
19052
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
19053
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
19054
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
19055
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
19056
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
19057
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
19058
- }
19059
- }
19060
- @media (min-width: 1450px) {
19061
- .pf-c-pagination.pf-m-display-summary-on-2xl {
19062
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
19063
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
19064
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
19065
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
19066
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
19067
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
19068
- }
19069
-
19070
- .pf-c-pagination.pf-m-display-full-on-2xl {
19071
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
19072
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
19073
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
19074
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
19075
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
19076
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
19077
- }
19078
- }
19079
19263
  .pf-c-popover {
19080
19264
  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
19081
19265
  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
@@ -19710,78 +19894,6 @@ ul.pf-c-list {
19710
19894
  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
19711
19895
  }
19712
19896
 
19713
- .pf-c-radio {
19714
- --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
19715
- --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
19716
- --pf-c-radio__label--Color: var(--pf-global--Color--100);
19717
- --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
19718
- --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
19719
- --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
19720
- --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
19721
- --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
19722
- --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
19723
- --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
19724
- --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
19725
- --pf-c-radio__description--Color: var(--pf-global--Color--200);
19726
- --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
19727
- display: grid;
19728
- grid-template-columns: auto 1fr;
19729
- grid-gap: var(--pf-c-radio--GridGap);
19730
- align-items: start;
19731
- justify-items: start;
19732
- }
19733
-
19734
- .pf-c-radio.pf-m-standalone {
19735
- --pf-c-radio--GridGap: 0;
19736
- --pf-c-radio__input--Height: auto;
19737
- --pf-c-radio__input--MarginTop: 0;
19738
- display: inline-grid;
19739
- line-height: 1;
19740
- }
19741
-
19742
- .pf-c-radio__label {
19743
- font-size: var(--pf-c-radio__label--FontSize);
19744
- font-weight: var(--pf-c-radio__label--FontWeight);
19745
- line-height: var(--pf-c-radio__label--LineHeight);
19746
- color: var(--pf-c-radio__label--Color);
19747
- }
19748
-
19749
- .pf-c-radio__input {
19750
- height: var(--pf-c-radio__input--Height);
19751
- margin-top: var(--pf-c-radio__input--MarginTop);
19752
- }
19753
-
19754
- .pf-c-radio__input:first-child {
19755
- margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
19756
- }
19757
-
19758
- .pf-c-radio__input:last-child {
19759
- margin-right: var(--pf-c-radio__input--last-child--MarginRight);
19760
- }
19761
-
19762
- .pf-c-radio__description {
19763
- grid-column: 2;
19764
- font-size: var(--pf-c-radio__description--FontSize);
19765
- color: var(--pf-c-radio__description--Color);
19766
- }
19767
-
19768
- .pf-c-radio__body {
19769
- grid-column: 2;
19770
- margin-top: var(--pf-c-radio__body--MarginTop);
19771
- }
19772
-
19773
- label.pf-c-radio, .pf-c-radio__label,
19774
- .pf-c-radio__input {
19775
- cursor: pointer;
19776
- }
19777
-
19778
- .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
19779
- .pf-c-radio__input:disabled,
19780
- .pf-c-radio__input.pf-m-disabled {
19781
- --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
19782
- cursor: not-allowed;
19783
- }
19784
-
19785
19897
  .pf-c-search-input {
19786
19898
  --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19787
19899
  --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -19923,54 +20035,126 @@ label.pf-c-radio, .pf-c-radio__label,
19923
20035
  align-items: center;
19924
20036
  }
19925
20037
 
19926
- .pf-c-search-input__menu {
19927
- position: absolute;
19928
- top: var(--pf-c-search-input__menu--Top);
19929
- z-index: var(--pf-c-search-input__menu--ZIndex);
19930
- min-width: 100%;
19931
- background-color: var(--pf-c-search-input__menu--BackgroundColor);
19932
- background-clip: padding-box;
19933
- box-shadow: var(--pf-c-search-input__menu--BoxShadow);
20038
+ .pf-c-search-input__menu {
20039
+ position: absolute;
20040
+ top: var(--pf-c-search-input__menu--Top);
20041
+ z-index: var(--pf-c-search-input__menu--ZIndex);
20042
+ min-width: 100%;
20043
+ background-color: var(--pf-c-search-input__menu--BackgroundColor);
20044
+ background-clip: padding-box;
20045
+ box-shadow: var(--pf-c-search-input__menu--BoxShadow);
20046
+ }
20047
+
20048
+ .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
20049
+ --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
20050
+ transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
20051
+ }
20052
+
20053
+ .pf-c-search-input__menu-body {
20054
+ padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
20055
+ }
20056
+
20057
+ .pf-c-search-input__menu-list {
20058
+ padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
20059
+ padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
20060
+ }
20061
+
20062
+ .pf-c-search-input__menu-item {
20063
+ display: flex;
20064
+ width: 100%;
20065
+ min-width: 0;
20066
+ padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
20067
+ padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
20068
+ padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
20069
+ padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
20070
+ color: var(--pf-c-search-input__menu-item--Color);
20071
+ text-align: left;
20072
+ background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
20073
+ border: none;
20074
+ }
20075
+
20076
+ .pf-c-search-input__menu-item:hover {
20077
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
20078
+ }
20079
+
20080
+ .pf-c-search-input__menu-item:focus {
20081
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
20082
+ }
20083
+
20084
+ .pf-c-search-input__menu-item-text {
20085
+ flex-grow: 1;
20086
+ }
20087
+
20088
+ .pf-c-radio {
20089
+ --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
20090
+ --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
20091
+ --pf-c-radio__label--Color: var(--pf-global--Color--100);
20092
+ --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
20093
+ --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
20094
+ --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
20095
+ --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
20096
+ --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
20097
+ --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
20098
+ --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
20099
+ --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
20100
+ --pf-c-radio__description--Color: var(--pf-global--Color--200);
20101
+ --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
20102
+ display: grid;
20103
+ grid-template-columns: auto 1fr;
20104
+ grid-gap: var(--pf-c-radio--GridGap);
20105
+ align-items: start;
20106
+ justify-items: start;
20107
+ }
20108
+
20109
+ .pf-c-radio.pf-m-standalone {
20110
+ --pf-c-radio--GridGap: 0;
20111
+ --pf-c-radio__input--Height: auto;
20112
+ --pf-c-radio__input--MarginTop: 0;
20113
+ display: inline-grid;
20114
+ line-height: 1;
20115
+ }
20116
+
20117
+ .pf-c-radio__label {
20118
+ font-size: var(--pf-c-radio__label--FontSize);
20119
+ font-weight: var(--pf-c-radio__label--FontWeight);
20120
+ line-height: var(--pf-c-radio__label--LineHeight);
20121
+ color: var(--pf-c-radio__label--Color);
19934
20122
  }
19935
20123
 
19936
- .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
19937
- --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
19938
- transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
20124
+ .pf-c-radio__input {
20125
+ height: var(--pf-c-radio__input--Height);
20126
+ margin-top: var(--pf-c-radio__input--MarginTop);
19939
20127
  }
19940
20128
 
19941
- .pf-c-search-input__menu-body {
19942
- padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
20129
+ .pf-c-radio__input:first-child {
20130
+ margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
19943
20131
  }
19944
20132
 
19945
- .pf-c-search-input__menu-list {
19946
- padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
19947
- padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
20133
+ .pf-c-radio__input:last-child {
20134
+ margin-right: var(--pf-c-radio__input--last-child--MarginRight);
19948
20135
  }
19949
20136
 
19950
- .pf-c-search-input__menu-item {
19951
- display: flex;
19952
- width: 100%;
19953
- min-width: 0;
19954
- padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
19955
- padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
19956
- padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
19957
- padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
19958
- color: var(--pf-c-search-input__menu-item--Color);
19959
- text-align: left;
19960
- background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
19961
- border: none;
20137
+ .pf-c-radio__description {
20138
+ grid-column: 2;
20139
+ font-size: var(--pf-c-radio__description--FontSize);
20140
+ color: var(--pf-c-radio__description--Color);
19962
20141
  }
19963
20142
 
19964
- .pf-c-search-input__menu-item:hover {
19965
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
20143
+ .pf-c-radio__body {
20144
+ grid-column: 2;
20145
+ margin-top: var(--pf-c-radio__body--MarginTop);
19966
20146
  }
19967
20147
 
19968
- .pf-c-search-input__menu-item:focus {
19969
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
20148
+ label.pf-c-radio, .pf-c-radio__label,
20149
+ .pf-c-radio__input {
20150
+ cursor: pointer;
19970
20151
  }
19971
20152
 
19972
- .pf-c-search-input__menu-item-text {
19973
- flex-grow: 1;
20153
+ .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
20154
+ .pf-c-radio__input:disabled,
20155
+ .pf-c-radio__input.pf-m-disabled {
20156
+ --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
20157
+ cursor: not-allowed;
19974
20158
  }
19975
20159
 
19976
20160
  .pf-c-select {
@@ -20652,6 +20836,20 @@ label.pf-c-radio, .pf-c-radio__label,
20652
20836
  margin-top: var(--pf-c-simple-list__section--section--MarginTop);
20653
20837
  }
20654
20838
 
20839
+ .pf-c-skip-to-content {
20840
+ --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
20841
+ --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
20842
+ --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
20843
+ position: absolute;
20844
+ top: var(--pf-c-skip-to-content--Top);
20845
+ left: -300%;
20846
+ z-index: var(--pf-c-skip-to-content--ZIndex);
20847
+ }
20848
+
20849
+ .pf-c-skip-to-content:focus {
20850
+ left: var(--pf-c-skip-to-content--focus--Left);
20851
+ }
20852
+
20655
20853
  .pf-c-skeleton {
20656
20854
  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
20657
20855
  --pf-c-skeleton--Width: auto;
@@ -20841,20 +21039,6 @@ label.pf-c-radio, .pf-c-radio__label,
20841
21039
  transform: translateX(100%);
20842
21040
  }
20843
21041
  }
20844
- .pf-c-skip-to-content {
20845
- --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
20846
- --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);
20847
- --pf-c-skip-to-content--focus--Left: var(--pf-global--spacer--md);
20848
- position: absolute;
20849
- top: var(--pf-c-skip-to-content--Top);
20850
- left: -300%;
20851
- z-index: var(--pf-c-skip-to-content--ZIndex);
20852
- }
20853
-
20854
- .pf-c-skip-to-content:focus {
20855
- left: var(--pf-c-skip-to-content--focus--Left);
20856
- }
20857
-
20858
21042
  .pf-c-slider {
20859
21043
  --pf-c-slider--value: 0;
20860
21044
  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
@@ -20916,315 +21100,602 @@ label.pf-c-radio, .pf-c-radio__label,
20916
21100
  display: flex;
20917
21101
  }
20918
21102
 
20919
- .pf-c-slider.pf-m-disabled {
20920
- --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
20921
- --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
20922
- --pf-c-slider__thumb--BackgroundColor: var(--pf-c-slider--m-disabled__thumb--BackgroundColor);
21103
+ .pf-c-slider.pf-m-disabled {
21104
+ --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
21105
+ --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
21106
+ --pf-c-slider__thumb--BackgroundColor: var(--pf-c-slider--m-disabled__thumb--BackgroundColor);
21107
+ }
21108
+
21109
+ .pf-c-slider.pf-m-disabled .pf-c-slider__rail,
21110
+ .pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
21111
+ cursor: not-allowed;
21112
+ }
21113
+
21114
+ .pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
21115
+ --pf-c-slider__thumb--BoxShadow: none;
21116
+ }
21117
+
21118
+ .pf-c-slider__main {
21119
+ position: relative;
21120
+ flex-grow: 1;
21121
+ }
21122
+
21123
+ .pf-c-slider__rail {
21124
+ padding-top: var(--pf-c-slider__rail--PaddingTop);
21125
+ padding-bottom: var(--pf-c-slider__rail--PaddingBottom);
21126
+ }
21127
+
21128
+ .pf-c-slider__rail-track {
21129
+ position: relative;
21130
+ height: var(--pf-c-slider__rail-track--Height);
21131
+ }
21132
+
21133
+ .pf-c-slider__rail-track::before {
21134
+ position: absolute;
21135
+ top: 0;
21136
+ right: 0;
21137
+ bottom: 0;
21138
+ left: 0;
21139
+ content: "";
21140
+ background: linear-gradient(to right, var(--pf-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-c-slider__rail-track--before--base--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
21141
+ border-radius: var(--pf-c-slider__rail-track--before--BorderRadius);
21142
+ }
21143
+
21144
+ .pf-c-slider__steps {
21145
+ height: var(--pf-c-slider__steps--Height);
21146
+ font-size: var(--pf-c-slider__steps--FontSize);
21147
+ line-height: 1;
21148
+ }
21149
+
21150
+ .pf-c-slider__step {
21151
+ position: absolute;
21152
+ top: 0;
21153
+ left: var(--pf-c-slider__step--Left);
21154
+ content: "";
21155
+ }
21156
+
21157
+ .pf-c-slider__step.pf-m-active {
21158
+ --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
21159
+ }
21160
+
21161
+ .pf-c-slider__step:first-child {
21162
+ --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
21163
+ --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
21164
+ }
21165
+
21166
+ .pf-c-slider__step:last-child {
21167
+ --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
21168
+ --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
21169
+ }
21170
+
21171
+ .pf-c-slider__step-tick {
21172
+ position: absolute;
21173
+ top: var(--pf-c-slider__step-tick--Top);
21174
+ left: 0;
21175
+ width: var(--pf-c-slider__step-tick--Width);
21176
+ height: var(--pf-c-slider__step-tick--Height);
21177
+ background-color: var(--pf-c-slider__step-tick--BackgroundColor);
21178
+ border-radius: var(--pf-c-slider__step-tick--BorderRadius);
21179
+ transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
21180
+ }
21181
+
21182
+ .pf-c-slider__step-label {
21183
+ position: absolute;
21184
+ top: var(--pf-c-slider__step-label--Top);
21185
+ transform: translateX(var(--pf-c-slider__step-label--TranslateX));
21186
+ }
21187
+
21188
+ .pf-c-slider__thumb {
21189
+ position: absolute;
21190
+ top: var(--pf-c-slider__thumb--Top);
21191
+ left: var(--pf-c-slider__thumb--Left);
21192
+ width: var(--pf-c-slider__thumb--Width);
21193
+ height: var(--pf-c-slider__thumb--Height);
21194
+ cursor: pointer;
21195
+ background-color: var(--pf-c-slider__thumb--BackgroundColor);
21196
+ border-radius: var(--pf-c-slider__thumb--BorderRadius);
21197
+ box-shadow: var(--pf-c-slider__thumb--BoxShadow);
21198
+ transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
21199
+ }
21200
+
21201
+ .pf-c-slider__thumb::before {
21202
+ position: absolute;
21203
+ top: 50%;
21204
+ left: 50%;
21205
+ width: var(--pf-c-slider__thumb--before--Width);
21206
+ height: var(--pf-c-slider__thumb--before--Height);
21207
+ content: "";
21208
+ border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
21209
+ transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
21210
+ }
21211
+
21212
+ .pf-c-slider__thumb:hover {
21213
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
21214
+ }
21215
+
21216
+ .pf-c-slider__thumb:focus {
21217
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
21218
+ outline: 0;
21219
+ }
21220
+
21221
+ .pf-c-slider__thumb:active {
21222
+ --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
21223
+ }
21224
+
21225
+ .pf-c-slider__value {
21226
+ margin-left: var(--pf-c-slider__value--MarginLeft);
21227
+ }
21228
+
21229
+ .pf-c-slider__value.pf-m-floating {
21230
+ --pf-c-slider__value--MarginLeft: 0;
21231
+ position: absolute;
21232
+ top: 0;
21233
+ left: var(--pf-c-slider__value--m-floating--Left);
21234
+ z-index: var(--pf-c-slider__value--m-floating--ZIndex);
21235
+ transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
21236
+ }
21237
+
21238
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group {
21239
+ align-items: center;
21240
+ }
21241
+
21242
+ .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
21243
+ position: absolute;
21244
+ left: 100%;
21245
+ }
21246
+
21247
+ .pf-c-slider__value .pf-c-form-control {
21248
+ width: var(--pf-c-slider__value--c-form-control--Width);
21249
+ }
21250
+
21251
+ .pf-c-slider__actions {
21252
+ display: flex;
21253
+ margin-right: var(--pf-c-slider__actions--MarginRight);
21254
+ }
21255
+
21256
+ .pf-c-slider__main ~ .pf-c-slider__actions {
21257
+ --pf-c-slider__actions--MarginRight: 0;
21258
+ margin-left: var(--pf-c-slider__main--actions--MarginLeft);
21259
+ }
21260
+
21261
+ .pf-c-switch {
21262
+ --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
21263
+ --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
21264
+ --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
21265
+ --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
21266
+ --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
21267
+ --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
21268
+ --pf-c-switch__toggle-icon--Offset: 0.125rem;
21269
+ --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
21270
+ --pf-c-switch--Height: auto;
21271
+ --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
21272
+ --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
21273
+ --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
21274
+ --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
21275
+ --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
21276
+ --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
21277
+ --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
21278
+ --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
21279
+ --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
21280
+ --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
21281
+ --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
21282
+ --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
21283
+ --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
21284
+ --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
21285
+ --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
21286
+ --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
21287
+ --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
21288
+ --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
21289
+ --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
21290
+ --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
21291
+ --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
21292
+ --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
21293
+ --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
21294
+ position: relative;
21295
+ display: inline-grid;
21296
+ grid-template-columns: auto;
21297
+ grid-auto-columns: 1fr;
21298
+ column-gap: var(--pf-c-switch--ColumnGap);
21299
+ height: var(--pf-c-switch--Height);
21300
+ font-size: var(--pf-c-switch--FontSize);
21301
+ line-height: var(--pf-c-switch--LineHeight);
21302
+ vertical-align: middle;
21303
+ cursor: pointer;
21304
+ }
21305
+
21306
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label,
21307
+ .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
21308
+ grid-row: 1;
20923
21309
  }
20924
21310
 
20925
- .pf-c-slider.pf-m-disabled .pf-c-slider__rail,
20926
- .pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
20927
- cursor: not-allowed;
21311
+ .pf-c-switch.pf-m-reverse .pf-c-switch__label {
21312
+ grid-column: 1;
20928
21313
  }
20929
21314
 
20930
- .pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
20931
- --pf-c-slider__thumb--BoxShadow: none;
21315
+ .pf-c-switch__input {
21316
+ position: absolute;
21317
+ cursor: pointer;
21318
+ opacity: 0;
20932
21319
  }
20933
21320
 
20934
- .pf-c-slider__main {
20935
- position: relative;
20936
- flex-grow: 1;
21321
+ .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
21322
+ outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
21323
+ outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
20937
21324
  }
20938
21325
 
20939
- .pf-c-slider__rail {
20940
- padding-top: var(--pf-c-slider__rail--PaddingTop);
20941
- padding-bottom: var(--pf-c-slider__rail--PaddingBottom);
21326
+ .pf-c-switch__input:checked ~ .pf-c-switch__label {
21327
+ color: var(--pf-c-switch__input--checked__label--Color);
20942
21328
  }
20943
21329
 
20944
- .pf-c-slider__rail-track {
20945
- position: relative;
20946
- height: var(--pf-c-slider__rail-track--Height);
21330
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
21331
+ background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
20947
21332
  }
20948
21333
 
20949
- .pf-c-slider__rail-track::before {
20950
- position: absolute;
20951
- top: 0;
20952
- right: 0;
20953
- bottom: 0;
20954
- left: 0;
20955
- content: "";
20956
- background: linear-gradient(to right, var(--pf-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-c-slider__rail-track--before--base--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
20957
- border-radius: var(--pf-c-slider__rail-track--before--BorderRadius);
21334
+ .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
21335
+ transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
20958
21336
  }
20959
21337
 
20960
- .pf-c-slider__steps {
20961
- height: var(--pf-c-slider__steps--Height);
20962
- font-size: var(--pf-c-slider__steps--FontSize);
20963
- line-height: 1;
21338
+ .pf-c-switch__input:checked ~ .pf-m-off {
21339
+ display: none;
20964
21340
  }
20965
21341
 
20966
- .pf-c-slider__step {
20967
- position: absolute;
20968
- top: 0;
20969
- left: var(--pf-c-slider__step--Left);
20970
- content: "";
21342
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
21343
+ color: var(--pf-c-switch__input--not-checked__label--Color);
20971
21344
  }
20972
21345
 
20973
- .pf-c-slider__step.pf-m-active {
20974
- --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
21346
+ .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
21347
+ display: none;
21348
+ visibility: hidden;
20975
21349
  }
20976
21350
 
20977
- .pf-c-slider__step:first-child {
20978
- --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
20979
- --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
21351
+ .pf-c-switch__input:not(:checked) ~ .pf-m-on {
21352
+ display: none;
20980
21353
  }
20981
21354
 
20982
- .pf-c-slider__step:last-child {
20983
- --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
20984
- --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
21355
+ .pf-c-switch__input:disabled {
21356
+ cursor: not-allowed;
20985
21357
  }
20986
21358
 
20987
- .pf-c-slider__step-tick {
20988
- position: absolute;
20989
- top: var(--pf-c-slider__step-tick--Top);
20990
- left: 0;
20991
- width: var(--pf-c-slider__step-tick--Width);
20992
- height: var(--pf-c-slider__step-tick--Height);
20993
- background-color: var(--pf-c-slider__step-tick--BackgroundColor);
20994
- border-radius: var(--pf-c-slider__step-tick--BorderRadius);
20995
- transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
21359
+ .pf-c-switch__input:disabled ~ .pf-c-switch__label {
21360
+ color: var(--pf-c-switch__input--disabled__label--Color);
21361
+ cursor: not-allowed;
20996
21362
  }
20997
21363
 
20998
- .pf-c-slider__step-label {
20999
- position: absolute;
21000
- top: var(--pf-c-slider__step-label--Top);
21001
- transform: translateX(var(--pf-c-slider__step-label--TranslateX));
21364
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
21365
+ cursor: not-allowed;
21366
+ background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
21002
21367
  }
21003
21368
 
21004
- .pf-c-slider__thumb {
21005
- position: absolute;
21006
- top: var(--pf-c-slider__thumb--Top);
21007
- left: var(--pf-c-slider__thumb--Left);
21008
- width: var(--pf-c-slider__thumb--Width);
21009
- height: var(--pf-c-slider__thumb--Height);
21010
- cursor: pointer;
21011
- background-color: var(--pf-c-slider__thumb--BackgroundColor);
21012
- border-radius: var(--pf-c-slider__thumb--BorderRadius);
21013
- box-shadow: var(--pf-c-slider__thumb--BoxShadow);
21014
- transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
21369
+ .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
21370
+ background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
21015
21371
  }
21016
21372
 
21017
- .pf-c-slider__thumb::before {
21373
+ .pf-c-switch__toggle {
21374
+ position: relative;
21375
+ display: inline-block;
21376
+ width: var(--pf-c-switch__toggle--Width);
21377
+ height: var(--pf-c-switch__toggle--Height);
21378
+ background-color: var(--pf-c-switch__toggle--BackgroundColor);
21379
+ border-radius: var(--pf-c-switch__toggle--BorderRadius);
21380
+ }
21381
+
21382
+ .pf-c-switch__toggle::before {
21018
21383
  position: absolute;
21019
- top: 50%;
21020
- left: 50%;
21021
- width: var(--pf-c-slider__thumb--before--Width);
21022
- height: var(--pf-c-slider__thumb--before--Height);
21384
+ top: var(--pf-c-switch__toggle--before--Top);
21385
+ left: var(--pf-c-switch__toggle--before--Left);
21386
+ display: block;
21387
+ width: var(--pf-c-switch__toggle--before--Width);
21388
+ height: var(--pf-c-switch__toggle--before--Height);
21023
21389
  content: "";
21024
- border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
21025
- transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
21390
+ background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
21391
+ border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
21392
+ box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
21393
+ transition: var(--pf-c-switch__toggle--before--Transition);
21026
21394
  }
21027
21395
 
21028
- .pf-c-slider__thumb:hover {
21029
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
21396
+ .pf-c-switch__toggle-icon {
21397
+ position: absolute;
21398
+ top: 0;
21399
+ bottom: 0;
21400
+ left: var(--pf-c-switch__toggle-icon--Left);
21401
+ display: flex;
21402
+ align-items: center;
21403
+ font-size: var(--pf-c-switch__toggle-icon--FontSize);
21404
+ color: var(--pf-c-switch__toggle-icon--Color);
21405
+ }
21406
+
21407
+ .pf-c-switch__label {
21408
+ display: inline-block;
21409
+ grid-column: 2;
21410
+ color: var(--pf-c-switch__label--Color);
21411
+ vertical-align: top;
21412
+ }
21413
+
21414
+ .pf-c-content {
21415
+ --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
21416
+ --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
21417
+ --pf-c-content--FontSize: var(--pf-global--FontSize--md);
21418
+ --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
21419
+ --pf-c-content--Color: var(--pf-global--Color--100);
21420
+ --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
21421
+ --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
21422
+ --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
21423
+ --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
21424
+ --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
21425
+ --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
21426
+ --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
21427
+ --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
21428
+ --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
21429
+ --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
21430
+ --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
21431
+ --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
21432
+ --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
21433
+ --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
21434
+ --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
21435
+ --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
21436
+ --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
21437
+ --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
21438
+ --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
21439
+ --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
21440
+ --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
21441
+ --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
21442
+ --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
21443
+ --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
21444
+ --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
21445
+ --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
21446
+ --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
21447
+ --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
21448
+ --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
21449
+ --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
21450
+ --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
21451
+ --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
21452
+ --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
21453
+ --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
21454
+ --pf-c-content--small--Color: var(--pf-global--Color--200);
21455
+ --pf-c-content--a--Color: var(--pf-global--link--Color);
21456
+ --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
21457
+ --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
21458
+ --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
21459
+ --pf-c-content--a--visited--Color: var(--pf-global--link--Color--visited);
21460
+ --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
21461
+ --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
21462
+ --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
21463
+ --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
21464
+ --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
21465
+ --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
21466
+ --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
21467
+ --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
21468
+ --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
21469
+ --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
21470
+ --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
21471
+ --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
21472
+ --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
21473
+ --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
21474
+ --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
21475
+ --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
21476
+ --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
21477
+ --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
21478
+ --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
21479
+ --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
21480
+ --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
21481
+ --pf-c-content--dt--sm--MarginTop: 0;
21482
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
21483
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
21484
+ font-size: var(--pf-c-content--FontSize);
21485
+ line-height: var(--pf-c-content--LineHeight);
21486
+ color: var(--pf-c-content--Color);
21030
21487
  }
21031
21488
 
21032
- .pf-c-slider__thumb:focus {
21033
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
21034
- outline: 0;
21489
+ .pf-c-content a {
21490
+ color: var(--pf-c-content--a--Color);
21491
+ text-decoration: var(--pf-c-content--a--TextDecoration);
21035
21492
  }
21036
21493
 
21037
- .pf-c-slider__thumb:active {
21038
- --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
21494
+ .pf-c-content a:hover {
21495
+ --pf-c-content--a--Color: var(--pf-c-content--a--hover--Color);
21496
+ --pf-c-content--a--TextDecoration: var(--pf-c-content--a--hover--TextDecoration);
21039
21497
  }
21040
21498
 
21041
- .pf-c-slider__value {
21042
- margin-left: var(--pf-c-slider__value--MarginLeft);
21499
+ .pf-c-content.pf-m-visited a:visited,
21500
+ .pf-c-content a.pf-m-visited:visited {
21501
+ color: var(--pf-c-content--a--visited--Color);
21043
21502
  }
21044
21503
 
21045
- .pf-c-slider__value.pf-m-floating {
21046
- --pf-c-slider__value--MarginLeft: 0;
21047
- position: absolute;
21048
- top: 0;
21049
- left: var(--pf-c-slider__value--m-floating--Left);
21050
- z-index: var(--pf-c-slider__value--m-floating--ZIndex);
21051
- transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
21504
+ .pf-c-content li + li {
21505
+ margin-top: var(--pf-c-content--li--MarginTop);
21052
21506
  }
21053
21507
 
21054
- .pf-c-slider__value.pf-m-floating .pf-c-input-group {
21055
- align-items: center;
21508
+ .pf-c-content p:not(:last-child),
21509
+ .pf-c-content dl:not(:last-child),
21510
+ .pf-c-content ol:not(:last-child),
21511
+ .pf-c-content ul:not(:last-child),
21512
+ .pf-c-content blockquote:not(:last-child),
21513
+ .pf-c-content small:not(:last-child),
21514
+ .pf-c-content pre:not(:last-child),
21515
+ .pf-c-content table:not(:last-child),
21516
+ .pf-c-content hr:not(:last-child) {
21517
+ margin-bottom: var(--pf-c-content--MarginBottom);
21056
21518
  }
21057
21519
 
21058
- .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
21059
- position: absolute;
21060
- left: 100%;
21520
+ .pf-c-content h1,
21521
+ .pf-c-content h2,
21522
+ .pf-c-content h3,
21523
+ .pf-c-content h4,
21524
+ .pf-c-content h5,
21525
+ .pf-c-content h6 {
21526
+ margin: 0;
21527
+ font-family: var(--pf-c-content--heading--FontFamily);
21061
21528
  }
21062
21529
 
21063
- .pf-c-slider__value .pf-c-form-control {
21064
- width: var(--pf-c-slider__value--c-form-control--Width);
21530
+ .pf-c-content h1:first-child,
21531
+ .pf-c-content h2:first-child,
21532
+ .pf-c-content h3:first-child,
21533
+ .pf-c-content h4:first-child,
21534
+ .pf-c-content h5:first-child,
21535
+ .pf-c-content h6:first-child {
21536
+ margin-top: 0;
21065
21537
  }
21066
21538
 
21067
- .pf-c-slider__actions {
21068
- display: flex;
21069
- margin-right: var(--pf-c-slider__actions--MarginRight);
21539
+ .pf-c-content h1:last-child,
21540
+ .pf-c-content h2:last-child,
21541
+ .pf-c-content h3:last-child,
21542
+ .pf-c-content h4:last-child,
21543
+ .pf-c-content h5:last-child,
21544
+ .pf-c-content h6:last-child {
21545
+ margin-bottom: 0;
21070
21546
  }
21071
21547
 
21072
- .pf-c-slider__main ~ .pf-c-slider__actions {
21073
- --pf-c-slider__actions--MarginRight: 0;
21074
- margin-left: var(--pf-c-slider__main--actions--MarginLeft);
21548
+ .pf-c-content ol,
21549
+ .pf-c-content ul {
21550
+ margin: 0;
21075
21551
  }
21076
21552
 
21077
- .pf-c-switch {
21078
- --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
21079
- --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
21080
- --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
21081
- --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
21082
- --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
21083
- --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
21084
- --pf-c-switch__toggle-icon--Offset: 0.125rem;
21085
- --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
21086
- --pf-c-switch--Height: auto;
21087
- --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
21088
- --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
21089
- --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
21090
- --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
21091
- --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
21092
- --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
21093
- --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
21094
- --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
21095
- --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
21096
- --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
21097
- --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
21098
- --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
21099
- --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
21100
- --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
21101
- --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
21102
- --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
21103
- --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
21104
- --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
21105
- --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
21106
- --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
21107
- --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
21108
- --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
21109
- --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
21110
- position: relative;
21111
- display: inline-grid;
21112
- grid-template-columns: auto;
21113
- grid-auto-columns: 1fr;
21114
- column-gap: var(--pf-c-switch--ColumnGap);
21115
- height: var(--pf-c-switch--Height);
21116
- font-size: var(--pf-c-switch--FontSize);
21117
- line-height: var(--pf-c-switch--LineHeight);
21118
- vertical-align: middle;
21119
- cursor: pointer;
21553
+ .pf-c-content h1 {
21554
+ margin-top: var(--pf-c-content--h1--MarginTop);
21555
+ margin-bottom: var(--pf-c-content--h1--MarginBottom);
21556
+ font-size: var(--pf-c-content--h1--FontSize);
21557
+ font-weight: var(--pf-c-content--h1--FontWeight);
21558
+ line-height: var(--pf-c-content--h1--LineHeight);
21120
21559
  }
21121
21560
 
21122
- .pf-c-switch.pf-m-reverse .pf-c-switch__label,
21123
- .pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
21124
- grid-row: 1;
21561
+ .pf-c-content h2 {
21562
+ margin-top: var(--pf-c-content--h2--MarginTop);
21563
+ margin-bottom: var(--pf-c-content--h2--MarginBottom);
21564
+ font-size: var(--pf-c-content--h2--FontSize);
21565
+ font-weight: var(--pf-c-content--h2--FontWeight);
21566
+ line-height: var(--pf-c-content--h2--LineHeight);
21125
21567
  }
21126
21568
 
21127
- .pf-c-switch.pf-m-reverse .pf-c-switch__label {
21128
- grid-column: 1;
21569
+ .pf-c-content h3 {
21570
+ margin-top: var(--pf-c-content--h3--MarginTop);
21571
+ margin-bottom: var(--pf-c-content--h3--MarginBottom);
21572
+ font-size: var(--pf-c-content--h3--FontSize);
21573
+ font-weight: var(--pf-c-content--h3--FontWeight);
21574
+ line-height: var(--pf-c-content--h3--LineHeight);
21129
21575
  }
21130
21576
 
21131
- .pf-c-switch__input {
21132
- position: absolute;
21133
- cursor: pointer;
21134
- opacity: 0;
21577
+ .pf-c-content h4 {
21578
+ margin-top: var(--pf-c-content--h4--MarginTop);
21579
+ margin-bottom: var(--pf-c-content--h4--MarginBottom);
21580
+ font-size: var(--pf-c-content--h4--FontSize);
21581
+ font-weight: var(--pf-c-content--h4--FontWeight);
21582
+ line-height: var(--pf-c-content--h4--LineHeight);
21135
21583
  }
21136
21584
 
21137
- .pf-c-switch__input:focus ~ .pf-c-switch__toggle {
21138
- outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
21139
- outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
21585
+ .pf-c-content h5 {
21586
+ margin-top: var(--pf-c-content--h5--MarginTop);
21587
+ margin-bottom: var(--pf-c-content--h5--MarginBottom);
21588
+ font-size: var(--pf-c-content--h5--FontSize);
21589
+ font-weight: var(--pf-c-content--h5--FontWeight);
21590
+ line-height: var(--pf-c-content--h5--LineHeight);
21140
21591
  }
21141
21592
 
21142
- .pf-c-switch__input:checked ~ .pf-c-switch__label {
21143
- color: var(--pf-c-switch__input--checked__label--Color);
21593
+ .pf-c-content h6 {
21594
+ margin-top: var(--pf-c-content--h6--MarginTop);
21595
+ margin-bottom: var(--pf-c-content--h6--MarginBottom);
21596
+ font-size: var(--pf-c-content--h6--FontSize);
21597
+ font-weight: var(--pf-c-content--h6--FontWeight);
21598
+ line-height: var(--pf-c-content--h6--LineHeight);
21144
21599
  }
21145
21600
 
21146
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle {
21147
- background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
21601
+ .pf-c-content small {
21602
+ display: block;
21603
+ font-size: var(--pf-c-content--small--FontSize);
21604
+ line-height: var(--pf-c-content--small--LineHeight);
21605
+ color: var(--pf-c-content--small--Color);
21148
21606
  }
21149
21607
 
21150
- .pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
21151
- transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
21608
+ .pf-c-content small:not(:last-child) {
21609
+ margin-bottom: var(--pf-c-content--small--MarginBottom);
21152
21610
  }
21153
21611
 
21154
- .pf-c-switch__input:checked ~ .pf-m-off {
21155
- display: none;
21612
+ .pf-c-content blockquote {
21613
+ padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
21614
+ color: var(--pf-c-content--blockquote--Color);
21615
+ border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
21156
21616
  }
21157
21617
 
21158
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
21159
- color: var(--pf-c-switch__input--not-checked__label--Color);
21618
+ .pf-c-content hr {
21619
+ height: var(--pf-c-content--hr--Height);
21620
+ background-color: var(--pf-c-content--hr--BackgroundColor);
21621
+ border: none;
21160
21622
  }
21161
21623
 
21162
- .pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
21163
- display: none;
21164
- visibility: hidden;
21624
+ .pf-c-content ol {
21625
+ padding-left: var(--pf-c-content--ol--PaddingLeft);
21626
+ margin-left: var(--pf-c-content--ol--MarginLeft);
21165
21627
  }
21166
21628
 
21167
- .pf-c-switch__input:not(:checked) ~ .pf-m-on {
21168
- display: none;
21629
+ .pf-c-content ol ul {
21630
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
21631
+ --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
21169
21632
  }
21170
21633
 
21171
- .pf-c-switch__input:disabled {
21172
- cursor: not-allowed;
21634
+ .pf-c-content ol ol {
21635
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
21636
+ --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
21173
21637
  }
21174
21638
 
21175
- .pf-c-switch__input:disabled ~ .pf-c-switch__label {
21176
- color: var(--pf-c-switch__input--disabled__label--Color);
21177
- cursor: not-allowed;
21639
+ .pf-c-content ul {
21640
+ padding-left: var(--pf-c-content--ul--PaddingLeft);
21641
+ margin-left: var(--pf-c-content--ul--MarginLeft);
21642
+ list-style: var(--pf-c-content--ul--ListStyle);
21178
21643
  }
21179
21644
 
21180
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
21181
- cursor: not-allowed;
21182
- background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
21645
+ .pf-c-content ul ul {
21646
+ margin-top: var(--pf-c-content--ul--nested--MarginTop);
21647
+ --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
21183
21648
  }
21184
21649
 
21185
- .pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
21186
- background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
21650
+ .pf-c-content ul ol {
21651
+ margin-top: var(--pf-c-content--ol--nested--MarginTop);
21652
+ --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
21187
21653
  }
21188
21654
 
21189
- .pf-c-switch__toggle {
21190
- position: relative;
21191
- display: inline-block;
21192
- width: var(--pf-c-switch__toggle--Width);
21193
- height: var(--pf-c-switch__toggle--Height);
21194
- background-color: var(--pf-c-switch__toggle--BackgroundColor);
21195
- border-radius: var(--pf-c-switch__toggle--BorderRadius);
21655
+ .pf-c-content dl {
21656
+ display: grid;
21657
+ grid-template-columns: 1fr;
21196
21658
  }
21197
21659
 
21198
- .pf-c-switch__toggle::before {
21199
- position: absolute;
21200
- top: var(--pf-c-switch__toggle--before--Top);
21201
- left: var(--pf-c-switch__toggle--before--Left);
21202
- display: block;
21203
- width: var(--pf-c-switch__toggle--before--Width);
21204
- height: var(--pf-c-switch__toggle--before--Height);
21205
- content: "";
21206
- background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
21207
- border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
21208
- box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
21209
- transition: var(--pf-c-switch__toggle--before--Transition);
21660
+ @media screen and (min-width: 576px) {
21661
+ .pf-c-content dl {
21662
+ grid-template: auto/auto 1fr;
21663
+ grid-column-gap: var(--pf-c-content--dl--ColumnGap);
21664
+ grid-row-gap: var(--pf-c-content--dl--RowGap);
21665
+ }
21666
+ }
21667
+ .pf-c-content dt {
21668
+ font-weight: var(--pf-c-content--dt--FontWeight);
21210
21669
  }
21211
21670
 
21212
- .pf-c-switch__toggle-icon {
21213
- position: absolute;
21214
- top: 0;
21215
- bottom: 0;
21216
- left: var(--pf-c-switch__toggle-icon--Left);
21217
- display: flex;
21218
- align-items: center;
21219
- font-size: var(--pf-c-switch__toggle-icon--FontSize);
21220
- color: var(--pf-c-switch__toggle-icon--Color);
21671
+ .pf-c-content dt:not(:first-child) {
21672
+ margin-top: var(--pf-c-content--dt--MarginTop);
21221
21673
  }
21222
21674
 
21223
- .pf-c-switch__label {
21224
- display: inline-block;
21225
- grid-column: 2;
21226
- color: var(--pf-c-switch__label--Color);
21227
- vertical-align: top;
21675
+ @media screen and (min-width: 576px) {
21676
+ .pf-c-content dt:not(:first-child) {
21677
+ --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
21678
+ }
21679
+ }
21680
+ @media screen and (min-width: 576px) {
21681
+ .pf-c-content dt {
21682
+ grid-column: 1;
21683
+ }
21684
+ }
21685
+ @media screen and (min-width: 576px) {
21686
+ .pf-c-content dd {
21687
+ grid-column: 2;
21688
+ }
21689
+ }
21690
+ .pf-m-overpass-font .pf-c-content {
21691
+ --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
21692
+ --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
21693
+ --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
21694
+ --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
21695
+ }
21696
+
21697
+ .pf-m-overpass-font .pf-c-content blockquote {
21698
+ font-weight: var(--pf-global--FontWeight--light);
21228
21699
  }
21229
21700
 
21230
21701
  .pf-c-tabs {
@@ -21578,814 +22049,527 @@ label.pf-c-radio, .pf-c-radio__label,
21578
22049
  @media (min-width: 1450px) {
21579
22050
  .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-2xl {
21580
22051
  --pf-c-tabs__list--Display: none;
21581
- --pf-c-tabs__list--Visibility: hidden;
21582
- --pf-c-tabs__toggle--Display: flex;
21583
- --pf-c-tabs__toggle--Visibility: visible;
21584
- }
21585
-
21586
- .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-2xl {
21587
- --pf-c-tabs__list--Display: flex;
21588
- --pf-c-tabs__list--Visibility: visible;
21589
- --pf-c-tabs__toggle--Display: none;
21590
- --pf-c-tabs__toggle--Visibility: hidden;
21591
- }
21592
- }
21593
- .pf-c-tabs.pf-m-vertical.pf-m-expanded {
21594
- --pf-c-tabs__list--Display: flex;
21595
- --pf-c-tabs__list--Visibility: visible;
21596
- --pf-c-tabs__toggle--MarginBottom: var(--pf-c-tabs--m-expanded__toggle--MarginBottom);
21597
- --pf-c-tabs__toggle-icon--Color: var(--pf-c-tabs--m-expanded__toggle-icon--Color);
21598
- --pf-c-tabs__toggle-icon--Rotate: var(--pf-c-tabs--m-expanded__toggle-icon--Rotate);
21599
- }
21600
-
21601
- .pf-c-tabs.pf-m-box.pf-m-vertical {
21602
- --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset);
21603
- --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0;
21604
- --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base);
21605
- --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base);
21606
- --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
21607
- --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0;
21608
- }
21609
-
21610
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
21611
- right: 0;
21612
- left: auto;
21613
- }
21614
-
21615
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child {
21616
- --pf-c-tabs__link--before--BorderBottomWidth: 0;
21617
- --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base);
21618
- }
21619
-
21620
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current {
21621
- --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor);
21622
- --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
21623
- --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base);
21624
- }
21625
-
21626
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current:first-child {
21627
- --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base);
21628
- }
21629
-
21630
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child.pf-m-current {
21631
- --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base);
21632
- }
21633
-
21634
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__link::after {
21635
- top: calc(var(--pf-c-tabs__link--before--border-width--base) * -1);
21636
- }
21637
-
21638
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child .pf-c-tabs__link::after,
21639
- .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current + .pf-c-tabs__item .pf-c-tabs__link::after {
21640
- top: 0;
21641
- }
21642
-
21643
- .pf-c-tabs.pf-m-secondary {
21644
- --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
21645
- }
21646
-
21647
- .pf-c-tabs.pf-m-page-insets {
21648
- --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
21649
- }
21650
-
21651
- .pf-c-tabs__toggle {
21652
- display: var(--pf-c-tabs__toggle--Display);
21653
- align-items: center;
21654
- margin-bottom: var(--pf-c-tabs__toggle--MarginBottom);
21655
- visibility: var(--pf-c-tabs__toggle--Visibility);
21656
- }
21657
-
21658
- .pf-c-tabs__toggle-button {
21659
- --pf-c-tabs__toggle-text--MarginLeft: var(--pf-c-tabs__toggle-button__toggle-text--MarginLeft);
21660
- --pf-c-tabs__toggle-text--Color: var(--pf-c-tabs__toggle-button__toggle-text--Color);
21661
- margin-top: var(--pf-c-tabs__toggle-button--MarginTop);
21662
- margin-bottom: var(--pf-c-tabs__toggle-button--MarginBottom);
21663
- margin-left: var(--pf-c-tabs__toggle-button--MarginLeft);
21664
- }
21665
-
21666
- .pf-c-tabs__toggle-button .pf-c-button {
21667
- display: flex;
21668
- text-align: left;
21669
- white-space: normal;
21670
- }
21671
-
21672
- .pf-c-tabs__toggle-icon {
21673
- display: inline-block;
21674
- color: var(--pf-c-tabs__toggle-icon--Color);
21675
- transition: var(--pf-c-tabs__toggle-icon--Transition);
21676
- transform: rotate(var(--pf-c-tabs__toggle-icon--Rotate));
21677
- }
21678
-
21679
- .pf-c-tabs__toggle-text {
21680
- margin-left: var(--pf-c-tabs__toggle-text--MarginLeft);
21681
- color: var(--pf-c-tabs__toggle-text--Color, inherit);
21682
- }
21683
-
21684
- .pf-c-tabs__list {
21685
- scrollbar-width: none;
21686
- -ms-overflow-style: -ms-autohiding-scrollbar;
21687
- position: relative;
21688
- display: var(--pf-c-tabs__list--Display);
21689
- max-width: 100%;
21690
- overflow-x: auto;
21691
- scroll-behavior: smooth;
21692
- scroll-snap-type: var(--pf-c-tabs__list--ScrollSnapType);
21693
- visibility: var(--pf-c-tabs__list--Visibility);
21694
- -webkit-overflow-scrolling: touch;
21695
- }
21696
-
21697
- .pf-c-tabs__list::-webkit-scrollbar {
21698
- display: none;
21699
- }
21700
-
21701
- .pf-c-tabs__item {
21702
- display: flex;
21703
- flex: none;
21704
- scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign);
21705
- }
21706
-
21707
- .pf-c-tabs__item.pf-m-current {
21708
- --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color);
21709
- --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
21710
- --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
21711
- }
21712
-
21713
- .pf-c-tabs::before,
21714
- .pf-c-tabs__list::before,
21715
- .pf-c-tabs__link::before,
21716
- .pf-c-tabs__link::after,
21717
- .pf-c-tabs__scroll-button::before {
21718
- position: absolute;
21719
- right: 0;
21720
- bottom: 0;
21721
- left: 0;
21722
- content: "";
21723
- border-style: solid;
21724
- }
21725
-
21726
- .pf-c-tabs__list::before,
21727
- .pf-c-tabs__link::before,
21728
- .pf-c-tabs__link::after,
21729
- .pf-c-tabs__scroll-button::before {
21730
- top: 0;
21731
- }
21732
-
21733
- .pf-c-tabs__link,
21734
- .pf-c-tabs__scroll-button,
21735
- .pf-c-tabs__list::before {
21736
- border: 0;
21737
- }
21738
-
21739
- .pf-c-tabs__link {
21740
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
21741
- position: relative;
21742
- display: flex;
21743
- flex: 1;
21744
- padding: var(--pf-c-tabs__link--PaddingTop) var(--pf-c-tabs__link--PaddingRight) var(--pf-c-tabs__link--PaddingBottom) var(--pf-c-tabs__link--PaddingLeft);
21745
- font-size: var(--pf-c-tabs__link--FontSize);
21746
- color: var(--pf-c-tabs__link--Color);
21747
- text-decoration: none;
21748
- background-color: var(--pf-c-tabs__link--BackgroundColor);
21749
- outline-offset: var(--pf-c-tabs__link--OutlineOffset);
21750
- }
21751
-
21752
- .pf-c-tabs__link::before {
21753
- pointer-events: none;
21754
- border-color: var(--pf-c-tabs__link--before--border-color--base);
21755
- border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
21756
- border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
21757
- border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
21758
- }
21759
-
21760
- .pf-c-tabs__link::after {
21761
- top: var(--pf-c-tabs__link--after--Top);
21762
- right: var(--pf-c-tabs__link--after--Right);
21763
- bottom: var(--pf-c-tabs__link--after--Bottom);
21764
- left: var(--pf-c-tabs__link--before--Left);
21765
- border-color: var(--pf-c-tabs__link--after--BorderColor);
21766
- border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
21767
- }
21768
-
21769
- .pf-c-tabs__link:hover {
21770
- --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
21771
- }
21772
-
21773
- .pf-c-tabs__link:focus {
21774
- --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
21775
- }
21776
-
21777
- .pf-c-tabs__link:active {
21778
- --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
21779
- }
21780
-
21781
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
21782
- pointer-events: none;
21783
- }
21784
-
21785
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
21786
- --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
21787
- --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
21788
- --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
21789
- --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
21790
- --pf-c-tabs__link--after--BorderWidth: 0;
21791
- }
22052
+ --pf-c-tabs__list--Visibility: hidden;
22053
+ --pf-c-tabs__toggle--Display: flex;
22054
+ --pf-c-tabs__toggle--Visibility: visible;
22055
+ }
21792
22056
 
21793
- .pf-c-tabs__link.pf-m-aria-disabled {
21794
- cursor: default;
22057
+ .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-2xl {
22058
+ --pf-c-tabs__list--Display: flex;
22059
+ --pf-c-tabs__list--Visibility: visible;
22060
+ --pf-c-tabs__toggle--Display: none;
22061
+ --pf-c-tabs__toggle--Visibility: hidden;
22062
+ }
21795
22063
  }
21796
-
21797
- .pf-c-tabs__link .pf-c-tabs__item-icon,
21798
- .pf-c-tabs__link .pf-c-tabs__item-text {
21799
- margin-right: var(--pf-c-tabs__link--child--MarginRight);
22064
+ .pf-c-tabs.pf-m-vertical.pf-m-expanded {
22065
+ --pf-c-tabs__list--Display: flex;
22066
+ --pf-c-tabs__list--Visibility: visible;
22067
+ --pf-c-tabs__toggle--MarginBottom: var(--pf-c-tabs--m-expanded__toggle--MarginBottom);
22068
+ --pf-c-tabs__toggle-icon--Color: var(--pf-c-tabs--m-expanded__toggle-icon--Color);
22069
+ --pf-c-tabs__toggle-icon--Rotate: var(--pf-c-tabs--m-expanded__toggle-icon--Rotate);
21800
22070
  }
21801
22071
 
21802
- .pf-c-tabs__link .pf-c-tabs__item-icon:last-child,
21803
- .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
21804
- --pf-c-tabs__link--child--MarginRight: 0;
22072
+ .pf-c-tabs.pf-m-box.pf-m-vertical {
22073
+ --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--m-box--inset);
22074
+ --pf-c-tabs--m-vertical__list--before--BorderLeftWidth: 0;
22075
+ --pf-c-tabs--m-vertical__list--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base);
22076
+ --pf-c-tabs__link--disabled--before--BorderRightWidth: var(--pf-c-tabs--before--border-width--base);
22077
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
22078
+ --pf-c-tabs__link--disabled--before--BorderLeftWidth: 0;
21805
22079
  }
21806
22080
 
21807
- .pf-c-tabs__scroll-button {
21808
- flex: none;
21809
- width: var(--pf-c-tabs__scroll-button--Width);
21810
- line-height: 1;
21811
- color: var(--pf-c-tabs__scroll-button--Color);
21812
- background-color: var(--pf-c-tabs__scroll-button--BackgroundColor);
21813
- outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset);
21814
- opacity: 0;
21815
- transition: margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity);
22081
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
22082
+ right: 0;
22083
+ left: auto;
21816
22084
  }
21817
22085
 
21818
- .pf-c-tabs__scroll-button:hover, .pf-c-tabs__scroll-button:active, .pf-c-tabs__scroll-button:focus {
21819
- --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color);
22086
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child {
22087
+ --pf-c-tabs__link--before--BorderBottomWidth: 0;
22088
+ --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--before--border-width--base);
21820
22089
  }
21821
22090
 
21822
- .pf-c-tabs__scroll-button::before {
21823
- border-color: var(--pf-c-tabs__scroll-button--before--BorderColor);
21824
- border-width: 0 var(--pf-c-tabs__scroll-button--before--BorderRightWidth) var(--pf-c-tabs__scroll-button--before--BorderBottomWidth) var(--pf-c-tabs__scroll-button--before--BorderLeftWidth);
22091
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current {
22092
+ --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor);
22093
+ --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
22094
+ --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base);
21825
22095
  }
21826
22096
 
21827
- .pf-c-tabs__scroll-button:nth-of-type(1) {
21828
- --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base);
21829
- margin-right: calc(var(--pf-c-tabs__scroll-button--Width) * -1);
21830
- transform: translateX(-100%);
22097
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current:first-child {
22098
+ --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base);
21831
22099
  }
21832
22100
 
21833
- .pf-c-tabs__scroll-button:nth-of-type(2) {
21834
- --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base);
21835
- margin-left: calc(var(--pf-c-tabs__scroll-button--Width) * -1);
21836
- transform: translateX(100%);
22101
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child.pf-m-current {
22102
+ --pf-c-tabs__link--before--BorderTopWidth: var(--pf-c-tabs__link--before--border-width--base);
21837
22103
  }
21838
22104
 
21839
- .pf-c-tabs__scroll-button:disabled {
21840
- --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color);
21841
- pointer-events: none;
22105
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__link::after {
22106
+ top: calc(var(--pf-c-tabs__link--before--border-width--base) * -1);
21842
22107
  }
21843
22108
 
21844
- .pf-c-tabs.pf-m-inset-none {
21845
- --pf-c-tabs--inset: 0;
21846
- --pf-c-tabs--m-vertical--inset: 0;
21847
- --pf-c-tabs--m-vertical--m-box--inset: 0;
22109
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child .pf-c-tabs__link::after,
22110
+ .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current + .pf-c-tabs__item .pf-c-tabs__link::after {
22111
+ top: 0;
21848
22112
  }
21849
22113
 
21850
- .pf-c-tabs.pf-m-inset-sm {
21851
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
21852
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
21853
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22114
+ .pf-c-tabs.pf-m-secondary {
22115
+ --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
21854
22116
  }
21855
22117
 
21856
- .pf-c-tabs.pf-m-inset-md {
21857
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
21858
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
21859
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22118
+ .pf-c-tabs.pf-m-page-insets {
22119
+ --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
21860
22120
  }
21861
22121
 
21862
- .pf-c-tabs.pf-m-inset-lg {
21863
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
21864
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
21865
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22122
+ .pf-c-tabs__toggle {
22123
+ display: var(--pf-c-tabs__toggle--Display);
22124
+ align-items: center;
22125
+ margin-bottom: var(--pf-c-tabs__toggle--MarginBottom);
22126
+ visibility: var(--pf-c-tabs__toggle--Visibility);
21866
22127
  }
21867
22128
 
21868
- .pf-c-tabs.pf-m-inset-xl {
21869
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
21870
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
21871
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22129
+ .pf-c-tabs__toggle-button {
22130
+ --pf-c-tabs__toggle-text--MarginLeft: var(--pf-c-tabs__toggle-button__toggle-text--MarginLeft);
22131
+ --pf-c-tabs__toggle-text--Color: var(--pf-c-tabs__toggle-button__toggle-text--Color);
22132
+ margin-top: var(--pf-c-tabs__toggle-button--MarginTop);
22133
+ margin-bottom: var(--pf-c-tabs__toggle-button--MarginBottom);
22134
+ margin-left: var(--pf-c-tabs__toggle-button--MarginLeft);
21872
22135
  }
21873
22136
 
21874
- .pf-c-tabs.pf-m-inset-2xl {
21875
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
21876
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
21877
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22137
+ .pf-c-tabs__toggle-button .pf-c-button {
22138
+ display: flex;
22139
+ text-align: left;
22140
+ white-space: normal;
21878
22141
  }
21879
22142
 
21880
- @media (min-width: 576px) {
21881
- .pf-c-tabs.pf-m-inset-none-on-sm {
21882
- --pf-c-tabs--inset: 0;
21883
- --pf-c-tabs--m-vertical--inset: 0;
21884
- --pf-c-tabs--m-vertical--m-box--inset: 0;
21885
- }
21886
-
21887
- .pf-c-tabs.pf-m-inset-sm-on-sm {
21888
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
21889
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
21890
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
21891
- }
21892
-
21893
- .pf-c-tabs.pf-m-inset-md-on-sm {
21894
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
21895
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
21896
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
21897
- }
21898
-
21899
- .pf-c-tabs.pf-m-inset-lg-on-sm {
21900
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
21901
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
21902
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
21903
- }
21904
-
21905
- .pf-c-tabs.pf-m-inset-xl-on-sm {
21906
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
21907
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
21908
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
21909
- }
21910
-
21911
- .pf-c-tabs.pf-m-inset-2xl-on-sm {
21912
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
21913
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
21914
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
21915
- }
22143
+ .pf-c-tabs__toggle-icon {
22144
+ display: inline-block;
22145
+ color: var(--pf-c-tabs__toggle-icon--Color);
22146
+ transition: var(--pf-c-tabs__toggle-icon--Transition);
22147
+ transform: rotate(var(--pf-c-tabs__toggle-icon--Rotate));
21916
22148
  }
21917
- @media (min-width: 768px) {
21918
- .pf-c-tabs.pf-m-inset-none-on-md {
21919
- --pf-c-tabs--inset: 0;
21920
- --pf-c-tabs--m-vertical--inset: 0;
21921
- --pf-c-tabs--m-vertical--m-box--inset: 0;
21922
- }
21923
-
21924
- .pf-c-tabs.pf-m-inset-sm-on-md {
21925
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
21926
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
21927
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
21928
- }
21929
-
21930
- .pf-c-tabs.pf-m-inset-md-on-md {
21931
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
21932
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
21933
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
21934
- }
21935
-
21936
- .pf-c-tabs.pf-m-inset-lg-on-md {
21937
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
21938
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
21939
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
21940
- }
21941
22149
 
21942
- .pf-c-tabs.pf-m-inset-xl-on-md {
21943
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
21944
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
21945
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
21946
- }
21947
-
21948
- .pf-c-tabs.pf-m-inset-2xl-on-md {
21949
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
21950
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
21951
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
21952
- }
22150
+ .pf-c-tabs__toggle-text {
22151
+ margin-left: var(--pf-c-tabs__toggle-text--MarginLeft);
22152
+ color: var(--pf-c-tabs__toggle-text--Color, inherit);
21953
22153
  }
21954
- @media (min-width: 992px) {
21955
- .pf-c-tabs.pf-m-inset-none-on-lg {
21956
- --pf-c-tabs--inset: 0;
21957
- --pf-c-tabs--m-vertical--inset: 0;
21958
- --pf-c-tabs--m-vertical--m-box--inset: 0;
21959
- }
21960
-
21961
- .pf-c-tabs.pf-m-inset-sm-on-lg {
21962
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
21963
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
21964
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
21965
- }
21966
-
21967
- .pf-c-tabs.pf-m-inset-md-on-lg {
21968
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
21969
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
21970
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
21971
- }
21972
-
21973
- .pf-c-tabs.pf-m-inset-lg-on-lg {
21974
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
21975
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
21976
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
21977
- }
21978
-
21979
- .pf-c-tabs.pf-m-inset-xl-on-lg {
21980
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
21981
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
21982
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
21983
- }
21984
22154
 
21985
- .pf-c-tabs.pf-m-inset-2xl-on-lg {
21986
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
21987
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
21988
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
21989
- }
22155
+ .pf-c-tabs__list {
22156
+ scrollbar-width: none;
22157
+ -ms-overflow-style: -ms-autohiding-scrollbar;
22158
+ position: relative;
22159
+ display: var(--pf-c-tabs__list--Display);
22160
+ max-width: 100%;
22161
+ overflow-x: auto;
22162
+ scroll-behavior: smooth;
22163
+ scroll-snap-type: var(--pf-c-tabs__list--ScrollSnapType);
22164
+ visibility: var(--pf-c-tabs__list--Visibility);
22165
+ -webkit-overflow-scrolling: touch;
21990
22166
  }
21991
- @media (min-width: 1200px) {
21992
- .pf-c-tabs.pf-m-inset-none-on-xl {
21993
- --pf-c-tabs--inset: 0;
21994
- --pf-c-tabs--m-vertical--inset: 0;
21995
- --pf-c-tabs--m-vertical--m-box--inset: 0;
21996
- }
21997
-
21998
- .pf-c-tabs.pf-m-inset-sm-on-xl {
21999
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22000
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22001
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22002
- }
22003
22167
 
22004
- .pf-c-tabs.pf-m-inset-md-on-xl {
22005
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
22006
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22007
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22008
- }
22168
+ .pf-c-tabs__list::-webkit-scrollbar {
22169
+ display: none;
22170
+ }
22009
22171
 
22010
- .pf-c-tabs.pf-m-inset-lg-on-xl {
22011
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22012
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22013
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22014
- }
22172
+ .pf-c-tabs__item {
22173
+ display: flex;
22174
+ flex: none;
22175
+ scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign);
22176
+ }
22015
22177
 
22016
- .pf-c-tabs.pf-m-inset-xl-on-xl {
22017
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22018
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22019
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22020
- }
22178
+ .pf-c-tabs__item.pf-m-current {
22179
+ --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color);
22180
+ --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
22181
+ --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
22182
+ }
22021
22183
 
22022
- .pf-c-tabs.pf-m-inset-2xl-on-xl {
22023
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22024
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22025
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22026
- }
22184
+ .pf-c-tabs::before,
22185
+ .pf-c-tabs__list::before,
22186
+ .pf-c-tabs__link::before,
22187
+ .pf-c-tabs__link::after,
22188
+ .pf-c-tabs__scroll-button::before {
22189
+ position: absolute;
22190
+ right: 0;
22191
+ bottom: 0;
22192
+ left: 0;
22193
+ content: "";
22194
+ border-style: solid;
22027
22195
  }
22028
- @media (min-width: 1450px) {
22029
- .pf-c-tabs.pf-m-inset-none-on-2xl {
22030
- --pf-c-tabs--inset: 0;
22031
- --pf-c-tabs--m-vertical--inset: 0;
22032
- --pf-c-tabs--m-vertical--m-box--inset: 0;
22033
- }
22034
22196
 
22035
- .pf-c-tabs.pf-m-inset-sm-on-2xl {
22036
- --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22037
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22038
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22039
- }
22197
+ .pf-c-tabs__list::before,
22198
+ .pf-c-tabs__link::before,
22199
+ .pf-c-tabs__link::after,
22200
+ .pf-c-tabs__scroll-button::before {
22201
+ top: 0;
22202
+ }
22040
22203
 
22041
- .pf-c-tabs.pf-m-inset-md-on-2xl {
22042
- --pf-c-tabs--inset: var(--pf-global--spacer--md);
22043
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22044
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22045
- }
22204
+ .pf-c-tabs__link,
22205
+ .pf-c-tabs__scroll-button,
22206
+ .pf-c-tabs__list::before {
22207
+ border: 0;
22208
+ }
22046
22209
 
22047
- .pf-c-tabs.pf-m-inset-lg-on-2xl {
22048
- --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22049
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22050
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22051
- }
22210
+ .pf-c-tabs__link {
22211
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
22212
+ position: relative;
22213
+ display: flex;
22214
+ flex: 1;
22215
+ padding: var(--pf-c-tabs__link--PaddingTop) var(--pf-c-tabs__link--PaddingRight) var(--pf-c-tabs__link--PaddingBottom) var(--pf-c-tabs__link--PaddingLeft);
22216
+ font-size: var(--pf-c-tabs__link--FontSize);
22217
+ color: var(--pf-c-tabs__link--Color);
22218
+ text-decoration: none;
22219
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
22220
+ outline-offset: var(--pf-c-tabs__link--OutlineOffset);
22221
+ }
22052
22222
 
22053
- .pf-c-tabs.pf-m-inset-xl-on-2xl {
22054
- --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22055
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22056
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22057
- }
22223
+ .pf-c-tabs__link::before {
22224
+ pointer-events: none;
22225
+ border-color: var(--pf-c-tabs__link--before--border-color--base);
22226
+ border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
22227
+ border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
22228
+ border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
22229
+ }
22058
22230
 
22059
- .pf-c-tabs.pf-m-inset-2xl-on-2xl {
22060
- --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22061
- --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22062
- --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22063
- }
22231
+ .pf-c-tabs__link::after {
22232
+ top: var(--pf-c-tabs__link--after--Top);
22233
+ right: var(--pf-c-tabs__link--after--Right);
22234
+ bottom: var(--pf-c-tabs__link--after--Bottom);
22235
+ left: var(--pf-c-tabs__link--before--Left);
22236
+ border-color: var(--pf-c-tabs__link--after--BorderColor);
22237
+ border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
22064
22238
  }
22065
- .pf-c-tab-content {
22066
- --pf-c-tab-content__body--PaddingTop: 0;
22067
- --pf-c-tab-content__body--PaddingRight: 0;
22068
- --pf-c-tab-content__body--PaddingBottom: 0;
22069
- --pf-c-tab-content__body--PaddingLeft: 0;
22070
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
22071
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
22072
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
22073
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
22074
- --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
22075
- --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
22076
- --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
22077
- --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
22078
- --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
22239
+
22240
+ .pf-c-tabs__link:hover {
22241
+ --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
22079
22242
  }
22080
22243
 
22081
- @media screen and (min-width: 1200px) {
22082
- .pf-c-tab-content {
22083
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
22084
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
22085
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
22086
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
22087
- }
22244
+ .pf-c-tabs__link:focus {
22245
+ --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
22088
22246
  }
22089
- .pf-c-tab-content.pf-m-light-300 {
22090
- background-color: var(--pf-c-tab-content--m-light-300);
22247
+
22248
+ .pf-c-tabs__link:active {
22249
+ --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
22091
22250
  }
22092
22251
 
22093
- .pf-c-tab-content__body {
22094
- padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
22252
+ .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
22253
+ pointer-events: none;
22095
22254
  }
22096
22255
 
22097
- .pf-c-tab-content__body.pf-m-padding {
22098
- --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
22099
- --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
22100
- --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
22101
- --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
22256
+ .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
22257
+ --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
22258
+ --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
22259
+ --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
22260
+ --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
22261
+ --pf-c-tabs__link--after--BorderWidth: 0;
22102
22262
  }
22103
22263
 
22104
- .pf-c-content {
22105
- --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
22106
- --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
22107
- --pf-c-content--FontSize: var(--pf-global--FontSize--md);
22108
- --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
22109
- --pf-c-content--Color: var(--pf-global--Color--100);
22110
- --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
22111
- --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
22112
- --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
22113
- --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
22114
- --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
22115
- --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
22116
- --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
22117
- --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
22118
- --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
22119
- --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
22120
- --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
22121
- --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
22122
- --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
22123
- --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
22124
- --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
22125
- --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
22126
- --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
22127
- --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
22128
- --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
22129
- --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
22130
- --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
22131
- --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
22132
- --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
22133
- --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
22134
- --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
22135
- --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
22136
- --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
22137
- --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
22138
- --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
22139
- --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
22140
- --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
22141
- --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
22142
- --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
22143
- --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
22144
- --pf-c-content--small--Color: var(--pf-global--Color--200);
22145
- --pf-c-content--a--Color: var(--pf-global--link--Color);
22146
- --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
22147
- --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
22148
- --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
22149
- --pf-c-content--a--visited--Color: var(--pf-global--link--Color--visited);
22150
- --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
22151
- --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
22152
- --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
22153
- --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
22154
- --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
22155
- --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
22156
- --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
22157
- --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
22158
- --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
22159
- --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
22160
- --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
22161
- --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
22162
- --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
22163
- --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
22164
- --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
22165
- --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
22166
- --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
22167
- --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
22168
- --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
22169
- --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
22170
- --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
22171
- --pf-c-content--dt--sm--MarginTop: 0;
22172
- --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
22173
- --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
22174
- font-size: var(--pf-c-content--FontSize);
22175
- line-height: var(--pf-c-content--LineHeight);
22176
- color: var(--pf-c-content--Color);
22264
+ .pf-c-tabs__link.pf-m-aria-disabled {
22265
+ cursor: default;
22177
22266
  }
22178
22267
 
22179
- .pf-c-content a {
22180
- color: var(--pf-c-content--a--Color);
22181
- text-decoration: var(--pf-c-content--a--TextDecoration);
22268
+ .pf-c-tabs__link .pf-c-tabs__item-icon,
22269
+ .pf-c-tabs__link .pf-c-tabs__item-text {
22270
+ margin-right: var(--pf-c-tabs__link--child--MarginRight);
22182
22271
  }
22183
22272
 
22184
- .pf-c-content a:hover {
22185
- --pf-c-content--a--Color: var(--pf-c-content--a--hover--Color);
22186
- --pf-c-content--a--TextDecoration: var(--pf-c-content--a--hover--TextDecoration);
22273
+ .pf-c-tabs__link .pf-c-tabs__item-icon:last-child,
22274
+ .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
22275
+ --pf-c-tabs__link--child--MarginRight: 0;
22276
+ }
22277
+
22278
+ .pf-c-tabs__scroll-button {
22279
+ flex: none;
22280
+ width: var(--pf-c-tabs__scroll-button--Width);
22281
+ line-height: 1;
22282
+ color: var(--pf-c-tabs__scroll-button--Color);
22283
+ background-color: var(--pf-c-tabs__scroll-button--BackgroundColor);
22284
+ outline-offset: var(--pf-c-tabs__scroll-button--OutlineOffset);
22285
+ opacity: 0;
22286
+ transition: margin var(--pf-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-c-tabs__scroll-button--TransitionDuration--opacity);
22187
22287
  }
22188
22288
 
22189
- .pf-c-content.pf-m-visited a:visited,
22190
- .pf-c-content a.pf-m-visited:visited {
22191
- color: var(--pf-c-content--a--visited--Color);
22289
+ .pf-c-tabs__scroll-button:hover, .pf-c-tabs__scroll-button:active, .pf-c-tabs__scroll-button:focus {
22290
+ --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--hover--Color);
22192
22291
  }
22193
22292
 
22194
- .pf-c-content li + li {
22195
- margin-top: var(--pf-c-content--li--MarginTop);
22293
+ .pf-c-tabs__scroll-button::before {
22294
+ border-color: var(--pf-c-tabs__scroll-button--before--BorderColor);
22295
+ border-width: 0 var(--pf-c-tabs__scroll-button--before--BorderRightWidth) var(--pf-c-tabs__scroll-button--before--BorderBottomWidth) var(--pf-c-tabs__scroll-button--before--BorderLeftWidth);
22196
22296
  }
22197
22297
 
22198
- .pf-c-content p:not(:last-child),
22199
- .pf-c-content dl:not(:last-child),
22200
- .pf-c-content ol:not(:last-child),
22201
- .pf-c-content ul:not(:last-child),
22202
- .pf-c-content blockquote:not(:last-child),
22203
- .pf-c-content small:not(:last-child),
22204
- .pf-c-content pre:not(:last-child),
22205
- .pf-c-content table:not(:last-child),
22206
- .pf-c-content hr:not(:last-child) {
22207
- margin-bottom: var(--pf-c-content--MarginBottom);
22298
+ .pf-c-tabs__scroll-button:nth-of-type(1) {
22299
+ --pf-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-c-tabs__scroll-button--before--border-width--base);
22300
+ margin-right: calc(var(--pf-c-tabs__scroll-button--Width) * -1);
22301
+ transform: translateX(-100%);
22208
22302
  }
22209
22303
 
22210
- .pf-c-content h1,
22211
- .pf-c-content h2,
22212
- .pf-c-content h3,
22213
- .pf-c-content h4,
22214
- .pf-c-content h5,
22215
- .pf-c-content h6 {
22216
- margin: 0;
22217
- font-family: var(--pf-c-content--heading--FontFamily);
22304
+ .pf-c-tabs__scroll-button:nth-of-type(2) {
22305
+ --pf-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-c-tabs__scroll-button--before--border-width--base);
22306
+ margin-left: calc(var(--pf-c-tabs__scroll-button--Width) * -1);
22307
+ transform: translateX(100%);
22218
22308
  }
22219
22309
 
22220
- .pf-c-content h1:first-child,
22221
- .pf-c-content h2:first-child,
22222
- .pf-c-content h3:first-child,
22223
- .pf-c-content h4:first-child,
22224
- .pf-c-content h5:first-child,
22225
- .pf-c-content h6:first-child {
22226
- margin-top: 0;
22310
+ .pf-c-tabs__scroll-button:disabled {
22311
+ --pf-c-tabs__scroll-button--Color: var(--pf-c-tabs__scroll-button--disabled--Color);
22312
+ pointer-events: none;
22227
22313
  }
22228
22314
 
22229
- .pf-c-content h1:last-child,
22230
- .pf-c-content h2:last-child,
22231
- .pf-c-content h3:last-child,
22232
- .pf-c-content h4:last-child,
22233
- .pf-c-content h5:last-child,
22234
- .pf-c-content h6:last-child {
22235
- margin-bottom: 0;
22315
+ .pf-c-tabs.pf-m-inset-none {
22316
+ --pf-c-tabs--inset: 0;
22317
+ --pf-c-tabs--m-vertical--inset: 0;
22318
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22236
22319
  }
22237
22320
 
22238
- .pf-c-content ol,
22239
- .pf-c-content ul {
22240
- margin: 0;
22321
+ .pf-c-tabs.pf-m-inset-sm {
22322
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22323
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22324
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22241
22325
  }
22242
22326
 
22243
- .pf-c-content h1 {
22244
- margin-top: var(--pf-c-content--h1--MarginTop);
22245
- margin-bottom: var(--pf-c-content--h1--MarginBottom);
22246
- font-size: var(--pf-c-content--h1--FontSize);
22247
- font-weight: var(--pf-c-content--h1--FontWeight);
22248
- line-height: var(--pf-c-content--h1--LineHeight);
22327
+ .pf-c-tabs.pf-m-inset-md {
22328
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22329
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22330
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22249
22331
  }
22250
22332
 
22251
- .pf-c-content h2 {
22252
- margin-top: var(--pf-c-content--h2--MarginTop);
22253
- margin-bottom: var(--pf-c-content--h2--MarginBottom);
22254
- font-size: var(--pf-c-content--h2--FontSize);
22255
- font-weight: var(--pf-c-content--h2--FontWeight);
22256
- line-height: var(--pf-c-content--h2--LineHeight);
22333
+ .pf-c-tabs.pf-m-inset-lg {
22334
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22335
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22336
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22257
22337
  }
22258
22338
 
22259
- .pf-c-content h3 {
22260
- margin-top: var(--pf-c-content--h3--MarginTop);
22261
- margin-bottom: var(--pf-c-content--h3--MarginBottom);
22262
- font-size: var(--pf-c-content--h3--FontSize);
22263
- font-weight: var(--pf-c-content--h3--FontWeight);
22264
- line-height: var(--pf-c-content--h3--LineHeight);
22339
+ .pf-c-tabs.pf-m-inset-xl {
22340
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22341
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22342
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22265
22343
  }
22266
22344
 
22267
- .pf-c-content h4 {
22268
- margin-top: var(--pf-c-content--h4--MarginTop);
22269
- margin-bottom: var(--pf-c-content--h4--MarginBottom);
22270
- font-size: var(--pf-c-content--h4--FontSize);
22271
- font-weight: var(--pf-c-content--h4--FontWeight);
22272
- line-height: var(--pf-c-content--h4--LineHeight);
22345
+ .pf-c-tabs.pf-m-inset-2xl {
22346
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22347
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22348
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22273
22349
  }
22274
22350
 
22275
- .pf-c-content h5 {
22276
- margin-top: var(--pf-c-content--h5--MarginTop);
22277
- margin-bottom: var(--pf-c-content--h5--MarginBottom);
22278
- font-size: var(--pf-c-content--h5--FontSize);
22279
- font-weight: var(--pf-c-content--h5--FontWeight);
22280
- line-height: var(--pf-c-content--h5--LineHeight);
22281
- }
22351
+ @media (min-width: 576px) {
22352
+ .pf-c-tabs.pf-m-inset-none-on-sm {
22353
+ --pf-c-tabs--inset: 0;
22354
+ --pf-c-tabs--m-vertical--inset: 0;
22355
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22356
+ }
22282
22357
 
22283
- .pf-c-content h6 {
22284
- margin-top: var(--pf-c-content--h6--MarginTop);
22285
- margin-bottom: var(--pf-c-content--h6--MarginBottom);
22286
- font-size: var(--pf-c-content--h6--FontSize);
22287
- font-weight: var(--pf-c-content--h6--FontWeight);
22288
- line-height: var(--pf-c-content--h6--LineHeight);
22289
- }
22358
+ .pf-c-tabs.pf-m-inset-sm-on-sm {
22359
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22360
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22361
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22362
+ }
22290
22363
 
22291
- .pf-c-content small {
22292
- display: block;
22293
- font-size: var(--pf-c-content--small--FontSize);
22294
- line-height: var(--pf-c-content--small--LineHeight);
22295
- color: var(--pf-c-content--small--Color);
22296
- }
22364
+ .pf-c-tabs.pf-m-inset-md-on-sm {
22365
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22366
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22367
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22368
+ }
22297
22369
 
22298
- .pf-c-content small:not(:last-child) {
22299
- margin-bottom: var(--pf-c-content--small--MarginBottom);
22300
- }
22370
+ .pf-c-tabs.pf-m-inset-lg-on-sm {
22371
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22372
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22373
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22374
+ }
22301
22375
 
22302
- .pf-c-content blockquote {
22303
- padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight) var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
22304
- color: var(--pf-c-content--blockquote--Color);
22305
- border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
22306
- }
22376
+ .pf-c-tabs.pf-m-inset-xl-on-sm {
22377
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22378
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22379
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22380
+ }
22307
22381
 
22308
- .pf-c-content hr {
22309
- height: var(--pf-c-content--hr--Height);
22310
- background-color: var(--pf-c-content--hr--BackgroundColor);
22311
- border: none;
22382
+ .pf-c-tabs.pf-m-inset-2xl-on-sm {
22383
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22384
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22385
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22386
+ }
22312
22387
  }
22388
+ @media (min-width: 768px) {
22389
+ .pf-c-tabs.pf-m-inset-none-on-md {
22390
+ --pf-c-tabs--inset: 0;
22391
+ --pf-c-tabs--m-vertical--inset: 0;
22392
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22393
+ }
22313
22394
 
22314
- .pf-c-content ol {
22315
- padding-left: var(--pf-c-content--ol--PaddingLeft);
22316
- margin-left: var(--pf-c-content--ol--MarginLeft);
22395
+ .pf-c-tabs.pf-m-inset-sm-on-md {
22396
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22397
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22398
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22399
+ }
22400
+
22401
+ .pf-c-tabs.pf-m-inset-md-on-md {
22402
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22403
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22404
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22405
+ }
22406
+
22407
+ .pf-c-tabs.pf-m-inset-lg-on-md {
22408
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22409
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22410
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22411
+ }
22412
+
22413
+ .pf-c-tabs.pf-m-inset-xl-on-md {
22414
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22415
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22416
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22417
+ }
22418
+
22419
+ .pf-c-tabs.pf-m-inset-2xl-on-md {
22420
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22421
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22422
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22423
+ }
22317
22424
  }
22425
+ @media (min-width: 992px) {
22426
+ .pf-c-tabs.pf-m-inset-none-on-lg {
22427
+ --pf-c-tabs--inset: 0;
22428
+ --pf-c-tabs--m-vertical--inset: 0;
22429
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22430
+ }
22318
22431
 
22319
- .pf-c-content ol ul {
22320
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
22321
- --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
22432
+ .pf-c-tabs.pf-m-inset-sm-on-lg {
22433
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22434
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22435
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22436
+ }
22437
+
22438
+ .pf-c-tabs.pf-m-inset-md-on-lg {
22439
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22440
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22441
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22442
+ }
22443
+
22444
+ .pf-c-tabs.pf-m-inset-lg-on-lg {
22445
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22446
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22447
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22448
+ }
22449
+
22450
+ .pf-c-tabs.pf-m-inset-xl-on-lg {
22451
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22452
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22453
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22454
+ }
22455
+
22456
+ .pf-c-tabs.pf-m-inset-2xl-on-lg {
22457
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22458
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22459
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22460
+ }
22322
22461
  }
22462
+ @media (min-width: 1200px) {
22463
+ .pf-c-tabs.pf-m-inset-none-on-xl {
22464
+ --pf-c-tabs--inset: 0;
22465
+ --pf-c-tabs--m-vertical--inset: 0;
22466
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22467
+ }
22468
+
22469
+ .pf-c-tabs.pf-m-inset-sm-on-xl {
22470
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22471
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22472
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22473
+ }
22474
+
22475
+ .pf-c-tabs.pf-m-inset-md-on-xl {
22476
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22477
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22478
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22479
+ }
22323
22480
 
22324
- .pf-c-content ol ol {
22325
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
22326
- --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
22327
- }
22481
+ .pf-c-tabs.pf-m-inset-lg-on-xl {
22482
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22483
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22484
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22485
+ }
22328
22486
 
22329
- .pf-c-content ul {
22330
- padding-left: var(--pf-c-content--ul--PaddingLeft);
22331
- margin-left: var(--pf-c-content--ul--MarginLeft);
22332
- list-style: var(--pf-c-content--ul--ListStyle);
22333
- }
22487
+ .pf-c-tabs.pf-m-inset-xl-on-xl {
22488
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22489
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22490
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22491
+ }
22334
22492
 
22335
- .pf-c-content ul ul {
22336
- margin-top: var(--pf-c-content--ul--nested--MarginTop);
22337
- --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
22493
+ .pf-c-tabs.pf-m-inset-2xl-on-xl {
22494
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22495
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22496
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22497
+ }
22338
22498
  }
22499
+ @media (min-width: 1450px) {
22500
+ .pf-c-tabs.pf-m-inset-none-on-2xl {
22501
+ --pf-c-tabs--inset: 0;
22502
+ --pf-c-tabs--m-vertical--inset: 0;
22503
+ --pf-c-tabs--m-vertical--m-box--inset: 0;
22504
+ }
22339
22505
 
22340
- .pf-c-content ul ol {
22341
- margin-top: var(--pf-c-content--ol--nested--MarginTop);
22342
- --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
22343
- }
22506
+ .pf-c-tabs.pf-m-inset-sm-on-2xl {
22507
+ --pf-c-tabs--inset: var(--pf-global--spacer--sm);
22508
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm);
22509
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm);
22510
+ }
22344
22511
 
22345
- .pf-c-content dl {
22346
- display: grid;
22347
- grid-template-columns: 1fr;
22348
- }
22512
+ .pf-c-tabs.pf-m-inset-md-on-2xl {
22513
+ --pf-c-tabs--inset: var(--pf-global--spacer--md);
22514
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md);
22515
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md);
22516
+ }
22349
22517
 
22350
- @media screen and (min-width: 576px) {
22351
- .pf-c-content dl {
22352
- grid-template: auto/auto 1fr;
22353
- grid-column-gap: var(--pf-c-content--dl--ColumnGap);
22354
- grid-row-gap: var(--pf-c-content--dl--RowGap);
22518
+ .pf-c-tabs.pf-m-inset-lg-on-2xl {
22519
+ --pf-c-tabs--inset: var(--pf-global--spacer--lg);
22520
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg);
22521
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg);
22355
22522
  }
22356
- }
22357
- .pf-c-content dt {
22358
- font-weight: var(--pf-c-content--dt--FontWeight);
22359
- }
22360
22523
 
22361
- .pf-c-content dt:not(:first-child) {
22362
- margin-top: var(--pf-c-content--dt--MarginTop);
22363
- }
22524
+ .pf-c-tabs.pf-m-inset-xl-on-2xl {
22525
+ --pf-c-tabs--inset: var(--pf-global--spacer--xl);
22526
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl);
22527
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl);
22528
+ }
22364
22529
 
22365
- @media screen and (min-width: 576px) {
22366
- .pf-c-content dt:not(:first-child) {
22367
- --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
22530
+ .pf-c-tabs.pf-m-inset-2xl-on-2xl {
22531
+ --pf-c-tabs--inset: var(--pf-global--spacer--2xl);
22532
+ --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl);
22533
+ --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl);
22368
22534
  }
22369
22535
  }
22370
- @media screen and (min-width: 576px) {
22371
- .pf-c-content dt {
22372
- grid-column: 1;
22373
- }
22536
+ .pf-c-tab-content {
22537
+ --pf-c-tab-content__body--PaddingTop: 0;
22538
+ --pf-c-tab-content__body--PaddingRight: 0;
22539
+ --pf-c-tab-content__body--PaddingBottom: 0;
22540
+ --pf-c-tab-content__body--PaddingLeft: 0;
22541
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
22542
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
22543
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
22544
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
22545
+ --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
22546
+ --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
22547
+ --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
22548
+ --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
22549
+ --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
22374
22550
  }
22375
- @media screen and (min-width: 576px) {
22376
- .pf-c-content dd {
22377
- grid-column: 2;
22551
+
22552
+ @media screen and (min-width: 1200px) {
22553
+ .pf-c-tab-content {
22554
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
22555
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
22556
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
22557
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
22378
22558
  }
22379
22559
  }
22380
- .pf-m-overpass-font .pf-c-content {
22381
- --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
22382
- --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
22383
- --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
22384
- --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
22560
+ .pf-c-tab-content.pf-m-light-300 {
22561
+ background-color: var(--pf-c-tab-content--m-light-300);
22385
22562
  }
22386
22563
 
22387
- .pf-m-overpass-font .pf-c-content blockquote {
22388
- font-weight: var(--pf-global--FontWeight--light);
22564
+ .pf-c-tab-content__body {
22565
+ padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
22566
+ }
22567
+
22568
+ .pf-c-tab-content__body.pf-m-padding {
22569
+ --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
22570
+ --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
22571
+ --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
22572
+ --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
22389
22573
  }
22390
22574
 
22391
22575
  .pf-c-tile {
@@ -24588,6 +24772,69 @@ label.pf-c-radio, .pf-c-radio__label,
24588
24772
  --pf-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-c-tree-view__node--PaddingLeft) - var(--pf-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
24589
24773
  }
24590
24774
 
24775
+ .pf-c-draggable {
24776
+ --pf-c-draggable--Cursor: auto;
24777
+ --pf-c-draggable--m-dragging--Cursor: grabbing;
24778
+ --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
24779
+ --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
24780
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
24781
+ --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
24782
+ --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
24783
+ cursor: var(--pf-c-draggable--Cursor);
24784
+ }
24785
+
24786
+ .pf-c-draggable.pf-m-dragging {
24787
+ --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
24788
+ position: relative;
24789
+ background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
24790
+ box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
24791
+ }
24792
+
24793
+ .pf-c-draggable.pf-m-dragging::after {
24794
+ position: absolute;
24795
+ top: 0;
24796
+ right: 0;
24797
+ bottom: 0;
24798
+ left: 0;
24799
+ content: "";
24800
+ border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
24801
+ }
24802
+
24803
+ .pf-c-draggable.pf-m-drag-outside {
24804
+ --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
24805
+ --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
24806
+ }
24807
+
24808
+ .pf-c-droppable {
24809
+ --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
24810
+ --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
24811
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
24812
+ --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
24813
+ }
24814
+
24815
+ .pf-c-droppable.pf-m-dragging {
24816
+ position: relative;
24817
+ }
24818
+
24819
+ .pf-c-droppable.pf-m-dragging::after {
24820
+ position: absolute;
24821
+ top: 0;
24822
+ right: 0;
24823
+ bottom: 0;
24824
+ left: 0;
24825
+ pointer-events: none;
24826
+ content: "";
24827
+ }
24828
+
24829
+ .pf-c-droppable::after {
24830
+ background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
24831
+ border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
24832
+ }
24833
+
24834
+ .pf-c-droppable.pf-m-drag-outside {
24835
+ --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
24836
+ }
24837
+
24591
24838
  .pf-c-wizard__header {
24592
24839
  --pf-global--Color--100: var(--pf-global--Color--light-100);
24593
24840
  --pf-global--Color--200: var(--pf-global--Color--light-200);
@@ -25129,69 +25376,6 @@ label.pf-c-radio, .pf-c-radio__label,
25129
25376
  margin-left: var(--pf-c-wizard__footer-cancel--MarginLeft);
25130
25377
  }
25131
25378
 
25132
- .pf-c-draggable {
25133
- --pf-c-draggable--Cursor: auto;
25134
- --pf-c-draggable--m-dragging--Cursor: grabbing;
25135
- --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
25136
- --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
25137
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
25138
- --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
25139
- --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
25140
- cursor: var(--pf-c-draggable--Cursor);
25141
- }
25142
-
25143
- .pf-c-draggable.pf-m-dragging {
25144
- --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
25145
- position: relative;
25146
- background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
25147
- box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
25148
- }
25149
-
25150
- .pf-c-draggable.pf-m-dragging::after {
25151
- position: absolute;
25152
- top: 0;
25153
- right: 0;
25154
- bottom: 0;
25155
- left: 0;
25156
- content: "";
25157
- border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
25158
- }
25159
-
25160
- .pf-c-draggable.pf-m-drag-outside {
25161
- --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
25162
- --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
25163
- }
25164
-
25165
- .pf-c-droppable {
25166
- --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
25167
- --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
25168
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
25169
- --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
25170
- }
25171
-
25172
- .pf-c-droppable.pf-m-dragging {
25173
- position: relative;
25174
- }
25175
-
25176
- .pf-c-droppable.pf-m-dragging::after {
25177
- position: absolute;
25178
- top: 0;
25179
- right: 0;
25180
- bottom: 0;
25181
- left: 0;
25182
- pointer-events: none;
25183
- content: "";
25184
- }
25185
-
25186
- .pf-c-droppable::after {
25187
- background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
25188
- border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
25189
- }
25190
-
25191
- .pf-c-droppable.pf-m-drag-outside {
25192
- --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
25193
- }
25194
-
25195
25379
  .pf-c-text-input-group {
25196
25380
  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
25197
25381
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);