@patternfly/react-core 4.236.12 → 4.236.13

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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/umd/react-core.min.css +1467 -1456
  3. package/dist/umd/react-core.min.js +1 -1
  4. package/package.json +6 -6
package/dist/umd/react-core.min.css CHANGED
@@ -813,6 +813,8 @@
813
813
  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
814
814
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
815
815
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
816
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
817
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
816
818
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
817
819
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
818
820
  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -939,6 +941,12 @@
939
941
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
940
942
  }
941
943
 
944
+ .pf-c-form-control[readonly].pf-m-plain {
945
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
946
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
947
+ border-color: transparent;
948
+ }
949
+
942
950
  .pf-c-form-control:hover {
943
951
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
944
952
  }
@@ -3609,44 +3617,6 @@ label.pf-c-check, .pf-c-check__label,
3609
3617
  border: 0;
3610
3618
  }
3611
3619
 
3612
- .pf-c-code-block {
3613
- --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3614
- --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3615
- --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
3616
- --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
3617
- --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
3618
- --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
3619
- --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
3620
- --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
3621
- --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
3622
- background-color: var(--pf-c-code-block--BackgroundColor);
3623
- }
3624
-
3625
- .pf-c-code-block__header {
3626
- display: flex;
3627
- border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
3628
- }
3629
-
3630
- .pf-c-code-block__actions {
3631
- display: flex;
3632
- margin-left: auto;
3633
- }
3634
-
3635
- .pf-c-code-block__content {
3636
- padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
3637
- }
3638
-
3639
- .pf-c-code-block__pre {
3640
- font-family: var(--pf-c-code-block__pre--FontFamily);
3641
- font-size: var(--pf-c-code-block__pre--FontSize);
3642
- overflow-wrap: break-word;
3643
- white-space: pre-wrap;
3644
- }
3645
-
3646
- .pf-c-code-block__code {
3647
- font-family: var(--pf-c-code-block__code--FontFamily, inherit);
3648
- }
3649
-
3650
3620
  .pf-c-context-selector__menu {
3651
3621
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3652
3622
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -6338,6 +6308,44 @@ label.pf-c-check, .pf-c-check__label,
6338
6308
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6339
6309
  }
6340
6310
  }
6311
+ .pf-c-code-block {
6312
+ --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
6313
+ --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
6314
+ --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
6315
+ --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
6316
+ --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
6317
+ --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
6318
+ --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
6319
+ --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
6320
+ --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
6321
+ background-color: var(--pf-c-code-block--BackgroundColor);
6322
+ }
6323
+
6324
+ .pf-c-code-block__header {
6325
+ display: flex;
6326
+ border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
6327
+ }
6328
+
6329
+ .pf-c-code-block__actions {
6330
+ display: flex;
6331
+ margin-left: auto;
6332
+ }
6333
+
6334
+ .pf-c-code-block__content {
6335
+ padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
6336
+ }
6337
+
6338
+ .pf-c-code-block__pre {
6339
+ font-family: var(--pf-c-code-block__pre--FontFamily);
6340
+ font-size: var(--pf-c-code-block__pre--FontSize);
6341
+ overflow-wrap: break-word;
6342
+ white-space: pre-wrap;
6343
+ }
6344
+
6345
+ .pf-c-code-block__code {
6346
+ font-family: var(--pf-c-code-block__code--FontFamily, inherit);
6347
+ }
6348
+
6341
6349
  .pf-c-drawer {
6342
6350
  --pf-c-drawer__section--BackgroundColor: var(--pf-global--BackgroundColor--100);
6343
6351
  --pf-c-drawer__section--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
@@ -10848,17 +10856,7 @@ ul.pf-c-list {
10848
10856
  --pf-c-list--m-bordered--li--BorderBottomWidth: 0;
10849
10857
  }
10850
10858
 
10851
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
10852
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
10853
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
10854
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
10855
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
10856
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
10857
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
10858
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10859
- }
10860
-
10861
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
10859
+ .pf-c-login__footer, .pf-c-login__header {
10862
10860
  --pf-global--Color--100: var(--pf-global--Color--light-100);
10863
10861
  --pf-global--Color--200: var(--pf-global--Color--light-200);
10864
10862
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -10868,11 +10866,11 @@ ul.pf-c-list {
10868
10866
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
10869
10867
  }
10870
10868
 
10871
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
10869
+ .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
10872
10870
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
10873
10871
  }
10874
10872
 
10875
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
10873
+ .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
10876
10874
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
10877
10875
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
10878
10876
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -10891,572 +10889,471 @@ ul.pf-c-list {
10891
10889
  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
10892
10890
  }
10893
10891
 
