@patternfly/react-core 4.242.3 → 4.242.5

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 (12) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/umd/react-core.min.css +1379 -1374
  3. package/dist/umd/react-core.min.js +1 -1
  4. package/package.json +6 -6
  5. package/src/components/Tile/examples/Tile.md +7 -98
  6. package/src/components/Tile/examples/TileBasic.tsx +10 -0
  7. package/src/components/Tile/examples/TileStacked.tsx +17 -0
  8. package/src/components/Tile/examples/TileStackedWithLargeIcons.tsx +17 -0
  9. package/src/components/Tile/examples/TileWithExtraContent.tsx +26 -0
  10. package/src/components/Tile/examples/TileWithIcon.tsx +17 -0
  11. package/src/components/Tile/examples/TileWithSubtext.tsx +16 -0
  12. package/src/demos/TileDemo.md +7 -7
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 {
11417
+ .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
11418
+ --pf-c-menu-toggle--before--BorderTopColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
11419
+ --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
11420
+ }
11421
+
11422
+ .pf-c-masthead .pf-c-context-selector {
11423
+ --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
11424
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
11425
+ --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
11426
+ --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
11427
+ }
11428
+
11429
+ .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
11430
+ --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
11431
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
11432
+ }
11433
+
11434
+ .pf-c-masthead .pf-c-dropdown {
11435
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderTopColor);
11436
+ --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderRightColor);
11437
+ --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
11438
+ }
11439
+
11440
+ .pf-c-masthead .pf-c-dropdown.pf-m-full-height {
11441
+ --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
11442
+ --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
11443
+ }
11444
+
11445
+ .pf-c-masthead .pf-c-nav {
11446
+ align-self: stretch;
11447
+ }
11448
+
11449
+ .pf-c-masthead .pf-c-button.pf-m-plain {
11450
+ color: var(--pf-c-button--m-plain--Color);
11451
+ }
11452
+
11453
+ .pf-c-masthead__main {
11454
+ position: relative;
11475
11455
  display: flex;
11476
- flex-direction: column;
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);
11477
11465
  }
11478
11466
 
11479
- .pf-c-menu.pf-m-drilldown[hidden] {
11480
- display: none;
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);
11481
11474
  }
11482
11475
 
11483
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content {
11476
+ .pf-c-masthead__main:last-child {
11477
+ --pf-c-masthead__main--MarginRight: 0;
11478
+ }
11479
+
11480
+ .pf-c-masthead__content {
11481
+ display: flex;
11484
11482
  flex-grow: 1;
11485
- overflow: hidden;
11486
- transition: var(--pf-c-menu--m-drilldown__content--Transition);
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;
11487
11493
  }
11488
11494
 
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%);
11495
+ .pf-c-masthead__content:only-child {
11496
+ --pf-c-masthead__content--MarginLeft: 0;
11492
11497
  }
11493
11498
 
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);
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);
11501
11502
  }
11502
11503
 
11503
- .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
11504
- transform: translateX(-100%);
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);
11505
11506
  }
11506
11507
 
11507
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
11508
- position: relative;
11509
- overflow: hidden;
11510
- transition: var(--pf-c-menu--m-drilldown__list--Transition);
11508
+ .pf-c-masthead__main,
11509
+ .pf-c-masthead__brand,
11510
+ .pf-c-masthead__content {
11511
+ min-width: 0;
11511
11512
  }
11512
11513
 
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;
11514
+ .pf-c-masthead__brand {
11515
+ display: inline-flex;
11516
+ align-self: center;
11516
11517
  }
11517
11518
 
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);
11519
+ .pf-c-masthead__toggle {
11520
+ grid-column: var(--pf-c-masthead__toggle--GridColumn);
11521
+ align-self: center;
11522
+ margin-right: var(--pf-c-masthead__toggle--MarginRight);
11523
+ margin-left: var(--pf-c-masthead__toggle--MarginLeft);
11524
+ }
11525
+
11526
+ .pf-c-masthead__toggle .pf-c-button {
11527
+ --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
11528
+ }
11529
+
11530
+ .pf-c-masthead.pf-m-display-stack {
11531
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11532
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11533
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11534
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11535
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11536
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11537
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11538
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11539
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11540
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11541
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11542
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11543
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11544
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11545
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11546
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11547
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11548
+ }
11549
+
11550
+ .pf-c-masthead.pf-m-display-inline {
11551
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
11552
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
11553
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
11554
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-inline__main--Order);
11555
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-inline__main--FlexBasis);
11556
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-inline__main--PaddingTop);
11557
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-inline__main--PaddingBottom);
11558
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-inline__main--MarginRight);
11559
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-inline__main--BorderBottom);
11560
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-inline__content--GridColumn);
11561
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-inline__content--MinHeight);
11562
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-inline__content--Order);
11563
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-inline__content--PaddingTop);
11564
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-inline__content--PaddingBottom);
11565
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-inline__content--MarginLeft);
11566
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
11567
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
11520
11568
  }
