@patternfly/patternfly 4.165.1 → 4.166.2

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.
@@ -144,6 +144,7 @@
144
144
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
145
145
  --pf-c-button__progress--Opacity: 0;
146
146
  --pf-c-button__progress--TranslateY: -50%;
147
+ --pf-c-button__progress--TranslateX: 0;
147
148
  --pf-c-button__progress--Top: 50%;
148
149
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
149
150
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -152,6 +153,9 @@
152
153
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
153
154
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
154
155
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
156
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
157
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
158
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
155
159
  position: relative;
156
160
  display: inline-block;
157
161
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -437,10 +441,18 @@
437
441
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
438
442
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
439
443
  }
440
- .pf-c-button.pf-m-in-progress {
444
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
441
445
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
442
446
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
443
447
  }
448
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
449
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
450
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
451
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
452
+ }
453
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
454
+ opacity: 0;
455
+ }
444
456
 
445
457
  .pf-c-button__icon.pf-m-start {
446
458
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -454,7 +466,7 @@
454
466
  top: var(--pf-c-button__progress--Top);
455
467
  left: var(--pf-c-button__progress--Left);
456
468
  line-height: 1;
457
- transform: translateY(var(--pf-c-button__progress--TranslateY));
469
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
458
470
  }
459
471
  .pf-c-button__progress .pf-c-spinner {
460
472
  --pf-c-spinner--Color: currentColor;
@@ -179,6 +179,7 @@
179
179
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm)); // matches medium spinner diameter plus a spacer
180
180
  --pf-c-button__progress--Opacity: 0;
181
181
  --pf-c-button__progress--TranslateY: -50%;
182
+ --pf-c-button__progress--TranslateX: 0;
182
183
  --pf-c-button__progress--Top: 50%;
183
184
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
184
185
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -187,6 +188,9 @@
187
188
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
188
189
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
189
190
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
191
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
192
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
193
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
190
194
 
191
195
  position: relative;
192
196
  display: inline-block;
@@ -577,8 +581,20 @@
577
581
  }
578
582
 
579
583
  &.pf-m-in-progress {
580
- --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
581
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
584
+ &:not(.pf-m-plain) {
585
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
586
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
587
+ }
588
+
589
+ &.pf-m-plain {
590
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
591
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
592
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
593
+
594
+ > :not(.pf-c-button__progress) {
595
+ opacity: 0;
596
+ }
597
+ }
582
598
  }
583
599
  }
584
600
 
@@ -597,7 +613,7 @@
597
613
  top: var(--pf-c-button__progress--Top);
598
614
  left: var(--pf-c-button__progress--Left);
599
615
  line-height: 1;
600
- transform: translateY(var(--pf-c-button__progress--TranslateY));
616
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
601
617
 
602
618
  .pf-c-spinner {
603
619
  --pf-c-spinner--Color: currentColor;
@@ -1,15 +1,4 @@
1
- .pf-c-log-viewer__header,
2
- .pf-c-log-viewer__footer {
3
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
6
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
7
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
8
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10
- }
11
-
12
- .pf-c-log-viewer.pf-m-dark {
1
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
13
2
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14
3
  --pf-global--Color--200: var(--pf-global--Color--light-200);
15
4
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -18,10 +7,10 @@
18
7
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
19
8
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
20
9
  }
21
- .pf-c-log-viewer.pf-m-dark .pf-c-card {
10
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
22
11
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
23
12
  }
24
- .pf-c-log-viewer.pf-m-dark .pf-c-button {
13
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
25
14
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
26
15
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
27
16
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -51,8 +40,8 @@
51
40
  --pf-c-log-viewer__scroll-container--Height: 37.5rem;
52
41
  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
53
42
  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
54
- --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
55
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
43
+ --pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
44
+ --pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
56
45
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
57
46
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
58
47
  --pf-c-log-viewer__list--Height: auto;
@@ -64,7 +53,7 @@
64
53
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
65
54
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
66
55
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
67
- --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
56
+ --pf-c-log-viewer__index--BackgroundColor: transparent;
68
57
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
69
58
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
70
59
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
@@ -92,9 +81,16 @@
92
81
  max-height: var(--pf-c-log-viewer--MaxHeight);
93
82
  }
94
83
  .pf-c-log-viewer.pf-m-dark {
95
- color: var(--pf-global--Color--100);
96
84
  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
97
85
  }
86
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
87
+ color: var(--pf-global--Color--100);
88
+ --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
89
+ --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
90
+ --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
91
+ --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
92
+ --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
93
+ }
98
94
  .pf-c-log-viewer.pf-m-wrap-text {
99
95
  word-break: break-all;
100
96
  }
