Merge pull request #56 from NgArab/master

iliakan · web-flow · commit ff9112738741 · 2020-05-22T18:21:25.000+03:00
Adding RTL Styles
diff --git a/modules/config/webpack.js b/modules/config/webpack.js
@@ -199,7 +199,7 @@ module.exports = function () {
                   nib(),
                   function (style) {
                     style.define('lang', config.lang);
-                    style.define('isRtl', ['ar','fa'].includes(process.env.TUTORIAL_LANG));
+                    style.define('isRTL', ['ar','fa'].includes(process.env.TUTORIAL_LANG));
                     style.define('env', config.env);
                   }
                 ]
diff --git a/modules/frontpage/templates/blocks/_frontpage-content/index.styl b/modules/frontpage/templates/blocks/_frontpage-content/index.styl
@@ -116,7 +116,10 @@
 
     &__title
       position relative
-      padding-left 38px
+      if isRTL
+          padding-right 38px
+      else
+          padding-left 38px
       margin-bottom 2px
 
       &:before
diff --git a/modules/styles/blocks/balance/balance.styl b/modules/styles/blocks/balance/balance.styl
@@ -13,7 +13,10 @@
         font-weight bold
 
     & &__list
-        padding-left 19px
+        if isRTL
+            padding-right 19px
+        else
+            padding-left 19px
 
     & li
         margin 12px 0
diff --git a/modules/styles/blocks/body/body.styl b/modules/styles/blocks/body/body.styl
@@ -8,8 +8,7 @@ body
     color color
     background background
     margin 0
-    if isRtl
-        background-color green
+    if isRTL
         direction rtl
 
 @media print
diff --git a/modules/styles/blocks/breadcrumbs/breadcrumbs.styl b/modules/styles/blocks/breadcrumbs/breadcrumbs.styl
@@ -10,7 +10,10 @@
         margin 0
 
         &::after
-            content "→"
+            if isRTL
+                   content "←"
+            else
+               content "→"
             font-family "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif
 
             color #a9a9a9
diff --git a/modules/styles/blocks/extract/extract.styl b/modules/styles/blocks/extract/extract.styl
@@ -79,7 +79,10 @@
         background #f9edbf
 
     &__content
-        padding-left 20px
+        if isRTL
+            padding-right 20px
+        else
+            padding-left 20px
         padding-right 10px
 
     &__aside_price
diff --git a/modules/styles/blocks/lessons-list/lessons-list.styl b/modules/styles/blocks/lessons-list/lessons-list.styl
@@ -53,7 +53,10 @@ lessons-list-separator = 1px solid #ede8e0
 
     &__lesson_level_1
         background #faf8f7
-        padding-left 46px
+        if isRTL
+            padding-right 46px
+        else
+            padding-left 46px
 
     &__lesson_level_1 > &__link
         font-weight 600
@@ -68,7 +71,10 @@ lessons-list-separator = 1px solid #ede8e0
 
     &__lesson_level_2
         background #fff
-        padding-left 71px
+        if isRTL
+            padding-right 71px
+        else
+            padding-left 71px
 
     &__lesson_level_2:first-child
         border-top lessons-list-separator
@@ -176,7 +182,10 @@ lessons-list-separator = 1px solid #ede8e0
         width: 21px;
         height: 23px;
         line-height: 23px;
-        padding-left: 3px;
+        if isRTL
+            padding-right: 3px;
+        else
+            padding-left: 3px;
 
         text-align center
 
diff --git a/modules/styles/blocks/main/main.styl b/modules/styles/blocks/main/main.styl
@@ -71,7 +71,10 @@ $main-loud
         border-right 2px solid #f5f2f0
 
     &__lesson-nav-next
-        padding-left 15px
+        if isRTL
+            padding-right 15px
+        else
+            padding-left 15px
 
     &__lesson-nav-prev:last-child
         border none
@@ -92,7 +95,11 @@ $main-loud
 
     ul,
     ol
-        padding-left 21px
+        if isRTL
+                padding-right 21px
+        
+        else
+            padding-left 21px
         margin 22px 0 // уравниваем с абзацными отступами
 
         > li
@@ -105,8 +112,12 @@ $main-loud
 
     ul > li::before
         content "●"
-        float left // not position: absolute because the latter doesn't show in iBooks (epub)
-        margin-left -20px
+        if isRTL
+                float right
+                margin-right -20px
+        else 
+            float left // not position: absolute because the latter doesn't show in iBooks (epub)
+            margin-left -20px
         color #000
         font-size 8px
 
diff --git a/modules/styles/blocks/page-footer/page-footer.styl b/modules/styles/blocks/page-footer/page-footer.styl
@@ -23,8 +23,12 @@
         color light_link_color
         background url(slack.svg) left center no-repeat
         background-size 16px
-        padding-left 20px
-        margin-left -4px
+                if isRTL
+                    padding-right 20px
+                    margin-right -4px
+                else
+                    padding-left 20px
+                    margin-left -4px
 
     &__left
         flex-grow 1
diff --git a/modules/styles/blocks/page/page.styl b/modules/styles/blocks/page/page.styl
@@ -3,15 +3,26 @@
     z-index: 0
     padding 0
 
+    .sidebar__toggle
+        if isRTL
+            left auto
+            right 100%
     &_sidebar_on
-        padding-left sidebar_width
+        if isRTL
+            padding-right sidebar_width
+        else
+            padding-left sidebar_width
 
     &__sidebar
         position fixed
         top 0
         bottom 0