11521
11569
 
11522
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
11523
- overflow: visible;
11570
+ .pf-c-masthead.pf-m-inset-none {
11571
+ --pf-c-masthead--inset: 0;
11524
11572
  }
11525
11573
 
11526
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
11527
- position: static;
11574
+ .pf-c-masthead.pf-m-inset-sm {
11575
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11528
11576
  }
11529
11577
 
11530
- .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
11531
- background-color: transparent;
11578
+ .pf-c-masthead.pf-m-inset-md {
11579
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11532
11580
  }
11533
11581
 
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;
11582
+ .pf-c-masthead.pf-m-inset-lg {
11583
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11537
11584
  }
11538
11585
 
11539
- .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
11540
- outline-offset: var(--pf-c-menu__item--OutlineOffset);
11586
+ .pf-c-masthead.pf-m-inset-xl {
11587
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11541
11588
  }
11542
11589
 
11543
- .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
11544
- overflow: visible;
11590
+ .pf-c-masthead.pf-m-inset-2xl {
11591
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11545
11592
  }
11546
11593
 
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;
11550
- }
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
+ }
11551
11614
 
11552
- .pf-c-menu.pf-m-plain {
11553
- --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
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
+ }
11554
11634
  }
11635
+ @media (min-width: 576px) {
11636
+ .pf-c-masthead.pf-m-inset-none-on-sm {
11637
+ --pf-c-masthead--inset: 0;
11638
+ }
11555
11639
 
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);
11560
- }
11640
+ .pf-c-masthead.pf-m-inset-sm-on-sm {
11641
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11642
+ }
11561
11643
 
11562
- .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
11563
- overflow-y: auto;
11564
- }
11644
+ .pf-c-masthead.pf-m-inset-md-on-sm {
11645
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11646
+ }
11565
11647
 
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);
11580
- }
11648
+ .pf-c-masthead.pf-m-inset-lg-on-sm {
11649
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11650
+ }
11581
11651
 
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);
11585
- }
11652
+ .pf-c-masthead.pf-m-inset-xl-on-sm {
11653
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11654
+ }
11586
11655
 
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);
11656
+ .pf-c-masthead.pf-m-inset-2xl-on-sm {
11657
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11658
+ }
11594
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
+ }
11595
11680
 
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);
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
+ }
11603
11700
  }
11701
+ @media (min-width: 768px) {
11702
+ .pf-c-masthead.pf-m-inset-none-on-md {
11703
+ --pf-c-masthead--inset: 0;
11704
+ }
11604
11705
 
11605
- .pf-c-menu.pf-m-nav .pf-c-menu {
11606
- width: 100%;
11607
- }
11706
+ .pf-c-masthead.pf-m-inset-sm-on-md {
11707
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11708
+ }
11608
11709
 
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
- }
11710
+ .pf-c-masthead.pf-m-inset-md-on-md {
11711
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11712
+ }
11613
11713
 
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);
11617
- }
11714
+ .pf-c-masthead.pf-m-inset-lg-on-md {
11715
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11716
+ }
11618
11717
 
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
- }
11718
+ .pf-c-masthead.pf-m-inset-xl-on-md {
11719
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11720
+ }
11623
11721
 
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);
11722
+ .pf-c-masthead.pf-m-inset-2xl-on-md {
11723
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11724
+ }
11626
11725
  }
11726
+ @media (min-width: 992px) {
11727
+ .pf-c-masthead.pf-m-display-stack-on-lg {
11728
+ --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-stack--GridTemplateColumns);
11729
+ --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-stack__main--GridColumn);
11730
+ --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-stack__main--MinHeight);
11731
+ --pf-c-masthead__main--Order: var(--pf-c-masthead--m-display-stack__main--Order);
11732
+ --pf-c-masthead__main--FlexBasis: var(--pf-c-masthead--m-display-stack__main--FlexBasis);
11733
+ --pf-c-masthead__main--PaddingTop: var(--pf-c-masthead--m-display-stack__main--PaddingTop);
11734
+ --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
11735
+ --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
11736
+ --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
11737
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
11738
+ --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
11739
+ --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
11740
+ --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
11741
+ --pf-c-masthead__content--PaddingBottom: var(--pf-c-masthead--m-display-stack__content--PaddingBottom);
11742
+ --pf-c-masthead__content--MarginLeft: var(--pf-c-masthead--m-display-stack__content--MarginLeft);
11743
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
11744
+ --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
11745
+ }
11627
11746
 
