From 43402b506f46b3a75ef12d555ce433ab0c302d37 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Sat, 9 Mar 2019 10:54:08 +0800
Subject: [PATCH] adds RTL support

---
 common/common.scss | 133 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 112 insertions(+), 21 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 4ed8fc9..aab3634 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -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;
       }