@patternfly/react-core 4.248.0 → 4.249.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/Icon/Icon.d.ts +25 -0
  3. package/dist/esm/components/Icon/Icon.d.ts.map +1 -0
  4. package/dist/esm/components/Icon/Icon.js +14 -0
  5. package/dist/esm/components/Icon/Icon.js.map +1 -0
  6. package/dist/esm/components/Icon/index.d.ts +2 -0
  7. package/dist/esm/components/Icon/index.d.ts.map +1 -0
  8. package/dist/esm/components/Icon/index.js +2 -0
  9. package/dist/esm/components/Icon/index.js.map +1 -0
  10. package/dist/esm/components/index.d.ts +1 -0
  11. package/dist/esm/components/index.d.ts.map +1 -1
  12. package/dist/esm/components/index.js +1 -0
  13. package/dist/esm/components/index.js.map +1 -1
  14. package/dist/js/components/Icon/Icon.d.ts +25 -0
  15. package/dist/js/components/Icon/Icon.d.ts.map +1 -0
  16. package/dist/js/components/Icon/Icon.js +18 -0
  17. package/dist/js/components/Icon/Icon.js.map +1 -0
  18. package/dist/js/components/Icon/index.d.ts +2 -0
  19. package/dist/js/components/Icon/index.d.ts.map +1 -0
  20. package/dist/js/components/Icon/index.js +5 -0
  21. package/dist/js/components/Icon/index.js.map +1 -0
  22. package/dist/js/components/index.d.ts +1 -0
  23. package/dist/js/components/index.d.ts.map +1 -1
  24. package/dist/js/components/index.js +1 -0
  25. package/dist/js/components/index.js.map +1 -1
  26. package/dist/umd/react-core.min.css +865 -728
  27. package/dist/umd/react-core.min.js +1 -1
  28. package/package.json +2 -2
  29. package/src/components/Icon/Icon.tsx +66 -0
  30. package/src/components/Icon/__tests__/Icon.test.tsx +196 -0
  31. package/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap +82 -0
  32. package/src/components/Icon/examples/Icon.md +61 -0
  33. package/src/components/Icon/examples/IconBasic.tsx +23 -0
  34. package/src/components/Icon/examples/IconContentSizes.tsx +20 -0
  35. package/src/components/Icon/examples/IconCustomProgress.tsx +24 -0
  36. package/src/components/Icon/examples/IconInline.tsx +62 -0
  37. package/src/components/Icon/examples/IconProgress.tsx +24 -0
  38. package/src/components/Icon/examples/IconSizes.tsx +20 -0
  39. package/src/components/Icon/examples/IconStatus.tsx +27 -0
  40. package/src/components/Icon/index.ts +1 -0
  41. package/src/components/index.ts +1 -0
@@ -4,6 +4,23 @@
4
4
  pointer-events: none;
5
5
  }
6
6
 
7
+ .pf-c-backdrop {
8
+ --pf-c-backdrop--Position: fixed;
9
+ --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
10
+ --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
11
+ position: var(--pf-c-backdrop--Position);
12
+ top: 0;
13
+ left: 0;
14
+ z-index: var(--pf-c-backdrop--ZIndex);
15
+ width: 100%;
16
+ height: 100%;
17
+ background-color: var(--pf-c-backdrop--BackgroundColor);
18
+ }
19
+
20
+ .pf-c-backdrop__open {
21
+ overflow: hidden;
22
+ }
23
+
7
24
  .pf-c-accordion {
8
25
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
9
26
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -249,23 +266,6 @@
249
266
  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
250
267
  }
251
268
 
