code.css (1420B)
1 2 .collapsable-code { 3 4 border-color: var(--greyed-out); 5 position: relative; 6 width: 100%; 7 margin: 40px 0; 8 9 input[type="checkbox"] { 10 position: absolute; 11 visibility: hidden; 12 } 13 14 input[type="checkbox"]:checked { 15 ~ div, 16 ~ .highlight pre { 17 height: 0; 18 padding: 0; 19 border-top: none; 20 } 21 22 ~ label .collapsable-code__toggle:after { 23 content: attr(data-label-expand); 24 } 25 } 26 27 label { 28 position: relative; 29 display: flex; 30 justify-content: space-between; 31 min-width: 30px; 32 min-height: 30px; 33 margin: 0; 34 border-bottom: 1px solid var(--border-color); 35 cursor: pointer; 36 } 37 38 &__title { 39 flex: 1; 40 color: var(--accent); 41 padding: 3px 10px; 42 text-overflow: ellipsis; 43 white-space: nowrap; 44 overflow: hidden; 45 } 46 47 &__language { 48 color: var(--accent); 49 border: 1px solid var(--border-color); 50 border-bottom: none; 51 text-transform: uppercase; 52 padding: 3px 10px; 53 } 54 55 &__toggle { 56 color: var(--accent); 57 font-size: 16px; 58 padding: 3px 10px; 59 60 &:after { 61 content: attr(data-label-collapse); 62 } 63 } 64 65 pre { 66 margin-top: 0; 67 68 &::first-line { 69 line-height: 0; 70 } 71 } 72 73 } 74