@patternfly/patternfly 6.0.0-alpha.166 → 6.0.0-alpha.167
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/Alert/alert-group.css +54 -3
- package/components/Alert/alert-group.scss +85 -0
- package/components/Alert/alert.scss +1 -1
- package/components/_index.css +54 -3
- package/package.json +1 -1
- package/patternfly-no-globals.css +54 -3
- package/patternfly.css +54 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -47,16 +47,67 @@
|
|
|
47
47
|
border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
|
|
48
48
|
box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
|
|
51
|
+
.pf-v6-c-alert-group__item {
|
|
52
|
+
display: grid;
|
|
53
|
+
grid-template-rows: 1fr;
|
|
54
|
+
opacity: 1;
|
|
55
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
56
|
+
transform: translateX(0) translateY(0);
|
|
57
|
+
}
|
|
58
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
59
|
+
.pf-v6-c-alert-group__item {
|
|
60
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
61
|
+
}
|
|
62
|
+
.pf-v6-c-alert-group__item .pf-v6-c-alert {
|
|
63
|
+
transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top {
|
|
67
|
+
grid-template-rows: 0fr;
|
|
68
|
+
margin-block: 0;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
opacity: 0;
|
|
71
|
+
transform: translateY(-100%);
|
|
72
|
+
}
|
|
73
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
|
|
74
|
+
min-height: 0;
|
|
75
|
+
padding-block-start: 0;
|
|
76
|
+
padding-block-end: 0;
|
|
77
|
+
border-width: 0;
|
|
78
|
+
}
|
|
79
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
80
|
+
grid-template-rows: 0fr;
|
|
81
|
+
margin-block: 0;
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
opacity: 0;
|
|
84
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
|
|
85
|
+
transform: translateX(100%);
|
|
86
|
+
}
|
|
87
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
88
|
+
min-height: 0;
|
|
89
|
+
padding-block-start: 0;
|
|
90
|
+
padding-block-end: 0;
|
|
91
|
+
border-width: 0;
|
|
92
|
+
}
|
|
93
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
94
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
95
|
+
transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
96
|
+
}
|
|
97
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
98
|
+
transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
.pf-v6-c-alert-group__item:hover {
|
|
51
102
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
52
103
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
53
104
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
54
105
|
}
|
|
55
|
-
.pf-v6-c-alert-
|
|
106
|
+
.pf-v6-c-alert-group__item:focus {
|
|
56
107
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
57
108
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
58
109
|
}
|
|
59
|
-
.pf-v6-c-alert-
|
|
110
|
+
.pf-v6-c-alert-group__item:active {
|
|
60
111
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
61
112
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
62
113
|
}
|
|
@@ -59,6 +59,91 @@
|
|
|
59
59
|
border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
|
|
60
60
|
border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
|
|
61
61
|
box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.#{$alert-group}__item {
|
|
65
|
+
// Properties to be transitioned on entry/exit
|
|
66
|
+
display: grid;
|
|
67
|
+
grid-template-rows: 1fr;
|
|
68
|
+
opacity: 1;
|
|
69
|
+
|
|
70
|
+
// This transition will happen when the item is added (.pf-m-offstage-top is removed)
|
|
71
|
+
// Reduced motion by default
|
|
72
|
+
// transparency change only
|
|
73
|
+
transition:
|
|
74
|
+
opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
75
|
+
transform: translateX(0) translateY(0);
|
|
76
|
+
|
|
77
|
+
// This transition will happen when the item is added (.pf-m-offstage-top is removed)
|
|
78
|
+
// give it height, then slide it down into place
|
|
79
|
+
// These values are for regular motion
|
|
80
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
81
|
+
transition:
|
|
82
|
+
opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
|
|
83
|
+
transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
|
|
84
|
+
grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s,
|
|
85
|
+
margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
86
|
+
|
|
87
|
+
& .pf-v6-c-alert {
|
|
88
|
+
transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// This class is used BEFORE the alert item comes into the list
|
|
93
|
+
&.pf-m-offstage-top {
|
|
94
|
+
// make the item have no height and position it up above
|
|
95
|
+
grid-template-rows: 0fr;
|
|
96
|
+
margin-block: 0;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
opacity: 0;
|
|
99
|
+
transform: translateY(-100%);
|
|
100
|
+
|
|
101
|
+
& .pf-v6-c-alert {
|
|
102
|
+
// make it small when it's first created off to the top
|
|
103
|
+
min-height: 0;
|
|
104
|
+
padding-block-start: 0;
|
|
105
|
+
padding-block-end: 0;
|
|
106
|
+
border-width: 0;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Add this class before removing an alert
|
|
111
|
+
// TODO auto dismissal should be the same motion, but has a different duration
|
|
112
|
+
&.pf-m-offstage-right {
|
|
113
|
+
grid-template-rows: 0fr; // collapse vertically to bring up the items below
|
|
114
|
+
margin-block: 0;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
opacity: 0;
|
|
117
|
+
|
|
118
|
+
// This transition will happen when the item is removed
|
|
119
|
+
// Reduced motion by default
|
|
120
|
+
// transparency change only
|
|
121
|
+
transition:
|
|
122
|
+
opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
|
|
123
|
+
transform: translateX(100%);
|
|
124
|
+
|
|
125
|
+
& .pf-v6-c-alert {
|
|
126
|
+
min-height: 0;
|
|
127
|
+
padding-block-start: 0;
|
|
128
|
+
padding-block-end: 0;
|
|
129
|
+
border-width: 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// This transition will happen when the item is added (.pf-m-offstage-top is removed)
|
|
133
|
+
// give it height, then slide it down into place
|
|
134
|
+
// These values are for regular motion
|
|
135
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
136
|
+
transition:
|
|
137
|
+
transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
|
|
138
|
+
opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
|
|
139
|
+
margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short),
|
|
140
|
+
grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
141
|
+
|
|
142
|
+
& .pf-v6-c-alert {
|
|
143
|
+
transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
62
147
|
|
|
63
148
|
&:hover {
|
|
64
149
|
--#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
border: var(--#{$alert}--BorderWidth) solid var(--#{$alert}--BorderColor);
|
|
122
122
|
border-radius: var(--#{$alert}--BorderRadius);
|
|
123
123
|
box-shadow: var(--#{$alert}--BoxShadow);
|
|
124
|
-
|
|
124
|
+
|
|
125
125
|
&.pf-m-custom {
|
|
126
126
|
--#{$alert}--BorderColor: var(--#{$alert}--m-custom--BorderColor);
|
|
127
127
|
--#{$alert}__icon--Color: var(--#{$alert}--m-custom__icon--Color);
|
package/components/_index.css
CHANGED
|
@@ -631,16 +631,67 @@
|
|
|
631
631
|
border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
|
|
632
632
|
box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
|
|
633
633
|
}
|
|
634
|
-
|
|
634
|
+
|
|
635
|
+
.pf-v6-c-alert-group__item {
|
|
636
|
+
display: grid;
|
|
637
|
+
grid-template-rows: 1fr;
|
|
638
|
+
opacity: 1;
|
|
639
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
640
|
+
transform: translateX(0) translateY(0);
|
|
641
|
+
}
|
|
642
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
643
|
+
.pf-v6-c-alert-group__item {
|
|
644
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
645
|
+
}
|
|
646
|
+
.pf-v6-c-alert-group__item .pf-v6-c-alert {
|
|
647
|
+
transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top {
|
|
651
|
+
grid-template-rows: 0fr;
|
|
652
|
+
margin-block: 0;
|
|
653
|
+
overflow: hidden;
|
|
654
|
+
opacity: 0;
|
|
655
|
+
transform: translateY(-100%);
|
|
656
|
+
}
|
|
657
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
|
|
658
|
+
min-height: 0;
|
|
659
|
+
padding-block-start: 0;
|
|
660
|
+
padding-block-end: 0;
|
|
661
|
+
border-width: 0;
|
|
662
|
+
}
|
|
663
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
664
|
+
grid-template-rows: 0fr;
|
|
665
|
+
margin-block: 0;
|
|
666
|
+
overflow: hidden;
|
|
667
|
+
opacity: 0;
|
|
668
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
|
|
669
|
+
transform: translateX(100%);
|
|
670
|
+
}
|
|
671
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
672
|
+
min-height: 0;
|
|
673
|
+
padding-block-start: 0;
|
|
674
|
+
padding-block-end: 0;
|
|
675
|
+
border-width: 0;
|
|
676
|
+
}
|
|
677
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
678
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
679
|
+
transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
680
|
+
}
|
|
681
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
682
|
+
transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
.pf-v6-c-alert-group__item:hover {
|
|
635
686
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
636
687
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
637
688
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
638
689
|
}
|
|
639
|
-
.pf-v6-c-alert-
|
|
690
|
+
.pf-v6-c-alert-group__item:focus {
|
|
640
691
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
641
692
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
642
693
|
}
|
|
643
|
-
.pf-v6-c-alert-
|
|
694
|
+
.pf-v6-c-alert-group__item:active {
|
|
644
695
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
645
696
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
646
697
|
}
|
package/package.json
CHANGED
|
@@ -6669,16 +6669,67 @@
|
|
|
6669
6669
|
border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
|
|
6670
6670
|
box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
|
|
6671
6671
|
}
|
|
6672
|
-
|
|
6672
|
+
|
|
6673
|
+
.pf-v6-c-alert-group__item {
|
|
6674
|
+
display: grid;
|
|
6675
|
+
grid-template-rows: 1fr;
|
|
6676
|
+
opacity: 1;
|
|
6677
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
6678
|
+
transform: translateX(0) translateY(0);
|
|
6679
|
+
}
|
|
6680
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6681
|
+
.pf-v6-c-alert-group__item {
|
|
6682
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
6683
|
+
}
|
|
6684
|
+
.pf-v6-c-alert-group__item .pf-v6-c-alert {
|
|
6685
|
+
transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
|
|
6686
|
+
}
|
|
6687
|
+
}
|
|
6688
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top {
|
|
6689
|
+
grid-template-rows: 0fr;
|
|
6690
|
+
margin-block: 0;
|
|
6691
|
+
overflow: hidden;
|
|
6692
|
+
opacity: 0;
|
|
6693
|
+
transform: translateY(-100%);
|
|
6694
|
+
}
|
|
6695
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
|
|
6696
|
+
min-height: 0;
|
|
6697
|
+
padding-block-start: 0;
|
|
6698
|
+
padding-block-end: 0;
|
|
6699
|
+
border-width: 0;
|
|
6700
|
+
}
|
|
6701
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
6702
|
+
grid-template-rows: 0fr;
|
|
6703
|
+
margin-block: 0;
|
|
6704
|
+
overflow: hidden;
|
|
6705
|
+
opacity: 0;
|
|
6706
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
|
|
6707
|
+
transform: translateX(100%);
|
|
6708
|
+
}
|
|
6709
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
6710
|
+
min-height: 0;
|
|
6711
|
+
padding-block-start: 0;
|
|
6712
|
+
padding-block-end: 0;
|
|
6713
|
+
border-width: 0;
|
|
6714
|
+
}
|
|
6715
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6716
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
6717
|
+
transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
6718
|
+
}
|
|
6719
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
6720
|
+
transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
6721
|
+
}
|
|
6722
|
+
}
|
|
6723
|
+
.pf-v6-c-alert-group__item:hover {
|
|
6673
6724
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
6674
6725
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
6675
6726
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
6676
6727
|
}
|
|
6677
|
-
.pf-v6-c-alert-
|
|
6728
|
+
.pf-v6-c-alert-group__item:focus {
|
|
6678
6729
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
6679
6730
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
6680
6731
|
}
|
|
6681
|
-
.pf-v6-c-alert-
|
|
6732
|
+
.pf-v6-c-alert-group__item:active {
|
|
6682
6733
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
6683
6734
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
6684
6735
|
}
|
package/patternfly.css
CHANGED
|
@@ -6790,16 +6790,67 @@ button) {
|
|
|
6790
6790
|
border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
|
|
6791
6791
|
box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
|
|
6792
6792
|
}
|
|
6793
|
-
|
|
6793
|
+
|
|
6794
|
+
.pf-v6-c-alert-group__item {
|
|
6795
|
+
display: grid;
|
|
6796
|
+
grid-template-rows: 1fr;
|
|
6797
|
+
opacity: 1;
|
|
6798
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
6799
|
+
transform: translateX(0) translateY(0);
|
|
6800
|
+
}
|
|
6801
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6802
|
+
.pf-v6-c-alert-group__item {
|
|
6803
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
|
|
6804
|
+
}
|
|
6805
|
+
.pf-v6-c-alert-group__item .pf-v6-c-alert {
|
|
6806
|
+
transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
|
|
6807
|
+
}
|
|
6808
|
+
}
|
|
6809
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top {
|
|
6810
|
+
grid-template-rows: 0fr;
|
|
6811
|
+
margin-block: 0;
|
|
6812
|
+
overflow: hidden;
|
|
6813
|
+
opacity: 0;
|
|
6814
|
+
transform: translateY(-100%);
|
|
6815
|
+
}
|
|
6816
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
|
|
6817
|
+
min-height: 0;
|
|
6818
|
+
padding-block-start: 0;
|
|
6819
|
+
padding-block-end: 0;
|
|
6820
|
+
border-width: 0;
|
|
6821
|
+
}
|
|
6822
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
6823
|
+
grid-template-rows: 0fr;
|
|
6824
|
+
margin-block: 0;
|
|
6825
|
+
overflow: hidden;
|
|
6826
|
+
opacity: 0;
|
|
6827
|
+
transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
|
|
6828
|
+
transform: translateX(100%);
|
|
6829
|
+
}
|
|
6830
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
6831
|
+
min-height: 0;
|
|
6832
|
+
padding-block-start: 0;
|
|
6833
|
+
padding-block-end: 0;
|
|
6834
|
+
border-width: 0;
|
|
6835
|
+
}
|
|
6836
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6837
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
6838
|
+
transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
6839
|
+
}
|
|
6840
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
6841
|
+
transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
|
|
6842
|
+
}
|
|
6843
|
+
}
|
|
6844
|
+
.pf-v6-c-alert-group__item:hover {
|
|
6794
6845
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
6795
6846
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
6796
6847
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
6797
6848
|
}
|
|
6798
|
-
.pf-v6-c-alert-
|
|
6849
|
+
.pf-v6-c-alert-group__item:focus {
|
|
6799
6850
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
6800
6851
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
6801
6852
|
}
|
|
6802
|
-
.pf-v6-c-alert-
|
|
6853
|
+
.pf-v6-c-alert-group__item:active {
|
|
6803
6854
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
6804
6855
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
6805
6856
|
}
|