semantic/src/definitions/modules/accordion.less

/*!
 * # Semantic UI - Accordion
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'accordion';

@import (multiple) '../../theme.config';

/*******************************
            Accordion
*******************************/

.ui.accordion,
.ui.accordion .accordion {
  max-width: 100%;
}
.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();