10894
- .pf-c-masthead {
10895
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
10896
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
10897
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
10898
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
10899
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
10900
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
10901
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
10902
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
10903
- --pf-c-masthead--m-display-stack__main--Order: -1;
10904
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
10905
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
10906
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
10907
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
10908
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
10909
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
10910
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
10911
- --pf-c-masthead--m-display-stack__content--MinHeight: auto;
10912
- --pf-c-masthead--m-display-stack__content--Order: 1;
10913
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
10914
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
10915
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
10916
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
10917
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
10918
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
10919
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
10920
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
10921
- --pf-c-masthead--m-display-inline__main--Order: 0;
10922
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
10923
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
10924
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
10925
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
10926
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
10927
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
10928
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
10929
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
10930
- --pf-c-masthead--m-display-inline__content--Order: 0;
10931
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
10932
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
10933
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
10934
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
10935
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
10936
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
10937
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
10938
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10939
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
10940
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
10941
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10942
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
10943
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
10944
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
10945
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
10946
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
10947
- --pf-c-masthead--c-toolbar__item--Display: flex;
10948
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
10949
- --pf-c-masthead--c-context-selector--Width: auto;
10950
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
10951
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
10952
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
10953
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
10954
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
10955
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
10956
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
10957
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
10958
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
10959
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
10960
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
10961
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
10962
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
10963
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
10964
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
10965
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
10966
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
10967
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
10968
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
10969
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
10970
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
10971
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10972
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
10973
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
10974
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
10975
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
10976
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
10977
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
10978
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
10979
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
10980
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
10981
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
10982
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
10983
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
10984
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
10985
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
10986
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
10987
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
10988
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
10989
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
10990
- color: var(--pf-global--Color--100);
10991
- position: relative;
10992
- display: grid;
10993
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
10994
- align-items: center;
10995
- min-width: 0;
10996
- padding-right: var(--pf-c-masthead--PaddingRight);
10997
- padding-left: var(--pf-c-masthead--PaddingLeft);
10998
- background-color: var(--pf-c-masthead--BackgroundColor);
10999
- }
11000
-
11001
- @media screen and (min-width: 768px) {
11002
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11003
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11004
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11005
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11006
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11007
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11008
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11009
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11010
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11011
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11012
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11013
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11014
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11015
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11016
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11017
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11018
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11019
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11020
- }
11021
- }
11022
- @media screen and (min-width: 1200px) {
11023
- .pf-c-masthead {
11024
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11025
- }
11026
- }
11027
- .pf-c-masthead.pf-m-light {
11028
- color: var(--pf-global--Color--100);
11029
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11030
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11031
- }
11032
-
11033
- .pf-c-masthead.pf-m-light-200 {
11034
- color: var(--pf-global--Color--100);
11035
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11036
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11037
- }
11038
-
11039
- .pf-c-masthead .pf-c-toolbar {
11040
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11041
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11042
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11043
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11044
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11045
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11046
- width: 100%;
11047
- }
11048
-
11049
- .pf-c-masthead .pf-c-toolbar__content-section {
11050
- flex-wrap: nowrap;
11051
- }
11052
-
11053
- .pf-c-masthead .pf-c-toolbar__expandable-content {
11054
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11055
- }
11056
-
11057
- .pf-c-masthead .pf-c-menu-toggle {
11058
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11059
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11060
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
10892
+ .pf-c-login {
10893
+ --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
10894
+ --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
10895
+ --pf-c-login--xl--BackgroundImage: none;
10896
+ --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
10897
+ --pf-c-login__container--MaxWidth: 31.25rem;
10898
+ --pf-c-login__container--xl--MaxWidth: none;
10899
+ --pf-c-login__container--PaddingLeft: 6.125rem;
10900
+ --pf-c-login__container--PaddingRight: 6.125rem;
10901
+ --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10902
+ --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
10903
+ --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
10904
+ --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
10905
+ --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
10906
+ --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
10907
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
10908
+ --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
10909
+ --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
10910
+ --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
10911
+ --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
10912
+ --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
10913
+ --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
10914
+ --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
10915
+ --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
10916
+ --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
10917
+ --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
10918
+ --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
10919
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
10920
+ --pf-c-login__main-header-desc--md--MarginBottom: 0;
10921
+ --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
10922
+ --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
10923
+ --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
10924
+ --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
10925
+ --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
10926
+ --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
10927
+ --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
10928
+ --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
10929
+ --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
10930
+ --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
10931
+ --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
10932
+ --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
10933
+ --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
10934
+ --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
10935
+ --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
10936
+ --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
10937
+ --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
10938
+ --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
10939
+ --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
10940
+ --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
10941
+ --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
10942
+ --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
10943
+ --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
10944
+ --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
10945
+ --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
10946
+ --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
10947
+ --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
10948
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
10949
+ --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
10950
+ display: flex;
10951
+ justify-content: center;
10952
+ min-height: 100vh;
10953
+ padding-top: var(--pf-c-login--PaddingTop);
10954
+ padding-bottom: var(--pf-c-login--PaddingBottom);
11061
10955
  }
11062
10956
 
11063
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11064
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11065
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
10957
+ @media (min-width: 1200px) {
10958
+ .pf-c-login {
10959
+ --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
10960
+ }
11066
10961
  }
11067
-
11068
- .pf-c-masthead .pf-c-context-selector {
11069
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11070
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11071
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11072
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
10962
+ @media (min-width: 576px) {
10963
+ .pf-c-login {
10964
+ --pf-c-login__header--PaddingRight: 0;
10965
+ --pf-c-login__header--PaddingLeft: 0;
10966
+ }
11073
10967
  }
11074
-
11075
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11076
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11077
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
10968
+ @media (min-width: 1200px) {
10969
+ .pf-c-login {
10970
+ --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
10971
+ --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
10972
+ }
11078
10973
  }
11079
-
11080
- .pf-c-masthead .pf-c-dropdown {
11081
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11082
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11083
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
10974
+ @media (min-width: 1200px) {
10975
+ .pf-c-login {
10976
+ --pf-c-login__main--MarginBottom: 0;
10977
+ }
11084
10978
  }
11085
-
11086
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11087
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11088
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
10979
+ @media (min-width: 768px) {
10980
+ .pf-c-login {
10981
+ --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
10982
+ --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
10983
+ --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
10984
+ }
11089
10985
  }
11090
-
11091
- .pf-c-masthead .pf-c-nav {
11092
- align-self: stretch;
10986
+ @media (min-width: 768px) {
10987
+ .pf-c-login {
10988
+ --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
10989
+ --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
10990
+ }
11093
10991
  }
11094
-
11095
- .pf-c-masthead .pf-c-button.pf-m-plain {
11096
- color: var(--pf-c-button--m-plain--Color);
10992
+ @media (min-width: 576px) {
10993
+ .pf-c-login {
10994
+ --pf-c-login__footer--PaddingRight: 0;
10995
+ --pf-c-login__footer--PaddingLeft: 0;
10996
+ }
11097
10997
  }
11098
-
11099
- .pf-c-masthead__main {
11100
- position: relative;
11101
- display: flex;
11102
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
11103
- align-items: center;
11104
- align-self: stretch;
11105
- order: var(--pf-c-masthead__main--Order);
11106
- min-height: var(--pf-c-masthead__main--MinHeight);
11107
- padding-top: var(--pf-c-masthead__main--PaddingTop);
11108
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11109
- margin-right: var(--pf-c-masthead__main--MarginRight);
11110
- grid-column: var(--pf-c-masthead__main--GridColumn);
10998
+ @media (min-width: 1200px) {
10999
+ .pf-c-login {
11000
+ --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
11001
+ }
11111
11002
  }
11112
-
11113
- .pf-c-masthead__main::before {
11114
- position: absolute;
11115
- right: var(--pf-c-masthead__main--before--Right);
11116
- bottom: 0;
11117
- left: var(--pf-c-masthead__main--before--Left);
11118
- content: "";
11119
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11003
+ @media (min-width: 1200px) {
11004
+ .pf-c-login {
11005
+ background-image: var(--pf-c-login--xl--BackgroundImage);
11006
+ }
11120
11007
  }
11121
-
11122
- .pf-c-masthead__main:last-child {
11123
- --pf-c-masthead__main--MarginRight: 0;
11008
+ @media (min-width: 576px) {
11009
+ .pf-c-login {
11010
+ align-items: center;
11011
+ }
11124
11012
  }
11125
-
11126
- .pf-c-masthead__content {
11127
- display: flex;
11128
- flex-grow: 1;
11129
- align-items: center;
11130
- align-self: stretch;
11131
- order: var(--pf-c-masthead__content--Order);
11132
- min-height: var(--pf-c-masthead__content--MinHeight);
11133
- padding-top: var(--pf-c-masthead__content--PaddingTop);
11134
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11135
- margin-left: var(--pf-c-masthead__content--MarginLeft);
11136
- grid-column: var(--pf-c-masthead__content--GridColumn);
11137
- grid-column-end: -1;
11138
- flex-shrink: 1;
11013
+ .pf-c-login__container {
11014
+ width: 100%;
11015
+ max-width: var(--pf-c-login__container--MaxWidth);
11139
11016
  }
11140
11017
 
11141
- .pf-c-masthead__content:only-child {
11142
- --pf-c-masthead__content--MarginLeft: 0;
11018
+ @media (min-width: 1200px) {
11019
+ .pf-c-login__container {
11020
+ display: grid;
11021
+ justify-content: center;
11022
+ grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
11023
+ grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
11024
+ grid-template-areas: "main header" "main footer" "main .";
11025
+ padding-right: var(--pf-c-login__container--PaddingRight);
11026
+ padding-left: var(--pf-c-login__container--PaddingLeft);
11027
+ }
11028
+ }
11029
+ .pf-c-login__header {
11030
+ color: var(--pf-global--Color--100);
11031
+ grid-area: header;
11032
+ padding-right: var(--pf-c-login__header--PaddingRight);
11033
+ padding-left: var(--pf-c-login__header--PaddingLeft);
11143
11034
  }
11144
11035
 
11145
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11146
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11147
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11036
+ @media (min-width: 1200px) {
11037
+ .pf-c-login__header {
11038
+ margin-top: var(--pf-c-login__header--xl--MarginTop);
11039
+ }
11040
+ }
11041
+ .pf-c-login__header .pf-c-brand {
11042
+ margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
11148
11043
  }
11149
11044
 
11150
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11151
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11045
+ .pf-c-login__main {
11046
+ align-self: start;
11047
+ margin-bottom: var(--pf-c-login__main--MarginBottom);
11048
+ background-color: var(--pf-c-login__main--BackgroundColor);
11049
+ grid-area: main;
11152
11050
  }
11153
11051
 
11154
- .pf-c-masthead__main,
11155
- .pf-c-masthead__brand,
11156
- .pf-c-masthead__content {
11157
- min-width: 0;
11052
+ .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
11053
+ padding-top: var(--pf-c-login__main-header--PaddingTop);
11158
11054
  }
11159
11055
 
11160
- .pf-c-masthead__brand {
11161
- display: inline-flex;
11162
- align-self: center;
11056
+ .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
11057
+ padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
11163
11058
  }
11164
11059
 
11165
- .pf-c-masthead__toggle {
11166
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
11167
- align-self: center;
11168
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
11169
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11060
+ .pf-c-login__main-header {
11061
+ display: grid;
11062
+ grid-template-columns: 100%;
11063
+ column-gap: var(--pf-c-login__main-header--ColumnGap);
11064
+ row-gap: var(--pf-c-login__main-header--RowGap);
11065
+ align-items: center;
11066
+ 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);
11170
11067
  }
11171
11068
 
11172
- .pf-c-masthead__toggle .pf-c-button {
11173
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11069
+ @media (min-width: 768px) {
11070
+ .pf-c-login__main-header {
11071
+ grid-template-columns: 1fr auto;
11072
+ }
11073
+ }
11074
+ .pf-c-login__main-header-utilities,
11075
+ .pf-c-login__main-header .pf-c-dropdown {
11076
+ grid-column: auto;
11077
+ grid-row: auto;
11174
11078
  }
11175
11079
 
11176
- .pf-c-masthead.pf-m-display-stack {
11177
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11178
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11179
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11180
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11181
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11182
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11183
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11184
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11185
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11186
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11187
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11188
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11189
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11190
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11191
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11192
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11193
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11080
+ @media (min-width: 768px) {
11081
+ .pf-c-login__main-header-utilities,
11082
+ .pf-c-login__main-header .pf-c-dropdown {
11083
+ grid-column: 2/3;
11084
+ grid-row: 1;
11085
+ }
11194
11086
  }
11195
-
11196
- .pf-c-masthead.pf-m-display-inline {
11197
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11198
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11199
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11200
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11201
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11202
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11203
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11204
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11205
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11206
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11207
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11208
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11209
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11210
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11211
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11212
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11213
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11087
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
11088
+ grid-column: auto;
11089
+ grid-row: auto;
11214
11090
  }
11215
11091
 
11216
- .pf-c-masthead.pf-m-inset-none {
11217
- --pf-c-masthead--inset: 0;
11092
+ .pf-c-login__main-header-desc {
11093
+ margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
11094
+ font-size: var(--pf-c-login__main-header-desc--FontSize);
11095
+ grid-column: 1/-1;
11218
11096
  }
11219
11097
 
11220
- .pf-c-masthead.pf-m-inset-sm {
11221
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11098
+ .pf-c-login__main-body {
11099
+ padding-right: var(--pf-c-login__main-body--PaddingRight);
11100
+ padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
11101
+ padding-left: var(--pf-c-login__main-body--PaddingLeft);
11222
11102
  }
11223
11103
 
11224
- .pf-c-masthead.pf-m-inset-md {
11225
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11104
+ .pf-c-login__main-footer {
11105
+ display: flex;
11106
+ flex-wrap: wrap;
11226
11107
  }
11227
11108
 
11228
- .pf-c-masthead.pf-m-inset-lg {
11229
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11109
+ .pf-c-login__main-footer .pf-c-title {
11110
+ margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
11111
+ text-align: center;
11230
11112
  }
11231
11113
 
11232
- .pf-c-masthead.pf-m-inset-xl {
11233
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11114
+ .pf-c-login__main-footer > * {
11115
+ flex-basis: 100%;
11234
11116
  }
11235
11117
 
11236
- .pf-c-masthead.pf-m-inset-2xl {
11237
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11118
+ .pf-c-login__main-footer-links {
11119
+ display: flex;
11120
+ flex-wrap: wrap;
11121
+ justify-content: center;
11122
+ 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);
11238
11123
  }
11239
11124
 
11240
- @media (min-width: 576px) {
11241
- .pf-c-masthead.pf-m-display-stack-on-sm {
11242
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11243
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11244
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11245
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11246
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11247
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11248
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11249
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11250
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11251
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11252
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11253
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11254
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11255
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11256
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11257
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11258
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11259
- }
11260
-
11261
- .pf-c-masthead.pf-m-display-inline-on-sm {
11262
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11263
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11264
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11265
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11266
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11267
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11268
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11269
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11270
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11271
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11272
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11273
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11274
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11275
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11276
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11277
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11278
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11279
- }
11125
+ .pf-c-login__main-footer-links-item {
11126
+ padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
11127
+ padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
11128
+ margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
11280
11129
  }
11281
- @media (min-width: 576px) {
11282
- .pf-c-masthead.pf-m-inset-none-on-sm {
11283
- --pf-c-masthead--inset: 0;
11284
- }
11285
11130
 
11286
- .pf-c-masthead.pf-m-inset-sm-on-sm {
11287
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11288
- }
11131
+ .pf-c-login__main-footer-links-item-link svg {
11132
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
11133
+ width: 100%;
11134
+ max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
11135
+ height: 100%;
11136
+ max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
11137
+ }
11289
11138
 
11290
- .pf-c-masthead.pf-m-inset-md-on-sm {
11291
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11292
- }
11139
+ .pf-c-login__main-footer-links-item-link:hover svg {
11140
+ fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
11141
+ }
11293
11142
 
11294
- .pf-c-masthead.pf-m-inset-lg-on-sm {
11295
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11296
- }
11143
+ .pf-c-login__main-footer-band {
11144
+ 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);
11145
+ text-align: center;
11146
+ background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
11147
+ }
11297
11148
 
11298
- .pf-c-masthead.pf-m-inset-xl-on-sm {
11299
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11300
- }
11149
+ .pf-c-login__main-footer-band > * + * {
11150
+ padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
11151
+ }
11301
11152
 
11302
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
11303
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11304
- }
11153
+ .pf-c-login__footer {
11154
+ color: var(--pf-global--Color--100);
11155
+ grid-area: footer;
11156
+ padding-right: var(--pf-c-login__footer--PaddingRight);
11157
+ padding-left: var(--pf-c-login__footer--PaddingLeft);
11305
11158
  }
11306
- @media (min-width: 768px) {
11307
- .pf-c-masthead.pf-m-display-stack-on-md {
11308
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11309
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11310
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11311
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11312
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11313
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11314
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11315
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11316
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11317
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11318
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11319
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11320
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11321
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11322
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11323
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11324
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11325
- }
11326
11159
 
11327
- .pf-c-masthead.pf-m-display-inline-on-md {
11328
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11329
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11330
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11331
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11332
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11333
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11334
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11335
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11336
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11337
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11338
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11339
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11340
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11341
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11342
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11343
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11344
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11345
- }
11160
+ .pf-c-login__footer .pf-c-list a {
11161
+ color: unset;
11346
11162
  }
11347
- @media (min-width: 768px) {
11348
- .pf-c-masthead.pf-m-inset-none-on-md {
11349
- --pf-c-masthead--inset: 0;
11350
- }
11351
11163
 
11352
- .pf-c-masthead.pf-m-inset-sm-on-md {
11353
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11354
- }
11164
+ .pf-c-login__footer .pf-c-list:not(:only-child) {
11165
+ padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
11166
+ }
11355
11167
 
11356
- .pf-c-masthead.pf-m-inset-md-on-md {
11357
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11358
- }
11168
+ :where(.pf-theme-dark) .pf-c-login__header,
11169
+ :where(.pf-theme-dark) .pf-c-login__footer {
11170
+ --pf-global--Color--100: #e0e0e0;
11171
+ --pf-global--Color--200: #aaabac;
11172
+ --pf-global--BorderColor--100: #444548;
11173
+ --pf-global--primary-color--100: #1fa7f8;
11174
+ --pf-global--link--Color: #1fa7f8;
11175
+ --pf-global--link--Color--hover: #73bcf7;
11176
+ --pf-global--BackgroundColor--100: #1b1d21;
11177
+ }
11359
11178
 
11360
- .pf-c-masthead.pf-m-inset-lg-on-md {
11361
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11362
- }
11179
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
11180
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
11181
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11182
+ }
11363
11183
 
11364
- .pf-c-masthead.pf-m-inset-xl-on-md {
11365
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11366
- }
11184
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
11185
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
11186
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11187
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11188
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11189
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11190
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11191
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11192
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11193
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11194
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11195
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11196
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11197
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11198
+ }
11367
11199
 
11368
- .pf-c-masthead.pf-m-inset-2xl-on-md {
11369
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11370
- }
11200
+ :where(.pf-theme-dark) .pf-c-login__header,
11201
+ :where(.pf-theme-dark) .pf-c-login__footer {
11202
+ color: var(--pf-global--Color--100);
11371
11203
  }
11372
- @media (min-width: 992px) {
11373
- .pf-c-masthead.pf-m-display-stack-on-lg {
11374
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11375
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11376
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11377
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11378
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11379
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11380
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11381
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11382
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11383
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11384
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11385
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11386
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11387
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11388
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11389
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11390
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11391
- }
11392
11204
 
11393
- .pf-c-masthead.pf-m-display-inline-on-lg {
11394
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11395
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11396
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11397
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11398
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11399
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11400
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11401
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11402
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11403
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11404
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11405
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11406
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11407
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11408
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11409
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11410
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11411
- }
11205
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11206
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11207
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11208
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11209
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11210
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11211
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11212
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11412
11213
  }
11413
- @media (min-width: 992px) {
11414
- .pf-c-masthead.pf-m-inset-none-on-lg {
11415
- --pf-c-masthead--inset: 0;
11416
- }
11417
-
11418
- .pf-c-masthead.pf-m-inset-sm-on-lg {
11419
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11420
- }
11421
11214
 
11422
- .pf-c-masthead.pf-m-inset-md-on-lg {
11423
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11424
- }
11215
+ .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11216
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
11217
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
11218
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11219
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11220
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
11221
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11222
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11223
+ }
11425
11224
 
11426
- .pf-c-masthead.pf-m-inset-lg-on-lg {
11427
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11428
- }
11225
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11226
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11227
+ }
11429
11228
 
11430
- .pf-c-masthead.pf-m-inset-xl-on-lg {
11431
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11432
- }
11229
+ .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11230
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11231
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11232
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11233
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11234
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11235
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11236
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11237
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11238
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11239
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11240
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11241
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11242
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11243
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11244
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11245
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11246
+ }
11433
11247
 
11434
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
11435
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11436
- }
11248
+ .pf-c-masthead {
11249
+ --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11250
+ --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11251
+ --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11252
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11253
+ --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11254
+ --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11255
+ --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11256
+ --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11257
+ --pf-c-masthead--m-display-stack__main--Order: -1;
11258
+ --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11259
+ --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11260
+ --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11261
+ --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11262
+ --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11263
+ --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11264
+ --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11265
+ --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11266
+ --pf-c-masthead--m-display-stack__content--Order: 1;
11267
+ --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11268
+ --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11269
+ --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11270
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11271
+ --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11272
+ --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11273
+ --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11274
+ --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11275
+ --pf-c-masthead--m-display-inline__main--Order: 0;
11276
+ --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11277
+ --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11278
+ --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11279
+ --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11280
+ --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11281
+ --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11282
+ --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11283
+ --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11284
+ --pf-c-masthead--m-display-inline__content--Order: 0;
11285
+ --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11286
+ --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11287
+ --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11288
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11289
+ --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11290
+ --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11291
+ --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11292
+ --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11293
+ --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11294
+ --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11295
+ --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11296
+ --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11297
+ --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11298
+ --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11299
+ --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11300
+ --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11301
+ --pf-c-masthead--c-toolbar__item--Display: flex;
11302
+ --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
11303
+ --pf-c-masthead--c-context-selector--Width: auto;
11304
+ --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11305
+ --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11306
+ --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11307
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
11308
+ --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
11309
+ --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11310
+ --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11311
+ --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11312
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
11313
+ --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
11314
+ --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11315
+ --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
11316
+ --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
11317
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
11318
+ --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
11319
+ --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
11320
+ --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
11321
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
11322
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
11323
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11324
+ --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
11325
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11326
+ --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
11327
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11328
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11329
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11330
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11331
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11332
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11333
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11334
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11335
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11336
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11337
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11338
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11339
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11340
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11341
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11342
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11343
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11344
+ color: var(--pf-global--Color--100);
11345
+ position: relative;
11346
+ display: grid;
11347
+ grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
11348
+ align-items: center;
11349
+ min-width: 0;
11350
+ padding-right: var(--pf-c-masthead--PaddingRight);
11351
+ padding-left: var(--pf-c-masthead--PaddingLeft);
11352
+ background-color: var(--pf-c-masthead--BackgroundColor);
11437
11353
  }
11438
- @media (min-width: 1200px) {
11439
- .pf-c-masthead.pf-m-display-stack-on-xl {
11440
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11441
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11442
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11443
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11444
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11445
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11446
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11447
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11448
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11449
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11450
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11451
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11452
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11453
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11454
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11455
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11456
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11457
- }
11458
11354
 
11459
- .pf-c-masthead.pf-m-display-inline-on-xl {
11355
+ @media screen and (min-width: 768px) {
11356
+ .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11460
11357
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11461
11358
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11462
11359
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -11476,33 +11373,226 @@ ul.pf-c-list {
11476
11373
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11477
11374
  }
11478
11375
  }
11479
- @media (min-width: 1200px) {
11480
- .pf-c-masthead.pf-m-inset-none-on-xl {
11481
- --pf-c-masthead--inset: 0;
11482
- }
11483
-
11484
- .pf-c-masthead.pf-m-inset-sm-on-xl {
11485
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11486
- }
11487
-
11488
- .pf-c-masthead.pf-m-inset-md-on-xl {
11489
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11376
+ @media screen and (min-width: 1200px) {
11377
+ .pf-c-masthead {
11378
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
11490
11379
  }
11380
+ }
11381
+ .pf-c-masthead.pf-m-light {
11382
+ color: var(--pf-global--Color--100);
11383
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
11384
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
11385
+ }
11491
11386
 
11492
- .pf-c-masthead.pf-m-inset-lg-on-xl {
11493
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11494
- }
11387
+ .pf-c-masthead.pf-m-light-200 {
11388
+ color: var(--pf-global--Color--100);
11389
+ --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
11390
+ --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
11391
+ }
11495
11392
 
11496
- .pf-c-masthead.pf-m-inset-xl-on-xl {
11497
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11498
- }
11393
+ .pf-c-masthead .pf-c-toolbar {
11394
+ --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
11395
+ --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
11396
+ --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
11397
+ --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
11398
+ --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
11399
+ --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
11400
+ width: 100%;
11401
+ }
11499
11402
 
11500
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
11501
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11502
- }
11403
+ .pf-c-masthead .pf-c-toolbar__content-section {
11404
+ flex-wrap: nowrap;
11503
11405
  }
11504
- @media (min-width: 1450px) {
11505
- .pf-c-masthead.pf-m-display-stack-on-2xl {
11406
+
11407
+ .pf-c-masthead .pf-c-toolbar__expandable-content {
11408
+ border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
11409
+ }
11410
+
11411
+ .pf-c-masthead .pf-c-menu-toggle {
11412
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
11413
+ --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
11414
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
11415
+ }
11416
+
11417
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11418
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11419
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11420
+ }
11421
+
11422
+ .pf-c-masthead .pf-c-context-selector {
11423
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11424
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11425
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11426
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11427
+ }
11428
+
11429
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11430
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11431
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11432
+ }
11433
+
11434
+ .pf-c-masthead .pf-c-dropdown {
11435
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11436
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11437
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11438
+ }
11439
+
11440
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11441
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11442
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11443
+ }
11444
+
11445
+ .pf-c-masthead .pf-c-nav {
11446
+ align-self: stretch;
11447
+ }
11448
+
11449
+ .pf-c-masthead .pf-c-button.pf-m-plain {
11450
+ color: var(--pf-c-button--m-plain--Color);
11451
+ }
11452
+
11453
+ .pf-c-masthead__main {
11454
+ position: relative;
11455
+ display: flex;
11456
+ flex-basis: var(--pf-c-masthead__main--FlexBasis);
11457
+ align-items: center;
11458
+ align-self: stretch;
11459
+ order: var(--pf-c-masthead__main--Order);
11460
+ min-height: var(--pf-c-masthead__main--MinHeight);
11461
+ padding-top: var(--pf-c-masthead__main--PaddingTop);
11462
+ padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
11463
+ margin-right: var(--pf-c-masthead__main--MarginRight);
11464
+ grid-column: var(--pf-c-masthead__main--GridColumn);
11465
+ }
11466
+
11467
+ .pf-c-masthead__main::before {
11468
+ position: absolute;
11469
+ right: var(--pf-c-masthead__main--before--Right);
11470
+ bottom: 0;
11471
+ left: var(--pf-c-masthead__main--before--Left);
11472
+ content: "";
11473
+ border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
11474
+ }
11475
+
11476
+ .pf-c-masthead__main:last-child {
11477
+ --pf-c-masthead__main--MarginRight: 0;
11478
+ }
11479
+
11480
+ .pf-c-masthead__content {
11481
+ display: flex;
11482
+ flex-grow: 1;
11483
+ align-items: center;
11484
+ align-self: stretch;
11485
+ order: var(--pf-c-masthead__content--Order);
11486
+ min-height: var(--pf-c-masthead__content--MinHeight);
11487
+ padding-top: var(--pf-c-masthead__content--PaddingTop);
11488
+ padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
11489
+ margin-left: var(--pf-c-masthead__content--MarginLeft);
11490
+ grid-column: var(--pf-c-masthead__content--GridColumn);
11491
+ grid-column-end: -1;
11492
+ flex-shrink: 1;
11493
+ }
11494
+
11495
+ .pf-c-masthead__content:only-child {
11496
+ --pf-c-masthead__content--MarginLeft: 0;
11497
+ }
11498
+
11499
+ .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
11500
+ margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
11501
+ margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
11502
+ }
11503
+
11504
+ .pf-c-masthead__toggle ~ .pf-c-masthead__content {
11505
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
11506
+ }
11507
+
11508
+ .pf-c-masthead__main,
11509
+ .pf-c-masthead__brand,
11510
+ .pf-c-masthead__content {
11511
+ min-width: 0;
11512
+ }
11513
+
11514
+ .pf-c-masthead__brand {
11515
+ display: inline-flex;
11516
+ align-self: center;
11517
+ }
11518
+
11519
+ .pf-c-masthead__toggle {
11520
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
11521
+ align-self: center;
11522
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
11523
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11524
+ }
11525
+
11526
+ .pf-c-masthead__toggle .pf-c-button {
11527
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11528
+ }
11529
+
11530
+ .pf-c-masthead.pf-m-display-stack {
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 {
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
+ .pf-c-masthead.pf-m-inset-none {
11571
+ --pf-c-masthead--inset: 0;
11572
+ }
11573
+
11574
+ .pf-c-masthead.pf-m-inset-sm {
11575
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11576
+ }
11577
+
11578
+ .pf-c-masthead.pf-m-inset-md {
11579
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11580
+ }
11581
+
11582
+ .pf-c-masthead.pf-m-inset-lg {
11583
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11584
+ }
11585
+
11586
+ .pf-c-masthead.pf-m-inset-xl {
11587
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11588
+ }
11589
+
11590
+ .pf-c-masthead.pf-m-inset-2xl {
11591
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11592
+ }
11593
+
11594
+ @media (min-width: 576px) {
11595
+ .pf-c-masthead.pf-m-display-stack-on-sm {
11506
11596
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11507
11597
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11508
11598
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
@@ -11522,7 +11612,7 @@ ul.pf-c-list {
11522
11612
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11523
11613
  }
11524
11614
 
11525
- .pf-c-masthead.pf-m-display-inline-on-2xl {
11615
+ .pf-c-masthead.pf-m-display-inline-on-sm {
11526
11616
  --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11527
11617
  --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11528
11618
  --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -11542,1110 +11632,1028 @@ ul.pf-c-list {
11542
11632
  --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11543
11633
  }
11544
11634
  }
11545
- @media (min-width: 1450px) {
11546
- .pf-c-masthead.pf-m-inset-none-on-2xl {
11635
+ @media (min-width: 576px) {
11636
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11547
11637
  --pf-c-masthead--inset: 0;
11548
11638
  }
11549
11639
 
11550
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
11640
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
11551
11641
  --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11552
11642
  }
11553
11643
 
11554
- .pf-c-masthead.pf-m-inset-md-on-2xl {
11644
+ .pf-c-masthead.pf-m-inset-md-on-sm {
11555
11645
  --pf-c-masthead--inset: var(--pf-global--spacer--md);
11556
11646
  }
11557
11647
 
11558
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
11648
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
11559
11649
  --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11560
11650
  }
11561
11651
 
11562
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
11652
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
11563
11653
  --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11564
11654
  }
11565
11655
 
11566
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11656
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
11567
11657
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11568
11658
  }
11569
11659
  }
11570
- :where(.pf-theme-dark) .pf-c-masthead {
11571
- --pf-global--Color--100: #e0e0e0;
11572
- --pf-global--Color--200: #aaabac;
11573
- --pf-global--BorderColor--100: #444548;
11574
- --pf-global--primary-color--100: #1fa7f8;
11575
- --pf-global--link--Color: #1fa7f8;
11576
- --pf-global--link--Color--hover: #73bcf7;
11577
- --pf-global--BackgroundColor--100: #1b1d21;
11578
- }
11579
-
11580
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11581
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11582
- }
11660
+ @media (min-width: 768px) {
11661
+ .pf-c-masthead.pf-m-display-stack-on-md {
11662
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11663
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11664
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11665
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11666
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11667
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11668
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11669
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11670
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11671
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11672
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11673
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11674
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11675
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11676
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11677
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11678
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11679
+ }
11583
11680
 
11584
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11585
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11586
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11587
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11588
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11589
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11590
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11591
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11592
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11593
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11594
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11595
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11596
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
11681
+ .pf-c-masthead.pf-m-display-inline-on-md {
11682
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11683
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11684
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11685
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11686
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11687
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11688
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11689
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11690
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11691
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11692
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11693
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11694
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11695
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11696
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11697
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11698
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11699
+ }
11597
11700
  }
11701
+ @media (min-width: 768px) {
11702
+ .pf-c-masthead.pf-m-inset-none-on-md {
11703
+ --pf-c-masthead--inset: 0;
11704
+ }
11598
11705
 
11599
- :where(.pf-theme-dark) .pf-c-masthead {
11600
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11601
- color: var(--pf-global--Color--100);
11602
- }
11706
+ .pf-c-masthead.pf-m-inset-sm-on-md {
11707
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11708
+ }
11603
11709
 
11604
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11605
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11606
- }
11710
+ .pf-c-masthead.pf-m-inset-md-on-md {
11711
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11712
+ }
11607
11713
 
11608
- .pf-c-menu {
11609
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11610
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11611
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11612
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11613
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11614
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11615
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11616
- }
11714
+ .pf-c-masthead.pf-m-inset-lg-on-md {
11715
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11716
+ }
11617
11717
 
11618
- .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
11619
- --pf-hidden-visible--visible--Visibility: visible;
11620
- --pf-hidden-visible--hidden--Display: none;
11621
- --pf-hidden-visible--hidden--Visibility: hidden;
11622
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11623
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11624
- display: var(--pf-hidden-visible--Display);
11625
- visibility: var(--pf-hidden-visible--Visibility);
11718
+ .pf-c-masthead.pf-m-inset-xl-on-md {
11719
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11720
+ }
11721
+
11722
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
11723
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11724
+ }
11626
11725
  }
11726
+ @media (min-width: 992px) {
11727
+ .pf-c-masthead.pf-m-display-stack-on-lg {
11728
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11729
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11730
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11731
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11732
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11733
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11734
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11735
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11736
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11737
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11738
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11739
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11740
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11741
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11742
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11743
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11744
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11745
+ }
11627
11746
 
11628
- .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
11629
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11630
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11747
+ .pf-c-masthead.pf-m-display-inline-on-lg {
11748
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11749
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11750
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11751
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11752
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11753
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11754
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11755
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11756
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11757
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11758
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11759
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11760
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11761
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11762
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11763
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11764
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11765
+ }
11631
11766
  }
11767
+ @media (min-width: 992px) {
11768
+ .pf-c-masthead.pf-m-inset-none-on-lg {
11769
+ --pf-c-masthead--inset: 0;
11770
+ }
11632
11771
 
11633
- @media screen and (min-width: 576px) {
11634
- .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
11635
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11636
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11772
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
11773
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11637
11774
  }
11638
11775
 
11639
- .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
11640
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11641
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11776
+ .pf-c-masthead.pf-m-inset-md-on-lg {
11777
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11642
11778
  }
11643
- }
11644
- @media screen and (min-width: 768px) {
11645
- .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
11646
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11647
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11779
+
11780
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
11781
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11648
11782
  }
11649
11783
 
11650
- .pf-m-visible-on-md.pf-c-menu__group, .pf-m-visible-on-md.pf-c-menu__list-item, .pf-m-visible-on-md.pf-c-menu__list {
11651
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11652
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11784
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
11785
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11786
+ }
11787
+
11788
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
11789
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11653
11790
  }
11654
11791
  }
11655
- @media screen and (min-width: 992px) {
11656
- .pf-m-hidden-on-lg.pf-c-menu__group, .pf-m-hidden-on-lg.pf-c-menu__list-item, .pf-m-hidden-on-lg.pf-c-menu__list {
11657
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11658
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11792
+ @media (min-width: 1200px) {
11793
+ .pf-c-masthead.pf-m-display-stack-on-xl {
11794
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11795
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11796
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11797
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11798
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11799
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11800
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11801
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11802
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11803
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11804
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11805
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11806
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11807
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11808
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11809
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11810
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11659
11811
  }
11660
11812
 
11661
- .pf-m-visible-on-lg.pf-c-menu__group, .pf-m-visible-on-lg.pf-c-menu__list-item, .pf-m-visible-on-lg.pf-c-menu__list {
11662
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11663
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11813
+ .pf-c-masthead.pf-m-display-inline-on-xl {
11814
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11815
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11816
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11817
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11818
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11819
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11820
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11821
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11822
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11823
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11824
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11825
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11826
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11827
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11828
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11829
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11830
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11664
11831
  }
11665
11832
  }
11666
- @media screen and (min-width: 1200px) {
11667
- .pf-m-hidden-on-xl.pf-c-menu__group, .pf-m-hidden-on-xl.pf-c-menu__list-item, .pf-m-hidden-on-xl.pf-c-menu__list {
11668
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11669
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11833
+ @media (min-width: 1200px) {
11834
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11835
+ --pf-c-masthead--inset: 0;
11670
11836
  }
11671
11837
 
11672
- .pf-m-visible-on-xl.pf-c-menu__group, .pf-m-visible-on-xl.pf-c-menu__list-item, .pf-m-visible-on-xl.pf-c-menu__list {
11673
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11674
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11838
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11839
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11675
11840
  }
11676
- }
11677
- @media screen and (min-width: 1450px) {
11678
- .pf-m-hidden-on-2xl.pf-c-menu__group, .pf-m-hidden-on-2xl.pf-c-menu__list-item, .pf-m-hidden-on-2xl.pf-c-menu__list {
11679
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11680
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11841
+
11842
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11843
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11681
11844
  }
11682
11845
 
11683
- .pf-m-visible-on-2xl.pf-c-menu__group, .pf-m-visible-on-2xl.pf-c-menu__list-item, .pf-m-visible-on-2xl.pf-c-menu__list {
11684
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11685
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11846
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11847
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11848
+ }
11849
+
11850
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
11851
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11852
+ }
11853
+
11854
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
11855
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11686
11856
  }
11687
11857
  }
11688
- .pf-c-menu {
11689
- color: var(--pf-global--Color--100);
11690
- --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
11691
- --pf-c-menu--BoxShadow: var(--pf-global--BoxShadow--md);
11692
- --pf-c-menu--MinWidth: auto;
11693
- --pf-c-menu--Width: auto;
11694
- --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
11695
- --pf-c-menu--Top: auto;
11696
- --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
11697
- --pf-c-menu--m-flyout__menu--Right: auto;
11698
- --pf-c-menu--m-flyout__menu--Bottom: auto;
11699
- --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
11700
- --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
11701
- --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
11702
- --pf-c-menu--m-plain--BoxShadow: none;
11703
- --pf-c-menu--m-flyout__menu--top-offset: 0px;
11704
- --pf-c-menu--m-flyout__menu--left-offset: 0px;
11705
- --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
11706
- --pf-c-menu__content--Height: auto;
11707
- --pf-c-menu__content--MaxHeight: none;
11708
- --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
11709
- --pf-c-menu--c-divider--MarginTop: 0;
11710
- --pf-c-menu--c-divider--MarginBottom: 0;
11711
- --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
11712
- --pf-c-menu__list--c-divider--MarginBottom: var(--pf-global--spacer--sm);
11713
- --pf-c-menu__header--PaddingTop: var(--pf-global--spacer--md);
11714
- --pf-c-menu__header--PaddingRight: var(--pf-global--spacer--md);
11715
- --pf-c-menu__header--PaddingBottom: var(--pf-global--spacer--md);
11716
- --pf-c-menu__header--PaddingLeft: var(--pf-global--spacer--md);
11717
- --pf-c-menu__header--c-menu__item--MarginTop: calc(var(--pf-c-menu__header--PaddingTop) * -1 / 2);
11718
- --pf-c-menu__header--c-menu__item--MarginRight: calc(var(--pf-c-menu__header--PaddingRight) * -1 / 2);
11719
- --pf-c-menu__header--c-menu__item--MarginBottom: calc(var(--pf-c-menu__header--PaddingBottom) * -1 / 2);
11720
- --pf-c-menu__header--c-menu__item--MarginLeft: calc(var(--pf-c-menu__header--PaddingLeft) * -1 / 2);
11721
- --pf-c-menu__header--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
11722
- --pf-c-menu__header--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
11723
- --pf-c-menu__header--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
11724
- --pf-c-menu__header--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
11725
- --pf-c-menu__header--c-menu__item--BackgroundColor: transparent;
11726
- --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
11727
- --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
11728
- --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
11729
- --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
11730
- --pf-c-menu__search--PaddingBottom: var(--pf-global--spacer--md);
11731
- --pf-c-menu__search--PaddingLeft: var(--pf-global--spacer--md);
11732
- --pf-c-menu__header__search--PaddingTop: 0;
11733
- --pf-c-menu__list--Display: block;
11734
- --pf-c-menu__list--PaddingTop: var(--pf-global--spacer--sm);
11735
- --pf-c-menu__list--PaddingBottom: var(--pf-global--spacer--sm);
11736
- --pf-c-menu__list-item--Display: flex;
11737
- --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
11738
- --pf-c-menu__list-item--BackgroundColor: transparent;
11739
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
11740
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--200);
11741
- --pf-c-menu__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm);
11742
- --pf-c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
11743
- --pf-c-menu__item--PaddingRight: var(--pf-global--spacer--md);
11744
- --pf-c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
11745
- --pf-c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
11746
- --pf-c-menu__item--OutlineOffset: calc(0.125rem * -1);
11747
- --pf-c-menu__item--FontSize: var(--pf-global--FontSize--md);
11748
- --pf-c-menu__item--FontWeight: var(--pf-global--FontWeight--normal);
11749
- --pf-c-menu__item--LineHeight: var(--pf-global--LineHeight--md);
11750
- --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--disabled-color--100);
11751
- --pf-c-menu__list-item--m-load__item--Color: var(--pf-global--link--Color);
11752
- --pf-c-menu__group--Display: block;
11753
- --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
11754
- --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
11755
- --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
11756
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
11757
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
11758
- --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
11759
- --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
11760
- --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
11761
- --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
11762
- --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
11763
- --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
11764
- --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
11765
- --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
11766
- --pf-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-global--spacer--sm);
11767
- --pf-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-global--spacer--sm);
11768
- --pf-c-menu__item-select-icon--MarginLeft: var(--pf-global--spacer--sm);
11769
- --pf-c-menu__item-select-icon--Color: var(--pf-global--active-color--100);
11770
- --pf-c-menu__item-select-icon--FontSize: var(--pf-global--icon--FontSize--sm);
11771
- --pf-c-menu__item-external-icon--MarginLeft: var(--pf-global--spacer--sm);
11772
- --pf-c-menu__item-external-icon--Color: var(--pf-global--link--Color);
11773
- --pf-c-menu__item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
11774
- --pf-c-menu__item-external-icon--Opacity: 0;
11775
- --pf-c-menu__item-action--PaddingTop: var(--pf-global--spacer--sm);
11776
- --pf-c-menu__item-action--PaddingRight: var(--pf-global--spacer--md);
11777
- --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
11778
- --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
11779
- --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
11780
- --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
11781
- --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
11782
- --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
11783
- --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
11784
- --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
11785
- --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
11786
- --pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
11787
- --pf-c-menu__breadcrumb--PaddingRight: var(--pf-global--spacer--md);
11788
- --pf-c-menu__breadcrumb--PaddingBottom: var(--pf-global--spacer--md);
11789
- --pf-c-menu__breadcrumb--PaddingLeft: var(--pf-global--spacer--md);
11790
- --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
11791
- --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--md);
11792
- --pf-c-menu--m-drilldown--c-menu--Top: 0;
11793
- --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11794
- --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
11795
- --pf-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-global--TransitionDuration);
11796
- --pf-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11797
- --pf-c-menu--m-drilldown__content--Transition: transform var(--pf-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-c-menu--m-drilldown__content--TransitionDuration--height);
11798
- --pf-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11799
- --pf-c-menu--m-drilldown__list--Transition: transform var(--pf-c-menu--m-drilldown__list--TransitionDuration--transform);
11800
- --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--xs);
11801
- --pf-c-menu__footer--PaddingTop: var(--pf-global--spacer--md);
11802
- --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
11803
- --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
11804
- --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
11805
- --pf-c-menu__footer--BoxShadow: none;
11806
- --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11807
- --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
11808
- --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
11809
- --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
11810
- --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11811
- top: var(--pf-c-menu--Top);
11812
- z-index: var(--pf-c-menu--ZIndex);
11813
- width: var(--pf-c-menu--Width);
11814
- min-width: var(--pf-c-menu--MinWidth);
11815
- background-color: var(--pf-c-menu--BackgroundColor);
11816
- box-shadow: var(--pf-c-menu--BoxShadow);
11817
- --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
11818
- --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
11819
- --pf-c-menu--m-nav__list--PaddingTop: 0;
11820
- --pf-c-menu--m-nav__list--PaddingBottom: 0;
11821
- --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11822
- --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11823
- --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11824
- --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
11825
- --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
11826
- --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
11827
- --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
11828
- --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
11829
- --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
11830
- --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11831
- --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
11832
- --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11833
- --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
11834
- --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
11835
- --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
11836
- --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
11837
- --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
11838
- --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
11839
- --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
11840
- --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
11841
- --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
11842
- --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
11843
- --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
11844
- }
11845
-
11846
- .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
11847
- overflow: visible;
11848
- }
11849
-
11850
- .pf-c-menu .pf-c-divider {
11851
- margin-top: var(--pf-c-menu--c-divider--MarginTop);
11852
- margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
11853
- }
11854
-
11855
- .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
11856
- position: absolute;
11857
- top: var(--pf-c-menu--m-flyout__menu--Top);
11858
- right: var(--pf-c-menu--m-flyout__menu--Right);
11859
- bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
11860
- left: var(--pf-c-menu--m-flyout__menu--Left);
11861
- }
11862
-
11863
- .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
11864
- overflow-y: visible;
11865
- }
11866
-
11867
- .pf-c-menu.pf-m-top {
11868
- --pf-c-menu--m-flyout__menu--Top: auto;
11869
- --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
11870
- }
11871
-
11872
- .pf-c-menu.pf-m-left {
11873
- --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
11874
- --pf-c-menu--m-flyout__menu--Left: auto;
11875
- }
11876
-
11877
- .pf-c-menu.pf-m-drilldown {
11878
- display: flex;
11879
- flex-direction: column;
11880
- }
11881
-
11882
- .pf-c-menu.pf-m-drilldown[hidden] {
11883
- display: none;
11884
- }
11885
-
11886
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
11887
- flex-grow: 1;
11888
- overflow: hidden;
11889
- transition: var(--pf-c-menu--m-drilldown__content--Transition);
11890
- }
11891
-
11892
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
11893
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
11894
- transform: translateX(-100%);
11895
- }
11896
-
11897
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
11898
- --pf-c-menu--BoxShadow: none;
11899
- position: absolute;
11900
- top: var(--pf-c-menu--m-drilldown--c-menu--Top);
11901
- left: 100%;
11902
- width: 100%;
11903
- transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
11904
- }
11905
-
11906
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
11907
- transform: translateX(-100%);
11908
- }
11909
-
11910
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
11911
- position: relative;
11912
- overflow: hidden;
11913
- transition: var(--pf-c-menu--m-drilldown__list--Transition);
11914
- }
11915
-
11916
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
11917
- --pf-c-menu__list--PaddingTop: 0;
11918
- --pf-c-menu__list--PaddingBottom: 0;
11919
- }
11920
-
11921
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
11922
- z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
11923
- }
11924
-
11925
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
11926
- overflow: visible;
11927
- }
11928
-
11929
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
11930
- position: static;
11931
- }
11932
-
11933
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
11934
- background-color: transparent;
11935
- }
11936
-
11937
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
11938
- display: none;
11939
- visibility: hidden;
11940
- }
11941
-
11942
- .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
11943
- outline-offset: var(--pf-c-menu__item--OutlineOffset);
11944
- }
11945
-
11946
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
11947
- overflow: visible;
11948
- }
11949
-
11950
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
11951
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
11952
- display: none;
11953
- }
11954
-
11955
- .pf-c-menu.pf-m-plain {
11956
- --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
11957
- }
11958
-
11959
- .pf-c-menu.pf-m-scrollable {
11960
- --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
11961
- --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
11962
- --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
11963
- }
11964
-
11965
- .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
11966
- overflow-y: auto;
11967
- }
11968
-
11969
- .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
11970
- --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
11971
- --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
11972
- --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
11973
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
11974
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
11975
- --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
11976
- --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
11977
- --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
11978
- --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
11979
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
11980
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
11981
- --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
11982
- box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
11983
- }
11858
+ @media (min-width: 1450px) {
11859
+ .pf-c-masthead.pf-m-display-stack-on-2xl {
11860
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11861
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11862
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11863
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11864
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11865
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11866
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11867
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11868
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11869
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11870
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11871
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11872
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11873
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11874
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11875
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11876
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11877
+ }
11984
11878
 
11985
- .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
11986
- position: relative;
11987
- outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
11879
+ .pf-c-masthead.pf-m-display-inline-on-2xl {
11880
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11881
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11882
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11883
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11884
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11885
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11886
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11887
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11888
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11889
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11890
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11891
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11892
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11893
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11894
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11895
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11896
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11897
+ }
11988
11898
  }
