@patternfly/patternfly 4.153.0 → 4.156.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 (19) hide show
  1. package/components/Card/card.css +18 -9
  2. package/components/Card/card.scss +15 -5
  3. package/components/LogViewer/log-viewer.css +46 -19
  4. package/components/LogViewer/log-viewer.scss +36 -31
  5. package/components/MenuToggle/menu-toggle.css +1 -1
  6. package/components/MenuToggle/menu-toggle.scss +1 -1
  7. package/components/OptionsMenu/options-menu.css +5 -13
  8. package/components/OptionsMenu/options-menu.scss +3 -13
  9. package/docs/components/Card/examples/Card.md +15 -0
  10. package/docs/components/LogViewer/examples/LogViewer.md +682 -533
  11. package/docs/components/MenuToggle/examples/MenuToggle.md +48 -0
  12. package/docs/components/OptionsMenu/examples/options-menu.md +34 -40
  13. package/docs/demos/CardView/examples/CardView.md +18 -11
  14. package/docs/demos/Tabs/examples/Tabs.md +18 -11
  15. package/package.json +1 -1
  16. package/patternfly-no-reset.css +61 -43
  17. package/patternfly.css +61 -43
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
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/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);
@@ -38,12 +48,14 @@
38
48
  --pf-c-log-viewer__main--BorderWidth: var(--pf-global--BorderWidth--sm);
39
49
  --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
40
50
  --pf-c-log-viewer__scroll-container--Height: 37.5rem;
51
+ --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
52
+ --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
41
53
  --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
42
54
  --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
43
55
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
44
56
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
45
- --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--md);
46
- --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--md);
57
+ --pf-c-log-viewer__list--Height: auto;
58
+ --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
47
59
  --pf-c-log-viewer__index--Display: none;
48
60
  --pf-c-log-viewer__index--Width: 4.0625rem;
49
61
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
@@ -51,11 +63,16 @@
51
63
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
52
64
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
53
65
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
66
+ --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
54
67
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
55
68
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
56
69
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
57
70
  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
58
71
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
72
+ --pf-c-log-viewer__text--WordBreak: break-all;
73
+ --pf-c-log-viewer__text--WhiteSpace: break-spaces;
74
+ --pf-c-log-viewer__text--LineBreak: anywhere;
75
+ --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
59
76
  --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
60
77
  --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
61
78
  --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
@@ -74,22 +91,24 @@
74
91
  max-height: var(--pf-c-log-viewer--MaxHeight);
75
92
  }
76
93
  .pf-c-log-viewer.pf-m-dark {
77
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
78
- }
79
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
80
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
81
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
82
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
83
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
84
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
85
94
  color: var(--pf-global--Color--100);
95
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
86
96
  }
87
97
  .pf-c-log-viewer.pf-m-wrap-text {
88
98
  word-break: break-all;
89
99
  }
100
+ .pf-c-log-viewer.pf-m-nowrap {
101
+ --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
102
+ }
90
103
  .pf-c-log-viewer.pf-m-line-numbers {
91
104
  --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);
92
105
  }
106
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list {
107
+ position: absolute;
108
+ right: 0;
109
+ left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
110
+ overflow: auto;
111
+ }
93
112
  .pf-c-log-viewer .pf-c-toolbar {
94
113
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
95
114
  --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -106,6 +125,7 @@
106
125
  }
107
126
 
108
127
  .pf-c-log-viewer__header {
128
+ color: var(--pf-global--Color--100);
109
129
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
110
130
  }
111
131
 
@@ -130,19 +150,23 @@
130
150
  }
131
151
 
132
152
  .pf-c-log-viewer__scroll-container {
153
+ position: relative;
133
154
  height: var(--pf-c-log-viewer__scroll-container--Height);
134
155
  padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
135
156
  padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
136
157
  overflow: auto;
158
+ will-change: transform;
159
+ direction: ltr;
137
160
  }
138
161
 
139
162
  .pf-c-log-viewer__list {
140
163
  position: relative;
164
+ height: var(--pf-c-log-viewer__list--Height);
141
165
  }
142
166
 
