@patternfly/react-styles 6.0.0-alpha.5 → 6.0.0-alpha.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/assets/images/pf-background.svg +22 -0
  3. package/css/components/AboutModalBox/about-modal-box.css +4 -2
  4. package/css/components/BackgroundImage/background-image.css +5 -1
  5. package/css/components/Button/button.css +381 -350
  6. package/css/components/Button/button.d.ts +9 -7
  7. package/css/components/Button/button.js +9 -7
  8. package/css/components/Button/button.mjs +9 -7
  9. package/css/components/Check/check.css +17 -16
  10. package/css/components/DataList/data-list.css +101 -158
  11. package/css/components/DataList/data-list.d.ts +1 -2
  12. package/css/components/DataList/data-list.js +1 -2
  13. package/css/components/DataList/data-list.mjs +1 -2
  14. package/css/components/Divider/divider.css +97 -177
  15. package/css/components/Divider/divider.d.ts +1 -0
  16. package/css/components/Divider/divider.js +1 -0
  17. package/css/components/Divider/divider.mjs +1 -0
  18. package/css/components/Form/form.css +62 -114
  19. package/css/components/Form/form.d.ts +2 -6
  20. package/css/components/Form/form.js +2 -6
  21. package/css/components/Form/form.mjs +2 -6
  22. package/css/components/FormControl/form-control.css +86 -111
  23. package/css/components/FormControl/form-control.d.ts +1 -2
  24. package/css/components/FormControl/form-control.js +1 -2
  25. package/css/components/FormControl/form-control.mjs +1 -2
  26. package/css/components/Masthead/masthead.css +267 -435
  27. package/css/components/Masthead/masthead.d.ts +2 -38
  28. package/css/components/Masthead/masthead.js +2 -38
  29. package/css/components/Masthead/masthead.mjs +2 -38
  30. package/css/components/Nav/nav.css +240 -918
  31. package/css/components/Nav/nav.d.ts +9 -20
  32. package/css/components/Nav/nav.js +9 -20
  33. package/css/components/Nav/nav.mjs +9 -20
  34. package/css/components/NotificationDrawer/notification-drawer.css +104 -115
  35. package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -3
  36. package/css/components/NotificationDrawer/notification-drawer.js +3 -3
  37. package/css/components/NotificationDrawer/notification-drawer.mjs +3 -3
  38. package/css/components/Panel/panel.css +27 -23
  39. package/css/components/Panel/panel.d.ts +2 -2
  40. package/css/components/Panel/panel.js +2 -2
  41. package/css/components/Panel/panel.mjs +2 -2
  42. package/css/components/Progress/progress.css +31 -45
  43. package/css/components/Progress/progress.d.ts +1 -2
  44. package/css/components/Progress/progress.js +1 -2
  45. package/css/components/Progress/progress.mjs +1 -2
  46. package/css/components/Radio/radio.css +15 -11
  47. package/css/components/SimpleList/simple-list.css +1 -1
  48. package/css/components/Skeleton/skeleton.css +18 -20
  49. package/css/components/Skeleton/skeleton.d.ts +1 -2
  50. package/css/components/Skeleton/skeleton.js +1 -2
  51. package/css/components/Skeleton/skeleton.mjs +1 -2
  52. package/css/components/Slider/slider.css +34 -30
  53. package/css/components/Spinner/spinner.css +17 -34
  54. package/css/components/Switch/switch.css +41 -37
  55. package/css/components/Switch/switch.d.ts +1 -2
  56. package/css/components/Switch/switch.js +1 -2
  57. package/css/components/Switch/switch.mjs +1 -2
  58. package/css/components/TabContent/tab-content.css +17 -11
  59. package/css/components/TabContent/tab-content.d.ts +1 -1
  60. package/css/components/TabContent/tab-content.js +1 -1
  61. package/css/components/TabContent/tab-content.mjs +1 -1
  62. package/css/components/Timestamp/timestamp.css +12 -9
  63. package/css/docs/components/Button/examples/Button.css +4 -0
  64. package/css/docs/components/Divider/examples/Divider.css +3 -1
  65. package/css/docs/components/Nav/examples/Navigation.css +1 -39
  66. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -2
  67. package/css/docs/components/Nav/examples/Navigation.js +0 -2
  68. package/css/docs/components/Nav/examples/Navigation.mjs +0 -2
  69. package/package.json +3 -3
