@patternfly/react-core 4.242.3 → 4.242.4

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 +8 -0
  2. package/dist/umd/react-core.min.css +1357 -1352
  3. package/dist/umd/react-core.min.js +1 -1
  4. package/package.json +6 -6
package/dist/umd/react-core.min.css CHANGED
@@ -1851,6 +1851,70 @@ textarea.pf-c-form-control {
1851
1851
  color: var(--pf-global--palette--black-900);
1852
1852
  }
1853
1853
 
1854
+ .pf-c-brand {
1855
+ --pf-c-brand--Width: auto;
1856
+ --pf-c-brand--Height: auto;
1857
+ width: var(--pf-c-brand--Width--base);
1858
+ height: var(--pf-c-brand--Height--base);
1859
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1860
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1861
+ }
1862
+
1863
+ @media (min-width: 576px) {
1864
+ .pf-c-brand {
1865
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1866
+ }
1867
+ }
1868
+ @media (min-width: 768px) {
1869
+ .pf-c-brand {
1870
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1871
+ }
1872
+ }
1873
+ @media (min-width: 992px) {
1874
+ .pf-c-brand {
1875
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1876
+ }
1877
+ }
1878
+ @media (min-width: 1200px) {
1879
+ .pf-c-brand {
1880
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1881
+ }
1882
+ }
1883
+ @media (min-width: 1450px) {
1884
+ .pf-c-brand {
1885
+ --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
1886
+ }
1887
+ }
1888
+ @media (min-width: 576px) {
1889
+ .pf-c-brand {
1890
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
1891
+ }
1892
+ }
1893
+ @media (min-width: 768px) {
1894
+ .pf-c-brand {
1895
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
1896
+ }
1897
+ }
1898
+ @media (min-width: 992px) {
1899
+ .pf-c-brand {
1900
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
1901
+ }
1902
+ }
1903
+ @media (min-width: 1200px) {
1904
+ .pf-c-brand {
1905
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
1906
+ }
1907
+ }
1908
+ @media (min-width: 1450px) {
1909
+ .pf-c-brand {
1910
+ --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
1911
+ }
1912
+ }
1913
+ .pf-c-brand.pf-m-picture {
1914
+ display: inline-flex;
1915
+ max-width: 100%;
1916
+ }
1917
+
1854
1918
  .pf-c-breadcrumb {
1855
1919
  --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
1856
1920
  --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
@@ -1958,70 +2022,6 @@ button.pf-c-breadcrumb__link {
1958
2022
  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
1959
2023
  }
1960
2024
 
1961
- .pf-c-brand {
1962
- --pf-c-brand--Width: auto;
1963
- --pf-c-brand--Height: auto;
1964
- width: var(--pf-c-brand--Width--base);
1965
- height: var(--pf-c-brand--Height--base);
1966
- --pf-c-brand--Width--base: var(--pf-c-brand--Width);
1967
- --pf-c-brand--Height--base: var(--pf-c-brand--Height);
1968
- }
1969
-
1970
- @media (min-width: 576px) {
1971
- .pf-c-brand {
1972
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
1973
- }
1974
- }
1975
- @media (min-width: 768px) {
1976
- .pf-c-brand {
1977
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
1978
- }
1979
- }
1980
- @media (min-width: 992px) {
1981
- .pf-c-brand {
1982
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
1983
- }
1984
- }
1985
- @media (min-width: 1200px) {
1986
- .pf-c-brand {
1987
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
1988
- }
1989
- }
1990
- @media (min-width: 1450px) {
1991
- .pf-c-brand {
1992
- --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
1993
- }
1994
- }
1995
- @media (min-width: 576px) {
1996
- .pf-c-brand {
1997
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
1998
- }
1999
- }
2000
- @media (min-width: 768px) {
2001
- .pf-c-brand {
2002
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
2003
- }
2004
- }
2005
- @media (min-width: 992px) {
2006
- .pf-c-brand {
2007
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
2008
- }
2009
- }
2010
- @media (min-width: 1200px) {
2011
- .pf-c-brand {
2012
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
2013
- }
2014
- }
2015
- @media (min-width: 1450px) {
2016
- .pf-c-brand {
2017
- --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
2018
- }
2019
- }
2020
- .pf-c-brand.pf-m-picture {
2021
- display: inline-flex;
2022
- max-width: 100%;
2023
- }
2024
-
2025
2025
  .pf-c-button {
2026
2026
  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
2027
2027
  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
@@ -11202,7 +11202,7 @@ ul.pf-c-list {
11202
11202
  color: var(--pf-global--Color--100);
11203
11203
  }
11204
11204
 
11205
- .pf-c-menu {
11205
+ .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11206
11206
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
11207
11207
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
11208
11208
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -11212,1448 +11212,1453 @@ ul.pf-c-list {
11212
11212
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11213
11213
  }
11214
11214
 
11215
- .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
11216
- --pf-hidden-visible--visible--Visibility: visible;
11217
- --pf-hidden-visible--hidden--Display: none;
11218
- --pf-hidden-visible--hidden--Visibility: hidden;
11219
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11220
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11221
- display: var(--pf-hidden-visible--Display);
11222
- visibility: var(--pf-hidden-visible--Visibility);
11223
- }
11224
-
11225
- .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
11226
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11227
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11228
- }
11229
-
11230
- @media screen and (min-width: 576px) {
11231
- .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 {
11232
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11233
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11234
- }
11235
-
11236
- .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 {
11237
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11238
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11239
- }
11240
- }
11241
- @media screen and (min-width: 768px) {
11242
- .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 {
11243
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11244
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11245
- }
11246
-
11247
- .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 {
11248
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11249
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11250
- }
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);
11251
11223
  }
11252
- @media screen and (min-width: 992px) {
11253
- .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 {
11254
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11255
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11256
- }
11257
11224
 
11258
- .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 {
11259
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11260
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11261
- }
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);
11262
11227
  }
11263
- @media screen and (min-width: 1200px) {
11264
- .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 {
11265
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11266
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11267
- }
11268
11228
 
11269
- .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 {
11270
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11271
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11272
- }
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);
11273
11246
  }
11274
- @media screen and (min-width: 1450px) {
11275
- .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 {
11276
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
11277
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
11278
- }
11279
11247
 
11280
- .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 {
11281
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
11282
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
11283
- }
11284
- }
11285
- .pf-c-menu {
11286
- color: var(--pf-global--Color--100);
11287
- --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
11288
- --pf-c-menu--BoxShadow: var(--pf-global--BoxShadow--md);
11289
- --pf-c-menu--MinWidth: auto;
11290
- --pf-c-menu--Width: auto;
11291
- --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
11292
- --pf-c-menu--Top: auto;
11293
- --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
11294
- --pf-c-menu--m-flyout__menu--Right: auto;
11295
- --pf-c-menu--m-flyout__menu--Bottom: auto;
11296
- --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
11297
- --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
11298
- --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
11299
- --pf-c-menu--m-plain--BoxShadow: none;
11300
- --pf-c-menu--m-flyout__menu--top-offset: 0px;
11301
- --pf-c-menu--m-flyout__menu--left-offset: 0px;
11302
- --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
11303
- --pf-c-menu__content--Height: auto;
11304
- --pf-c-menu__content--MaxHeight: none;
11305
- --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
11306
- --pf-c-menu--c-divider--MarginTop: 0;
11307
- --pf-c-menu--c-divider--MarginBottom: 0;
11308
- --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
11309
- --pf-c-menu__list--c-divider--MarginBottom: var(--pf-global--spacer--sm);
11310
- --pf-c-menu__header--PaddingTop: var(--pf-global--spacer--md);
11311
- --pf-c-menu__header--PaddingRight: var(--pf-global--spacer--md);
11312
- --pf-c-menu__header--PaddingBottom: var(--pf-global--spacer--md);
11313
- --pf-c-menu__header--PaddingLeft: var(--pf-global--spacer--md);
11314
- --pf-c-menu__header--c-menu__item--MarginTop: calc(var(--pf-c-menu__header--PaddingTop) * -1 / 2);
11315
- --pf-c-menu__header--c-menu__item--MarginRight: calc(var(--pf-c-menu__header--PaddingRight) * -1 / 2);
11316
- --pf-c-menu__header--c-menu__item--MarginBottom: calc(var(--pf-c-menu__header--PaddingBottom) * -1 / 2);
11317
- --pf-c-menu__header--c-menu__item--MarginLeft: calc(var(--pf-c-menu__header--PaddingLeft) * -1 / 2);
11318
- --pf-c-menu__header--c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
11319
- --pf-c-menu__header--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
11320
- --pf-c-menu__header--c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
11321
- --pf-c-menu__header--c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
11322
- --pf-c-menu__header--c-menu__item--BackgroundColor: transparent;
11323
- --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
11324
- --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
11325
- --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
11326
- --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
11327
- --pf-c-menu__search--PaddingBottom: var(--pf-global--spacer--md);
11328
- --pf-c-menu__search--PaddingLeft: var(--pf-global--spacer--md);
11329
- --pf-c-menu__header__search--PaddingTop: 0;
11330
- --pf-c-menu__list--Display: block;
11331
- --pf-c-menu__list--PaddingTop: var(--pf-global--spacer--sm);
11332
- --pf-c-menu__list--PaddingBottom: var(--pf-global--spacer--sm);
11333
- --pf-c-menu__list-item--Display: flex;
11334
- --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
11335
- --pf-c-menu__list-item--BackgroundColor: transparent;
11336
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
11337
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--200);
11338
- --pf-c-menu__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm);
11339
- --pf-c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
11340
- --pf-c-menu__item--PaddingRight: var(--pf-global--spacer--md);
11341
- --pf-c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
11342
- --pf-c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
11343
- --pf-c-menu__item--OutlineOffset: calc(0.125rem * -1);
11344
- --pf-c-menu__item--FontSize: var(--pf-global--FontSize--md);
11345
- --pf-c-menu__item--FontWeight: var(--pf-global--FontWeight--normal);
11346
- --pf-c-menu__item--LineHeight: var(--pf-global--LineHeight--md);
11347
- --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--disabled-color--100);
11348
- --pf-c-menu__list-item--m-load__item--Color: var(--pf-global--link--Color);
11349
- --pf-c-menu__group--Display: block;
11350
- --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
11351
- --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
11352
- --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
11353
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
11354
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
11355
- --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
11356
- --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
11357
- --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
11358
- --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
11359
- --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
11360
- --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
11361
- --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
11362
- --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
11363
- --pf-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-global--spacer--sm);
11364
- --pf-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-global--spacer--sm);
11365
- --pf-c-menu__item-select-icon--MarginLeft: var(--pf-global--spacer--sm);
11366
- --pf-c-menu__item-select-icon--Color: var(--pf-global--active-color--100);
11367
- --pf-c-menu__item-select-icon--FontSize: var(--pf-global--icon--FontSize--sm);
11368
- --pf-c-menu__item-external-icon--MarginLeft: var(--pf-global--spacer--sm);
11369
- --pf-c-menu__item-external-icon--Color: var(--pf-global--link--Color);
11370
- --pf-c-menu__item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
11371
- --pf-c-menu__item-external-icon--Opacity: 0;
11372
- --pf-c-menu__item-action--PaddingTop: var(--pf-global--spacer--sm);
11373
- --pf-c-menu__item-action--PaddingRight: var(--pf-global--spacer--md);
11374
- --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
11375
- --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
11376
- --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
11377
- --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
11378
- --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
11379
- --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
11380
- --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
11381
- --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
11382
- --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
11383
- --pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
11384
- --pf-c-menu__breadcrumb--PaddingRight: var(--pf-global--spacer--md);
11385
- --pf-c-menu__breadcrumb--PaddingBottom: var(--pf-global--spacer--md);
11386
- --pf-c-menu__breadcrumb--PaddingLeft: var(--pf-global--spacer--md);
11387
- --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
11388
- --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--md);
11389
- --pf-c-menu--m-drilldown--c-menu--Top: 0;
11390
- --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11391
- --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
11392
- --pf-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-global--TransitionDuration);
11393
- --pf-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11394
- --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);
11395
- --pf-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-global--TransitionDuration);
11396
- --pf-c-menu--m-drilldown__list--Transition: transform var(--pf-c-menu--m-drilldown__list--TransitionDuration--transform);
11397
- --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--xs);
11398
- --pf-c-menu__footer--PaddingTop: var(--pf-global--spacer--md);
11399
- --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
11400
- --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
11401
- --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
11402
- --pf-c-menu__footer--BoxShadow: none;
11403
- --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
11404
- --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
11405
- --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
11406
- --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
11407
- --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11408
- top: var(--pf-c-menu--Top);
11409
- z-index: var(--pf-c-menu--ZIndex);
11410
- width: var(--pf-c-menu--Width);
11411
- min-width: var(--pf-c-menu--MinWidth);
11412
- background-color: var(--pf-c-menu--BackgroundColor);
11413
- box-shadow: var(--pf-c-menu--BoxShadow);
11414
- --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
11415
- --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
11416
- --pf-c-menu--m-nav__list--PaddingTop: 0;
11417
- --pf-c-menu--m-nav__list--PaddingBottom: 0;
11418
- --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11419
- --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11420
- --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
11421
- --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
11422
- --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
11423
- --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
11424
- --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
11425
- --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
11426
- --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
11427
- --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11428
- --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
11429
- --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
11430
- --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
11431
- --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
11432
- --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
11433
- --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
11434
- --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
11435
- --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
11436
- --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
11437
- --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
11438
- --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
11439
- --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
11440
- --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
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);
11441
11353
  }