252
- .pf-c-backdrop {
253
- --pf-c-backdrop--Position: fixed;
254
- --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
255
- --pf-c-backdrop--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
256
- position: var(--pf-c-backdrop--Position);
257
- top: 0;
258
- left: 0;
259
- z-index: var(--pf-c-backdrop--ZIndex);
260
- width: 100%;
261
- height: 100%;
262
- background-color: var(--pf-c-backdrop--BackgroundColor);
263
- }
264
-
265
- .pf-c-backdrop__open {
266
- overflow: hidden;
267
- }
268
-
269
269
  .pf-c-action-list {
270
270
  --pf-c-action-list--m-icon--spacer: 0;
271
271
  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
@@ -1634,6 +1634,45 @@ textarea.pf-c-form-control {
1634
1634
  display: block;
1635
1635
  }
1636
1636
 
1637
+ .pf-c-badge {
1638
+ --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
1639
+ --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
1640
+ --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
1641
+ --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
1642
+ --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
1643
+ --pf-c-badge--Color: var(--pf-global--Color--dark-100);
1644
+ --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
1645
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
1646
+ --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
1647
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
1648
+ --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
1649
+ display: inline-block;
1650
+ min-width: var(--pf-c-badge--MinWidth);
1651
+ padding-right: var(--pf-c-badge--PaddingRight);
1652
+ padding-left: var(--pf-c-badge--PaddingLeft);
1653
+ font-size: var(--pf-c-badge--FontSize);
1654
+ font-weight: var(--pf-c-badge--FontWeight);
1655
+ color: var(--pf-c-badge--Color);
1656
+ text-align: center;
1657
+ background-color: var(--pf-c-badge--BackgroundColor);
1658
+ border-radius: var(--pf-c-badge--BorderRadius);
1659
+ }
1660
+
1661
+ .pf-c-badge.pf-m-read {
1662
+ --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
1663
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
1664
+ }
1665
+
1666
+ .pf-c-badge.pf-m-unread {
1667
+ --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
1668
+ --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
1669
+ }
1670
+
1671
+ :where(.pf-theme-dark) .pf-c-badge {
1672
+ --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
1673
+ --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
1674
+ }
1675
+
1637
1676
  .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
1638
1677
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
1639
1678
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -2603,45 +2642,6 @@ button.pf-c-breadcrumb__link {
2603
2642
  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
2604
2643
  }
2605
2644
 
2606
- .pf-c-badge {
2607
- --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
2608
- --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
2609
- --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
2610
- --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
2611
- --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
2612
- --pf-c-badge--Color: var(--pf-global--Color--dark-100);
2613
- --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
2614
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
2615
- --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
2616
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
2617
- --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
2618
- display: inline-block;
2619
- min-width: var(--pf-c-badge--MinWidth);
2620
- padding-right: var(--pf-c-badge--PaddingRight);
2621
- padding-left: var(--pf-c-badge--PaddingLeft);
2622
- font-size: var(--pf-c-badge--FontSize);
2623
- font-weight: var(--pf-c-badge--FontWeight);
2624
- color: var(--pf-c-badge--Color);
2625
- text-align: center;
2626
- background-color: var(--pf-c-badge--BackgroundColor);
2627
- border-radius: var(--pf-c-badge--BorderRadius);
2628
- }
2629
-
2630
- .pf-c-badge.pf-m-read {
2631
- --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
2632
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
2633
- }
2634
-
2635
- .pf-c-badge.pf-m-unread {
2636
- --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
2637
- --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
2638
- }
2639
-
2640
- :where(.pf-theme-dark) .pf-c-badge {
2641
- --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
2642
- --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
2643
- }
2644
-
2645
2645
  .pf-c-calendar-month {
2646
2646
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
2647
2647
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -9425,6 +9425,143 @@ label.pf-c-check, .pf-c-check__label,
9425
9425
  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
9426
9426
  }
9427
9427
 
9428
+ .pf-c-icon {
9429
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
9430
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
9431
+ --pf-c-icon--m-inline--Width: 1em;
9432
+ --pf-c-icon--m-inline--Height: 1em;
9433
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
9434
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
9435
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
9436
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
9437
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
9438
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
9439
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
9440
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
9441
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
9442
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
9443
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
9444
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
9445
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
9446
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
9447
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
9448
+ --pf-c-icon--m-inline__content--FontSize: 1em;
9449
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
9450
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
9451
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
9452
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
9453
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
9454
+ position: relative;
9455
+ display: inline-flex;
9456
+ align-items: center;
9457
+ justify-content: center;
9458
+ width: var(--pf-c-icon--Width);
9459
+ height: var(--pf-c-icon--Height);
9460
+ }
9461
+
9462
+ .pf-c-icon.pf-m-inline {
9463
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
9464
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
9465
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
9466
+ --pf-c-icon__content--Color: currentcolor;
9467
+ line-height: 1;
9468
+ }
9469
+
9470
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
9471
+ --pf-c-spinner--diameter: 1em;
9472
+ }
9473
+
9474
+ .pf-c-icon.pf-m-sm {
9475
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
9476
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
9477
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9478
+ }
9479
+
9480
+ .pf-c-icon.pf-m-md {
9481
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
9482
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
9483
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9484
+ }
9485
+
9486
+ .pf-c-icon.pf-m-lg {
9487
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
9488
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
9489
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9490
+ }
9491
+
9492
+ .pf-c-icon.pf-m-xl {
9493
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
9494
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
9495
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9496
+ }
9497
+
9498
+ .pf-c-icon.pf-m-in-progress {
9499
+ --pf-c-icon__content--Opacity: 0;
9500
+ --pf-c-icon__progress--Opacity: 1;
9501
+ }
9502
+
9503
+ .pf-c-icon__content,
9504
+ .pf-c-icon__progress {
9505
+ font-size: var(--pf-c-icon__content--FontSize);
9506
+ }
9507
+
9508
+ .pf-c-icon__content svg,
9509
+ .pf-c-icon__progress svg {
9510
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
9511
+ }
9512
+
9513
+ .pf-c-icon__content.pf-m-sm,
9514
+ .pf-c-icon__progress.pf-m-sm {
9515
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
9516
+ }
9517
+
9518
+ .pf-c-icon__content.pf-m-md,
9519
+ .pf-c-icon__progress.pf-m-md {
9520
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
9521
+ }
9522
+
9523
+ .pf-c-icon__content.pf-m-lg,
9524
+ .pf-c-icon__progress.pf-m-lg {
9525
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
9526
+ }
9527
+
9528
+ .pf-c-icon__content.pf-m-xl,
9529
+ .pf-c-icon__progress.pf-m-xl {
9530
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
9531
+ }
9532
+
9533
+ .pf-c-icon__content {
9534
+ color: var(--pf-c-icon__content--Color);
9535
+ opacity: var(--pf-c-icon__content--Opacity, 1);
9536
+ }
9537
+
9538
+ .pf-c-icon__content.pf-m-danger {
9539
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
9540
+ }
9541
+
9542
+ .pf-c-icon__content.pf-m-warning {
9543
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
9544
+ }
9545
+
9546
+ .pf-c-icon__content.pf-m-success {
9547
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
9548
+ }
9549
+
9550
+ .pf-c-icon__content.pf-m-info {
9551
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
9552
+ }
9553
+
9554
+ .pf-c-icon__content.pf-m-default {
9555
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
9556
+ }
9557
+
9558
+ .pf-c-icon__progress {
9559
+ position: absolute;
9560
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
9561
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
9562
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
9563
+ }
9564
+
9428
9565
  .pf-c-input-group {
9429
9566
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
9430
9567
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -10868,7 +11005,17 @@ ul.pf-c-list {
10868
11005
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10869
11006
  }
10870
11007
 
10871
- .pf-c-login__footer, .pf-c-login__header {
11008
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11009
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11010
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11011
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11012
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11013
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11014
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11015
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11016
+ }
11017
+
11018
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
10872
11019
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10873
11020
  --pf-global--Color--200: var(--pf-global--Color--light-200);
10874
11021
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -10878,367 +11025,11 @@ ul.pf-c-list {
10878
11025
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
10879
11026
  }
10880
11027
 
10881
- .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11028
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
10882
11029
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
10883
11030
  }
10884
11031
 