package/css/components/Masthead/masthead.css CHANGED
@@ -1,611 +1,443 @@
1
- :root {
2
- --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
3
- --pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
1
+ :root,
2
+ :where(.pf-v5-c-masthead) {
3
+ --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-masthead--PaddingBlockStart: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-masthead--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-masthead--PaddingInlineStart: var(--pf-v5-c-masthead--inset);
7
+ --pf-v5-c-masthead--PaddingInlineEnd: var(--pf-v5-c-masthead--inset);
8
+ --pf-v5-c-masthead--AlignItems: start;
9
+ --pf-v5-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
4
11
  --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
- --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--md);
6
- --pf-v5-c-masthead--xl--inset: var(--pf-t--global--spacer--lg);
12
+ --pf-v5-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
13
+ --pf-v5-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v5-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
15
+ --pf-v5-c-masthead__brand--MaxHeight: 2.375rem;
16
+ --pf-v5-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
7
17
  --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
8
18
  --pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
9
- --pf-v5-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
10
19
  --pf-v5-c-masthead--m-display-stack__main--Order: -1;
11
- --pf-v5-c-masthead--m-display-stack__main--FlexBasis: 100%;
12
- --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
13
- --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
14
- --pf-v5-c-masthead--m-display-stack__main--MarginRight: 0;
15
- --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-v5-c-masthead__main--before--BorderBottomWidth) solid var(--pf-v5-c-masthead__main--before--BorderBottomColor);
16
- --pf-v5-c-masthead--m-display-stack__toggle--GridColumn: 1;
20
+ --pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v5-c-masthead--RowGap);
21
+ --pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
17
22
  --pf-v5-c-masthead--m-display-stack__content--GridColumn: 2;
18
- --pf-v5-c-masthead--m-display-stack__content--MinHeight: auto;
19
23
  --pf-v5-c-masthead--m-display-stack__content--Order: 1;
20
- --pf-v5-c-masthead--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
21
- --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
22
- --pf-v5-c-masthead--m-display-stack__content--MarginLeft: 0;
23
- --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-v5-c-masthead--inset) * -1);
24
- --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead--inset) * -1);
25
24
  --pf-v5-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
26
25
  --pf-v5-c-masthead--m-display-inline__main--GridColumn: 2;
27
- --pf-v5-c-masthead--m-display-inline__main--MinHeight: 4.375rem;
28
26
  --pf-v5-c-masthead--m-display-inline__main--Order: 0;
29
- --pf-v5-c-masthead--m-display-inline__main--FlexBasis: auto;
30
- --pf-v5-c-masthead--m-display-inline__main--PaddingTop: 0;
31
- --pf-v5-c-masthead--m-display-inline__main--PaddingBottom: 0;
32
- --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2);
33
- --pf-v5-c-masthead--m-display-inline__main--BorderBottom: 0;
34
- --pf-v5-c-masthead--m-display-inline__toggle--GridColumn: 1;
27
+ --pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
28
+ --pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
35
29
  --pf-v5-c-masthead--m-display-inline__content--GridColumn: 3;
36
- --pf-v5-c-masthead--m-display-inline__content--MinHeight: 4.375rem;
37
30
  --pf-v5-c-masthead--m-display-inline__content--Order: 0;
38
- --pf-v5-c-masthead--m-display-inline__content--PaddingTop: 0;
39
- --pf-v5-c-masthead--m-display-inline__content--PaddingBottom: 0;
40
- --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2);
41
- --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
42
- --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
43
- --pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
44
- --pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
45
- --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
46
- --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
47
- --pf-v5-c-masthead__content--Gap: var(--pf-t--global--spacer--sm);
48
- --pf-v5-c-masthead__toggle--MarginRight: var(--pf-t--global--spacer--sm);
49
- --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
50
- --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
51
- --pf-v5-c-masthead--c-toolbar__item--Display: flex;
52
- --pf-v5-c-masthead--item-border-color--base: var(--pf-t--global--border--color--default);
53
- --pf-v5-c-masthead--c-context-selector--Width: auto;
54
- --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
55
- --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
56
- --pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
57
- --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor: transparent;
58
- --pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor: transparent;
59
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
60
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
61
- --pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
62
- --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor: transparent;
63
- --pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor: transparent;
64
- --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
65
- --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
66
- --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
67
- --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
68
- --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
69
- --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
70
- --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
71
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
72
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
73
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
74
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
75
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
76
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
31
+ --pf-v5-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
32
+ --pf-v5-c-masthead__expandable-content--BorderBlockStart: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
77
33
  }
