@patternfly/patternfly 4.155.0 → 4.156.3

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 (22) hide show
  1. package/README.md +10 -9
  2. package/components/Card/card.css +18 -9
  3. package/components/Card/card.scss +15 -5
  4. package/components/DualListSelector/dual-list-selector.css +3 -5
  5. package/components/DualListSelector/dual-list-selector.scss +4 -6
  6. package/components/FormControl/form-control.css +9 -1
  7. package/components/FormControl/form-control.scss +10 -1
  8. package/components/LogViewer/log-viewer.css +15 -11
  9. package/components/LogViewer/log-viewer.scss +4 -11
  10. package/components/MenuToggle/menu-toggle.css +4 -0
  11. package/components/MenuToggle/menu-toggle.scss +4 -0
  12. package/docs/components/Card/examples/Card.md +15 -0
  13. package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
  14. package/docs/components/Table/examples/Table.md +12 -1319
  15. package/docs/demos/CardView/examples/CardView.md +18 -11
  16. package/docs/demos/Table/examples/Table.md +102 -3537
  17. package/docs/demos/Tabs/examples/Tabs.md +18 -11
  18. package/package.json +3 -2
  19. package/patternfly-no-reset.css +40 -27
  20. package/patternfly.css +40 -27
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/README.md CHANGED
@@ -21,8 +21,8 @@ Any of the files above are meant for use in consuming the library. The recommend
21
21
  To setup the PatternFly 4 development environment:
22
22
 
23
23
  - clone the project
24
- - run `npm install` from the project root
25
- - run `npm start`
24
+ - run `yarn install` from the project root
25
+ - run `yarn start`
26
26
  - open your browser to `http://localhost:8001`
27
27
 
28
28
  After working on your contribution, check for [accessibility violations](#testing-for-accessibility).
@@ -58,8 +58,8 @@ To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
58
58
  #### Update screenshots
59
59
  When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
60
60
 
61
- - open a terminal and run `npm run build` and `npm run serve`
62
- - in another terminal, run `npm run screenshots`
61
+ - open a terminal and run `yarn build && yarn run serve`
62
+ - in another terminal, run `yarn screenshots`
63
63
 
64
64
  ## Guidelines for CSS development
65
65
 
@@ -80,14 +80,15 @@ PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to c
80
80
  aXe is available as either a browser extension or npm script.
81
81
 
82
82
  To run the a11y audit locally:
83
+
83
84
  - install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
84
85
  - macOS users can simply `brew cask install chromedriver`
85
- - run `npm run dev`
86
- - run `npm run a11y` (in another console)
86
+ - open a terminal and run `yarn build && yarn run serve`
87
+ - in another terminal, run `yarn a11y`
87
88
 
88
89
  The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.
89
90
 
90
- The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
91
+ The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
91
92
 
92
93
  ### Fixing violations
93
94
 
@@ -102,11 +103,11 @@ If you have any suggestions about ways that we can improve how we use this tool,
102
103
  ## FAQ
103
104
 
104
105
  #### CSS Variables
105
- [How do I use CSS variables to customize
106
- the library?](https://pf4.patternfly.org/guidelines#variables)
106
+ [How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
107
107
 
108
108
  #### Browser support
109
109
  PatternFly 4 is supported on the latest two major versions of the following browsers:
110
+
110
111
  - Chrome
111
112
  - Firefox
112
113
  - Safari
package/components/Card/card.css CHANGED
@@ -55,6 +55,10 @@
55
55
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
56
56
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
57
57
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
58
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
59
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
60
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
61
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
58
62
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
59
63
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
60
64
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -112,10 +116,10 @@
112
116
  content: "";
113
117
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
114
118
  }
115
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
119
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
116
120
  position: relative;
117
121
  }
118
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
122
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
119
123
  position: absolute;
120
124
  right: var(--pf-c-card--m-selectable-raised--before--Right);
121
125
  bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -133,12 +137,6 @@
133
137
  }
134
138
  .pf-c-card.pf-m-selectable-raised {
135
139
  cursor: pointer;
136
- /*
137
- &:active {
138
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
139
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
140
- }
141
- */
142
140
  }
143
141
  .pf-c-card.pf-m-selectable-raised:hover {
144
142
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -148,7 +146,11 @@
148
146
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
149
147
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
150
148
  }
151
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
149
+ .pf-c-card.pf-m-selectable-raised:active {
150
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
151
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
152
+ }
153
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
152
154
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
153
155
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
154
156
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -157,6 +159,13 @@
157
159
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
158
160
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
159
161
  }
162
+ .pf-c-card.pf-m-non-selectable-raised {
163
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
164
+ --pf-c-card--BoxShadow: none;
165
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
166
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
167
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
168
+ }
160
169
  .pf-c-card.pf-m-compact {
161
170
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
162
171
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
package/components/Card/card.scss CHANGED
@@ -61,6 +61,10 @@
61
61
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
62
62
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
63
63
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
64
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
65
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
66
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
67
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
64
68
 
65
69
  // Compact
66
70
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
@@ -143,7 +147,8 @@
143
147
  }
