lbry.tech/app/sass/partials/_glossary.scss

112 lines
2 KiB
SCSS
Raw Normal View History

.glossary {
2018-07-27 17:18:29 +02:00
&:not(.sidebar-closed) {
main {
width: calc(100vw - 250px);
2018-10-06 00:46:08 +02:00
margin-left: 250px;
2018-07-27 17:18:29 +02:00
}
.page__header-wrap,
.page__content {
.inner-wrap {
max-width: initial;
2018-10-06 00:46:08 +02:00
margin-left: 1rem;
2018-07-27 17:18:29 +02:00
}
}
.component--glossary-toc-toggle {
2018-10-01 17:31:49 +02:00
&: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);
}
}
2018-07-27 17:18:29 +02:00
}
}
2018-07-27 17:18:29 +02:00
&.sidebar-closed {
2018-10-01 17:31:49 +02:00
@media (max-width: 1230px) {
.page__header {
margin-left: 1rem;
}
}
2018-07-27 17:18:29 +02:00
.component--glossary-toc {
left: -250px;
}
.component--glossary-toc-toggle {
2018-10-01 17:31:49 +02:00
&:not(.noncompliant-fix) {
left: 0;
}
&.noncompliant-fix {
@media (min-width: 901px) {
left: -40px;
}
@media (max-width: 900px) {
left: -20px;
}
}
}
}
}
2018-07-20 00:36:48 +02:00
.component--glossary-toc {
2018-07-27 17:18:29 +02:00
width: 250px; height: calc(100vh - 4rem);
top: 4rem; left: 0;
2018-07-20 00:36:48 +02:00
background-color: $white;
border-right: 1px solid rgba($gray, 0.3);
2018-10-06 00:46:08 +02:00
font-size: 0.8rem; // TODO: Why was !important here?
overflow-x: hidden;
overflow-y: auto;
2018-10-06 00:46:08 +02:00
padding-top: 1rem; // TODO: Why was !important here?
position: fixed; // TODO: Why was !important here?
2018-07-20 00:36:48 +02:00
z-index: 1;
li:last-of-type {
margin-bottom: 1rem;
}
2018-07-20 00:36:48 +02:00
}
2018-07-27 17:18:29 +02:00
.component--glossary-toc-toggle {
2018-10-01 17:31:49 +02:00
background-color: mix($gray, $white, 30%);
2018-07-27 17:18:29 +02:00
font-size: 0.7rem;
position: absolute;
text-orientation: upright;
text-transform: uppercase;
writing-mode: vertical-rl;
z-index: 1;
2018-10-01 17:31:49 +02:00
&:not(.noncompliant-fix) {
width: 25px; height: 104px;
top: 4rem;
}
&.noncompliant-fix {
transform: rotate(90deg);
@media (min-width: 901px) {
width: 105px; height: 25px;
2018-10-06 00:46:08 +02:00
top: 103px;
2018-10-01 17:31:49 +02:00
letter-spacing: 2px;
}
@media (max-width: 900px) {
width: 65px; height: 25px;
2018-10-06 00:46:08 +02:00
top: 83px;
2018-10-01 17:31:49 +02:00
letter-spacing: 1px;
}
}
2018-07-27 17:18:29 +02:00
}