11899
+ @media (min-width: 1450px) {
11900
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
11901
+ --pf-c-masthead--inset: 0;
11902
+ }
11989
11903
 
11990
- .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
11991
- position: absolute;
11992
- right: 0;
11993
- bottom: 0;
11994
- left: 0;
11995
- content: "";
11996
- border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
11997
- }
11904
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
11905
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11906
+ }
11998
11907
 
11999
- .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
12000
- position: absolute;
12001
- top: var(--pf-c-menu--m-nav__item--hover--after--Top);
12002
- bottom: 0;
12003
- left: 0;
12004
- content: "";
12005
- border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
12006
- }
11908
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
11909
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11910
+ }
12007
11911
 
12008
- .pf-c-menu.pf-m-nav .pf-c-menu {
12009
- width: 100%;
12010
- }
11912
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
11913
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11914
+ }
12011
11915
 
12012
- .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
12013
- top: var(--pf-c-menu--m-nav--c-menu--Top);
12014
- left: var(--pf-c-menu--m-nav--c-menu--Left);
12015
- }
11916
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
11917
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11918
+ }
12016
11919
 
12017
- .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
12018
- --pf-c-menu--m-nav--c-menu--Top: auto;
12019
- bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
11920
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11921
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11922
+ }
12020
11923
  }
