done RTL support ..

Author: 3imed-jaberi

themes/vue/source/css/_ad.styl

@@ -5,7 +5,7 @@
   position: fixed
   z-index: 99
   bottom: 10px
-  right: 10px
+  left: 10px
   padding: 10px
   background-color: #fff
   border-radius: 3px

themes/vue/source/css/_common.styl

@@ -41,6 +41,8 @@ code
   margin: 0 2px
   border-radius: 2px
   white-space: nowrap
+  text-align: left
+  direction: ltr
 
 em
   color: $light
@@ -63,7 +65,7 @@ input.button
     text-indent: 1.4em;
     > svg
       position: absolute
-      left: 0.4em
+      right: 0.4em
       top: 0.4em
       width: 2em
   &.white
@@ -79,7 +81,9 @@ input.button
   z-index: 1
   padding: 0 60px 30px
   overflow-x: hidden
-
+  text-align: right
+  direction: rtl
+  
 #nav
   .nav-link
     cursor: pointer

themes/vue/source/css/_demo.styl

@@ -9,6 +9,9 @@
   -ms-user-select: none
   user-select: none
   overflow-x: auto
+  &.ltr
+    text-align: left
+    direction: ltr
   h1
     margin: 0 0 .5em
     font-size: 1.8em

themes/vue/source/css/_header.styl

@@ -42,6 +42,7 @@ body.docs
     margin: 0 .6em
 
   .nav-dropdown
+    text-align: right
     .nav-link
       &:hover, &.current
         border-bottom: none

themes/vue/source/css/_scrimba.styl

@@ -7,15 +7,18 @@
   a
     color #486491 !important
     position relative
-    padding-left 36px
+    padding-right 36px
+    display block
+    font-weight normal !important
+    line-height 25px
     &:before
       content ''
       position absolute
       display block
       width 30px
       height 30px
       top -5px
-      left -4px
+      right -4px
       border-radius 50%
       background-color #73abfe
     &:after
@@ -25,7 +28,7 @@
       width 0
       height 0
       top 5px
-      left 8px
+      right 6px
       border-top 5px solid transparent
       border-bottom 5px solid transparent
       border-left 8px solid #fff

themes/vue/source/css/_sidebar.styl

@@ -2,9 +2,11 @@
 
 .sidebar
   position: absolute
+  direction: ltr
+  border-left: solid 1px #eee
   z-index: 10
   top: $header-height
-  left: 0
+  right: 0
   bottom: 0
   overflow-x: hidden
   overflow-y: auto
@@ -20,13 +22,15 @@
   li
     margin-top: .5em
   .sidebar-inner
+    direction rtl
     width: 260px
-    padding: $content-padding-top + 40px 0px 60px 20px
+    padding: $content-padding-top + 40px 20px 60px 0px
   .version-select
     vertical-align: middle
     margin-left: 5px
   .menu-root
     padding-left: 0
+    padding-inline-start: 0
   .sidebar-link
     color: $light
     &.current
@@ -63,19 +67,21 @@
       margin: 0
 
 @media screen and (max-width: 900px)
+  #ad
+    display: none
   .sidebar
     position: fixed
     z-index: 10
     background-color: #f9f9f9
     height: 100%
     top: 0
-    left: 0
+    right: 0
     box-shadow: 0 0 10px rgba(0,0,0,.2)
     transition: all .4s cubic-bezier(0.4, 0, 0, 1)
-    -webkit-transform: translate(-280px, 0)
-    transform: translate(-280px, 0)
+    -webkit-transform: translate(280px, 0)
+    transform: translate(280px, 0)
     .sidebar-inner
-      padding: 50px 10px 10px 20px
+      padding: 10px 10px 10px 20px
       box-sizing: border-box
     .sidebar-inner-index
       padding: 10px 10px 10px 20px
@@ -87,6 +93,11 @@
     &.open
       -webkit-transform: translate(0, 0)
       transform: translate(0, 0)
+      padding-inline-start: 10px
+    ul
+      padding-inline-start: 10px
+    div.list
+      display: none
 
 @media print
   .sidebar

themes/vue/source/css/_sponsors-index.styl

@@ -1,4 +1,5 @@
 #sponsors
+  direction: rtl
   text-align: center
   padding: 35px 40px 45px
   background-color: #f6f6f6

themes/vue/source/css/_sponsors-sidebar.styl

@@ -36,7 +36,7 @@
   position fixed
   z-index 99
   top 90px