78
34
 
79
35
  .pf-v5-c-masthead {
80
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
81
- --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
82
- --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
83
- --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
84
- --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
85
- --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
86
- --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
87
- --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
88
- --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
89
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
90
- --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
91
- --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
92
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
93
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
94
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
95
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
96
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
97
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
98
- --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
36
+ --pf-v5-c-toolbar--PaddingTop: 0;
37
+ --pf-v5-c-toolbar--PaddingBottom: 0;
38
+ --pf-v5-c-toolbar__content--PaddingRight: 0;
39
+ --pf-v5-c-toolbar__content--PaddingLeft: 0;
40
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
41
+ --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
42
+ --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
43
+ --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
44
+ --pf-v5-c-toolbar__expandable-content--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
45
+ --pf-v5-c-toolbar__expandable-content--lg--PaddingRight: var(--pf-v5-c-masthead--PaddingInlineStart);
46
+ --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md);
47
+ --pf-v5-c-toolbar__expandable-content--lg--PaddingLeft: var(--pf-v5-c-masthead--PaddingInlineEnd);
99
48
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
100
49
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
101
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
102
50
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
103
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
104
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
105
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
106
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
107
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
51
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
52
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
108
53
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
109
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
110
54
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
111
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
112
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
113
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
114
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
115
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
116
- position: relative;
117
55
  display: grid;
118
56
  grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
119
- align-items: center;
57
+ row-gap: var(--pf-v5-c-masthead--RowGap);
58
+ column-gap: var(--pf-v5-c-masthead--ColumnGap);
59
+ align-items: var(--pf-v5-c-masthead--AlignItems);
120
60
  min-width: 0;
121
- padding-inline-start: var(--pf-v5-c-masthead--PaddingLeft);
122
- padding-inline-end: var(--pf-v5-c-masthead--PaddingRight);
61
+ padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart);
62
+ padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd);
63
+ padding-inline-start: var(--pf-v5-c-masthead--inset);
64
+ padding-inline-end: var(--pf-v5-c-masthead--inset);
123
65
  background-color: var(--pf-v5-c-masthead--BackgroundColor);
124
66
  }
125
67
  @media screen and (min-width: 768px) {
126
68
  :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
127
69
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
128
70
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
129
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
130
71
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
131
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
132
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
133
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
134
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
135
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
72
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
73
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
136
74
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
137
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
138
75
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
139
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
140
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
141
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
142
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
143
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
144
- }
145
- }
146
- @media screen and (min-width: 1200px) {
147
- .pf-v5-c-masthead {
148
- --pf-v5-c-masthead--inset: var(--pf-v5-c-masthead--xl--inset);
149
76
  }
150
77
  }
151
78
  .pf-v5-c-masthead .pf-v5-c-toolbar {
152
79
  width: 100%;
153
80
  }
154
- .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
155
- flex-wrap: nowrap;
156
- }
157
81
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
158
82
  inset-block-start: 100%;
83
+ border-block-start: var(--pf-v5-c-masthead__expandable-content--BorderBlockStart);
84
+ box-shadow: var(--pf-v5-c-masthead__expandable-content--BoxShadow);
159
85
  }
160
- .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
161
- position: absolute;
162
- inset: 0;
163
- content: "";
164
- border-block-start: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
165
- box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
86
+ .pf-v5-c-masthead.pf-m-display-stack {
87
+ --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
88
+ --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
89
+ --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
90
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
91
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
92
+ --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
93
+ --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
166
94
  }