12021
-
12022
- .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
12023
- --pf-c-menu--m-nav--c-menu--Left: auto;
12024
- right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
11924
+ :where(.pf-theme-dark) .pf-c-masthead {
11925
+ --pf-global--Color--100: #e0e0e0;
11926
+ --pf-global--Color--200: #aaabac;
11927
+ --pf-global--BorderColor--100: #444548;
11928
+ --pf-global--primary-color--100: #1fa7f8;
11929
+ --pf-global--link--Color: #1fa7f8;
11930
+ --pf-global--link--Color--hover: #73bcf7;
11931
+ --pf-global--BackgroundColor--100: #1b1d21;
12025
11932
  }
12026
11933
 
12027
- .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
12028
- --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
11934
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11935
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
12029
11936
  }
12030
11937
 
12031
- .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
12032
- --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
11938
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
11939
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
11940
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
11941
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
11942
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
11943
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
11944
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
11945
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
11946
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
11947
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
11948
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
11949
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
11950
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
12033
11951
  }
12034
11952
 
12035
- .pf-c-menu__breadcrumb {
12036
- display: flex;
12037
- align-items: center;
12038
- min-height: var(--pf-c-menu__breadcrumb--MinHeight);
12039
- padding: var(--pf-c-menu__breadcrumb--PaddingTop) var(--pf-c-menu__breadcrumb--PaddingRight) var(--pf-c-menu__breadcrumb--PaddingBottom) var(--pf-c-menu__breadcrumb--PaddingLeft);
11953
+ :where(.pf-theme-dark) .pf-c-masthead {
11954
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
11955
+ color: var(--pf-global--Color--100);
12040
11956
  }
12041
11957
 
12042
- .pf-c-menu__breadcrumb .pf-c-breadcrumb {
12043
- --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
12044
- --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
11958
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11959
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
12045
11960
  }
12046
11961
 
12047
- .pf-c-menu__content {
12048
- height: var(--pf-c-menu__content--Height);
12049
- max-height: var(--pf-c-menu__content--MaxHeight);
11962
+ .pf-c-menu {
11963
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
11964
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
11965
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11966
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11967
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
11968
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11969
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
12050
11970
  }
12051
11971
 
12052
- .pf-c-menu__content .pf-c-menu__content {
12053
- --pf-c-menu__content--Height: auto;
11972
+ .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
11973
+ --pf-hidden-visible--visible--Visibility: visible;
11974
+ --pf-hidden-visible--hidden--Display: none;
11975
+ --pf-hidden-visible--hidden--Visibility: hidden;
11976
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11977
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11978
+ display: var(--pf-hidden-visible--Display);
11979
+ visibility: var(--pf-hidden-visible--Visibility);
12054
11980
  }
12055
11981
 
12056
- .pf-c-menu__header {
12057
- --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
12058
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
12059
- --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
12060
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
12061
- padding-top: var(--pf-c-menu__header--PaddingTop);
12062
- padding-right: var(--pf-c-menu__header--PaddingRight);
12063
- padding-bottom: var(--pf-c-menu__header--PaddingBottom);
12064
- padding-left: var(--pf-c-menu__header--PaddingLeft);
11982
+ .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
11983
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11984
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12065
11985
  }
12066
11986
 
12067
- .pf-c-menu__header > .pf-c-menu__item {
12068
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
12069
- margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
12070
- margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
12071
- margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
12072
- margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
12073
- }
11987
+ @media screen and (min-width: 576px) {
11988
+ .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
11989
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11990
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11991
+ }
12074
11992
 
12075
- .pf-c-menu__header > .pf-c-menu__item:hover {
12076
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
11993
+ .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
11994
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11995
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11996
+ }
12077
11997
  }
11998
+ @media screen and (min-width: 768px) {
11999
+ .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
12000
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
12001
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12002
+ }
12078
12003
 
12079
- .pf-c-menu__header > .pf-c-menu__item:focus {
12080
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
12004
+ .pf-m-visible-on-md.pf-c-menu__group, .pf-m-visible-on-md.pf-c-menu__list-item, .pf-m-visible-on-md.pf-c-menu__list {
12005
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
12006
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
12007
+ }
12081
12008
  }
12009
+ @media screen and (min-width: 992px) {
12010
+ .pf-m-hidden-on-lg.pf-c-menu__group, .pf-m-hidden-on-lg.pf-c-menu__list-item, .pf-m-hidden-on-lg.pf-c-menu__list {
12011
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
12012
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12013
+ }
12082
12014
 
12083
- .pf-c-menu__header + .pf-c-menu__search {
12084
- --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
12015
+ .pf-m-visible-on-lg.pf-c-menu__group, .pf-m-visible-on-lg.pf-c-menu__list-item, .pf-m-visible-on-lg.pf-c-menu__list {
12016
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
12017
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
12018
+ }
12085
12019
  }
12020
+ @media screen and (min-width: 1200px) {
12021
+ .pf-m-hidden-on-xl.pf-c-menu__group, .pf-m-hidden-on-xl.pf-c-menu__list-item, .pf-m-hidden-on-xl.pf-c-menu__list {
12022
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
12023
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12024
+ }
12086
12025
 
12087
- .pf-c-menu__search {
12088
- padding-top: var(--pf-c-menu__search--PaddingTop);
12089
- padding-right: var(--pf-c-menu__search--PaddingRight);
12090
- padding-bottom: var(--pf-c-menu__search--PaddingBottom);
12091
- padding-left: var(--pf-c-menu__search--PaddingLeft);
12026
+ .pf-m-visible-on-xl.pf-c-menu__group, .pf-m-visible-on-xl.pf-c-menu__list-item, .pf-m-visible-on-xl.pf-c-menu__list {
12027
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
12028
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
12029
+ }
12092
12030
  }
12031
+ @media screen and (min-width: 1450px) {
12032
+ .pf-m-hidden-on-2xl.pf-c-menu__group, .pf-m-hidden-on-2xl.pf-c-menu__list-item, .pf-m-hidden-on-2xl.pf-c-menu__list {
12033
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
12034
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
12035
+ }
12093
12036
 
12094
- .pf-c-menu__list {
12095
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
12096
- padding-top: var(--pf-c-menu__list--PaddingTop);
12097
- padding-bottom: var(--pf-c-menu__list--PaddingBottom);
12037
+ .pf-m-visible-on-2xl.pf-c-menu__group, .pf-m-visible-on-2xl.pf-c-menu__list-item, .pf-m-visible-on-2xl.pf-c-menu__list {
12038
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
12039
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
12040
+ }
12098
12041
  }
12099
-
12100
- .pf-c-menu__list > .pf-c-divider {
12101
- margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
12102
- margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
12042
+ .pf-c-menu {
12043
+ color: var(--pf-global--Color--100);
12044
+ --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
12045
+ --pf-c-menu--BoxShadow: var(--pf-global--BoxShadow--md);
12046
+ --pf-c-menu--MinWidth: auto;
12047
+ --pf-c-menu--Width: auto;
12048
+ --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
12049
+ --pf-c-menu--Top: auto;
12050
+ --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
12051
+ --pf-c-menu--m-flyout__menu--Right: auto;
12052
+ --pf-c-menu--m-flyout__menu--Bottom: auto;
12053
+ --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
12054
+ --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
12055
+ --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
12056
+ --pf-c-menu--m-plain--BoxShadow: none;
12057
+ --pf-c-menu--m-flyout__menu--top-offset: 0px;
12058
+ --pf-c-menu--m-flyout__menu--left-offset: 0px;
12059
+ --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
12060
+ --pf-c-menu__content--Height: auto;
12061
+ --pf-c-menu__content--MaxHeight: none;
12062
+ --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
12063
+ --pf-c-menu--c-divider--MarginTop: 0;
12064
+ --pf-c-menu--c-divider--MarginBottom: 0;
12065
+ --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
12066
+ --pf-c-menu__list--c-divider--MarginBottom: var(--pf-global--spacer--sm);
12067
+ --pf-c-menu__header--PaddingTop: var(--pf-global--spacer--md);
12068
+ --pf-c-menu__header--PaddingRight: var(--pf-global--spacer--md);
12069
+ --pf-c-menu__header--PaddingBottom: var(--pf-global--spacer--md);
12070
+ --pf-c-menu__header--PaddingLeft: var(--pf-global--spacer--md);
12071
+ --pf-c-menu__header--c-menu__item--MarginTop: calc(var(--pf-c-menu__header--PaddingTop) * -1 / 2);
12072
+ --pf-c-menu__header--c-menu__item--MarginRight: calc(var(--pf-c-menu__header--PaddingRight) * -1 / 2);
12073
+ --pf-c-menu__header--c-menu__item--MarginBottom: calc(var(--pf-c-menu__header--PaddingBottom) * -1 / 2);
12074
+ --pf-c-menu__header--c-menu__item--MarginLeft: calc(var(--pf-c-menu__header--PaddingLeft) * -1 / 2);
12075
+ --pf-c-menu__header--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
12076
+ --pf-c-menu__header--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
12077
+ --pf-c-menu__header--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
12078
+ --pf-c-menu__header--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
12079
+ --pf-c-menu__header--c-menu__item--BackgroundColor: transparent;
12080
+ --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
12081
+ --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
12082
+ --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
12083
+ --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
12084
+ --pf-c-menu__search--PaddingBottom: var(--pf-global--spacer--md);
12085
+ --pf-c-menu__search--PaddingLeft: var(--pf-global--spacer--md);
12086
+ --pf-c-menu__header__search--PaddingTop: 0;
12087
+ --pf-c-menu__list--Display: block;
12088
+ --pf-c-menu__list--PaddingTop: var(--pf-global--spacer--sm);
12089
+ --pf-c-menu__list--PaddingBottom: var(--pf-global--spacer--sm);
12090
+ --pf-c-menu__list-item--Display: flex;
12091
+ --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
12092
+ --pf-c-menu__list-item--BackgroundColor: transparent;
12093
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
12094
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--200);
12095
+ --pf-c-menu__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm);
12096
+ --pf-c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
12097
+ --pf-c-menu__item--PaddingRight: var(--pf-global--spacer--md);
12098
+ --pf-c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
12099
+ --pf-c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
12100
+ --pf-c-menu__item--OutlineOffset: calc(0.125rem * -1);
12101
+ --pf-c-menu__item--FontSize: var(--pf-global--FontSize--md);
12102
+ --pf-c-menu__item--FontWeight: var(--pf-global--FontWeight--normal);
12103
+ --pf-c-menu__item--LineHeight: var(--pf-global--LineHeight--md);
12104
+ --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--disabled-color--100);
12105
+ --pf-c-menu__list-item--m-load__item--Color: var(--pf-global--link--Color);
12106
+ --pf-c-menu__group--Display: block;
12107
+ --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
12108
+ --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
12109
+ --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
12110
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12111
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
12112
+ --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
12113
+ --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
12114
+ --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
12115
+ --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
12116
+ --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
12117
+ --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
12118
+ --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
12119
+ --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
12120
+ --pf-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-global--spacer--sm);
12121
+ --pf-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-global--spacer--sm);
12122
+ --pf-c-menu__item-select-icon--MarginLeft: var(--pf-global--spacer--sm);
12123
+ --pf-c-menu__item-select-icon--Color: var(--pf-global--active-color--100);
12124
+ --pf-c-menu__item-select-icon--FontSize: var(--pf-global--icon--FontSize--sm);
12125
+ --pf-c-menu__item-external-icon--MarginLeft: var(--pf-global--spacer--sm);
12126
+ --pf-c-menu__item-external-icon--Color: var(--pf-global--link--Color);
12127
+ --pf-c-menu__item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
12128
+ --pf-c-menu__item-external-icon--Opacity: 0;
12129
+ --pf-c-menu__item-action--PaddingTop: var(--pf-global--spacer--sm);
12130
+ --pf-c-menu__item-action--PaddingRight: var(--pf-global--spacer--md);
12131
+ --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
12132
+ --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
12133
+ --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
12134
+ --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
12135
+ --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
12136
+ --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
12137
+ --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
12138
+ --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
12139
+ --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
12140
+ --pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
12141
+ --pf-c-menu__breadcrumb--PaddingRight: var(--pf-global--spacer--md);
12142
+ --pf-c-menu__breadcrumb--PaddingBottom: var(--pf-global--spacer--md);
12143
+ --pf-c-menu__breadcrumb--PaddingLeft: var(--pf-global--spacer--md);
12144
+ --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
12145
+ --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--md);
12146
+ --pf-c-menu--m-drilldown--c-menu--Top: 0;
12147
+ --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12148
+ --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
12149
+ --pf-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-global--TransitionDuration);
12150
+ --pf-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12151
+ --pf-c-menu--m-drilldown__content--Transition: transform var(--pf-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-c-menu--m-drilldown__content--TransitionDuration--height);
12152
+ --pf-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12153
+ --pf-c-menu--m-drilldown__list--Transition: transform var(--pf-c-menu--m-drilldown__list--TransitionDuration--transform);
12154
+ --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--xs);
12155
+ --pf-c-menu__footer--PaddingTop: var(--pf-global--spacer--md);
12156
+ --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
12157
+ --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
12158
+ --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
12159
+ --pf-c-menu__footer--BoxShadow: none;
12160
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
12161
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
12162
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
12163
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
12164
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
12165
+ top: var(--pf-c-menu--Top);
12166
+ z-index: var(--pf-c-menu--ZIndex);
12167
+ width: var(--pf-c-menu--Width);
12168
+ min-width: var(--pf-c-menu--MinWidth);
12169
+ background-color: var(--pf-c-menu--BackgroundColor);
12170
+ box-shadow: var(--pf-c-menu--BoxShadow);
12171
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
12172
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
12173
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
12174
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
12175
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12176
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12177
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12178
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
12179
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
12180
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
12181
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
12182
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
12183
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
12184
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
12185
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
12186
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
12187
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
12188
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
12189
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
12190
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
12191
+ --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
12192
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
12193
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
12194
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
12195
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
12196
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
12197
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
12103
12198
  }
