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