11442
11354
 
11443
- .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
11444
- overflow: visible;
11355
+ @media screen and (min-width: 768px) {
11356
+ .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
11357
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11358
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11359
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11360
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11361
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11362
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11363
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11364
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11365
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11366
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11367
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11368
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11369
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11370
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11371
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11372
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11373
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11374
+ }
11375
+ }
11376
+ @media screen and (min-width: 1200px) {
11377
+ .pf-c-masthead {
11378
+ --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
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);
11445
11385
  }
11446
11386
 
11447
- .pf-c-menu .pf-c-divider {
11448
- margin-top: var(--pf-c-menu--c-divider--MarginTop);
11449
- margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
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);
11450
11391
  }
11451
11392
 
11452
- .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
11453
- position: absolute;
11454
- top: var(--pf-c-menu--m-flyout__menu--Top);
11455
- right: var(--pf-c-menu--m-flyout__menu--Right);
11456
- bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
11457
- left: var(--pf-c-menu--m-flyout__menu--Left);
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%;
11458
11401
  }
11459
11402
 
11460
- .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 {
11461
- overflow-y: visible;
11403
+ .pf-c-masthead .pf-c-toolbar__content-section {
11404
+ flex-wrap: nowrap;
11462
11405
  }
11463
11406
 
11464
- .pf-c-menu.pf-m-top {
11465
- --pf-c-menu--m-flyout__menu--Top: auto;
11466
- --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
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);
11467
11409
  }
11468
11410
 
11469
- .pf-c-menu.pf-m-left {
11470
- --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
11471
- --pf-c-menu--m-flyout__menu--Left: auto;
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);
11472
11415
  }
11473
11416
 
11474
- .pf-c-menu.pf-m-drilldown {
11475
- display: flex;
11476
- flex-direction: column;
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);
11477
11420
  }
11478
11421
 
11479
- .pf-c-menu.pf-m-drilldown[hidden] {
11480
- display: none;
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);
11481
11427
  }
11482
11428
 
11483
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
11484
- flex-grow: 1;
11485
- overflow: hidden;
11486
- transition: var(--pf-c-menu--m-drilldown__content--Transition);
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);
11487
11432
  }
11488
11433
 
11489
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
11490
- .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
11491
- transform: translateX(-100%);
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);
11492
11438
  }
11493
11439
 
11494
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
11495
- --pf-c-menu--BoxShadow: none;
11496
- position: absolute;
11497
- top: var(--pf-c-menu--m-drilldown--c-menu--Top);
11498
- left: 100%;
11499
- width: 100%;
11500
- transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
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);
11501
11443
  }
11502
11444
 
11503
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
11504
- transform: translateX(-100%);
11445
+ .pf-c-masthead .pf-c-nav {
11446
+ align-self: stretch;
11505
11447
  }
11506
11448
 
11507
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
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 {
11508
11454
  position: relative;
11509
- overflow: hidden;
11510
- transition: var(--pf-c-menu--m-drilldown__list--Transition);
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);
11511
11465
  }
11512
11466
 
11513
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
11514
- --pf-c-menu__list--PaddingTop: 0;
11515
- --pf-c-menu__list--PaddingBottom: 0;
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);
11516
11474
  }
11517
11475
 
11518
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
11519
- z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
11476
+ .pf-c-masthead__main:last-child {
11477
+ --pf-c-masthead__main--MarginRight: 0;
11520
11478
  }
11521
11479
 
11522
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
11523
- overflow: visible;
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;
11524
11493
  }
11525
11494
 
11526
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
11527
- position: static;
11495
+ .pf-c-masthead__content:only-child {
11496
+ --pf-c-masthead__content--MarginLeft: 0;
11528
11497
  }
11529
11498
 
11530
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
11531
- background-color: transparent;
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);
11532
11502
  }
11533
11503
 
11534
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
11535
- display: none;
11536
- visibility: hidden;
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;
11537
11512
  }
11538
11513
 
11539
- .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
11540
- outline-offset: var(--pf-c-menu__item--OutlineOffset);
11514
+ .pf-c-masthead__brand {
11515
+ display: inline-flex;
11516
+ align-self: center;
11541
11517
  }
11542
11518
 
11543
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
11544
- overflow: visible;
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);
11545
11524
  }
11546
11525
 
11547
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
11548
- .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) {
11549
- display: none;
11526
+ .pf-c-masthead__toggle .pf-c-button {
11527
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11550
11528
  }
11551
11529
 
11552
- .pf-c-menu.pf-m-plain {
11553
- --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
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);
11554
11548
  }
11555
11549
 
11556
- .pf-c-menu.pf-m-scrollable {
11557
- --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
11558
- --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
11559
- --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
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);
11560
11568
  }
11561
11569
 
11562
- .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
11563
- overflow-y: auto;
11570
+ .pf-c-masthead.pf-m-inset-none {
11571
+ --pf-c-masthead--inset: 0;
11564
11572
  }
11565
11573
 
11566
- .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
11567
- --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
11568
- --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
11569
- --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
11570
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
11571
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
11572
- --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
11573
- --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
11574
- --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
11575
- --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
11576
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
11577
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
11578
- --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
11579
- box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
11574
+ .pf-c-masthead.pf-m-inset-sm {
11575
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11580
11576
  }
11581
11577
 
11582
- .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
11583
- position: relative;
11584
- outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
11578
+ .pf-c-masthead.pf-m-inset-md {
11579
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11585
11580
  }
11586
11581
 
