github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/accordion.css (about) 1 /* Content managed by Project Forge, see [projectforge.md] for details. */ 2 .accordion { 3 list-style: none; 4 margin: 0; 5 padding: 0; 6 } 7 8 .accordion li { 9 border-top: var(--border); 10 } 11 .accordion li:first-child { 12 border-top: none; 13 } 14 15 .accordion .bd { 16 padding: 0; 17 margin: 0; 18 display: grid; 19 grid-template-rows: 0fr; 20 transition: grid-template-rows 200ms; 21 } 22 23 @media (prefers-reduced-motion) { 24 .accordion .bd { 25 transition: none; 26 } 27 } 28 29 .accordion .bd-no-animation { 30 display: none; 31 padding: var(--padding-small); 32 } 33 34 .accordion .bd > div { 35 height: auto; 36 overflow: hidden; 37 } 38 39 .accordion .bd > div > div { 40 padding: var(--padding-small); 41 } 42 43 .accordion label { 44 display: block; 45 cursor: pointer; 46 user-select: none; 47 padding: var(--padding-small); 48 } 49 50 .accordion input[type=checkbox]:checked ~ .bd-no-animation { 51 display: block; 52 } 53 54 .accordion input[type=checkbox]:checked ~ .bd { 55 grid-template-rows: 1fr; 56 } 57 58 .accordion input[type=checkbox]:checked ~ label .expand-collapse { 59 transform: rotate(90deg); 60 }