11628
- .pf-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);
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
+ }
11630
11766
  }
11767
+ @media (min-width: 992px) {
11768
+ .pf-c-masthead.pf-m-inset-none-on-lg {
11769
+ --pf-c-masthead--inset: 0;
11770
+ }
11631
11771
 
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
- }
11772
+ .pf-c-masthead.pf-m-inset-sm-on-lg {
11773
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11774
+ }
11638
11775
 
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);
11642
- }
11776
+ .pf-c-masthead.pf-m-inset-md-on-lg {
11777
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11778
+ }
11643
11779
 
11644
- .pf-c-menu__content {
11645
- height: var(--pf-c-menu__content--Height);
11646
- max-height: var(--pf-c-menu__content--MaxHeight);
11647
- }
11780
+ .pf-c-masthead.pf-m-inset-lg-on-lg {
11781
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11782
+ }
11648
11783
 
11649
- .pf-c-menu__content .pf-c-menu__content {
11650
- --pf-c-menu__content--Height: auto;
11651
- }
11784
+ .pf-c-masthead.pf-m-inset-xl-on-lg {
11785
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11786
+ }
11652
11787
 
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);
11788
+ .pf-c-masthead.pf-m-inset-2xl-on-lg {
11789
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11790
+ }
11662
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
+ }
11663
11812
 
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);
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
+ }
11670
11832
  }
11833
+ @media (min-width: 1200px) {
11834
+ .pf-c-masthead.pf-m-inset-none-on-xl {
11835
+ --pf-c-masthead--inset: 0;
11836
+ }
11671
11837
 
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
- }
11838
+ .pf-c-masthead.pf-m-inset-sm-on-xl {
11839
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11840
+ }
11675
11841
 
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);
11678
- }
11842
+ .pf-c-masthead.pf-m-inset-md-on-xl {
11843
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11844
+ }
11679
11845
 
11680
- .pf-c-menu__header + .pf-c-menu__search {
11681
- --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
11682
- }
11846
+ .pf-c-masthead.pf-m-inset-lg-on-xl {
11847
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11848
+ }
11683
11849
 
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
- }
11850
+ .pf-c-masthead.pf-m-inset-xl-on-xl {
11851
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11852
+ }
11690
11853
 
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);
11854
+ .pf-c-masthead.pf-m-inset-2xl-on-xl {
11855
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11856
+ }
11695
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
+ }
11696
11878
 
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);
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
+ }
11700
11898
  }
11899
+ @media (min-width: 1450px) {
11900
+ .pf-c-masthead.pf-m-inset-none-on-2xl {
11901
+ --pf-c-masthead--inset: 0;
11902
+ }
11701
11903
 
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
- }
11904
+ .pf-c-masthead.pf-m-inset-sm-on-2xl {
11905
+ --pf-c-masthead--inset: var(--pf-global--spacer--sm);
11906
+ }
11708
11907
 
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);
11712
- }
11908
+ .pf-c-masthead.pf-m-inset-md-on-2xl {
11909
+ --pf-c-masthead--inset: var(--pf-global--spacer--md);
11910
+ }
11713
11911
 
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);
11717
- }
11912
+ .pf-c-masthead.pf-m-inset-lg-on-2xl {
11913
+ --pf-c-masthead--inset: var(--pf-global--spacer--lg);
11914
+ }
11718
11915
 
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
- }
11916
+ .pf-c-masthead.pf-m-inset-xl-on-2xl {
11917
+ --pf-c-masthead--inset: var(--pf-global--spacer--xl);
11918
+ }
11726
11919
 
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);
11920
+ .pf-c-masthead.pf-m-inset-2xl-on-2xl {
11921
+ --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
11922
+ }
11923
+ }
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;
11731
11932
  }
11732
11933
 
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;
11934
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
11935
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
11739
11936
  }
11740
11937
 
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;
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);
11757
11951
  }
11758
11952
 
11759
- .pf-c-menu__item:hover {
11760
- text-decoration: none;
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);
11761
11956
  }
11762
11957
 
11763
- .pf-c-menu__item:hover, .pf-c-menu__item:focus {
11764
- --pf-c-menu__item-external-icon--Opacity: 1;
11958
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
11959
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
11765
11960
  }
11766
11961
 
11767
- .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
11768
- opacity: 1;
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);
11769
11970
  }
11770
11971
 
11771
- label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
11772
- cursor: pointer;
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);
11773
11980
  }
11774
11981
 
11775
- .pf-c-menu__item-main {
11776
- display: flex;
11777
- align-items: center;
11778
- width: 100%;
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);
11779
11985
  }