11587
- .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 {
11588
- position: absolute;
11589
- right: 0;
11590
- bottom: 0;
11591
- left: 0;
11592
- content: "";
11593
- border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
11582
+ .pf-c-masthead.pf-m-inset-lg {
11583
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11594
11584
  }
11595
11585
 
11596
- .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 {
11597
- position: absolute;
11598
- top: var(--pf-c-menu--m-nav__item--hover--after--Top);
11599
- bottom: 0;
11600
- left: 0;
11601
- content: "";
11602
- border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
11586
+ .pf-c-masthead.pf-m-inset-xl {
11587
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11603
11588
  }
11604
11589
 
11605
- .pf-c-menu.pf-m-nav .pf-c-menu {
11606
- width: 100%;
11590
+ .pf-c-masthead.pf-m-inset-2xl {
11591
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11607
11592
  }
11608
11593
 
11609
- .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
11610
- top: var(--pf-c-menu--m-nav--c-menu--Top);
11611
- left: var(--pf-c-menu--m-nav--c-menu--Left);
11612
- }
11594
+ @media (min-width: 576px) {
11595
+ .pf-c-masthead.pf-m-display-stack-on-sm {
11596
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11597
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11598
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11599
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11600
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11601
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11602
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11603
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11604
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11605
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11606
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11607
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11608
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11609
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11610
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11611
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11612
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11613
+ }
11613
11614
 
11614
- .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 {
11615
- --pf-c-menu--m-nav--c-menu--Top: auto;
11616
- bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
11615
+ .pf-c-masthead.pf-m-display-inline-on-sm {
11616
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11617
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11618
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11619
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11620
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11621
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11622
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11623
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11624
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11625
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11626
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11627
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11628
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11629
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11630
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11631
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11632
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11633
+ }
11617
11634
  }
11635
+ @media (min-width: 576px) {
11636
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11637
+ --pf-c-masthead--inset: 0;
11638
+ }
11618
11639
 
11619
- .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 {
11620
- --pf-c-menu--m-nav--c-menu--Left: auto;
11621
- right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
11622
- }
11640
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
11641
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11642
+ }
11623
11643
 
11624
- .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 {
11625
- --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
11626
- }
11644
+ .pf-c-masthead.pf-m-inset-md-on-sm {
11645
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11646
+ }
11627
11647
 
11628
- .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 {
11629
- --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
11630
- }
11648
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
11649
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11650
+ }
11631
11651
 
11632
- .pf-c-menu__breadcrumb {
11633
- display: flex;
11634
- align-items: center;
11635
- min-height: var(--pf-c-menu__breadcrumb--MinHeight);
11636
- 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);
11637
- }
11652
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
11653
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11654
+ }
11638
11655
 
11639
- .pf-c-menu__breadcrumb .pf-c-breadcrumb {
11640
- --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
11641
- --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
11656
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
11657
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11658
+ }
11642
11659
  }
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
+ }
11643
11680
 
11644
- .pf-c-menu__content {
11645
- height: var(--pf-c-menu__content--Height);
11646
- max-height: var(--pf-c-menu__content--MaxHeight);
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
+ }
11647
11700
  }
11701
+ @media (min-width: 768px) {
11702
+ .pf-c-masthead.pf-m-inset-none-on-md {
11703
+ --pf-c-masthead--inset: 0;
11704
+ }
11648
11705
 
11649
- .pf-c-menu__content .pf-c-menu__content {
11650
- --pf-c-menu__content--Height: auto;
11651
- }
11706
+ .pf-c-masthead.pf-m-inset-sm-on-md {
11707
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11708
+ }
11652
11709
 
11653
- .pf-c-menu__header {
11654
- --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
11655
- --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
11656
- --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
11657
- --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
11658
- padding-top: var(--pf-c-menu__header--PaddingTop);
11659
- padding-right: var(--pf-c-menu__header--PaddingRight);
11660
- padding-bottom: var(--pf-c-menu__header--PaddingBottom);
11661
- padding-left: var(--pf-c-menu__header--PaddingLeft);
11662
- }
11710
+ .pf-c-masthead.pf-m-inset-md-on-md {
11711
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11712
+ }
11663
11713
 
11664
- .pf-c-menu__header > .pf-c-menu__item {
11665
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
11666
- margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
11667
- margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
11668
- margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
11669
- margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
11670
- }
11714
+ .pf-c-masthead.pf-m-inset-lg-on-md {
11715
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11716
+ }
11671
11717
 
11672
- .pf-c-menu__header > .pf-c-menu__item:hover {
11673
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
11674
- }
11718
+ .pf-c-masthead.pf-m-inset-xl-on-md {
11719
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11720
+ }
11675
11721
 
11676
- .pf-c-menu__header > .pf-c-menu__item:focus {
11677
- --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
11722
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
11723
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11724
+ }
11678
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
+ }
11679
11746
 
11680
- .pf-c-menu__header + .pf-c-menu__search {
11681
- --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
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
+ }
11682
11766
  }
11767
+ @media (min-width: 992px) {
11768
+ .pf-c-masthead.pf-m-inset-none-on-lg {
11769
+ --pf-c-masthead--inset: 0;
11770
+ }
11683
11771
 
11684
- .pf-c-menu__search {
11685
- padding-top: var(--pf-c-menu__search--PaddingTop);
11686
- padding-right: var(--pf-c-menu__search--PaddingRight);
11687
- padding-bottom: var(--pf-c-menu__search--PaddingBottom);
11688
- padding-left: var(--pf-c-menu__search--PaddingLeft);
11689
- }
11772
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
11773
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11774
+ }
11690
11775
 
11691
- .pf-c-menu__list {
11692
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
11693
- padding-top: var(--pf-c-menu__list--PaddingTop);
11694
- padding-bottom: var(--pf-c-menu__list--PaddingBottom);
11695
- }
11776
+ .pf-c-masthead.pf-m-inset-md-on-lg {
11777
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11778
+ }
11696
11779
 
11697
- .pf-c-menu__list > .pf-c-divider {
11698
- margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
11699
- margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
11700
- }
11780
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
11781
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11782
+ }
11701
11783
 
11702
- .pf-c-menu__list-item {
11703
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
11704
- position: relative;
11705
- color: var(--pf-c-menu__list-item--Color);
11706
- background-color: var(--pf-c-menu__list-item--BackgroundColor);
11707
- }
11784
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
11785
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11786
+ }
11708
11787
 
11709
- .pf-c-menu__list-item:hover {
11710
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
11711
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
11788
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
11789
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11790
+ }
11712
11791
  }
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);
11811
+ }
11713
11812
 
11714
- .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
11715
- --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
11716
- --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
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);
11831
+ }
11717
11832
  }
11833
+ @media (min-width: 1200px) {
11834
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11835
+ --pf-c-masthead--inset: 0;
11836
+ }
11718
11837
 
11719
- .pf-c-menu__list-item.pf-m-disabled {
11720
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11721
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11722
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
11723
- --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
11724
- pointer-events: none;
11725
- }
11838
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11839
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11840
+ }
11726
11841
 
11727
- .pf-c-menu__list-item.pf-m-load {
11728
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11729
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11730
- --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
11731
- }
11842
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11843
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11844
+ }
11732
11845
 
11733
- .pf-c-menu__list-item.pf-m-loading {
11734
- --pf-c-menu__list-item--hover--BackgroundColor: transparent;
11735
- --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
11736
- justify-content: center;
11737
- padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
11738
- overflow: hidden;
11739
- }
11846
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11847
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11848
+ }
11740
11849
 
11741
- .pf-c-menu__item {
11742
- display: flex;
11743
- flex-basis: 100%;
11744
- flex-direction: column;
11745
- min-width: 0;
11746
- padding-top: var(--pf-c-menu__item--PaddingTop);
11747
- padding-right: var(--pf-c-menu__item--PaddingRight);
11748
- padding-bottom: var(--pf-c-menu__item--PaddingBottom);
11749
- padding-left: var(--pf-c-menu__item--PaddingLeft);
11750
- font-size: var(--pf-c-menu__item--FontSize);
11751
- font-weight: var(--pf-c-menu__item--FontWeight);
11752
- line-height: var(--pf-c-menu__item--LineHeight);
11753
- color: var(--pf-c-menu__item--Color);
11754
- text-align: left;
11755
- background-color: var(--pf-c-menu__item--BackgroundColor);
11756
- border: none;
11757
- }
11850
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
11851
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11852
+ }
11758
11853
 
11759
- .pf-c-menu__item:hover {
11760
- text-decoration: none;
11854
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
11855
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11856
+ }
11761
11857
  }
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
+ }
11762
11878
 
11763
- .pf-c-menu__item:hover, .pf-c-menu__item:focus {
11764
- --pf-c-menu__item-external-icon--Opacity: 1;
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
+ }
11765
11898
  }
11899
+ @media (min-width: 1450px) {
11900
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
11901
+ --pf-c-masthead--inset: 0;
11902
+ }
11766
11903
 
11767
- .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
11768
- opacity: 1;
11769
- }
11904
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
11905
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11906
+ }
11907
+
11908
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
11909
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11910
+ }
11770
11911
 
11771
- label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
11772
- cursor: pointer;
11773
- }
11912
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
11913
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11914
+ }
11774
11915
 
11775
- .pf-c-menu__item-main {
11776
- display: flex;
11777
- align-items: center;
11778
- width: 100%;
11779
- }
11916
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
11917
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11918
+ }
11780
11919
 
11781
- .pf-c-menu__item-external-icon {
11782
- margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
11783
- font-size: var(--pf-c-menu__item-external-icon--FontSize);
11784
- color: var(--pf-c-menu__item-external-icon--Color);
11785
- opacity: var(--pf-c-menu__item-external-icon--Opacity);
11920
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11921
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11922
+ }
11786
11923
  }
11787
-
11788
- .pf-c-menu__item-text {
11789
- overflow: hidden;
11790
- text-overflow: ellipsis;
11791
- white-space: nowrap;
11792
- flex-grow: 1;
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;
11793
11932
  }
11794
11933
 
11795
- .pf-c-menu__group {
11796
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
11934
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11935
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11797
11936
  }
11798
11937
 
11799
- .pf-c-menu__group-title {
11800
- padding-top: var(--pf-c-menu__group-title--PaddingTop);
11801
- padding-right: var(--pf-c-menu__group-title--PaddingRight);
11802
- padding-left: var(--pf-c-menu__group-title--PaddingLeft);
11803
- font-size: var(--pf-c-menu__group-title--FontSize);
11804
- font-weight: var(--pf-c-menu__group-title--FontWeight);
11805
- color: var(--pf-c-menu__group-title--Color);
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);
11806
11951
  }
11807
11952
 
11808
- .pf-c-menu__item-description {
11809
- font-size: var(--pf-c-menu__item-description--FontSize);
11810
- color: var(--pf-c-menu__item-description--Color);
11811
- word-break: break-all;
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);
11812
11956
  }
11813
11957
 
11814
- .pf-c-menu__item-icon {
11815
- margin-right: var(--pf-c-menu__item-icon--MarginRight);
11958
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11959
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11816
11960
  }
11817
11961
 
