diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
index 0816e99d41..a916a038f7 100644
--- a/themes/vue/layout/partials/header.ejs
+++ b/themes/vue/layout/partials/header.ejs
@@ -1,9 +1,9 @@
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
index 7474e22f56..f0cb3d32b2 100644
--- a/themes/vue/layout/partials/main_menu.ejs
+++ b/themes/vue/layout/partials/main_menu.ejs
@@ -1,8 +1,4 @@
-
-
-
+
<%- partial('partials/learn_dropdown') %>
<%- partial('partials/ecosystem_dropdown') %>
@@ -10,3 +6,9 @@
<%- partial('partials/support_vue_dropdown') %>
<%- partial('partials/language_dropdown') %>
+
+
+
+
\ No newline at end of file
diff --git a/themes/vue/source/css/_ad.styl b/themes/vue/source/css/_ad.styl
index 253b7cd19e..aa048c40cb 100644
--- a/themes/vue/source/css/_ad.styl
+++ b/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
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
index 7c84f711a1..023a7ca0ae 100644
--- a/themes/vue/source/css/_common.styl
+++ b/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
diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
index d83b11062b..1477797835 100644
--- a/themes/vue/source/css/_demo.styl
+++ b/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
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
index b63e8c62c9..0b0aff5eb5 100644
--- a/themes/vue/source/css/_header.styl
+++ b/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
diff --git a/themes/vue/source/css/_scrimba.styl b/themes/vue/source/css/_scrimba.styl
index be2cd296a5..d754b20fc8 100644
--- a/themes/vue/source/css/_scrimba.styl
+++ b/themes/vue/source/css/_scrimba.styl
@@ -7,7 +7,10 @@
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
@@ -15,7 +18,7 @@
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
diff --git a/themes/vue/source/css/_sidebar.styl b/themes/vue/source/css/_sidebar.styl
index 7389f74556..7eed122a78 100644
--- a/themes/vue/source/css/_sidebar.styl
+++ b/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
diff --git a/themes/vue/source/css/_sponsors-index.styl b/themes/vue/source/css/_sponsors-index.styl
index 3290e2bcda..1d542e2859 100644
--- a/themes/vue/source/css/_sponsors-index.styl
+++ b/themes/vue/source/css/_sponsors-index.styl
@@ -1,4 +1,5 @@
#sponsors
+ direction: rtl
text-align: center
padding: 35px 40px 45px
background-color: #f6f6f6
diff --git a/themes/vue/source/css/_sponsors-sidebar.styl b/themes/vue/source/css/_sponsors-sidebar.styl
index 1cada3a13d..b5e35a9774 100644
--- a/themes/vue/source/css/_sponsors-sidebar.styl
+++ b/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
diff --git a/themes/vue/source/css/_syntax.styl b/themes/vue/source/css/_syntax.styl
index ea683ac95a..56424af1d8 100644
--- a/themes/vue/source/css/_syntax.styl
+++ b/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,
diff --git a/themes/vue/source/css/_vue-mastery.styl b/themes/vue/source/css/_vue-mastery.styl
index 57ed75d303..d7bedab018 100644
--- a/themes/vue/source/css/_vue-mastery.styl
+++ b/themes/vue/source/css/_vue-mastery.styl
@@ -8,7 +8,10 @@
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
@@ -16,7 +19,7 @@
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
\ No newline at end of file
+ border-left 8px solid #fff
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 3795a04679..fa4fc3fc9a 100644
--- a/themes/vue/source/css/index.styl
+++ b/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
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index c229717971..6f3474b629 100644
--- a/themes/vue/source/css/page.styl
+++ b/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,12 +138,14 @@
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
@@ -151,7 +153,7 @@
&: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)