41 lines
1.5 KiB
SCSS
41 lines
1.5 KiB
SCSS
.msp-accordion {
|
|
// background-color: red;
|
|
|
|
&-item.msp-accordion-show {
|
|
.msp-accordion-header::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
&-header {
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&::after {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
|
|
transform: rotate(0deg);
|
|
translate: 110% -50%;
|
|
|
|
content: "";
|
|
width: 1em;
|
|
height: 1em;
|
|
// TODO: change SVG of the arrow
|
|
background: url('data:image/svg+xml;utf8,<svg fill="%23000000" viewBox="0 0 24 24" id="down-arrow-circle" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="secondary" d="M12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Zm2.83,10.5-2.14,3.12a.82.82,0,0,1-1.38,0L9.17,13.5A1,1,0,0,1,9.86,12h4.28A1,1,0,0,1,14.83,13.5Z" style="fill: %232ca9bc; stroke-width: 2;"></path><path id="primary" d="M12,7v5m.69,4.63,2.14-3.13a1,1,0,0,0-.69-1.5H9.86a1,1,0,0,0-.69,1.5l2.14,3.12A.82.82,0,0,0,12.69,16.63ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>')
|
|
no-repeat center center;
|
|
background-size: contain;
|
|
|
|
transition: transform 0.5s ease;
|
|
}
|
|
}
|
|
|
|
&-collapse {
|
|
overflow: hidden;
|
|
height: 0;
|
|
display: none;
|
|
|
|
transition: height 0.5s ease;
|
|
}
|
|
}
|