@patternfly/patternfly 6.2.0-prerelease.15 → 6.2.0-prerelease.16
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/components/HelperText/helper-text.css +13 -0
- package/components/HelperText/helper-text.scss +16 -0
- package/components/MenuToggle/menu-toggle.css +41 -0
- package/components/MenuToggle/menu-toggle.scss +49 -0
- package/components/_index.css +54 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +54 -0
- package/patternfly.css +54 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
--pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
13
13
|
--pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
14
14
|
--pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
15
|
+
--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
16
|
+
--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
15
17
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
16
18
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
17
19
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -56,6 +58,17 @@
|
|
|
56
58
|
--pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
|
|
57
59
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
|
|
58
60
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
|
|
61
|
+
animation-name: --pf-v6-c-helper-text-item-fade-in;
|
|
62
|
+
animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
|
|
63
|
+
animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
|
|
64
|
+
}
|
|
65
|
+
@keyframes --pf-v6-c-helper-text-item-fade-in {
|
|
66
|
+
from {
|
|
67
|
+
opacity: 0;
|
|
68
|
+
}
|
|
69
|
+
to {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
}
|
|
59
72
|
}
|
|
60
73
|
.pf-v6-c-helper-text__item.pf-m-dynamic {
|
|
61
74
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
--#{$helper-text}__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
17
17
|
--#{$helper-text}__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
18
18
|
--#{$helper-text}__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
19
|
+
--#{$helper-text}__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
20
|
+
--#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
19
21
|
|
|
20
22
|
// dynamic
|
|
21
23
|
--#{$helper-text}--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
@@ -71,6 +73,20 @@
|
|
|
71
73
|
--#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-error--FontWeight);
|
|
72
74
|
--#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-error--Color);
|
|
73
75
|
--#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-error__item-icon--Color);
|
|
76
|
+
|
|
77
|
+
animation-name: --#{$helper-text}-item-fade-in;
|
|
78
|
+
animation-duration: var(--#{$helper-text}__item--m-error--TransitionDuration--Opacity);
|
|
79
|
+
animation-timing-function: var(--#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity);
|
|
80
|
+
|
|
81
|
+
@keyframes --#{$helper-text}-item-fade-in {
|
|
82
|
+
from {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
to {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
74
90
|
}
|
|
75
91
|
|
|
76
92
|
&.pf-m-dynamic {
|
|
@@ -118,12 +118,16 @@
|
|
|
118
118
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
119
119
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
120
120
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
121
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
|
|
122
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
121
123
|
--pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
122
124
|
--pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
123
125
|
--pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
124
126
|
--pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
125
127
|
--pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
126
128
|
--pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
129
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
130
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
127
131
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
128
132
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
129
133
|
}
|
|
@@ -272,6 +276,28 @@
|
|
|
272
276
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
|
|
273
277
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
|
|
274
278
|
}
|
|
279
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
280
|
+
.pf-v6-c-menu-toggle.pf-m-danger {
|
|
281
|
+
transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
|
|
282
|
+
animation-name: pf-v6-c-menu-toggle-m-danger-motion;
|
|
283
|
+
animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
|
|
284
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
|
|
285
|
+
animation-fill-mode: both;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
|
|
289
|
+
animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
|
|
290
|
+
animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
|
|
291
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
|
|
292
|
+
}
|
|
293
|
+
@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
|
|
294
|
+
from {
|
|
295
|
+
opacity: 0;
|
|
296
|
+
}
|
|
297
|
+
to {
|
|
298
|
+
opacity: 1;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
275
301
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
276
302
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
277
303
|
}
|
|
@@ -287,6 +313,21 @@
|
|
|
287
313
|
pointer-events: none;
|
|
288
314
|
}
|
|
289
315
|
|
|
316
|
+
@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
|
|
317
|
+
syntax: "<length>";
|
|
318
|
+
inherits: false;
|
|
319
|
+
initial-value: 0;
|
|
320
|
+
}
|
|
321
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
322
|
+
@keyframes pf-v6-c-menu-toggle-m-danger-motion {
|
|
323
|
+
33% {
|
|
324
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
|
|
325
|
+
}
|
|
326
|
+
66% {
|
|
327
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
}
|
|
290
331
|
.pf-v6-c-menu-toggle.pf-m-split-button {
|
|
291
332
|
--pf-v6-c-menu-toggle--Gap: 0;
|
|
292
333
|
--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
|
|
@@ -152,6 +152,8 @@
|
|
|
152
152
|
|
|
153
153
|
// Status icon
|
|
154
154
|
--#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
155
|
+
--#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
|
|
156
|
+
--#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
155
157
|
|
|
156
158
|
// Success
|
|
157
159
|
--#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
@@ -164,6 +166,8 @@
|
|
|
164
166
|
// Danger
|
|
165
167
|
--#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
166
168
|
--#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
169
|
+
--#{$menu-toggle}--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
170
|
+
--#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
167
171
|
|
|
168
172
|
// Placeholder
|
|
169
173
|
--#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
@@ -337,6 +341,32 @@
|
|
|
337
341
|
&.pf-m-danger {
|
|
338
342
|
--#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
|
|
339
343
|
--#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
|
|
344
|
+
|
|
345
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
346
|
+
transform: translateX(var(--#{$menu-toggle}--m-danger--TranslateX, 0));
|
|
347
|
+
animation-name: #{$menu-toggle}-m-danger-motion;
|
|
348
|
+
animation-duration: var(--#{$menu-toggle}--m-danger--AnimationDuration--Transform);
|
|
349
|
+
animation-timing-function: var(--#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform);
|
|
350
|
+
animation-fill-mode: both;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.#{$menu-toggle}__status-icon {
|
|
354
|
+
animation-name: #{$menu-toggle}-status-icon-fade-in;
|
|
355
|
+
animation-duration: var(--#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity);
|
|
356
|
+
animation-timing-function: var(--#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity);
|
|
357
|
+
|
|
358
|
+
// stylelint-disable max-nesting-depth
|
|
359
|
+
@keyframes #{$menu-toggle}-status-icon-fade-in {
|
|
360
|
+
from {
|
|
361
|
+
opacity: 0;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
to {
|
|
365
|
+
opacity: 1;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
// stylelint-enable
|
|
369
|
+
}
|
|
340
370
|
}
|
|
341
371
|
|
|
342
372
|
&.pf-m-placeholder {
|
|
@@ -357,6 +387,25 @@
|
|
|
357
387
|
}
|
|
358
388
|
}
|
|
359
389
|
|
|
390
|
+
// Register the property type for the custom property to be animatable
|
|
391
|
+
@property --#{$menu-toggle}--m-danger--TranslateX {
|
|
392
|
+
syntax: "<length>";
|
|
393
|
+
inherits: false;
|
|
394
|
+
initial-value: 0;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
398
|
+
@keyframes #{$menu-toggle}-m-danger-motion {
|
|
399
|
+
33% {
|
|
400
|
+
--#{$menu-toggle}--m-danger--TranslateX: -2px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
66% {
|
|
404
|
+
--#{$menu-toggle}--m-danger--TranslateX: 3px;
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
360
409
|
// - Menu toggle split button
|
|
361
410
|
.#{$menu-toggle}.pf-m-split-button {
|
|
362
411
|
--#{$menu-toggle}--Gap: 0;
|
package/components/_index.css
CHANGED
|
@@ -7240,6 +7240,8 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
7240
7240
|
--pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
7241
7241
|
--pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
7242
7242
|
--pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
7243
|
+
--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
7244
|
+
--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
7243
7245
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
7244
7246
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
7245
7247
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -7284,6 +7286,17 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
7284
7286
|
--pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
|
|
7285
7287
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
|
|
7286
7288
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
|
|
7289
|
+
animation-name: --pf-v6-c-helper-text-item-fade-in;
|
|
7290
|
+
animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
|
|
7291
|
+
animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
|
|
7292
|
+
}
|
|
7293
|
+
@keyframes --pf-v6-c-helper-text-item-fade-in {
|
|
7294
|
+
from {
|
|
7295
|
+
opacity: 0;
|
|
7296
|
+
}
|
|
7297
|
+
to {
|
|
7298
|
+
opacity: 1;
|
|
7299
|
+
}
|
|
7287
7300
|
}
|
|
7288
7301
|
.pf-v6-c-helper-text__item.pf-m-dynamic {
|
|
7289
7302
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
|
|
@@ -10174,12 +10187,16 @@ ul.pf-v6-c-list {
|
|
|
10174
10187
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10175
10188
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10176
10189
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
10190
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
|
|
10191
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
10177
10192
|
--pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
10178
10193
|
--pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
10179
10194
|
--pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
10180
10195
|
--pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
10181
10196
|
--pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
10182
10197
|
--pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
10198
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
10199
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
10183
10200
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
10184
10201
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
10185
10202
|
}
|
|
@@ -10328,6 +10345,28 @@ ul.pf-v6-c-list {
|
|
|
10328
10345
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
|
|
10329
10346
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
|
|
10330
10347
|
}
|
|
10348
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
10349
|
+
.pf-v6-c-menu-toggle.pf-m-danger {
|
|
10350
|
+
transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
|
|
10351
|
+
animation-name: pf-v6-c-menu-toggle-m-danger-motion;
|
|
10352
|
+
animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
|
|
10353
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
|
|
10354
|
+
animation-fill-mode: both;
|
|
10355
|
+
}
|
|
10356
|
+
}
|
|
10357
|
+
.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
|
|
10358
|
+
animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
|
|
10359
|
+
animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
|
|
10360
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
|
|
10361
|
+
}
|
|
10362
|
+
@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
|
|
10363
|
+
from {
|
|
10364
|
+
opacity: 0;
|
|
10365
|
+
}
|
|
10366
|
+
to {
|
|
10367
|
+
opacity: 1;
|
|
10368
|
+
}
|
|
10369
|
+
}
|
|
10331
10370
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
10332
10371
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
10333
10372
|
}
|
|
@@ -10343,6 +10382,21 @@ ul.pf-v6-c-list {
|
|
|
10343
10382
|
pointer-events: none;
|
|
10344
10383
|
}
|
|
10345
10384
|
|
|
10385
|
+
@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
|
|
10386
|
+
syntax: "<length>";
|
|
10387
|
+
inherits: false;
|
|
10388
|
+
initial-value: 0;
|
|
10389
|
+
}
|
|
10390
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
10391
|
+
@keyframes pf-v6-c-menu-toggle-m-danger-motion {
|
|
10392
|
+
33% {
|
|
10393
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
|
|
10394
|
+
}
|
|
10395
|
+
66% {
|
|
10396
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
|
|
10397
|
+
}
|
|
10398
|
+
}
|
|
10399
|
+
}
|
|
10346
10400
|
.pf-v6-c-menu-toggle.pf-m-split-button {
|
|
10347
10401
|
--pf-v6-c-menu-toggle--Gap: 0;
|
|
10348
10402
|
--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
|
package/package.json
CHANGED
|
@@ -14702,6 +14702,8 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
14702
14702
|
--pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
14703
14703
|
--pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
14704
14704
|
--pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
14705
|
+
--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
14706
|
+
--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
14705
14707
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
14706
14708
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
14707
14709
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -14746,6 +14748,17 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
14746
14748
|
--pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
|
|
14747
14749
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
|
|
14748
14750
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
|
|
14751
|
+
animation-name: --pf-v6-c-helper-text-item-fade-in;
|
|
14752
|
+
animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
|
|
14753
|
+
animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
|
|
14754
|
+
}
|
|
14755
|
+
@keyframes --pf-v6-c-helper-text-item-fade-in {
|
|
14756
|
+
from {
|
|
14757
|
+
opacity: 0;
|
|
14758
|
+
}
|
|
14759
|
+
to {
|
|
14760
|
+
opacity: 1;
|
|
14761
|
+
}
|
|
14749
14762
|
}
|
|
14750
14763
|
.pf-v6-c-helper-text__item.pf-m-dynamic {
|
|
14751
14764
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
|
|
@@ -17636,12 +17649,16 @@ ul.pf-v6-c-list {
|
|
|
17636
17649
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
17637
17650
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
17638
17651
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
17652
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
|
|
17653
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
17639
17654
|
--pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
17640
17655
|
--pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
17641
17656
|
--pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
17642
17657
|
--pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
17643
17658
|
--pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
17644
17659
|
--pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
17660
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
17661
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
17645
17662
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
17646
17663
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
17647
17664
|
}
|
|
@@ -17790,6 +17807,28 @@ ul.pf-v6-c-list {
|
|
|
17790
17807
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
|
|
17791
17808
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
|
|
17792
17809
|
}
|
|
17810
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
17811
|
+
.pf-v6-c-menu-toggle.pf-m-danger {
|
|
17812
|
+
transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
|
|
17813
|
+
animation-name: pf-v6-c-menu-toggle-m-danger-motion;
|
|
17814
|
+
animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
|
|
17815
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
|
|
17816
|
+
animation-fill-mode: both;
|
|
17817
|
+
}
|
|
17818
|
+
}
|
|
17819
|
+
.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
|
|
17820
|
+
animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
|
|
17821
|
+
animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
|
|
17822
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
|
|
17823
|
+
}
|
|
17824
|
+
@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
|
|
17825
|
+
from {
|
|
17826
|
+
opacity: 0;
|
|
17827
|
+
}
|
|
17828
|
+
to {
|
|
17829
|
+
opacity: 1;
|
|
17830
|
+
}
|
|
17831
|
+
}
|
|
17793
17832
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
17794
17833
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
17795
17834
|
}
|
|
@@ -17805,6 +17844,21 @@ ul.pf-v6-c-list {
|
|
|
17805
17844
|
pointer-events: none;
|
|
17806
17845
|
}
|
|
17807
17846
|
|
|
17847
|
+
@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
|
|
17848
|
+
syntax: "<length>";
|
|
17849
|
+
inherits: false;
|
|
17850
|
+
initial-value: 0;
|
|
17851
|
+
}
|
|
17852
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17853
|
+
@keyframes pf-v6-c-menu-toggle-m-danger-motion {
|
|
17854
|
+
33% {
|
|
17855
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
|
|
17856
|
+
}
|
|
17857
|
+
66% {
|
|
17858
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
|
|
17859
|
+
}
|
|
17860
|
+
}
|
|
17861
|
+
}
|
|
17808
17862
|
.pf-v6-c-menu-toggle.pf-m-split-button {
|
|
17809
17863
|
--pf-v6-c-menu-toggle--Gap: 0;
|
|
17810
17864
|
--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
|
package/patternfly.css
CHANGED
|
@@ -14838,6 +14838,8 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
14838
14838
|
--pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
14839
14839
|
--pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
14840
14840
|
--pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
14841
|
+
--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
14842
|
+
--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
14841
14843
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
14842
14844
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
14843
14845
|
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
|
|
@@ -14882,6 +14884,17 @@ select ~ .pf-v6-c-form-control__utilities {
|
|
|
14882
14884
|
--pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
|
|
14883
14885
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
|
|
14884
14886
|
--pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
|
|
14887
|
+
animation-name: --pf-v6-c-helper-text-item-fade-in;
|
|
14888
|
+
animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
|
|
14889
|
+
animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
|
|
14890
|
+
}
|
|
14891
|
+
@keyframes --pf-v6-c-helper-text-item-fade-in {
|
|
14892
|
+
from {
|
|
14893
|
+
opacity: 0;
|
|
14894
|
+
}
|
|
14895
|
+
to {
|
|
14896
|
+
opacity: 1;
|
|
14897
|
+
}
|
|
14885
14898
|
}
|
|
14886
14899
|
.pf-v6-c-helper-text__item.pf-m-dynamic {
|
|
14887
14900
|
--pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
|
|
@@ -17772,12 +17785,16 @@ ul.pf-v6-c-list {
|
|
|
17772
17785
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
17773
17786
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
17774
17787
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
17788
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
|
|
17789
|
+
--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
17775
17790
|
--pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
17776
17791
|
--pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
17777
17792
|
--pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
17778
17793
|
--pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
17779
17794
|
--pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
17780
17795
|
--pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
17796
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
17797
|
+
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
17781
17798
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
17782
17799
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
|
17783
17800
|
}
|
|
@@ -17926,6 +17943,28 @@ ul.pf-v6-c-list {
|
|
|
17926
17943
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
|
|
17927
17944
|
--pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
|
|
17928
17945
|
}
|
|
17946
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
17947
|
+
.pf-v6-c-menu-toggle.pf-m-danger {
|
|
17948
|
+
transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
|
|
17949
|
+
animation-name: pf-v6-c-menu-toggle-m-danger-motion;
|
|
17950
|
+
animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
|
|
17951
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
|
|
17952
|
+
animation-fill-mode: both;
|
|
17953
|
+
}
|
|
17954
|
+
}
|
|
17955
|
+
.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
|
|
17956
|
+
animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
|
|
17957
|
+
animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
|
|
17958
|
+
animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
|
|
17959
|
+
}
|
|
17960
|
+
@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
|
|
17961
|
+
from {
|
|
17962
|
+
opacity: 0;
|
|
17963
|
+
}
|
|
17964
|
+
to {
|
|
17965
|
+
opacity: 1;
|
|
17966
|
+
}
|
|
17967
|
+
}
|
|
17929
17968
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
|
17930
17969
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
|
17931
17970
|
}
|
|
@@ -17941,6 +17980,21 @@ ul.pf-v6-c-list {
|
|
|
17941
17980
|
pointer-events: none;
|
|
17942
17981
|
}
|
|
17943
17982
|
|
|
17983
|
+
@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
|
|
17984
|
+
syntax: "<length>";
|
|
17985
|
+
inherits: false;
|
|
17986
|
+
initial-value: 0;
|
|
17987
|
+
}
|
|
17988
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
17989
|
+
@keyframes pf-v6-c-menu-toggle-m-danger-motion {
|
|
17990
|
+
33% {
|
|
17991
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
|
|
17992
|
+
}
|
|
17993
|
+
66% {
|
|
17994
|
+
--pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
|
|
17995
|
+
}
|
|
17996
|
+
}
|
|
17997
|
+
}
|
|
17944
17998
|
.pf-v6-c-menu-toggle.pf-m-split-button {
|
|
17945
17999
|
--pf-v6-c-menu-toggle--Gap: 0;
|
|
17946
18000
|
--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
|