-  right 20px
+  left 20px
 
 @media screen and (min-width: 1300px)
   #sidebar-sponsors-platinum-left

themes/vue/source/css/_syntax.styl

@@ -12,6 +12,10 @@ pre code
   display: block
 
   .hljs
+    &-comment
+      display inline-block
+      direction rtl
+
     &-tag,
     &-tag &-title,
     &-change,

themes/vue/source/css/_vue-mastery.styl

@@ -8,15 +8,18 @@
   a
     color #486491 !important
     position relative
-    padding-left 36px
+    padding-right 36px
+    display block
+    font-weight normal !important
+    line-height 25px
     &:before
       content ''
       position absolute
       display block
       width 30px
       height 30px
       top -5px
-      left -4px
+      right -4px
       border-radius 50%
       background-color #73abfe
     &:after
@@ -26,7 +29,7 @@
       width 0
       height 0
       top 5px
-      left 8px
+      right 6px
       border-top 5px solid transparent
       border-bottom 5px solid transparent
-      border-left 8px solid #fff
+      border-left 8px solid #fff

themes/vue/source/css/index.styl

@@ -29,6 +29,7 @@ body
 
 #hero,
 #news
+  direction: rtl
   padding: $space 40px 30px
   background-color: #fff
   .inner
@@ -44,12 +45,13 @@ body
   .hero-logo
     width: 215px
     height: 215px
-    float: right
-    margin-right: 60px
+    float: left
+    margin-left: 60px
   h1
-    font-weight: 300
+    font-weight: 200
     margin: 0
-    font-size: 3.2em
+    font-size: 2.5em
+    line-height: 2em
   h2
     font-family: $logo-font
     font-weight: 500
@@ -88,7 +90,7 @@ body
   .newsletter-input
     width: 100%
     box-sizing: border-box
-    padding: 10px 80px 10px 20px
+    padding: 10px 20px 10px 80px
     height: 50px
     border-radius: 50px
     border: 1px solid #ccc
@@ -101,7 +103,7 @@ body
     padding: 4px 20px
     margin: 0
     height: calc(100% - 8px)
-    right: 4px
+    left: 4px
     top: 4px
 
 #special-sponsor
@@ -121,6 +123,7 @@ body
 #highlights
   background-color: #fff
   padding-bottom: 70px
+  direction: rtl
   .inner
     max-width: $width
     margin: 0 auto
@@ -144,6 +147,7 @@ body
   padding: $space 0
   color: #fff
   text-align: center
+  direction: rtl
   .social-icon
     margin 0 5px
     svg

themes/vue/source/css/page.styl

@@ -54,7 +54,7 @@
     display: inline-block
     vertical-align: middle
     width: 280px
-    margin-left: 20px
+    margin-right: 20px
   h1
     margin: 0 0 1em
   h2, h3
@@ -80,9 +80,9 @@
       content: "#"
       color: $green
       position: absolute
-      left: -0.7em
+      right: -0.7em
       margin-top: -0.05em
-      padding-right: 0.5em
+      padding-left: 0.5em
       font-size: 1.2em
       line-height: 1
       font-weight: bold
@@ -138,20 +138,22 @@
       background-color: #f8f8f8
       code
         background-color: #efefef
+        text-align: left
+        direction: ltr
   p
     &.tip, &.success
       padding: 12px 24px 12px 30px
       margin: 2em 0
-      border-left-width: 4px
-      border-left-style: solid
+      border-right-width: 4px
+      border-right-style: solid
       background-color: $codebg
       position: relative
       border-bottom-right-radius: $radius
       border-top-right-radius: $radius
       &:before
         position: absolute
         top: 14px
-        left: -12px
+        right: -12px
         color: #fff
         width: 20px
         height: 20px
@@ -166,12 +168,12 @@
       em
         color: $medium
     &.tip
-      border-left-color: $red
+      border-right-color: $red
       &:before
         content: "!"
         background-color: $red
     &.success
-      border-left-color: $green
+      border-right-color: $green
       &:before
         content: "\f00c"
         font-family: FontAwesome
@@ -181,6 +183,10 @@
   margin-top: 2em
   height: 1em
 
+/* just for display the table in ltr  */
+.installation-guide
+  table
+    direction: ltr;
 .footer
   color: $light
   margin-top: 2em
@@ -204,8 +210,8 @@
     position: relative
     padding: 0
     bottom: 0
-    right: 0
-    float: right
+    left: 0
+    float: left
     padding: 0 0 20px 30px
 
 @media screen and (max-width: 900px)