10885
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
10886
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
10887
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
10888
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
10889
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
10890
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
10891
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
10892
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
10893
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
10894
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
10895
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
10896
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
10897
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
10898
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
10899
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
10900
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
10901
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
10902
- }
10903
-
10904
- .pf-c-login {
10905
- --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
10906
- --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
10907
- --pf-c-login--xl--BackgroundImage: none;
10908
- --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
10909
- --pf-c-login__container--MaxWidth: 31.25rem;
10910
- --pf-c-login__container--xl--MaxWidth: none;
10911
- --pf-c-login__container--PaddingLeft: 6.125rem;
10912
- --pf-c-login__container--PaddingRight: 6.125rem;
10913
- --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10914
- --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
10915
- --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
10916
- --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
10917
- --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
10918
- --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
10919
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
10920
- --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
10921
- --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
10922
- --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
10923
- --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
10924
- --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
10925
- --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
10926
- --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
10927
- --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
10928
- --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
10929
- --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
10930
- --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
10931
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
10932
- --pf-c-login__main-header-desc--md--MarginBottom: 0;
10933
- --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
10934
- --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
10935
- --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
10936
- --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
10937
- --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
10938
- --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
10939
- --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
10940
- --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
10941
- --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
10942
- --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
10943
- --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
10944
- --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
10945
- --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
10946
- --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
10947
- --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
10948
- --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
10949
- --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
10950
- --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
10951
- --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
10952
- --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
10953
- --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
10954
- --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
10955
- --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
10956
- --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
10957
- --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
10958
- --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
10959
- --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
10960
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
10961
- --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
10962
- display: flex;
10963
- justify-content: center;
10964
- min-height: 100vh;
10965
- padding-top: var(--pf-c-login--PaddingTop);
10966
- padding-bottom: var(--pf-c-login--PaddingBottom);
10967
- }
10968
-
10969
- @media (min-width: 1200px) {
10970
- .pf-c-login {
10971
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
10972
- }
10973
- }
10974
- @media (min-width: 576px) {
10975
- .pf-c-login {
10976
- --pf-c-login__header--PaddingRight: 0;
10977
- --pf-c-login__header--PaddingLeft: 0;
10978
- }
10979
- }
10980
- @media (min-width: 1200px) {
10981
- .pf-c-login {
10982
- --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
10983
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
10984
- }
10985
- }
10986
- @media (min-width: 1200px) {
10987
- .pf-c-login {
10988
- --pf-c-login__main--MarginBottom: 0;
10989
- }
10990
- }
10991
- @media (min-width: 768px) {
10992
- .pf-c-login {
10993
- --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
10994
- --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
10995
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
10996
- }
10997
- }
10998
- @media (min-width: 768px) {
10999
- .pf-c-login {
11000
- --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11001
- --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11002
- }
11003
- }
11004
- @media (min-width: 576px) {
11005
- .pf-c-login {
11006
- --pf-c-login__footer--PaddingRight: 0;
11007
- --pf-c-login__footer--PaddingLeft: 0;
11008
- }
11009
- }
11010
- @media (min-width: 1200px) {
11011
- .pf-c-login {
11012
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11013
- }
11014
- }
11015
- @media (min-width: 1200px) {
11016
- .pf-c-login {
11017
- background-image: var(--pf-c-login--xl--BackgroundImage);
11018
- }
11019
- }
11020
- @media (min-width: 576px) {
11021
- .pf-c-login {
11022
- align-items: center;
11023
- }
11024
- }
11025
- .pf-c-login__container {
11026
- width: 100%;
11027
- max-width: var(--pf-c-login__container--MaxWidth);
11028
- }
11029
-
11030
- @media (min-width: 1200px) {
11031
- .pf-c-login__container {
11032
- display: grid;
11033
- justify-content: center;
11034
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11035
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11036
- grid-template-areas: "main header" "main footer" "main .";
11037
- padding-right: var(--pf-c-login__container--PaddingRight);
11038
- padding-left: var(--pf-c-login__container--PaddingLeft);
11039
- }
11040
- }
11041
- .pf-c-login__header {
11042
- color: var(--pf-global--Color--100);
11043
- grid-area: header;
11044
- padding-right: var(--pf-c-login__header--PaddingRight);
11045
- padding-left: var(--pf-c-login__header--PaddingLeft);
11046
- }
11047
-
11048
- @media (min-width: 1200px) {
11049
- .pf-c-login__header {
11050
- margin-top: var(--pf-c-login__header--xl--MarginTop);
11051
- }
11052
- }
11053
- .pf-c-login__header .pf-c-brand {
11054
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11055
- }
11056
-
11057
- .pf-c-login__main {
11058
- align-self: start;
11059
- margin-bottom: var(--pf-c-login__main--MarginBottom);
11060
- background-color: var(--pf-c-login__main--BackgroundColor);
11061
- grid-area: main;
11062
- }
11063
-
11064
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11065
- padding-top: var(--pf-c-login__main-header--PaddingTop);
11066
- }
11067
-
11068
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11069
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11070
- }
11071
-
11072
- .pf-c-login__main-header {
11073
- display: grid;
11074
- grid-template-columns: 100%;
11075
- column-gap: var(--pf-c-login__main-header--ColumnGap);
11076
- row-gap: var(--pf-c-login__main-header--RowGap);
11077
- align-items: center;
11078
- padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
11079
- }
11080
-
11081
- @media (min-width: 768px) {
11082
- .pf-c-login__main-header {
11083
- grid-template-columns: 1fr auto;
11084
- }
11085
- }
11086
- .pf-c-login__main-header-utilities,
11087
- .pf-c-login__main-header .pf-c-dropdown {
11088
- grid-column: auto;
11089
- grid-row: auto;
11090
- }
11091
-
11092
- @media (min-width: 768px) {
11093
- .pf-c-login__main-header-utilities,
11094
- .pf-c-login__main-header .pf-c-dropdown {
11095
- grid-column: 2/3;
11096
- grid-row: 1;
11097
- }
11098
- }
11099
- .pf-c-login__main-header-utilities .pf-c-dropdown {
11100
- grid-column: auto;
11101
- grid-row: auto;
11102
- }
11103
-
11104
- .pf-c-login__main-header-desc {
11105
- margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
11106
- font-size: var(--pf-c-login__main-header-desc--FontSize);
11107
- grid-column: 1/-1;
11108
- }
11109
-
11110
- .pf-c-login__main-body {
11111
- padding-right: var(--pf-c-login__main-body--PaddingRight);
11112
- padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
11113
- padding-left: var(--pf-c-login__main-body--PaddingLeft);
11114
- }
11115
-
11116
- .pf-c-login__main-footer {
11117
- display: flex;
11118
- flex-wrap: wrap;
11119
- }
11120
-
11121
- .pf-c-login__main-footer .pf-c-title {
11122
- margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
11123
- text-align: center;
11124
- }
11125
-
11126
- .pf-c-login__main-footer > * {
11127
- flex-basis: 100%;
11128
- }
11129
-
11130
- .pf-c-login__main-footer-links {
11131
- display: flex;
11132
- flex-wrap: wrap;
11133
- justify-content: center;
11134
- padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
11135
- }
11136
-
11137
- .pf-c-login__main-footer-links-item {
11138
- padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
11139
- padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
11140
- margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
11141
- }
11142
-
11143
- .pf-c-login__main-footer-links-item-link svg {
11144
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
11145
- width: 100%;
11146
- max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
11147
- height: 100%;
11148
- max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
11149
- }
11150
-
11151
- .pf-c-login__main-footer-links-item-link:hover svg {
11152
- fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
11153
- }
11154
-
11155
- .pf-c-login__main-footer-band {
11156
- padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
11157
- text-align: center;
11158
- background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
11159
- }
11160
-
11161
- .pf-c-login__main-footer-band > * + * {
11162
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11163
- }
11164
-
11165
- .pf-c-login__footer {
11166
- color: var(--pf-global--Color--100);
11167
- grid-area: footer;
11168
- padding-right: var(--pf-c-login__footer--PaddingRight);
11169
- padding-left: var(--pf-c-login__footer--PaddingLeft);
11170
- }
11171
-
11172
- .pf-c-login__footer .pf-c-list a {
11173
- color: unset;
11174
- }
11175
-
11176
- .pf-c-login__footer .pf-c-list:not(:only-child) {
11177
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
11178
- }
11179
-
11180
- :where(.pf-theme-dark) .pf-c-login__header,
11181
- :where(.pf-theme-dark) .pf-c-login__footer {
11182
- --pf-global--Color--100: #e0e0e0;
11183
- --pf-global--Color--200: #aaabac;
11184
- --pf-global--BorderColor--100: #444548;
11185
- --pf-global--primary-color--100: #1fa7f8;
11186
- --pf-global--link--Color: #1fa7f8;
11187
- --pf-global--link--Color--hover: #73bcf7;
11188
- --pf-global--BackgroundColor--100: #1b1d21;
11189
- }
11190
-
11191
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
11192
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11193
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11194
- }
11195
-
11196
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
11197
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11198
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11199
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11200
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11201
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11202
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11203
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11204
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11205
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11206
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11207
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11208
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11209
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11210
- }
11211
-
11212
- :where(.pf-theme-dark) .pf-c-login__header,
11213
- :where(.pf-theme-dark) .pf-c-login__footer {
11214
- color: var(--pf-global--Color--100);
11215
- }
11216
-
11217
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11218
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11219
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11220
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11221
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11222
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11223
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11224
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11225
- }
11226
-
11227
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11228
- --pf-global--Color--100: var(--pf-global--Color--light-100);
11229
- --pf-global--Color--200: var(--pf-global--Color--light-200);
11230
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11231
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11232
- --pf-global--link--Color: var(--pf-global--link--Color--light);
11233
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11234
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11235
- }
11236
-
11237
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11238
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11239
- }
11240
-
11241
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11032
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11242
11033
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11243
11034
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11244
11035
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -11579,32 +11370,296 @@ ul.pf-c-list {
11579
11370
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11580
11371
  }
