Skip to content

Commit adc8d1a

Browse files
lubber-delubber-de
authored
feat(accordion): pure css, inverted, basic, right, tree, nested fixes
This MR enhances the accordion module: Pure CSS variant now possible using the details/summary tag (yes, IE/old Edge do not support that, that's ok for 2.9.0 and 2022 and you can still use the JS version which works there) 😉 . inverted styled variant tree variant (for proper indentation which a tree view needs) (also works as CSS only!) new right dropdown icon variant, to be able to place the dropdown icon to the right (just as in accordion menu already). Usefull for example when used inside message fixed the right dropdown icon (also in accordion menu) fixed possible usage of title or content elements inside an accordion which are supposed to be parts of different elements basic styled variant which is equal to styled for title handling only (so no borders and always transparent background)
1 parent 118ddb1 commit adc8d1a

File tree

3 files changed

+167
-30
lines changed

3 files changed

+167
-30
lines changed

‎src/definitions/modules/accordion.less

Lines changed: 129 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,16 @@
3131
}
3232

3333
/* Title */
34-
.ui.accordion .title,
35-
.ui.accordion .accordion .title {
34+
.ui.accordion.menu .item > .title,
35+
.ui.accordion > .title,
36+
.ui.accordion .accordion > .title {
3637
cursor: pointer;
37-
}
38-
39-
/* Default Styling */
40-
.ui.accordion .title {
4138
padding: @titlePadding;
4239
font-family: @titleFont;
4340
font-size: @titleFontSize;
4441
color: @titleColor;
42+
list-style: none;
43+
line-height: @titleLineHeight;
4544
}
4645

4746
/* Default Styling */
@@ -68,6 +67,10 @@
6867
transition: @iconTransition;
6968
vertical-align: @iconVerticalAlign;
7069
transform: @iconTransform;
70+
&.right when (@variationAccordionRightDropdown) {
71+
float:right;
72+
transform: @iconTransformRight;
73+
}
7174
}
7275

7376
/*--------------
@@ -95,6 +98,8 @@
9598
States
9699
*******************************/
97100

