@patternfly/patternfly 6.0.0-alpha.166 → 6.0.0-alpha.168
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/Toolbar/toolbar.css +66 -792
- package/components/Toolbar/toolbar.scss +4 -14
- package/components/_index.css +120 -795
- package/package.json +5 -5
- package/patternfly-no-globals.css +120 -795
- package/patternfly.css +120 -795
- 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);
|