/* * # Semantic - Accordion * http://github.com/jlukic/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ @type : 'module'; @element : 'accordion'; @import '../../semantic.config'; /******************************* Accordion *******************************/ .ui.accordion, .ui.accordion .accordion { max-width: 100%; font-size: @fontSize; } .ui.accordion .accordion { margin: @childAccordionMargin; padding: @childAccordionPadding; } .ui.accordion .title, .ui.accordion .accordion .title { cursor: pointer; font-family: @titleFont; font-size: @titleFontSize; padding: @titlePadding; color: @titleColor; } .ui.accordion .content, .ui.accordion .accordion .content { display: none; margin: @contentMargin; padding: @contentPadding; } .ui.accordion .content:last-child { padding-bottom: 0em; } /* Arrow */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { display: @iconDisplay; float: @iconFloat; opacity: @iconOpacity; width: @iconWidth; height: @iconHeight; margin: @iconMargin; transition: @iconTransition; vertical-align: @iconVerticalAlign; } /******************************* Types *******************************/ /*-------------- Styled ---------------*/ .ui.styled.accordion { width: @styledWidth; } .ui.styled.accordion, .ui.styled.accordion .accordion { border-radius: @styledBorderRadius; background: @styledBackground; box-shadow: @styledBoxShadow; } .ui.styled.accordion .title, .ui.styled.accordion .accordion .title { margin: @styledTitleMargin; padding: @styledTitlePadding; color: @styledTitleColor; font-weight: @styledTitleFontWeight; border-top: @styledTitleBorder; transition: @styledTitleTransition; } .ui.styled.accordion .title:first-child, .ui.styled.accordion .accordion .title:first-child { border-top: none; } /* Content */ .ui.styled.accordion .content, .ui.styled.accordion .accordion .content { margin: @styledContentMargin; padding: @styledContentPadding; } .ui.styled.accordion .accordion .content { padding: @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 { background: @styledTitleHoverBackground; color: @styledTitleHoverColor; } .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title { background: @styledHoverChildTitleBackground; color: @styledHoverChildTitleColor; } /* Active */ .ui.styled.accordion .active.title { background: @styledActiveTitleBackground; color: @styledActiveTitleColor; } .ui.styled.accordion .accordion .active.title { background: @styledActiveChildTitleBackground; color: @styledActiveChildTitleColor; } /******************************* States *******************************/ /*-------------- Active ---------------*/ .ui.accordion .active.content, .ui.accordion .accordion .active.content { display: block; } /******************************* Variations *******************************/ /*-------------- Fluid ---------------*/ .ui.fluid.accordion, .ui.fluid.accordion .accordion { width: 100%; } .loadUIOverrides();