From 024c6dc9623d309d15866f15d7d28b803455413f Mon Sep 17 00:00:00 2001
From: Mohammad Hossein Rabiee <rabiee.m.h@gmail.com>
Date: Sun, 17 Sep 2017 00:13:17 +0430
Subject: [PATCH] Slate RTL (#842)

---
 README.md                          |   2 +
 source/fonts/slate.eot             | Bin
 source/fonts/slate.svg             |   0
 source/fonts/slate.ttf             | Bin
 source/fonts/slate.woff            | Bin
 source/fonts/slate.woff2           | Bin
 source/stylesheets/_rtl.scss       | 140 +++++++++++++++++++++++++++++
 source/stylesheets/screen.css.scss |   1 +
 8 files changed, 143 insertions(+)
 mode change 100755 => 100644 source/fonts/slate.eot
 mode change 100755 => 100644 source/fonts/slate.svg
 mode change 100755 => 100644 source/fonts/slate.ttf
 mode change 100755 => 100644 source/fonts/slate.woff
 mode change 100755 => 100644 source/fonts/slate.woff2
 create mode 100644 source/stylesheets/_rtl.scss

diff --git a/README.md b/README.md
index 9fcdb52..dbdecd6 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ Features
 
 * **Let your users update your documentation for you** — By default, your Slate-generated documentation is hosted in a public GitHub repository. Not only does this mean you get free hosting for your docs with GitHub Pages, but it also makes it simple for other developers to make pull requests to your docs if they find typos or other problems. Of course, if you don't want to use ], you're also welcome to host your docs elsewhere.
 
+* **RTL Support** Full right-to-left layout for RTL languages such as Arabic, Persian (Farsi), Hebrew etc.
+
 Getting started with Slate is super easy! Simply fork this repository and follow the instructions below. Or, if you'd like to check out what Slate is capable of, take a look at the [sample docs](http://lord.github.io/slate).
 
 Getting Started with Slate
diff --git a/source/fonts/slate.eot b/source/fonts/slate.eot
old mode 100755
new mode 100644
diff --git a/source/fonts/slate.svg b/source/fonts/slate.svg
old mode 100755
new mode 100644
diff --git a/source/fonts/slate.ttf b/source/fonts/slate.ttf
old mode 100755
new mode 100644
diff --git a/source/fonts/slate.woff b/source/fonts/slate.woff
old mode 100755
new mode 100644
diff --git a/source/fonts/slate.woff2 b/source/fonts/slate.woff2
old mode 100755
new mode 100644
diff --git a/source/stylesheets/_rtl.scss b/source/stylesheets/_rtl.scss
new file mode 100644
index 0000000..720719a
--- /dev/null
+++ b/source/stylesheets/_rtl.scss
@@ -0,0 +1,140 @@
+////////////////////////////////////////////////////////////////////////////////
+// RTL Styles Variables
+////////////////////////////////////////////////////////////////////////////////
+
+$default: auto;
+
+////////////////////////////////////////////////////////////////////////////////
+// TABLE OF CONTENTS
+////////////////////////////////////////////////////////////////////////////////
+
+#toc>ul>li>a>span {
+    float: left;
+}
+
+.toc-wrapper {
+    transition: right 0.3s ease-in-out !important;
+    left: $default !important;
+    #{right}: 0;
+}
+
+.toc-h2 {
+    padding-#{right}: $nav-padding + $nav-indent;
+}
+
+#nav-button {
+    #{right}: 0;
+    transition: right 0.3s ease-in-out;
+    &.open {
+        right: $nav-width
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
+////////////////////////////////////////////////////////////////////////////////
+.page-wrapper {
+    margin-#{left}: $default !important;
+    margin-#{right}: $nav-width;
+    .dark-box {
+        #{right}: $default;
+        #{left}: 0;
+    }
+}
+
+.lang-selector {
+    width: $default !important;
+    a {
+        float: right;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// CODE SAMPLE STYLES
+////////////////////////////////////////////////////////////////////////////////
+.content {
+    &>h1,
+    &>h2,
+    &>h3,
+    &>h4,
+    &>h5,
+    &>h6,
+    &>p,
+    &>table,
+    &>ul,
+    &>ol,
+    &>aside,
+    &>dl {
+        margin-#{left}: $examples-width;
+        margin-#{right}: $default !important;
+    }
+    &>ul,
+    &>ol {
+        padding-#{right}: $main-padding + 15px;
+    }
+    table {
+        th,
+        td {
+            text-align: right;
+        }
+    }
+    dd {
+        margin-#{right}: 15px;
+    }
+    aside {
+        aside:before {
+            padding-#{left}: 0.5em;
+        }
+        .search-highlight {
+            background: linear-gradient(to top right, #F7E633 0%, #F1D32F 100%);
+        }
+    }
+    pre,
+    blockquote {
+        float: left !important;
+        clear: left !important;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// TYPOGRAPHY
+////////////////////////////////////////////////////////////////////////////////
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+aside {
+    text-align: right;
+    direction: rtl;
+}
+
+.toc-wrapper {
+    text-align: right;
+    direction: rtl;
+    font-weight: 100 !important;
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// RESPONSIVE DESIGN
+////////////////////////////////////////////////////////////////////////////////
+@media (max-width: $tablet-width) {
+    .toc-wrapper {
+        #{right}: -$nav-width;
+        &.open {
+            #{right}: 0;
+        }
+    }
+    .page-wrapper {
+        margin-#{right}: 0;
+    }
+}
+
+@media (max-width: $phone-width) {
+    %left-col {
+        margin-#{left}: 0;
+    }
+}
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 8b1d744..e96680c 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -2,6 +2,7 @@
 @import 'normalize';
 @import 'variables';
 @import 'icon-font';
+@import 'rtl';
 
 /*
 Copyright 2008-2013 Concur Technologies, Inc.