167
- .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height {
168
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
169
- --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
95
+ .pf-v5-c-masthead.pf-m-display-inline {
96
+ --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
97
+ --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
98
+ --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
99
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
100
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
101
+ --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
102
+ --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
170
103
  }
171
- .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height {
172
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
173
- --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
104
+ .pf-v5-c-masthead.pf-m-inset-none {
105
+ padding-inline-start: 0;
106
+ padding-inline-end: 0;
174
107
  }
175
- .pf-v5-c-masthead .pf-v5-c-nav {
176
- align-self: stretch;
108
+ .pf-v5-c-masthead.pf-m-inset-sm {
109
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
110
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
111
+ }
112
+ .pf-v5-c-masthead.pf-m-inset-md {
113
+ padding-inline-start: var(--pf-v5-global--spacer--md);
114
+ padding-inline-end: var(--pf-v5-global--spacer--md);
115
+ }
116
+ .pf-v5-c-masthead.pf-m-inset-lg {
117
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
118
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
119
+ }
120
+ .pf-v5-c-masthead.pf-m-inset-xl {
121
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
122
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
123
+ }
124
+ .pf-v5-c-masthead.pf-m-inset-2xl {
125
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
126
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
177
127
  }
178
128
 
129
+ .pf-v5-c-masthead,
179
130
  .pf-v5-c-masthead__main {
180
131
  position: relative;
181
- display: flex;
182
- flex-basis: var(--pf-v5-c-masthead__main--FlexBasis);
183
- grid-column: var(--pf-v5-c-masthead__main--GridColumn);
184
- align-items: center;
185
- align-self: stretch;
186
- order: var(--pf-v5-c-masthead__main--Order);
187
- min-height: var(--pf-v5-c-masthead__main--MinHeight);
188
- padding-block-start: var(--pf-v5-c-masthead__main--PaddingTop);
189
- padding-block-end: var(--pf-v5-c-masthead__main--PaddingBottom);
190
- margin-inline-end: var(--pf-v5-c-masthead__main--MarginRight);
191
- }
192
- .pf-v5-c-masthead__main::before {
193
- position: absolute;
194
- inset-block-end: 0;
195
- inset-inline-start: var(--pf-v5-c-masthead__main--before--Left);
196
- inset-inline-end: var(--pf-v5-c-masthead__main--before--Right);
197
- content: "";
198
- border-block-end: var(--pf-v5-c-masthead__main--before--BorderBottom);
199
- }
200
- .pf-v5-c-masthead__main:last-child {
201
- --pf-v5-c-masthead__main--MarginRight: 0;
202
132
  }
203
133
 
204
- .pf-v5-c-masthead__logo {
134
+ .pf-v5-c-masthead__main,
135
+ .pf-v5-c-masthead__content,
136
+ .pf-v5-c-masthead__logo,
137
+ .pf-v5-c-masthead__brand {
205
138
  display: flex;
206
- gap: var(--pf-t--global--spacer--md);
139
+ align-self: stretch;
207
140
  }
208
141
 
142
+ .pf-v5-c-masthead__main,
143
+ .pf-v5-c-masthead__brand,
209
144
  .pf-v5-c-masthead__content {
210
- display: flex;
211
- flex-grow: 1;
212
- flex-shrink: 1;
213
- grid-column: var(--pf-v5-c-masthead__content--GridColumn);
214
- grid-column-end: -1;
215
- gap: var(--pf-v5-c-masthead__content--Gap);
216
- align-items: center;
217
- align-self: stretch;
218
- order: var(--pf-v5-c-masthead__content--Order);
219
- min-height: var(--pf-v5-c-masthead__content--MinHeight);
220
- padding-block-start: var(--pf-v5-c-masthead__content--PaddingTop);
221
- padding-block-end: var(--pf-v5-c-masthead__content--PaddingBottom);
222
- margin-inline-start: var(--pf-v5-c-masthead__content--MarginLeft);
223
- }
224
- .pf-v5-c-masthead__content:only-child {
225
- --pf-v5-c-masthead__content--MarginLeft: 0;
145
+ min-width: 0.25rem;
226
146
  }
227
- .pf-v5-c-masthead__content .pf-v5-c-nav.pf-m-horizontal {
228
- margin-inline-start: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft);
229
- margin-inline-end: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight);
230
- }
231
- .pf-v5-c-masthead__toggle ~ .pf-v5-c-masthead__content {
232
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead__content--MarginLeft) * -1);
147
+
148
+ .pf-v5-c-masthead__main {
149
+ grid-column: var(--pf-v5-c-masthead__main--GridColumn);
150
+ row-gap: var(--pf-v5-c-masthead__main--RowGap, var(--pf-v5-c-masthead--RowGap));
151
+ align-items: var(--pf-v5-c-masthead__main--AlignItems, var(--pf-v5-c-masthead--AlignItems));
152
+ order: var(--pf-v5-c-masthead__main--Order);
153
+ padding-block-end: var(--pf-v5-c-masthead__main--PaddingBlockEnd);
154
+ border-block-end: var(--pf-v5-c-masthead__main--BorderBlockEnd);
233
155
  }
234
156
 
235
- .pf-v5-c-masthead__main,
236
- .pf-v5-c-masthead__brand,
237
157
  .pf-v5-c-masthead__content {
238
- min-width: 0;
158
+ flex-wrap: wrap;
159
+ grid-column: var(--pf-v5-c-masthead__content--GridColumn);
160
+ grid-column-end: -1;
161
+ row-gap: var(--pf-v5-c-masthead__content-RowGap, var(--pf-v5-c-masthead--RowGap));
162
+ column-gap: var(--pf-v5-c-masthead__content-ColumnGap, var(--pf-v5-c-masthead--ColumnGap));
163
+ align-items: var(--pf-v5-c-masthead__content--AlignItems, var(--pf-v5-c-masthead--AlignItems));
164
+ order: var(--pf-v5-c-masthead__content--Order);
239
165
  }
240
166
 
241
167
  .pf-v5-c-masthead__brand {
242
- display: inline-flex;
243
- align-self: center;
168
+ align-items: var(--pf-v5-c-masthead__brand--AlignItems, var(--pf-v5-c-masthead--AlignItems));
169
+ max-height: var(--pf-v5-c-masthead__brand--MaxHeight);
170
+ margin-inline-end: var(--pf-v5-c-masthead__brand--MarginInlineEnd);
244
171
  }
245
172
 
246
173
  .pf-v5-c-masthead__toggle {
247
- grid-column: var(--pf-v5-c-masthead__toggle--GridColumn);
248
- align-self: center;
249
- margin-inline-start: var(--pf-v5-c-masthead__toggle--MarginLeft);
250
- margin-inline-end: var(--pf-v5-c-masthead__toggle--MarginRight);
174
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-masthead__toggle--Size);
251
175
  }