12104
12199
 
12105
- .pf-c-menu__list-item {
12106
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
12107
- position: relative;
12108
- color: var(--pf-c-menu__list-item--Color);
12109
- background-color: var(--pf-c-menu__list-item--BackgroundColor);
12200
+ .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
12201
+ overflow: visible;
12110
12202
  }
12111
12203
 
12112
- .pf-c-menu__list-item:hover {
12113
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
12114
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
12204
+ .pf-c-menu .pf-c-divider {
12205
+ margin-top: var(--pf-c-menu--c-divider--MarginTop);
12206
+ margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
12115
12207
  }
12116
12208
 
12117
- .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
12118
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
12119
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
12209
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
12210
+ position: absolute;
12211
+ top: var(--pf-c-menu--m-flyout__menu--Top);
12212
+ right: var(--pf-c-menu--m-flyout__menu--Right);
12213
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
12214
+ left: var(--pf-c-menu--m-flyout__menu--Left);
12120
12215
  }
12121
12216
 
12122
- .pf-c-menu__list-item.pf-m-disabled {
12123
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12124
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12125
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
12126
- --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
12127
- pointer-events: none;
12217
+ .pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
12218
+ overflow-y: visible;
12128
12219
  }
12129
12220
 
12130
- .pf-c-menu__list-item.pf-m-load {
12131
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12132
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12133
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
12221
+ .pf-c-menu.pf-m-top {
12222
+ --pf-c-menu--m-flyout__menu--Top: auto;
12223
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
12134
12224
  }
12135
12225
 
12136
- .pf-c-menu__list-item.pf-m-loading {
12137
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12138
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12139
- justify-content: center;
12140
- padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
12141
- overflow: hidden;
12226
+ .pf-c-menu.pf-m-left {
12227
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
12228
+ --pf-c-menu--m-flyout__menu--Left: auto;
12142
12229
  }
12143
12230
 
12144
- .pf-c-menu__item {
12231
+ .pf-c-menu.pf-m-drilldown {
12145
12232
  display: flex;
12146
- flex-basis: 100%;
12147
12233
  flex-direction: column;
12148
- min-width: 0;
12149
- padding-top: var(--pf-c-menu__item--PaddingTop);
12150
- padding-right: var(--pf-c-menu__item--PaddingRight);
12151
- padding-bottom: var(--pf-c-menu__item--PaddingBottom);
12152
- padding-left: var(--pf-c-menu__item--PaddingLeft);
12153
- font-size: var(--pf-c-menu__item--FontSize);
12154
- font-weight: var(--pf-c-menu__item--FontWeight);
12155
- line-height: var(--pf-c-menu__item--LineHeight);
12156
- color: var(--pf-c-menu__item--Color);
12157
- text-align: left;
12158
- background-color: var(--pf-c-menu__item--BackgroundColor);
12159
- border: none;
12160
- }
12161
-
12162
- .pf-c-menu__item:hover {
12163
- text-decoration: none;
12164
12234
  }
12165
12235
 
12166
- .pf-c-menu__item:hover, .pf-c-menu__item:focus {
12167
- --pf-c-menu__item-external-icon--Opacity: 1;
12236
+ .pf-c-menu.pf-m-drilldown[hidden] {
12237
+ display: none;
12168
12238
  }
12169
12239
 
12170
- .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
12171
- opacity: 1;
12240
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
12241
+ flex-grow: 1;
12242
+ overflow: hidden;
12243
+ transition: var(--pf-c-menu--m-drilldown__content--Transition);
12172
12244
  }
12173
12245
 
12174
- label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12175
- cursor: pointer;
12246
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
12247
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
12248
+ transform: translateX(-100%);
12176
12249
  }
12177
12250
 
12178
- .pf-c-menu__item-main {
12179
- display: flex;
12180
- align-items: center;
12251
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
12252
+ --pf-c-menu--BoxShadow: none;
12253
+ position: absolute;
12254
+ top: var(--pf-c-menu--m-drilldown--c-menu--Top);
12255
+ left: 100%;
12181
12256
  width: 100%;
12257
+ transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
12182
12258
  }
12183
12259
 
12184
- .pf-c-menu__item-external-icon {
12185
- margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
12186
- font-size: var(--pf-c-menu__item-external-icon--FontSize);
12187
- color: var(--pf-c-menu__item-external-icon--Color);
12188
- opacity: var(--pf-c-menu__item-external-icon--Opacity);
12260
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
12261
+ transform: translateX(-100%);
12189
12262
  }
12190
12263
 
12191
- .pf-c-menu__item-text {
12264
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
12265
+ position: relative;
12192
12266
  overflow: hidden;
12193
- text-overflow: ellipsis;
12194
- white-space: nowrap;
12195
- flex-grow: 1;
12196
- }
12197
-
12198
- .pf-c-menu__group {
12199
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
12200
- }
12201
-
12202
- .pf-c-menu__group-title {
12203
- padding-top: var(--pf-c-menu__group-title--PaddingTop);
12204
- padding-right: var(--pf-c-menu__group-title--PaddingRight);
12205
- padding-left: var(--pf-c-menu__group-title--PaddingLeft);
12206
- font-size: var(--pf-c-menu__group-title--FontSize);
12207
- font-weight: var(--pf-c-menu__group-title--FontWeight);
12208
- color: var(--pf-c-menu__group-title--Color);
12267
+ transition: var(--pf-c-menu--m-drilldown__list--Transition);
12209
12268
  }
12210
12269
 
12211
- .pf-c-menu__item-description {
12212
- font-size: var(--pf-c-menu__item-description--FontSize);
12213
- color: var(--pf-c-menu__item-description--Color);
12214
- word-break: break-all;
12270
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
12271
+ --pf-c-menu__list--PaddingTop: 0;
12272
+ --pf-c-menu__list--PaddingBottom: 0;
12215
12273
  }
12216
12274
 
12217
- .pf-c-menu__item-icon {
12218
- margin-right: var(--pf-c-menu__item-icon--MarginRight);
12275
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
12276
+ z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
12219
12277
  }
12220
12278
 
12221
- .pf-c-menu__item-check {
12222
- display: flex;
12223
- align-items: center;
12224
- margin-right: var(--pf-c-menu__item-check--MarginRight);
12279
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
12280
+ overflow: visible;
12225
12281
  }
12226
12282
 
12227
- .pf-c-menu__item-toggle-icon {
12228
- padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
12229
- padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
12230
- color: var(--pf-c-menu__item-toggle-icon, inherit);
12283
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
12284
+ position: static;
12231
12285
  }
12232
12286
 
12233
- .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
12234
- margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
12287
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
12288
+ background-color: transparent;
12235
12289
  }
12236
12290
 
12237
- .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
12238
- margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
12291
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
12292
+ display: none;
12293
+ visibility: hidden;
12239
12294
  }