11818
- .pf-c-menu__item-check {
11819
- display: flex;
11820
- align-items: center;
11821
- margin-right: var(--pf-c-menu__item-check--MarginRight);
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);
11822
11970
  }
11823
11971
 
11824
- .pf-c-menu__item-toggle-icon {
11825
- padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
11826
- padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
11827
- color: var(--pf-c-menu__item-toggle-icon, inherit);
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);
11828
11980
  }
11829
11981
 
11830
- .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
11831
- margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
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);
11832
11985
  }
11833
11986
 
11834
- .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
11835
- margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
11836
- }
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
+ }
11837
11992
 
11838
- .pf-c-menu__item-select-icon {
11839
- margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
11840
- font-size: var(--pf-c-menu__item-select-icon--FontSize);
11841
- color: var(--pf-c-menu__item-select-icon--Color);
11842
- opacity: 0;
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
+ }
11843
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
+ }
11844
12003
 
11845
- .pf-c-menu__item-action {
11846
- display: flex;
11847
- padding-top: var(--pf-c-menu__item-action--PaddingTop);
11848
- padding-right: var(--pf-c-menu__item-action--PaddingRight);
11849
- padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
11850
- padding-left: var(--pf-c-menu__item-action--PaddingLeft);
11851
- color: var(--pf-c-menu__item-action--Color);
11852
- border: none;
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
+ }
11853
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
+ }
11854
12014
 
11855
- .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
11856
- font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
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
+ }
11857
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
+ }
11858
12025
 
11859
- .pf-c-menu__item-action.pf-m-favorited {
11860
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
11861
- --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
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
+ }
11862
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
+ }
11863
12036
 
11864
- .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
11865
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
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
+ }
11866
12041
  }
11867
-
11868
- .pf-c-menu__item-action:disabled {
11869
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
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-danger__item--Color: var(--pf-global--danger-color--100);
12106
+ --pf-c-menu__list-item--m-load__item--Color: var(--pf-global--link--Color);
12107
+ --pf-c-menu__group--Display: block;
12108
+ --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
12109
+ --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
12110
+ --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
12111
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
12112
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
12113
+ --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
12114
+ --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
12115
+ --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
12116
+ --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
12117
+ --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
12118
+ --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
12119
+ --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
12120
+ --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
12121
+ --pf-c-menu__item-text--item-toggle-icon--MarginLeft: var(--pf-global--spacer--sm);
12122
+ --pf-c-menu__item-toggle-icon--item-text--MarginLeft: var(--pf-global--spacer--sm);
12123
+ --pf-c-menu__item-select-icon--MarginLeft: var(--pf-global--spacer--sm);
12124
+ --pf-c-menu__item-select-icon--Color: var(--pf-global--active-color--100);
12125
+ --pf-c-menu__item-select-icon--FontSize: var(--pf-global--icon--FontSize--sm);
12126
+ --pf-c-menu__item-external-icon--MarginLeft: var(--pf-global--spacer--sm);
12127
+ --pf-c-menu__item-external-icon--Color: var(--pf-global--link--Color);
12128
+ --pf-c-menu__item-external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
12129
+ --pf-c-menu__item-external-icon--Opacity: 0;
12130
+ --pf-c-menu__item-action--PaddingTop: var(--pf-global--spacer--sm);
12131
+ --pf-c-menu__item-action--PaddingRight: var(--pf-global--spacer--md);
12132
+ --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
12133
+ --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
12134
+ --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
12135
+ --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
12136
+ --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
12137
+ --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
12138
+ --pf-c-menu__item-action--m-favorited--hover--Color: var(--pf-global--palette--gold-500);
12139
+ --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
12140
+ --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
12141
+ --pf-c-menu__breadcrumb--PaddingTop: var(--pf-global--spacer--md);
12142
+ --pf-c-menu__breadcrumb--PaddingRight: var(--pf-global--spacer--md);
12143
+ --pf-c-menu__breadcrumb--PaddingBottom: var(--pf-global--spacer--md);
12144
+ --pf-c-menu__breadcrumb--PaddingLeft: var(--pf-global--spacer--md);
12145
+ --pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize: var(--pf-global--FontSize--md);
12146
+ --pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--md);
12147
+ --pf-c-menu--m-drilldown--c-menu--Top: 0;
12148
+ --pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12149
+ --pf-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
12150
+ --pf-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-global--TransitionDuration);
12151
+ --pf-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12152
+ --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);
12153
+ --pf-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-global--TransitionDuration);
12154
+ --pf-c-menu--m-drilldown__list--Transition: transform var(--pf-c-menu--m-drilldown__list--TransitionDuration--transform);
12155
+ --pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-global--ZIndex--xs);
12156
+ --pf-c-menu__footer--PaddingTop: var(--pf-global--spacer--md);
12157
+ --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
12158
+ --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
12159
+ --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
12160
+ --pf-c-menu__footer--BoxShadow: none;
12161
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
12162
+ --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
12163
+ --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
12164
+ --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
12165
+ --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
12166
+ top: var(--pf-c-menu--Top);
12167
+ z-index: var(--pf-c-menu--ZIndex);
12168
+ width: var(--pf-c-menu--Width);
12169
+ min-width: var(--pf-c-menu--MinWidth);
12170
+ background-color: var(--pf-c-menu--BackgroundColor);
12171
+ box-shadow: var(--pf-c-menu--BoxShadow);
12172
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
12173
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
12174
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
12175
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
12176
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12177
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12178
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
12179
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
12180
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
12181
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
12182
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
12183
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
12184
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
12185
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
12186
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
12187
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
12188
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
12189
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
12190
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
12191
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
12192
+ --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
12193
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
12194
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
12195
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
12196
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
12197
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
12198
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
11870
12199
  }
11871
12200
 
11872
- .pf-c-menu__item-action-icon {
11873
- display: flex;
11874
- align-items: center;
11875
- height: var(--pf-c-menu__item-action-icon--Height);
12201
+ .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
12202
+ overflow: visible;
11876
12203
  }
11877
12204
 
11878
- .pf-c-menu__footer {
11879
- position: relative;
11880
- 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);
11881
- box-shadow: var(--pf-c-menu__footer--BoxShadow);
12205
+ .pf-c-menu .pf-c-divider {
12206
+ margin-top: var(--pf-c-menu--c-divider--MarginTop);
12207
+ margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
11882
12208
  }
11883
12209
 
11884
- .pf-c-menu__footer::after {
12210
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
11885
12211
  position: absolute;
11886
- top: 0;
11887
- right: 0;
11888
- bottom: 0;
11889
- left: 0;
11890
- pointer-events: none;
11891
- content: "";
11892
- border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
11893
- }
11894
-
11895
- :where(.pf-theme-dark) .pf-c-menu {
11896
- --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
11897
- --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
11898
- --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
11899
- --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
11900
- }
11901
-
11902
- .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light {
11903
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
11904
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
11905
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
11906
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
11907
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
11908
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
11909
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11910
- }
11911
-
11912
- .pf-c-masthead .pf-c-button.pf-m-plain, .pf-c-masthead {
11913
- --pf-global--Color--100: var(--pf-global--Color--light-100);
11914
- --pf-global--Color--200: var(--pf-global--Color--light-200);
11915
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
11916
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
11917
- --pf-global--link--Color: var(--pf-global--link--Color--light);
11918
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
11919
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
11920
- }
11921
-
11922
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
11923
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
11924
- }
11925
-
11926
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .pf-c-button {
11927
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
11928
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
11929
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
11930
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
11931
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
11932
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11933
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11934
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
11935
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
11936
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
11937
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
11938
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
11939
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
11940
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
11941
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
11942
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
11943
- }
11944
-
11945
- .pf-c-masthead {
11946
- --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
11947
- --pf-c-masthead--PaddingRight: var(--pf-c-masthead--inset);
11948
- --pf-c-masthead--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
11949
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
11950
- --pf-c-masthead--xl--inset: var(--pf-global--spacer--lg);
11951
- --pf-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
11952
- --pf-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
11953
- --pf-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
11954
- --pf-c-masthead--m-display-stack__main--Order: -1;
11955
- --pf-c-masthead--m-display-stack__main--FlexBasis: 100%;
11956
- --pf-c-masthead--m-display-stack__main--PaddingTop: var(--pf-global--spacer--sm);
11957
- --pf-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-global--spacer--sm);
11958
- --pf-c-masthead--m-display-stack__main--MarginRight: 0;
11959
- --pf-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-c-masthead__main--before--BorderBottomWidth) solid var(--pf-c-masthead__main--before--BorderBottomColor);
11960
- --pf-c-masthead--m-display-stack__toggle--GridColumn: 1;
11961
- --pf-c-masthead--m-display-stack__content--GridColumn: 2;
11962
- --pf-c-masthead--m-display-stack__content--MinHeight: auto;
11963
- --pf-c-masthead--m-display-stack__content--Order: 1;
11964
- --pf-c-masthead--m-display-stack__content--PaddingTop: 0;
11965
- --pf-c-masthead--m-display-stack__content--PaddingBottom: 0;
11966
- --pf-c-masthead--m-display-stack__content--MarginLeft: 0;
11967
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-c-masthead--inset) * -1);
11968
- --pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead--inset) * -1);
11969
- --pf-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
11970
- --pf-c-masthead--m-display-inline__main--GridColumn: 2;
11971
- --pf-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
11972
- --pf-c-masthead--m-display-inline__main--Order: 0;
11973
- --pf-c-masthead--m-display-inline__main--FlexBasis: auto;
11974
- --pf-c-masthead--m-display-inline__main--PaddingTop: 0;
11975
- --pf-c-masthead--m-display-inline__main--PaddingBottom: 0;
11976
- --pf-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-global--spacer--lg) / 2);
11977
- --pf-c-masthead--m-display-inline__main--BorderBottom: 0;
11978
- --pf-c-masthead--m-display-inline__toggle--GridColumn: 1;
11979
- --pf-c-masthead--m-display-inline__content--GridColumn: 3;
11980
- --pf-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
11981
- --pf-c-masthead--m-display-inline__content--Order: 0;
11982
- --pf-c-masthead--m-display-inline__content--PaddingTop: 0;
11983
- --pf-c-masthead--m-display-inline__content--PaddingBottom: 0;
11984
- --pf-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-global--spacer--lg) / 2);
11985
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
11986
- --pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
11987
- --pf-c-masthead__main--before--Right: calc(var(--pf-c-masthead--inset) * -1);
11988
- --pf-c-masthead__main--before--Left: calc(var(--pf-c-masthead--inset) * -1);
11989
- --pf-c-masthead__main--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
11990
- --pf-c-masthead__main--before--BorderBottomColor: var(--pf-global--palette--black-600);
11991
- --pf-c-masthead__toggle--MarginRight: var(--pf-global--spacer--sm);
11992
- --pf-c-masthead__toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
11993
- --pf-c-masthead__toggle--c-button--FontSize: var(--pf-global--FontSize--2xl);
11994
- --pf-c-masthead--m-light--BackgroundColor: var(--pf-global--BackgroundColor--100);
11995
- --pf-c-masthead--m-light__main--BorderBottomColor: var(--pf-global--BorderColor--300);
11996
- --pf-c-masthead--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
11997
- --pf-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-global--BorderColor--100);
11998
- --pf-c-masthead--c-toolbar__item--Display: flex;
11999
- --pf-c-masthead--item-border-color--base: var(--pf-global--palette--black-800);
12000
- --pf-c-masthead--c-context-selector--Width: auto;
12001
- --pf-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12002
- --pf-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12003
- --pf-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12004
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
12005
- --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
12006
- --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12007
- --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12008
- --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12009
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
12010
- --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
12011
- --pf-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12012
- --pf-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--item-border-color--base);
12013
- --pf-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--item-border-color--base);
12014
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
12015
- --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
12016
- --pf-c-masthead--c-toolbar__content--PaddingRight: 0;
12017
- --pf-c-masthead--c-toolbar__content--PaddingLeft: 0;
12018
- --pf-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-global--spacer--md);
12019
- --pf-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--inset);
12020
- --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
12021
- --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--inset);
12022
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
12023
- --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-c-masthead--item-border-color--base);
12024
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12025
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12026
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12027
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12028
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12029
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12030
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12031
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12032
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12033
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12034
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12035
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12036
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12037
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12038
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12039
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12040
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12041
- color: var(--pf-global--Color--100);
12042
- position: relative;
12043
- display: grid;
12044
- grid-template-columns: var(--pf-c-masthead--GridTemplateColumns);
12045
- align-items: center;
12046
- min-width: 0;
12047
- padding-right: var(--pf-c-masthead--PaddingRight);
12048
- padding-left: var(--pf-c-masthead--PaddingLeft);
12049
- background-color: var(--pf-c-masthead--BackgroundColor);
12212
+ top: var(--pf-c-menu--m-flyout__menu--Top);
12213
+ right: var(--pf-c-menu--m-flyout__menu--Right);
12214
+ bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
12215
+ left: var(--pf-c-menu--m-flyout__menu--Left);
12050
12216
  }