252
- .pf-v5-c-masthead__toggle .pf-v5-c-button {
253
- --pf-v5-c-button--FontSize: var(--pf-v5-c-masthead__toggle--c-button--FontSize);
176
+
177
+ .pf-v5-c-masthead__expandable-content {
178
+ row-gap: var(--pf-v5-c-masthead__expandable-content-RowGap, var(--pf-v5-c-masthead--RowGap));
179
+ background-color: var(--pf-v5-c-masthead--BackgroundColor);
254
180
  }
255
181
 
256
182
  .pf-v5-c-masthead.pf-m-display-stack {
257
183
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
258
184
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
259
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
260
185
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
261
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
262
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
263
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
264
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
265
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
186
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
187
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
266
188
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
267
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
268
189
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
269
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
270
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
271
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
272
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
273
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
274
190
  }
275
191
  .pf-v5-c-masthead.pf-m-display-inline {
276
192
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
277
193
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
278
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
279
194
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
280
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
281
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
282
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
283
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
284
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
195
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
196
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
285
197
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
286
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
287
198
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
288
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
289
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
290
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
291
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
292
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
293
199
  }
294
200
  .pf-v5-c-masthead.pf-m-inset-none {
295
- --pf-v5-c-masthead--inset: 0;
201
+ padding-inline-start: 0;
202
+ padding-inline-end: 0;
296
203
  }
297
204
  .pf-v5-c-masthead.pf-m-inset-sm {
298
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
205
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
206
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
299
207
  }
300
208
  .pf-v5-c-masthead.pf-m-inset-md {
301
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
209
+ padding-inline-start: var(--pf-v5-global--spacer--md);
210
+ padding-inline-end: var(--pf-v5-global--spacer--md);
302
211
  }
303
212
  .pf-v5-c-masthead.pf-m-inset-lg {
304
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
213
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
214
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
305
215
  }
306
216
  .pf-v5-c-masthead.pf-m-inset-xl {
307
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
217
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
218
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
308
219
  }
309
220
  .pf-v5-c-masthead.pf-m-inset-2xl {
310
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
221
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
222
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
311
223
  }
312
224
  @media (min-width: 576px) {
313
225
  .pf-v5-c-masthead.pf-m-display-stack-on-sm {
314
226
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
315
227
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
316
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
317
228
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
318
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
319
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
320
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
321
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
322
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
229
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
230
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
323
231
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
324
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
325
232
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
326
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
327
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
328
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
329
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
330
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
331
233
  }
332
234
  .pf-v5-c-masthead.pf-m-display-inline-on-sm {
333
235
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
334
236
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
335
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
336
237
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
337
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
338
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
339
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
340
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
341
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
238
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
239
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
342
240
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
343
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
344
241
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
345
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
346
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
347
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
348
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
349
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
350
242
  }
351
243
  }
352
- @media (min-width: 576px) {
353
- .pf-v5-c-masthead.pf-m-inset-none-on-sm {
354
- --pf-v5-c-masthead--inset: 0;
355
- }
356
- .pf-v5-c-masthead.pf-m-inset-sm-on-sm {
357
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
358
- }
359
- .pf-v5-c-masthead.pf-m-inset-md-on-sm {
360
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
361
- }
362
- .pf-v5-c-masthead.pf-m-inset-lg-on-sm {
363
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
364
- }
365
- .pf-v5-c-masthead.pf-m-inset-xl-on-sm {
366
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
367
- }
368
- .pf-v5-c-masthead.pf-m-inset-2xl-on-sm {
369
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
370
- }
244
+ .pf-v5-c-masthead.pf-m-inset-none {
245
+ padding-inline-start: 0;
246
+ padding-inline-end: 0;
247
+ }
248
+ .pf-v5-c-masthead.pf-m-inset-sm {
249
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
250
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
251
+ }
252
+ .pf-v5-c-masthead.pf-m-inset-md {
253
+ padding-inline-start: var(--pf-v5-global--spacer--md);
254
+ padding-inline-end: var(--pf-v5-global--spacer--md);
255
+ }
256
+ .pf-v5-c-masthead.pf-m-inset-lg {
257
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
258
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
259
+ }
260
+ .pf-v5-c-masthead.pf-m-inset-xl {
261
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
262
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
263
+ }
264
+ .pf-v5-c-masthead.pf-m-inset-2xl {
265
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
266
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
371
267
  }
372
268
  @media (min-width: 768px) {
373
269
  .pf-v5-c-masthead.pf-m-display-stack-on-md {
374
270
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
375
271
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
376
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
377
272
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
378
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
379
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
380
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
381
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
382
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
273
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
274
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
383
275
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
384
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
385
276
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
386
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
387
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
388
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
389
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
390
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
391
277
  }
392
278
  .pf-v5-c-masthead.pf-m-display-inline-on-md {
393
279
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
394
280
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
395
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
396
281
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
397
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
398
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
399
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
400
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
401
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
282
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
283
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
402
284
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
403
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
404
285
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
405
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
406
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
407
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
408
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
409
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
410
286
  }
411
287
  }
412
- @media (min-width: 768px) {
413
- .pf-v5-c-masthead.pf-m-inset-none-on-md {
414
- --pf-v5-c-masthead--inset: 0;
415
- }
416
- .pf-v5-c-masthead.pf-m-inset-sm-on-md {
417
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
418
- }
419
- .pf-v5-c-masthead.pf-m-inset-md-on-md {
420
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
421
- }
422
- .pf-v5-c-masthead.pf-m-inset-lg-on-md {
423
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
424
- }
425
- .pf-v5-c-masthead.pf-m-inset-xl-on-md {
426
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
427
- }
428
- .pf-v5-c-masthead.pf-m-inset-2xl-on-md {
429
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
430
- }
288
+ .pf-v5-c-masthead.pf-m-inset-none {
289
+ padding-inline-start: 0;
290
+ padding-inline-end: 0;
291
+ }
292
+ .pf-v5-c-masthead.pf-m-inset-sm {
293
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
294
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
295
+ }
296
+ .pf-v5-c-masthead.pf-m-inset-md {
297
+ padding-inline-start: var(--pf-v5-global--spacer--md);
298
+ padding-inline-end: var(--pf-v5-global--spacer--md);
299
+ }
300
+ .pf-v5-c-masthead.pf-m-inset-lg {
301
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
302
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
303
+ }
304
+ .pf-v5-c-masthead.pf-m-inset-xl {
305
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
306
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
307
+ }
308
+ .pf-v5-c-masthead.pf-m-inset-2xl {
309
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
310
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
431
311
  }
432
312
  @media (min-width: 992px) {
433
313
  .pf-v5-c-masthead.pf-m-display-stack-on-lg {
434
314
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
435
315
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
436
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
437
316
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
438
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
439
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
440
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
441
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
442
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
317
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
318
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
443
319
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
444
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
445
320
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
446
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
447
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
448
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
449
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
450
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
451
321
  }
452
322
  .pf-v5-c-masthead.pf-m-display-inline-on-lg {
453
323
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
454
324
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
455
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
456
325
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
457
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
458
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
459
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
460
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
461
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
326
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
327
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
462
328
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
463
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
464
329
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
465
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
466
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
467
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
468
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
469
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
470
330
  }
471
331
  }
472
- @media (min-width: 992px) {
473
- .pf-v5-c-masthead.pf-m-inset-none-on-lg {
474
- --pf-v5-c-masthead--inset: 0;
475
- }
476
- .pf-v5-c-masthead.pf-m-inset-sm-on-lg {
477
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
478
- }
479
- .pf-v5-c-masthead.pf-m-inset-md-on-lg {
480
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
481
- }
482
- .pf-v5-c-masthead.pf-m-inset-lg-on-lg {
483
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
484
- }
485
- .pf-v5-c-masthead.pf-m-inset-xl-on-lg {
486
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
487
- }
488
- .pf-v5-c-masthead.pf-m-inset-2xl-on-lg {
489
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
490
- }
332
+ .pf-v5-c-masthead.pf-m-inset-none {
333
+ padding-inline-start: 0;
334
+ padding-inline-end: 0;
335
+ }
336
+ .pf-v5-c-masthead.pf-m-inset-sm {
337
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
338
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
339
+ }
340
+ .pf-v5-c-masthead.pf-m-inset-md {
341
+ padding-inline-start: var(--pf-v5-global--spacer--md);
342
+ padding-inline-end: var(--pf-v5-global--spacer--md);
343
+ }
344
+ .pf-v5-c-masthead.pf-m-inset-lg {
345
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
346
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
347
+ }
348
+ .pf-v5-c-masthead.pf-m-inset-xl {
349
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
350
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
351
+ }
352
+ .pf-v5-c-masthead.pf-m-inset-2xl {
353
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
354
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
491
355
  }
492
356
  @media (min-width: 1200px) {
493
357
  .pf-v5-c-masthead.pf-m-display-stack-on-xl {
494
358
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
495
359
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
496
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
497
360
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
498
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
499
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
500
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
501
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
502
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
361
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
362
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
503
363
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
504
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
505
364
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
506
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
507
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
508
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
509
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
510
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
511
365
  }
512
366
  .pf-v5-c-masthead.pf-m-display-inline-on-xl {
513
367
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
514
368
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
515
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
516
369
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
517
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
518
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
519
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
520
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
521
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
370
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
371
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
522
372
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
523
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
524
373
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
525
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
526
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
527
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
528
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
529
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
530
374
  }
531
375
  }
532
- @media (min-width: 1200px) {
533
- .pf-v5-c-masthead.pf-m-inset-none-on-xl {
534
- --pf-v5-c-masthead--inset: 0;
535
- }
536
- .pf-v5-c-masthead.pf-m-inset-sm-on-xl {
537
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
538
- }
539
- .pf-v5-c-masthead.pf-m-inset-md-on-xl {
540
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
541
- }
542
- .pf-v5-c-masthead.pf-m-inset-lg-on-xl {
543
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
544
- }
545
- .pf-v5-c-masthead.pf-m-inset-xl-on-xl {
546
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
547
- }
548
- .pf-v5-c-masthead.pf-m-inset-2xl-on-xl {
549
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
550
- }
376
+ .pf-v5-c-masthead.pf-m-inset-none {
377
+ padding-inline-start: 0;
378
+ padding-inline-end: 0;
379
+ }
380
+ .pf-v5-c-masthead.pf-m-inset-sm {
381
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
382
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
383
+ }
384
+ .pf-v5-c-masthead.pf-m-inset-md {
385
+ padding-inline-start: var(--pf-v5-global--spacer--md);
386
+ padding-inline-end: var(--pf-v5-global--spacer--md);
387
+ }
388
+ .pf-v5-c-masthead.pf-m-inset-lg {
389
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
390
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
391
+ }
392
+ .pf-v5-c-masthead.pf-m-inset-xl {
393
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
394
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
395
+ }
396
+ .pf-v5-c-masthead.pf-m-inset-2xl {
397
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
398
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
551
399
  }
552
400
  @media (min-width: 1450px) {
553
401
  .pf-v5-c-masthead.pf-m-display-stack-on-2xl {
554
402
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
555
403
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
556
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
557
404
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
558
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-stack__main--FlexBasis);
559
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__main--PaddingTop);
560
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBottom);
561
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-stack__main--MarginRight);
562
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom);
405
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--PaddingBlockEnd);
406
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-stack__main--BorderBlockEnd);
563
407
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-stack__content--GridColumn);
564
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-stack__content--MinHeight);
565
408
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-stack__content--Order);
566
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-stack__content--PaddingTop);
567
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-stack__content--PaddingBottom);
568
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
569
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
570
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
571
409
  }