@@ -137,11 +133,6 @@
137
133
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
138
134
  }
139
135
 
140
- .pf-c-log-viewer__header,
141
- .pf-c-log-viewer__footer {
142
- color: var(--pf-global--Color--100);
143
- }
144
-
145
136
  .pf-c-log-viewer__main {
146
137
  display: flex;
147
138
  flex-direction: column;
@@ -17,8 +17,8 @@
17
17
  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
18
18
 
19
19
  // Main ::after
20
- --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
21
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
20
+ --pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
21
+ --pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
22
22
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
23
23
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
24
24
 
@@ -34,7 +34,7 @@
34
34
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
35
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
- --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
37
+ --pf-c-log-viewer__index--BackgroundColor: transparent;
38
38
 
39
39
  // Text
40
40
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
@@ -66,9 +66,17 @@
66
66
  --pf-c-log-viewer--m-dark__main--BorderWidth: 0;
67
67
 
68
68
  &.pf-m-dark {
69
- @include pf-t-dark;
70
-
71
69
  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
70
+
71
+ .pf-c-log-viewer__main {
72
+ @include pf-t-dark;
73
+
74
+ --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
75
+ --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
76
+ --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
77
+ --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
78
+ --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
79
+ }
72
80
  }
73
81
 
74
82
  display: flex;
@@ -129,11 +137,6 @@
129
137
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
130
138
  }
131
139
 
132
- .pf-c-log-viewer__header,
133
- .pf-c-log-viewer__footer {
134
- @include pf-t-light;
135
- }
136
-
137
140
  // Main
138
141
  .pf-c-log-viewer__main {
139
142
  display: flex;
@@ -182,6 +182,7 @@
182
182
  }
183
183
 
184
184
  .pf-c-login__main {
185
+ align-self: start;
185
186
  margin-bottom: var(--pf-c-login__main--MarginBottom);
186
187
  background-color: var(--pf-c-login__main--BackgroundColor);
187
188
  grid-area: main;
@@ -165,6 +165,7 @@
165
165
  }
166
166
 