12240
12295
 
12241
- .pf-c-menu__item-select-icon {
12242
- margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
12243
- font-size: var(--pf-c-menu__item-select-icon--FontSize);
12244
- color: var(--pf-c-menu__item-select-icon--Color);
12245
- opacity: 0;
12296
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
12297
+ outline-offset: var(--pf-c-menu__item--OutlineOffset);
12246
12298
  }
12247
12299
 
12248
- .pf-c-menu__item-action {
12249
- display: flex;
12250
- padding-top: var(--pf-c-menu__item-action--PaddingTop);
12251
- padding-right: var(--pf-c-menu__item-action--PaddingRight);
12252
- padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
12253
- padding-left: var(--pf-c-menu__item-action--PaddingLeft);
12254
- color: var(--pf-c-menu__item-action--Color);
12255
- border: none;
12300
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
12301
+ overflow: visible;
12256
12302
  }
12257
12303
 
12258
- .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
12259
- font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
12304
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
12305
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
12306
+ display: none;
12260
12307
  }
12261
12308
 
12262
- .pf-c-menu__item-action.pf-m-favorited {
12263
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
12264
- --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
12309
+ .pf-c-menu.pf-m-plain {
12310
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
12265
12311
  }
12266
12312
 
12267
- .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
12268
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
12313
+ .pf-c-menu.pf-m-scrollable {
12314
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
12315
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
12316
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
12269
12317
  }
12270
12318
 
12271
- .pf-c-menu__item-action:disabled {
12272
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12319
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
12320
+ overflow-y: auto;
12273
12321
  }
12274
12322
 
12275
- .pf-c-menu__item-action-icon {
12276
- display: flex;
12277
- align-items: center;
12278
- height: var(--pf-c-menu__item-action-icon--Height);
12323
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
12324
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
12325
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
12326
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
12327
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
12328
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
12329
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
12330
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
12331
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
12332
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
12333
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
12334
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
12335
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
12336
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
12279
12337
  }
12280
12338
 
12281
- .pf-c-menu__footer {
12339
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
12282
12340
  position: relative;
12283
- padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
12284
- box-shadow: var(--pf-c-menu__footer--BoxShadow);
12341
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
12285
12342
  }
12286
12343
 
12287
- .pf-c-menu__footer::after {
12344
+ .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
12288
12345
  position: absolute;
12289
- top: 0;
12290
12346
  right: 0;
12291
12347
  bottom: 0;
12292
12348
  left: 0;
12293
- pointer-events: none;
12294
12349
  content: "";
12295
- border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
12350
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
12296
12351
  }
12297
12352
 
12298
- :where(.pf-theme-dark) .pf-c-menu {
12299
- --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
12300
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12301
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12302
- --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12353
+ .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
12354
+ position: absolute;
12355
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
12356
+ bottom: 0;
12357
+ left: 0;
12358
+ content: "";
12359
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
12303
12360
  }
12304
12361
 
12305
- .pf-c-login__footer, .pf-c-login__header {
12306
- --pf-global--Color--100: var(--pf-global--Color--light-100);
12307
- --pf-global--Color--200: var(--pf-global--Color--light-200);
12308
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
12309
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
12310
- --pf-global--link--Color: var(--pf-global--link--Color--light);
12311
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
12312
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
12362
+ .pf-c-menu.pf-m-nav .pf-c-menu {
12363
+ width: 100%;
12313
12364
  }
12314
12365
 
12315
- .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
12316
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12366
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
12367
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
12368
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
12317
12369
  }
12318
12370
 
12319
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
12320
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
12321
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
12322
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
12323
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
12324
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
12325
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
12326
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
12327
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
12328
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
12329
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
12330
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
12331
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
12332
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
12333
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
12334
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
12335
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
12371
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
12372
+ --pf-c-menu--m-nav--c-menu--Top: auto;
12373
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
12336
12374
  }
