| | |
|---|
| | | details.toc { |
|---|
| | | & summary { |
|---|
| | | cursor: pointer; |
|---|
| | | button#toc { |
|---|
| | | background-color: transparent; |
|---|
| | | border: none; |
|---|
| | | text-align: left; |
|---|
| | | cursor: pointer; |
|---|
| | | padding: 0; |
|---|
| | | color: var(--dark); |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &::marker { |
|---|
| | | color: var(--dark); |
|---|
| | | } |
|---|
| | | |
|---|
| | | & > * { |
|---|
| | | padding-left: 0.25rem; |
|---|
| | | display: inline-block; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | & h3 { |
|---|
| | | font-size: 1rem; |
|---|
| | | display: inline-block; |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | & .fold { |
|---|
| | | margin-left: 0.5rem; |
|---|
| | | transition: transform 0.3s ease; |
|---|
| | | opacity: 0.8; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.collapsed .fold { |
|---|
| | | transform: rotateZ(-90deg) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | #toc-content { |
|---|
| | | list-style: none; |
|---|
| | | overflow: hidden; |
|---|
| | | max-height: none; |
|---|
| | | transition: max-height 0.3s ease; |
|---|
| | | font-size: 0.9rem; |
|---|
| | | |
|---|
| | | & ul { |
|---|
| | | list-style: none; |
|---|
| | | margin: 0.5rem 1.25rem; |
|---|
| | | margin: 0.5rem 0; |
|---|
| | | padding: 0; |
|---|
| | | & > li > a { |
|---|
| | | color: var(--dark); |
|---|
| | | opacity: 0.35; |
|---|
| | | transition: 0.5s ease opacity, 0.3s ease color; |
|---|
| | | &.in-view { |
|---|
| | | opacity: 0.75; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @for $i from 1 through 6 { |
|---|
| | | @for $i from 0 through 6 { |
|---|
| | | & .depth-#{$i} { |
|---|
| | | padding-left: calc(1rem * #{$i}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
