@patternfly/patternfly 4.148.1 → 4.149.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 (15) 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/Page/page.css +26 -3
  8. package/components/Page/page.scss +31 -0
  9. package/docs/components/ContextSelector/examples/context-selector.md +2 -0
  10. package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +96 -4
  13. package/patternfly.css +96 -4
  14. package/patternfly.min.css +1 -1
  15. 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/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/docs/components/ContextSelector/examples/context-selector.md CHANGED
@@ -774,3 +774,5 @@ cssPrefix: pf-c-context-selector
774
774
  | `.pf-m-plain.pf-m-text` | `.pf-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
775
775
  | `.pf-m-disabled` | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state. |
776
776
  | `.pf-m-full-height` | `.pf-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
777
+ | `.pf-m-large` | `.pf-c-context-selector` | Modifies toggle height to be large. |
778
+ | `.pf-m-page-insets` | `.pf-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |