lbry.tech/app/sass/partials/_glossary.scss
ポール ウェッブ ade3c620f6 Fixes
2018-10-01 10:31:49 -05:00

113 lines
2 KiB
SCSS

.glossary {
&:not(.sidebar-closed) {
main {
margin-left: 250px;
width: calc(100vw - 250px);
}
.page__header-wrap,
.page__content {
.inner-wrap {
margin-left: 1rem;
max-width: initial;
}
}
.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 !important;
overflow-x: hidden;
overflow-y: auto;
padding-top: 1rem !important;
position: fixed !important;
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;
letter-spacing: 2px;
top: 103px;
}
@media (max-width: 900px) {
width: 65px; height: 25px;
letter-spacing: 1px;
top: 83px;
}
}
}