Merge pull request vuejs#7 from vuejs-ar/3imed-jaberi-RTL-support

 Add RTL support ..

Author: Aissaoui-Ahmed

themes/vue/layout/partials/header.ejs

@@ -1,9 +1,9 @@
 <div id="header">
+  <ul id="nav">
+    <%- partial('partials/main_menu', { context: 'nav' }) %>
+  </ul>
   <a id="logo" href="<%- url_for("/") %>">
     <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
-  <ul id="nav">
-    <%- partial('partials/main_menu', { context: 'nav' }) %>
-  </ul>
 </div>

themes/vue/layout/partials/main_menu.ejs

@@ -1,12 +1,14 @@
-<li>
-  <form id="search-form">
-    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
-  </form>
-</li>
+
 <%- partial('partials/learn_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
 <li>
   <a href="<%- url_for("/v2/guide/team.html") %>" class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team</a>
 </li>
 <%- partial('partials/support_vue_dropdown') %>
 <%- partial('partials/language_dropdown') %>
+
+<li>
+  <form id="search-form">
+    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
+  </form>
+</li>

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
@@ -101,7 +105,7 @@ input.button
     overflow-y: auto
     position: absolute
     top: 100%
-    right: -15px
+    left: -20px
     background-color: #fff
     padding: 10px 0
     border: 1px solid #ddd

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

@@ -30,7 +30,7 @@ body.docs
   margin: 0
   padding: 0
   position: absolute
-  right: 30px
+  left: 80px
   top: $heading-padding-vertical
   height: $header-height
   line-height: $header-height
@@ -42,6 +42,7 @@ body.docs
     margin: 0 .6em
 
   .nav-dropdown
+    text-align: right
     .nav-link
       &:hover, &.current
         border-bottom: none
@@ -93,7 +94,7 @@ body.docs
   color: $dark
   outline: none
   border-radius: 15px
-  margin-right: 10px
+  margin-left: 10%
   transition: border-color .2s ease
   background: #fff url(../images/search.png) 8px 5px no-repeat
   background-size: 20px
@@ -108,9 +109,11 @@ body.docs
   color: $dark
   font-family: $logo-font
   font-weight: 500
+  position: absolute
+  left: 89%
   img
     vertical-align: middle
-    margin-right: 6px
+    margin-left: 6px
     width: $header-height
     height: $header-height
 

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