Skip to content

Commit

Permalink
feat(accordion): pure css, inverted, basic, right, tree, nested fixes
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@lubber-de
lubber-de authored Jan 8, 2022
1 parent 118ddb1 commit adc8d1a
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 30 deletions.
157 changes: 129 additions & 28 deletions src/definitions/modules/accordion.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,16 @@
}

/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
.ui.accordion.menu .item > .title,
.ui.accordion > .title,
.ui.accordion .accordion > .title {
cursor: pointer;
}

/* Default Styling */
.ui.accordion .title {
padding: @titlePadding;
font-family: @titleFont;
font-size: @titleFontSize;
color: @titleColor;
list-style: none;
line-height: @titleLineHeight;
}

/* Default Styling */
Expand All @@ -68,6 +67,10 @@
transition: @iconTransition;
vertical-align: @iconVerticalAlign;
transform: @iconTransform;
&.right when (@variationAccordionRightDropdown) {
float:right;
transform: @iconTransformRight;
}
}

/*--------------
Expand Down Expand Up @@ -95,6 +98,8 @@
States
*******************************/

.ui.accordion[open] > .title .dropdown.icon,
.ui.accordion .accordion[open] > .title .dropdown.icon,
.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
transform: @activeIconTransform;
Expand Down Expand Up @@ -123,8 +128,8 @@
background: @styledBackground;
box-shadow: @styledBoxShadow;
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
.ui.styled.accordion > .title,
.ui.styled.accordion .accordion > .title {
margin: @styledTitleMargin;
padding: @styledTitlePadding;
color: @styledTitleColor;
Expand All @@ -133,43 +138,40 @@
transition: @styledTitleTransition;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
.ui.styled.accordion .accordion > .title:first-child {
border-top: none;
}


/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
.ui.styled.accordion > .content {
margin: @styledContentMargin;
padding: @styledContentPadding;
}
.ui.styled.accordion .accordion .content {
.ui.styled.accordion .accordion > .content {
margin: @styledChildContentMargin;
padding: @styledChildContentPadding;
}


/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
.ui.styled.accordion > .title:hover {
background: @styledTitleHoverBackground;
color: @styledTitleHoverColor;
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
.ui.styled.accordion .accordion > .title:hover {
background: @styledHoverChildTitleBackground;
color: @styledHoverChildTitleColor;
}


/* Active */
.ui.styled.accordion[open] > .title,
.ui.styled.accordion .active.title {
background: @styledActiveTitleBackground;
color: @styledActiveTitleColor;
}
.ui.styled.accordion .accordion[open] > .title,
.ui.styled.accordion .accordion .active.title {
background: @styledActiveChildTitleBackground;
color: @styledActiveChildTitleColor;
Expand All @@ -182,7 +184,9 @@
---------------*/

/* Default Styling */
.ui.compact.accordion:not(.styled) .title {

.ui.compact.accordion:not(.styled) > .title,
.ui.compact.accordion:not(.styled) .accordion > .title {
padding: @titlePaddingCompact;
}

Expand All @@ -192,21 +196,24 @@
}

/* Styled */
.ui.compact.styled.accordion .title,
.ui.compact.styled.accordion .accordion .title {

.ui.compact.styled.accordion > .title,
.ui.compact.styled.accordion .accordion > .title {
padding: @styledTitlePaddingCompact;
}

.ui.compact.styled.accordion .title ~ .content,
.ui.compact.styled.accordion .accordion .title ~ .content {
padding: @styledContentPaddingCompact;
}

}
/*--------------
Very Compact
---------------*/

.ui[class*="very compact"].accordion:not(.styled) .title {
& when (@variationAccordionVeryCompact) {
.ui[class*="very compact"].accordion:not(.styled) > .title,
.ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
padding: @titlePaddingVeryCompact;
}

Expand All @@ -215,8 +222,8 @@
padding: @contentPaddingVeryCompact;
}

.ui[class*="very compact"].styled.accordion .title,
.ui[class*="very compact"].styled.accordion .accordion .title {
.ui[class*="very compact"].styled.accordion > .title,
.ui[class*="very compact"].styled.accordion .accordion > .title {
padding: @styledTitlePaddingVeryCompact;
}

Expand All @@ -235,8 +242,8 @@
Not Active
---------------*/

.ui.accordion .title ~ .content:not(.active),
.ui.accordion .accordion .title ~ .content:not(.active) {
.ui.accordion:not(details) .title ~ .content:not(.active),
.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
display: none;
}

Expand All @@ -260,9 +267,103 @@
Inverted
---------------*/

.ui.inverted.accordion .title {
.ui.inverted.accordion.menu .item > .title,
.ui.inverted.accordion > .title,
.ui.inverted.accordion .accordion > .title {
color: @invertedTitleColor;
}
& when (@variationAccordionStyled) {
.ui.inverted.styled.accordion,
.ui.inverted.styled.accordion .accordion {
background: @invertedStyledBackground;
box-shadow: @invertedStyledBoxShadow;
}
.ui.inverted.styled.accordion > .title,
.ui.inverted.styled.accordion .accordion > .title {
color: @invertedStyledTitleColor;
border-top: @invertedStyledTitleBorder;
}

/* Hover */
.ui.inverted.styled.accordion > .title:hover {
background: @invertedStyledTitleHoverBackground;
color: @invertedStyledTitleHoverColor;
}
.ui.inverted.styled.accordion .accordion > .title:hover {
background: @invertedStyledHoverChildTitleBackground;
color: @invertedStyledHoverChildTitleColor;
}

/* Active */
.ui.inverted.styled.accordion[open] > .title,
.ui.inverted.styled.accordion .active.title {
background: @invertedStyledActiveTitleBackground;
color: @invertedStyledActiveTitleColor;
}
.ui.inverted.styled.accordion .accordion[open] > .title,
.ui.inverted.styled.accordion .accordion .active.title {
background: @invertedStyledActiveChildTitleBackground;
color: @invertedStyledActiveChildTitleColor;
}
}
}

& when (@variationAccordionBasicStyled) {
.ui.basic.styled.accordion,
.ui.basic.styled.accordion .accordion {
background: transparent;
box-shadow: none;
}
.ui.basic.styled.accordion > .title,
.ui.basic.styled.accordion .accordion > .title {
border: none;
color: @basicStyledTitleColor;
}
.ui.basic.styled.accordion > .title:hover,
.ui.basic.styled.accordion .accordion > .title:hover {
background: transparent;
color: @basicStyledTitleHoverColor;
}
.ui.basic.styled.accordion[open] > .title,
.ui.basic.styled.accordion .active.title,
.ui.basic.styled.accordion .accordion[open] > .title,
.ui.basic.styled.accordion .accordion .active.title {
background: transparent;
color: @basicStyledActiveTitleColor;
}
& when (@variationAccordionInverted) {
.ui.inverted.basic.styled.accordion > .title,
.ui.inverted.basic.styled.accordion .accordion > .title {
background: transparent;
color: @invertedBasicStyledTitleColor;
}
.ui.inverted.basic.styled.accordion > .title:hover,
.ui.inverted.basic.styled.accordion .accordion > .title:hover {
background: transparent;
color: @invertedBasicStyledTitleHoverColor;
}
.ui.inverted.basic.styled.accordion[open] > .title,
.ui.inverted.basic.styled.accordion .active.title,
.ui.inverted.basic.styled.accordion .accordion[open] > .title,
.ui.inverted.basic.styled.accordion .accordion .active.title {
background: transparent;
color: @invertedBasicStyledActiveTitleColor;
}
}
}

& when (@variationAccordionTree) {
.ui.tree.accordion:not(.styled) .title ~ .content,
.ui.tree.accordion:not(.styled) .accordion .title ~ .content {
padding:@treeContentPadding;
}
.ui.tree.accordion > .content,
.ui.tree.accordion .accordion > .content {
margin-left: @treeContentLeftMargin;
}
.ui.tree.accordion .accordion {
margin-top: @treeContentTopMargin;
}
}

.loadUIOverrides();
Expand Down
4 changes: 4 additions & 0 deletions src/themes/default/globals/variation.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,8 +478,12 @@
/* Accordion */
@variationAccordionInverted: true;
@variationAccordionStyled: true;
@variationAccordionBasicStyled: true;
@variationAccordionFluid: true;
@variationAccordionCompact: true;
@variationAccordionVeryCompact: true;
@variationAccordionRightDropdown: true;
@variationAccordionTree: true;

/* Calendar */
@variationCalendarInverted: true;
Expand Down
36 changes: 34 additions & 2 deletions src/themes/default/modules/accordion.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@titlePadding: 0.5em 0;
@titleFontSize: 1em;
@titleColor: @textColor;
@titleLineHeight: 1;

/* Icon */
@iconOpacity: 1;
Expand All @@ -25,6 +26,7 @@
;
@iconVerticalAlign: baseline;
@iconTransform: none;
@iconTransformRight: @menuIconTransform;

/* Child Accordion */
@childAccordionMargin: 1em 0 0;
Expand All @@ -40,7 +42,7 @@

@menuTitlePadding: 0;
@menuIconFloat: right;
@menuIconMargin: @lineHeightOffset 0 0 1em;
@menuIconMargin: @iconMargin;
@menuIconTransform: rotate(180deg);


Expand Down Expand Up @@ -97,6 +99,22 @@

/* Inverted */
@invertedTitleColor: @invertedTextColor;
@invertedStyledTitleColor: @invertedUnselectedTextColor;
@invertedStyledBackground: @black;
@invertedStyledTitleBorder: 1px solid @whiteBorderColor;
@invertedStyledBoxShadow:
@subtleShadow,
0 0 0 1px @whiteBorderColor
;
@invertedStyledTitleHoverBackground: transparent;
@invertedStyledTitleHoverColor: @invertedTextColor;
@invertedStyledActiveTitleBackground: transparent;
@invertedStyledActiveTitleColor: @invertedSelectedTextColor;

@invertedStyledHoverChildTitleBackground: @invertedStyledTitleHoverBackground;
@invertedStyledHoverChildTitleColor: @invertedStyledTitleHoverColor;
@invertedStyledActiveChildTitleBackground: @invertedStyledActiveTitleBackground;
@invertedStyledActiveChildTitleColor: @invertedStyledActiveTitleColor;

/* Compact */
@titlePaddingCompact: 0.25em 0;
Expand All @@ -112,4 +130,18 @@

/* Styled Very Compact */
@styledTitlePaddingVeryCompact: 0.1875em 0.25em;
@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;

/* Basic Styled */
@basicStyledTitleColor: @mutedTextColor;
@basicStyledTitleHoverColor: @textColor;
@basicStyledActiveTitleColor: @selectedTextColor;

@invertedBasicStyledTitleColor: @invertedMutedTextColor;
@invertedBasicStyledTitleHoverColor: @invertedTextColor;
@invertedBasicStyledActiveTitleColor: @invertedSelectedTextColor;

/* Tree */
@treeContentPadding: 0;
@treeContentTopMargin: 0;
@treeContentLeftMargin: 1.7em;

0 comments on commit adc8d1a

Please sign in to comment.