11780
11986
 
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);
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
+ }
11992
+
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
+ }
11786
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
+ }
11787
12003
 
11788
- .pf-c-menu__item-text {
11789
- overflow: hidden;
11790
- text-overflow: ellipsis;
11791
- white-space: nowrap;
11792
- flex-grow: 1;
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
+ }
11793
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
+ }
11794
12014
 
11795
- .pf-c-menu__group {
11796
- --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
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
+ }
11797
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
+ }
11798
12025
 
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);
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
+ }
11806
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
+ }
11807
12036
 
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;
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
+ }
12041
+ }
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;
11812
12199
  }
11813
12200
 
11814
- .pf-c-menu__item-icon {
11815
- margin-right: var(--pf-c-menu__item-icon--MarginRight);
12201
+ .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
12202
+ overflow: visible;
11816
12203
  }
11817
12204
 
11818
- .pf-c-menu__item-check {
11819
- display: flex;
11820
- align-items: center;
11821
- margin-right: var(--pf-c-menu__item-check--MarginRight);
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);
11822
12208
  }
11823
12209
 
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);
12210
+ .pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
12211
+ position: absolute;
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);
11828
12216
  }
11829
12217
 
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);
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;
11832
12220
  }
11833
12221
 
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);
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);
11836
12225
  }
11837
12226
 
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;
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;
11843
12230
  }
11844
12231
 
11845
- .pf-c-menu__item-action {
12232
+ .pf-c-menu.pf-m-drilldown {
11846
12233
  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;
11853
- }
11854
-
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);
11857
- }
11858
-
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);
11862
- }
11863
-
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);
12234
+ flex-direction: column;
11866
12235
  }
11867
12236
 
11868
- .pf-c-menu__item-action:disabled {
11869
- --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12237
+ .pf-c-menu.pf-m-drilldown[hidden] {
12238
+ display: none;
11870
12239
  }
11871
12240
 
11872
- .pf-c-menu__item-action-icon {
11873
- display: flex;
11874
- align-items: center;
11875
- height: var(--pf-c-menu__item-action-icon--Height);
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);
11876
12245
  }
11877
12246
 
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);
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%);
11882
12250
  }
11883
12251
 
11884
- .pf-c-menu__footer::after {
12252
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu {
12253
+ --pf-c-menu--BoxShadow: none;
11885
12254
  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);
12255
+ top: var(--pf-c-menu--m-drilldown--c-menu--Top);
12256
+ left: 100%;
12257
+ width: 100%;
12258
+ transition: var(--pf-c-menu--m-drilldown--c-menu--Transition);
12050
12259
  }
12051
12260
 
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
- }
12261
+ .pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu.pf-m-drilled-in {
12262
+ transform: translateX(-100%);
12072
12263
  }
12073
- @media screen and (min-width: 1200px) {
12074
- .pf-c-masthead {
12075
- --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
12076
- }
12264
+
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);
12077
12269
  }
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);
12270
+
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;
12082
12274
  }
12083
12275
 
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);
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);
12088
12278
  }
12089
12279
 
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);
12097
- width: 100%;
12280
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path > .pf-c-menu {
12281
+ overflow: visible;
12098
12282
  }
12099
12283
 
12100
- .pf-c-masthead .pf-c-toolbar__content-section {
12101
- flex-wrap: nowrap;
12284
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static > .pf-c-menu {
12285
+ position: static;
12102
12286
  }
12103
12287
 
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);
12288
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-static:hover {
12289
+ background-color: transparent;
12106
12290
  }
12107
12291
 
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);
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;
12112
12295
  }
12113
12296
 
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);
12297
+ .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
12298
+ outline-offset: var(--pf-c-menu__item--OutlineOffset);
12117
12299
  }
12118
12300
 
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);
12301
+ .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
12302
+ overflow: visible;
12124
12303
  }
12125
12304
 
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);
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;
12129
12308
  }
12130
12309
 
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);
12310
+ .pf-c-menu.pf-m-plain {
12311
+ --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
12135
12312
  }
12136
12313
 
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);
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);
12140
12318
  }
12141
12319
 
12142
- .pf-c-masthead .pf-c-nav {
12143
- align-self: stretch;
12320
+ .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
12321
+ overflow-y: auto;
12144
12322
  }
12145
12323
 
12146
- .pf-c-masthead .pf-c-button.pf-m-plain {
12147
- color: var(--pf-c-button--m-plain--Color);
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);
12148
12338
  }
12149
12339
 
12150
- .pf-c-masthead__main {
12340
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
12151
12341
  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);
12342
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
12162
12343
  }
12163
12344
 
12164
- .pf-c-masthead__main::before {
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 {
12165
12346
  position: absolute;
12166
- right: var(--pf-c-masthead__main--before--Right);
12347
+ right: 0;
12167
12348
  bottom: 0;
12168
- left: var(--pf-c-masthead__main--before--Left);
12349
+ left: 0;
12169
12350
  content: "";
12170
- border-bottom: var(--pf-c-masthead__main--before--BorderBottom);
12171
- }
12172
-
12173
- .pf-c-masthead__main:last-child {
12174
- --pf-c-masthead__main--MarginRight: 0;
12351
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
12175
12352
  }
12176
12353
 
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;
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);
12190
12361
  }
12191
12362
 
12192
- .pf-c-masthead__content:only-child {
12193
- --pf-c-masthead__content--MarginLeft: 0;
12363
+ .pf-c-menu.pf-m-nav .pf-c-menu {
12364
+ width: 100%;
12194
12365
  }
12195
12366
 
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);
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);
12199
12370
  }
12200
12371
 
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);
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);
12203
12375
  }
12204
12376
 
12205
- .pf-c-masthead__main,
12206
- .pf-c-masthead__brand,
12207
- .pf-c-masthead__content {
12208
- min-width: 0;
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);
12209
12380
  }
12210
12381
 
12211
- .pf-c-masthead__brand {
12212
- display: inline-flex;
12213
- align-self: center;
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);
12214
12384
  }
12215
12385
 
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);
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);
12221
12388
  }
12222
12389
 
12223
- .pf-c-masthead__toggle .pf-c-button {
12224
- --pf-c-button--FontSize: var(--pf-c-masthead__toggle--c-button--FontSize);
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);
12225
12395
  }
12226
12396
 
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);
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);
12245
12400
  }
12246
12401
 
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);
12402
+ .pf-c-menu__content {
12403
+ height: var(--pf-c-menu__content--Height);
12404
+ max-height: var(--pf-c-menu__content--MaxHeight);
12265
12405
  }
12266
12406
 
12267
- .pf-c-masthead.pf-m-inset-none {
12268
- --pf-c-masthead--inset: 0;
12407
+ .pf-c-menu__content .pf-c-menu__content {
12408
+ --pf-c-menu__content--Height: auto;
12269
12409
  }
12270
12410
 
12271
- .pf-c-masthead.pf-m-inset-sm {
12272
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
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);
12273
12420
  }
12274
12421
 
12275
- .pf-c-masthead.pf-m-inset-md {
12276
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
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);
12277
12428
  }
12278
12429
 
12279
- .pf-c-masthead.pf-m-inset-lg {
12280
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
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);
12281
12432
  }
12282
12433
 
12283
- .pf-c-masthead.pf-m-inset-xl {
12284
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
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);
12285
12436
  }
12286
12437
 
12287
- .pf-c-masthead.pf-m-inset-2xl {
12288
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12438
+ .pf-c-menu__header + .pf-c-menu__search {
12439
+ --pf-c-menu__search--PaddingTop: var(--pf-c-menu__header__search--PaddingTop);
12289
12440
  }
12290
12441
 
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
- }
12311
-
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
- }
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);
12331
12447
  }
12332
- @media (min-width: 576px) {
12333
- .pf-c-masthead.pf-m-inset-none-on-sm {
12334
- --pf-c-masthead--inset: 0;
12335
- }
12336
12448
 
12337
- .pf-c-masthead.pf-m-inset-sm-on-sm {
12338
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12339
- }
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
+ }
12340
12454
 
12341
- .pf-c-masthead.pf-m-inset-md-on-sm {
12342
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12343
- }
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
+ }
12344
12459
 
12345
- .pf-c-masthead.pf-m-inset-lg-on-sm {
12346
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12347
- }
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);
12465
+ }
12348
12466
 
12349
- .pf-c-masthead.pf-m-inset-xl-on-sm {
12350
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12351
- }
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);
12470
+ }
12352
12471
 
12353
- .pf-c-masthead.pf-m-inset-2xl-on-sm {
12354
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12355
- }
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);
12356
12475
  }
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
12476
 
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
- }
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;
12397
12483
  }
12398
- @media (min-width: 768px) {
12399
- .pf-c-masthead.pf-m-inset-none-on-md {
12400
- --pf-c-masthead--inset: 0;
12401
- }
12402
12484
 
12403
- .pf-c-masthead.pf-m-inset-sm-on-md {
12404
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12405
- }
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
+ }
12406
12490
 
12407
- .pf-c-masthead.pf-m-inset-md-on-md {
12408
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12409
- }
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
+ }
12410
12498
 