12051
12217
 
12052
- @media screen and (min-width: 768px) {
12053
- .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
12054
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12055
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12056
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12057
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12058
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12059
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12060
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12061
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12062
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12063
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12064
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12065
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12066
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12067
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12068
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12069
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12070
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12071
- }
12218
+ .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 {
12219
+ overflow-y: visible;
12072
12220
  }
12073
- @media screen and (min-width: 1200px) {
12074
- .pf-c-masthead {
12075
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
12076
- }
12221
+
12222
+ .pf-c-menu.pf-m-top {
12223
+ --pf-c-menu--m-flyout__menu--Top: auto;
12224
+ --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
12077
12225
  }
12078
- .pf-c-masthead.pf-m-light {
12079
- color: var(--pf-global--Color--100);
12080
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
12081
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light__main--BorderBottomColor);
12226
+
12227
+ .pf-c-menu.pf-m-left {
12228
+ --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
12229
+ --pf-c-menu--m-flyout__menu--Left: auto;
12082
12230
  }
12083
12231
 
12084
- .pf-c-masthead.pf-m-light-200 {
12085
- color: var(--pf-global--Color--100);
12086
- --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light-200--BackgroundColor);
12087
- --pf-c-masthead__main--BorderBottomColor: var(--pf-c-masthead--m-light-200__main--BorderBottomColor);
12232
+ .pf-c-menu.pf-m-drilldown {
12233
+ display: flex;
12234
+ flex-direction: column;
12088
12235
  }
12089
12236
 
12090
- .pf-c-masthead .pf-c-toolbar {
12091
- --pf-c-toolbar__content--PaddingRight: var(--pf-c-masthead--c-toolbar__content--PaddingRight);
12092
- --pf-c-toolbar__content--PaddingLeft: var(--pf-c-masthead--c-toolbar__content--PaddingLeft);
12093
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingTop);
12094
- --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingRight);
12095
- --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingBottom);
12096
- --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-masthead--c-toolbar__expandable-content--PaddingLeft);
12237
+ .pf-c-menu.pf-m-drilldown[hidden] {
12238
+ display: none;
12239
+ }
12240
+
12241
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
12242
+ flex-grow: 1;
12243
+ overflow: hidden;
12244
+ transition: var(--pf-c-menu--m-drilldown__content--Transition);
12245
+ }
12246
+
12247
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list,
12248
+ .pf-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-c-menu__list {
12249
+ transform: translateX(-100%);
12250
+ }
12251
+
12252
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
12253
+ --pf-c-menu--BoxShadow: none;
12254
+ position: absolute;
12255
+ top: var(--pf-c-menu--m-drilldown--c-menu--Top);
12256
+ left: 100%;
12097
12257
  width: 100%;
12258
+ transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
12098
12259
  }
12099
12260
 
12100
- .pf-c-masthead .pf-c-toolbar__content-section {
12101
- flex-wrap: nowrap;
12261
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
12262
+ transform: translateX(-100%);
12102
12263
  }
12103
12264
 
12104
- .pf-c-masthead .pf-c-toolbar__expandable-content {
12105
- border-top: var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-c-masthead--c-toolbar__expandable-content--BorderTopColor);
12265
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
12266
+ position: relative;
12267
+ overflow: hidden;
12268
+ transition: var(--pf-c-menu--m-drilldown__list--Transition);
12106
12269
  }
12107
12270
 
12108
- .pf-c-masthead .pf-c-menu-toggle {
12109
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--before--BorderTopColor);
12110
- --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--before--BorderRightColor);
12111
- --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--before--BorderLeftColor);
12271
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
12272
+ --pf-c-menu__list--PaddingTop: 0;
12273
+ --pf-c-menu__list--PaddingBottom: 0;
12112
12274
  }
12113
12275
 
12114
- .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
12115
- --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
12116
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
12276
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
12277
+ z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
12117
12278
  }
12118
12279
 
12119
- .pf-c-masthead .pf-c-context-selector {
12120
- --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
12121
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
12122
- --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
12123
- --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
12280
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
12281
+ overflow: visible;
12124
12282
  }
12125
12283
 
12126
- .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
12127
- --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
12128
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
12284
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
12285
+ position: static;
12129
12286
  }
12130
12287
 
12131
- .pf-c-masthead .pf-c-dropdown {
12132
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
12133
- --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
12134
- --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
12288
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
12289
+ background-color: transparent;
12135
12290
  }
12136
12291
 
12137
- .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
12138
- --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
12139
- --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
12292
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
12293
+ display: none;
12294
+ visibility: hidden;
12140
12295
  }
12141
12296
 
12142
- .pf-c-masthead .pf-c-nav {
12143
- align-self: stretch;
12297
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
12298
+ outline-offset: var(--pf-c-menu__item--OutlineOffset);
12144
12299
  }
12145
12300
 
12146
- .pf-c-masthead .pf-c-button.pf-m-plain {
12147
- color: var(--pf-c-button--m-plain--Color);
12301
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
12302
+ overflow: visible;
12148
12303
  }
12149
12304
 
12150
- .pf-c-masthead__main {
12151
- position: relative;
12152
- display: flex;
12153
- flex-basis: var(--pf-c-masthead__main--FlexBasis);
12154
- align-items: center;
12155
- align-self: stretch;
12156
- order: var(--pf-c-masthead__main--Order);
12157
- min-height: var(--pf-c-masthead__main--MinHeight);
12158
- padding-top: var(--pf-c-masthead__main--PaddingTop);
12159
- padding-bottom: var(--pf-c-masthead__main--PaddingBottom);
12160
- margin-right: var(--pf-c-masthead__main--MarginRight);
12161
- grid-column: var(--pf-c-masthead__main--GridColumn);
12305
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
12306
+ .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) {
12307
+ display: none;
12162
12308
  }
12163
12309
 
12164
- .pf-c-masthead__main::before {
12165
- position: absolute;
12166
- right: var(--pf-c-masthead__main--before--Right);
12167
- bottom: 0;
12168
- left: var(--pf-c-masthead__main--before--Left);
12169
- content: "";
12170
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
12310
+ .pf-c-menu.pf-m-plain {
12311
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
12171
12312
  }
12172
12313
 
12173
- .pf-c-masthead__main:last-child {
12174
- --pf-c-masthead__main--MarginRight: 0;
12314
+ .pf-c-menu.pf-m-scrollable {
12315
+ --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
12316
+ --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
12317
+ --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
12175
12318
  }
12176
12319
 
12177
- .pf-c-masthead__content {
12178
- display: flex;
12179
- flex-grow: 1;
12180
- align-items: center;
12181
- align-self: stretch;
12182
- order: var(--pf-c-masthead__content--Order);
12183
- min-height: var(--pf-c-masthead__content--MinHeight);
12184
- padding-top: var(--pf-c-masthead__content--PaddingTop);
12185
- padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
12186
- margin-left: var(--pf-c-masthead__content--MarginLeft);
12187
- grid-column: var(--pf-c-masthead__content--GridColumn);
12188
- grid-column-end: -1;
12189
- flex-shrink: 1;
12320
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
12321
+ overflow-y: auto;
12190
12322
  }
12191
12323
 
12192
- .pf-c-masthead__content:only-child {
12193
- --pf-c-masthead__content--MarginLeft: 0;
12324
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
12325
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
12326
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
12327
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
12328
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
12329
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
12330
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
12331
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
12332
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
12333
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
12334
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
12335
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
12336
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
12337
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
12194
12338
  }
12195
12339
 
12196
- .pf-c-masthead__content .pf-c-nav.pf-m-horizontal {
12197
- margin-right: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginRight);
12198
- margin-left: var(--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft);
12340
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
12341
+ position: relative;
12342
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
12199
12343
  }
12200
12344
 
12201
- .pf-c-masthead__toggle ~ .pf-c-masthead__content {
12202
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-c-masthead__content--MarginLeft) * -1);
12345
+ .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 {
12346
+ position: absolute;
12347
+ right: 0;
12348
+ bottom: 0;
12349
+ left: 0;
12350
+ content: "";
12351
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
12203
12352
  }
