@patternfly/patternfly 6.3.0-prerelease.10 → 6.3.0-prerelease.12
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/Accordion/accordion.css +56 -1
- package/components/Accordion/accordion.scss +60 -4
- package/components/ExpandableSection/expandable-section.css +30 -0
- package/components/ExpandableSection/expandable-section.scss +30 -0
- package/components/_index.css +86 -1
- package/package.json +2 -2
- package/patternfly-no-globals.css +86 -1
- package/patternfly.css +86 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
--pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
13
13
|
--pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
14
14
|
--pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
15
|
+
--pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
|
|
15
16
|
--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
16
17
|
--pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
17
18
|
--pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
|
|
@@ -29,6 +30,24 @@
|
|
|
29
30
|
--pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
|
|
30
31
|
--pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
|
|
31
32
|
--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
|
|
33
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
34
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
35
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
|
|
36
|
+
--pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
37
|
+
--pf-v6-c-accordion__item--before--Opacity: 0;
|
|
38
|
+
--pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
|
|
39
|
+
--pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
|
|
40
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
|
|
41
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
42
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
|
|
43
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
44
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
|
|
45
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
|
|
46
|
+
--pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
47
|
+
--pf-v6-c-accordion__expandable-content--Opacity: 0;
|
|
48
|
+
--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
|
|
49
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: 0;
|
|
50
|
+
--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
|
|
32
51
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
33
52
|
--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
34
53
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -48,6 +67,16 @@
|
|
|
48
67
|
--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
49
68
|
--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
50
69
|
}
|
|
70
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
71
|
+
.pf-v6-c-accordion {
|
|
72
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
73
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
74
|
+
--pf-v6-c-accordion__item--before--TranslateY: -.5rem;
|
|
75
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
76
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
77
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
51
80
|
|
|
52
81
|
.pf-v6-c-accordion {
|
|
53
82
|
display: flex;
|
|
@@ -81,18 +110,39 @@
|
|
|
81
110
|
}
|
|
82
111
|
|
|
83
112
|
.pf-v6-c-accordion__item {
|
|
113
|
+
position: relative;
|
|
114
|
+
}
|
|
115
|
+
.pf-v6-c-accordion__item::before {
|
|
116
|
+
position: absolute;
|
|
117
|
+
inset: 0;
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
content: "";
|
|
120
|
+
background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
|
|
84
121
|
border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
|
|
122
|
+
opacity: var(--pf-v6-c-accordion__item--before--Opacity);
|
|
123
|
+
transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
|
|
124
|
+
transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
|
|
125
|
+
transition-property: opacity;
|
|
85
126
|
}
|
|
86
127
|
.pf-v6-c-accordion__item.pf-m-expanded {
|
|
87
128
|
--pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
|
|
88
129
|
--pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
|
|
89
|
-
|
|
130
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
|
|
131
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
|
|
132
|
+
--pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
|
|
133
|
+
--pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
|
|
134
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
|
|
135
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
|
|
136
|
+
--pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
|
|
137
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
|
|
90
138
|
}
|
|
91
139
|
.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
|
|
92
140
|
transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
|
|
93
141
|
}
|
|
94
142
|
|
|
95
143
|
.pf-v6-c-accordion__toggle {
|
|
144
|
+
position: relative;
|
|
145
|
+
z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
|
|
96
146
|
display: flex;
|
|
97
147
|
column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
|
|
98
148
|
align-items: center;
|
|
@@ -136,6 +186,11 @@
|
|
|
136
186
|
color: var(--pf-v6-c-accordion__expandable-content--Color);
|
|
137
187
|
background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
|
|
138
188
|
border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
|
|
189
|
+
opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
|
|
190
|
+
transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
|
|
191
|
+
transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
|
|
192
|
+
transition-property: opacity, translate;
|
|
193
|
+
translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
|
|
139
194
|
}
|
|
140
195
|
.pf-v6-c-accordion__expandable-content.pf-m-fixed {
|
|
141
196
|
max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
// accordion item
|
|
9
9
|
--#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
|
|
10
|
-
--#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
10
|
+
--#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); // TODO - remove "m-expanded" in breaking change
|
|
11
11
|
|
|
12
12
|
// accordion toggle
|
|
13
13
|
--#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
20
20
|
--#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
21
21
|
--#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
22
|
+
--#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
|
|
22
23
|
|
|
23
24
|
// Accordion toggle toggle-start modifier
|
|
24
25
|
// This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
|
|
@@ -46,6 +47,35 @@
|
|
|
46
47
|
--#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
|
|
47
48
|
--#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
|
|
48
49
|
|
|
50
|
+
// expand animation
|
|
51
|
+
--#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
52
|
+
--#{$accordion}__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
53
|
+
--#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--collapse--fade);
|
|
54
|
+
--#{$accordion}__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
55
|
+
--#{$accordion}__item--before--Opacity: 0;
|
|
56
|
+
--#{$accordion}__item--m-expanded--before--Opacity: 1;
|
|
57
|
+
--#{$accordion}__item--m-expanded--before--TranslateY: 0;
|
|
58
|
+
--#{$accordion}__expandable-content--TransitionDuration--collapse--slide: 0s;
|
|
59
|
+
--#{$accordion}__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
60
|
+
--#{$accordion}__expandable-content--TransitionDuration--expand--slide: 0s;
|
|
61
|
+
--#{$accordion}__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
62
|
+
--#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--slide);
|
|
63
|
+
--#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--collapse--fade);
|
|
64
|
+
--#{$accordion}__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
65
|
+
--#{$accordion}__expandable-content--Opacity: 0;
|
|
66
|
+
--#{$accordion}__item--m-expanded__expandable-content--Opacity: 1;
|
|
67
|
+
--#{$accordion}__expandable-content--TranslateY: 0;
|
|
68
|
+
--#{$accordion}__item--m-expanded__expandable-content--TranslateY: 0;
|
|
69
|
+
|
|
70
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
71
|
+
--#{$accordion}__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
72
|
+
--#{$accordion}__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
73
|
+
--#{$accordion}__item--before--TranslateY: -.5rem; // TODO - replace with token
|
|
74
|
+
--#{$accordion}__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
75
|
+
--#{$accordion}__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
76
|
+
--#{$accordion}__expandable-content--TranslateY: -.5rem; // TODO - replace with token
|
|
77
|
+
}
|
|
78
|
+
|
|
49
79
|
// accordion expandable content body
|
|
50
80
|
--#{$accordion}__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
51
81
|
--#{$accordion}__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -107,13 +137,32 @@
|
|
|
107
137
|
}
|
|
108
138
|
|
|
109
139
|
.#{$accordion}__item {
|
|
110
|
-
|
|
140
|
+
position: relative;
|
|
141
|
+
|
|
142
|
+
&::before {
|
|
143
|
+
position: absolute;
|
|
144
|
+
inset: 0;
|
|
145
|
+
pointer-events: none;
|
|
146
|
+
content: "";
|
|
147
|
+
background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
|
|
148
|
+
border-radius: var(--#{$accordion}__item--BorderRadius);
|
|
149
|
+
opacity: var(--#{$accordion}__item--before--Opacity);
|
|
150
|
+
transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction);
|
|
151
|
+
transition-duration: var(--#{$accordion}__item--before--TransitionDuration--fade);
|
|
152
|
+
transition-property: opacity;
|
|
153
|
+
}
|
|
111
154
|
|
|
112
155
|
&.pf-m-expanded {
|
|
113
156
|
--#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
|
|
114
157
|
--#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
|
|
115
|
-
|
|
116
|
-
|
|
158
|
+
--#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
|
|
159
|
+
--#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
|
|
160
|
+
--#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
|
|
161
|
+
--#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY);
|
|
162
|
+
--#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide);
|
|
163
|
+
--#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
|
|
164
|
+
--#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
|
|
165
|
+
--#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
|
|
117
166
|
|
|
118
167
|
.#{$accordion}__toggle-icon {
|
|
119
168
|
transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
|
|
@@ -122,6 +171,8 @@
|
|
|
122
171
|
}
|
|
123
172
|
|
|
124
173
|
.#{$accordion}__toggle {
|
|
174
|
+
position: relative;
|
|
175
|
+
z-index: var(--#{$accordion}__toggle--ZIndex);
|
|
125
176
|
display: flex;
|
|
126
177
|
column-gap: var(--#{$accordion}__toggle--ColumnGap);
|
|
127
178
|
align-items: center;
|
|
@@ -164,6 +215,11 @@
|
|
|
164
215
|
color: var(--#{$accordion}__expandable-content--Color);
|
|
165
216
|
background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
|
|
166
217
|
border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
|
|
218
|
+
opacity: var(--#{$accordion}__expandable-content--Opacity);
|
|
219
|
+
transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
|
|
220
|
+
transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide);
|
|
221
|
+
transition-property: opacity, translate;
|
|
222
|
+
translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
|
|
167
223
|
|
|
168
224
|
&.pf-m-fixed {
|
|
169
225
|
max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
|
|
@@ -9,6 +9,17 @@
|
|
|
9
9
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
|
|
10
10
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
|
|
11
11
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
|
|
12
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
|
|
13
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
14
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
|
|
15
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
16
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
|
|
17
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
|
|
18
|
+
--pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
19
|
+
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
20
|
+
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
21
|
+
--pf-v6-c-expandable-section__content--TranslateY: 0;
|
|
22
|
+
--pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
|
|
12
23
|
--pf-v6-c-expandable-section__content--MaxWidth: auto;
|
|
13
24
|
--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
|
|
14
25
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -20,10 +31,18 @@
|
|
|
20
31
|
--pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
21
32
|
--pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
|
|
22
33
|
--pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
34
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
|
|
23
35
|
--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
|
|
24
36
|
--pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
|
|
25
37
|
--pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
|
|
26
38
|
}
|
|
39
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
40
|
+
.pf-v6-c-expandable-section {
|
|
41
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
42
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
43
|
+
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
27
46
|
|
|
28
47
|
.pf-v6-c-expandable-section {
|
|
29
48
|
display: flex;
|
|
@@ -34,6 +53,11 @@
|
|
|
34
53
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
|
|
35
54
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
|
|
36
55
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
|
|
56
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
|
|
57
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
|
|
58
|
+
--pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
|
|
59
|
+
--pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
|
|
60
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
|
|
37
61
|
}
|
|
38
62
|
.pf-v6-c-expandable-section.pf-m-limit-width {
|
|
39
63
|
--pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
|
|
@@ -46,6 +70,7 @@
|
|
|
46
70
|
background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
|
|
47
71
|
border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
|
|
48
72
|
border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
|
|
73
|
+
transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
|
|
49
74
|
}
|
|
50
75
|
.pf-v6-c-expandable-section.pf-m-indented {
|
|
51
76
|
--pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
|
|
@@ -79,4 +104,9 @@
|
|
|
79
104
|
max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
|
|
80
105
|
padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
|
|
81
106
|
padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
|
|
107
|
+
opacity: var(--pf-v6-c-expandable-section__content--Opacity);
|
|
108
|
+
transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
|
|
109
|
+
transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
|
|
110
|
+
transition-property: opacity, translate;
|
|
111
|
+
translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
|
|
82
112
|
}
|
|
@@ -13,6 +13,23 @@
|
|
|
13
13
|
--#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
|
|
14
14
|
--#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
|
|
15
15
|
--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
|
|
16
|
+
--#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
|
|
17
|
+
--#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
18
|
+
--#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
|
|
19
|
+
--#{$expandable-section}__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
20
|
+
--#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
|
|
21
|
+
--#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
|
|
22
|
+
--#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
23
|
+
--#{$expandable-section}__content--Opacity: 0;
|
|
24
|
+
--#{$expandable-section}--m-expanded__content--Opacity: 1;
|
|
25
|
+
--#{$expandable-section}__content--TranslateY: 0;
|
|
26
|
+
--#{$expandable-section}--m-expanded__content--TranslateY: 0;
|
|
27
|
+
|
|
28
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
29
|
+
--#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
30
|
+
--#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
31
|
+
--#{$expandable-section}__content--TranslateY: -.5rem;
|
|
32
|
+
}
|
|
16
33
|
|
|
17
34
|
// Content
|
|
18
35
|
--#{$expandable-section}__content--MaxWidth: auto;
|
|
@@ -30,6 +47,8 @@
|
|
|
30
47
|
--#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
31
48
|
--#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
|
|
32
49
|
--#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
50
|
+
--#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--fade);
|
|
51
|
+
|
|
33
52
|
|
|
34
53
|
// Indented
|
|
35
54
|
--#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
|
|
@@ -48,6 +67,11 @@
|
|
|
48
67
|
--#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
|
|
49
68
|
--#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
|
|
50
69
|
--#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
|
|
70
|
+
--#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--expand--slide);
|
|
71
|
+
--#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
|
|
72
|
+
--#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
|
|
73
|
+
--#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
|
|
74
|
+
--#{$expandable-section}--m-display-lg--TransitionDelay: 0s;
|
|
51
75
|
}
|
|
52
76
|
|
|
53
77
|
&.pf-m-limit-width {
|
|
@@ -62,6 +86,7 @@
|
|
|
62
86
|
background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
|
|
63
87
|
border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
|
|
64
88
|
border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
|
|
89
|
+
transition: padding-block-end 0s var(--#{$expandable-section}--m-display-lg--TransitionDelay, 0s);
|
|
65
90
|
}
|
|
66
91
|
|
|
67
92
|
&.pf-m-indented {
|
|
@@ -99,4 +124,9 @@
|
|
|
99
124
|
max-width: var(--#{$expandable-section}__content--MaxWidth);
|
|
100
125
|
padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
|
|
101
126
|
padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
|
|
127
|
+
opacity: var(--#{$expandable-section}__content--Opacity);
|
|
128
|
+
transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
|
|
129
|
+
transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide);
|
|
130
|
+
transition-property: opacity, translate;
|
|
131
|
+
translate: 0 var(--#{$expandable-section}__content--TranslateY);
|
|
102
132
|
}
|
package/components/_index.css
CHANGED
|
@@ -205,6 +205,7 @@
|
|
|
205
205
|
--pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
206
206
|
--pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
207
207
|
--pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
208
|
+
--pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
|
|
208
209
|
--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
209
210
|
--pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
|
|
210
211
|
--pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
|
|
@@ -222,6 +223,24 @@
|
|
|
222
223
|
--pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
|
|
223
224
|
--pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
|
|
224
225
|
--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
|
|
226
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
227
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
228
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
|
|
229
|
+
--pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
230
|
+
--pf-v6-c-accordion__item--before--Opacity: 0;
|
|
231
|
+
--pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
|
|
232
|
+
--pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
|
|
233
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
|
|
234
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
235
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
|
|
236
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
237
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
|
|
238
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
|
|
239
|
+
--pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
240
|
+
--pf-v6-c-accordion__expandable-content--Opacity: 0;
|
|
241
|
+
--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
|
|
242
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: 0;
|
|
243
|
+
--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
|
|
225
244
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
226
245
|
--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
227
246
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -241,6 +260,16 @@
|
|
|
241
260
|
--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
242
261
|
--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
243
262
|
}
|
|
263
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
264
|
+
.pf-v6-c-accordion {
|
|
265
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
266
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
267
|
+
--pf-v6-c-accordion__item--before--TranslateY: -.5rem;
|
|
268
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
269
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
270
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
244
273
|
|
|
245
274
|
.pf-v6-c-accordion {
|
|
246
275
|
display: flex;
|
|
@@ -274,18 +303,39 @@
|
|
|
274
303
|
}
|
|
275
304
|
|
|
276
305
|
.pf-v6-c-accordion__item {
|
|
306
|
+
position: relative;
|
|
307
|
+
}
|
|
308
|
+
.pf-v6-c-accordion__item::before {
|
|
309
|
+
position: absolute;
|
|
310
|
+
inset: 0;
|
|
311
|
+
pointer-events: none;
|
|
312
|
+
content: "";
|
|
313
|
+
background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
|
|
277
314
|
border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
|
|
315
|
+
opacity: var(--pf-v6-c-accordion__item--before--Opacity);
|
|
316
|
+
transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
|
|
317
|
+
transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
|
|
318
|
+
transition-property: opacity;
|
|
278
319
|
}
|
|
279
320
|
.pf-v6-c-accordion__item.pf-m-expanded {
|
|
280
321
|
--pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
|
|
281
322
|
--pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
|
|
282
|
-
|
|
323
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
|
|
324
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
|
|
325
|
+
--pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
|
|
326
|
+
--pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
|
|
327
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
|
|
328
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
|
|
329
|
+
--pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
|
|
330
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
|
|
283
331
|
}
|
|
284
332
|
.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
|
|
285
333
|
transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
|
|
286
334
|
}
|
|
287
335
|
|
|
288
336
|
.pf-v6-c-accordion__toggle {
|
|
337
|
+
position: relative;
|
|
338
|
+
z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
|
|
289
339
|
display: flex;
|
|
290
340
|
column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
|
|
291
341
|
align-items: center;
|
|
@@ -329,6 +379,11 @@
|
|
|
329
379
|
color: var(--pf-v6-c-accordion__expandable-content--Color);
|
|
330
380
|
background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
|
|
331
381
|
border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
|
|
382
|
+
opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
|
|
383
|
+
transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
|
|
384
|
+
transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
|
|
385
|
+
transition-property: opacity, translate;
|
|
386
|
+
translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
|
|
332
387
|
}
|
|
333
388
|
.pf-v6-c-accordion__expandable-content.pf-m-fixed {
|
|
334
389
|
max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
|
|
@@ -6318,6 +6373,17 @@ ul) {
|
|
|
6318
6373
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
|
|
6319
6374
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
|
|
6320
6375
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
|
|
6376
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
|
|
6377
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
6378
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
|
|
6379
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
6380
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
|
|
6381
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
|
|
6382
|
+
--pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
6383
|
+
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
6384
|
+
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
6385
|
+
--pf-v6-c-expandable-section__content--TranslateY: 0;
|
|
6386
|
+
--pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
|
|
6321
6387
|
--pf-v6-c-expandable-section__content--MaxWidth: auto;
|
|
6322
6388
|
--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
|
|
6323
6389
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -6329,10 +6395,18 @@ ul) {
|
|
|
6329
6395
|
--pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
6330
6396
|
--pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
|
|
6331
6397
|
--pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
6398
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
|
|
6332
6399
|
--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
|
|
6333
6400
|
--pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
|
|
6334
6401
|
--pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
|
|
6335
6402
|
}
|
|
6403
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6404
|
+
.pf-v6-c-expandable-section {
|
|
6405
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
6406
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
6407
|
+
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
6408
|
+
}
|
|
6409
|
+
}
|
|
6336
6410
|
|
|
6337
6411
|
.pf-v6-c-expandable-section {
|
|
6338
6412
|
display: flex;
|
|
@@ -6343,6 +6417,11 @@ ul) {
|
|
|
6343
6417
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
|
|
6344
6418
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
|
|
6345
6419
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
|
|
6420
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
|
|
6421
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
|
|
6422
|
+
--pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
|
|
6423
|
+
--pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
|
|
6424
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
|
|
6346
6425
|
}
|
|
6347
6426
|
.pf-v6-c-expandable-section.pf-m-limit-width {
|
|
6348
6427
|
--pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
|
|
@@ -6355,6 +6434,7 @@ ul) {
|
|
|
6355
6434
|
background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
|
|
6356
6435
|
border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
|
|
6357
6436
|
border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
|
|
6437
|
+
transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
|
|
6358
6438
|
}
|
|
6359
6439
|
.pf-v6-c-expandable-section.pf-m-indented {
|
|
6360
6440
|
--pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
|
|
@@ -6388,6 +6468,11 @@ ul) {
|
|
|
6388
6468
|
max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
|
|
6389
6469
|
padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
|
|
6390
6470
|
padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
|
|
6471
|
+
opacity: var(--pf-v6-c-expandable-section__content--Opacity);
|
|
6472
|
+
transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
|
|
6473
|
+
transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
|
|
6474
|
+
transition-property: opacity, translate;
|
|
6475
|
+
translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
|
|
6391
6476
|
}
|
|
6392
6477
|
|
|
6393
6478
|
.pf-v6-c-file-upload {
|
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.12",
|
|
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.1",
|
|
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",
|