DiscoTOC/common/common.scss

243 lines
4.9 KiB
SCSS
Raw Normal View History

$padding-basis: 0.75em;
2019-03-08 21:06:56 -05:00
.d-toc-main {
display: none;
width: 225px;
@media screen and (max-width: 1045px) {
.desktop-view & {
width: 150px;
}
}
border-left: 1px solid var(--primary-low);
box-sizing: border-box;
a {
display: block;
padding: 0.15em 0;
color: var(--primary-medium);
&.scroll-to-bottom {
padding-left: $padding-basis;
}
2019-03-08 21:06:56 -05:00
}
#d-toc {
max-height: calc(100vh - 4.5em - var(--header-offset));
padding-bottom: 0.5em;
overflow: auto;
ul {
list-style-type: none;
2019-03-08 21:06:56 -05:00
margin: 0;
padding: 0;
}
li.d-toc-item {
margin: 0;
padding: 0;
padding-left: $padding-basis;
line-height: var(--line-height-large);
> ul {
max-height: 0;
overflow: hidden;
opacity: 0.5;
transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}
&.active,
.d-toc-wrapper.overlay & {
ul {
max-height: 500em;
overflow: visible;
opacity: 1;
}
2019-03-08 21:06:56 -05:00
}
> a:hover {
color: var(--primary-high);
}
&.direct-active > a {
2019-03-08 21:06:56 -05:00
position: relative;
color: var(--primary);
2019-03-08 21:06:56 -05:00
&:before {
content: "";
width: 1px;
margin-top: -1px;
background-color: var(--tertiary);
2019-03-08 21:06:56 -05:00
position: absolute;
height: 100%;
2019-03-08 21:54:08 -05:00
}
2019-03-08 21:06:56 -05:00
}
}
> ul > li > ul {
font-size: var(--font-down-1);
> li:first-child {
padding-top: 0.25em;
}
> li {
padding-bottom: 0.15em;
}
li.direct-active > a:before {
// it's odd that we need this
margin-left: -1px;
2019-03-08 21:06:56 -05:00
}
li.d-toc-h2 ~ li.d-toc-h3,
li.d-toc-h2 ~ li.d-toc-h4,
li.d-toc-h2 ~ li.d-toc-h5,
li.d-toc-h3 ~ li.d-toc-h4,
li.d-toc-h3 ~ li.d-toc-h5,
li.d-toc-h4 ~ li.d-toc-h5 {
> a {
padding-left: $padding-basis;
}
2019-03-08 21:06:56 -05:00
}
}
}
2019-03-08 21:06:56 -05:00
}
// active line marker
$selector: "> ul > li.direct-active > a:before";
$map: (
"left": "html:not(.rtl)",
"right": "html.rtl",
);
/*
// loop below generates styling for non-RTL and RTL
// Example:
html:not(.rtl) SELECTOR {
left: -.75em
}
html.rtl SELECTOR {
right: -.75em
}
*/
@each $prop, $parent in $map {
#{$parent} #d-toc {
#{$selector} {
#{$prop}: (-$padding-basis);
2019-03-08 21:06:56 -05:00
}
> ul > li #{$selector} {
#{$prop}: (-$padding-basis) * 2;
2019-03-08 21:06:56 -05:00
}
}
}
// END active line marker
2019-03-08 21:06:56 -05:00
.d-toc-mini,
a.d-toc-close {
display: none;
}
2019-03-08 22:01:21 -05:00
.d-toc-timeline-visible {
.d-toc-main,
.d-toc-mini {
display: block;
}
// overlayed timeline (on mobile and narrow screens)
.topic-navigation.with-topic-progress {
.d-toc-wrapper {
position: fixed;
margin-top: 0.25em;
height: calc(100vh - 50px - var(--header-offset));
opacity: 0.5;
right: -100vw;
top: var(--header-offset);
width: 75vw;
max-width: 350px;
background-color: var(--secondary);
box-shadow: var(--shadow-dropdown);
z-index: z("modal", "overlay");
transition: all 0.2s ease-in-out;
.d-toc-main {
width: 100%;
padding: 0.5em;
height: 100%;
#d-toc {
max-height: calc(100% - 3em);
}
}
&.overlay {
right: 0;
width: 75vw;
opacity: 1;
.d-toc-main #d-toc li.d-toc-item ul {
transition: none;
2019-03-08 21:06:56 -05:00
}
}
2019-03-08 22:01:21 -05:00
a.scroll-to-bottom,
a.d-toc-close {
display: inline-block;
padding: 0.5em;
}
2019-03-08 21:08:44 -05:00
.d-toc-icons {
text-align: right;
}
}
}
// core overrides when timeline is active
.timeline-container,
#topic-progress {
display: none;
}
.container.posts .topic-navigation.with-topic-progress {
align-self: start;
}
}
// core sets first child's top margin to 0
// ensure it's also 0 when TOC markup is first
.cooked > div[data-theme-toc]:first-child + * {
margin-top: 0px;
}
// RTL Support
.rtl {
.d-toc-main {
border-left: none;
border-right: 1px solid var(--primary-low);
#d-toc li.d-toc-item,
a.scroll-to-bottom {
padding-left: 0;
padding-right: $padding-basis;
}
2019-04-14 16:47:22 -04:00
}
.d-toc-timeline-visible .topic-navigation.with-topic-progress .d-toc-wrapper {
right: unset;
left: -100vw;
&.overlay {
right: unset;
left: 0;
2019-04-14 16:47:22 -04:00
}
}
}
// Composer preview notice
.edit-title .d-editor-preview [data-theme-toc] {
2022-01-05 11:40:18 -05:00
background: var(--tertiary);
color: var(--secondary);
2019-03-08 21:08:44 -05:00
position: sticky;
z-index: 1;
2019-03-08 21:08:44 -05:00
top: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
2019-04-14 16:47:22 -04:00
&:before {
content: "#{$composer_toc_text}";
}
2019-03-08 21:08:44 -05:00
}
// Docs plugin outlet
.below-docs-topic-outlet.d-toc-wrapper {
position: sticky;
top: calc(var(--header-offset, 60px) + 1em);
max-height: calc(100vh - 2em - var(--header-offset, 60px));
.mobile-view & {
display: none;
}
.d-toc-main {
display: block;
}
}