167
167
  .pf-c-login__main {
168
+ align-self: start;
168
169
  margin-bottom: var(--pf-c-login__main--MarginBottom);
169
170
  background-color: var(--pf-c-login__main--BackgroundColor);
170
171
  grid-area: main;
@@ -472,7 +472,7 @@
472
472
  .pf-c-table .pf-c-table__icon,
473
473
  .pf-c-table .pf-m-fit-content {
474
474
  --pf-c-table--cell--MinWidth: fit-content;
475
- --pf-c-table--cell--MaxWidth: fit-content;
475
+ --pf-c-table--cell--MaxWidth: none;
476
476
  --pf-c-table--cell--Width: 1%;
477
477
  --pf-c-table--cell--Overflow: visible;
478
478
  --pf-c-table--cell--TextOverflow: clip;
@@ -579,7 +579,7 @@
579
579
  .pf-c-table__icon,
580
580
  .pf-m-fit-content {
581
581
  --pf-c-table--cell--MinWidth: fit-content;
582
- --pf-c-table--cell--MaxWidth: fit-content;
582
+ --pf-c-table--cell--MaxWidth: none;
583
583
  --pf-c-table--cell--Width: 1%;
584
584
  --pf-c-table--cell--Overflow: visible;
585
585
  --pf-c-table--cell--TextOverflow: clip;
@@ -404,6 +404,29 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
404
404
  Secondary loading
405
405
  </button>
406
406
 
407
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
408
+ <i class="fas fa-upload" aria-hidden="true"></i>
409
+ </button>
410
+
411
+ <button
412
+ class="pf-c-button pf-m-plain pf-m-in-progress"
413
+ type="button"
414
+ aria-label="Upload"
415
+ >
416
+ <i class="fas fa-upload" aria-hidden="true"></i>
417
+ <span class="pf-c-button__progress">
418
+ <span
419
+ class="pf-c-spinner pf-m-md"
420
+ role="progressbar"
421
+ aria-label="Loading..."
422
+ >
423
+ <span class="pf-c-spinner__clipper"></span>
424
+ <span class="pf-c-spinner__lead-ball"></span>
425
+ <span class="pf-c-spinner__tail-ball"></span>
426
+ </span>
427
+ </span>
428
+ </button>
429
+
407
430
  ```
408
431
 
409
432
  ## Documentation
@@ -453,5 +476,5 @@ Semantic buttons and links are important for usability as well as accessibility.
453
476
  | `.pf-m-small` | `.pf-c-button` | Modifies the button so that it has small font size. |
454
477
  | `.pf-m-aria-disabled` | `.pf-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
455
478
  | `.pf-m-display-lg` | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
456
- | `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. |
479
+ | `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
457
480
  | `.pf-m-in-progress` | `.pf-c-button` | Indicates that the button is in the in progress state. |
@@ -4755,6 +4755,7 @@ cssPrefix: pf-c-log-viewer
4755
4755
  <!--prettyhtml-ignore-end-->
4756
4756
  </div>
4757
4757
  </div>
4758
+ <button class="pf-c-button pf-m-primary" type="button">Jump to the bottom</button>
4758
4759
  </div>
4759
4760
 
4760
4761
  ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.165.1",
4
+ "version": "4.166.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -1,6 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
3
- .pf-c-log-viewer__footer, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
4
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
5
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
6
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -10,7 +9,7 @@
10
9
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11
10
  }
12
11
 
13
- .pf-c-wizard__header, .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, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
12
+ .pf-c-wizard__header, .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, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
14
13
  --pf-global--Color--100: var(--pf-global--Color--light-100);
15
14
  --pf-global--Color--200: var(--pf-global--Color--light-200);
16
15
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -19,10 +18,10 @@
19
18
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
20
19
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
21
20
  }
22
- .pf-c-wizard__header .pf-c-card, .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, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
21
+ .pf-c-wizard__header .pf-c-card, .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, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
23
22
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
24
23
  }
25
- .pf-c-wizard__header .pf-c-button, .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, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
24
+ .pf-c-wizard__header .pf-c-button, .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, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
26
25
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
27
26
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
28
27
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -6792,6 +6791,7 @@ button.pf-c-breadcrumb__link {
6792
6791
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6793
6792
  --pf-c-button__progress--Opacity: 0;
6794
6793
  --pf-c-button__progress--TranslateY: -50%;
6794
+ --pf-c-button__progress--TranslateX: 0;
6795
6795
  --pf-c-button__progress--Top: 50%;
6796
6796
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6797
6797
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6800,6 +6800,9 @@ button.pf-c-breadcrumb__link {
6800
6800
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6801
6801
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6802
6802
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6803
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6804
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6805
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6803
6806
  position: relative;
6804
6807
  display: inline-block;
6805
6808
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7085,10 +7088,18 @@ button.pf-c-breadcrumb__link {
7085
7088
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7086
7089
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7087
7090
  }
7088
- .pf-c-button.pf-m-in-progress {
7091
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7089
7092
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7090
7093
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7091
7094
  }
7095
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7096
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7097
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7098
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7099
+ }
7100
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7101
+ opacity: 0;
7102
+ }
7092
7103
 
