@patternfly/patternfly 4.211.0 → 4.212.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 (8) hide show
  1. package/components/LogViewer/log-viewer.css +15 -8
  2. package/components/LogViewer/log-viewer.scss +16 -8
  3. package/docs/components/LogViewer/examples/LogViewer.md +553 -1
  4. package/package.json +2 -2
  5. package/patternfly-no-reset.css +15 -8
  6. package/patternfly.css +15 -8
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/LogViewer/log-viewer.css CHANGED
@@ -46,18 +46,19 @@
46
46
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
47
47
  --pf-c-log-viewer__list--Height: auto;
48
48
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
49
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
50
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
49
51
  --pf-c-log-viewer__index--Display: none;
50
52
  --pf-c-log-viewer__index--Width: 4.0625rem;
51
53
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
52
54
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
53
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
54
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
55
55
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
56
56
  --pf-c-log-viewer__index--BackgroundColor: transparent;
57
+ --pf-c-log-viewer--line-number-chars: 4.4;
58
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
59
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
57
60
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
58
61
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
59
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
60
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
61
62
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
62
63
  --pf-c-log-viewer__text--WordBreak: break-all;
63
64
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -114,6 +115,10 @@
114
115
  content: "";
115
116
  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
116
117
  }
118
+ .pf-c-log-viewer.pf-m-line-number-chars {
119
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
120
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
121
+ }
117
122
  .pf-c-log-viewer .pf-c-toolbar {
118
123
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
119
124
  --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -154,6 +159,8 @@
154
159
  .pf-c-log-viewer__list {
155
160
  position: relative;
156
161
  height: var(--pf-c-log-viewer__list--Height);
162
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
163
+ font-size: var(--pf-c-log-viewer__list--FontSize);
157
164
  }
158
165
 
159
166
  .pf-c-log-viewer__list-item {
@@ -177,8 +184,8 @@
177
184
  width: var(--pf-c-log-viewer__index--Width);
178
185
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
179
186
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
180
- font-family: var(--pf-c-log-viewer__index--FontFamily);
181
- font-size: var(--pf-c-log-viewer__index--FontSize);
187
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
188
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
182
189
  color: var(--pf-c-log-viewer__index--Color);
183
190
  user-select: none;
184
191
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -188,8 +195,8 @@
188
195
  display: block;
189
196
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
190
197
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
191
- font-family: var(--pf-c-log-viewer__text--FontFamily);
192
- font-size: var(--pf-c-log-viewer__text--FontSize);
198
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
193
200
  color: var(--pf-c-log-viewer__text--Color);
194
201
  word-break: var(--pf-c-log-viewer__text--WordBreak);
195
202
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
package/components/LogViewer/log-viewer.scss CHANGED
@@ -25,22 +25,23 @@
25
25
  // List
26
26
  --pf-c-log-viewer__list--Height: auto;
27
27
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
28
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
29
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
28
30
 
29
31
  // Index
30
32
  --pf-c-log-viewer__index--Display: none;
31
33
  --pf-c-log-viewer__index--Width: #{pf-size-prem(65px)}; // default width
32
34
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
33
35
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
34
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
35
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
36
36
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
37
37
  --pf-c-log-viewer__index--BackgroundColor: transparent;
38
+ --pf-c-log-viewer--line-number-chars: 4.4; // it's close enough to the existing default
39
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
40
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
38
41
 
39
42
  // Text
40
43
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
41
44
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
42
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
43
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
44
45
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
45
46
  --pf-c-log-viewer__text--WordBreak: break-all;
46
47
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -113,6 +114,11 @@
113
114
  }
114
115
  }
115
116
 
117
+ &.pf-m-line-number-chars {
118
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
119
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
120
+ }
121
+
116
122
  // Nested toolbar
117
123
  .pf-c-toolbar {
118
124
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -160,6 +166,8 @@
160
166
  .pf-c-log-viewer__list {
161
167
  position: relative;
162
168
  height: var(--pf-c-log-viewer__list--Height);
169
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
170
+ font-size: var(--pf-c-log-viewer__list--FontSize);
163
171
  }
164
172
 
165
173
  .pf-c-log-viewer__list-item {
@@ -187,8 +195,8 @@
187
195
  width: var(--pf-c-log-viewer__index--Width);
188
196
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
189
197
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
190
- font-family: var(--pf-c-log-viewer__index--FontFamily);
191
- font-size: var(--pf-c-log-viewer__index--FontSize);
198
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
192
200
  color: var(--pf-c-log-viewer__index--Color);
193
201
  user-select: none;
194
202
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -199,8 +207,8 @@
199
207
  display: block;
200
208
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
201
209
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
202
- font-family: var(--pf-c-log-viewer__text--FontFamily);
203
- font-size: var(--pf-c-log-viewer__text--FontSize);
210
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
211
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
204
212
  color: var(--pf-c-log-viewer__text--Color);
205
213
  word-break: var(--pf-c-log-viewer__text--WordBreak);
206
214
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);