skill-assessment-app/app/assets/stylesheets/molecules/_accordions.scss

58 lines
1.5 KiB
SCSS
Raw Normal View History

2016-11-16 23:31:35 -06:00
.accordion {
margin-bottom: 0.75em;
[type="checkbox"]:checked + label,
[type="checkbox"]:checked ~ label:after,
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:not(:checked) ~ label:after,
[type="radio"]:checked + label,
[type="radio"]:checked ~ label:after,
[type="radio"]:not(:checked) + label,
[type="radio"]:not(:checked) ~ label:after {
content: "";
border: 0;
background-color: transparent;
}
[type="checkbox"]:hover:not(:disabled) + label:before,
[type="radio"]:hover:not(:disabled) + label:before,
[type="radio"]:not(:checked) ~ label:before,
[type="checkbox"]:not(:checked) ~ label:before,
[type="radio"]:checked ~ label:before,
[type="checkbox"]:checked ~ label:before {
background-color: transparent;
border: 0;
content: "+";
font-size: 1.3em;
line-height: 1;
}
[type="checkbox"]:hover:checked + label:before,
[type="radio"]:hover:checked + label:before,
[type="radio"]:checked ~ label:before,
[type="checkbox"]:checked ~ label:before {
background-color: transparent;
content: "-";
}
[type="radio"]:not(:checked) + label,
[type="checkbox"]:not(:checked) + label,
[type="radio"]:checked + label,
[type="checkbox"]:checked + label {
padding-left: 20px;
}
.accordion__copy {
display: none;
margin-top: 0.75em;
}
.accordion__toggle:checked ~ .accordion__copy {
2016-11-20 13:26:49 -06:00
background-color: $gray-lighter;
2016-11-16 23:31:35 -06:00
display: block;
2016-11-20 13:26:49 -06:00
padding: 2.5em 1.25em 1em 1.75em;
margin: -2.25em 0 2em -0.5em;
2016-11-16 23:31:35 -06:00
}
}