144
148
 
145
149
  &.pf-m-hoverable-raised,
146
- &.pf-m-selectable-raised {
150
+ &.pf-m-selectable-raised,
151
+ &.pf-m-non-selectable-raised {
147
152
  position: relative;
148
153
 
149
154
  &::before {
@@ -180,15 +185,12 @@
180
185
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
181
186
  }
182
187
 
183
- /*
184
188
  &:active {
185
189
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
186
190
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
187
191
  }
188
- */
189
192
 
190
- &.pf-m-selected-raised,
191
- &:active {
193
+ &.pf-m-selected-raised {
192
194
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
193
195
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
194
196
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
@@ -200,6 +202,14 @@
200
202
  }
201
203
  }
202
204
 
205
+ &.pf-m-non-selectable-raised {
206
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
207
+ --pf-c-card--BoxShadow: none;
208
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
209
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
210
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
211
+ }
212
+
203
213
  &.pf-m-compact {
204
214
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
205
215
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -139,6 +139,9 @@
139
139
  overflow-anchor: none;
140
140
  }
141
141
 
142
+ .pf-c-dual-list-selector__list-item:focus {
143
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
144
+ }
142
145
  .pf-c-dual-list-selector__list-item.pf-m-expandable {
143
146
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
144
147
  }
@@ -159,9 +162,6 @@
159
162
  .pf-c-dual-list-selector__list-item-row:hover {
160
163
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
161
164
  }
162
- .pf-c-dual-list-selector__list-item-row:focus-within {
163
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
164
- }
165
165
  .pf-c-dual-list-selector__list-item-row.pf-m-selected {
166
166
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
167
167
  }
@@ -205,9 +205,7 @@
205
205
  position: relative;
206
206
  width: 100%;
207
207
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
208
- text-align: left;
209
208
  cursor: pointer;
210
- border: 0;
211
209
  }
212
210
 
213
211
  .pf-c-dual-list-selector__item-count {
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -183,6 +183,10 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
183
183
  }
184
184
 
185
185
  .pf-c-dual-list-selector__list-item {
186
+ &:focus {
187
+ --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
188
+ }
189
+
186
190
  &.pf-m-expandable {
187
191
  --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
188
192
  }
@@ -208,10 +212,6 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
208
212
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
209
213
  }
210
214
 
211
- &:focus-within {
212
- --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
213
- }
214
-
215
215
  &.pf-m-selected {
216
216
  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
217
217
 
@@ -265,9 +265,7 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
265
265
  position: relative;
266
266
  width: 100%;
267
267
  padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
268
- text-align: left;
269
268
  cursor: pointer;
270
- border: 0;
271
269
  }
272
270
 
273
271
  .pf-c-dual-list-selector__item-count {
package/components/FormControl/form-control.css CHANGED
@@ -100,7 +100,8 @@
100
100
  --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
101
101
  --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
102
102
  --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
103
- --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
103
+ --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
104
+ --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
104
105
  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
105
106
  --pf-c-form-control__select--BackgroundSize: .625em;
106
107
  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -232,10 +233,17 @@
232
233
  }
233
234
  select.pf-c-form-control {
234
235
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
236
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
235
237
  background-image: var(--pf-c-form-control__select--BackgroundUrl);
236
238
  background-position: var(--pf-c-form-control__select--BackgroundPosition);
237
239
  background-size: var(--pf-c-form-control__select--BackgroundSize);
238
240
  }
241
+ @-moz-document url-prefix() {
242
+ select.pf-c-form-control {
243
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
244
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
245
+ }
246
+ }
239
247
  select.pf-c-form-control[aria-invalid=true] {
240
248
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
241
249
  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
package/components/FormControl/form-control.scss CHANGED
@@ -148,7 +148,8 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
148
148
  --pf-c-form-control--m-clock--BackgroundUrl: #{pf-bg-svg($pf-c-form-control--m-clock--Coordinates, $svg-color: $pf-c-form-control--m-clock--Color)};
149
149
 
150
150
  // Select -- rename __select to --select in a breaking change release
151
- --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
151
+ --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
152
+ --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
152
153
  --pf-c-form-control__select--BackgroundUrl: #{pf-bg-svg($pf-c-form-control__select--Coordinates, $pf-c-form-control__select--ViewBox)};
153
154
  --pf-c-form-control__select--BackgroundSize: .625em; // Calculated from react-icon SVG viewbox
154
155
  --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -333,11 +334,19 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
333
334
 
334
335
  @at-root select#{&} {
335
336
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
337
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
336
338
 
337
339
  background-image: var(--pf-c-form-control__select--BackgroundUrl);
338
340
  background-position: var(--pf-c-form-control__select--BackgroundPosition);
339
341
  background-size: var(--pf-c-form-control__select--BackgroundSize);
340
342
 
343
+ // Firefox's select text has additional padding
344
+ // stylelint-disable-next-line
345
+ @-moz-document url-prefix() {
346
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
347
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
348
+ }
349
+
341
350
  &[aria-invalid="true"] {
342
351
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
343
352
  --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition); // drop this declaration and use the __select var directly in the background-position below in breaking change release
package/components/LogViewer/log-viewer.css CHANGED
@@ -1,4 +1,14 @@
1
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
1
+ .pf-c-log-viewer__header {
2
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
7
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
8
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
+ }
10
+
11
+ .pf-c-log-viewer.pf-m-dark {
2
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
3
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
4
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -7,10 +17,10 @@
7
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
8
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
9
19
  }
10
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
20
+ .pf-c-log-viewer.pf-m-dark .pf-c-card {
11
21
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12
22
  }
13
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
23
+ .pf-c-log-viewer.pf-m-dark .pf-c-button {
14
24
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
15
25
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
16
26
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -81,15 +91,8 @@
81
91
  max-height: var(--pf-c-log-viewer--MaxHeight);
82
92
  }
83
93
  .pf-c-log-viewer.pf-m-dark {
84
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
85
- }
86
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
87
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
88
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
89
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
90
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
91
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
92
94
  color: var(--pf-global--Color--100);
95
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
93
96
  }
94
97
  .pf-c-log-viewer.pf-m-wrap-text {
95
98
  word-break: break-all;
@@ -122,6 +125,7 @@
122
125
  }
123
126
 
124
127
  .pf-c-log-viewer__header {
128
+ color: var(--pf-global--Color--100);
125
129
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
126
130
  }
127
131
 
package/components/LogViewer/log-viewer.scss CHANGED
@@ -65,19 +65,10 @@
65
65
  // Dark theme
66
66
  --pf-c-log-viewer--m-dark__main--BorderWidth: 0;
67
67
 
68
-
69
68
  &.pf-m-dark {
70
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
71
-
72
- .pf-c-log-viewer__main {
73
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
74
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
75
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
76
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
77
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
69
+ @include pf-t-dark;
78
70
 
79
- @include pf-t-dark;
80
- }
71
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
81
72
  }
82
73
 
83
74
  display: flex;
@@ -125,6 +116,8 @@
125
116
 
126
117
  // Header
127
118
  .pf-c-log-viewer__header {
119
+ @include pf-t-light;
120
+
128
121
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
129
122
  }
130
123
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .pf-c-menu-toggle {
2
+ --pf-c-menu-toggle--BorderRadius: 0;
2
3
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
3
4
  --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
4
5
  --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -32,6 +33,7 @@
32
33
  --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
33
34
  --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
34
35
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
36
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
35
37
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
36
38
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
37
39
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -69,6 +71,7 @@
69
71
  color: var(--pf-c-menu-toggle--Color);
70
72
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
71
73
  border: 0;
74
+ border-radius: var(--pf-c-menu-toggle--BorderRadius);
72
75
  }
73
76
  .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
74
77
  position: absolute;
@@ -88,6 +91,7 @@
88
91
  border-bottom: var(--pf-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--after--BorderBottomColor);
89
92
  }
