diff --git a/README.md b/README.md index f3d2c158..eae22b5b 100644 --- a/README.md +++ b/README.md @@ -48,10 +48,23 @@ We are trying to cover as many as languages as possible. At the moment we do cov Please feel free to contribute to this repository in case you want to add your language. ## Right to left Support -We are considering to support right-to-left (rtl) support for layout and components as well. Our goal is to support: -* Persian (Iran, Afghanistan) +We do support RTL layout but some components are not integrated that well. Our focus was on layout, direction and etc. +We do support Persian language at the moment as experimental, and it's not provided in commercial version. +Marketting team would choose either if they want new languages or regions and it's out of the scope. + +Currently supporting experimental + +* Polish ( Poland ) +* Persian ( Iran ) +* English ( World Wide ) + +Target to support languages: + * Arabic (United Arab Emirates, Egypt) +* Turkish ( Turkey ) +* German ( Germany, Austria ) +* Spanish ( Spain ) Please feel free to contribute to the locales for your own country. diff --git a/dist/assets/css/forms-style.css b/dist/assets/css/forms-style.css index 4986ae0e..8d67edf9 100644 --- a/dist/assets/css/forms-style.css +++ b/dist/assets/css/forms-style.css @@ -149,6 +149,11 @@ text-align: left; margin-bottom: 0; } + +body[dir="rtl"] .j-forms label{ + text-align: right; +} + .j-forms .label { font-size: 14px; margin-bottom: 6px; @@ -190,6 +195,14 @@ .j-forms .inline-group .checkbox { padding: 9px 0 8px 32px; } + +body[dir="rtl"] .j-forms .radio, +body[dir="rtl"] .j-forms .checkbox, +body[dir="rtl"] .j-forms .inline-group .radio, +body[dir="rtl"] .j-forms .inline-group .checkbox { + padding: 9px 32px 8px 0px; +} + .j-forms .radio-toggle, .j-forms .checkbox-toggle, .j-forms .inline-group .radio-toggle, @@ -216,6 +229,15 @@ position: absolute; left: -9999px; } + +body[dir="rtl"] .j-forms .radio input, +body[dir="rtl"] .j-forms .checkbox input, +body[dir="rtl"] .j-forms .radio-toggle input, +body[dir="rtl"] .j-forms .checkbox-toggle input { + position: absolute; + right: -9999px; +} + .j-forms .radio i, .j-forms .checkbox i, .j-forms .checkbox-toggle i, @@ -234,6 +256,15 @@ -o-transition: border-color 0.2s; transition: border-color 0.2s; } + +body[dir="rtl"] .j-forms .radio i, +body[dir="rtl"] .j-forms .checkbox i, +body[dir="rtl"] .j-forms .checkbox-toggle i, +body[dir="rtl"] .j-forms .radio-toggle i { + left: auto !important; + right: 0px; +} + .j-forms .radio i, .j-forms .checkbox i { width: 18px; @@ -312,6 +343,12 @@ top: 2px; width: 14px; } +body[dir="rtl"] .j-forms .checkbox-toggle i:before, +body[dir="rtl"] .j-forms .radio-toggle i:before { + left: auto !important; + right: 2px !important; +} + .j-forms .checkbox-toggle input:checked + i:before, .j-forms .radio-toggle input:checked + i:before { left: 28px; diff --git a/dist/index.html b/dist/index.html index 92522e3a..f78b1573 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,2 +1,2 @@