@patternfly/patternfly 4.165.0 → 4.166.1

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.
package/base/_base.scss CHANGED
@@ -1,3 +1,5 @@
1
+ // stylelint-disable no-invalid-position-at-import-rule
2
+
1
3
  @if $pf-global--load-pf-3 {
2
4
  @import url("https://fonts.googleapis.com/css?family=Open+Sans");
3
5
  @import url("https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.10/css/patternfly.min.css");
@@ -5,8 +5,10 @@
5
5
 
6
6
  @if not($pf-global--disable-fontawesome) {
7
7
  @if $pf-global--enable-fontawesome-cdn {
8
+ // stylelint-disable no-invalid-position-at-import-rule
8
9
  @import url("https://use.fontawesome.com/releases/v5.7.2/css/solid.css");
9
10
  @import url("https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css");
11
+ // stylelint-enable no-invalid-position-at-import-rule
10
12
  } @else {
11
13
  @font-face {
12
14
  font-family: "Font Awesome 5 Free";
package/base/_fonts.scss CHANGED
@@ -1,8 +1,6 @@
1
- //
2
1
  // Fonts
3
2
  // --------------------------------------------------
4
3
  // PatternFly uses RedHatText - https://github.com/RedHatOfficial/RedHatFont
5
- //
6
4
 
7
5
  // stylelint-disable font-family-name-quotes
8
6
 
@@ -157,7 +155,9 @@
157
155
 
158
156
 
159
157
  @if $pf-global--enable-font-overpass-cdn {
158
+ // stylelint-disable no-invalid-position-at-import-rule
160
159
  @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
160
+ // stylelint-enable no-invalid-position-at-import-rule
161
161
  } @else {
162
162
  @font-face {
163
163
  font-family: "overpass";
@@ -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,4 +1,5 @@
1
- .pf-c-log-viewer__header {
1
+ .pf-c-log-viewer__header,
2
+ .pf-c-log-viewer__footer {
2
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -107,7 +108,15 @@
107
108
  position: absolute;
108
109
  right: 0;
109
110
  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
110
- overflow: auto;
111
+ }
112
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
113
+ position: absolute;
114
+ top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
115
+ bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
116
+ left: 0;
117
+ width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
118
+ content: "";
119
+ background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
111
120
  }
112
121
  .pf-c-log-viewer .pf-c-toolbar {
113
122
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -125,10 +134,14 @@
125
134
  }
126
135
 
127
136
  .pf-c-log-viewer__header {
128
- color: var(--pf-global--Color--100);
129
137
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
130
138
  }
131
139
 
140
+ .pf-c-log-viewer__header,
141
+ .pf-c-log-viewer__footer {
142
+ color: var(--pf-global--Color--100);
143
+ }
144
+
132
145
  .pf-c-log-viewer__main {
133
146
  display: flex;
134
147
  flex-direction: column;
@@ -136,18 +149,6 @@
136
149
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
137
150
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
138
151
  }
139
- .pf-m-line-numbers .pf-c-log-viewer__main {
140
- position: relative;
141
- }
142
- .pf-m-line-numbers .pf-c-log-viewer__main::before {
143
- position: absolute;
144
- top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
145
- bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
146
- left: var(--pf-c-log-viewer__index--Width);
147
- width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
148
- content: "";
149
- background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
150
- }
151
152
 
152
153
  .pf-c-log-viewer__scroll-container {
153
154
  position: relative;
@@ -188,6 +189,7 @@
188
189
  font-family: var(--pf-c-log-viewer__index--FontFamily);
189
190
  font-size: var(--pf-c-log-viewer__index--FontSize);
190
191
  color: var(--pf-c-log-viewer__index--Color);
192
+ user-select: none;
191
193
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
192
194
  }
193
195
 
@@ -91,7 +91,17 @@
91
91
  position: absolute;
92
92
  right: 0;
93
93
  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
94
- overflow: auto;
94
+
95
+ // Divider
96
+ &::before {
97
+ position: absolute;
98
+ top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top); // rename these vars at a breaking change
99
+ bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
100
+ left: 0;
101
+ width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
102
+ content: "";
103
+ background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
104
+ }
95
105
  }
96
106
  }
97
107
 
@@ -116,11 +126,14 @@
116
126
 
117
127
  // Header
118
128
  .pf-c-log-viewer__header {
119
- @include pf-t-light;
120
-
121
129
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
122
130
  }
123
131
 
132
+ .pf-c-log-viewer__header,
133
+ .pf-c-log-viewer__footer {
134
+ @include pf-t-light;
135
+ }
136
+
124
137
  // Main
125
138
  .pf-c-log-viewer__main {
126
139
  display: flex;
@@ -128,23 +141,6 @@
128
141
  min-height: 0;
129
142
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
130
143
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
131
-
132
- // stylelint-disable scss/at-rule-no-unknown
133
- @at-root.pf-m-line-numbers & {
134
- position: relative;
135
-
136
- // Divider
137
- &::before {
138
- position: absolute;
139
- top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
140
- bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
141
- left: var(--pf-c-log-viewer__index--Width); // share this value so JS can update one value rather than two
142
- width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
143
- content: "";
144
- background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
145
- }
146
- }
147
- // stylelint-enable
148
144
  }
149
145
 
150
146
  .pf-c-log-viewer__scroll-container {
@@ -191,6 +187,7 @@
191
187
  font-family: var(--pf-c-log-viewer__index--FontFamily);
192
188
  font-size: var(--pf-c-log-viewer__index--FontSize);
193
189
  color: var(--pf-c-log-viewer__index--Color);
190
+ user-select: none;
194
191
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
195
192
  }
196
193
 
@@ -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. |
package/layouts/_all.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import "./Bullseye/bullseye.scss";
2
- @import "./Flex/flex.scss";
3
- @import "./Gallery/gallery.scss";
4
- @import "./Grid/grid.scss";
5
- @import "./Level/level.scss";
6
- @import "./Split/split.scss";
7
- @import "./Stack/stack.scss";
1
+ @import "./Bullseye/bullseye";
2
+ @import "./Flex/flex";
3
+ @import "./Gallery/gallery";
4
+ @import "./Grid/grid";
5
+ @import "./Level/level";
6
+ @import "./Split/split";
7
+ @import "./Stack/stack";
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.0",
4
+ "version": "4.166.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -1,5 +1,6 @@
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, .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-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 {
3
4
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
5
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
6
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -6791,6 +6792,7 @@ button.pf-c-breadcrumb__link {
6791
6792
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6792
6793
  --pf-c-button__progress--Opacity: 0;
6793
6794
  --pf-c-button__progress--TranslateY: -50%;
6795
+ --pf-c-button__progress--TranslateX: 0;
6794
6796
  --pf-c-button__progress--Top: 50%;
6795
6797
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6796
6798
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6799,6 +6801,9 @@ button.pf-c-breadcrumb__link {
6799
6801
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6800
6802
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6801
6803
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6804
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6805
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6806
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6802
6807
  position: relative;
6803
6808
  display: inline-block;
6804
6809
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7084,10 +7089,18 @@ button.pf-c-breadcrumb__link {
7084
7089
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7085
7090
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7086
7091
  }
7087
- .pf-c-button.pf-m-in-progress {
7092
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7088
7093
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7089
7094
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7090
7095
  }
7096
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7097
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7098
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7099
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7100
+ }
7101
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7102
+ opacity: 0;
7103
+ }
7091
7104
 
7092
7105
  .pf-c-button__icon.pf-m-start {
7093
7106
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7101,7 +7114,7 @@ button.pf-c-breadcrumb__link {
7101
7114
  top: var(--pf-c-button__progress--Top);
7102
7115
  left: var(--pf-c-button__progress--Left);
7103
7116
  line-height: 1;
7104
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7117
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7105
7118
  }
7106
7119
  .pf-c-button__progress .pf-c-spinner {
7107
7120
  --pf-c-spinner--Color: currentColor;
@@ -15091,7 +15104,15 @@ ul.pf-c-list {
15091
15104
  position: absolute;
15092
15105
  right: 0;
15093
15106
  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
15094
- overflow: auto;
15107
+ }
15108
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
15109
+ position: absolute;
15110
+ top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15111
+ bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15112
+ left: 0;
15113
+ width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15114
+ content: "";
15115
+ background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15095
15116
  }
15096
15117
  .pf-c-log-viewer .pf-c-toolbar {
15097
15118
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -15109,10 +15130,14 @@ ul.pf-c-list {
15109
15130
  }
15110
15131
 
15111
15132
  .pf-c-log-viewer__header {
15112
- color: var(--pf-global--Color--100);
15113
15133
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
15114
15134
  }
15115
15135
 
15136
+ .pf-c-log-viewer__header,
15137
+ .pf-c-log-viewer__footer {
15138
+ color: var(--pf-global--Color--100);
15139
+ }
15140
+
15116
15141
  .pf-c-log-viewer__main {
15117
15142
  display: flex;
15118
15143
  flex-direction: column;
@@ -15120,18 +15145,6 @@ ul.pf-c-list {
15120
15145
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
15121
15146
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
15122
15147
  }
15123
- .pf-m-line-numbers .pf-c-log-viewer__main {
15124
- position: relative;
15125
- }
15126
- .pf-m-line-numbers .pf-c-log-viewer__main::before {
15127
- position: absolute;
15128
- top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15129
- bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15130
- left: var(--pf-c-log-viewer__index--Width);
15131
- width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15132
- content: "";
15133
- background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15134
- }
15135
15148
 
15136
15149
  .pf-c-log-viewer__scroll-container {
15137
15150
  position: relative;
@@ -15172,6 +15185,7 @@ ul.pf-c-list {
15172
15185
  font-family: var(--pf-c-log-viewer__index--FontFamily);
15173
15186
  font-size: var(--pf-c-log-viewer__index--FontSize);
15174
15187
  color: var(--pf-c-log-viewer__index--Color);
15188
+ user-select: none;
15175
15189
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
15176
15190
  }
15177
15191
 
@@ -15344,6 +15358,7 @@ ul.pf-c-list {
15344
15358
  }
15345
15359
 
15346
15360
  .pf-c-login__main {
15361
+ align-self: start;
15347
15362
  margin-bottom: var(--pf-c-login__main--MarginBottom);
15348
15363
  background-color: var(--pf-c-login__main--BackgroundColor);
15349
15364
  grid-area: main;
@@ -24424,7 +24439,7 @@ svg.pf-c-spinner.pf-m-xl {
24424
24439
  .pf-c-table .pf-c-table__icon,
24425
24440
  .pf-c-table .pf-m-fit-content {
24426
24441
  --pf-c-table--cell--MinWidth: fit-content;
24427
- --pf-c-table--cell--MaxWidth: fit-content;
24442
+ --pf-c-table--cell--MaxWidth: none;
24428
24443
  --pf-c-table--cell--Width: 1%;
24429
24444
  --pf-c-table--cell--Overflow: visible;
24430
24445
  --pf-c-table--cell--TextOverflow: clip;
package/patternfly.css CHANGED
@@ -1,5 +1,6 @@
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, .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-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 {
3
4
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
5
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
6
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -6913,6 +6914,7 @@ button.pf-c-breadcrumb__link {
6913
6914
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6914
6915
  --pf-c-button__progress--Opacity: 0;
6915
6916
  --pf-c-button__progress--TranslateY: -50%;
6917
+ --pf-c-button__progress--TranslateX: 0;
6916
6918
  --pf-c-button__progress--Top: 50%;
6917
6919
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6918
6920
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6921,6 +6923,9 @@ button.pf-c-breadcrumb__link {
6921
6923
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6922
6924
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6923
6925
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6926
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6927
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6928
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6924
6929
  position: relative;
6925
6930
  display: inline-block;
6926
6931
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7206,10 +7211,18 @@ button.pf-c-breadcrumb__link {
7206
7211
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7207
7212
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7208
7213
  }
7209
- .pf-c-button.pf-m-in-progress {
7214
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7210
7215
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7211
7216
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7212
7217
  }
7218
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7219
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7220
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7221
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7222
+ }
7223
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7224
+ opacity: 0;
7225
+ }
7213
7226
 
7214
7227
  .pf-c-button__icon.pf-m-start {
7215
7228
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7223,7 +7236,7 @@ button.pf-c-breadcrumb__link {
7223
7236
  top: var(--pf-c-button__progress--Top);
7224
7237
  left: var(--pf-c-button__progress--Left);
7225
7238
  line-height: 1;
7226
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7239
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7227
7240
  }
7228
7241
  .pf-c-button__progress .pf-c-spinner {
7229
7242
  --pf-c-spinner--Color: currentColor;
@@ -15213,7 +15226,15 @@ ul.pf-c-list {
15213
15226
  position: absolute;
15214
15227
  right: 0;
15215
15228
  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
15216
- overflow: auto;
15229
+ }
15230
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
15231
+ position: absolute;
15232
+ top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15233
+ bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15234
+ left: 0;
15235
+ width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15236
+ content: "";
15237
+ background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15217
15238
  }
15218
15239
  .pf-c-log-viewer .pf-c-toolbar {
15219
15240
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -15231,10 +15252,14 @@ ul.pf-c-list {
15231
15252
  }
15232
15253
 
15233
15254
  .pf-c-log-viewer__header {
15234
- color: var(--pf-global--Color--100);
15235
15255
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
15236
15256
  }
15237
15257
 
15258
+ .pf-c-log-viewer__header,
15259
+ .pf-c-log-viewer__footer {
15260
+ color: var(--pf-global--Color--100);
15261
+ }
15262
+
15238
15263
  .pf-c-log-viewer__main {
15239
15264
  display: flex;
15240
15265
  flex-direction: column;
@@ -15242,18 +15267,6 @@ ul.pf-c-list {
15242
15267
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
15243
15268
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
15244
15269
  }
15245
- .pf-m-line-numbers .pf-c-log-viewer__main {
15246
- position: relative;
15247
- }
15248
- .pf-m-line-numbers .pf-c-log-viewer__main::before {
15249
- position: absolute;
15250
- top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15251
- bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15252
- left: var(--pf-c-log-viewer__index--Width);
15253
- width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15254
- content: "";
15255
- background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15256
- }
15257
15270
 
15258
15271
  .pf-c-log-viewer__scroll-container {
15259
15272
  position: relative;
@@ -15294,6 +15307,7 @@ ul.pf-c-list {
15294
15307
  font-family: var(--pf-c-log-viewer__index--FontFamily);
15295
15308
  font-size: var(--pf-c-log-viewer__index--FontSize);
15296
15309
  color: var(--pf-c-log-viewer__index--Color);
15310
+ user-select: none;
15297
15311
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
15298
15312
  }
15299
15313
 
@@ -15466,6 +15480,7 @@ ul.pf-c-list {
15466
15480
  }
15467
15481
 
15468
15482
  .pf-c-login__main {
15483
+ align-self: start;
15469
15484
  margin-bottom: var(--pf-c-login__main--MarginBottom);
15470
15485
  background-color: var(--pf-c-login__main--BackgroundColor);
15471
15486
  grid-area: main;
@@ -24546,7 +24561,7 @@ svg.pf-c-spinner.pf-m-xl {
24546
24561
  .pf-c-table .pf-c-table__icon,
24547
24562
  .pf-c-table .pf-m-fit-content {
24548
24563
  --pf-c-table--cell--MinWidth: fit-content;
24549
- --pf-c-table--cell--MaxWidth: fit-content;
24564
+ --pf-c-table--cell--MaxWidth: none;
24550
24565
  --pf-c-table--cell--Width: 1%;
24551
24566
  --pf-c-table--cell--Overflow: visible;
24552
24567
  --pf-c-table--cell--TextOverflow: clip;