90
93
  .pf-c-menu-toggle.pf-m-primary {
94
+ --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
91
95
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
92
96
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
93
97
  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .pf-c-menu-toggle {
2
+ --pf-c-menu-toggle--BorderRadius: 0;
2
3
  --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
3
4
  --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
4
5
  --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -48,6 +49,7 @@
48
49
  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
49
50
 
50
51
  // Primary
52
+ --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
51
53
  --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
52
54
  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
53
55
  --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -100,6 +102,7 @@
100
102
  color: var(--pf-c-menu-toggle--Color);
101
103
  background-color: var(--pf-c-menu-toggle--BackgroundColor);
102
104
  border: 0;
105
+ border-radius: var(--pf-c-menu-toggle--BorderRadius);
103
106
 
104
107
  &::before,
105
108
  &::after {
@@ -123,6 +126,7 @@
123
126
  }
124
127
 
125
128
  &.pf-m-primary {
129
+ --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
126
130
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
127
131
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
128
132
  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);
package/docs/components/Card/examples/Card.md CHANGED
@@ -375,6 +375,20 @@ cssPrefix: pf-c-card
375
375
 
376
376
  ```
377
377
 
378
+ ### Non selectable
379
+
380
+ ```html
381
+ <div
382
+ class="pf-c-card pf-m-non-selectable-raised"
383
+ id="card-non-selectable-example"
384
+ >
385
+ <div class="pf-c-card__title">Title</div>
386
+ <div class="pf-c-card__body">Body</div>
387
+ <div class="pf-c-card__footer">Footer</div>
388
+ </div>
389
+
390
+ ```
391
+
378
392
  ### Hoverable (legacy)
379
393
 
380
394
  ```html
@@ -878,6 +892,7 @@ A card is a generic rectangular container that can be used to build other compon
878
892
  | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
879
893
  | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
880
894
  | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
895
+ | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
881
896
  | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
882
897
  | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
883
898
  | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |