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.
223 lines
4.6 KiB
223 lines
4.6 KiB
/*!
|
|
* # Semantic UI 2.1.6 - Accordion
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2015 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
|
|
/*******************************
|
|
Accordion
|
|
*******************************/
|
|
|
|
.ui.accordion,
|
|
.ui.accordion .accordion {
|
|
max-width: 100%;
|
|
}
|
|
.ui.accordion .accordion {
|
|
margin: 1em 0em 0em;
|
|
padding: 0em;
|
|
}
|
|
|
|
/* Title */
|
|
.ui.accordion .title,
|
|
.ui.accordion .accordion .title {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Default Styling */
|
|
.ui.accordion .title:not(.ui) {
|
|
padding: 0.5em 0em;
|
|
font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
font-size: 1em;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
|
|
/* 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: '';
|
|
padding: 0.5em 0em 1em;
|
|
}
|
|
.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: inline-block;
|
|
float: none;
|
|
opacity: 1;
|
|
width: 1.25em;
|
|
height: 1em;
|
|
margin: 0em 0.25rem 0em 0rem;
|
|
padding: 0em;
|
|
font-size: 1em;
|
|
-webkit-transition: -webkit-transform 0.1s ease, opacity 0.1s ease;
|
|
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
vertical-align: baseline;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
/*--------------
|
|
Coupling
|
|
---------------*/
|
|
|
|
|
|
/* Menu */
|
|
.ui.accordion.menu .item .title {
|
|
display: block;
|
|
padding: 0em;
|
|
}
|
|
.ui.accordion.menu .item .title > .dropdown.icon {
|
|
float: right;
|
|
margin: 0.21425em 0em 0em 1em;
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Header */
|
|
.ui.accordion .ui.header .dropdown.icon {
|
|
font-size: 1em;
|
|
margin: 0em 0.25rem 0em 0rem;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
.ui.accordion .active.title .dropdown.icon,
|
|
.ui.accordion .accordion .active.title .dropdown.icon {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
.ui.accordion.menu .item .active.title > .dropdown.icon {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
|
|
/*--------------
|
|
Styled
|
|
---------------*/
|
|
|
|
.ui.styled.accordion {
|
|
width: 600px;
|
|
}
|
|
.ui.styled.accordion,
|
|
.ui.styled.accordion .accordion {
|
|
border-radius: 0.2307em;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.13), 0px 0px 0px 1px rgba(0, 0, 0, 0.13);
|
|
}
|
|
.ui.styled.accordion .title,
|
|
.ui.styled.accordion .accordion .title {
|
|
margin: 0em;
|
|
padding: 0.75em 1em;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
font-weight: bold;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.13);
|
|
-webkit-transition: background 0.1s ease, color 0.1s ease;
|
|
transition: background 0.1s ease, color 0.1s ease;
|
|
}
|
|
.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: 0em;
|
|
padding: 0.5em 1em 1.5em;
|
|
}
|
|
.ui.styled.accordion .accordion .content {
|
|
padding: 0em;
|
|
padding: 0.5em 1em 1.5em;
|
|
}
|
|
|
|
/* Hover */
|
|
.ui.styled.accordion .title:hover,
|
|
.ui.styled.accordion .active.title,
|
|
.ui.styled.accordion .accordion .title:hover,
|
|
.ui.styled.accordion .accordion .active.title {
|
|
background: transparent;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
.ui.styled.accordion .accordion .title:hover,
|
|
.ui.styled.accordion .accordion .active.title {
|
|
background: transparent;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
|
|
/* Active */
|
|
.ui.styled.accordion .active.title {
|
|
background: transparent;
|
|
color: rgba(0, 0, 0, 0.95);
|
|
}
|
|
.ui.styled.accordion .accordion .active.title {
|
|
background: transparent;
|
|
color: rgba(0, 0, 0, 0.95);
|
|
}
|
|
|
|
|
|
/*******************************
|
|
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: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
|
|
/*******************************
|
|
User Overrides
|
|
*******************************/
|
|
|