7093
7104
  .pf-c-button__icon.pf-m-start {
7094
7105
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7102,7 +7113,7 @@ button.pf-c-breadcrumb__link {
7102
7113
  top: var(--pf-c-button__progress--Top);
7103
7114
  left: var(--pf-c-button__progress--Left);
7104
7115
  line-height: 1;
7105
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7116
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7106
7117
  }
7107
7118
  .pf-c-button__progress .pf-c-spinner {
7108
7119
  --pf-c-spinner--Color: currentColor;
@@ -15035,8 +15046,8 @@ ul.pf-c-list {
15035
15046
  --pf-c-log-viewer__scroll-container--Height: 37.5rem;
15036
15047
  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
15037
15048
  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
15038
- --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
15039
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
15049
+ --pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
15050
+ --pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
15040
15051
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
15041
15052
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
15042
15053
  --pf-c-log-viewer__list--Height: auto;
@@ -15048,7 +15059,7 @@ ul.pf-c-list {
15048
15059
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
15049
15060
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
15050
15061
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
15051
- --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
15062
+ --pf-c-log-viewer__index--BackgroundColor: transparent;
15052
15063
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
15053
15064
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
15054
15065
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
@@ -15076,9 +15087,16 @@ ul.pf-c-list {
15076
15087
  max-height: var(--pf-c-log-viewer--MaxHeight);
15077
15088
  }
15078
15089
  .pf-c-log-viewer.pf-m-dark {
15079
- color: var(--pf-global--Color--100);
15080
15090
  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
15081
15091
  }
15092
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
15093
+ color: var(--pf-global--Color--100);
15094
+ --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
15095
+ --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
15096
+ --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
15097
+ --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
15098
+ --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
15099
+ }
15082
15100
  .pf-c-log-viewer.pf-m-wrap-text {
15083
15101
  word-break: break-all;
15084
15102
  }
@@ -15121,11 +15139,6 @@ ul.pf-c-list {
15121
15139
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
15122
15140
  }
15123
15141
 
15124
- .pf-c-log-viewer__header,
15125
- .pf-c-log-viewer__footer {
15126
- color: var(--pf-global--Color--100);
15127
- }
15128
-
15129
15142
  .pf-c-log-viewer__main {
15130
15143
  display: flex;
15131
15144
  flex-direction: column;
@@ -15346,6 +15359,7 @@ ul.pf-c-list {
15346
15359
  }
15347
15360
 
15348
15361
  .pf-c-login__main {
15362
+ align-self: start;
15349
15363
  margin-bottom: var(--pf-c-login__main--MarginBottom);
15350
15364
  background-color: var(--pf-c-login__main--BackgroundColor);
15351
15365
  grid-area: main;
@@ -24426,7 +24440,7 @@ svg.pf-c-spinner.pf-m-xl {
24426
24440
  .pf-c-table .pf-c-table__icon,
24427
24441
  .pf-c-table .pf-m-fit-content {
24428
24442
  --pf-c-table--cell--MinWidth: fit-content;
24429
- --pf-c-table--cell--MaxWidth: fit-content;
24443
+ --pf-c-table--cell--MaxWidth: none;
24430
24444
  --pf-c-table--cell--Width: 1%;
24431
24445
  --pf-c-table--cell--Overflow: visible;
24432
24446
  --pf-c-table--cell--TextOverflow: clip;
package/patternfly.css CHANGED
@@ -1,6 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
3
- .pf-c-log-viewer__footer, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
4
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
5
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
6
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -10,7 +9,7 @@
10
9
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
11
10
  }
12
11
 
13
- .pf-c-wizard__header, .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, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
12
+ .pf-c-wizard__header, .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, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
14
13
  --pf-global--Color--100: var(--pf-global--Color--light-100);
15
14
  --pf-global--Color--200: var(--pf-global--Color--light-200);
16
15
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -19,10 +18,10 @@
19
18
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
20
19
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
21
20
  }
22
- .pf-c-wizard__header .pf-c-card, .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, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
21
+ .pf-c-wizard__header .pf-c-card, .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, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
23
22
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
24
23
  }
25
- .pf-c-wizard__header .pf-c-button, .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, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
24
+ .pf-c-wizard__header .pf-c-button, .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, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
26
25
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
27
26
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
28
27
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -6914,6 +6913,7 @@ button.pf-c-breadcrumb__link {
6914
6913
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6915
6914
  --pf-c-button__progress--Opacity: 0;
6916
6915
  --pf-c-button__progress--TranslateY: -50%;
6916
+ --pf-c-button__progress--TranslateX: 0;
6917
6917
  --pf-c-button__progress--Top: 50%;
6918
6918
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6919
6919
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6922,6 +6922,9 @@ button.pf-c-breadcrumb__link {
6922
6922
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6923
6923
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6924
6924
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6925
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6926
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6927
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6925
6928
  position: relative;
6926
6929
  display: inline-block;
6927
6930
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7207,10 +7210,18 @@ button.pf-c-breadcrumb__link {
7207
7210
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7208
7211
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7209
7212
  }
7210
- .pf-c-button.pf-m-in-progress {
7213
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7211
7214
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7212
7215
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7213
7216
  }
7217
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7218
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7219
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7220
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7221
+ }
7222
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7223
+ opacity: 0;
7224
+ }
7214
7225
 
7215
7226
  .pf-c-button__icon.pf-m-start {
7216
7227
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7224,7 +7235,7 @@ button.pf-c-breadcrumb__link {
7224
7235
  top: var(--pf-c-button__progress--Top);
7225
7236
  left: var(--pf-c-button__progress--Left);
7226
7237
  line-height: 1;
7227
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7238
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7228
7239
  }
7229
7240
  .pf-c-button__progress .pf-c-spinner {
7230
7241
  --pf-c-spinner--Color: currentColor;
@@ -15157,8 +15168,8 @@ ul.pf-c-list {
15157
15168
  --pf-c-log-viewer__scroll-container--Height: 37.5rem;
15158
15169
  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
15159
15170
  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
15160
- --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
15161
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
15171
+ --pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
15172
+ --pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
15162
15173
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
15163
15174
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
15164
15175
  --pf-c-log-viewer__list--Height: auto;
@@ -15170,7 +15181,7 @@ ul.pf-c-list {
15170
15181
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
15171
15182
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
15172
15183
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
15173
- --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
15184
+ --pf-c-log-viewer__index--BackgroundColor: transparent;
15174
15185
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
15175
15186
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
15176
15187
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
@@ -15198,9 +15209,16 @@ ul.pf-c-list {
15198
15209
  max-height: var(--pf-c-log-viewer--MaxHeight);
15199
15210
  }
15200
15211
  .pf-c-log-viewer.pf-m-dark {
15201
- color: var(--pf-global--Color--100);
15202
15212
  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
15203
15213
  }
15214
+ .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
15215
+ color: var(--pf-global--Color--100);
15216
+ --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
15217
+ --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
15218
+ --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
15219
+ --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
15220
+ --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
15221
+ }
15204
15222
  .pf-c-log-viewer.pf-m-wrap-text {
15205
15223
  word-break: break-all;
15206
15224
  }
@@ -15243,11 +15261,6 @@ ul.pf-c-list {
15243
15261
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
15244
15262
  }
15245
15263
 
15246
- .pf-c-log-viewer__header,
15247
- .pf-c-log-viewer__footer {
15248
- color: var(--pf-global--Color--100);
15249
- }
15250
-
15251
15264
  .pf-c-log-viewer__main {
15252
15265
  display: flex;
15253
15266
  flex-direction: column;
@@ -15468,6 +15481,7 @@ ul.pf-c-list {
15468
15481
  }
15469
15482
 
15470
15483
  .pf-c-login__main {
15484
+ align-self: start;
15471
15485
  margin-bottom: var(--pf-c-login__main--MarginBottom);
15472
15486
  background-color: var(--pf-c-login__main--BackgroundColor);
15473
15487
  grid-area: main;
@@ -24548,7 +24562,7 @@ svg.pf-c-spinner.pf-m-xl {
24548
24562
  .pf-c-table .pf-c-table__icon,
24549
24563
  .pf-c-table .pf-m-fit-content {
24550
24564
  --pf-c-table--cell--MinWidth: fit-content;
24551
- --pf-c-table--cell--MaxWidth: fit-content;
24565
+ --pf-c-table--cell--MaxWidth: none;
24552
24566
  --pf-c-table--cell--Width: 1%;
24553
24567
  --pf-c-table--cell--Overflow: visible;
24554
24568
  --pf-c-table--cell--TextOverflow: clip;