11581
11372
 
11582
- .pf-c-masthead.pf-m-inset-none {
11583
- --pf-c-masthead--inset: 0;
11584
- }
11373
+ .pf-c-masthead.pf-m-inset-none {
11374
+ --pf-c-masthead--inset: 0;
11375
+ }
11376
+
11377
+ .pf-c-masthead.pf-m-inset-sm {
11378
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11379
+ }
11380
+
11381
+ .pf-c-masthead.pf-m-inset-md {
11382
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11383
+ }
11384
+
11385
+ .pf-c-masthead.pf-m-inset-lg {
11386
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11387
+ }
11388
+
11389
+ .pf-c-masthead.pf-m-inset-xl {
11390
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11391
+ }
11392
+
11393
+ .pf-c-masthead.pf-m-inset-2xl {
11394
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11395
+ }
11396
+
11397
+ @media (min-width: 576px) {
11398
+ .pf-c-masthead.pf-m-display-stack-on-sm {
11399
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11400
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11401
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11402
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11403
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11404
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11405
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11406
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11407
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11408
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11409
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11410
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11411
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11412
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11413
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11414
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11415
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11416
+ }
11417
+
11418
+ .pf-c-masthead.pf-m-display-inline-on-sm {
11419
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11420
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11421
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11422
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11423
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11424
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11425
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11426
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11427
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11428
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11429
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11430
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11431
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11432
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11433
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11434
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11435
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11436
+ }
11437
+ }
11438
+ @media (min-width: 576px) {
11439
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11440
+ --pf-c-masthead--inset: 0;
11441
+ }
11442
+
11443
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
11444
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11445
+ }
11446
+
11447
+ .pf-c-masthead.pf-m-inset-md-on-sm {
11448
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11449
+ }
11450
+
11451
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
11452
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11453
+ }
11454
+
11455
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
11456
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11457
+ }
11458
+
11459
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
11460
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11461
+ }
11462
+ }
11463
+ @media (min-width: 768px) {
11464
+ .pf-c-masthead.pf-m-display-stack-on-md {
11465
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11466
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11467
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11468
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11469
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11470
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11471
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11472
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11473
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11474
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11475
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11476
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11477
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11478
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11479
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11480
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11481
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11482
+ }
11483
+
11484
+ .pf-c-masthead.pf-m-display-inline-on-md {
11485
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11486
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11487
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11488
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11489
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11490
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11491
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11492
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11493
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11494
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11495
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11496
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11497
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11498
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11499
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11500
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11501
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11502
+ }
11503
+ }
11504
+ @media (min-width: 768px) {
11505
+ .pf-c-masthead.pf-m-inset-none-on-md {
11506
+ --pf-c-masthead--inset: 0;
11507
+ }
11508
+
11509
+ .pf-c-masthead.pf-m-inset-sm-on-md {
11510
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11511
+ }
11512
+
11513
+ .pf-c-masthead.pf-m-inset-md-on-md {
11514
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11515
+ }
11516
+
11517
+ .pf-c-masthead.pf-m-inset-lg-on-md {
11518
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11519
+ }
11520
+
11521
+ .pf-c-masthead.pf-m-inset-xl-on-md {
11522
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11523
+ }
11524
+
11525
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
11526
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11527
+ }
11528
+ }
11529
+ @media (min-width: 992px) {
11530
+ .pf-c-masthead.pf-m-display-stack-on-lg {
11531
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11532
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11533
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11534
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11535
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11536
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11537
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11538
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11539
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11540
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11541
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11542
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11543
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11544
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11545
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11546
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11547
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11548
+ }
11549
+
11550
+ .pf-c-masthead.pf-m-display-inline-on-lg {
11551
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11552
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11553
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11554
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11555
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11556
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11557
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11558
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11559
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11560
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11561
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11562
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11563
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11564
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11565
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11566
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11567
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11568
+ }
11569
+ }
11570
+ @media (min-width: 992px) {
11571
+ .pf-c-masthead.pf-m-inset-none-on-lg {
11572
+ --pf-c-masthead--inset: 0;
11573
+ }
11574
+
11575
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
11576
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11577
+ }
11578
+
11579
+ .pf-c-masthead.pf-m-inset-md-on-lg {
11580
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11581
+ }
11585
11582
 
