@patternfly/patternfly 6.3.0-prerelease.26 → 6.3.0-prerelease.27
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/patternfly-common.css +35 -0
- package/base/patternfly-common.scss +46 -1
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/Progress/progress.css +16 -0
- package/components/Progress/progress.scss +11 -1
- package/components/TextInputGroup/text-input-group.css +16 -0
- package/components/TextInputGroup/text-input-group.scss +8 -0
- package/components/_index.css +48 -0
- package/package.json +2 -2
- package/patternfly-base-no-globals.css +34 -0
- package/patternfly-base.css +34 -0
- package/patternfly-no-globals.css +82 -0
- package/patternfly.css +82 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +19 -0
|
@@ -55,4 +55,39 @@
|
|
|
55
55
|
--pf-t--global--duration--200: 1ms !important;
|
|
56
56
|
--pf-t--global--duration--100: 1ms !important;
|
|
57
57
|
--pf-t--global--duration--50: 1ms !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:root {
|
|
61
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
62
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
66
|
+
syntax: "<length>";
|
|
67
|
+
inherits: false;
|
|
68
|
+
initial-value: 0;
|
|
69
|
+
}
|
|
70
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
71
|
+
33% {
|
|
72
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
73
|
+
}
|
|
74
|
+
66% {
|
|
75
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@keyframes pf-v6-global-fade-in {
|
|
79
|
+
from {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
}
|
|
82
|
+
to {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
@keyframes pf-v6-global-fade-out {
|
|
87
|
+
from {
|
|
88
|
+
opacity: 1;
|
|
89
|
+
}
|
|
90
|
+
to {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
}
|
|
58
93
|
}
|
|
@@ -66,4 +66,49 @@
|
|
|
66
66
|
--pf-t--global--duration--50: 1ms !important;
|
|
67
67
|
|
|
68
68
|
// stylelink-enable declaration-no-important
|
|
69
|
-
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:root {
|
|
72
|
+
--#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
73
|
+
--#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Register the property type for the custom property to be animatable
|
|
77
|
+
@property --#{$pf-global}--danger-jiggle--TranslateX {
|
|
78
|
+
syntax: "<length>";
|
|
79
|
+
inherits: false;
|
|
80
|
+
initial-value: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Animate danger jiggle
|
|
84
|
+
@keyframes #{$pf-global}-danger-jiggle-motion {
|
|
85
|
+
33% {
|
|
86
|
+
--#{$pf-global}--danger-jiggle--TranslateX: -2px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
66% {
|
|
90
|
+
--#{$pf-global}--danger-jiggle--TranslateX: 3px;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Animate fade-in
|
|
95
|
+
@keyframes #{$pf-global}-fade-in {
|
|
96
|
+
from {
|
|
97
|
+
opacity: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
to {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Animate fade-out
|
|
106
|
+
@keyframes #{$pf-global}-fade-out {
|
|
107
|
+
from {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
to {
|
|
112
|
+
opacity: 0;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -226,6 +226,22 @@
|
|
|
226
226
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
227
227
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
228
228
|
}
|
|
229
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
230
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
231
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
232
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
233
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
234
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
235
|
+
animation-fill-mode: both;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
239
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
240
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
241
|
+
animation-name: pf-v6-global-fade-in;
|
|
242
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
243
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
244
|
+
}
|
|
229
245
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
230
246
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
231
247
|
}
|
|
@@ -290,6 +290,14 @@
|
|
|
290
290
|
--#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
|
|
291
291
|
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
|
|
292
292
|
|
|
293
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
294
|
+
@include pf-v6-animate-danger-jiggle;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.#{$form-control}__icon.pf-m-status {
|
|
298
|
+
@include pf-v6-fade-default(#{$form-control});
|
|
299
|
+
}
|
|
300
|
+
|
|
293
301
|
> textarea {
|
|
294
302
|
padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__textarea--m-error--PaddingInlineEnd));
|
|
295
303
|
}
|
|
@@ -438,6 +446,7 @@
|
|
|
438
446
|
|
|
439
447
|
&.pf-m-status {
|
|
440
448
|
--#{$form-control}__icon--Color: var(--#{$form-control}__icon--m-status--Color);
|
|
449
|
+
|
|
441
450
|
}
|
|
442
451
|
}
|
|
443
452
|
|
|
@@ -106,6 +106,22 @@
|
|
|
106
106
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
107
107
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
108
108
|
}
|
|
109
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
110
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
111
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
112
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
113
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
114
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
115
|
+
animation-fill-mode: both;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
119
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
120
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
121
|
+
animation-name: pf-v6-global-fade-in;
|
|
122
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
123
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
124
|
+
}
|
|
109
125
|
|
|
110
126
|
.pf-v6-c-progress__description {
|
|
111
127
|
grid-column: 1/2;
|
|
@@ -140,6 +140,16 @@
|
|
|
140
140
|
--#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
|
|
141
141
|
--#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
|
|
142
142
|
--#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
|
|
143
|
+
|
|
144
|
+
.#{$progress}__bar {
|
|
145
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
146
|
+
@include pf-v6-animate-danger-jiggle;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.#{$progress}__status-icon {
|
|
151
|
+
@include pf-v6-fade-default(#{$progress});
|
|
152
|
+
}
|
|
143
153
|
}
|
|
144
154
|
}
|
|
145
155
|
|
|
@@ -209,4 +219,4 @@
|
|
|
209
219
|
|
|
210
220
|
.#{$progress}__measure {
|
|
211
221
|
font-variant-numeric: tabular-nums;
|
|
212
|
-
}
|
|
222
|
+
}
|
|
@@ -103,6 +103,22 @@
|
|
|
103
103
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
104
104
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
105
105
|
}
|
|
106
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
107
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
108
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
109
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
110
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
111
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
112
|
+
animation-fill-mode: both;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
116
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
117
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
118
|
+
animation-name: pf-v6-global-fade-in;
|
|
119
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
120
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
121
|
+
}
|
|
106
122
|
.pf-v6-c-text-input-group:hover {
|
|
107
123
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
108
124
|
}
|
|
@@ -128,6 +128,14 @@
|
|
|
128
128
|
--#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-error--BorderColor);
|
|
129
129
|
--#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-error--BorderColor);
|
|
130
130
|
--#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-error__icon--m-status--Color);
|
|
131
|
+
|
|
132
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
133
|
+
@include pf-v6-animate-danger-jiggle;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.#{$text-input-group}__icon.pf-m-status {
|
|
137
|
+
@include pf-v6-fade-default(#{$text-input-group});
|
|
138
|
+
}
|
|
131
139
|
}
|
|
132
140
|
|
|
133
141
|
&:hover {
|
package/components/_index.css
CHANGED
|
@@ -7505,6 +7505,22 @@ ul) {
|
|
|
7505
7505
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
7506
7506
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
7507
7507
|
}
|
|
7508
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
7509
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
7510
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
7511
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
7512
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
7513
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
7514
|
+
animation-fill-mode: both;
|
|
7515
|
+
}
|
|
7516
|
+
}
|
|
7517
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
7518
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
7519
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
7520
|
+
animation-name: pf-v6-global-fade-in;
|
|
7521
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
7522
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
7523
|
+
}
|
|
7508
7524
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
7509
7525
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
7510
7526
|
}
|
|
@@ -13621,6 +13637,22 @@ ul.pf-v6-c-list {
|
|
|
13621
13637
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
13622
13638
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
13623
13639
|
}
|
|
13640
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
13641
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
13642
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
13643
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
13644
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
13645
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
13646
|
+
animation-fill-mode: both;
|
|
13647
|
+
}
|
|
13648
|
+
}
|
|
13649
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
13650
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
13651
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
13652
|
+
animation-name: pf-v6-global-fade-in;
|
|
13653
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
13654
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
13655
|
+
}
|
|
13624
13656
|
|
|
13625
13657
|
.pf-v6-c-progress__description {
|
|
13626
13658
|
grid-column: 1/2;
|
|
@@ -19840,6 +19872,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
19840
19872
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
19841
19873
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
19842
19874
|
}
|
|
19875
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
19876
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
19877
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
19878
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
19879
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
19880
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
19881
|
+
animation-fill-mode: both;
|
|
19882
|
+
}
|
|
19883
|
+
}
|
|
19884
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
19885
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
19886
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
19887
|
+
animation-name: pf-v6-global-fade-in;
|
|
19888
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
19889
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
19890
|
+
}
|
|
19843
19891
|
.pf-v6-c-text-input-group:hover {
|
|
19844
19892
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
19845
19893
|
}
|
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": "6.3.0-prerelease.
|
|
4
|
+
"version": "6.3.0-prerelease.27",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@commitlint/config-conventional": "^19.1.0",
|
|
48
48
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
49
49
|
"@octokit/rest": "^20.1.0",
|
|
50
|
-
"@patternfly/documentation-framework": "6.10.
|
|
50
|
+
"@patternfly/documentation-framework": "6.10.24",
|
|
51
51
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
52
52
|
"@patternfly/react-code-editor": "6.2.2",
|
|
53
53
|
"@patternfly/react-core": "6.2.2",
|
|
@@ -57,6 +57,40 @@
|
|
|
57
57
|
--pf-t--global--duration--50: 1ms !important;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
:root {
|
|
61
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
62
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
66
|
+
syntax: "<length>";
|
|
67
|
+
inherits: false;
|
|
68
|
+
initial-value: 0;
|
|
69
|
+
}
|
|
70
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
71
|
+
33% {
|
|
72
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
73
|
+
}
|
|
74
|
+
66% {
|
|
75
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@keyframes pf-v6-global-fade-in {
|
|
79
|
+
from {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
}
|
|
82
|
+
to {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
@keyframes pf-v6-global-fade-out {
|
|
87
|
+
from {
|
|
88
|
+
opacity: 1;
|
|
89
|
+
}
|
|
90
|
+
to {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
60
94
|
@font-face {
|
|
61
95
|
font-family: "Red Hat Text";
|
|
62
96
|
font-style: normal;
|
package/patternfly-base.css
CHANGED
|
@@ -193,6 +193,40 @@ button) {
|
|
|
193
193
|
--pf-t--global--duration--50: 1ms !important;
|
|
194
194
|
}
|
|
195
195
|
|
|
196
|
+
:root {
|
|
197
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
198
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
202
|
+
syntax: "<length>";
|
|
203
|
+
inherits: false;
|
|
204
|
+
initial-value: 0;
|
|
205
|
+
}
|
|
206
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
207
|
+
33% {
|
|
208
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
209
|
+
}
|
|
210
|
+
66% {
|
|
211
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
@keyframes pf-v6-global-fade-in {
|
|
215
|
+
from {
|
|
216
|
+
opacity: 0;
|
|
217
|
+
}
|
|
218
|
+
to {
|
|
219
|
+
opacity: 1;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
@keyframes pf-v6-global-fade-out {
|
|
223
|
+
from {
|
|
224
|
+
opacity: 1;
|
|
225
|
+
}
|
|
226
|
+
to {
|
|
227
|
+
opacity: 0;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
196
230
|
@font-face {
|
|
197
231
|
font-family: "Red Hat Text";
|
|
198
232
|
font-style: normal;
|
|
@@ -58,6 +58,40 @@
|
|
|
58
58
|
--pf-t--global--duration--50: 1ms !important;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
+
:root {
|
|
62
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
63
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
67
|
+
syntax: "<length>";
|
|
68
|
+
inherits: false;
|
|
69
|
+
initial-value: 0;
|
|
70
|
+
}
|
|
71
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
72
|
+
33% {
|
|
73
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
74
|
+
}
|
|
75
|
+
66% {
|
|
76
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
@keyframes pf-v6-global-fade-in {
|
|
80
|
+
from {
|
|
81
|
+
opacity: 0;
|
|
82
|
+
}
|
|
83
|
+
to {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
@keyframes pf-v6-global-fade-out {
|
|
88
|
+
from {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
}
|
|
91
|
+
to {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
61
95
|
@font-face {
|
|
62
96
|
font-family: "Red Hat Text";
|
|
63
97
|
font-style: normal;
|
|
@@ -14967,6 +15001,22 @@ ul) {
|
|
|
14967
15001
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
14968
15002
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
14969
15003
|
}
|
|
15004
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15005
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
15006
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
15007
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
15008
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
15009
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
15010
|
+
animation-fill-mode: both;
|
|
15011
|
+
}
|
|
15012
|
+
}
|
|
15013
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
15014
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
15015
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
15016
|
+
animation-name: pf-v6-global-fade-in;
|
|
15017
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
15018
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
15019
|
+
}
|
|
14970
15020
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
14971
15021
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
14972
15022
|
}
|
|
@@ -21083,6 +21133,22 @@ ul.pf-v6-c-list {
|
|
|
21083
21133
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
21084
21134
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
21085
21135
|
}
|
|
21136
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
21137
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
21138
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
21139
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
21140
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
21141
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
21142
|
+
animation-fill-mode: both;
|
|
21143
|
+
}
|
|
21144
|
+
}
|
|
21145
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
21146
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
21147
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
21148
|
+
animation-name: pf-v6-global-fade-in;
|
|
21149
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
21150
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
21151
|
+
}
|
|
21086
21152
|
|
|
21087
21153
|
.pf-v6-c-progress__description {
|
|
21088
21154
|
grid-column: 1/2;
|
|
@@ -27302,6 +27368,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
27302
27368
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
27303
27369
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
27304
27370
|
}
|
|
27371
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
27372
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
27373
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
27374
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
27375
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
27376
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
27377
|
+
animation-fill-mode: both;
|
|
27378
|
+
}
|
|
27379
|
+
}
|
|
27380
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
27381
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
27382
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
27383
|
+
animation-name: pf-v6-global-fade-in;
|
|
27384
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
27385
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
27386
|
+
}
|
|
27305
27387
|
.pf-v6-c-text-input-group:hover {
|
|
27306
27388
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
27307
27389
|
}
|
package/patternfly.css
CHANGED
|
@@ -194,6 +194,40 @@ button) {
|
|
|
194
194
|
--pf-t--global--duration--50: 1ms !important;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
+
:root {
|
|
198
|
+
--pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
|
|
199
|
+
--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@property --pf-v6-global--danger-jiggle--TranslateX {
|
|
203
|
+
syntax: "<length>";
|
|
204
|
+
inherits: false;
|
|
205
|
+
initial-value: 0;
|
|
206
|
+
}
|
|
207
|
+
@keyframes pf-v6-global-danger-jiggle-motion {
|
|
208
|
+
33% {
|
|
209
|
+
--pf-v6-global--danger-jiggle--TranslateX: -2px;
|
|
210
|
+
}
|
|
211
|
+
66% {
|
|
212
|
+
--pf-v6-global--danger-jiggle--TranslateX: 3px;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
@keyframes pf-v6-global-fade-in {
|
|
216
|
+
from {
|
|
217
|
+
opacity: 0;
|
|
218
|
+
}
|
|
219
|
+
to {
|
|
220
|
+
opacity: 1;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
@keyframes pf-v6-global-fade-out {
|
|
224
|
+
from {
|
|
225
|
+
opacity: 1;
|
|
226
|
+
}
|
|
227
|
+
to {
|
|
228
|
+
opacity: 0;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
197
231
|
@font-face {
|
|
198
232
|
font-family: "Red Hat Text";
|
|
199
233
|
font-style: normal;
|
|
@@ -15103,6 +15137,22 @@ ul) {
|
|
|
15103
15137
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
15104
15138
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
15105
15139
|
}
|
|
15140
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
15141
|
+
.pf-v6-c-form-control.pf-m-error {
|
|
15142
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
15143
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
15144
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
15145
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
15146
|
+
animation-fill-mode: both;
|
|
15147
|
+
}
|
|
15148
|
+
}
|
|
15149
|
+
.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
|
|
15150
|
+
--pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
15151
|
+
--pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
15152
|
+
animation-name: pf-v6-global-fade-in;
|
|
15153
|
+
animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
|
|
15154
|
+
animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
|
|
15155
|
+
}
|
|
15106
15156
|
.pf-v6-c-form-control.pf-m-error > textarea {
|
|
15107
15157
|
padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
|
|
15108
15158
|
}
|
|
@@ -21219,6 +21269,22 @@ ul.pf-v6-c-list {
|
|
|
21219
21269
|
--pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
|
|
21220
21270
|
--pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
|
|
21221
21271
|
}
|
|
21272
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
21273
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
|
|
21274
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
21275
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
21276
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
21277
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
21278
|
+
animation-fill-mode: both;
|
|
21279
|
+
}
|
|
21280
|
+
}
|
|
21281
|
+
.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
|
|
21282
|
+
--pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
21283
|
+
--pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
21284
|
+
animation-name: pf-v6-global-fade-in;
|
|
21285
|
+
animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
|
|
21286
|
+
animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
|
|
21287
|
+
}
|
|
21222
21288
|
|
|
21223
21289
|
.pf-v6-c-progress__description {
|
|
21224
21290
|
grid-column: 1/2;
|
|
@@ -27438,6 +27504,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
27438
27504
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
27439
27505
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
27440
27506
|
}
|
|
27507
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
27508
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
27509
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
|
27510
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
|
27511
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
|
27512
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
|
27513
|
+
animation-fill-mode: both;
|
|
27514
|
+
}
|
|
27515
|
+
}
|
|
27516
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
|
27517
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
|
27518
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
|
27519
|
+
animation-name: pf-v6-global-fade-in;
|
|
27520
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
|
27521
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
|
27522
|
+
}
|
|
27441
27523
|
.pf-v6-c-text-input-group:hover {
|
|
27442
27524
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
27443
27525
|
}
|