12204
12353
 
12205
- .pf-c-masthead__main,
12206
- .pf-c-masthead__brand,
12207
- .pf-c-masthead__content {
12208
- min-width: 0;
12354
+ .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 {
12355
+ position: absolute;
12356
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
12357
+ bottom: 0;
12358
+ left: 0;
12359
+ content: "";
12360
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
12209
12361
  }
12210
12362
 
12211
- .pf-c-masthead__brand {
12212
- display: inline-flex;
12213
- align-self: center;
12363
+ .pf-c-menu.pf-m-nav .pf-c-menu {
12364
+ width: 100%;
12214
12365
  }
12215
12366
 
12216
- .pf-c-masthead__toggle {
12217
- grid-column: var(--pf-c-masthead__toggle--GridColumn);
12218
- align-self: center;
12219
- margin-right: var(--pf-c-masthead__toggle--MarginRight);
12220
- margin-left: var(--pf-c-masthead__toggle--MarginLeft);
12367
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
12368
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
12369
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
12221
12370
  }
12222
12371
 
12223
- .pf-c-masthead__toggle .pf-c-button {
12224
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
12372
+ .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 {
12373
+ --pf-c-menu--m-nav--c-menu--Top: auto;
12374
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
12225
12375
  }
12226
12376
 
12227
- .pf-c-masthead.pf-m-display-stack {
12228
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12229
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12230
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12231
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12232
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12233
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12234
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12235
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12236
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12237
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12238
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12239
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12240
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12241
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12242
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12243
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12244
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12377
+ .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 {
12378
+ --pf-c-menu--m-nav--c-menu--Left: auto;
12379
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
12380
+ }
12381
+
12382
+ .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 {
12383
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
12245
12384
  }
12246
12385
 
12247
- .pf-c-masthead.pf-m-display-inline {
12248
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12249
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12250
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12251
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12252
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12253
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12254
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12255
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12256
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12257
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12258
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12259
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12260
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12261
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12262
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12263
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12264
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12386
+ .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 {
12387
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
12265
12388
  }
12266
12389
 
12267
- .pf-c-masthead.pf-m-inset-none {
12268
- --pf-c-masthead--inset: 0;
12390
+ .pf-c-menu__breadcrumb {
12391
+ display: flex;
12392
+ align-items: center;
12393
+ min-height: var(--pf-c-menu__breadcrumb--MinHeight);
12394
+ 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);
12269
12395
  }
12270
12396
 
12271
- .pf-c-masthead.pf-m-inset-sm {
12272
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12397
+ .pf-c-menu__breadcrumb .pf-c-breadcrumb {
12398
+ --pf-c-breadcrumb__item--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
12399
+ --pf-c-breadcrumb__heading--FontSize: var(--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize);
12273
12400
  }
12274
12401
 
12275
- .pf-c-masthead.pf-m-inset-md {
12276
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12402
+ .pf-c-menu__content {
12403
+ height: var(--pf-c-menu__content--Height);
12404
+ max-height: var(--pf-c-menu__content--MaxHeight);
12277
12405
  }
12278
12406
 
12279
- .pf-c-masthead.pf-m-inset-lg {
12280
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12407
+ .pf-c-menu__content .pf-c-menu__content {
12408
+ --pf-c-menu__content--Height: auto;
12281
12409
  }
12282
12410
 
12283
- .pf-c-masthead.pf-m-inset-xl {
12284
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12411
+ .pf-c-menu__header {
12412
+ --pf-c-menu__item--PaddingTop: var(--pf-c-menu__header--c-menu__item--PaddingTop);
12413
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu__header--c-menu__item--PaddingRight);
12414
+ --pf-c-menu__item--PaddingBottom: var(--pf-c-menu__header--c-menu__item--PaddingBottom);
12415
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu__header--c-menu__item--PaddingLeft);
12416
+ padding-top: var(--pf-c-menu__header--PaddingTop);
12417
+ padding-right: var(--pf-c-menu__header--PaddingRight);
12418
+ padding-bottom: var(--pf-c-menu__header--PaddingBottom);
12419
+ padding-left: var(--pf-c-menu__header--PaddingLeft);
12285
12420
  }
12286
12421
 
12287
- .pf-c-masthead.pf-m-inset-2xl {
12288
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12422
+ .pf-c-menu__header > .pf-c-menu__item {
12423
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--BackgroundColor);
12424
+ margin-top: var(--pf-c-menu__header--c-menu__item--MarginTop);
12425
+ margin-right: var(--pf-c-menu__header--c-menu__item--MarginRight);
12426
+ margin-bottom: var(--pf-c-menu__header--c-menu__item--MarginBottom);
12427
+ margin-left: var(--pf-c-menu__header--c-menu__item--MarginLeft);
12289
12428
  }
12290
12429
 
12291
- @media (min-width: 576px) {
12292
- .pf-c-masthead.pf-m-display-stack-on-sm {
12293
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12294
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12295
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12296
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12297
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12298
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12299
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12300
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12301
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12302
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12303
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12304
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12305
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12306
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12307
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12308
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12309
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12310
- }
12430
+ .pf-c-menu__header > .pf-c-menu__item:hover {
12431
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--hover--BackgroundColor);
12432
+ }
12311
12433
 
12312
- .pf-c-masthead.pf-m-display-inline-on-sm {
12313
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12314
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12315
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12316
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12317
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12318
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12319
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12320
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12321
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12322
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12323
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12324
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12325
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12326
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12327
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12328
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12329
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12330
- }
12434
+ .pf-c-menu__header > .pf-c-menu__item:focus {
12435
+ --pf-c-menu__item--BackgroundColor: var(--pf-c-menu__header--c-menu__item--focus--BackgroundColor);
12331
12436
  }
12332
- @media (min-width: 576px) {
12333
- .pf-c-masthead.pf-m-inset-none-on-sm {
12334
- --pf-c-masthead--inset: 0;
12335
- }
12336
12437
 
12337
- .pf-c-masthead.pf-m-inset-sm-on-sm {
12338
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12339
- }
12438
+ .pf-c-menu__header + .pf-c-menu__search {
12439
+ --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
12440
+ }
12340
12441
 
12341
- .pf-c-masthead.pf-m-inset-md-on-sm {
12342
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12343
- }
12442
+ .pf-c-menu__search {
12443
+ padding-top: var(--pf-c-menu__search--PaddingTop);
12444
+ padding-right: var(--pf-c-menu__search--PaddingRight);
12445
+ padding-bottom: var(--pf-c-menu__search--PaddingBottom);
12446
+ padding-left: var(--pf-c-menu__search--PaddingLeft);
12447
+ }
12344
12448
 
12345
- .pf-c-masthead.pf-m-inset-lg-on-sm {
12346
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12347
- }
12449
+ .pf-c-menu__list {
12450
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list--Display);
12451
+ padding-top: var(--pf-c-menu__list--PaddingTop);
12452
+ padding-bottom: var(--pf-c-menu__list--PaddingBottom);
12453
+ }
12348
12454
 
12349
- .pf-c-masthead.pf-m-inset-xl-on-sm {
12350
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12351
- }
12455
+ .pf-c-menu__list > .pf-c-divider {
12456
+ margin-top: var(--pf-c-menu__list--c-divider--MarginTop);
12457
+ margin-bottom: var(--pf-c-menu__list--c-divider--MarginBottom);
12458
+ }
12352
12459
 
12353
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
12354
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12355
- }
12460
+ .pf-c-menu__list-item {
12461
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
12462
+ position: relative;
12463
+ color: var(--pf-c-menu__list-item--Color);
12464
+ background-color: var(--pf-c-menu__list-item--BackgroundColor);
12356
12465
  }
12357
- @media (min-width: 768px) {
12358
- .pf-c-masthead.pf-m-display-stack-on-md {
12359
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12360
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12361
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12362
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12363
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12364
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12365
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12366
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12367
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12368
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12369
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12370
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12371
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12372
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12373
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12374
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12375
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12376
- }
12377
12466
 
12378
- .pf-c-masthead.pf-m-display-inline-on-md {
12379
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12380
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12381
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12382
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12383
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12384
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12385
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12386
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12387
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12388
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12389
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12390
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12391
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12392
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12393
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12394
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12395
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12396
- }
12467
+ .pf-c-menu__list-item:hover {
12468
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
12469
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
12397
12470
  }
12398
- @media (min-width: 768px) {
12399
- .pf-c-masthead.pf-m-inset-none-on-md {
12400
- --pf-c-masthead--inset: 0;
12401
- }
12402
12471
 
12403
- .pf-c-masthead.pf-m-inset-sm-on-md {
12404
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12405
- }
12472
+ .pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
12473
+ --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
12474
+ --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
12475
+ }
12406
12476
 
12407
- .pf-c-masthead.pf-m-inset-md-on-md {
12408
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12409
- }
12477
+ .pf-c-menu__list-item.pf-m-disabled {
12478
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12479
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12480
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-disabled__item--Color);
12481
+ --pf-c-menu__item-toggle-icon: var(--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color);
12482
+ pointer-events: none;
12483
+ }
12410
12484
 
12411
- .pf-c-masthead.pf-m-inset-lg-on-md {
12412
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12413
- }
12485
+ .pf-c-menu__list-item.pf-m-load {
12486
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12487
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12488
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-load__item--Color);
12489
+ }
12414
12490
 
12415
- .pf-c-masthead.pf-m-inset-xl-on-md {
12416
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12417
- }
12491
+ .pf-c-menu__list-item.pf-m-loading {
12492
+ --pf-c-menu__list-item--hover--BackgroundColor: transparent;
12493
+ --pf-c-menu__list-item--focus-within--BackgroundColor: transparent;
12494
+ justify-content: center;
12495
+ padding-top: var(--pf-c-menu__list-item--m-loading--PaddingTop);
12496
+ overflow: hidden;
12497
+ }
12418
12498
 
12419
- .pf-c-masthead.pf-m-inset-2xl-on-md {
12420
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12421
- }
12499
+ .pf-c-menu__list-item.pf-m-danger {
12500
+ --pf-c-menu__item--Color: var(--pf-c-menu__list-item--m-danger__item--Color, inherit);
12501
+ }
12502
+
12503
+ .pf-c-menu__item {
12504
+ display: flex;
12505
+ flex-basis: 100%;
12506
+ flex-direction: column;
12507
+ min-width: 0;
12508
+ padding-top: var(--pf-c-menu__item--PaddingTop);
12509
+ padding-right: var(--pf-c-menu__item--PaddingRight);
12510
+ padding-bottom: var(--pf-c-menu__item--PaddingBottom);
12511
+ padding-left: var(--pf-c-menu__item--PaddingLeft);
12512
+ font-size: var(--pf-c-menu__item--FontSize);
12513
+ font-weight: var(--pf-c-menu__item--FontWeight);
12514
+ line-height: var(--pf-c-menu__item--LineHeight);
12515
+ color: var(--pf-c-menu__item--Color);
12516
+ text-align: left;
12517
+ background-color: var(--pf-c-menu__item--BackgroundColor);
12518
+ border: none;
12422
12519
  }
12423
- @media (min-width: 992px) {
12424
- .pf-c-masthead.pf-m-display-stack-on-lg {
12425
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12426
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12427
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12428
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12429
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12430
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12431
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12432
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12433
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12434
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12435
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12436
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12437
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12438
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12439
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12440
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12441
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12442
- }
12443
12520
 
12444
- .pf-c-masthead.pf-m-display-inline-on-lg {
12445
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12446
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12447
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12448
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12449
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12450
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12451
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12452
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12453
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12454
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12455
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12456
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12457
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12458
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12459
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12460
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12461
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12462
- }
12521
+ .pf-c-menu__item:hover {
12522
+ text-decoration: none;
12463
12523
  }
12464
- @media (min-width: 992px) {
12465
- .pf-c-masthead.pf-m-inset-none-on-lg {
12466
- --pf-c-masthead--inset: 0;
12467
- }
12468
12524
 
12469
- .pf-c-masthead.pf-m-inset-sm-on-lg {
12470
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12471
- }
12525
+ .pf-c-menu__item:hover, .pf-c-menu__item:focus {
12526
+ --pf-c-menu__item-external-icon--Opacity: 1;
12527
+ }
12472
12528
 
12473
- .pf-c-masthead.pf-m-inset-md-on-lg {
12474
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12475
- }
12529
+ .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
12530
+ opacity: 1;
12531
+ }
12476
12532
 
12477
- .pf-c-masthead.pf-m-inset-lg-on-lg {
12478
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12479
- }
12533
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12534
+ cursor: pointer;
12535
+ }
12480
12536
 
12481
- .pf-c-masthead.pf-m-inset-xl-on-lg {
12482
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12483
- }
12537
+ .pf-c-menu__item-main {
12538
+ display: flex;
12539
+ align-items: center;
12540
+ width: 100%;
12541
+ }
12484
12542
 
12485
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
12486
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12487
- }
12543
+ .pf-c-menu__item-external-icon {
12544
+ margin-left: var(--pf-c-menu__item-external-icon--MarginLeft);
12545
+ font-size: var(--pf-c-menu__item-external-icon--FontSize);
12546
+ color: var(--pf-c-menu__item-external-icon--Color);
12547
+ opacity: var(--pf-c-menu__item-external-icon--Opacity);
12488
12548
  }
12489
- @media (min-width: 1200px) {
12490
- .pf-c-masthead.pf-m-display-stack-on-xl {
12491
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12492
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12493
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12494
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12495
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12496
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12497
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12498
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12499
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12500
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12501
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12502
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12503
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12504
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12505
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12506
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12507
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12508
- }
12509
12549
 
12510
- .pf-c-masthead.pf-m-display-inline-on-xl {
12511
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12512
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12513
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12514
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12515
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12516
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12517
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12518
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12519
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12520
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12521
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12522
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12523
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12524
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12525
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12526
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12527
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12528
- }
12550
+ .pf-c-menu__item-text {
12551
+ overflow: hidden;
12552
+ text-overflow: ellipsis;
12553
+ white-space: nowrap;
12554
+ flex-grow: 1;
12529
12555
  }
12530
- @media (min-width: 1200px) {
12531
- .pf-c-masthead.pf-m-inset-none-on-xl {
12532
- --pf-c-masthead--inset: 0;
12533
- }
12534
12556
 
12535
- .pf-c-masthead.pf-m-inset-sm-on-xl {
12536
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12537
- }
12557
+ .pf-c-menu__group {
12558
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
12559
+ }
12538
12560
 
12539
- .pf-c-masthead.pf-m-inset-md-on-xl {
12540
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12541
- }
12561
+ .pf-c-menu__group-title {
12562
+ padding-top: var(--pf-c-menu__group-title--PaddingTop);
12563
+ padding-right: var(--pf-c-menu__group-title--PaddingRight);
12564
+ padding-left: var(--pf-c-menu__group-title--PaddingLeft);
12565
+ font-size: var(--pf-c-menu__group-title--FontSize);
12566
+ font-weight: var(--pf-c-menu__group-title--FontWeight);
12567
+ color: var(--pf-c-menu__group-title--Color);
12568
+ }
12542
12569
 
12543
- .pf-c-masthead.pf-m-inset-lg-on-xl {
12544
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12545
- }
12570
+ .pf-c-menu__item-description {
12571
+ font-size: var(--pf-c-menu__item-description--FontSize);
12572
+ color: var(--pf-c-menu__item-description--Color);
12573
+ word-break: break-all;
12574
+ }
12546
12575
 
12547
- .pf-c-masthead.pf-m-inset-xl-on-xl {
12548
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12549
- }
12576
+ .pf-c-menu__item-icon {
12577
+ margin-right: var(--pf-c-menu__item-icon--MarginRight);
12578
+ }
12550
12579
 
12551
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
12552
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12553
- }
12580
+ .pf-c-menu__item-check {
12581
+ display: flex;
12582
+ align-items: center;
12583
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
12554
12584
  }
12555
- @media (min-width: 1450px) {
12556
- .pf-c-masthead.pf-m-display-stack-on-2xl {
12557
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
12558
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
12559
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
12560
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
12561
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
12562
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
12563
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
12564
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
12565
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
12566
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
12567
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
12568
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
12569
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
12570
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
12571
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
12572
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
12573
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
12574
- }
12575
12585
 
12576
- .pf-c-masthead.pf-m-display-inline-on-2xl {
12577
- --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
12578
- --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
12579
- --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
12580
- --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
12581
- --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
12582
- --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
12583
- --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
12584
- --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
12585
- --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
12586
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
12587
- --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
12588
- --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
12589
- --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
12590
- --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
12591
- --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
12592
- --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
12593
- --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
12594
- }
12586
+ .pf-c-menu__item-toggle-icon {
12587
+ padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
12588
+ padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
12589
+ color: var(--pf-c-menu__item-toggle-icon, inherit);
12595
12590
  }
12596
- @media (min-width: 1450px) {
12597
- .pf-c-masthead.pf-m-inset-none-on-2xl {
12598
- --pf-c-masthead--inset: 0;
12599
- }
12600
12591
 
12601
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
12602
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12603
- }
12592
+ .pf-c-menu__item-text + .pf-c-menu__item-toggle-icon {
12593
+ margin-left: var(--pf-c-menu__item-text--item-toggle-icon--MarginLeft);
12594
+ }
12604
12595
 
12605
- .pf-c-masthead.pf-m-inset-md-on-2xl {
12606
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12607
- }
12596
+ .pf-c-menu__item-toggle-icon + .pf-c-menu__item-text {
12597
+ margin-left: var(--pf-c-menu__item-toggle-icon--item-text--MarginLeft);
12598
+ }
12608
12599
 
12609
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
12610
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12611
- }
12600
+ .pf-c-menu__item-select-icon {
12601
+ margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
12602
+ font-size: var(--pf-c-menu__item-select-icon--FontSize);
12603
+ color: var(--pf-c-menu__item-select-icon--Color);
12604
+ opacity: 0;
12605
+ }
12612
12606
 
12613
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
12614
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12615
- }
12607
+ .pf-c-menu__item-action {
12608
+ display: flex;
12609
+ padding-top: var(--pf-c-menu__item-action--PaddingTop);
12610
+ padding-right: var(--pf-c-menu__item-action--PaddingRight);
12611
+ padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
12612
+ padding-left: var(--pf-c-menu__item-action--PaddingLeft);
12613
+ color: var(--pf-c-menu__item-action--Color);
12614
+ border: none;
12615
+ }
12616
12616
 
12617
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
12618
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12619
- }
12617
+ .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
12618
+ font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize);
12620
12619
  }
12621
- :where(.pf-theme-dark) .pf-c-masthead {
12622
- --pf-global--Color--100: #e0e0e0;
12623
- --pf-global--Color--200: #aaabac;
12624
- --pf-global--BorderColor--100: #444548;
12625
- --pf-global--primary-color--100: #1fa7f8;
12626
- --pf-global--link--Color: #1fa7f8;
12627
- --pf-global--link--Color--hover: #73bcf7;
12628
- --pf-global--BackgroundColor--100: #1b1d21;
12620
+
12621
+ .pf-c-menu__item-action.pf-m-favorited {
12622
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--m-favorited--Color);
12623
+ --pf-c-menu__item-action--hover--Color: var(--pf-c-menu__item-action--m-favorited--hover--Color);
12629
12624
  }
12630
12625
 
12631
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12632
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
12626
+ .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
12627
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--hover--Color);
12633
12628
  }
