mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-30 12:59:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit 🚀

Browse source
This commit is contained in:
Lucas 2019-11-27 15:31:49 +07:00
commit 16c7596319
30 changed files with 5996 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
scss/components/_accordion.scss Normal file
View file

@ -0,0 +1,62 @@
/**
* Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV
*/
details {
display: block;
margin-bottom: $spacing-typography;
padding-bottom: $spacing-typography/2;
border-bottom: 1px solid var(--muted-border);
summary {
list-style-type: none;
cursor: pointer;
line-height: 1rem;
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
$caret-icon-color: "808080"; // Without '#' !important
display: inline-block;
width: 1rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
// Source: https://feathericons.com/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
transition: transform $transition;
}
&:focus {
outline: none;
}
}
// Open
&[open] {
summary {
margin-bottom: $spacing-typography/4;
color: var(--muted-text);
&::after {
transform: rotate(0);
}
}
}
}