111 lines
2 KiB
SCSS
111 lines
2 KiB
SCSS
.glossary {
|
|
&:not(.sidebar-closed) {
|
|
main {
|
|
width: calc(100vw - 250px);
|
|
margin-left: 250px;
|
|
}
|
|
|
|
.page__header-wrap,
|
|
.page__content {
|
|
.inner-wrap {
|
|
max-width: initial;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.component--glossary-toc-toggle {
|
|
&:not(.noncompliant-fix) {
|
|
left: calc(250px - 25px);
|
|
}
|
|
|
|
&.noncompliant-fix {
|
|
@media (min-width: 901px) {
|
|
left: calc(250px - 65px);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
left: calc(250px - 45px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sidebar-closed {
|
|
@media (max-width: 1230px) {
|
|
.page__header {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.component--glossary-toc {
|
|
left: -250px;
|
|
}
|
|
|
|
.component--glossary-toc-toggle {
|
|
&:not(.noncompliant-fix) {
|
|
left: 0;
|
|
}
|
|
|
|
&.noncompliant-fix {
|
|
@media (min-width: 901px) {
|
|
left: -40px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
left: -20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.component--glossary-toc {
|
|
width: 250px; height: calc(100vh - 4rem);
|
|
top: 4rem; left: 0;
|
|
|
|
background-color: $white;
|
|
border-right: 1px solid rgba($gray, 0.3);
|
|
font-size: 0.8rem; // TODO: Why was !important here?
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding-top: 1rem; // TODO: Why was !important here?
|
|
position: fixed; // TODO: Why was !important here?
|
|
z-index: 1;
|
|
|
|
li:last-of-type {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.component--glossary-toc-toggle {
|
|
background-color: mix($gray, $white, 30%);
|
|
font-size: 0.7rem;
|
|
position: absolute;
|
|
text-orientation: upright;
|
|
text-transform: uppercase;
|
|
writing-mode: vertical-rl;
|
|
z-index: 1;
|
|
|
|
&:not(.noncompliant-fix) {
|
|
width: 25px; height: 104px;
|
|
top: 4rem;
|
|
}
|
|
|
|
&.noncompliant-fix {
|
|
transform: rotate(90deg);
|
|
|
|
@media (min-width: 901px) {
|
|
width: 105px; height: 25px;
|
|
top: 103px;
|
|
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
width: 65px; height: 25px;
|
|
top: 83px;
|
|
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
}
|