49 lines
980 B
SCSS
49 lines
980 B
SCSS
|
.collapsible-bar {
|
||
|
|
margin: 10px 0;
|
||
|
|
.collapsible-title
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
cursor: pointer;
|
||
|
|
h3 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.collapsible-content {
|
||
|
|
transition: opacity 0.5s ease-out;
|
||
|
|
opacity: 0;
|
||
|
|
height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
p:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> input[type=checkbox],
|
||
|
|
> input[type=radio]
|
||
|
|
{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
> input[type=checkbox]:checked ~ .collapsible-content,
|
||
|
|
> input[type=radio]:checked ~ .collapsible-content
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
opacity: 1;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsible-bar-show-input
|
||
|
|
{
|
||
|
|
> input[type=checkbox],
|
||
|
|
> input[type=radio]
|
||
|
|
{
|
||
|
|
display: inline-block;
|
||
|
|
float: left;
|
||
|
|
margin: 14px 10px;
|
||
|
|
}
|
||
|
|
> input[type=checkbox]:checked ~ .collapsible-content,
|
||
|
|
> input[type=radio]:checked ~ .collapsible-content
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|