572
410
  .pf-v5-c-masthead.pf-m-display-inline-on-2xl {
573
411
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
574
412
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
575
- --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
576
413
  --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-inline__main--Order);
577
- --pf-v5-c-masthead__main--FlexBasis: var(--pf-v5-c-masthead--m-display-inline__main--FlexBasis);
578
- --pf-v5-c-masthead__main--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__main--PaddingTop);
579
- --pf-v5-c-masthead__main--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBottom);
580
- --pf-v5-c-masthead__main--MarginRight: var(--pf-v5-c-masthead--m-display-inline__main--MarginRight);
581
- --pf-v5-c-masthead__main--before--BorderBottom: var(--pf-v5-c-masthead--m-display-inline__main--BorderBottom);
414
+ --pf-v5-c-masthead__main--PaddingBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--PaddingBlockEnd);
415
+ --pf-v5-c-masthead__main--BorderBlockEnd: var(--pf-v5-c-masthead--m-display-inline__main--BorderBlockEnd);
582
416
  --pf-v5-c-masthead__content--GridColumn: var(--pf-v5-c-masthead--m-display-inline__content--GridColumn);
583
- --pf-v5-c-masthead__content--MinHeight: var(--pf-v5-c-masthead--m-display-inline__content--MinHeight);
584
417
  --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
