alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(components): add the accordion component

Browse source
This commit is contained in:
Alexander Navarro 2024-12-26 16:44:32 -03:00
parent 7af58fe829
commit e0ed5a5ddd
10 changed files with 159 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

41
packages/components/src/accordion/accordion.scss Normal file
View file

@ -0,0 +1,41 @@
.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;
}
}