@patternfly/patternfly 4.192.6 → 4.193.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 (13) hide show
  1. package/components/Label/label.css +5 -3
  2. package/components/Label/label.scss +3 -1
  3. package/components/Spinner/spinner.css +12 -12
  4. package/components/Spinner/spinner.scss +12 -12
  5. package/docs/components/Label/examples/Label.md +13 -1
  6. package/docs/components/LabelGroup/examples/LabelGroup.md +52 -5
  7. package/docs/demos/Card/examples/Card.md +4 -1
  8. package/docs/demos/Dashboard/examples/Dashboard.md +4 -1
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +17 -15
  11. package/patternfly.css +17 -15
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Label/label.css CHANGED
@@ -245,12 +245,14 @@
245
245
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
246
246
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
247
247
  }
248
- .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
248
+ .pf-c-label.pf-m-overflow:hover,
249
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
249
250
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
250
251
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
251
252
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
252
253
  }
253
- .pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
254
+ .pf-c-label.pf-m-overflow:focus,
255
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
254
256
  .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
255
257
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
256
258
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -298,7 +300,7 @@
298
300
  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
299
301
  margin-left: var(--pf-c-label__c-button--MarginLeft);
300
302
  }
301
- .pf-c-label.pf-m-overflow {
303
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
302
304
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
303
305
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
304
306
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
package/components/Label/label.scss CHANGED
@@ -294,6 +294,7 @@
294
294
  a,
295
295
  button {
296
296
  @at-root .pf-c-label.pf-m-overflow,
297
+ .pf-c-label.pf-m-add,
297
298
  &.pf-c-label__content {
298
299
  // stylelint-enable selector-no-qualifying-type
299
300
  &:hover {
@@ -362,7 +363,8 @@
362
363
  margin-left: var(--pf-c-label__c-button--MarginLeft);
363
364
  }
364
365
 
365
- &.pf-m-overflow {
366
+ &.pf-m-overflow,
367
+ &.pf-m-add {
366
368
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
367
369
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
368
370
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
package/components/Spinner/spinner.css CHANGED
@@ -50,10 +50,10 @@ span.pf-c-spinner {
50
50
  transform: rotate(0deg);
51
51
  }
52
52
  50% {
53
- transform: rotate(-540deg);
53
+ transform: rotate(540deg);
54
54
  }
55
55
  100% {
56
- transform: rotate(-1080deg);
56
+ transform: rotate(1080deg);
57
57
  }
58
58
  }
59
59
  .pf-c-spinner__clipper {
@@ -66,10 +66,10 @@ span.pf-c-spinner {
66
66
 
67
67
  @keyframes pf-animation-spinner__clipper {
68
68
  0% {
69
- transform: rotate(0deg);
69
+ transform: rotate(90deg);
70
70
  }
71
71
  100% {
72
- transform: rotate(-270deg);
72
+ transform: rotate(360deg);
73
73
  }
74
74
  }
75
75
  .pf-c-spinner__clipper::after {
@@ -85,10 +85,10 @@ span.pf-c-spinner {
85
85
 
86
86
  @keyframes pf-animation-spinner__clipper-after {
87
87
  0% {
88
- transform: rotate(90deg);
88
+ transform: rotate(-180deg);
89
89
  }
90
90
  100% {
91
- transform: rotate(-180deg);
91
+ transform: rotate(90deg);
92
92
  }
93
93
  }
94
94
  .pf-c-spinner__lead-ball {
@@ -115,11 +115,11 @@ span.pf-c-spinner {
115
115
  0% {
116
116
  transform: rotate(0deg);
117
117
  }
118
- 34% {
119
- transform: rotate(-180deg);
118
+ 33% {
119
+ transform: rotate(180deg);
120
120
  }
121
121
  100% {
122
- transform: rotate(-360deg);
122
+ transform: rotate(360deg);
123
123
  }
124
124
  }
125
125
  .pf-c-spinner__tail-ball {
@@ -146,11 +146,11 @@ span.pf-c-spinner {
146
146
  0% {
147
147
  transform: rotate(0deg);
148
148
  }
149
- 67.5% {
150
- transform: rotate(-180deg);
149
+ 66% {
150
+ transform: rotate(180deg);
151
151
  }
152
152
  100% {
153
- transform: rotate(-360deg);
153
+ transform: rotate(360deg);
154
154
  }
155
155
  }
156
156
  svg.pf-c-spinner {
package/components/Spinner/spinner.scss CHANGED
@@ -79,11 +79,11 @@ span.pf-c-spinner {
79
79
  }
80
80
 
81
81
  50% {
82
- transform: rotate(-540deg);
82
+ transform: rotate(540deg);
83
83
  }
84
84
 
85
85
  100% {
86
- transform: rotate(-1080deg);
86
+ transform: rotate(1080deg);
87
87
  }
88
88
  }
89
89
 
@@ -98,11 +98,11 @@ span.pf-c-spinner {
98
98
 
99
99
  @keyframes pf-animation-spinner__clipper {
100
100
  0% {
101
- transform: rotate(0deg);
101
+ transform: rotate(90deg);
102
102
  }
103
103
 
104
104
  100% {
105
- transform: rotate(-270deg);
105
+ transform: rotate(360deg);
106
106
  }
107
107
  }
108
108
 
@@ -121,11 +121,11 @@ span.pf-c-spinner {
121
121
  // The Clipper:after moves rotates 270deg in relation to its parent (so that it appears to grow and then shrink)
122
122
  @keyframes pf-animation-spinner__clipper-after {
123
123
  0% {
124
- transform: rotate(90deg);
124
+ transform: rotate(-180deg);
125
125
  }
126
126
 
127
127
  100% {
128
- transform: rotate(-180deg);
128
+ transform: rotate(90deg);
129
129
  }
130
130
  }
131
131
 
@@ -157,12 +157,12 @@ span.pf-c-spinner {
157
157
  transform: rotate(0deg);
158
158
  }
159
159
 
160
- 34% {
161
- transform: rotate(-180deg);
160
+ 33% {
161
+ transform: rotate(180deg);
162
162
  }
163
163
 
164
164
  100% {
165
- transform: rotate(-360deg);
165
+ transform: rotate(360deg);
166
166
  }
167
167
  }
168
168
 
@@ -194,12 +194,12 @@ span.pf-c-spinner {
194
194
  transform: rotate(0deg);
195
195
  }
196
196
 
197
- 67.5% {
198
- transform: rotate(-180deg);
197
+ 66% {
198
+ transform: rotate(180deg);
199
199
  }
200
200
 
201
201
  100% {
202
- transform: rotate(-360deg);
202
+ transform: rotate(360deg);
203
203
  }
204
204
  }
205
205
 
package/docs/components/Label/examples/Label.md CHANGED
@@ -1121,7 +1121,7 @@ cssPrefix: pf-c-label
1121
1121
  This style of label is used to indicate overflow within a label group.
1122
1122
 
1123
1123
  ```html
1124
- <button class="pf-c-label pf-m-overflow">
1124
+ <button class="pf-c-label pf-m-overflow" type="button">
1125
1125
  <span class="pf-c-label__content">Overflow</span>
1126
1126
  </button>
1127
1127
 
@@ -1206,6 +1206,17 @@ This style of label is used to indicate overflow within a label group.
1206
1206
 
1207
1207
  ```
1208
1208
 
1209
+ ### Add label
1210
+
1211
+ This style of label is used to add new labels to a label group.
1212
+
1213
+ ```html isBeta
1214
+ <button class="pf-c-label pf-m-add" type="button">
1215
+ <span class="pf-c-label__content">Add Label</span>
1216
+ </button>
1217
+
1218
+ ```
1219
+
1209
1220
  ## Documentation
1210
1221
 
1211
1222
  ### Usage
@@ -1220,6 +1231,7 @@ This style of label is used to indicate overflow within a label group.
1220
1231
  | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
1221
1232
  | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
1222
1233
  | `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
1234
+ | `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
1223
1235
  | `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
1224
1236
  | `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
1225
1237
  | `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
package/docs/components/LabelGroup/examples/LabelGroup.md CHANGED
@@ -84,7 +84,7 @@ cssPrefix: pf-c-label-group
84
84
  </span>
85
85
  </li>
86
86
  <li class="pf-c-label-group__list-item">
87
- <button class="pf-c-label pf-m-overflow">
87
+ <button class="pf-c-label pf-m-overflow" type="button">
88
88
  <span class="pf-c-label__content">3 more</span>
89
89
  </button>
90
90
  </li>
@@ -151,7 +151,7 @@ cssPrefix: pf-c-label-group
151
151
  </span>
152
152
  </li>
153
153
  <li class="pf-c-label-group__list-item">
154
- <button class="pf-c-label pf-m-overflow">
154
+ <button class="pf-c-label pf-m-overflow" type="button">
155
155
  <span class="pf-c-label__content">3 less</span>
156
156
  </button>
157
157
  </li>
@@ -161,6 +161,53 @@ cssPrefix: pf-c-label-group
161
161
 
162
162
  ```
163
163
 
164
+ ### Add label
165
+
166
+ ```html
167
+ <div class="pf-c-label-group">
168
+ <div class="pf-c-label-group__main">
169
+ <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
170
+ <li class="pf-c-label-group__list-item">
171
+ <span class="pf-c-label">
172
+ <span class="pf-c-label__content">
173
+ <span class="pf-c-label__icon">
174
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
175
+ </span>
176
+ Label
177
+ </span>
178
+ </span>
179
+ </li>
180
+ <li class="pf-c-label-group__list-item">
181
+ <span class="pf-c-label pf-m-blue">
182
+ <span class="pf-c-label__content">
183
+ <span class="pf-c-label__icon">
184
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
185
+ </span>
186
+ Label 2
187
+ </span>
188
+ </span>
189
+ </li>
190
+ <li class="pf-c-label-group__list-item">
191
+ <span class="pf-c-label pf-m-green">
192
+ <span class="pf-c-label__content">
193
+ <span class="pf-c-label__icon">
194
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
195
+ </span>
196
+ Label 3
197
+ </span>
198
+ </span>
199
+ </li>
200
+ <li class="pf-c-label-group__list-item">
201
+ <button class="pf-c-label pf-m-add" type="button">
202
+ <span class="pf-c-label__content">Add Label</span>
203
+ </button>
204
+ </li>
205
+ </ul>
206
+ </div>
207
+ </div>
208
+
209
+ ```
210
+
164
211
  ### Category
165
212
 
166
213
  ```html
@@ -383,7 +430,7 @@ cssPrefix: pf-c-label-group
383
430
  </span>
384
431
  </li>
385
432
  <li class="pf-c-label-group__list-item">
386
- <button class="pf-c-label pf-m-overflow">
433
+ <button class="pf-c-label pf-m-overflow" type="button">
387
434
  <span class="pf-c-label__content">3 more</span>
388
435
  </button>
389
436
  </li>
@@ -450,7 +497,7 @@ cssPrefix: pf-c-label-group
450
497
  </span>
451
498
  </li>
452
499
  <li class="pf-c-label-group__list-item">
453
- <button class="pf-c-label pf-m-overflow">
500
+ <button class="pf-c-label pf-m-overflow" type="button">
454
501
  <span class="pf-c-label__content">3 less</span>
455
502
  </button>
456
503
  </li>
@@ -983,7 +1030,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
983
1030
  </span>
984
1031
  </li>
985
1032
  <li class="pf-c-label-group__list-item">
986
- <button class="pf-c-label pf-m-overflow pf-m-compact">
1033
+ <button class="pf-c-label pf-m-overflow pf-m-compact" type="button">
987
1034
  <span class="pf-c-label__content">3 more</span>
988
1035
  </button>
989
1036
  </li>
package/docs/demos/Card/examples/Card.md CHANGED
@@ -111,7 +111,10 @@ wrapperTag: div
111
111
  </span>
112
112
  </li>
113
113
  <li class="pf-c-label-group__list-item">
114
- <button class="pf-c-label pf-m-overflow pf-m-compact">
114
+ <button
115
+ class="pf-c-label pf-m-overflow pf-m-compact"
116
+ type="button"
117
+ >
115
118
  <span class="pf-c-label__content">1 more</span>
116
119
  </button>
117
120
  </li>
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -1071,7 +1071,10 @@ cssPrefix: pf-d-dashboard
1071
1071
  </span>
1072
1072
  </li>
1073
1073
  <li class="pf-c-label-group__list-item">
1074
- <button class="pf-c-label pf-m-overflow">
1074
+ <button
1075
+ class="pf-c-label pf-m-overflow"
1076
+ type="button"
1077
+ >
1075
1078
  <span class="pf-c-label__content">1 more</span>
1076
1079
  </button>
1077
1080
  </li>
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.192.6",
4
+ "version": "4.193.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -15247,12 +15247,14 @@ label.pf-c-input-group__text {
15247
15247
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
15248
15248
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
15249
15249
  }
15250
- .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
15250
+ .pf-c-label.pf-m-overflow:hover,
15251
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
15251
15252
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
15252
15253
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
15253
15254
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
15254
15255
  }
15255
- .pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
15256
+ .pf-c-label.pf-m-overflow:focus,
15257
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
15256
15258
  .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
15257
15259
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
15258
15260
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -15300,7 +15302,7 @@ label.pf-c-input-group__text {
15300
15302
  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
15301
15303
  margin-left: var(--pf-c-label__c-button--MarginLeft);
15302
15304
  }
15303
- .pf-c-label.pf-m-overflow {
15305
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
15304
15306
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
15305
15307
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
15306
15308
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -22834,10 +22836,10 @@ span.pf-c-spinner {
22834
22836
  transform: rotate(0deg);
22835
22837
  }
22836
22838
  50% {
22837
- transform: rotate(-540deg);
22839
+ transform: rotate(540deg);
22838
22840
  }
22839
22841
  100% {
22840
- transform: rotate(-1080deg);
22842
+ transform: rotate(1080deg);
22841
22843
  }
22842
22844
  }
22843
22845
  .pf-c-spinner__clipper {
@@ -22850,10 +22852,10 @@ span.pf-c-spinner {
22850
22852
 
22851
22853
  @keyframes pf-animation-spinner__clipper {
22852
22854
  0% {
22853
- transform: rotate(0deg);
22855
+ transform: rotate(90deg);
22854
22856
  }
22855
22857
  100% {
22856
- transform: rotate(-270deg);
22858
+ transform: rotate(360deg);
22857
22859
  }
22858
22860
  }
22859
22861
  .pf-c-spinner__clipper::after {
@@ -22869,10 +22871,10 @@ span.pf-c-spinner {
22869
22871
 
22870
22872
  @keyframes pf-animation-spinner__clipper-after {
22871
22873
  0% {
22872
- transform: rotate(90deg);
22874
+ transform: rotate(-180deg);
22873
22875
  }
22874
22876
  100% {
22875
- transform: rotate(-180deg);
22877
+ transform: rotate(90deg);
22876
22878
  }
22877
22879
  }
22878
22880
  .pf-c-spinner__lead-ball {
@@ -22899,11 +22901,11 @@ span.pf-c-spinner {
22899
22901
  0% {
22900
22902
  transform: rotate(0deg);
22901
22903
  }
22902
- 34% {
22903
- transform: rotate(-180deg);
22904
+ 33% {
22905
+ transform: rotate(180deg);
22904
22906
  }
22905
22907
  100% {
22906
- transform: rotate(-360deg);
22908
+ transform: rotate(360deg);
22907
22909
  }
22908
22910
  }
22909
22911
  .pf-c-spinner__tail-ball {
@@ -22930,11 +22932,11 @@ span.pf-c-spinner {
22930
22932
  0% {
22931
22933
  transform: rotate(0deg);
22932
22934
  }
22933
- 67.5% {
22934
- transform: rotate(-180deg);
22935
+ 66% {
22936
+ transform: rotate(180deg);
22935
22937
  }
22936
22938
  100% {
22937
- transform: rotate(-360deg);
22939
+ transform: rotate(360deg);
22938
22940
  }
22939
22941
  }
22940
22942
  svg.pf-c-spinner {
package/patternfly.css CHANGED
@@ -15374,12 +15374,14 @@ label.pf-c-input-group__text {
15374
15374
  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
15375
15375
  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
15376
15376
  }
15377
- .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
15377
+ .pf-c-label.pf-m-overflow:hover,
15378
+ .pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
15378
15379
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
15379
15380
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
15380
15381
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
15381
15382
  }
15382
- .pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
15383
+ .pf-c-label.pf-m-overflow:focus,
15384
+ .pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
15383
15385
  .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
15384
15386
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
15385
15387
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -15427,7 +15429,7 @@ label.pf-c-input-group__text {
15427
15429
  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
15428
15430
  margin-left: var(--pf-c-label__c-button--MarginLeft);
15429
15431
  }
15430
- .pf-c-label.pf-m-overflow {
15432
+ .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
15431
15433
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
15432
15434
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
15433
15435
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -22961,10 +22963,10 @@ span.pf-c-spinner {
22961
22963
  transform: rotate(0deg);
22962
22964
  }
22963
22965
  50% {
22964
- transform: rotate(-540deg);
22966
+ transform: rotate(540deg);
22965
22967
  }
22966
22968
  100% {
22967
- transform: rotate(-1080deg);
22969
+ transform: rotate(1080deg);
22968
22970
  }
22969
22971
  }
22970
22972
  .pf-c-spinner__clipper {
@@ -22977,10 +22979,10 @@ span.pf-c-spinner {
22977
22979
 
22978
22980
  @keyframes pf-animation-spinner__clipper {
22979
22981
  0% {
22980
- transform: rotate(0deg);
22982
+ transform: rotate(90deg);
22981
22983
  }
22982
22984
  100% {
22983
- transform: rotate(-270deg);
22985
+ transform: rotate(360deg);
22984
22986
  }
22985
22987
  }
22986
22988
  .pf-c-spinner__clipper::after {
@@ -22996,10 +22998,10 @@ span.pf-c-spinner {
22996
22998
 
22997
22999
  @keyframes pf-animation-spinner__clipper-after {
22998
23000
  0% {
22999
- transform: rotate(90deg);
23001
+ transform: rotate(-180deg);
23000
23002
  }
23001
23003
  100% {
23002
- transform: rotate(-180deg);
23004
+ transform: rotate(90deg);
23003
23005
  }
23004
23006
  }
23005
23007
  .pf-c-spinner__lead-ball {
@@ -23026,11 +23028,11 @@ span.pf-c-spinner {
23026
23028
  0% {
23027
23029
  transform: rotate(0deg);
23028
23030
  }
23029
- 34% {
23030
- transform: rotate(-180deg);
23031
+ 33% {
23032
+ transform: rotate(180deg);
23031
23033
  }
23032
23034
  100% {
23033
- transform: rotate(-360deg);
23035
+ transform: rotate(360deg);
23034
23036
  }
23035
23037
  }
23036
23038
  .pf-c-spinner__tail-ball {
@@ -23057,11 +23059,11 @@ span.pf-c-spinner {
23057
23059
  0% {
23058
23060
  transform: rotate(0deg);
23059
23061
  }
23060
- 67.5% {
23061
- transform: rotate(-180deg);
23062
+ 66% {
23063
+ transform: rotate(180deg);
23062
23064
  }
23063
23065
  100% {
23064
- transform: rotate(-360deg);
23066
+ transform: rotate(360deg);
23065
23067
  }
23066
23068
  }
23067
23069
  svg.pf-c-spinner {