12634
12629
 
12635
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
12636
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
12637
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
12638
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
12639
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
12640
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
12641
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
12642
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
12643
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
12644
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
12645
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
12646
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
12647
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
12630
+ .pf-c-menu__item-action:disabled {
12631
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12648
12632
  }
12649
12633
 
12650
- :where(.pf-theme-dark) .pf-c-masthead {
12651
- --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
12652
- color: var(--pf-global--Color--100);
12634
+ .pf-c-menu__item-action-icon {
12635
+ display: flex;
12636
+ align-items: center;
12637
+ height: var(--pf-c-menu__item-action-icon--Height);
12653
12638
  }
12654
12639
 
12655
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
12656
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
12640
+ .pf-c-menu__footer {
12641
+ position: relative;
12642
+ 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);
12643
+ box-shadow: var(--pf-c-menu__footer--BoxShadow);
12644
+ }
12645
+
12646
+ .pf-c-menu__footer::after {
12647
+ position: absolute;
12648
+ top: 0;
12649
+ right: 0;
12650
+ bottom: 0;
12651
+ left: 0;
12652
+ pointer-events: none;
12653
+ content: "";
12654
+ border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
12655
+ }
12656
+
12657
+ :where(.pf-theme-dark) .pf-c-menu {
12658
+ --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
12659
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
12660
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
12661
+ --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
12657
12662
  }