12411
- .pf-c-masthead.pf-m-inset-lg-on-md {
12412
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12413
- }
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
+ }
12414
12502
 
12415
- .pf-c-masthead.pf-m-inset-xl-on-md {
12416
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12417
- }
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;
12519
+ }
12418
12520
 
12419
- .pf-c-masthead.pf-m-inset-2xl-on-md {
12420
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12421
- }
12521
+ .pf-c-menu__item:hover {
12522
+ text-decoration: none;
12422
12523
  }
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
12524
 
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
- }
12525
+ .pf-c-menu__item:hover, .pf-c-menu__item:focus {
12526
+ --pf-c-menu__item-external-icon--Opacity: 1;
12527
+ }
12528
+
12529
+ .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
12530
+ opacity: 1;
12463
12531
  }
12464
- @media (min-width: 992px) {
12465
- .pf-c-masthead.pf-m-inset-none-on-lg {
12466
- --pf-c-masthead--inset: 0;
12467
- }
12468
12532
 
12469
- .pf-c-masthead.pf-m-inset-sm-on-lg {
12470
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12471
- }
12533
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
12534
+ cursor: pointer;
12535
+ }
12472
12536
 
12473
- .pf-c-masthead.pf-m-inset-md-on-lg {
12474
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12475
- }
12537
+ .pf-c-menu__item-main {
12538
+ display: flex;
12539
+ align-items: center;
12540
+ width: 100%;
12541
+ }
12476
12542
 
12477
- .pf-c-masthead.pf-m-inset-lg-on-lg {
12478
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12479
- }
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);
12548
+ }
12480
12549
 
12481
- .pf-c-masthead.pf-m-inset-xl-on-lg {
12482
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12483
- }
12550
+ .pf-c-menu__item-text {
12551
+ overflow: hidden;
12552
+ text-overflow: ellipsis;
12553
+ white-space: nowrap;
12554
+ flex-grow: 1;
12555
+ }
12484
12556
 
12485
- .pf-c-masthead.pf-m-inset-2xl-on-lg {
12486
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12487
- }
12557
+ .pf-c-menu__group {
12558
+ --pf-hidden-visible--visible--Display: var(--pf-c-menu__group--Display);
12488
12559
  }
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
12560
 
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
- }
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);
12529
12568
  }
12530
- @media (min-width: 1200px) {
12531
- .pf-c-masthead.pf-m-inset-none-on-xl {
12532
- --pf-c-masthead--inset: 0;
12533
- }
12534
12569
 
12535
- .pf-c-masthead.pf-m-inset-sm-on-xl {
12536
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12537
- }
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
+ }
12538
12575
 
12539
- .pf-c-masthead.pf-m-inset-md-on-xl {
12540
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12541
- }
12576
+ .pf-c-menu__item-icon {
12577
+ margin-right: var(--pf-c-menu__item-icon--MarginRight);
12578
+ }
12542
12579
 
12543
- .pf-c-masthead.pf-m-inset-lg-on-xl {
12544
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12545
- }
12580
+ .pf-c-menu__item-check {
12581
+ display: flex;
12582
+ align-items: center;
12583
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
12584
+ }
12546
12585
 
12547
- .pf-c-masthead.pf-m-inset-xl-on-xl {
12548
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12549
- }
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);
12590
+ }
12550
12591
 
12551
- .pf-c-masthead.pf-m-inset-2xl-on-xl {
12552
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12553
- }
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);
12554
12594
  }
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
12595
 
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
- }
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);
12595
12598
  }
12596
- @media (min-width: 1450px) {
12597
- .pf-c-masthead.pf-m-inset-none-on-2xl {
12598
- --pf-c-masthead--inset: 0;
12599
- }
12600
12599
 
12601
- .pf-c-masthead.pf-m-inset-sm-on-2xl {
12602
- --pf-c-masthead--inset: var(--pf-global--spacer--sm);
12603
- }
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
+ }
12604
12606
 
12605
- .pf-c-masthead.pf-m-inset-md-on-2xl {
12606
- --pf-c-masthead--inset: var(--pf-global--spacer--md);
12607
- }
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
+ }
12608
12616
 
12609
- .pf-c-masthead.pf-m-inset-lg-on-2xl {
12610
- --pf-c-masthead--inset: var(--pf-global--spacer--lg);
12611
- }
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);
12619
+ }
12612
12620
 
12613
- .pf-c-masthead.pf-m-inset-xl-on-2xl {
12614
- --pf-c-masthead--inset: var(--pf-global--spacer--xl);
12615
- }
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);
12624
+ }
12616
12625
 
