92 lines
1.8 KiB
CSS
92 lines
1.8 KiB
CSS
.accordion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
gap: 2rem;
|
|
}
|
|
@media only screen and (max-width: 1000px) {
|
|
.accordion {
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.accordion > .item.box,
|
|
.accordion > .wrapper > .item.box {
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
|
|
.accordion > .item.box > .head,
|
|
.accordion > .wrapper > .item.box > .head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
gap: 1.5rem;
|
|
|
|
padding: 1rem 2rem;
|
|
|
|
/* HACK: This is equal to an `outline-bottom` */
|
|
border-bottom: 0.125rem solid var(--color-gray-dark-dark);
|
|
margin-bottom: -0.125rem;
|
|
}
|
|
.accordion > .item.box > .head:hover,
|
|
.accordion > .wrapper > .item.box > .head:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.accordion > .item.box > .head > .icon,
|
|
.accordion > .wrapper > .item.box > .head > .icon {
|
|
color: var(--theme);
|
|
}
|
|
.accordion > .item.box > .head > .title,
|
|
.accordion > .wrapper > .item.box > .head > .title {
|
|
flex-grow: 1;
|
|
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.accordion > .item.box > .head > .icon,
|
|
.accordion > .wrapper > .item.box > .head > .icon,
|
|
.accordion > .item.box > .head > .title,
|
|
.accordion > .wrapper > .item.box > .head > .title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.accordion .head > .title .copylink {
|
|
/* HACK: Fix copylink positioning */
|
|
top: -0.35rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.accordion > .item.box > .body-container,
|
|
.accordion > .wrapper > .item.box > .body-container {
|
|
transition: max-height 0.5s ease-out;
|
|
}
|
|
|
|
.accordion > .item.box:not(.open) > .body-container,
|
|
.accordion > .wrapper > .item.box:not(.open) > .body-container {
|
|
max-height: 0;
|
|
}
|
|
|
|
.accordion > .item.box > .body-container > .body,
|
|
.accordion > .wrapper > .item.box > .body-container > .body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
gap: 1rem;
|
|
|
|
padding: 2rem;
|
|
}
|