12337
12375
 
12338
- .pf-c-login {
12339
- --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
12340
- --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
12341
- --pf-c-login--xl--BackgroundImage: none;
12342
- --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
12343
- --pf-c-login__container--MaxWidth: 31.25rem;
12344
- --pf-c-login__container--xl--MaxWidth: none;
12345
- --pf-c-login__container--PaddingLeft: 6.125rem;
12346
- --pf-c-login__container--PaddingRight: 6.125rem;
12347
- --pf-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
12348
- --pf-c-login__header--MarginBottom: var(--pf-global--spacer--md);
12349
- --pf-c-login__header--PaddingLeft: var(--pf-global--spacer--md);
12350
- --pf-c-login__header--PaddingRight: var(--pf-global--spacer--md);
12351
- --pf-c-login__header--xl--MarginBottom: var(--pf-global--spacer--2xl);
12352
- --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
12353
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
12354
- --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
12355
- --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
12356
- --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
12357
- --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
12358
- --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
12359
- --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
12360
- --pf-c-login__main-header--PaddingLeft: var(--pf-global--spacer--xl);
12361
- --pf-c-login__main-header--md--PaddingRight: var(--pf-global--spacer--2xl);
12362
- --pf-c-login__main-header--md--PaddingLeft: var(--pf-global--spacer--2xl);
12363
- --pf-c-login__main-header--ColumnGap: var(--pf-global--spacer--md);
12364
- --pf-c-login__main-header--RowGap: var(--pf-global--spacer--md);
12365
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-global--spacer--sm);
12366
- --pf-c-login__main-header-desc--md--MarginBottom: 0;
12367
- --pf-c-login__main-header-desc--FontSize: var(--pf-global--FontSize--sm);
12368
- --pf-c-login__main-body--PaddingRight: var(--pf-global--spacer--xl);
12369
- --pf-c-login__main-body--PaddingBottom: var(--pf-global--spacer--xl);
12370
- --pf-c-login__main-body--PaddingLeft: var(--pf-global--spacer--xl);
12371
- --pf-c-login__main-body--md--PaddingRight: var(--pf-global--spacer--2xl);
12372
- --pf-c-login__main-body--md--PaddingLeft: var(--pf-global--spacer--2xl);
12373
- --pf-c-login__main-footer--PaddingBottom: var(--pf-global--spacer--3xl);
12374
- --pf-c-login__main-footer--c-title--MarginBottom: var(--pf-global--spacer--md);
12375
- --pf-c-login__main-footer-links--PaddingTop: var(--pf-global--spacer--sm);
12376
- --pf-c-login__main-footer-links--PaddingRight: var(--pf-global--spacer--3xl);
12377
- --pf-c-login__main-footer-links--PaddingBottom: var(--pf-global--spacer--xl);
12378
- --pf-c-login__main-footer-links--PaddingLeft: var(--pf-global--spacer--3xl);
12379
- --pf-c-login__main-footer-links-item--PaddingRight: var(--pf-global--spacer--md);
12380
- --pf-c-login__main-footer-links-item--PaddingLeft: var(--pf-global--spacer--md);
12381
- --pf-c-login__main-footer-links-item--MarginBottom: var(--pf-global--spacer--sm);
12382
- --pf-c-login__main-footer-links-item-link-svg--Fill: var(--pf-global--icon--Color--light);
12383
- --pf-c-login__main-footer-links-item-link-svg--Width: var(--pf-global--icon--FontSize--lg);
12384
- --pf-c-login__main-footer-links-item-link-svg--Height: var(--pf-global--icon--FontSize--lg);
12385
- --pf-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-global--icon--Color--dark);
12386
- --pf-c-login__main-footer-band--PaddingTop: var(--pf-global--spacer--lg);
12387
- --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
12388
- --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
12389
- --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
12390
- --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
12391
- --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
12392
- --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
12393
- --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
12394
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-global--spacer--md);
12395
- --pf-c-login__footer--c-list--xl--PaddingTop: var(--pf-global--spacer--2xl);
12376
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
12377
+ --pf-c-menu--m-nav--c-menu--Left: auto;
12378
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
12379
+ }
12380
+
12381
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
12382
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
12383
+ }
12384
+
12385
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
12386
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
12387
+ }
12388
+
12389
+ .pf-c-menu__breadcrumb {
12396
12390
  display: flex;
12397
- justify-content: center;
12398
- min-height: 100vh;
12399
- padding-top: var(--pf-c-login--PaddingTop);
12400
- padding-bottom: var(--pf-c-login--PaddingBottom);
12391
+ align-items: center;
12392
+ min-height: var(--pf-c-menu__breadcrumb--MinHeight);
12393
+ padding: var(--pf-c-menu__breadcrumb--PaddingTop) var(--pf-c-menu__breadcrumb--PaddingRight) var(--pf-c-menu__breadcrumb--PaddingBottom) var(--pf-c-menu__breadcrumb--PaddingLeft);
12401
12394
  }
12402
12395
 