-        left 0
-        transform translateX(-100%)
+        if isRTL
+            right 0
+            transform translateX(100%)
+        else
+            left 0
+            transform translateX(-100%)
 
     // используется при переключении видимости панели навигации
     &__inner
@@ -52,7 +63,10 @@
         text-decoration none
 
     &__nav_prev
-        left 0
+        if isRTL
+          right 0
+        else  
+          left 0
         transition transform animation_duration, top animation_duration
 
     &__nav-text
@@ -88,20 +102,29 @@
         background rgba(216, 216, 216, .3)
 
     &__nav_prev &__nav-text::before
-        @extend $font-angle-left
+        if isRTL
+            @extend $font-angle-right
+        else
+            @extend $font-angle-left
 
     &__nav-text-alternate
         display none
 
     &_sidebar_on &__nav_prev
-        transform translateX(sidebar_width)
+        if isRTL
+            transform translateX(- sidebar_width)
+        else
+            transform translateX(sidebar_width)
 
     &__nav_next
-        right 0
+        left 0
         transition top animation_duration
 
     &__nav_next &__nav-text::before
-        @extend $font-angle-right
+        if isRTL
+            @extend $font-angle-left
+        else
+            @extend $font-angle-right
 
 
     &_ebook
@@ -114,7 +137,10 @@
                 display none
 
             pre.line-numbers
-                padding-left 10px
+                if isRTL
+                    padding-right 10px
+                else
+                    padding-left 10px
 
             // ebook reader has smaller page width,
             // so I make sure the code fits it
@@ -196,7 +222,10 @@
             border-color: #7e7e7e
 
         &__nav_prev
-            padding-left 30px
+            if isRTL
+              padding-right 30px
+            else
+              padding-left 30px
 
             border-right-width 0
             border-radius: 6px 0 0 6px
diff --git a/modules/styles/blocks/prism/01-prism.styl b/modules/styles/blocks/prism/01-prism.styl
@@ -57,6 +57,15 @@ pre[class*="language-"]
 .token.punctuation
     color light_gray_color
 
+.token.punctuation,
+.token.function,
+.token.comment,
+.token.string,
+.token.operator,
+.token.number
+    if isRTL
+            background inherit
+
 .namespace
     opacity .7
 
diff --git a/modules/styles/blocks/prism/03-prism-line-numbers.styl b/modules/styles/blocks/prism/03-prism-line-numbers.styl
@@ -1,6 +1,9 @@
 pre.line-numbers
   position relative
-  padding-left 3.8em
+                if isRTL
+                    padding-right 3.8em
+                else
+                    padding-left 3.8em
   counter-reset linenumber
 
 .line-numbers .line-numbers-rows
diff --git a/modules/styles/blocks/sitetoolbar-light/sitetoolbar-light.styl b/modules/styles/blocks/sitetoolbar-light/sitetoolbar-light.styl
@@ -125,8 +125,12 @@
         display block
 
     &__search .text-input__control
-        padding-left 37px
-        padding-right 93px
+                if isRTL
+                    padding-left 93px      
+                    padding-right 37px
+                else
+                    padding-left 37px
+                    padding-right 93px
 
     // we MUST repeat theese rules for each selector to make it work
     &__search .text-input__control::-webkit-input-placeholder
diff --git a/modules/styles/blocks/sitetoolbar/sitetoolbar.styl b/modules/styles/blocks/sitetoolbar/sitetoolbar.styl
@@ -50,7 +50,10 @@
         position relative
 
         min-width 20px
-        padding-left 47px
+                if isRTL
+                    padding-right 47px
+                else
+                    padding-left 47px
 
         transition opacity 0.3s ease-out
 
@@ -247,8 +250,12 @@
         display block
 
     &__search .text-input__control
-        padding-left 37px
-        padding-right 93px
+                if isRTL
+                    padding-left 93px      
+                    padding-right 37px
+                else
+                    padding-left 37px
+                    padding-right 93px
 
     // we MUST repeat theese rules for each selector to make it work
     &__search .text-input__control::-webkit-input-placeholder
@@ -414,13 +421,19 @@
             padding-right 5px
 
         &__user-wrap
-            padding-left 40px
+                if isRTL
+                    padding-right 40px
+                else
+                    padding-left 40px
 
         &__userpic
             left -38px
 
         &__search-wrap
-            padding-right 10px
+                if isRTL
+                    padding-left 10px
+                else
+                    padding-right 10px
 
 
     @media tablet
diff --git a/modules/styles/blocks/toolbar/toolbar.styl b/modules/styles/blocks/toolbar/toolbar.styl
@@ -5,7 +5,10 @@ toolbar_button_background = #c4c2c0
 
     &__tool
         display table-cell
-        padding-left 1px
+                if isRTL
+                    padding-right 1px
+                else
+                    padding-left 1px
 
     & &__button
         @extend $plain-link

Original file line number	Diff line number	Diff line change
`@@ -199,7 +199,7 @@ module.exports = function () {`
`199`	`199`	`nib(),`
`200`	`200`	`function (style) {`
`201`	`201`	`style.define('lang', config.lang);`
`202`		`- style.define('isRtl', ['ar','fa'].includes(process.env.TUTORIAL_LANG));`
	`202`	`+ style.define('isRTL', ['ar','fa'].includes(process.env.TUTORIAL_LANG));`
`203`	`203`	`style.define('env', config.env);`
`204`	`204`	`}`
`205`	`205`	`]`