You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
4.5 KiB
205 lines
4.5 KiB
/*
|
|
* # 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;
|
|
}
|
|
|
|
/* 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;
|
|
transition: @iconTransition;
|
|
vertical-align: @iconVerticalAlign;
|
|
transform: @iconTransform;
|
|
}
|
|
|
|
|
|
/* Coupling with accordion */
|
|
.ui.accordion.menu .item .title {
|
|
display: block;
|
|
padding: @menuTitlePadding;
|
|
}
|
|
.ui.accordion.menu .item .title > .dropdown.icon {
|
|
float: @menuIconFloat;
|
|
margin: @menuIconMargin;
|
|
transform: @menuIconTransform;
|
|
}
|
|
|
|
/*******************************
|
|
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%;
|
|
}
|
|
|
|
|
|
|
|
.loadUIOverrides();
|