12658
12663
 
12659
12664
  .pf-c-menu-toggle {
@@ -20920,109 +20925,6 @@ svg.pf-c-spinner.pf-m-xl {
20920
20925
  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
20921
20926
  }
20922
20927
 
20923
- .pf-c-timestamp {
20924
- --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
20925
- --pf-c-timestamp--Color: var(--pf-global--Color--200);
20926
- --pf-c-timestamp--OutlineOffset: 0.1875rem;
20927
- --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
20928
- --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
20929
- --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
20930
- --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
20931
- --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
20932
- --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
20933
- --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
20934
- --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
20935
- --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
20936
- display: inline-block;
20937
- font-size: var(--pf-c-timestamp--FontSize);
20938
- color: var(--pf-c-timestamp--Color);
20939
- outline-offset: var(--pf-c-timestamp--OutlineOffset);
20940
- }
20941
-
20942
- .pf-c-timestamp.pf-m-help-text {
20943
- cursor: pointer;
20944
- text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
20945
- text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
20946
- text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
20947
- text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
20948
- text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
20949
- }
20950
-
20951
- .pf-c-timestamp.pf-m-help-text:hover {
20952
- --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
20953
- --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
20954
- }
20955
-
20956
- .pf-c-timestamp.pf-m-help-text:focus {
20957
- --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
20958
- --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
20959
- }
20960
-
20961
- .pf-c-title {
20962
- --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
20963
- --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
20964
- --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
20965
- --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
20966
- --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
20967
- --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
20968
- --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
20969
- --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
20970
- --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
20971
- --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
20972
- --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
20973
- --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
20974
- --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
20975
- --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
20976
- --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
20977
- --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
20978
- --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
20979
- --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
20980
- --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
20981
- font-family: var(--pf-c-title--FontFamily);
20982
- word-break: break-word;
20983
- }
20984
-
20985
- .pf-c-title.pf-m-4xl {
20986
- font-size: var(--pf-c-title--m-4xl--FontSize);
20987
- font-weight: var(--pf-c-title--m-4xl--FontWeight);
20988
- line-height: var(--pf-c-title--m-4xl--LineHeight);
20989
- }
20990
-
20991
- .pf-c-title.pf-m-3xl {
20992
- font-size: var(--pf-c-title--m-3xl--FontSize);
20993
- font-weight: var(--pf-c-title--m-3xl--FontWeight);
20994
- line-height: var(--pf-c-title--m-3xl--LineHeight);
20995
- }
20996
-
20997
- .pf-c-title.pf-m-2xl {
20998
- font-size: var(--pf-c-title--m-2xl--FontSize);
20999
- font-weight: var(--pf-c-title--m-2xl--FontWeight);
21000
- line-height: var(--pf-c-title--m-2xl--LineHeight);
21001
- }
21002
-
21003
- .pf-c-title.pf-m-xl {
21004
- font-size: var(--pf-c-title--m-xl--FontSize);
21005
- font-weight: var(--pf-c-title--m-xl--FontWeight);
21006
- line-height: var(--pf-c-title--m-xl--LineHeight);
21007
- }
21008
-
21009
- .pf-c-title.pf-m-lg {
21010
- font-size: var(--pf-c-title--m-lg--FontSize);
21011
- font-weight: var(--pf-c-title--m-lg--FontWeight);
21012
- line-height: var(--pf-c-title--m-lg--LineHeight);
21013
- }
21014
-
21015
- .pf-c-title.pf-m-md {
21016
- font-size: var(--pf-c-title--m-md--FontSize);
21017
- font-weight: var(--pf-c-title--m-md--FontWeight);
21018
- line-height: var(--pf-c-title--m-md--LineHeight);
21019
- }
21020
-
21021
- .pf-m-overpass-font .pf-c-title {
21022
- --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
21023
- --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
21024
- }
21025
-
21026
20928
  .pf-c-toggle-group {
21027
20929
  --pf-c-toggle-group__button--PaddingTop: var(--pf-global--spacer--form-element);
21028
20930
  --pf-c-toggle-group__button--PaddingRight: var(--pf-global--spacer--md);
@@ -21143,6 +21045,71 @@ svg.pf-c-spinner.pf-m-xl {
21143
21045
  --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
21144
21046
  }
21145
21047
 
21048
+ .pf-c-title {
21049
+ --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
21050
+ --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
21051
+ --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
21052
+ --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
21053
+ --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
21054
+ --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
21055
+ --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
21056
+ --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
21057
+ --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
21058
+ --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
21059
+ --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
21060
+ --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
21061
+ --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
21062
+ --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
21063
+ --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
21064
+ --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
21065
+ --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
21066
+ --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
21067
+ --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
21068
+ font-family: var(--pf-c-title--FontFamily);
21069
+ word-break: break-word;
21070
+ }
21071
+
21072
+ .pf-c-title.pf-m-4xl {
21073
+ font-size: var(--pf-c-title--m-4xl--FontSize);
21074
+ font-weight: var(--pf-c-title--m-4xl--FontWeight);
21075
+ line-height: var(--pf-c-title--m-4xl--LineHeight);
21076
+ }
21077
+
21078
+ .pf-c-title.pf-m-3xl {
21079
+ font-size: var(--pf-c-title--m-3xl--FontSize);
21080
+ font-weight: var(--pf-c-title--m-3xl--FontWeight);
21081
+ line-height: var(--pf-c-title--m-3xl--LineHeight);
21082
+ }
21083
+
21084
+ .pf-c-title.pf-m-2xl {
21085
+ font-size: var(--pf-c-title--m-2xl--FontSize);
21086
+ font-weight: var(--pf-c-title--m-2xl--FontWeight);
21087
+ line-height: var(--pf-c-title--m-2xl--LineHeight);
21088
+ }
21089
+
21090
+ .pf-c-title.pf-m-xl {
21091
+ font-size: var(--pf-c-title--m-xl--FontSize);
21092
+ font-weight: var(--pf-c-title--m-xl--FontWeight);
21093
+ line-height: var(--pf-c-title--m-xl--LineHeight);
21094
+ }
21095
+
21096
+ .pf-c-title.pf-m-lg {
21097
+ font-size: var(--pf-c-title--m-lg--FontSize);
21098
+ font-weight: var(--pf-c-title--m-lg--FontWeight);
21099
+ line-height: var(--pf-c-title--m-lg--LineHeight);
21100
+ }
21101
+
21102
+ .pf-c-title.pf-m-md {
21103
+ font-size: var(--pf-c-title--m-md--FontSize);
21104
+ font-weight: var(--pf-c-title--m-md--FontWeight);
21105
+ line-height: var(--pf-c-title--m-md--LineHeight);
21106
+ }
21107
+
21108
+ .pf-m-overpass-font .pf-c-title {
21109
+ --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
21110
+ --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
21111
+ }
21112
+
21146
21113
  .pf-c-toolbar__content-section, .pf-c-toolbar__content, .pf-c-toolbar__item, .pf-c-toolbar__group {
21147
21114
  --pf-hidden-visible--visible--Visibility: visible;
21148
21115
  --pf-hidden-visible--hidden--Display: none;
@@ -22524,6 +22491,44 @@ svg.pf-c-spinner.pf-m-xl {
22524
22491
  --pf-c-toolbar--spacer: 0;
22525
22492
  }
22526
22493
 
22494
+ .pf-c-timestamp {
22495
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
22496
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
22497
+ --pf-c-timestamp--OutlineOffset: 0.1875rem;
22498
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
22499
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
22500
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
22501
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
22502
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
22503
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
22504
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
22505
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
22506
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
22507
+ display: inline-block;
22508
+ font-size: var(--pf-c-timestamp--FontSize);
22509
+ color: var(--pf-c-timestamp--Color);
22510
+ outline-offset: var(--pf-c-timestamp--OutlineOffset);
22511
+ }
22512
+
22513
+ .pf-c-timestamp.pf-m-help-text {
22514
+ cursor: pointer;
22515
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
22516
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
22517
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
22518
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
22519
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
22520
+ }
22521
+
22522
+ .pf-c-timestamp.pf-m-help-text:hover {
22523
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
22524
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
22525
+ }
22526
+
22527
+ .pf-c-timestamp.pf-m-help-text:focus {
22528
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
22529
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
22530
+ }
22531
+
22527
22532
  .pf-c-tooltip {
22528
22533
  --pf-c-tooltip--MaxWidth: 18.75rem;
22529
22534
  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);