585
- --pf-v5-c-masthead__content--PaddingTop: var(--pf-v5-c-masthead--m-display-inline__content--PaddingTop);
586
- --pf-v5-c-masthead__content--PaddingBottom: var(--pf-v5-c-masthead--m-display-inline__content--PaddingBottom);
587
- --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--MarginLeft);
588
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
589
- --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
590
418
  }
591
419
  }
592
- @media (min-width: 1450px) {
593
- .pf-v5-c-masthead.pf-m-inset-none-on-2xl {
594
- --pf-v5-c-masthead--inset: 0;
595
- }
596
- .pf-v5-c-masthead.pf-m-inset-sm-on-2xl {
597
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
598
- }
599
- .pf-v5-c-masthead.pf-m-inset-md-on-2xl {
600
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
601
- }
602
- .pf-v5-c-masthead.pf-m-inset-lg-on-2xl {
603
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--lg);
604
- }
605
- .pf-v5-c-masthead.pf-m-inset-xl-on-2xl {
606
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--xl);
607
- }
608
- .pf-v5-c-masthead.pf-m-inset-2xl-on-2xl {
609
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
610
- }
420
+ .pf-v5-c-masthead.pf-m-inset-none {
421
+ padding-inline-start: 0;
422
+ padding-inline-end: 0;
423
+ }
424
+ .pf-v5-c-masthead.pf-m-inset-sm {
425
+ padding-inline-start: var(--pf-v5-global--spacer--sm);
426
+ padding-inline-end: var(--pf-v5-global--spacer--sm);
427
+ }
428
+ .pf-v5-c-masthead.pf-m-inset-md {
429
+ padding-inline-start: var(--pf-v5-global--spacer--md);
430
+ padding-inline-end: var(--pf-v5-global--spacer--md);
431
+ }
432
+ .pf-v5-c-masthead.pf-m-inset-lg {
433
+ padding-inline-start: var(--pf-v5-global--spacer--lg);
434
+ padding-inline-end: var(--pf-v5-global--spacer--lg);
435
+ }
436
+ .pf-v5-c-masthead.pf-m-inset-xl {
437
+ padding-inline-start: var(--pf-v5-global--spacer--xl);
438
+ padding-inline-end: var(--pf-v5-global--spacer--xl);
439
+ }
440
+ .pf-v5-c-masthead.pf-m-inset-2xl {
441
+ padding-inline-start: var(--pf-v5-global--spacer--2xl);
442
+ padding-inline-end: var(--pf-v5-global--spacer--2xl);
611
443
  }