12403
- @media (min-width: 1200px) {
12404
- .pf-c-login {
12405
- --pf-c-login__container--MaxWidth: var(--pf-c-login__container--xl--MaxWidth);
12406
- }
12396
+ .pf-c-menu__breadcrumb .pf-c-breadcrumb {
12397
+ --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
12398
+ --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
12407
12399
  }
12408
- @media (min-width: 576px) {
12409
- .pf-c-login {
12410
- --pf-c-login__header--PaddingRight: 0;
12411
- --pf-c-login__header--PaddingLeft: 0;
12412
- }
12400
+
12401
+ .pf-c-menu__content {
12402
+ height: var(--pf-c-menu__content--Height);
12403
+ max-height: var(--pf-c-menu__content--MaxHeight);
12413
12404
  }
12414
- @media (min-width: 1200px) {
12415
- .pf-c-login {
12416
- --pf-c-login__header--MarginBottom: var(--pf-c-login__header--xl--MarginBottom);
12417
- --pf-c-login__header--c-brand--MarginBottom: var(--pf-c-login__header--c-brand--xl--MarginBottom);
12418
- }
12405
+
12406
+ .pf-c-menu__content .pf-c-menu__content {
12407
+ --pf-c-menu__content--Height: auto;
12419
12408
  }
12420
- @media (min-width: 1200px) {
12421
- .pf-c-login {
12422
- --pf-c-login__main--MarginBottom: 0;
12423
- }
12409
+
12410
+ .pf-c-menu__header {
12411
+ --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
12412
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
12413
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
12414
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
12415
+ padding-top: var(--pf-c-menu__header--PaddingTop);
12416
+ padding-right: var(--pf-c-menu__header--PaddingRight);
12417
+ padding-bottom: var(--pf-c-menu__header--PaddingBottom);
12418
+ padding-left: var(--pf-c-menu__header--PaddingLeft);
12424
12419
  }
12425
- @media (min-width: 768px) {
12426
- .pf-c-login {
12427
- --pf-c-login__main-header--PaddingRight: var(--pf-c-login__main-header--md--PaddingRight);
12428
- --pf-c-login__main-header--PaddingLeft: var(--pf-c-login__main-header--md--PaddingLeft);
12429
- --pf-c-login__main-header-desc--MarginBottom: var(--pf-c-login__main-header-desc--md--MarginBottom);
12430
- }
12420
+
12421
+ .pf-c-menu__header > .pf-c-menu__item {
12422
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
12423
+ margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
12424
+ margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
12425
+ margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
12426
+ margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
12431
12427
  }
12432
- @media (min-width: 768px) {
12433
- .pf-c-login {
12434
- --pf-c-login__main-body--PaddingRight: var(--pf-c-login__main-body--md--PaddingRight);
12435
- --pf-c-login__main-body--PaddingLeft: var(--pf-c-login__main-body--md--PaddingLeft);
12436
- }
12428
+
12429
+ .pf-c-menu__header > .pf-c-menu__item:hover {
12430
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
12437
12431
  }
12438
- @media (min-width: 576px) {
12439
- .pf-c-login {
12440
- --pf-c-login__footer--PaddingRight: 0;
12441
- --pf-c-login__footer--PaddingLeft: 0;
12442
- }
12432
+
12433
+ .pf-c-menu__header > .pf-c-menu__item:focus {
12434
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
12443
12435
  }
12444
- @media (min-width: 1200px) {
12445
- .pf-c-login {
12446
- --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
12447
- }
12436
+
12437
+ .pf-c-menu__header + .pf-c-menu__search {
12438
+ --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
12448
12439
  }
12449
- @media (min-width: 1200px) {
12450
- .pf-c-login {
12451
- background-image: var(--pf-c-login--xl--BackgroundImage);
12452
- }
12440
+
12441
+ .pf-c-menu__search {
12442
+ padding-top: var(--pf-c-menu__search--PaddingTop);
12443
+ padding-right: var(--pf-c-menu__search--PaddingRight);
12444
+ padding-bottom: var(--pf-c-menu__search--PaddingBottom);
12445
+ padding-left: var(--pf-c-menu__search--PaddingLeft);
12453
12446
  }
12454
- @media (min-width: 576px) {
12455
- .pf-c-login {
12456
- align-items: center;
12457
- }
12447
+
12448
+ .pf-c-menu__list {
12449
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
12450
+ padding-top: var(--pf-c-menu__list--PaddingTop);
12451
+ padding-bottom: var(--pf-c-menu__list--PaddingBottom);
12458
12452
  }
12459
- .pf-c-login__container {
12460
- width: 100%;
12461
- max-width: var(--pf-c-login__container--MaxWidth);
12453
+
12454
+ .pf-c-menu__list > .pf-c-divider {
12455
+ margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
12456
+ margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
12462
12457
  }
12463
12458
 
12464
- @media (min-width: 1200px) {
12465
- .pf-c-login__container {
12466
- display: grid;
12467
- justify-content: center;
12468
- grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
12469
- grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
12470
- grid-template-areas: "main header" "main footer" "main .";
12471
- padding-right: var(--pf-c-login__container--PaddingRight);
12472
- padding-left: var(--pf-c-login__container--PaddingLeft);
12473
- }
12459
+ .pf-c-menu__list-item {
12460
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
12461
+ position: relative;
12462
+ color: var(--pf-c-menu__list-item--Color);
12463
+ background-color: var(--pf-c-menu__list-item--BackgroundColor);
12464
+ }
12465
+
12466
+ .pf-c-menu__list-item:hover {
12467
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
12468
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
12474
12469
  }
12475
- .pf-c-login__header {
12476
- color: var(--pf-global--Color--100);
12477
- grid-area: header;
12478
- padding-right: var(--pf-c-login__header--PaddingRight);
12479
- padding-left: var(--pf-c-login__header--PaddingLeft);
12470
+
12471
+ .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
12472
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
12473
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
12480
12474
  }
12481
12475
 
12482
- @media (min-width: 1200px) {
12483
- .pf-c-login__header {
12484
- margin-top: var(--pf-c-login__header--xl--MarginTop);
12485
- }
12476
+ .pf-c-menu__list-item.pf-m-disabled {
12477
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12478
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12479
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
12480
+ --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
12481
+ pointer-events: none;
12486
12482
  }
12487
- .pf-c-login__header .pf-c-brand {
12488
- margin-bottom: var(--pf-c-login__header--c-brand--MarginBottom);
12483
+
12484
+ .pf-c-menu__list-item.pf-m-load {
12485
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12486
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12487
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
12489
12488
  }
12490
12489
 
12491
- .pf-c-login__main {
12492
- align-self: start;
12493
- margin-bottom: var(--pf-c-login__main--MarginBottom);
12494
- background-color: var(--pf-c-login__main--BackgroundColor);
12495
- grid-area: main;
12490
+ .pf-c-menu__list-item.pf-m-loading {
12491
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12492
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12493
+ justify-content: center;
12494
+ padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
12495
+ overflow: hidden;
12496
12496
  }
12497
12497
 
12498
- .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
12499
- padding-top: var(--pf-c-login__main-header--PaddingTop);
12498
+ .pf-c-menu__item {
12499
+ display: flex;
12500
+ flex-basis: 100%;
12501
+ flex-direction: column;
12502
+ min-width: 0;
12503
+ padding-top: var(--pf-c-menu__item--PaddingTop);
12504
+ padding-right: var(--pf-c-menu__item--PaddingRight);
12505
+ padding-bottom: var(--pf-c-menu__item--PaddingBottom);
12506
+ padding-left: var(--pf-c-menu__item--PaddingLeft);
12507
+ font-size: var(--pf-c-menu__item--FontSize);
12508
+ font-weight: var(--pf-c-menu__item--FontWeight);
12509
+ line-height: var(--pf-c-menu__item--LineHeight);
12510
+ color: var(--pf-c-menu__item--Color);
12511
+ text-align: left;
12512
+ background-color: var(--pf-c-menu__item--BackgroundColor);
12513
+ border: none;
12500
12514
  }
12501
12515
 
12502
- .pf-c-login__main > :last-child:not(.pf-c-login__main-footer) {
12503
- padding-bottom: var(--pf-c-login__main-footer--PaddingBottom);
12516
+ .pf-c-menu__item:hover {
12517
+ text-decoration: none;
12504
12518
  }
12505
12519
 
12506
- .pf-c-login__main-header {
12507
- display: grid;
12508
- grid-template-columns: 100%;
12509
- column-gap: var(--pf-c-login__main-header--ColumnGap);
12510
- row-gap: var(--pf-c-login__main-header--RowGap);
12511
- align-items: center;
12512
- 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);
12520
+ .pf-c-menu__item:hover, .pf-c-menu__item:focus {
12521
+ --pf-c-menu__item-external-icon--Opacity: 1;
12513
12522
  }
12514
12523
 
12515
- @media (min-width: 768px) {
12516
- .pf-c-login__main-header {
12517
- grid-template-columns: 1fr auto;
12518
- }
12524
+ .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
12525
+ opacity: 1;
12519
12526
  }
12520
- .pf-c-login__main-header-utilities,
12521
- .pf-c-login__main-header .pf-c-dropdown {
12522
- grid-column: auto;
12523
- grid-row: auto;
12527
+
12528
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12529
+ cursor: pointer;
12524
12530
  }
12525
12531
 
12526
- @media (min-width: 768px) {
12527
- .pf-c-login__main-header-utilities,
12528
- .pf-c-login__main-header .pf-c-dropdown {
12529
- grid-column: 2/3;
12530
- grid-row: 1;
12531
- }
12532
+ .pf-c-menu__item-main {
12533
+ display: flex;
12534
+ align-items: center;
12535
+ width: 100%;
12532
12536
  }
12533
- .pf-c-login__main-header-utilities .pf-c-dropdown {
12534
- grid-column: auto;
12535
- grid-row: auto;
12537
+
12538
+ .pf-c-menu__item-external-icon {
12539
+ margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
12540
+ font-size: var(--pf-c-menu__item-external-icon--FontSize);
12541
+ color: var(--pf-c-menu__item-external-icon--Color);
12542
+ opacity: var(--pf-c-menu__item-external-icon--Opacity);
12536
12543
  }
12537
12544
 
12538
- .pf-c-login__main-header-desc {
12539
- margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
12540
- font-size: var(--pf-c-login__main-header-desc--FontSize);
12541
- grid-column: 1/-1;
12545
+ .pf-c-menu__item-text {
12546
+ overflow: hidden;
12547
+ text-overflow: ellipsis;
12548
+ white-space: nowrap;
12549
+ flex-grow: 1;
12542
12550
  }
12543
12551
 
12544
- .pf-c-login__main-body {
12545
- padding-right: var(--pf-c-login__main-body--PaddingRight);
12546
- padding-bottom: var(--pf-c-login__main-body--PaddingBottom);
12547
- padding-left: var(--pf-c-login__main-body--PaddingLeft);
12552
+ .pf-c-menu__group {
12553
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
12548
12554
  }
12549
12555
 
12550
- .pf-c-login__main-footer {
12551
- display: flex;
12552
- flex-wrap: wrap;
12556
+ .pf-c-menu__group-title {
12557
+ padding-top: var(--pf-c-menu__group-title--PaddingTop);
12558
+ padding-right: var(--pf-c-menu__group-title--PaddingRight);
12559
+ padding-left: var(--pf-c-menu__group-title--PaddingLeft);
12560
+ font-size: var(--pf-c-menu__group-title--FontSize);
12561
+ font-weight: var(--pf-c-menu__group-title--FontWeight);
12562
+ color: var(--pf-c-menu__group-title--Color);
12553
12563
  }
12554
12564
 
12555
- .pf-c-login__main-footer .pf-c-title {
12556
- margin-bottom: var(--pf-c-login__main-footer--c-title--MarginBottom);
12557
- text-align: center;
12565
+ .pf-c-menu__item-description {
12566
+ font-size: var(--pf-c-menu__item-description--FontSize);
12567
+ color: var(--pf-c-menu__item-description--Color);
12568
+ word-break: break-all;
12558
12569
  }
12559
12570
 
12560
- .pf-c-login__main-footer > * {
12561
- flex-basis: 100%;
12571
+ .pf-c-menu__item-icon {
12572
+ margin-right: var(--pf-c-menu__item-icon--MarginRight);
12562
12573
  }
12563
12574
 
12564
- .pf-c-login__main-footer-links {
12575
+ .pf-c-menu__item-check {
12565
12576
  display: flex;
12566
- flex-wrap: wrap;
12567
- justify-content: center;
12568
- 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);
12577
+ align-items: center;
12578
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
12569
12579
  }
12570
12580
 
12571
- .pf-c-login__main-footer-links-item {
12572
- padding-right: var(--pf-c-login__main-footer-links-item--PaddingRight);
12573
- padding-left: var(--pf-c-login__main-footer-links-item--PaddingLeft);
12574
- margin-bottom: var(--pf-c-login__main-footer-links-item--MarginBottom);
12581
+ .pf-c-menu__item-toggle-icon {
12582
+ padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
12583
+ padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
12584
+ color: var(--pf-c-menu__item-toggle-icon, inherit);
12575
12585
  }
12576
12586
 
12577
- .pf-c-login__main-footer-links-item-link svg {
12578
- fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
12579
- width: 100%;
12580
- max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
12581
- height: 100%;
12582
- max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
12587
+ .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
12588
+ margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
12583
12589
  }
12584
12590
 
12585
- .pf-c-login__main-footer-links-item-link:hover svg {
12586
- fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
12591
+ .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
12592
+ margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
12587
12593
  }
12588
12594
 
12589
- .pf-c-login__main-footer-band {
12590
- 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);
12591
- text-align: center;
12592
- background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
12595
+ .pf-c-menu__item-select-icon {
12596
+ margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
12597
+ font-size: var(--pf-c-menu__item-select-icon--FontSize);
12598
+ color: var(--pf-c-menu__item-select-icon--Color);
12599
+ opacity: 0;
12593
12600
  }
12594
12601
 
12595
- .pf-c-login__main-footer-band > * + * {
12596
- padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
12602
+ .pf-c-menu__item-action {
12603
+ display: flex;
12604
+ padding-top: var(--pf-c-menu__item-action--PaddingTop);
12605
+ padding-right: var(--pf-c-menu__item-action--PaddingRight);
12606
+ padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
12607
+ padding-left: var(--pf-c-menu__item-action--PaddingLeft);
12608
+ color: var(--pf-c-menu__item-action--Color);
12609
+ border: none;
12597
12610
  }
12598
12611
 
12599
- .pf-c-login__footer {
12600
- color: var(--pf-global--Color--100);
12601
- grid-area: footer;
12602
- padding-right: var(--pf-c-login__footer--PaddingRight);
12603
- padding-left: var(--pf-c-login__footer--PaddingLeft);
12612
+ .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
12613
+ font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
12604
12614
  }
12605
12615
 
12606
- .pf-c-login__footer .pf-c-list a {
12607
- color: unset;
12616
+ .pf-c-menu__item-action.pf-m-favorited {
12617
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
12618
+ --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
12608
12619
  }
12609
12620
 
12610
- .pf-c-login__footer .pf-c-list:not(:only-child) {
12611
- padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
12621
+ .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
12622
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
12612
12623
  }
12613
12624
 
12614
- :where(.pf-theme-dark) .pf-c-login__header,
12615
- :where(.pf-theme-dark) .pf-c-login__footer {
12616
- --pf-global--Color--100: #e0e0e0;
12617
- --pf-global--Color--200: #aaabac;
12618
- --pf-global--BorderColor--100: #444548;
12619
- --pf-global--primary-color--100: #1fa7f8;
12620
- --pf-global--link--Color: #1fa7f8;
12621
- --pf-global--link--Color--hover: #73bcf7;
12622
- --pf-global--BackgroundColor--100: #1b1d21;
12625
+ .pf-c-menu__item-action:disabled {
12626
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12623
12627
  }
12624
12628
 
12625
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
12626
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
12627
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
12629
+ .pf-c-menu__item-action-icon {
12630
+ display: flex;
12631
+ align-items: center;
12632
+ height: var(--pf-c-menu__item-action-icon--Height);
12628
12633
  }
12629
12634
 
12630
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
12631
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
12632
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
12633
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
12634
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
12635
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
12636
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
12637
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12638
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12639
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12640
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
12641
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
12642
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
12643
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
12635
+ .pf-c-menu__footer {
12636
+ position: relative;
12637
+ padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
12638
+ box-shadow: var(--pf-c-menu__footer--BoxShadow);
12644
12639
  }
12645
12640
 
12646
- :where(.pf-theme-dark) .pf-c-login__header,
12647
- :where(.pf-theme-dark) .pf-c-login__footer {
12648
- color: var(--pf-global--Color--100);
12641
+ .pf-c-menu__footer::after {
12642
+ position: absolute;
12643
+ top: 0;
12644
+ right: 0;
12645
+ bottom: 0;
12646
+ left: 0;
12647
+ pointer-events: none;
12648
+ content: "";
12649
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
12650
+ }
12651
+
12652
+ :where(.pf-theme-dark) .pf-c-menu {
12653
+ --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
12654
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12655
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12656
+ --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12649
12657
  }
12650
12658
 
12651
12659
  .pf-c-menu-toggle {
@@ -17265,8 +17273,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17265
17273
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
17266
17274
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
17267
17275
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
17268
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
17269
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
17276
+ --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
17270
17277
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
17271
17278
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
17272
17279
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -17361,10 +17368,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17361
17368
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
17362
17369
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
17363
17370
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
17364
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
17371
+ --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
17372
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
17365
17373
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
17366
17374
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
17367
- --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
17375
+ --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
17368
17376
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
17369
17377
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
17370
17378
  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -17512,7 +17520,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17512
17520
  }
17513
17521
 
17514
17522
  .pf-c-progress-stepper__step-main {
17523
+ min-width: 0;
17515
17524
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
17525
+ text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
17526
+ overflow-wrap: anywhere;
17516
17527
  }
17517
17528
 
17518
17529
  .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {