@patternfly/patternfly 4.147.1 → 4.150.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/components/ContextSelector/context-selector.css +68 -0
  2. package/components/ContextSelector/context-selector.scss +74 -0
  3. package/components/Dropdown/dropdown.css +1 -1
  4. package/components/Dropdown/dropdown.scss +1 -1
  5. package/components/Masthead/masthead.css +1 -0
  6. package/components/Masthead/masthead.scss +1 -0
  7. package/components/Nav/nav.css +41 -2
  8. package/components/Nav/nav.scss +54 -2
  9. package/components/Page/page.css +26 -3
  10. package/components/Page/page.scss +31 -0
  11. package/components/Panel/panel.css +78 -0
  12. package/components/Panel/panel.scss +99 -0
  13. package/components/Popover/popover.css +58 -2
  14. package/components/Popover/popover.scss +73 -2
  15. package/components/Tooltip/tooltip.css +4 -4
  16. package/components/Tooltip/tooltip.scss +4 -4
  17. package/components/_all.scss +1 -0
  18. package/docs/components/CodeBlock/examples/CodeBlock.md +0 -1
  19. package/docs/components/ContextSelector/examples/context-selector.md +2 -0
  20. package/docs/components/HelperText/examples/HelperText.md +0 -1
  21. package/docs/components/Menu/examples/Menu.md +19 -20
  22. package/docs/components/Nav/examples/Navigation.css +4 -0
  23. package/docs/components/Nav/examples/Navigation.md +113 -0
  24. package/docs/components/Panel/examples/Panel.md +163 -0
  25. package/docs/components/Popover/examples/Popover.md +237 -15
  26. package/docs/components/Select/examples/Select.md +2 -2
  27. package/docs/components/Sidebar/examples/Sidebar.md +0 -1
  28. package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +278 -12
  31. package/patternfly.css +278 -12
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/components/ContextSelector/context-selector.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
21
21
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
22
22
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
23
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
23
24
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
24
25
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
25
26
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -72,11 +73,56 @@
72
73
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
73
74
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
74
75
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
76
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
77
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
78
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
79
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
80
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
81
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
82
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
83
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
84
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
85
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
86
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
87
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
88
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
89
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
90
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
91
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
92
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
93
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
94
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
95
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
96
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
97
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
98
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
99
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
100
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
101
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
102
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
103
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
104
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
75
105
  position: relative;
76
106
  display: inline-block;
77
107
  width: var(--pf-c-context-selector--Width);
78
108
  max-width: 100%;
79
109
  }
110
+ @media screen and (min-width: 1200px) {
111
+ .pf-c-context-selector {
112
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
113
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
114
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
115
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
116
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
117
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
118
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
119
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
120
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
121
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
122
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
123
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
124
+ }
125
+ }
80
126
  .pf-c-context-selector.pf-m-full-height {
81
127
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
82
128
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
@@ -95,6 +141,27 @@
95
141
  .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
96
142
  border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
97
143
  }
144
+ .pf-c-context-selector.pf-m-large {
145
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
146
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
147
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
148
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
149
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
150
+ }
151
+ .pf-c-context-selector.pf-m-page-insets {
152
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
153
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
154
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
155
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
156
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
157
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
158
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
159
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
160
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
161
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
162
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
163
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
164
+ }
98
165
 
99
166
  .pf-c-context-selector__toggle {
100
167
  position: relative;
@@ -120,6 +187,7 @@
120
187
  }
121
188
  .pf-c-context-selector__toggle:hover::before {
122
189
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
190
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
123
191
  }
124
192
  .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
125
193
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
package/components/ContextSelector/context-selector.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
14
14
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
15
15
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
16
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
16
17
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
17
18
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
18
19
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -85,6 +86,54 @@
85
86
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
86
87
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
87
88
 
89
+ // Large
90
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
91
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
92
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
93
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
94
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
95
+
96
+ // Page insets
97
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
98
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
99
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
100
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
101
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
102
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
103
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
104
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
105
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
106
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
107
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
108
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
109
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
110
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
111
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
112
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
113
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
114
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
115
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
116
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
117
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
118
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
119
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
120
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
121
+
122
+ @media screen and (min-width: $pf-global--breakpoint--xl) {
123
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
124
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
125
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
126
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
127
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
128
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
129
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
130
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
131
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
132
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
133
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
134
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
135
+ }
136
+
88
137
  position: relative;
89
138
  display: inline-block;
90
139
  width: var(--pf-c-context-selector--Width);
@@ -114,6 +163,29 @@
114
163
  }
115
164
  }
116
165
  }
166
+
167
+ &.pf-m-large {
168
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
169
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
170
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
171
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
172
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
173
+ }
174
+
175
+ &.pf-m-page-insets {
176
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
177
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
178
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
179
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
180
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
181
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
182
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
183
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
184
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
185
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
186
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
187
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
188
+ }
117
189
  }
118
190
 
119
191
  .pf-c-context-selector__toggle {
@@ -142,6 +214,8 @@
142
214
  &:hover {
143
215
  &::before {
144
216
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
217
+
218
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
145
219
  }
146
220
  }
147
221
 
package/components/Dropdown/dropdown.css CHANGED
@@ -138,7 +138,7 @@
138
138
  border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
139
139
  }
140
140
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
141
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
141
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
142
142
  }
143
143
 
144
144
  .pf-c-dropdown__toggle {
package/components/Dropdown/dropdown.scss CHANGED
@@ -177,7 +177,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
177
177
 
178
178
  &:hover {
179
179
  .pf-c-dropdown__toggle::before {
180
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
180
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
181
181
  }
182
182
  }
183
183
  }
package/components/Masthead/masthead.css CHANGED
@@ -213,6 +213,7 @@
213
213
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
214
214
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
215
215
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
216
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
216
217
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
217
218
  }
218
219
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
package/components/Masthead/masthead.scss CHANGED
@@ -222,6 +222,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
222
222
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
223
223
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
224
224
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
225
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
225
226
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
226
227
 
227
228
  &.pf-m-full-height {
package/components/Nav/nav.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .pf-c-nav {
2
2
  --pf-c-nav--Transition: var(--pf-global--Transition);
3
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
4
3
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
5
4
  --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
6
5
  --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -25,6 +24,10 @@
25
24
  --pf-c-nav__item--MarginTop: 0;
26
25
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
27
26
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
27
+ --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
28
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
29
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
30
+ --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
28
31
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
29
32
  --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
30
33
  --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -160,6 +163,9 @@
160
163
  --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
161
164
  --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
162
165
  --pf-c-nav__subnav--MaxHeight: 0;
166
+ --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
167
+ --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
168
+ --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
163
169
  --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
164
170
  --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
165
171
  --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -466,15 +472,18 @@
466
472
  }
467
473
 
468
474
  .pf-c-nav__list {
475
+ position: relative;
469
476
  display: block;
470
477
  }
471
478
 
472
479
  .pf-c-nav__item {
480
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
473
481
  position: relative;
474
482
  margin-top: var(--pf-c-nav__item--MarginTop);
475
483
  }
476
484
  .pf-c-nav__item.pf-m-expandable {
477
485
  --pf-c-nav__link--before--BorderBottomWidth: 0;
486
+ --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
478
487
  }
479
488
  .pf-c-nav__item.pf-m-expandable::before {
480
489
  position: absolute;
@@ -484,6 +493,28 @@
484
493
  content: "";
485
494
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
486
495
  }
496
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
497
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
498
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
499
+ }
500
+ @media screen and (min-width: 1200px) {
501
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
502
+ border-bottom: none;
503
+ }
504
+ }
505
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
506
+ position: absolute;
507
+ top: 0;
508
+ right: 0;
509
+ bottom: 0;
510
+ left: 0;
511
+ pointer-events: none;
512
+ content: "";
513
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
514
+ }
515
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
516
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
517
+ }
487
518
  .pf-c-nav__item.pf-m-flyout:hover {
488
519
  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
489
520
  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
@@ -677,6 +708,11 @@
677
708
  scrollbar-width: none;
678
709
  -ms-overflow-style: -ms-autohiding-scrollbar;
679
710
  }
711
+ .pf-c-nav__subnav .pf-c-nav__subnav {
712
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
713
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
714
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
715
+ }
680
716
  .pf-c-nav__subnav.pf-m-flyout {
681
717
  width: 100%;
682
718
  }
@@ -706,7 +742,10 @@
706
742
  display: inline-block;
707
743
  transition: var(--pf-c-nav__toggle-icon--Transition);
708
744
  }
709
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
745
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
746
+ transform: rotate(0deg);
747
+ }
748
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
710
749
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
711
750
  }
712
751
 
package/components/Nav/nav.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  .pf-c-nav {
2
2
  --pf-c-nav--Transition: var(--pf-global--Transition);
3
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
4
3
 
5
4
  // Light theme
6
5
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -31,6 +30,10 @@
31
30
  --pf-c-nav__item--MarginTop: 0;
32
31
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
33
32
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
33
+ --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
34
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
35
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
36
+ --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
34
37
 
35
38
  // Item ::before borders
36
39
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -186,6 +189,9 @@
186
189
  --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
187
190
  --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
188
191
  --pf-c-nav__subnav--MaxHeight: 0;
192
+ --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
193
+ --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
194
+ --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
189
195
  --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
190
196
  --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
191
197
  --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -566,16 +572,20 @@
566
572
 
567
573
  // List
568
574
  .pf-c-nav__list {
575
+ position: relative;
569
576
  display: block;
570
577
  }
571
578
 
572
579
  // Borders
573
580
  .pf-c-nav__item {
581
+ --pf-c-nav__item__toggle-icon--Rotate: 0; // resets it for any inherited items
582
+
574
583
  position: relative;
575
584
  margin-top: var(--pf-c-nav__item--MarginTop);
576
585
 
577
586
  &.pf-m-expandable {
578
587
  --pf-c-nav__link--before--BorderBottomWidth: 0;
588
+ --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
579
589
 
580
590
  &::before {
581
591
  position: absolute;
@@ -587,6 +597,36 @@
587
597
  }
588
598
  }
589
599
 
600
+ .pf-c-nav__item {
601
+ &.pf-m-expandable {
602
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
603
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
604
+
605
+ // stylelint-disable max-nesting-depth
606
+ &::before {
607
+ @media screen and (min-width: $pf-global--breakpoint--xl) {
608
+ border-bottom: none;
609
+ }
610
+ }
611
+ // stylelint-enable
612
+
613
+ .pf-c-nav__list::before {
614
+ position: absolute;
615
+ top: 0;
616
+ right: 0;
617
+ bottom: 0;
618
+ left: 0;
619
+ pointer-events: none;
620
+ content: "";
621
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
622
+ }
623
+ }
624
+ }
625
+
626
+ .pf-c-nav__toggle-icon {
627
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
628
+ }
629
+
590
630
  &.pf-m-flyout {
591
631
  &:hover {
592
632
  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
@@ -833,6 +873,13 @@
833
873
  padding-left: var(--pf-c-nav__subnav--PaddingLeft);
834
874
  transition: var(--pf-c-nav--Transition);
835
875
 
876
+ .pf-c-nav__subnav {
877
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
878
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
879
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
880
+ }
881
+
882
+
836
883
  // remove at breaking change - not used
837
884
  &.pf-m-flyout {
838
885
  width: 100%;
@@ -868,7 +915,12 @@
868
915
  display: inline-block;
869
916
  transition: var(--pf-c-nav__toggle-icon--Transition);
870
917
 
871
- .pf-c-nav__item.pf-m-expanded & {
918
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__item & {
919
+ transform: rotate(0deg);
920
+ }
921
+
922
+ .pf-c-nav__item.pf-m-expanded &,
923
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expanded & {
872
924
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
873
925
  }
874
926
  }
package/components/Page/page.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
9
  }
10
10
 
11
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__header {
11
+ .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
12
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
13
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
14
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17,10 +17,10 @@
17
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
18
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
19
19
  }
20
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__header .pf-c-card {
20
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
21
21
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
22
  }
23
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__header .pf-c-button {
23
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
24
24
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
25
25
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
26
26
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -151,6 +151,11 @@
151
151
  --pf-c-page__sidebar--xl--TranslateX: 0;
152
152
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
153
153
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
154
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
155
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
156
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
157
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
158
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
154
159
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
155
160
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
156
161
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -430,6 +435,24 @@
430
435
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
431
436
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
432
437
  }
438
+ .pf-c-page__sidebar-body.pf-m-menu {
439
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
440
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
441
+ background-color: var(--pf-global--palette--black-900);
442
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
443
+ }
444
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
445
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
446
+ }
447
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
448
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
449
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
450
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
451
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
452
+ --pf-c-context-selector__menu--Top: 100%;
453
+ color: var(--pf-global--Color--100);
454
+ width: 100%;
455
+ }
433
456
 
434
457
  .pf-c-page__main-nav.pf-m-limit-width,
435
458
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
package/components/Page/page.scss CHANGED
@@ -79,8 +79,15 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
79
79
  --pf-c-page__sidebar--TranslateZ: 0;
80
80
  --pf-c-page__sidebar--m-expanded--TranslateX: 0;
81
81
  --pf-c-page__sidebar--xl--TranslateX: 0;
82
+
83
+ // Sidebar body
82
84
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
83
85
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
86
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
87
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
88
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
89
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
90
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
84
91
 
85
92
  @media screen and (min-width: $pf-global--breakpoint--xl) {
86
93
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--xl--TranslateX);
@@ -408,6 +415,30 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
408
415
  .pf-c-page__sidebar-body {
409
416
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
410
417
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
418
+
419
+ &.pf-m-menu {
420
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
421
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
422
+
423
+ background-color: var(--pf-global--palette--black-900);
424
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
425
+
426
+ & + & {
427
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
428
+ }
429
+
430
+ .pf-c-context-selector {
431
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
432
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
433
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
434
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
435
+ --pf-c-context-selector__menu--Top: 100%;
436
+
437
+ @include pf-t-dark;
438
+
439
+ width: 100%;
440
+ }
441
+ }
411
442
  }
412
443
 
413
444
  .pf-c-page__main-nav,
package/components/Panel/panel.css ADDED
@@ -0,0 +1,78 @@
1
+ .pf-c-panel {
2
+ --pf-c-panel--Width: auto;
3
+ --pf-c-panel--MinWidth: auto;
4
+ --pf-c-panel--MaxWidth: none;
5
+ --pf-c-panel--ZIndex: auto;
6
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
7
+ --pf-c-panel--BoxShadow: none;
8
+ --pf-c-panel--before--BorderWidth: 0;
9
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
11
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
12
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
13
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
14
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
15
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
16
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
17
+ --pf-c-panel__main--MaxHeight: none;
18
+ --pf-c-panel__main--Overflow: visible;
19
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
20
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
21
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
22
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
23
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
24
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
25
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
26
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
27
+ --pf-c-panel__footer--BoxShadow: none;
28
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
29
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
30
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
31
+ position: relative;
32
+ z-index: var(--pf-c-panel--ZIndex);
33
+ width: var(--pf-c-panel--Width);
34
+ min-width: var(--pf-c-panel--MinWidth);
35
+ max-width: var(--pf-c-panel--MaxWidth);
36
+ background-color: var(--pf-c-panel--BackgroundColor);
37
+ box-shadow: var(--pf-c-panel--BoxShadow);
38
+ }
39
+ .pf-c-panel::before {
40
+ position: absolute;
41
+ top: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ left: 0;
45
+ pointer-events: none;
46
+ content: "";
47
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
48
+ }
49
+ .pf-c-panel.pf-m-bordered {
50
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
51
+ }
52
+ .pf-c-panel.pf-m-raised {
53
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
54
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
55
+ }
56
+ .pf-c-panel.pf-m-scrollable {
57
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
58
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
59
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
60
+ }
61
+
62
+ .pf-c-panel__header {
63
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
64
+ }
65
+
66
+ .pf-c-panel__main {
67
+ max-height: var(--pf-c-panel__main--MaxHeight);
68
+ overflow: var(--pf-c-panel__main--Overflow);
69
+ }
70
+
71
+ .pf-c-panel__main-body {
72
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
73
+ }
74
+
75
+ .pf-c-panel__footer {
76
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
77
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
78
+ }