101+
.ui.accordion[open] > .title .dropdown.icon,
102+
.ui.accordion .accordion[open] > .title .dropdown.icon,
98103
.ui.accordion .active.title .dropdown.icon,
99104
.ui.accordion .accordion .active.title .dropdown.icon {
100105
transform: @activeIconTransform;
@@ -123,8 +128,8 @@
123128
background: @styledBackground;
124129
box-shadow: @styledBoxShadow;
125130
}
126-
.ui.styled.accordion .title,
127-
.ui.styled.accordion .accordion .title {
131+
.ui.styled.accordion > .title,
132+
.ui.styled.accordion .accordion > .title {
128133
margin: @styledTitleMargin;
129134
padding: @styledTitlePadding;
130135
color: @styledTitleColor;
@@ -133,43 +138,40 @@
133138
transition: @styledTitleTransition;
134139
}
135140
.ui.styled.accordion > .title:first-child,
136-
.ui.styled.accordion .accordion .title:first-child {
141+
.ui.styled.accordion .accordion > .title:first-child {
137142
border-top: none;
138143
}
139144

140145

141146
/* Content */
142-
.ui.styled.accordion .content,
143-
.ui.styled.accordion .accordion .content {
147+
.ui.styled.accordion > .content {
144148
margin: @styledContentMargin;
145149
padding: @styledContentPadding;
146150
}
147-
.ui.styled.accordion .accordion .content {
151+
.ui.styled.accordion .accordion > .content {
148152
margin: @styledChildContentMargin;
149153
padding: @styledChildContentPadding;
150154
}
151155

152156

153157
/* Hover */
154-
.ui.styled.accordion .title:hover,
155-
.ui.styled.accordion .active.title,
156-
.ui.styled.accordion .accordion .title:hover,
157-
.ui.styled.accordion .accordion .active.title {
158+
.ui.styled.accordion > .title:hover {
158159
background: @styledTitleHoverBackground;
159160
color: @styledTitleHoverColor;
160161
}
161-
.ui.styled.accordion .accordion .title:hover,
162-
.ui.styled.accordion .accordion .active.title {
162+
.ui.styled.accordion .accordion > .title:hover {
163163
background: @styledHoverChildTitleBackground;
164164
color: @styledHoverChildTitleColor;
165165
}
166166

167167

168168
/* Active */
169+
.ui.styled.accordion[open] > .title,
169170
.ui.styled.accordion .active.title {
170171
background: @styledActiveTitleBackground;
171172
color: @styledActiveTitleColor;
172173
}
174+
.ui.styled.accordion .accordion[open] > .title,
173175
.ui.styled.accordion .accordion .active.title {
174176
background: @styledActiveChildTitleBackground;
175177
color: @styledActiveChildTitleColor;
@@ -182,7 +184,9 @@
182184
---------------*/
183185

184186
/* Default Styling */
185-
.ui.compact.accordion:not(.styled) .title {
187+
188+
.ui.compact.accordion:not(.styled) > .title,
189+
.ui.compact.accordion:not(.styled) .accordion > .title {
186190
padding: @titlePaddingCompact;
187191
}
188192

@@ -192,21 +196,24 @@
192196
}
193197

194198
/* Styled */
195-
.ui.compact.styled.accordion .title,
196-
.ui.compact.styled.accordion .accordion .title {
199+
200+
.ui.compact.styled.accordion > .title,
201+
.ui.compact.styled.accordion .accordion > .title {
197202
padding: @styledTitlePaddingCompact;
198203
}
199204

200205
.ui.compact.styled.accordion .title ~ .content,
201206
.ui.compact.styled.accordion .accordion .title ~ .content {
202207
padding: @styledContentPaddingCompact;
203208
}
204-
209+
}
205210
/*--------------
206211
Very Compact
207212
---------------*/
208213

209-
.ui[class*="very compact"].accordion:not(.styled) .title {
214+
& when (@variationAccordionVeryCompact) {
215+
.ui[class*="very compact"].accordion:not(.styled) > .title,
216+
.ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
210217
padding: @titlePaddingVeryCompact;
211218
}
212219

@@ -215,8 +222,8 @@
215222
padding: @contentPaddingVeryCompact;
216223
}
217224

218-
.ui[class*="very compact"].styled.accordion .title,
219-
.ui[class*="very compact"].styled.accordion .accordion .title {
225+
.ui[class*="very compact"].styled.accordion > .title,
226+
.ui[class*="very compact"].styled.accordion .accordion > .title {
220227
padding: @styledTitlePaddingVeryCompact;
221228
}
222229

@@ -235,8 +242,8 @@
235242
Not Active
236243
---------------*/
237244

238-
.ui.accordion .title ~ .content:not(.active),
239-
.ui.accordion .accordion .title ~ .content:not(.active) {
245+
.ui.accordion:not(details) .title ~ .content:not(.active),
246+
.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
240247
display: none;
241248
}
242249

@@ -260,9 +267,103 @@
260267
Inverted
261268
---------------*/
262269

263-
.ui.inverted.accordion .title {
270+
.ui.inverted.accordion.menu .item > .title,
271+
.ui.inverted.accordion > .title,
272+
.ui.inverted.accordion .accordion > .title {
264273
color: @invertedTitleColor;
265274
}
275+
& when (@variationAccordionStyled) {
276+
.ui.inverted.styled.accordion,
277+
.ui.inverted.styled.accordion .accordion {
278+
background: @invertedStyledBackground;
279+
box-shadow: @invertedStyledBoxShadow;
280+
}
281+
.ui.inverted.styled.accordion > .title,
282+
.ui.inverted.styled.accordion .accordion > .title {
283+
color: @invertedStyledTitleColor;
284+
border-top: @invertedStyledTitleBorder;
285+
}
286+
287+
/* Hover */
288+
.ui.inverted.styled.accordion > .title:hover {
289+
background: @invertedStyledTitleHoverBackground;
290+
color: @invertedStyledTitleHoverColor;
291+
}
292+
.ui.inverted.styled.accordion .accordion > .title:hover {
293+
background: @invertedStyledHoverChildTitleBackground;
294+
color: @invertedStyledHoverChildTitleColor;
295+
}
296+
297+
/* Active */
298+
.ui.inverted.styled.accordion[open] > .title,
299+
.ui.inverted.styled.accordion .active.title {
300+
background: @invertedStyledActiveTitleBackground;
301+
color: @invertedStyledActiveTitleColor;
302+
}
303+
.ui.inverted.styled.accordion .accordion[open] > .title,
304+
.ui.inverted.styled.accordion .accordion .active.title {
305+
background: @invertedStyledActiveChildTitleBackground;
306+
color: @invertedStyledActiveChildTitleColor;
307+
}
308+
}
309+
}
310+
311+
& when (@variationAccordionBasicStyled) {
312+
.ui.basic.styled.accordion,
313+
.ui.basic.styled.accordion .accordion {
314+
background: transparent;
315+
box-shadow: none;
316+
}
317+
.ui.basic.styled.accordion > .title,
318+
.ui.basic.styled.accordion .accordion > .title {
319+
border: none;
320+
color: @basicStyledTitleColor;
321+
}
322+
.ui.basic.styled.accordion > .title:hover,
323+
.ui.basic.styled.accordion .accordion > .title:hover {
324+
background: transparent;
325+
color: @basicStyledTitleHoverColor;
326+
}
327+
.ui.basic.styled.accordion[open] > .title,
328+
.ui.basic.styled.accordion .active.title,
329+
.ui.basic.styled.accordion .accordion[open] > .title,
330+
.ui.basic.styled.accordion .accordion .active.title {
331+
background: transparent;
332+
color: @basicStyledActiveTitleColor;
333+
}
334+
& when (@variationAccordionInverted) {
335+
.ui.inverted.basic.styled.accordion > .title,
336+
.ui.inverted.basic.styled.accordion .accordion > .title {
337+
background: transparent;
338+
color: @invertedBasicStyledTitleColor;
339+
}
340+
.ui.inverted.basic.styled.accordion > .title:hover,
341+
.ui.inverted.basic.styled.accordion .accordion > .title:hover {
342+
background: transparent;
343+
color: @invertedBasicStyledTitleHoverColor;
344+
}
345+
.ui.inverted.basic.styled.accordion[open] > .title,
346+
.ui.inverted.basic.styled.accordion .active.title,
347+
.ui.inverted.basic.styled.accordion .accordion[open] > .title,
348+
.ui.inverted.basic.styled.accordion .accordion .active.title {
349+
background: transparent;
350+
color: @invertedBasicStyledActiveTitleColor;
351+
}
352+
}
353+
}
354+
355+
& when (@variationAccordionTree) {
356+
.ui.tree.accordion:not(.styled) .title ~ .content,
357+
.ui.tree.accordion:not(.styled) .accordion .title ~ .content {
358+
padding:@treeContentPadding;
359+
}
360+
.ui.tree.accordion > .content,
361+
.ui.tree.accordion .accordion > .content {
362+
margin-left: @treeContentLeftMargin;
363+
}
364+
.ui.tree.accordion .accordion {
365+
margin-top: @treeContentTopMargin;
366+
}
266367
}
267368

268369
.loadUIOverrides();

‎src/themes/default/globals/variation.variables

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,8 +478,12 @@
478478
/* Accordion */
479479
@variationAccordionInverted: true;
480480
@variationAccordionStyled: true;
481+
@variationAccordionBasicStyled: true;
481482
@variationAccordionFluid: true;
482483
@variationAccordionCompact: true;
484+
@variationAccordionVeryCompact: true;
485+
@variationAccordionRightDropdown: true;
486+
@variationAccordionTree: true;
483487

484488
/* Calendar */
485489
@variationCalendarInverted: true;

‎src/themes/default/modules/accordion.variables

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@titlePadding: 0.5em 0;
1010
@titleFontSize: 1em;
1111
@titleColor: @textColor;
12+
@titleLineHeight: 1;
1213

1314
/* Icon */
1415
@iconOpacity: 1;
@@ -25,6 +26,7 @@
2526
;
2627
@iconVerticalAlign: baseline;
2728
@iconTransform: none;
29+
@iconTransformRight: @menuIconTransform;
2830

2931
/* Child Accordion */
3032
@childAccordionMargin: 1em 0 0;
@@ -40,7 +42,7 @@
4042

4143
@menuTitlePadding: 0;
4244
@menuIconFloat: right;
43-
@menuIconMargin: @lineHeightOffset 0 0 1em;
45+
@menuIconMargin: @iconMargin;
4446
@menuIconTransform: rotate(180deg);
4547

4648

@@ -97,6 +99,22 @@
9799

98100
/* Inverted */
99101
@invertedTitleColor: @invertedTextColor;
102+
@invertedStyledTitleColor: @invertedUnselectedTextColor;
103+
@invertedStyledBackground: @black;
104+
@invertedStyledTitleBorder: 1px solid @whiteBorderColor;
105+
@invertedStyledBoxShadow:
106+
@subtleShadow,
107+
0 0 0 1px @whiteBorderColor
108+
;
109+
@invertedStyledTitleHoverBackground: transparent;
110+
@invertedStyledTitleHoverColor: @invertedTextColor;
111+
@invertedStyledActiveTitleBackground: transparent;
112+
@invertedStyledActiveTitleColor: @invertedSelectedTextColor;
113+
114+
@invertedStyledHoverChildTitleBackground: @invertedStyledTitleHoverBackground;
115+
@invertedStyledHoverChildTitleColor: @invertedStyledTitleHoverColor;
116+
@invertedStyledActiveChildTitleBackground: @invertedStyledActiveTitleBackground;
117+
@invertedStyledActiveChildTitleColor: @invertedStyledActiveTitleColor;
100118

101119
/* Compact */
102120
@titlePaddingCompact: 0.25em 0;
@@ -112,4 +130,18 @@
112130

113131
/* Styled Very Compact */
114132
@styledTitlePaddingVeryCompact: 0.1875em 0.25em;
115-
@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
133+
@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
134+
135+
/* Basic Styled */
136+
@basicStyledTitleColor: @mutedTextColor;
137+
@basicStyledTitleHoverColor: @textColor;
138+
@basicStyledActiveTitleColor: @selectedTextColor;
139+
140+
@invertedBasicStyledTitleColor: @invertedMutedTextColor;
141+
@invertedBasicStyledTitleHoverColor: @invertedTextColor;
142+
@invertedBasicStyledActiveTitleColor: @invertedSelectedTextColor;
143+
144+
/* Tree */
145+
@treeContentPadding: 0;
146+
@treeContentTopMargin: 0;
147+
@treeContentLeftMargin: 1.7em;

0 commit comments

Comments
 (0)