143
- .pf-m-line-numbers .pf-c-log-viewer__list-item {
144
- display: grid;
145
- grid-template-columns: max-content 1fr;
167
+ .pf-c-log-viewer__list-item {
168
+ left: 0;
169
+ width: 100%;
146
170
  }
147
171
 
148
172
  .pf-c-log-viewer__string.pf-m-match {
@@ -155,6 +179,8 @@
155
179
  }
156
180
 
157
181
  .pf-c-log-viewer__index {
182
+ position: fixed;
183
+ left: 0;
158
184
  display: var(--pf-c-log-viewer__index--Display);
159
185
  width: var(--pf-c-log-viewer__index--Width);
160
186
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
@@ -162,6 +188,7 @@
162
188
  font-family: var(--pf-c-log-viewer__index--FontFamily);
163
189
  font-size: var(--pf-c-log-viewer__index--FontSize);
164
190
  color: var(--pf-c-log-viewer__index--Color);
191
+ background-color: var(--pf-c-log-viewer__index--BackgroundColor);
165
192
  }
166
193
 
167
194
  .pf-c-log-viewer__text {
@@ -171,9 +198,9 @@
171
198
  font-family: var(--pf-c-log-viewer__text--FontFamily);
172
199
  font-size: var(--pf-c-log-viewer__text--FontSize);
173
200
  color: var(--pf-c-log-viewer__text--Color);
174
- word-break: break-all;
175
- white-space: break-spaces;
176
- line-break: anywhere;
201
+ word-break: var(--pf-c-log-viewer__text--WordBreak);
202
+ white-space: var(--pf-c-log-viewer__text--WhiteSpace);
203
+ line-break: var(--pf-c-log-viewer__text--LineBreak);
177
204
  }
178
205
 
179
206
  .pf-c-log-viewer__timestamp {
package/components/LogViewer/log-viewer.scss CHANGED
@@ -13,6 +13,8 @@
13
13
 
14
14
  // Scroll container
15
15
  --pf-c-log-viewer__scroll-container--Height: #{pf-size-prem(600px)};
16
+ --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
17
+ --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
16
18
 
17
19
  // Main ::after
18
20
  --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
@@ -21,11 +23,8 @@
21
23
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
22
24
 
23
25
  // List
24
- // --pf-c-log-viewer__list--PaddingTop: var(--pf-global--spacer--sm);
25
- // --pf-c-log-viewer__list--PaddingBottom: var(--pf-global--spacer--sm);
26
-
27
- --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--md);
28
- --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--md);
26
+ --pf-c-log-viewer__list--Height: auto;
27
+ --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
29
28
 
30
29
  // Index
31
30
  --pf-c-log-viewer__index--Display: none;
@@ -35,6 +34,7 @@
35
34
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
36
35
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
37
36
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
37
+ --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
38
38
 
39
39
  // Text
40
40
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
@@ -42,6 +42,10 @@
42
42
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
43
43
  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
44
44
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
45
+ --pf-c-log-viewer__text--WordBreak: break-all;
46
+ --pf-c-log-viewer__text--WhiteSpace: break-spaces;
47
+ --pf-c-log-viewer__text--LineBreak: anywhere;
48
+ --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
45
49
  --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
46
50
  --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
47
51
  --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
@@ -61,19 +65,10 @@
61
65
  // Dark theme
62
66
  --pf-c-log-viewer--m-dark__main--BorderWidth: 0;
63
67
 
64
-
65
68
  &.pf-m-dark {
66
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
69
+ @include pf-t-dark;
67
70
 
68
- .pf-c-log-viewer__main {
69
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
70
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
71
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
72
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
73
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
74
-
75
- @include pf-t-dark;
76
- }
71
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
77
72
  }
78
73
 
79
74
  display: flex;
@@ -85,8 +80,19 @@
85
80
  word-break: break-all;
86
81
  }
87
82
 
83
+ &.pf-m-nowrap {
84
+ --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
85
+ }
86
+
88
87
  &.pf-m-line-numbers {
89
88
  --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);
89
+
90
+ .pf-c-log-viewer__list {
91
+ position: absolute;
92
+ right: 0;
93
+ left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
94
+ overflow: auto;
95
+ }
90
96
  }
91
97
 
92
98
  // Nested toolbar
@@ -110,6 +116,8 @@
110
116
 
111
117
  // Header
112
118
  .pf-c-log-viewer__header {
119
+ @include pf-t-light;
120
+
113
121
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
114
122
  }
115
123
 
@@ -140,30 +148,24 @@
140
148
  }
141
149
 
142
150
  .pf-c-log-viewer__scroll-container {
151
+ position: relative;
143
152
  height: var(--pf-c-log-viewer__scroll-container--Height);
144
153
  padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
145
154
  padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
146
155
  overflow: auto;
156
+ will-change: transform;
157
+ direction: ltr;
147
158
  }
148
159
 
149
160
  // List
150
161
  .pf-c-log-viewer__list {
151
- // flex: 1 1;
152
- // min-height: 0;
153
- // overflow: auto;
154
- // padding-top: var(--pf-c-log-viewer__list--PaddingTop);
155
- // padding-bottom: var(--pf-c-log-viewer__list--PaddingBottom);
156
-
157
162
  position: relative;
163
+ height: var(--pf-c-log-viewer__list--Height);
158
164
  }
159
165
 
160
166
  .pf-c-log-viewer__list-item {
161
- // stylelint-disable scss/at-rule-no-unknown
162
- @at-root.pf-m-line-numbers & {
163
- display: grid;
164
- grid-template-columns: max-content 1fr;
165
- }
166
- // stylelint-enable
167
+ left: 0;
168
+ width: 100%;
167
169
  }
168
170
 
169
171
  .pf-c-log-viewer__string {
@@ -180,6 +182,8 @@
180
182
 
181
183
  // Index
182
184
  .pf-c-log-viewer__index {
185
+ position: fixed;
186
+ left: 0;
183
187
  display: var(--pf-c-log-viewer__index--Display);
184
188
  width: var(--pf-c-log-viewer__index--Width);
185
189
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
@@ -187,6 +191,7 @@
187
191
  font-family: var(--pf-c-log-viewer__index--FontFamily);
188
192
  font-size: var(--pf-c-log-viewer__index--FontSize);
189
193
  color: var(--pf-c-log-viewer__index--Color);
194
+ background-color: var(--pf-c-log-viewer__index--BackgroundColor);
190
195
  }
191
196
 
192
197
  // Text
@@ -197,9 +202,9 @@
197
202
  font-family: var(--pf-c-log-viewer__text--FontFamily);
198
203
  font-size: var(--pf-c-log-viewer__text--FontSize);
199
204
  color: var(--pf-c-log-viewer__text--Color);
200
- word-break: break-all;
201
- white-space: break-spaces;
202
- line-break: anywhere;
205
+ word-break: var(--pf-c-log-viewer__text--WordBreak);
206
+ white-space: var(--pf-c-log-viewer__text--WhiteSpace);
207
+ line-break: var(--pf-c-log-viewer__text--LineBreak);
203
208
  }
204
209
 
205
210
  // Timestamp
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -96,7 +96,7 @@
96
96
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
97
97
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
98
98
  }
99
- .pf-c-menu-toggle.pf-m-plain {
99
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
100
100
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
101
101
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
102
102
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -132,7 +132,7 @@
132
132
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
133
133
  }
134
134
 
135
- &.pf-m-plain {
135
+ &.pf-m-plain:not(.pf-m-text) {
136
136
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
137
137
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
138
138
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/OptionsMenu/options-menu.css CHANGED
@@ -110,37 +110,29 @@
110
110
  justify-content: space-between;
111
111
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
112
112
  max-width: 100%;
113
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
113
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
114
114
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
115
115
  color: var(--pf-c-options-menu__toggle--Color);
116
116
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
117
117
  border: none;
118
118
  }
119
- .pf-c-options-menu__toggle:not(.pf-m-text) {
120
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
121
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
122
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
123
- }
124
119
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
125
120
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
126
121
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
127
122
  }
128
- .pf-c-options-menu__toggle.pf-m-plain {
123
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
129
124
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
130
125
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
131
126
  display: inline-block;
132
- }
133
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
134
- justify-content: center;
135
127
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
136
128
  }
137
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
129
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
138
130
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
139
131
  }
140
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
132
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
141
133
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
142
134
  }
143
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
135
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
144
136
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
145
137
  }
146
138
  .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -139,18 +139,12 @@
139
139
  justify-content: space-between;
140
140
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
141
141
  max-width: 100%;
142
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
142
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
143
143
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
144
144
  color: var(--pf-c-options-menu__toggle--Color);
145
145
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
146
146
  border: none;
147
147
 
148
- &:not(.pf-m-text) {
149
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
150
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
151
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
152
- }
153
-
154
148
  .pf-c-options-menu.pf-m-expanded > & {
155
149
  &::before {
156
150
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
@@ -159,16 +153,12 @@
159
153
  }
160
154
  }
161
155
 
162
- &.pf-m-plain {
156
+ &.pf-m-plain:not(.pf-m-text) {
163
157
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
164
158
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
165
159
 
166
160
  display: inline-block;
167
-
168
- &:not(.pf-m-text) {
169
- justify-content: center;
170
- color: var(--pf-c-options-menu__toggle--m-plain--Color);
171
- }
161
+ color: var(--pf-c-options-menu__toggle--m-plain--Color);
172
162
 
173
163
  .pf-c-options-menu__toggle-button-icon {
174
164
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
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. |