1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
@use '../../sass-utilities' as *;
@include pf-root($expandable-section) {
--#{$expandable-section}--Gap: var(--pf-t--global--spacer--sm);
// Toggle icon
--#{$expandable-section}__toggle-icon--MinWidth: 1em;
--#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
--#{$expandable-section}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
--#{$expandable-section}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
--#{$expandable-section}__toggle-icon--Transition: transform var(--#{$expandable-section}__toggle-icon--TransitionDuration) var(--#{$expandable-section}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
--#{$expandable-section}__toggle-icon--Rotate: 0;
--#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
--#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
--#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
--#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
--#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
--#{$expandable-section}__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
--#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
--#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
--#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
--#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
--#{$expandable-section}__content--Opacity: 0;
--#{$expandable-section}__content--TranslateY: 0;
--#{$expandable-section}__content--PaddingInlineStart: 0;
--#{$expandable-section}--m-expand-top__content--TranslateY: 0;
--#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
--#{$expandable-section}--m-expanded__content--Opacity: 1;
--#{$expandable-section}--m-expanded__content--TranslateY: 0;
@media screen and (prefers-reduced-motion: no-preference) {
--#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
--#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
--#{$expandable-section}__content--TranslateY: -.5rem;
--#{$expandable-section}--m-expand-top__content--TranslateY: .5rem;
--#{$expandable-section}--m-expand-bottom__content--TranslateY: -.5rem;
}
// Content
--#{$expandable-section}__content--MaxWidth: auto;
// Limit Width
--#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
// Large / Disclosure
--#{$expandable-section}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--#{$expandable-section}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--md);
--#{$expandable-section}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
--#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
--#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
--#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
--#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
--#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
// Indented
--#{$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));
// Truncate
--#{$expandable-section}--m-truncate__content--LineClamp: 3;
--#{$expandable-section}--m-truncate--Gap: var(--pf-t--global--spacer--xs);
}
.#{$expandable-section} {
display: flex;
flex-direction: column;
gap: 0;
transition-delay: var(--#{$expandable-section}__content--TransitionDelay--hide);
transition-duration: 0s;
transition-property: gap, padding-block-end;
&.pf-m-expanded {
--#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
--#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
--#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
--#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--expand--slide);
--#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
--#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
--#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
--#{$expandable-section}__content--Visibility: auto;
--#{$expandable-section}__content--Overflow: visible;
--#{$expandable-section}__content--MaxHeight: 99999px;
--#{$expandable-section}__content--TransitionDelay--hide: 0s;
gap: var(--pf-v6-c-expandable-section--Gap);
}
&.pf-m-expand-top {
--#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
}
// The following selector is for ensuring we target only detached expandable section contents without introducing a breaking change
// (since typically both toggle and content would both be in the expandable section wrapper)
// In a breaking change we could update this to utilize the pf-m-detached class
&:has(.#{$expandable-section}__content:only-child) {
&:not(.pf-m-expand-top, .pf-m-expand-bottom) {
--#{$expandable-section}__content--TranslateY: 0;
--#{$expandable-section}__content--TransitionDuration--expand--fade: 0s;
--#{$expandable-section}__content--TransitionDuration--collapse--fade: 0s;
}
&.pf-m-expand-top:not(.pf-m-expanded) {
--#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-top__content--TranslateY);
}
&.pf-m-expand-bottom:not(.pf-m-expanded) {
--#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-bottom__content--TranslateY);
}
}
&.pf-m-limit-width {
--#{$expandable-section}__content--MaxWidth: var(--#{$expandable-section}--m-limit-width__content--MaxWidth);
}
&.pf-m-display-lg {
padding-block-start: var(--#{$expandable-section}--m-display-lg--PaddingBlockStart);
padding-block-end: var(--#{$expandable-section}--m-display-lg--PaddingBlockEnd);
padding-inline-start: var(--#{$expandable-section}--m-display-lg--PaddingInlineStart);
padding-inline-end: var(--#{$expandable-section}--m-display-lg--PaddingInlineEnd);
background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
border: var(--#{$expandable-section}--m-display-lg--BorderWidth) solid var(--#{$expandable-section}--m-display-lg--BorderColor);
border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
}
&.pf-m-indented {
--#{$expandable-section}__content--PaddingInlineStart: var(--#{$expandable-section}--m-indented__content--PaddingInlineStart);
}
&.pf-m-truncate {
--#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
--#{$expandable-section}__content--TransitionDelay--hide: 0s;
&:not(.pf-m-expanded) .#{$expandable-section}__content {
// stylelint-disable
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--#{$expandable-section}--m-truncate__content--LineClamp);
// stylelint-enable
overflow: hidden;
}
}
}
.#{$expandable-section}__toggle-icon {
@include pf-v6-mirror-inline-on-rtl;
display: inline-block;
min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
color: var(--#{$expandable-section}__toggle-icon--Color);
transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
&.pf-m-expand-top { // TODO: Remove this block in breaking change in favor of using modifier on outer expandable section wrapper
--#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
}
}
.#{$expandable-section}__content {
max-width: var(--#{$expandable-section}__content--MaxWidth);
padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0); // TODO remove in breaking change
padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart);
&:where([hidden]) {
display: revert;
}
.#{$expandable-section}:where(:not(.pf-m-truncate)) > & {
max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
overflow: var(--#{$expandable-section}__content--Overflow, hidden);
visibility: var(--#{$expandable-section}__content--Visibility, hidden);
opacity: var(--#{$expandable-section}__content--Opacity);
transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), 0s, 0s;
transition-property: opacity, translate, visibility, max-height;
translate: 0 var(--#{$expandable-section}__content--TranslateY);
}
}
|
