/*
* # 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 ‘../../theme.config’;
/*******************************
Accordion
*******************************/
.ui.accordion, .ui.accordion .accordion {
max-width: 100%; font-size: @fontSize;
} .ui.accordion .accordion {
margin: @childAccordionMargin; padding: @childAccordionPadding;
}
/* Title */ .ui.accordion .title, .ui.accordion .accordion .title {
cursor: pointer;
}
/* Default Styling */ .ui.accordion .title:not(.ui) {
padding: @titlePadding; font-family: @titleFont; font-size: @titleFontSize; color: @titleColor;
}
/* Content */ .ui.accordion .title ~ .content, .ui.accordion .accordion .title ~ .content {
display: none;
}
/* Default Styling */ .ui.accordion:not(.styled) .title ~ .content:not(.ui), .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
margin: @contentMargin; padding: @contentPadding;
} .ui.accordion:not(.styled) .title ~ .content:not(.ui):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; padding: @iconPadding; font-size: @iconFontSize; transition: @iconTransition; vertical-align: @iconVerticalAlign; transform: @iconTransform;
}
/*————–
Coupling
—————*/
/* Menu */ .ui.accordion.menu .item .title {
display: block; padding: @menuTitlePadding;
} .ui.accordion.menu .item .title > .dropdown.icon {
float: @menuIconFloat; margin: @menuIconMargin; transform: @menuIconTransform;
}
/* Header */ .ui.accordion .ui.header .dropdown.icon {
font-size: @iconFontSize; margin: @iconMargin;
}
/*******************************
States
*******************************/
.ui.accordion .active.title .dropdown.icon, .ui.accordion .accordion .active.title .dropdown.icon {
transform: @activeIconTransform;
}
.ui.accordion.menu .item .active.title > .dropdown.icon {
transform: @activeIconTransform;
}
/*******************************
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%;
}
/*————–
Inverted
—————*/
.ui.inverted.accordion .title:not(.ui) {
color: @invertedTitleColor;
}
.loadUIOverrides();