Discource-C
/
DiscoTOC
mirror of https://github.com/discourse/DiscoTOC.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adds RTL support

This commit is contained in:
Joe 2019-03-09 10:54:08 +08:00 committed by GitHub
parent 1660dabc91
commit 43402b506f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 112 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
common/common.scss
View File

@ -46,7 +46,12 @@
&.d-toc-active { &.d-toc-active {
position: relative; position: relative;
&:before { &:before {
.ltr & {
border-left: 1px solid $tertiary; border-left: 1px solid $tertiary;
}
.rtl & {
border-right: 1px solid $tertiary;
}
height: 100%; height: 100%;
content: ""; content: "";
width: 1px; width: 1px;
@ -60,41 +65,96 @@
} }
} }
.d-toc-heading { .d-toc-heading {
.ltr & {
padding-left: 10px; padding-left: 10px;
}
.rtl & {
padding-right: 10px;
}
.d-toc-active:before { .d-toc-active:before {
.ltr & {
left: -10px; left: -10px;
} }
.rtl & {
right: -10px;
}
}
} }
.d-toc-subheading { .d-toc-subheading {
.ltr & {
padding-left: 20px; padding-left: 20px;
}
.rtl & {
padding-right: 20px;
}
.d-toc-active:before { .d-toc-active:before {
.ltr & {
left: -30px; left: -30px;
} }
.rtl & {
right: -30px;
}
}
.d-toc-subheading { .d-toc-subheading {
.ltr & {
padding-left: 30px; padding-left: 30px;
}
.rtl & {
padding-right: 30px;
}
.d-toc-active:before { .d-toc-active:before {
.ltr & {
left: -60px; left: -60px;
} }
.d-toc-subheading { .rtl & {
padding-left: 40px; right: -60px;
.d-toc-active:before { }
left: -70px;
} }
.d-toc-subheading { .d-toc-subheading {
padding-left: 50px; .ltr & {
padding-left: 40px;
}
.rtl & {
padding-right: 40px;
}
.d-toc-active:before { .d-toc-active:before {
.ltr & {
left: -70px;
}
.rtl & {
right: -70px;
}
}
.d-toc-subheading {
.ltr & {
padding-left: 50px;
}
.rtl & {
padding-right: 50px;
}
.d-toc-active:before {
.ltr & {
left: -80px; left: -80px;
} }
.rtl & {
right: -80px;
}
}
} }
} }
} }
} }
.d-toc-subheading li { .d-toc-subheading li {
font-size: 12px; font-size: 0.8em;
} }
} }
.d-toc-anchor-link { .d-toc-anchor-link {
.ltr & {
margin-left: 5px; margin-left: 5px;
}
.rtl & {
margin-right: 5px;
}
font-size: initial; font-size: initial;
color: $primary-medium; color: $primary-medium;
} }
@ -117,9 +177,13 @@
.d-toc { .d-toc {
max-height: 85vh; max-height: 85vh;
padding-left: 0; padding-left: 0;
margin-left: 0;
margin-top: 50px; margin-top: 50px;
.ltr & {
margin-left: -1px; margin-left: -1px;
}
.rtl & {
margin-right: -1px;
}
position: sticky; position: sticky;
top: 75px; top: 75px;
margin-bottom: 135px; margin-bottom: 135px;
@ -132,8 +196,13 @@
.d-toc-article { .d-toc-article {
display: flex; display: flex;
> .row { > .row {
.ltr & {
border-right: 1px solid $primary-low; border-right: 1px solid $primary-low;
} }
.rtl & {
border-left: 1px solid $primary-low;
}
}
} }
#topic-title { #topic-title {
margin-bottom: 0; margin-bottom: 0;
@ -169,14 +238,25 @@
} }
.d-toc-active { .d-toc-active {
&:before { &:before {
.ltr & {
margin-left: -1px; margin-left: -1px;
} }
.rtl & {
margin-right: -1px;
}
}
} }
} }
.d-toc-close-wrapper { .d-toc-close-wrapper {
height: 3em; height: 3em;
background: $secondary; background: $secondary;
.ltr & {
padding-right: 1em; padding-right: 1em;
}
.rtl & {
padding-left: 1em;
}
margin-bottom: 1em; margin-bottom: 1em;
position: sticky; position: sticky;
top: 0; top: 0;
@ -187,15 +267,26 @@
.d-toc-toggle { .d-toc-toggle {
position: fixed; position: fixed;
bottom: 5px; bottom: 5px;
.ltr & {
right: 16px; right: 16px;
}
.rtl & {
left: 16px;
}
padding: 0.5em 1em; padding: 0.5em 1em;
background: $tertiary; background: $tertiary;
color: $secondary; color: $secondary;
z-index: 3; z-index: 3;
} }
#d-toc > ul { #d-toc > ul {
.ltr & {
margin-left: 20px; margin-left: 20px;
border-left: 1px solid $primary-low; border-left: 1px solid $primary-low;
}
.rtl & {
margin-right: 20px;
border-right: 1px solid $primary-low;
}
&:last-child { &:last-child {
margin-bottom: 5em; margin-bottom: 5em;
} }