61 lines
1.1 KiB
CSS
61 lines
1.1 KiB
CSS
.toggle-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: calc(var(--sizing-base) + 20px);
|
|
|
|
& p:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
& .toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
& .toggle-label {
|
|
display: inline-block;
|
|
}
|
|
|
|
& [data-toggle-content] {
|
|
&.text-toggle-hidden {
|
|
position: relative;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
margin-bottom: var(--sizing-base);
|
|
}
|
|
|
|
&.text-toggle-hidden::after {
|
|
position: absolute;
|
|
z-index: 1;
|
|
content: '';
|
|
top: 0;
|
|
left: 0;
|
|
box-shadow: inset 0 -120px 50px -60px var(--background-color);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
& .toggle-checkbox:checked ~ [data-toggle-content] {
|
|
height: auto;
|
|
}
|
|
|
|
& .toggle-checkbox:checked ~ [data-toggle-content]::after {
|
|
box-shadow: none;
|
|
}
|
|
|
|
& .toggle-checkbox:checked + .toggle-label [aria-role="button"]::after {
|
|
content: 'Show less';
|
|
}
|
|
|
|
& .toggle-label [aria-role="button"] {
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: -20px;
|
|
left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& .toggle-label [aria-role="button"]::after {
|
|
content: 'Show more';
|
|
}
|
|
}
|