11586
- .pf-c-masthead.pf-m-inset-sm {
11587
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11588
- }
11583
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
11584
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11585
+ }
11589
11586
 
11590
- .pf-c-masthead.pf-m-inset-md {
11591
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11592
- }
11587
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
11588
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11589
+ }
11593
11590
 
11594
- .pf-c-masthead.pf-m-inset-lg {
11595
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11591
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
11592
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11593
+ }
11596
11594
  }
11595
+ @media (min-width: 1200px) {
11596
+ .pf-c-masthead.pf-m-display-stack-on-xl {
11597
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11598
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11599
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11600
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11601
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11602
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11603
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11604
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11605
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11606
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11607
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11608
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11609
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11610
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11611
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11612
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11613
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11614
+ }
11597
11615
 
11598
- .pf-c-masthead.pf-m-inset-xl {
11599
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11616
+ .pf-c-masthead.pf-m-display-inline-on-xl {
11617
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11618
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11619
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11620
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11621
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11622
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11623
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11624
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11625
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11626
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11627
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11628
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11629
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11630
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11631
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11632
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11633
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11634
+ }
11600
11635
  }
11636
+ @media (min-width: 1200px) {
11637
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11638
+ --pf-c-masthead--inset: 0;
11639
+ }
11601
11640
 
11602
- .pf-c-masthead.pf-m-inset-2xl {
11603
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11604
- }
11641
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11642
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11643
+ }
11605
11644
 
