From adc8d1af66f304d05bc52b623c7f290dc54a0050 Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Sat, 8 Jan 2022 18:50:39 +0100 Subject: [PATCH] feat(accordion): pure css, inverted, basic, right, tree, nested fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/definitions/modules/accordion.less | 157 ++++++++++++++---- .../default/globals/variation.variables | 4 + .../default/modules/accordion.variables | 36 +++- 3 files changed, 167 insertions(+), 30 deletions(-) diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less index 7400515487..e85e603da2 100755 --- a/src/definitions/modules/accordion.less +++ b/src/definitions/modules/accordion.less @@ -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 */ @@ -68,6 +67,10 @@ transition: @iconTransition; vertical-align: @iconVerticalAlign; transform: @iconTransform; + &.right when (@variationAccordionRightDropdown) { + float:right; + transform: @iconTransformRight; + } } /*-------------- @@ -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; @@ -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; @@ -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; @@ -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; } @@ -192,8 +196,9 @@ } /* 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; } @@ -201,12 +206,14 @@ .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; } @@ -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; } @@ -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; } @@ -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(); diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables index 2e289d683d..04adf3192a 100644 --- a/src/themes/default/globals/variation.variables +++ b/src/themes/default/globals/variation.variables @@ -478,8 +478,12 @@ /* Accordion */ @variationAccordionInverted: true; @variationAccordionStyled: true; +@variationAccordionBasicStyled: true; @variationAccordionFluid: true; @variationAccordionCompact: true; +@variationAccordionVeryCompact: true; +@variationAccordionRightDropdown: true; +@variationAccordionTree: true; /* Calendar */ @variationCalendarInverted: true; diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables index ea8a90455c..1dae8f7ede 100644 --- a/src/themes/default/modules/accordion.variables +++ b/src/themes/default/modules/accordion.variables @@ -9,6 +9,7 @@ @titlePadding: 0.5em 0; @titleFontSize: 1em; @titleColor: @textColor; +@titleLineHeight: 1; /* Icon */ @iconOpacity: 1; @@ -25,6 +26,7 @@ ; @iconVerticalAlign: baseline; @iconTransform: none; +@iconTransformRight: @menuIconTransform; /* Child Accordion */ @childAccordionMargin: 1em 0 0; @@ -40,7 +42,7 @@ @menuTitlePadding: 0; @menuIconFloat: right; -@menuIconMargin: @lineHeightOffset 0 0 1em; +@menuIconMargin: @iconMargin; @menuIconTransform: rotate(180deg); @@ -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; @@ -112,4 +130,18 @@ /* Styled Very Compact */ @styledTitlePaddingVeryCompact: 0.1875em 0.25em; -@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em; \ No newline at end of file +@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;