Add styles for RTL layout

leandrodaher · Apr 5, 2023 · 2ca3ded · 2ca3ded
1 parent 263a736
commit 2ca3ded
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 3 deletions.
diff --git a/build/css/intlTelInput.css b/build/css/intlTelInput.css
@@ -34,14 +34,16 @@
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555; }
+ [dir=rtl] .iti__arrow {
+ margin-right: 6px;
+ margin-left: 0; }
  .iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555; }
  .iti__country-list {
  position: absolute;
  z-index: 2;
  list-style: none;
- text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
@@ -65,6 +67,8 @@
  margin-bottom: 5px;
  border-bottom: 1px solid #CCC; }
  .iti__country {
+ display: flex;
+ align-items: center;
  padding: 5px 10px;
  outline: none; }
  .iti__dial-code {
@@ -75,13 +79,23 @@
  vertical-align: middle; }
  .iti__flag-box, .iti__country-name {
  margin-right: 6px; }
+ [dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
+ margin-right: 0;
+ margin-left: 6px; }
  .iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0; }
+ [dir=rtl] .iti--allow-dropdown input, [dir=rtl] .iti--allow-dropdown input[type=text], [dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input, [dir=rtl] .iti--separate-dial-code input[type=text], [dir=rtl] .iti--separate-dial-code input[type=tel] {
+ padding-right: 52px;
+ padding-left: 6px;
+ margin-right: 0; }
  .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
  right: auto;
  left: 0; }
+ [dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
+ right: 0;
+ left: auto; }
  .iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer; }
  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {

diff --git a/demo_rtl.html b/demo_rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html dir="rtl">
+
+<head>
+ <meta charset="utf-8">
+ <title>International Telephone Input</title>
+ <link rel="stylesheet" href="build/css/intlTelInput.css">
+ <link rel="stylesheet" href="build/css/demo.css">
+</head>
+
+<body>
+ <h1>International Telephone Input</h1>
+ <form>
+ <input id="phone" name="phone" type="tel">
+ <button type="submit">Submit</button>
+ </form>
+
+ <script src="build/js/intlTelInput.js"></script>
+ <script>
+ var input = document.querySelector("#phone");
+ window.intlTelInput(input, {
+ // allowDropdown: false,
+ // autoHideDialCode: false,
+ // autoPlaceholder: "off",
+ // dropdownContainer: document.body,
+ // excludeCountries: ["us"],
+ // formatOnDisplay: false,
+ // geoIpLookup: function(callback) {
+ // $.get("http:https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
+ // var countryCode = (resp && resp.country) ? resp.country : "";
+ // callback(countryCode);
+ // });
+ // },
+ // hiddenInput: "full_number",
+ // initialCountry: "auto",
+ // localizedCountries: { 'de': 'Deutschland' },
+ // nationalMode: false,
+ // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
+ // placeholderNumberType: "MOBILE",
+ // preferredCountries: ['cn', 'jp'],
+ // separateDialCode: true,
+ utilsScript: "build/js/utils.js",
+ });
+ </script>
+</body>
+
+</html>
diff --git a/src/css/intlTelInput.scss b/src/css/intlTelInput.scss
@@ -110,6 +110,11 @@ $mobilePopupMargin: 30px !default;
  border-right: $triangleBorder solid transparent;
  border-top: $arrowHeight solid $arrowColor;
 
+ [dir=rtl] & {
+ margin-right: $arrowPadding;
+ margin-left: 0;
+ }
+
  &--up {
  border-top: none;
  border-bottom: $arrowHeight solid $arrowColor;
@@ -124,8 +129,6 @@ $mobilePopupMargin: 30px !default;
 
  // override default list styles
  list-style: none;
- // in case any container has text-align:center
- text-align: left;
 
  // place menu above the input element
  &--dropup {
@@ -174,6 +177,8 @@ $mobilePopupMargin: 30px !default;
  // each country item in dropdown (we must have separate class to differentiate from dividers)
  &__country {
  // Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines
+ display: flex;
+ align-items: center;
  padding: 5px 10px;
  outline: none;
  }
@@ -192,6 +197,11 @@ $mobilePopupMargin: 30px !default;
  }
  &__flag-box, &__country-name {
  margin-right: 6px;
+
+ [dir=rtl] & {
+ margin-right: 0;
+ margin-left: 6px;
+ }
  }
 
  // these settings are independent of each other, but both move selected flag to left of input
@@ -200,10 +210,21 @@ $mobilePopupMargin: 30px !default;
  padding-right: $inputPadding;
  padding-left: $selectedFlagArrowWidth + $inputPadding;
  margin-left: 0;
+
+ [dir=rtl] & {
+ padding-right: $selectedFlagArrowWidth + $inputPadding;
+ padding-left: $inputPadding;
+ margin-right: 0;
+ }
  }
  .iti__flag-container {
  right: auto;
  left: 0;
+
+ [dir=rtl] & {
+ right: 0;
+ left: auto;
+ }
  }
  }