11606
- @media (min-width: 576px) {
11607
- .pf-c-masthead.pf-m-display-stack-on-sm {
11645
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11646
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11647
+ }
11648
+
11649
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11650
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11651
+ }
11652
+
11653
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
11654
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11655
+ }
11656
+
11657
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
11658
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11659
+ }
11660
+ }
11661
+ @media (min-width: 1450px) {
11662
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
11608
11663
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11609
11664
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11610
11665
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -11624,7 +11679,7 @@ ul.pf-c-list {
11624
11679
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11625
11680
  }
11626
11681
 
11627
- .pf-c-masthead.pf-m-display-inline-on-sm {
11682
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
11628
11683
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11629
11684
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11630
11685
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -11644,296 +11699,380 @@ ul.pf-c-list {
11644
11699
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11645
11700
  }
11646
11701
  }
11647
- @media (min-width: 576px) {
11648
- .pf-c-masthead.pf-m-inset-none-on-sm {
11702
+ @media (min-width: 1450px) {
11703
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
11649
11704
  --pf-c-masthead--inset: 0;
11650
11705
  }
11651
11706
 
11652
- .pf-c-masthead.pf-m-inset-sm-on-sm {
11707
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
11653
11708
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11654
11709
  }
11655
11710
 
11656
- .pf-c-masthead.pf-m-inset-md-on-sm {
11657
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11711
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
11712
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11713
+ }
11714
+
11715
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
11716
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11717
+ }
11718
+
11719
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
11720
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11721
+ }
11722
+
11723
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11724
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11725
+ }
11726
+ }
11727
+ :where(.pf-theme-dark) .pf-c-masthead {
11728
+ --pf-global--Color--100: #e0e0e0;
11729
+ --pf-global--Color--200: #aaabac;
11730
+ --pf-global--BorderColor--100: #444548;
11731
+ --pf-global--primary-color--100: #1fa7f8;
11732
+ --pf-global--link--Color: #1fa7f8;
11733
+ --pf-global--link--Color--hover: #73bcf7;
11734
+ --pf-global--BackgroundColor--100: #1b1d21;
11735
+ }
11736
+
11737
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11738
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11739
+ }
11740
+
11741
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11742
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11743
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11744
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11745
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11746
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11747
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11748
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11749
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11750
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11751
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11752
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11753
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11754
+ }
11755
+
11756
+ :where(.pf-theme-dark) .pf-c-masthead {
11757
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11758
+ color: var(--pf-global--Color--100);
11759
+ }
11760
+
11761
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11762
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11763
+ }
11764
+
11765
+ .pf-c-login__footer, .pf-c-login__header {
11766
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
11767
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
11768
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11769
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11770
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
11771
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11772
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11773
+ }
11774
+
11775
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11776
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11777
+ }
11778
+
11779
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
11780
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11781
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11782
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11783
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11784
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11785
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11786
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11787
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11788
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11789
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11790
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11791
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11792
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11793
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11794
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11795
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11796
+ }
11797
+
11798
+ .pf-c-login {
11799
+ --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
11800
+ --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
11801
+ --pf-c-login--xl--BackgroundImage: none;
11802
+ --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
11803
+ --pf-c-login__container--MaxWidth: 31.25rem;
11804
+ --pf-c-login__container--xl--MaxWidth: none;
11805
+ --pf-c-login__container--PaddingLeft: 6.125rem;
11806
+ --pf-c-login__container--PaddingRight: 6.125rem;
11807
+ --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
11808
+ --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
11809
+ --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
11810
+ --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
11811
+ --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
11812
+ --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
11813
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
11814
+ --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
11815
+ --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11816
+ --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
11817
+ --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
11818
+ --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
11819
+ --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
11820
+ --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
11821
+ --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
11822
+ --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
11823
+ --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
11824
+ --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
11825
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
11826
+ --pf-c-login__main-header-desc--md--MarginBottom: 0;
11827
+ --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
11828
+ --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
11829
+ --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
11830
+ --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
11831
+ --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
11832
+ --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
11833
+ --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
11834
+ --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
11835
+ --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
11836
+ --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
11837
+ --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
11838
+ --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
11839
+ --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
11840
+ --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
11841
+ --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
11842
+ --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
11843
+ --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
11844
+ --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
11845
+ --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
11846
+ --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
11847
+ --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
11848
+ --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
11849
+ --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
11850
+ --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
11851
+ --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
11852
+ --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
11853
+ --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
11854
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
11855
+ --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
11856
+ display: flex;
11857
+ justify-content: center;
11858
+ min-height: 100vh;
11859
+ padding-top: var(--pf-c-login--PaddingTop);
11860
+ padding-bottom: var(--pf-c-login--PaddingBottom);
11861
+ }
11862
+
11863
+ @media (min-width: 1200px) {
11864
+ .pf-c-login {
11865
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
11658
11866
  }
11659
-
11660
- .pf-c-masthead.pf-m-inset-lg-on-sm {
11661
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11867
+ }
11868
+ @media (min-width: 576px) {
11869
+ .pf-c-login {
11870
+ --pf-c-login__header--PaddingRight: 0;
11871
+ --pf-c-login__header--PaddingLeft: 0;
11662
11872
  }
11663
-
11664
- .pf-c-masthead.pf-m-inset-xl-on-sm {
11665
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11873
+ }
11874
+ @media (min-width: 1200px) {
11875
+ .pf-c-login {
11876
+ --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
11877
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
11666
11878
  }
11667
-
11668
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
11669
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11879
+ }
11880
+ @media (min-width: 1200px) {
11881
+ .pf-c-login {
11882
+ --pf-c-login__main--MarginBottom: 0;
11670
11883
  }
11671
11884
  }
11672
11885
  @media (min-width: 768px) {
11673
- .pf-c-masthead.pf-m-display-stack-on-md {
11674
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11675
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11676
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11677
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11678
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11679
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11680
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11681
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11682
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11683
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11684
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11685
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11686
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11687
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11688
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11689
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11690
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11691
- }
11692
-
11693
- .pf-c-masthead.pf-m-display-inline-on-md {
11694
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11695
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11696
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11697
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11698
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11699
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11700
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11701
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11702
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11703
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11704
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11705
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11706
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11707
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11708
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11709
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11710
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11886
+ .pf-c-login {
11887
+ --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
11888
+ --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
11889
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
11711
11890
  }
11712
11891
  }
11713
11892
  @media (min-width: 768px) {
11714
- .pf-c-masthead.pf-m-inset-none-on-md {
11715
- --pf-c-masthead--inset: 0;
11893
+ .pf-c-login {
11894
+ --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
11895
+ --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
11716
11896
  }
11717
-
11718
- .pf-c-masthead.pf-m-inset-sm-on-md {
11719
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11897
+ }
11898
+ @media (min-width: 576px) {
11899
+ .pf-c-login {
11900
+ --pf-c-login__footer--PaddingRight: 0;
11901
+ --pf-c-login__footer--PaddingLeft: 0;
11720
11902
  }
11721
-
11722
- .pf-c-masthead.pf-m-inset-md-on-md {
11723
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11903
+ }
11904
+ @media (min-width: 1200px) {
11905
+ .pf-c-login {
11906
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11724
11907
  }
11725
-
11726
- .pf-c-masthead.pf-m-inset-lg-on-md {
11727
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11908
+ }
11909
+ @media (min-width: 1200px) {
11910
+ .pf-c-login {
11911
+ background-image: var(--pf-c-login--xl--BackgroundImage);
11728
11912
  }
11729
-
11730
- .pf-c-masthead.pf-m-inset-xl-on-md {
11731
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11913
+ }
11914
+ @media (min-width: 576px) {
11915
+ .pf-c-login {
11916
+ align-items: center;
11732
11917
  }
11918
+ }
11919
+ .pf-c-login__container {
11920
+ width: 100%;
11921
+ max-width: var(--pf-c-login__container--MaxWidth);
11922
+ }
11733
11923
 
11734
- .pf-c-masthead.pf-m-inset-2xl-on-md {
11735
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11924
+ @media (min-width: 1200px) {
11925
+ .pf-c-login__container {
11926
+ display: grid;
11927
+ justify-content: center;
11928
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11929
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11930
+ grid-template-areas: "main header" "main footer" "main .";
11931
+ padding-right: var(--pf-c-login__container--PaddingRight);
11932
+ padding-left: var(--pf-c-login__container--PaddingLeft);
11736
11933
  }
11737
11934
  }
11738
- @media (min-width: 992px) {
11739
- .pf-c-masthead.pf-m-display-stack-on-lg {
11740
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11741
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11742
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11743
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11744
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11745
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11746
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11747
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11748
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11749
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11750
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11751
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11752
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11753
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11754
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11755
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11756
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11757
- }
11935
+ .pf-c-login__header {
11936
+ color: var(--pf-global--Color--100);
11937
+ grid-area: header;
11938
+ padding-right: var(--pf-c-login__header--PaddingRight);
11939
+ padding-left: var(--pf-c-login__header--PaddingLeft);
11940
+ }
11758
11941
 
11759
- .pf-c-masthead.pf-m-display-inline-on-lg {
11760
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11761
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11762
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11763
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11764
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11765
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11766
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11767
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11768
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11769
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11770
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11771
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11772
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11773
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11774
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11775
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11776
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11942
+ @media (min-width: 1200px) {
11943
+ .pf-c-login__header {
11944
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
11777
11945
  }
11778
11946
  }
11779
- @media (min-width: 992px) {
11780
- .pf-c-masthead.pf-m-inset-none-on-lg {
11781
- --pf-c-masthead--inset: 0;
11782
- }
11947
+ .pf-c-login__header .pf-c-brand {
11948
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11949
+ }
11783
11950
 
11784
- .pf-c-masthead.pf-m-inset-sm-on-lg {
11785
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11786
- }
11951
+ .pf-c-login__main {
11952
+ align-self: start;
11953
+ margin-bottom: var(--pf-c-login__main--MarginBottom);
11954
+ background-color: var(--pf-c-login__main--BackgroundColor);
11955
+ grid-area: main;
11956
+ }
11787
11957
 
11788
- .pf-c-masthead.pf-m-inset-md-on-lg {
11789
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11790
- }
11958
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11959
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
11960
+ }
11791
11961
 
11792
- .pf-c-masthead.pf-m-inset-lg-on-lg {
11793
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11794
- }
11962
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11963
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11964
+ }
11795
11965
 
11796
- .pf-c-masthead.pf-m-inset-xl-on-lg {
11797
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11798
- }
11966
+ .pf-c-login__main-header {
11967
+ display: grid;
11968
+ grid-template-columns: 100%;
11969
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
11970
+ row-gap: var(--pf-c-login__main-header--RowGap);
11971
+ align-items: center;
11972
+ padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
11973
+ }
11799
11974
 
11800
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
11801
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11975
+ @media (min-width: 768px) {
11976
+ .pf-c-login__main-header {
11977
+ grid-template-columns: 1fr auto;
11802
11978
  }
11803
11979
  }
11804
- @media (min-width: 1200px) {
11805
- .pf-c-masthead.pf-m-display-stack-on-xl {
11806
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11807
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11808
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11809
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11810
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11811
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11812
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11813
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11814
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11815
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11816
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11817
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11818
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11819
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11820
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11821
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11822
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11823
- }
11980
+ .pf-c-login__main-header-utilities,
11981
+ .pf-c-login__main-header .pf-c-dropdown {
11982
+ grid-column: auto;
11983
+ grid-row: auto;
11984
+ }
11824
11985
 
11825
- .pf-c-masthead.pf-m-display-inline-on-xl {
11826
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11827
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11828
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11829
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11830
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11831
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11832
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11833
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11834
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11835
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11836
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11837
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11838
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11839
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11840
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11841
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11842
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11986
+ @media (min-width: 768px) {
11987
+ .pf-c-login__main-header-utilities,
11988
+ .pf-c-login__main-header .pf-c-dropdown {
11989
+ grid-column: 2/3;
11990
+ grid-row: 1;
11843
11991
  }
11844
11992
  }
11845
- @media (min-width: 1200px) {
11846
- .pf-c-masthead.pf-m-inset-none-on-xl {
11847
- --pf-c-masthead--inset: 0;
11848
- }
11993
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
11994
+ grid-column: auto;
11995
+ grid-row: auto;
11996
+ }
11849
11997
 
11850
- .pf-c-masthead.pf-m-inset-sm-on-xl {
11851
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11852
- }
11998
+ .pf-c-login__main-header-desc {
11999
+ margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
12000
+ font-size: var(--pf-c-login__main-header-desc--FontSize);
12001
+ grid-column: 1/-1;
12002
+ }
11853
12003
 
11854
- .pf-c-masthead.pf-m-inset-md-on-xl {
11855
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11856
- }
12004
+ .pf-c-login__main-body {
12005
+ padding-right: var(--pf-c-login__main-body--PaddingRight);
12006
+ padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
12007
+ padding-left: var(--pf-c-login__main-body--PaddingLeft);
12008
+ }
11857
12009
 
11858
- .pf-c-masthead.pf-m-inset-lg-on-xl {
11859
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11860
- }
12010
+ .pf-c-login__main-footer {
12011
+ display: flex;
12012
+ flex-wrap: wrap;
12013
+ }
11861
12014
 
11862
- .pf-c-masthead.pf-m-inset-xl-on-xl {
11863
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11864
- }
12015
+ .pf-c-login__main-footer .pf-c-title {
12016
+ margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
12017
+ text-align: center;
12018
+ }
11865
12019
 
11866
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
11867
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11868
- }
12020
+ .pf-c-login__main-footer > * {
12021
+ flex-basis: 100%;
11869
12022
  }
11870
- @media (min-width: 1450px) {
11871
- .pf-c-masthead.pf-m-display-stack-on-2xl {
11872
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11873
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11874
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11875
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11876
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11877
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11878
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11879
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11880
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11881
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11882
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11883
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11884
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11885
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11886
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11887
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11888
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11889
- }
11890
12023
 
11891
- .pf-c-masthead.pf-m-display-inline-on-2xl {
11892
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11893
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11894
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11895
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11896
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11897
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11898
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11899
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11900
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11901
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11902
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11903
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11904
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11905
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11906
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11907
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11908
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11909
- }
12024
+ .pf-c-login__main-footer-links {
12025
+ display: flex;
12026
+ flex-wrap: wrap;
12027
+ justify-content: center;
12028
+ padding: var(--pf-c-login__main-footer-links--PaddingTop) var(--pf-c-login__main-footer-links--PaddingRight) var(--pf-c-login__main-footer-links--PaddingBottom) var(--pf-c-login__main-footer-links--PaddingLeft);
11910
12029
  }
11911
- @media (min-width: 1450px) {
11912
- .pf-c-masthead.pf-m-inset-none-on-2xl {
11913
- --pf-c-masthead--inset: 0;
11914
- }
11915
12030
 
11916
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
11917
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11918
- }
12031
+ .pf-c-login__main-footer-links-item {
12032
+ padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
12033
+ padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
12034
+ margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
12035
+ }
11919
12036
 
11920
- .pf-c-masthead.pf-m-inset-md-on-2xl {
11921
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11922
- }
12037
+ .pf-c-login__main-footer-links-item-link svg {
12038
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
12039
+ width: 100%;
12040
+ max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
12041
+ height: 100%;
12042
+ max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
12043
+ }
11923
12044
 
11924
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
11925
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11926
- }
12045
+ .pf-c-login__main-footer-links-item-link:hover svg {
12046
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
12047
+ }
11927
12048
 
11928
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
11929
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11930
- }
12049
+ .pf-c-login__main-footer-band {
12050
+ padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
12051
+ text-align: center;
12052
+ background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
12053
+ }
11931
12054
 
11932
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11933
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11934
- }
12055
+ .pf-c-login__main-footer-band > * + * {
12056
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11935
12057
  }
11936
- :where(.pf-theme-dark) .pf-c-masthead {
12058
+
12059
+ .pf-c-login__footer {
12060
+ color: var(--pf-global--Color--100);
12061
+ grid-area: footer;
12062
+ padding-right: var(--pf-c-login__footer--PaddingRight);
12063
+ padding-left: var(--pf-c-login__footer--PaddingLeft);
12064
+ }
12065
+
12066
+ .pf-c-login__footer .pf-c-list a {
12067
+ color: unset;
12068
+ }
12069
+
12070
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
12071
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
12072
+ }
12073
+
12074
+ :where(.pf-theme-dark) .pf-c-login__header,
12075
+ :where(.pf-theme-dark) .pf-c-login__footer {
11937
12076
  --pf-global--Color--100: #e0e0e0;
11938
12077
  --pf-global--Color--200: #aaabac;
11939
12078
  --pf-global--BorderColor--100: #444548;
@@ -11943,11 +12082,13 @@ ul.pf-c-list {
11943
12082
  --pf-global--BackgroundColor--100: #1b1d21;
11944
12083
  }
11945
12084
 
11946
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12085
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
12086
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11947
12087
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11948
12088
  }
11949
12089
 
11950
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
12090
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
12091
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11951
12092
  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11952
12093
  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11953
12094
  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
@@ -11962,15 +12103,11 @@ ul.pf-c-list {
11962
12103
  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11963
12104
  }
11964
12105
 
11965
- :where(.pf-theme-dark) .pf-c-masthead {
11966
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
12106
+ :where(.pf-theme-dark) .pf-c-login__header,
12107
+ :where(.pf-theme-dark) .pf-c-login__footer {
11967
12108
  color: var(--pf-global--Color--100);
11968
12109
  }
11969
12110
 
11970
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11971
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11972
- }
11973
-
11974
12111
  .pf-c-menu {
11975
12112
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
11976
12113
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -22655,52 +22792,6 @@ svg.pf-c-spinner.pf-m-xl {
22655
22792
  --pf-c-tooltip__arrow--Height: 0.9375rem;
22656
22793
  }
22657
22794
 
22658
- .pf-c-number-input .pf-c-form-control {
22659
- appearance: textfield;
22660
- }
22661
-
22662
- .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
22663
- appearance: none;
22664
- margin: 0;
22665
- }
22666
-
22667
- .pf-c-number-input {
22668
- --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
22669
- --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
22670
- --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
22671
- --pf-c-number-input--c-form-control--width-icon: 0px;
22672
- --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
22673
- --pf-c-number-input--c-form-control--width-chars: 4;
22674
- --pf-c-number-input--c-form-control--Width:
22675
- calc(
22676
- calc(
22677
- var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
22678
- ) + var(--pf-c-number-input--c-form-control--width-icon)
22679
- );
22680
- display: inline-flex;
22681
- align-items: center;
22682
- }
22683
-
22684
- .pf-c-number-input.pf-m-status {
22685
- --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
22686
- }
22687
-
22688
- .pf-c-number-input .pf-c-form-control {
22689
- display: inline-flex;
22690
- width: var(--pf-c-number-input--c-form-control--Width);
22691
- text-align: right;
22692
- }
22693
-
22694
- .pf-c-input-group + .pf-c-number-input__unit,
22695
- .pf-c-number-input__unit + .pf-c-input-group {
22696
- margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
22697
- }
22698
-
22699
- .pf-c-number-input__icon {
22700
- display: flex;
22701
- font-size: var(--pf-c-number-input__icon--FontSize);
22702
- }
22703
-
22704
22795
  .pf-c-tree-view {
22705
22796
  --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
22706
22797
  --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
@@ -23791,6 +23882,52 @@ label.pf-c-tree-view__node-text {
23791
23882
  color: var(--pf-global--Color--100);
23792
23883
  }
23793
23884
 
23885
+ .pf-c-number-input .pf-c-form-control {
23886
+ appearance: textfield;
23887
+ }
23888
+
23889
+ .pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
23890
+ appearance: none;
23891
+ margin: 0;
23892
+ }
23893
+
23894
+ .pf-c-number-input {
23895
+ --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
23896
+ --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
23897
+ --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
23898
+ --pf-c-number-input--c-form-control--width-icon: 0px;
23899
+ --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
23900
+ --pf-c-number-input--c-form-control--width-chars: 4;
23901
+ --pf-c-number-input--c-form-control--Width:
23902
+ calc(
23903
+ calc(
23904
+ var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
23905
+ ) + var(--pf-c-number-input--c-form-control--width-icon)
23906
+ );
23907
+ display: inline-flex;
23908
+ align-items: center;
23909
+ }
23910
+
23911
+ .pf-c-number-input.pf-m-status {
23912
+ --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
23913
+ }
23914
+
23915
+ .pf-c-number-input .pf-c-form-control {
23916
+ display: inline-flex;
23917
+ width: var(--pf-c-number-input--c-form-control--Width);
23918
+ text-align: right;
23919
+ }
23920
+
23921
+ .pf-c-input-group + .pf-c-number-input__unit,
23922
+ .pf-c-number-input__unit + .pf-c-input-group {
23923
+ margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
23924
+ }
23925
+
23926
+ .pf-c-number-input__icon {
23927
+ display: flex;
23928
+ font-size: var(--pf-c-number-input__icon--FontSize);
23929
+ }
23930
+
23794
23931
  .pf-c-draggable {
23795
23932
  --pf-c-draggable--Cursor: auto;
23796
23933
  --pf-c-draggable--m-dragging--Cursor: grabbing;