12617
- .pf-c-masthead.pf-m-inset-2xl-on-2xl {
12618
- --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
12619
- }
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);
12620
12628
  }
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;
12629
+
12630
+ .pf-c-menu__item-action:disabled {
12631
+ --pf-c-menu__item-action--Color: var(--pf-c-menu__item-action--disabled--Color);
12629
12632
  }
12630
12633
 
12631
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
12632
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--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);
12633
12638
  }
12634
12639
 
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);
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);
12648
12644
  }
12649
12645
 
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);
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);
12653
12655
  }
12654
12656
 
12655
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
12656
- --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
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 {
@@ -19469,6 +19474,45 @@ svg.pf-c-spinner.pf-m-xl {
19469
19474
  --pf-c-switch__toggle--before--BoxShadow: none;
19470
19475
  }
19471
19476
 
19477
+ .pf-c-tab-content {
19478
+ --pf-c-tab-content__body--PaddingTop: 0;
19479
+ --pf-c-tab-content__body--PaddingRight: 0;
19480
+ --pf-c-tab-content__body--PaddingBottom: 0;
19481
+ --pf-c-tab-content__body--PaddingLeft: 0;
19482
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
19483
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
19484
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
19485
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
19486
+ --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
19487
+ --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
19488
+ --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
19489
+ --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
19490
+ --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
19491
+ }
19492
+
19493
+ @media screen and (min-width: 1200px) {
19494
+ .pf-c-tab-content {
19495
+ --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
19496
+ --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
19497
+ --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
19498
+ --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
19499
+ }
19500
+ }
19501
+ .pf-c-tab-content.pf-m-light-300 {
19502
+ background-color: var(--pf-c-tab-content--m-light-300);
19503
+ }
19504
+
19505
+ .pf-c-tab-content__body {
19506
+ padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
19507
+ }
19508
+
19509
+ .pf-c-tab-content__body.pf-m-padding {
19510
+ --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
19511
+ --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
19512
+ --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
19513
+ --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
19514
+ }
19515
+
19472
19516
  .pf-c-tabs {
19473
19517
  --pf-c-tabs--inset: 0;
19474
19518
  --pf-c-tabs--Width: auto;
@@ -20439,45 +20483,6 @@ svg.pf-c-spinner.pf-m-xl {
20439
20483
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
20440
20484
  }
20441
20485
 
20442
- .pf-c-tab-content {
20443
- --pf-c-tab-content__body--PaddingTop: 0;
20444
- --pf-c-tab-content__body--PaddingRight: 0;
20445
- --pf-c-tab-content__body--PaddingBottom: 0;
20446
- --pf-c-tab-content__body--PaddingLeft: 0;
20447
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
20448
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
20449
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
20450
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
20451
- --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
20452
- --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
20453
- --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
20454
- --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
20455
- --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
20456
- }
20457
-
20458
- @media screen and (min-width: 1200px) {
20459
- .pf-c-tab-content {
20460
- --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
20461
- --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
20462
- --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
20463
- --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
20464
- }
20465
- }
20466
- .pf-c-tab-content.pf-m-light-300 {
20467
- background-color: var(--pf-c-tab-content--m-light-300);
20468
- }
20469
-
20470
- .pf-c-tab-content__body {
20471
- padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
20472
- }
20473
-
20474
- .pf-c-tab-content__body.pf-m-padding {
20475
- --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
20476
- --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
20477
- --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
20478
- --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
20479
- }
20480
-
20481
20486
  .pf-c-content {
20482
20487
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
20483
20488
  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
@@ -26189,6 +26194,75 @@ label.pf-c-tree-view__node-text {
26189
26194
  --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
26190
26195
  }
26191
26196
  }
26197
+ .pf-l-gallery {
26198
+ --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
26199
+ --pf-l-gallery--GridTemplateColumns--min: 250px;
26200
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26201
+ --pf-l-gallery--GridTemplateColumns--max: 1fr;
26202
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26203
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
26204
+ --pf-l-gallery--GridTemplateRows: auto;
26205
+ display: grid;
26206
+ grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
26207
+ grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
26208
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
26209
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
26210
+ }
26211
+
26212
+ .pf-l-gallery.pf-m-gutter {
26213
+ grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
26214
+ }
26215
+
26216
+ @media (min-width: 576px) {
26217
+ .pf-l-gallery {
26218
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
26219
+ }
26220
+ }
26221
+ @media (min-width: 768px) {
26222
+ .pf-l-gallery {
26223
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
26224
+ }
26225
+ }
26226
+ @media (min-width: 992px) {
26227
+ .pf-l-gallery {
26228
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
26229
+ }
26230
+ }
26231
+ @media (min-width: 1200px) {
26232
+ .pf-l-gallery {
26233
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
26234
+ }
26235
+ }
26236
+ @media (min-width: 1450px) {
26237
+ .pf-l-gallery {
26238
+ --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
26239
+ }
26240
+ }
26241
+ @media (min-width: 576px) {
26242
+ .pf-l-gallery {
26243
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
26244
+ }
26245
+ }
26246
+ @media (min-width: 768px) {
26247
+ .pf-l-gallery {
26248
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
26249
+ }
26250
+ }
26251
+ @media (min-width: 992px) {
26252
+ .pf-l-gallery {
26253
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
26254
+ }
26255
+ }
26256
+ @media (min-width: 1200px) {
26257
+ .pf-l-gallery {
26258
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
26259
+ }
26260
+ }
26261
+ @media (min-width: 1450px) {
26262
+ .pf-l-gallery {
26263
+ --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
26264
+ }
26265
+ }
26192
26266
  .pf-l-grid {
26193
26267
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
26194
26268
  --pf-l-grid__item--GridColumnStart: auto;
@@ -27403,75 +27477,6 @@ label.pf-c-tree-view__node-text {
27403
27477
  grid-gap: var(--pf-l-grid--m-gutter--GridGap);
27404
27478
  }
27405
27479
 
27406
- .pf-l-gallery {
27407
- --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
27408
- --pf-l-gallery--GridTemplateColumns--min: 250px;
27409
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27410
- --pf-l-gallery--GridTemplateColumns--max: 1fr;
27411
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27412
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
27413
- --pf-l-gallery--GridTemplateRows: auto;
27414
- display: grid;
27415
- grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
27416
- grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
27417
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
27418
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
27419
- }
27420
-
27421
- .pf-l-gallery.pf-m-gutter {
27422
- grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
27423
- }
27424
-
27425
- @media (min-width: 576px) {
27426
- .pf-l-gallery {
27427
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
27428
- }
27429
- }
27430
- @media (min-width: 768px) {
27431
- .pf-l-gallery {
27432
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
27433
- }
27434
- }
27435
- @media (min-width: 992px) {
27436
- .pf-l-gallery {
27437
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
27438
- }
27439
- }
27440
- @media (min-width: 1200px) {
27441
- .pf-l-gallery {
27442
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
27443
- }
27444
- }
27445
- @media (min-width: 1450px) {
27446
- .pf-l-gallery {
27447
- --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
27448
- }
27449
- }
27450
- @media (min-width: 576px) {
27451
- .pf-l-gallery {
27452
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
27453
- }
27454
- }
27455
- @media (min-width: 768px) {
27456
- .pf-l-gallery {
27457
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
27458
- }
27459
- }
27460
- @media (min-width: 992px) {
27461
- .pf-l-gallery {
27462
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
27463
- }
27464
- }
27465
- @media (min-width: 1200px) {
27466
- .pf-l-gallery {
27467
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
27468
- }
27469
- }
27470
- @media (min-width: 1450px) {
27471
- .pf-l-gallery {
27472
- --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
27473
- }
27474
- }
27475
27480
  .pf-l-level {
27476
27481
  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
27477
27482
  display: flex;
@@ -27503,21 +27508,6 @@ label.pf-c-tree-view__node-text {
27503
27508
  margin-right: var(--pf-l-split--m-gutter--MarginRight);
27504
27509
  }
27505
27510
 
27506
- .pf-l-stack {
27507
- --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27508
- display: flex;
27509
- flex-direction: column;
27510
- height: 100%;
27511
- }
27512
-
27513
- .pf-l-stack__item.pf-m-fill {
27514
- flex-grow: 1;
27515
- }
27516
-
27517
- .pf-l-stack.pf-m-gutter > *:not(:last-child) {
27518
- margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27519
- }
27520
-
27521
27511
  .pf-c-alert-group {
27522
27512
  --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
27523
27513
  --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);
@@ -27578,6 +27568,21 @@ label.pf-c-tree-view__node-text {
27578
27568
  --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
27579
27569
  }
27580
27570
 
27571
+ .pf-l-stack {
27572
+ --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
27573
+ display: flex;
27574
+ flex-direction: column;
27575
+ height: 100%;
27576
+ }
27577
+
27578
+ .pf-l-stack__item.pf-m-fill {
27579
+ flex-grow: 1;
27580
+ }
27581
+
27582
+ .pf-l-stack.pf-m-gutter > *:not(:last-child) {
27583
+ margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
27584
+ }
27585
+
27581
27586
  .pf-c-about-modal-box {
27582
27587
  --pf-global--Color--100: var(--pf-global--Color--light-100);
27583
27588
  --pf-global--Color--200: var(--pf-global--Color--light-200);