intl-tel-input-rails 11.0.14 → 12.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3c1d0988f6040e334d0d0f477c285fa03e730b5f
-  data.tar.gz: a59b836b0efbdcb54f2405006569670744a6dda2
+  metadata.gz: 7d1baa9b3a718f5b83d71cb8e658ad8a69063522
+  data.tar.gz: 82b9f1f6bd7912519efe84ae3ffdd8d0a5340d2f
 SHA512:
-  metadata.gz: 71a0443b29d296f37ba74eef68e6f1952823df72920e3f68aa73bde76061a946062d69643c6c3dd1c4d2299ad2023ff0d0b9fb716897ccf631d56dd533d9ce13
-  data.tar.gz: 5f62dd3c9790beca9c02e4342ddddf63d847a90341b167c4b03717d2d7b42ec4f5a21881a1ff7e95c17778b4350b4a6256465db54601c8c1dc7dd43a78e709b0
+  metadata.gz: c2a3a59fce5a531c595f5ff13493aa607322c7d3d15a002569f3dbce4b5d0f5b90a1bfb3af6b5bf8482b72cabc19c07de53aa49df10389e999c62667e58af4e5
+  data.tar.gz: 6234f84bfe36cc60de05825bec7bc412f2d9953d80c9448e70cb5866b57f8fe361ed7e943f6c06fc44991f7fb1118203257db5d253879fdb1f47db687aa1e710

data/{LICENSE.txt → MIT-LICENSE}

@@ -1,6 +1,4 @@
-Copyright (c) 2014, 2015 Ilias Spyropoulos
-
-MIT License
+Copyright (c) 2014-2018 Ilias Spyropoulos
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -50,6 +50,6 @@ More options for [initializing the plugin](https://github.com/jackocnr/intl-tel-
 
 ## Versioning
 
-intl-tel-input-rails 11.0.14.x == intl-tel-input 11.0.14
+intl-tel-input-rails 12.3.0.x == intl-tel-input 12.3.0
 
 Where x is used for gem fixes while keeping the same original library version.

data/app/assets/javascripts/intlTelInput.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v11.0.14
+ * International Telephone Input v12.3.0
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -36,6 +36,8 @@
         formatOnDisplay: true,
         // geoIp lookup function
         geoIpLookup: null,
+        // inject a hidden input with this name, and on submit, populate it with the result of getNumber
+        hiddenInput: "",
         // initial country
         initialCountry: "",
         // don't insert international dial codes
@@ -146,6 +148,7 @@
                 this.countries = allCountries.filter(function(country) {
                     return lowerCaseOnlyCountries.indexOf(country.iso2) > -1;
                 });
+                this.countries.sort(this._countryNameSort);
             } else if (this.options.excludeCountries.length) {
                 var lowerCaseExcludeCountries = this.options.excludeCountries.map(function(country) {
                     return country.toLowerCase();
@@ -157,6 +160,10 @@
                 this.countries = allCountries;
             }
         },
+        // sort by country name
+        _countryNameSort: function(a, b) {
+            return a.name.localeCompare(b.name);
+        },
         // process the countryCodes map
         _processCountryCodes: function() {
             this.countryCodes = {};
@@ -245,6 +252,12 @@
                 // a little hack so we don't break anything
                 this.countryListItems = $();
             }
+            if (this.options.hiddenInput) {
+                this.hiddenInput = $("<input>", {
+                    type: "hidden",
+                    name: this.options.hiddenInput
+                }).insertAfter(this.telInput);
+            }
         },
         // add a country <li> to the countryList <ul> container
         _appendListItems: function(countries, className) {
@@ -273,8 +286,9 @@
         // 4. picking the first country
         _setInitialState: function() {
             var val = this.telInput.val();
-            // if we already have a dial code, and it's not a regionlessNanp we can go ahead and set the flag, else fall back to default
-            if (this._getDialCode(val) && !this._isRegionlessNanp(val)) {
+            // if we already have a dial code, and it's not a regionlessNanp, we can go ahead and set the flag, else fall back to the default country
+            // UPDATE: actually we do want to set the flag for a regionlessNanp in one situation: if we're in nationalMode and there's no initialCountry - otherwise we lose the +1 and we're left with an invalid number
+            if (this._getDialCode(val) && (!this._isRegionlessNanp(val) || this.options.nationalMode && !this.options.initialCountry)) {
                 this._updateFlagFromNumber(val);
             } else if (this.options.initialCountry !== "auto") {
                 // see if we should select a flag
@@ -308,6 +322,19 @@
             if (this.options.allowDropdown) {
                 this._initDropdownListeners();
             }
+            if (this.hiddenInput) {
+                this._initHiddenInputListener();
+            }
+        },
+        // update hidden input on form submit
+        _initHiddenInputListener: function() {
+            var that = this;
+            var form = this.telInput.closest("form");
+            if (form.length) {
+                form.submit(function() {
+                    that.hiddenInput.val(that.getNumber());
+                });
+            }
         },
         // initialise the dropdown listeners
         _initDropdownListeners: function() {
@@ -495,6 +522,7 @@
             this._bindDropdownListeners();
             // update the arrow
             this.selectedFlagInner.children(".iti-arrow").addClass("up");
+            this.telInput.trigger("open:countrydropdown");
         },
         // decide where to position dropdown (depends on position within viewport, and scroll)
         _setDropdownPosition: function() {
@@ -779,6 +807,7 @@
                 }
                 this.dropdown.detach();
             }
+            this.telInput.trigger("close:countrydropdown");
         },
         // check if an element is visible within it's container, else scroll until it is
         _scrollTo: function(element, middle) {
@@ -1005,6 +1034,11 @@
             if (flagChanged) {
                 this._triggerCountryChange();
             }
+        },
+        // set the placeholder number typ
+        setPlaceholderNumberType: function(type) {
+            this.options.placeholderNumberType = type;
+            this._updatePlaceholder();
         }
     };
     // using https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/Extending-jQuery-Boilerplate
@@ -1083,7 +1117,7 @@
     // default options
     $.fn[pluginName].defaults = defaults;
     // version
-    $.fn[pluginName].version = "11.0.14";
+    $.fn[pluginName].version = "12.3.0";
     // Array of country objects for the flag dropdown.
     // Here is the criteria for the plugin to support a given country/territory
     // - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
@@ -1098,7 +1132,7 @@
     //    Order (if >1 country with same dial code),
     //    Area codes
     // ]
-    var allCountries = [ [ "Afghanistan (‫افغانستان‬‎)", "af", "93" ], [ "Albania (Shqipëri)", "al", "355" ], [ "Algeria (‫الجزائر‬‎)", "dz", "213" ], [ "American Samoa", "as", "1684" ], [ "Andorra", "ad", "376" ], [ "Angola", "ao", "244" ], [ "Anguilla", "ai", "1264" ], [ "Antigua and Barbuda", "ag", "1268" ], [ "Argentina", "ar", "54" ], [ "Armenia (Հայաստան)", "am", "374" ], [ "Aruba", "aw", "297" ], [ "Australia", "au", "61", 0 ], [ "Austria (Österreich)", "at", "43" ], [ "Azerbaijan (Azərbaycan)", "az", "994" ], [ "Bahamas", "bs", "1242" ], [ "Bahrain (‫البحرين‬‎)", "bh", "973" ], [ "Bangladesh (বাংলাদেশ)", "bd", "880" ], [ "Barbados", "bb", "1246" ], [ "Belarus (Беларусь)", "by", "375" ], [ "Belgium (België)", "be", "32" ], [ "Belize", "bz", "501" ], [ "Benin (Bénin)", "bj", "229" ], [ "Bermuda", "bm", "1441" ], [ "Bhutan (འབྲུག)", "bt", "975" ], [ "Bolivia", "bo", "591" ], [ "Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387" ], [ "Botswana", "bw", "267" ], [ "Brazil (Brasil)", "br", "55" ], [ "British Indian Ocean Territory", "io", "246" ], [ "British Virgin Islands", "vg", "1284" ], [ "Brunei", "bn", "673" ], [ "Bulgaria (България)", "bg", "359" ], [ "Burkina Faso", "bf", "226" ], [ "Burundi (Uburundi)", "bi", "257" ], [ "Cambodia (កម្ពុជា)", "kh", "855" ], [ "Cameroon (Cameroun)", "cm", "237" ], [ "Canada", "ca", "1", 1, [ "204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905" ] ], [ "Cape Verde (Kabu Verdi)", "cv", "238" ], [ "Caribbean Netherlands", "bq", "599", 1 ], [ "Cayman Islands", "ky", "1345" ], [ "Central African Republic (République centrafricaine)", "cf", "236" ], [ "Chad (Tchad)", "td", "235" ], [ "Chile", "cl", "56" ], [ "China (中国)", "cn", "86" ], [ "Christmas Island", "cx", "61", 2 ], [ "Cocos (Keeling) Islands", "cc", "61", 1 ], [ "Colombia", "co", "57" ], [ "Comoros (‫جزر القمر‬‎)", "km", "269" ], [ "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243" ], [ "Congo (Republic) (Congo-Brazzaville)", "cg", "242" ], [ "Cook Islands", "ck", "682" ], [ "Costa Rica", "cr", "506" ], [ "Côte d’Ivoire", "ci", "225" ], [ "Croatia (Hrvatska)", "hr", "385" ], [ "Cuba", "cu", "53" ], [ "Curaçao", "cw", "599", 0 ], [ "Cyprus (Κύπρος)", "cy", "357" ], [ "Czech Republic (Česká republika)", "cz", "420" ], [ "Denmark (Danmark)", "dk", "45" ], [ "Djibouti", "dj", "253" ], [ "Dominica", "dm", "1767" ], [ "Dominican Republic (República Dominicana)", "do", "1", 2, [ "809", "829", "849" ] ], [ "Ecuador", "ec", "593" ], [ "Egypt (‫مصر‬‎)", "eg", "20" ], [ "El Salvador", "sv", "503" ], [ "Equatorial Guinea (Guinea Ecuatorial)", "gq", "240" ], [ "Eritrea", "er", "291" ], [ "Estonia (Eesti)", "ee", "372" ], [ "Ethiopia", "et", "251" ], [ "Falkland Islands (Islas Malvinas)", "fk", "500" ], [ "Faroe Islands (Føroyar)", "fo", "298" ], [ "Fiji", "fj", "679" ], [ "Finland (Suomi)", "fi", "358", 0 ], [ "France", "fr", "33" ], [ "French Guiana (Guyane française)", "gf", "594" ], [ "French Polynesia (Polynésie française)", "pf", "689" ], [ "Gabon", "ga", "241" ], [ "Gambia", "gm", "220" ], [ "Georgia (საქართველო)", "ge", "995" ], [ "Germany (Deutschland)", "de", "49" ], [ "Ghana (Gaana)", "gh", "233" ], [ "Gibraltar", "gi", "350" ], [ "Greece (Ελλάδα)", "gr", "30" ], [ "Greenland (Kalaallit Nunaat)", "gl", "299" ], [ "Grenada", "gd", "1473" ], [ "Guadeloupe", "gp", "590", 0 ], [ "Guam", "gu", "1671" ], [ "Guatemala", "gt", "502" ], [ "Guernsey", "gg", "44", 1 ], [ "Guinea (Guinée)", "gn", "224" ], [ "Guinea-Bissau (Guiné Bissau)", "gw", "245" ], [ "Guyana", "gy", "592" ], [ "Haiti", "ht", "509" ], [ "Honduras", "hn", "504" ], [ "Hong Kong (香港)", "hk", "852" ], [ "Hungary (Magyarország)", "hu", "36" ], [ "Iceland (Ísland)", "is", "354" ], [ "India (भारत)", "in", "91" ], [ "Indonesia", "id", "62" ], [ "Iran (‫ایران‬‎)", "ir", "98" ], [ "Iraq (‫العراق‬‎)", "iq", "964" ], [ "Ireland", "ie", "353" ], [ "Isle of Man", "im", "44", 2 ], [ "Israel (‫ישראל‬‎)", "il", "972" ], [ "Italy (Italia)", "it", "39", 0 ], [ "Jamaica", "jm", "1876" ], [ "Japan (日本)", "jp", "81" ], [ "Jersey", "je", "44", 3 ], [ "Jordan (‫الأردن‬‎)", "jo", "962" ], [ "Kazakhstan (Казахстан)", "kz", "7", 1 ], [ "Kenya", "ke", "254" ], [ "Kiribati", "ki", "686" ], [ "Kosovo", "xk", "383" ], [ "Kuwait (‫الكويت‬‎)", "kw", "965" ], [ "Kyrgyzstan (Кыргызстан)", "kg", "996" ], [ "Laos (ລາວ)", "la", "856" ], [ "Latvia (Latvija)", "lv", "371" ], [ "Lebanon (‫لبنان‬‎)", "lb", "961" ], [ "Lesotho", "ls", "266" ], [ "Liberia", "lr", "231" ], [ "Libya (‫ليبيا‬‎)", "ly", "218" ], [ "Liechtenstein", "li", "423" ], [ "Lithuania (Lietuva)", "lt", "370" ], [ "Luxembourg", "lu", "352" ], [ "Macau (澳門)", "mo", "853" ], [ "Macedonia (FYROM) (Македонија)", "mk", "389" ], [ "Madagascar (Madagasikara)", "mg", "261" ], [ "Malawi", "mw", "265" ], [ "Malaysia", "my", "60" ], [ "Maldives", "mv", "960" ], [ "Mali", "ml", "223" ], [ "Malta", "mt", "356" ], [ "Marshall Islands", "mh", "692" ], [ "Martinique", "mq", "596" ], [ "Mauritania (‫موريتانيا‬‎)", "mr", "222" ], [ "Mauritius (Moris)", "mu", "230" ], [ "Mayotte", "yt", "262", 1 ], [ "Mexico (México)", "mx", "52" ], [ "Micronesia", "fm", "691" ], [ "Moldova (Republica Moldova)", "md", "373" ], [ "Monaco", "mc", "377" ], [ "Mongolia (Монгол)", "mn", "976" ], [ "Montenegro (Crna Gora)", "me", "382" ], [ "Montserrat", "ms", "1664" ], [ "Morocco (‫المغرب‬‎)", "ma", "212", 0 ], [ "Mozambique (Moçambique)", "mz", "258" ], [ "Myanmar (Burma) (မြန်မာ)", "mm", "95" ], [ "Namibia (Namibië)", "na", "264" ], [ "Nauru", "nr", "674" ], [ "Nepal (नेपाल)", "np", "977" ], [ "Netherlands (Nederland)", "nl", "31" ], [ "New Caledonia (Nouvelle-Calédonie)", "nc", "687" ], [ "New Zealand", "nz", "64" ], [ "Nicaragua", "ni", "505" ], [ "Niger (Nijar)", "ne", "227" ], [ "Nigeria", "ng", "234" ], [ "Niue", "nu", "683" ], [ "Norfolk Island", "nf", "672" ], [ "North Korea (조선 민주주의 인민 공화국)", "kp", "850" ], [ "Northern Mariana Islands", "mp", "1670" ], [ "Norway (Norge)", "no", "47", 0 ], [ "Oman (‫عُمان‬‎)", "om", "968" ], [ "Pakistan (‫پاکستان‬‎)", "pk", "92" ], [ "Palau", "pw", "680" ], [ "Palestine (‫فلسطين‬‎)", "ps", "970" ], [ "Panama (Panamá)", "pa", "507" ], [ "Papua New Guinea", "pg", "675" ], [ "Paraguay", "py", "595" ], [ "Peru (Perú)", "pe", "51" ], [ "Philippines", "ph", "63" ], [ "Poland (Polska)", "pl", "48" ], [ "Portugal", "pt", "351" ], [ "Puerto Rico", "pr", "1", 3, [ "787", "939" ] ], [ "Qatar (‫قطر‬‎)", "qa", "974" ], [ "Réunion (La Réunion)", "re", "262", 0 ], [ "Romania (România)", "ro", "40" ], [ "Russia (Россия)", "ru", "7", 0 ], [ "Rwanda", "rw", "250" ], [ "Saint Barthélemy (Saint-Barthélemy)", "bl", "590", 1 ], [ "Saint Helena", "sh", "290" ], [ "Saint Kitts and Nevis", "kn", "1869" ], [ "Saint Lucia", "lc", "1758" ], [ "Saint Martin (Saint-Martin (partie française))", "mf", "590", 2 ], [ "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508" ], [ "Saint Vincent and the Grenadines", "vc", "1784" ], [ "Samoa", "ws", "685" ], [ "San Marino", "sm", "378" ], [ "São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239" ], [ "Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966" ], [ "Senegal (Sénégal)", "sn", "221" ], [ "Serbia (Србија)", "rs", "381" ], [ "Seychelles", "sc", "248" ], [ "Sierra Leone", "sl", "232" ], [ "Singapore", "sg", "65" ], [ "Sint Maarten", "sx", "1721" ], [ "Slovakia (Slovensko)", "sk", "421" ], [ "Slovenia (Slovenija)", "si", "386" ], [ "Solomon Islands", "sb", "677" ], [ "Somalia (Soomaaliya)", "so", "252" ], [ "South Africa", "za", "27" ], [ "South Korea (대한민국)", "kr", "82" ], [ "South Sudan (‫جنوب السودان‬‎)", "ss", "211" ], [ "Spain (España)", "es", "34" ], [ "Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94" ], [ "Sudan (‫السودان‬‎)", "sd", "249" ], [ "Suriname", "sr", "597" ], [ "Svalbard and Jan Mayen", "sj", "47", 1 ], [ "Swaziland", "sz", "268" ], [ "Sweden (Sverige)", "se", "46" ], [ "Switzerland (Schweiz)", "ch", "41" ], [ "Syria (‫سوريا‬‎)", "sy", "963" ], [ "Taiwan (台灣)", "tw", "886" ], [ "Tajikistan", "tj", "992" ], [ "Tanzania", "tz", "255" ], [ "Thailand (ไทย)", "th", "66" ], [ "Timor-Leste", "tl", "670" ], [ "Togo", "tg", "228" ], [ "Tokelau", "tk", "690" ], [ "Tonga", "to", "676" ], [ "Trinidad and Tobago", "tt", "1868" ], [ "Tunisia (‫تونس‬‎)", "tn", "216" ], [ "Turkey (Türkiye)", "tr", "90" ], [ "Turkmenistan", "tm", "993" ], [ "Turks and Caicos Islands", "tc", "1649" ], [ "Tuvalu", "tv", "688" ], [ "U.S. Virgin Islands", "vi", "1340" ], [ "Uganda", "ug", "256" ], [ "Ukraine (Україна)", "ua", "380" ], [ "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971" ], [ "United Kingdom", "gb", "44", 0 ], [ "United States", "us", "1", 0 ], [ "Uruguay", "uy", "598" ], [ "Uzbekistan (Oʻzbekiston)", "uz", "998" ], [ "Vanuatu", "vu", "678" ], [ "Vatican City (Città del Vaticano)", "va", "39", 1 ], [ "Venezuela", "ve", "58" ], [ "Vietnam (Việt Nam)", "vn", "84" ], [ "Wallis and Futuna", "wf", "681" ], [ "Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1 ], [ "Yemen (‫اليمن‬‎)", "ye", "967" ], [ "Zambia", "zm", "260" ], [ "Zimbabwe", "zw", "263" ], [ "Åland Islands", "ax", "358", 1 ] ];
+    var allCountries = [ [ "Afghanistan (‫افغانستان‬‎)", "af", "93" ], [ "Albania (Shqipëri)", "al", "355" ], [ "Algeria (‫الجزائر‬‎)", "dz", "213" ], [ "American Samoa", "as", "1684" ], [ "Andorra", "ad", "376" ], [ "Angola", "ao", "244" ], [ "Anguilla", "ai", "1264" ], [ "Antigua and Barbuda", "ag", "1268" ], [ "Argentina", "ar", "54" ], [ "Armenia (Հայաստան)", "am", "374" ], [ "Aruba", "aw", "297" ], [ "Australia", "au", "61", 0 ], [ "Austria (Österreich)", "at", "43" ], [ "Azerbaijan (Azərbaycan)", "az", "994" ], [ "Bahamas", "bs", "1242" ], [ "Bahrain (‫البحرين‬‎)", "bh", "973" ], [ "Bangladesh (বাংলাদেশ)", "bd", "880" ], [ "Barbados", "bb", "1246" ], [ "Belarus (Беларусь)", "by", "375" ], [ "Belgium (België)", "be", "32" ], [ "Belize", "bz", "501" ], [ "Benin (Bénin)", "bj", "229" ], [ "Bermuda", "bm", "1441" ], [ "Bhutan (འབྲུག)", "bt", "975" ], [ "Bolivia", "bo", "591" ], [ "Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387" ], [ "Botswana", "bw", "267" ], [ "Brazil (Brasil)", "br", "55" ], [ "British Indian Ocean Territory", "io", "246" ], [ "British Virgin Islands", "vg", "1284" ], [ "Brunei", "bn", "673" ], [ "Bulgaria (България)", "bg", "359" ], [ "Burkina Faso", "bf", "226" ], [ "Burundi (Uburundi)", "bi", "257" ], [ "Cambodia (កម្ពុជា)", "kh", "855" ], [ "Cameroon (Cameroun)", "cm", "237" ], [ "Canada", "ca", "1", 1, [ "204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905" ] ], [ "Cape Verde (Kabu Verdi)", "cv", "238" ], [ "Caribbean Netherlands", "bq", "599", 1 ], [ "Cayman Islands", "ky", "1345" ], [ "Central African Republic (République centrafricaine)", "cf", "236" ], [ "Chad (Tchad)", "td", "235" ], [ "Chile", "cl", "56" ], [ "China (中国)", "cn", "86" ], [ "Christmas Island", "cx", "61", 2 ], [ "Cocos (Keeling) Islands", "cc", "61", 1 ], [ "Colombia", "co", "57" ], [ "Comoros (‫جزر القمر‬‎)", "km", "269" ], [ "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243" ], [ "Congo (Republic) (Congo-Brazzaville)", "cg", "242" ], [ "Cook Islands", "ck", "682" ], [ "Costa Rica", "cr", "506" ], [ "Côte d’Ivoire", "ci", "225" ], [ "Croatia (Hrvatska)", "hr", "385" ], [ "Cuba", "cu", "53" ], [ "Curaçao", "cw", "599", 0 ], [ "Cyprus (Κύπρος)", "cy", "357" ], [ "Czech Republic (Česká republika)", "cz", "420" ], [ "Denmark (Danmark)", "dk", "45" ], [ "Djibouti", "dj", "253" ], [ "Dominica", "dm", "1767" ], [ "Dominican Republic (República Dominicana)", "do", "1", 2, [ "809", "829", "849" ] ], [ "Ecuador", "ec", "593" ], [ "Egypt (‫مصر‬‎)", "eg", "20" ], [ "El Salvador", "sv", "503" ], [ "Equatorial Guinea (Guinea Ecuatorial)", "gq", "240" ], [ "Eritrea", "er", "291" ], [ "Estonia (Eesti)", "ee", "372" ], [ "Ethiopia", "et", "251" ], [ "Falkland Islands (Islas Malvinas)", "fk", "500" ], [ "Faroe Islands (Føroyar)", "fo", "298" ], [ "Fiji", "fj", "679" ], [ "Finland (Suomi)", "fi", "358", 0 ], [ "France", "fr", "33" ], [ "French Guiana (Guyane française)", "gf", "594" ], [ "French Polynesia (Polynésie française)", "pf", "689" ], [ "Gabon", "ga", "241" ], [ "Gambia", "gm", "220" ], [ "Georgia (საქართველო)", "ge", "995" ], [ "Germany (Deutschland)", "de", "49" ], [ "Ghana (Gaana)", "gh", "233" ], [ "Gibraltar", "gi", "350" ], [ "Greece (Ελλάδα)", "gr", "30" ], [ "Greenland (Kalaallit Nunaat)", "gl", "299" ], [ "Grenada", "gd", "1473" ], [ "Guadeloupe", "gp", "590", 0 ], [ "Guam", "gu", "1671" ], [ "Guatemala", "gt", "502" ], [ "Guernsey", "gg", "44", 1 ], [ "Guinea (Guinée)", "gn", "224" ], [ "Guinea-Bissau (Guiné Bissau)", "gw", "245" ], [ "Guyana", "gy", "592" ], [ "Haiti", "ht", "509" ], [ "Honduras", "hn", "504" ], [ "Hong Kong (香港)", "hk", "852" ], [ "Hungary (Magyarország)", "hu", "36" ], [ "Iceland (Ísland)", "is", "354" ], [ "India (भारत)", "in", "91" ], [ "Indonesia", "id", "62" ], [ "Iran (‫ایران‬‎)", "ir", "98" ], [ "Iraq (‫العراق‬‎)", "iq", "964" ], [ "Ireland", "ie", "353" ], [ "Isle of Man", "im", "44", 2 ], [ "Israel (‫ישראל‬‎)", "il", "972" ], [ "Italy (Italia)", "it", "39", 0 ], [ "Jamaica", "jm", "1", 4, [ "876", "658" ] ], [ "Japan (日本)", "jp", "81" ], [ "Jersey", "je", "44", 3 ], [ "Jordan (‫الأردن‬‎)", "jo", "962" ], [ "Kazakhstan (Казахстан)", "kz", "7", 1 ], [ "Kenya", "ke", "254" ], [ "Kiribati", "ki", "686" ], [ "Kosovo", "xk", "383" ], [ "Kuwait (‫الكويت‬‎)", "kw", "965" ], [ "Kyrgyzstan (Кыргызстан)", "kg", "996" ], [ "Laos (ລາວ)", "la", "856" ], [ "Latvia (Latvija)", "lv", "371" ], [ "Lebanon (‫لبنان‬‎)", "lb", "961" ], [ "Lesotho", "ls", "266" ], [ "Liberia", "lr", "231" ], [ "Libya (‫ليبيا‬‎)", "ly", "218" ], [ "Liechtenstein", "li", "423" ], [ "Lithuania (Lietuva)", "lt", "370" ], [ "Luxembourg", "lu", "352" ], [ "Macau (澳門)", "mo", "853" ], [ "Macedonia (FYROM) (Македонија)", "mk", "389" ], [ "Madagascar (Madagasikara)", "mg", "261" ], [ "Malawi", "mw", "265" ], [ "Malaysia", "my", "60" ], [ "Maldives", "mv", "960" ], [ "Mali", "ml", "223" ], [ "Malta", "mt", "356" ], [ "Marshall Islands", "mh", "692" ], [ "Martinique", "mq", "596" ], [ "Mauritania (‫موريتانيا‬‎)", "mr", "222" ], [ "Mauritius (Moris)", "mu", "230" ], [ "Mayotte", "yt", "262", 1 ], [ "Mexico (México)", "mx", "52" ], [ "Micronesia", "fm", "691" ], [ "Moldova (Republica Moldova)", "md", "373" ], [ "Monaco", "mc", "377" ], [ "Mongolia (Монгол)", "mn", "976" ], [ "Montenegro (Crna Gora)", "me", "382" ], [ "Montserrat", "ms", "1664" ], [ "Morocco (‫المغرب‬‎)", "ma", "212", 0 ], [ "Mozambique (Moçambique)", "mz", "258" ], [ "Myanmar (Burma) (မြန်မာ)", "mm", "95" ], [ "Namibia (Namibië)", "na", "264" ], [ "Nauru", "nr", "674" ], [ "Nepal (नेपाल)", "np", "977" ], [ "Netherlands (Nederland)", "nl", "31" ], [ "New Caledonia (Nouvelle-Calédonie)", "nc", "687" ], [ "New Zealand", "nz", "64" ], [ "Nicaragua", "ni", "505" ], [ "Niger (Nijar)", "ne", "227" ], [ "Nigeria", "ng", "234" ], [ "Niue", "nu", "683" ], [ "Norfolk Island", "nf", "672" ], [ "North Korea (조선 민주주의 인민 공화국)", "kp", "850" ], [ "Northern Mariana Islands", "mp", "1670" ], [ "Norway (Norge)", "no", "47", 0 ], [ "Oman (‫عُمان‬‎)", "om", "968" ], [ "Pakistan (‫پاکستان‬‎)", "pk", "92" ], [ "Palau", "pw", "680" ], [ "Palestine (‫فلسطين‬‎)", "ps", "970" ], [ "Panama (Panamá)", "pa", "507" ], [ "Papua New Guinea", "pg", "675" ], [ "Paraguay", "py", "595" ], [ "Peru (Perú)", "pe", "51" ], [ "Philippines", "ph", "63" ], [ "Poland (Polska)", "pl", "48" ], [ "Portugal", "pt", "351" ], [ "Puerto Rico", "pr", "1", 3, [ "787", "939" ] ], [ "Qatar (‫قطر‬‎)", "qa", "974" ], [ "Réunion (La Réunion)", "re", "262", 0 ], [ "Romania (România)", "ro", "40" ], [ "Russia (Россия)", "ru", "7", 0 ], [ "Rwanda", "rw", "250" ], [ "Saint Barthélemy", "bl", "590", 1 ], [ "Saint Helena", "sh", "290" ], [ "Saint Kitts and Nevis", "kn", "1869" ], [ "Saint Lucia", "lc", "1758" ], [ "Saint Martin (Saint-Martin (partie française))", "mf", "590", 2 ], [ "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508" ], [ "Saint Vincent and the Grenadines", "vc", "1784" ], [ "Samoa", "ws", "685" ], [ "San Marino", "sm", "378" ], [ "São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239" ], [ "Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966" ], [ "Senegal (Sénégal)", "sn", "221" ], [ "Serbia (Србија)", "rs", "381" ], [ "Seychelles", "sc", "248" ], [ "Sierra Leone", "sl", "232" ], [ "Singapore", "sg", "65" ], [ "Sint Maarten", "sx", "1721" ], [ "Slovakia (Slovensko)", "sk", "421" ], [ "Slovenia (Slovenija)", "si", "386" ], [ "Solomon Islands", "sb", "677" ], [ "Somalia (Soomaaliya)", "so", "252" ], [ "South Africa", "za", "27" ], [ "South Korea (대한민국)", "kr", "82" ], [ "South Sudan (‫جنوب السودان‬‎)", "ss", "211" ], [ "Spain (España)", "es", "34" ], [ "Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94" ], [ "Sudan (‫السودان‬‎)", "sd", "249" ], [ "Suriname", "sr", "597" ], [ "Svalbard and Jan Mayen", "sj", "47", 1 ], [ "Swaziland", "sz", "268" ], [ "Sweden (Sverige)", "se", "46" ], [ "Switzerland (Schweiz)", "ch", "41" ], [ "Syria (‫سوريا‬‎)", "sy", "963" ], [ "Taiwan (台灣)", "tw", "886" ], [ "Tajikistan", "tj", "992" ], [ "Tanzania", "tz", "255" ], [ "Thailand (ไทย)", "th", "66" ], [ "Timor-Leste", "tl", "670" ], [ "Togo", "tg", "228" ], [ "Tokelau", "tk", "690" ], [ "Tonga", "to", "676" ], [ "Trinidad and Tobago", "tt", "1868" ], [ "Tunisia (‫تونس‬‎)", "tn", "216" ], [ "Turkey (Türkiye)", "tr", "90" ], [ "Turkmenistan", "tm", "993" ], [ "Turks and Caicos Islands", "tc", "1649" ], [ "Tuvalu", "tv", "688" ], [ "U.S. Virgin Islands", "vi", "1340" ], [ "Uganda", "ug", "256" ], [ "Ukraine (Україна)", "ua", "380" ], [ "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971" ], [ "United Kingdom", "gb", "44", 0 ], [ "United States", "us", "1", 0 ], [ "Uruguay", "uy", "598" ], [ "Uzbekistan (Oʻzbekiston)", "uz", "998" ], [ "Vanuatu", "vu", "678" ], [ "Vatican City (Città del Vaticano)", "va", "39", 1 ], [ "Venezuela", "ve", "58" ], [ "Vietnam (Việt Nam)", "vn", "84" ], [ "Wallis and Futuna (Wallis-et-Futuna)", "wf", "681" ], [ "Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1 ], [ "Yemen (‫اليمن‬‎)", "ye", "967" ], [ "Zambia", "zm", "260" ], [ "Zimbabwe", "zw", "263" ], [ "Åland Islands", "ax", "358", 1 ] ];
     // loop over all of the countries above
     for (var i = 0; i < allCountries.length; i++) {
         var c = allCountries[i];
@@ -1110,4 +1144,4 @@
             areaCodes: c[4] || null
         };
     }
-});
+});

data/app/assets/stylesheets/intlTelInput.scss

@@ -12,968 +12,334 @@
  *     // import the scss file after the overrides
  *     @import "bower_component/intl-tel-input/src/css/intlTelInput";
  */
+
+// rgba is needed for the selected flag hover state to blend in with
+// the border-highlighting some browsers give the input on focus
+$hoverColor: rgba(0, 0, 0, 0.05) !default;
+$greyText: #999 !default;
+$greyBorder: #CCC !default;
+
+$flagHeight: 15px !default;
+$flagWidth: 20px !default;
+$flagPadding: 8px !default;
+// this border width is used for the popup and divider, but it is also
+// assumed to be the border width of the input, which we do not control
+$borderWidth: 1px !default;
+
+$arrowHeight: 4px !default;
+$arrowWidth: 6px !default;
+$triangleBorder: 3px !default;
+$arrowPadding: 6px !default;
+$arrowColor: #555 !default;
+
+$inputPadding: 6px !default;
+$selectedFlagWidth: $flagWidth + (2 * $flagPadding) !default;
+$selectedFlagArrowWidth: $flagWidth + $flagPadding + $arrowWidth + (2 * $arrowPadding) !default;
+$selectedFlagDialCodeWidth: $selectedFlagWidth + $flagPadding !default;
+$selectedFlagArrowDialCodeWidth: $selectedFlagArrowWidth + $flagPadding !default;
+
+// image related variables
+$flagsImagePath: "" !default;
+$flagsImageName: "flags" !default;
+$flagsImageExtension: "png" !default;
+
+// enough space for them to click off to close
+$mobilePopupMargin: 30px;
+
 .intl-tel-input {
+  // need position on the container so the selected flag can be
+  // absolutely positioned over the input
   position: relative;
-  display: inline-block; }
-  .intl-tel-input * {
+  // keep the input's default inline properties
+  display: inline-block;
+
+  // paul irish says this is ok
+  // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+  * {
     box-sizing: border-box;
-    -moz-box-sizing: border-box; }
-  .intl-tel-input .hide {
-    display: none; }
-  .intl-tel-input .v-hide {
-    visibility: hidden; }
-  .intl-tel-input input, .intl-tel-input input[type=text], .intl-tel-input input[type=tel] {
+    -moz-box-sizing: border-box;
+  }
+
+  .hide {
+    display: none;
+  }
+  // need this during init, to get the height of the dropdown
+  .v-hide {
+    visibility: hidden;
+  }
+
+  // specify types to increase specificity e.g. to override bootstrap v2.3
+  input, input[type=text], input[type=tel] {
     position: relative;
+    // input is bottom level, below selected flag and dropdown
     z-index: 0;
+
+    // any vertical margin the user has on their inputs would no longer work as expected
+    // because we wrap everything in a container div. i justify the use of !important
+    // here because i don't think the user should ever have vertical margin here - when
+    // the input is wrapped in a container, vertical margin messes up alignment with other
+    // inline elements (e.g. an adjacent button) in firefox, and probably other browsers.
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    padding-right: 36px;
-    margin-right: 0; }
-  .intl-tel-input .flag-container {
+
+    // make space for the selected flag
+    // Note: no !important here, as the user may want to tweak this so that the
+    // perceived input padding matches their existing styles
+    padding-right: $selectedFlagWidth;
+
+    // any margin-right here will push the selected-flag away
+    margin-right: 0;
+  }
+
+  .flag-container {
+    // positioned over the top of the input
     position: absolute;
+    // full height
     top: 0;
     bottom: 0;
     right: 0;
-    padding: 1px; }
-  .intl-tel-input .selected-flag {
+    // prevent the highlighted child from overlapping the input border
+    padding: $borderWidth;
+  }
+
+  .selected-flag {
+    // render above the input
     z-index: 1;
     position: relative;
-    width: 36px;
+    width: $selectedFlagWidth;
+    // this must be full-height both for the hover highlight, and to push down the
+    // dropdown so it appears below the input
     height: 100%;
-    padding: 0 0 0 8px; }
-    .intl-tel-input .selected-flag .iti-flag {
+    padding: 0 0 0 $flagPadding;
+
+    // vertically center the flag
+    .iti-flag {
       position: absolute;
       top: 0;
       bottom: 0;
-      margin: auto; }
-    .intl-tel-input .selected-flag .iti-arrow {
+      margin: auto;
+    }
+
+    .iti-arrow {
       position: absolute;
+      // split the difference between the flag and the arrow height to verically center
       top: 50%;
-      margin-top: -2px;
-      right: 6px;
+      margin-top: -1 * ($arrowHeight / 2);
+      right: $arrowPadding;
+
+      // css triangle
       width: 0;
       height: 0;
-      border-left: 3px solid transparent;
-      border-right: 3px solid transparent;
-      border-top: 4px solid #555; }
-      .intl-tel-input .selected-flag .iti-arrow.up {
+      border-left: $triangleBorder solid transparent;
+      border-right: $triangleBorder solid transparent;
+      border-top: $arrowHeight solid $arrowColor;
+
+      &.up {
         border-top: none;
-        border-bottom: 4px solid #555; }
-  .intl-tel-input .country-list {
+        border-bottom: $arrowHeight solid $arrowColor;
+      }
+    }
+  }
+
+  // the dropdown
+  .country-list {
     position: absolute;
+    // popup so render above everything else
     z-index: 2;
+
+    // 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 {
+      bottom: 100%;
+      margin-bottom: (-$borderWidth);
+    }
+
+    // dropdown flags need consistent width, so wrap in a container
+    .flag-box {
+      display: inline-block;
+      width: $flagWidth;
+    }
+
     padding: 0;
-    margin: 0 0 0 -1px;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
+    // margin-left to compensate for the padding on the parent
+    margin: 0 0 0 (-$borderWidth);
+
+    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
     background-color: white;
-    border: 1px solid #CCC;
+    border: $borderWidth solid $greyBorder;
+
+    // don't let the contents wrap AKA the container will be as wide as the contents
     white-space: nowrap;
-    max-height: 200px;
-    overflow-y: scroll; }
-    .intl-tel-input .country-list.dropup {
-      bottom: 100%;
-      margin-bottom: -1px; }
-    .intl-tel-input .country-list .flag-box {
-      display: inline-block;
-      width: 20px; }
+    // except on small screens, where we force the dropdown width to match the input
     @media (max-width: 500px) {
-      .intl-tel-input .country-list {
-        white-space: normal; } }
-    .intl-tel-input .country-list .divider {
+      white-space: normal;
+    }
+
+    max-height: 200px;
+    overflow-y: scroll;
+
+    // the divider below the preferred countries
+    .divider {
       padding-bottom: 5px;
       margin-bottom: 5px;
-      border-bottom: 1px solid #CCC; }
-    .intl-tel-input .country-list .country {
-      padding: 5px 10px; }
-      .intl-tel-input .country-list .country .dial-code {
-        color: #999; }
-    .intl-tel-input .country-list .country.highlight {
-      background-color: rgba(0, 0, 0, 0.05); }
-    .intl-tel-input .country-list .flag-box, .intl-tel-input .country-list .country-name, .intl-tel-input .country-list .dial-code {
-      vertical-align: middle; }
-    .intl-tel-input .country-list .flag-box, .intl-tel-input .country-list .country-name {
-      margin-right: 6px; }
-  .intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=text], .intl-tel-input.separate-dial-code input[type=tel] {
-    padding-right: 6px;
-    padding-left: 52px;
-    margin-left: 0; }
-  .intl-tel-input.allow-dropdown .flag-container, .intl-tel-input.separate-dial-code .flag-container {
-    right: auto;
-    left: 0; }
-  .intl-tel-input.allow-dropdown .selected-flag, .intl-tel-input.separate-dial-code .selected-flag {
-    width: 46px; }
-  .intl-tel-input.allow-dropdown .flag-container:hover {
-    cursor: pointer; }
-    .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
-      background-color: rgba(0, 0, 0, 0.05); }
-  .intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover, .intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover {
-    cursor: default; }
-    .intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover .selected-flag, .intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover .selected-flag {
-      background-color: transparent; }
-  .intl-tel-input.separate-dial-code .selected-flag {
-    background-color: rgba(0, 0, 0, 0.05);
-    display: table; }
-  .intl-tel-input.separate-dial-code .selected-dial-code {
-    display: table-cell;
-    vertical-align: middle;
-    padding-left: 28px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-2 input, .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] {
-    padding-left: 66px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag {
-    width: 60px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] {
-    padding-left: 76px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
-    width: 70px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-3 input, .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] {
-    padding-left: 74px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag {
-    width: 68px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
-    padding-left: 84px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
-    width: 78px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-4 input, .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] {
-    padding-left: 82px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
-    width: 76px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
-    padding-left: 92px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
-    width: 86px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-5 input, .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] {
-    padding-left: 90px; }
-  .intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag {
-    width: 84px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] {
-    padding-left: 100px; }
-  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
-    width: 94px; }
-  .intl-tel-input.iti-container {
+      border-bottom: $borderWidth solid $greyBorder;
+    }
+
+    // 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
+      padding: 5px 10px;
+      // the dial codes after the country names are greyed out
+      .dial-code {
+        color: $greyText;
+      }
+    }
+    .country.highlight {
+      background-color: $hoverColor;
+    }
+
+    // spacing between country flag, name and dial code
+    .flag-box, .country-name, .dial-code {
+      vertical-align: middle;
+    }
+    .flag-box, .country-name {
+      margin-right: 6px;
+    }
+  }
+
+  &.allow-dropdown, &.separate-dial-code {
+    input, input[type=text], input[type=tel] {
+      padding-right: $inputPadding;
+      padding-left: $selectedFlagArrowWidth + $inputPadding;
+      margin-left: 0;
+    }
+    .flag-container {
+      right: auto;
+      left: 0;
+    }
+    .selected-flag {
+      width: $selectedFlagArrowWidth;
+    }
+  }
+
+  &.allow-dropdown {
+    // hover state - show flag is clickable
+    .flag-container:hover {
+      cursor: pointer;
+      .selected-flag {
+        background-color: $hoverColor;
+      }
+    }
+    // disable hover state when input is disabled
+    input[disabled] + .flag-container:hover, input[readonly] + .flag-container:hover {
+      cursor: default;
+      .selected-flag {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.separate-dial-code {
+    .selected-flag {
+      // now that we have digits in this section, it needs this visual separation
+      background-color: $hoverColor;
+      // for vertical centering
+      display: table;
+    }
+    .selected-dial-code {
+      // for vertical centering
+      display: table-cell;
+      vertical-align: middle;
+
+      padding-left: $flagWidth + $flagPadding;
+    }
+
+    // .iti-sdc is for Separate Dial Code, with lengths from 2-5 because shortest is "+1", longest is "+1684"
+    $charLength: 8px;
+    @for $i from 2 through 5 {
+      &.iti-sdc-#{$i} {
+        input, input[type=text], input[type=tel] {
+          padding-left: $selectedFlagDialCodeWidth + $inputPadding + ($i * $charLength);
+        }
+        .selected-flag {
+          width: $selectedFlagDialCodeWidth + ($i * $charLength);
+        }
+      }
+      &.allow-dropdown.iti-sdc-#{$i} {
+        input, input[type=text], input[type=tel] {
+          padding-left: $selectedFlagArrowDialCodeWidth + $inputPadding + ($i * $charLength);
+        }
+        .selected-flag {
+          width: $selectedFlagArrowDialCodeWidth + ($i * $charLength);
+        }
+      }
+    }
+  }
+
+  // if dropdownContainer option is set, increase z-index to prevent display issues
+  &.iti-container {
     position: absolute;
     top: -1000px;
     left: -1000px;
+    // higher than default Bootstrap modal z-index of 1050
     z-index: 1060;
-    padding: 1px; }
-    .intl-tel-input.iti-container:hover {
-      cursor: pointer; }
-
-.iti-mobile .intl-tel-input.iti-container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
-  position: fixed; }
-
-.iti-mobile .intl-tel-input .country-list {
-  max-height: 100%;
-  width: 100%; }
-  .iti-mobile .intl-tel-input .country-list .country {
-    padding: 10px 10px;
-    line-height: 1.5em; }
+    // to keep styling consistent with .flag-container
+    padding: $borderWidth;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+// overrides for mobile popup
+.iti-mobile .intl-tel-input {
+  &.iti-container {
+    top: $mobilePopupMargin;
+    bottom: $mobilePopupMargin;
+    left: $mobilePopupMargin;
+    right: $mobilePopupMargin;
+    position: fixed;
+  }
+  .country-list {
+    max-height: 100%;
+    width: 100%;
+    .country {
+      padding: 10px 10px;
+      // increase line height because dropdown copy is v likely to overflow on mobile and when it does it needs to be well spaced
+      line-height: 1.5em;
+    }
+  }
+}
+
+
 
-.iti-flag {
-  width: 20px; }
-  .iti-flag.be {
-    width: 18px; }
-  .iti-flag.ch {
-    width: 15px; }
-  .iti-flag.mc {
-    width: 19px; }
-  .iti-flag.ne {
-    width: 18px; }
-  .iti-flag.np {
-    width: 13px; }
-  .iti-flag.va {
-    width: 15px; }
-  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
-    .iti-flag {
-      background-size: 5630px 15px; } }
-  .iti-flag.ac {
-    height: 10px;
-    background-position: 0px 0px; }
-  .iti-flag.ad {
-    height: 14px;
-    background-position: -22px 0px; }
-  .iti-flag.ae {
-    height: 10px;
-    background-position: -44px 0px; }
-  .iti-flag.af {
-    height: 14px;
-    background-position: -66px 0px; }
-  .iti-flag.ag {
-    height: 14px;
-    background-position: -88px 0px; }
-  .iti-flag.ai {
-    height: 10px;
-    background-position: -110px 0px; }
-  .iti-flag.al {
-    height: 15px;
-    background-position: -132px 0px; }
-  .iti-flag.am {
-    height: 10px;
-    background-position: -154px 0px; }
-  .iti-flag.ao {
-    height: 14px;
-    background-position: -176px 0px; }
-  .iti-flag.aq {
-    height: 14px;
-    background-position: -198px 0px; }
-  .iti-flag.ar {
-    height: 13px;
-    background-position: -220px 0px; }
-  .iti-flag.as {
-    height: 10px;
-    background-position: -242px 0px; }
-  .iti-flag.at {
-    height: 14px;
-    background-position: -264px 0px; }
-  .iti-flag.au {
-    height: 10px;
-    background-position: -286px 0px; }
-  .iti-flag.aw {
-    height: 14px;
-    background-position: -308px 0px; }
-  .iti-flag.ax {
-    height: 13px;
-    background-position: -330px 0px; }
-  .iti-flag.az {
-    height: 10px;
-    background-position: -352px 0px; }
-  .iti-flag.ba {
-    height: 10px;
-    background-position: -374px 0px; }
-  .iti-flag.bb {
-    height: 14px;
-    background-position: -396px 0px; }
-  .iti-flag.bd {
-    height: 12px;
-    background-position: -418px 0px; }
-  .iti-flag.be {
-    height: 15px;
-    background-position: -440px 0px; }
-  .iti-flag.bf {
-    height: 14px;
-    background-position: -460px 0px; }
-  .iti-flag.bg {
-    height: 12px;
-    background-position: -482px 0px; }
-  .iti-flag.bh {
-    height: 12px;
-    background-position: -504px 0px; }
-  .iti-flag.bi {
-    height: 12px;
-    background-position: -526px 0px; }
-  .iti-flag.bj {
-    height: 14px;
-    background-position: -548px 0px; }
-  .iti-flag.bl {
-    height: 14px;
-    background-position: -570px 0px; }
-  .iti-flag.bm {
-    height: 10px;
-    background-position: -592px 0px; }
-  .iti-flag.bn {
-    height: 10px;
-    background-position: -614px 0px; }
-  .iti-flag.bo {
-    height: 14px;
-    background-position: -636px 0px; }
-  .iti-flag.bq {
-    height: 14px;
-    background-position: -658px 0px; }
-  .iti-flag.br {
-    height: 14px;
-    background-position: -680px 0px; }
-  .iti-flag.bs {
-    height: 10px;
-    background-position: -702px 0px; }
-  .iti-flag.bt {
-    height: 14px;
-    background-position: -724px 0px; }
-  .iti-flag.bv {
-    height: 15px;
-    background-position: -746px 0px; }
-  .iti-flag.bw {
-    height: 14px;
-    background-position: -768px 0px; }
-  .iti-flag.by {
-    height: 10px;
-    background-position: -790px 0px; }
-  .iti-flag.bz {
-    height: 14px;
-    background-position: -812px 0px; }
-  .iti-flag.ca {
-    height: 10px;
-    background-position: -834px 0px; }
-  .iti-flag.cc {
-    height: 10px;
-    background-position: -856px 0px; }
-  .iti-flag.cd {
-    height: 15px;
-    background-position: -878px 0px; }
-  .iti-flag.cf {
-    height: 14px;
-    background-position: -900px 0px; }
-  .iti-flag.cg {
-    height: 14px;
-    background-position: -922px 0px; }
-  .iti-flag.ch {
-    height: 15px;
-    background-position: -944px 0px; }
-  .iti-flag.ci {
-    height: 14px;
-    background-position: -961px 0px; }
-  .iti-flag.ck {
-    height: 10px;
-    background-position: -983px 0px; }
-  .iti-flag.cl {
-    height: 14px;
-    background-position: -1005px 0px; }
-  .iti-flag.cm {
-    height: 14px;
-    background-position: -1027px 0px; }
-  .iti-flag.cn {
-    height: 14px;
-    background-position: -1049px 0px; }
-  .iti-flag.co {
-    height: 14px;
-    background-position: -1071px 0px; }
-  .iti-flag.cp {
-    height: 14px;
-    background-position: -1093px 0px; }
-  .iti-flag.cr {
-    height: 12px;
-    background-position: -1115px 0px; }
-  .iti-flag.cu {
-    height: 10px;
-    background-position: -1137px 0px; }
-  .iti-flag.cv {
-    height: 12px;
-    background-position: -1159px 0px; }
-  .iti-flag.cw {
-    height: 14px;
-    background-position: -1181px 0px; }
-  .iti-flag.cx {
-    height: 10px;
-    background-position: -1203px 0px; }
-  .iti-flag.cy {
-    height: 13px;
-    background-position: -1225px 0px; }
-  .iti-flag.cz {
-    height: 14px;
-    background-position: -1247px 0px; }
-  .iti-flag.de {
-    height: 12px;
-    background-position: -1269px 0px; }
-  .iti-flag.dg {
-    height: 10px;
-    background-position: -1291px 0px; }
-  .iti-flag.dj {
-    height: 14px;
-    background-position: -1313px 0px; }
-  .iti-flag.dk {
-    height: 15px;
-    background-position: -1335px 0px; }
-  .iti-flag.dm {
-    height: 10px;
-    background-position: -1357px 0px; }
-  .iti-flag.do {
-    height: 13px;
-    background-position: -1379px 0px; }
-  .iti-flag.dz {
-    height: 14px;
-    background-position: -1401px 0px; }
-  .iti-flag.ea {
-    height: 14px;
-    background-position: -1423px 0px; }
-  .iti-flag.ec {
-    height: 14px;
-    background-position: -1445px 0px; }
-  .iti-flag.ee {
-    height: 13px;
-    background-position: -1467px 0px; }
-  .iti-flag.eg {
-    height: 14px;
-    background-position: -1489px 0px; }
-  .iti-flag.eh {
-    height: 10px;
-    background-position: -1511px 0px; }
-  .iti-flag.er {
-    height: 10px;
-    background-position: -1533px 0px; }
-  .iti-flag.es {
-    height: 14px;
-    background-position: -1555px 0px; }
-  .iti-flag.et {
-    height: 10px;
-    background-position: -1577px 0px; }
-  .iti-flag.eu {
-    height: 14px;
-    background-position: -1599px 0px; }
-  .iti-flag.fi {
-    height: 12px;
-    background-position: -1621px 0px; }
-  .iti-flag.fj {
-    height: 10px;
-    background-position: -1643px 0px; }
-  .iti-flag.fk {
-    height: 10px;
-    background-position: -1665px 0px; }
-  .iti-flag.fm {
-    height: 11px;
-    background-position: -1687px 0px; }
-  .iti-flag.fo {
-    height: 15px;
-    background-position: -1709px 0px; }
-  .iti-flag.fr {
-    height: 14px;
-    background-position: -1731px 0px; }
-  .iti-flag.ga {
-    height: 15px;
-    background-position: -1753px 0px; }
-  .iti-flag.gb {
-    height: 10px;
-    background-position: -1775px 0px; }
-  .iti-flag.gd {
-    height: 12px;
-    background-position: -1797px 0px; }
-  .iti-flag.ge {
-    height: 14px;
-    background-position: -1819px 0px; }
-  .iti-flag.gf {
-    height: 14px;
-    background-position: -1841px 0px; }
-  .iti-flag.gg {
-    height: 14px;
-    background-position: -1863px 0px; }
-  .iti-flag.gh {
-    height: 14px;
-    background-position: -1885px 0px; }
-  .iti-flag.gi {
-    height: 10px;
-    background-position: -1907px 0px; }
-  .iti-flag.gl {
-    height: 14px;
-    background-position: -1929px 0px; }
-  .iti-flag.gm {
-    height: 14px;
-    background-position: -1951px 0px; }
-  .iti-flag.gn {
-    height: 14px;
-    background-position: -1973px 0px; }
-  .iti-flag.gp {
-    height: 14px;
-    background-position: -1995px 0px; }
-  .iti-flag.gq {
-    height: 14px;
-    background-position: -2017px 0px; }
-  .iti-flag.gr {
-    height: 14px;
-    background-position: -2039px 0px; }
-  .iti-flag.gs {
-    height: 10px;
-    background-position: -2061px 0px; }
-  .iti-flag.gt {
-    height: 13px;
-    background-position: -2083px 0px; }
-  .iti-flag.gu {
-    height: 11px;
-    background-position: -2105px 0px; }
-  .iti-flag.gw {
-    height: 10px;
-    background-position: -2127px 0px; }
-  .iti-flag.gy {
-    height: 12px;
-    background-position: -2149px 0px; }
-  .iti-flag.hk {
-    height: 14px;
-    background-position: -2171px 0px; }
-  .iti-flag.hm {
-    height: 10px;
-    background-position: -2193px 0px; }
-  .iti-flag.hn {
-    height: 10px;
-    background-position: -2215px 0px; }
-  .iti-flag.hr {
-    height: 10px;
-    background-position: -2237px 0px; }
-  .iti-flag.ht {
-    height: 12px;
-    background-position: -2259px 0px; }
-  .iti-flag.hu {
-    height: 10px;
-    background-position: -2281px 0px; }
-  .iti-flag.ic {
-    height: 14px;
-    background-position: -2303px 0px; }
-  .iti-flag.id {
-    height: 14px;
-    background-position: -2325px 0px; }
-  .iti-flag.ie {
-    height: 10px;
-    background-position: -2347px 0px; }
-  .iti-flag.il {
-    height: 15px;
-    background-position: -2369px 0px; }
-  .iti-flag.im {
-    height: 10px;
-    background-position: -2391px 0px; }
-  .iti-flag.in {
-    height: 14px;
-    background-position: -2413px 0px; }
-  .iti-flag.io {
-    height: 10px;
-    background-position: -2435px 0px; }
-  .iti-flag.iq {
-    height: 14px;
-    background-position: -2457px 0px; }
-  .iti-flag.ir {
-    height: 12px;
-    background-position: -2479px 0px; }
-  .iti-flag.is {
-    height: 15px;
-    background-position: -2501px 0px; }
-  .iti-flag.it {
-    height: 14px;
-    background-position: -2523px 0px; }
-  .iti-flag.je {
-    height: 12px;
-    background-position: -2545px 0px; }
-  .iti-flag.jm {
-    height: 10px;
-    background-position: -2567px 0px; }
-  .iti-flag.jo {
-    height: 10px;
-    background-position: -2589px 0px; }
-  .iti-flag.jp {
-    height: 14px;
-    background-position: -2611px 0px; }
-  .iti-flag.ke {
-    height: 14px;
-    background-position: -2633px 0px; }
-  .iti-flag.kg {
-    height: 12px;
-    background-position: -2655px 0px; }
-  .iti-flag.kh {
-    height: 13px;
-    background-position: -2677px 0px; }
-  .iti-flag.ki {
-    height: 10px;
-    background-position: -2699px 0px; }
-  .iti-flag.km {
-    height: 12px;
-    background-position: -2721px 0px; }
-  .iti-flag.kn {
-    height: 14px;
-    background-position: -2743px 0px; }
-  .iti-flag.kp {
-    height: 10px;
-    background-position: -2765px 0px; }
-  .iti-flag.kr {
-    height: 14px;
-    background-position: -2787px 0px; }
-  .iti-flag.kw {
-    height: 10px;
-    background-position: -2809px 0px; }
-  .iti-flag.ky {
-    height: 10px;
-    background-position: -2831px 0px; }
-  .iti-flag.kz {
-    height: 10px;
-    background-position: -2853px 0px; }
-  .iti-flag.la {
-    height: 14px;
-    background-position: -2875px 0px; }
-  .iti-flag.lb {
-    height: 14px;
-    background-position: -2897px 0px; }
-  .iti-flag.lc {
-    height: 10px;
-    background-position: -2919px 0px; }
-  .iti-flag.li {
-    height: 12px;
-    background-position: -2941px 0px; }
-  .iti-flag.lk {
-    height: 10px;
-    background-position: -2963px 0px; }
-  .iti-flag.lr {
-    height: 11px;
-    background-position: -2985px 0px; }
-  .iti-flag.ls {
-    height: 14px;
-    background-position: -3007px 0px; }
-  .iti-flag.lt {
-    height: 12px;
-    background-position: -3029px 0px; }
-  .iti-flag.lu {
-    height: 12px;
-    background-position: -3051px 0px; }
-  .iti-flag.lv {
-    height: 10px;
-    background-position: -3073px 0px; }
-  .iti-flag.ly {
-    height: 10px;
-    background-position: -3095px 0px; }
-  .iti-flag.ma {
-    height: 14px;
-    background-position: -3117px 0px; }
-  .iti-flag.mc {
-    height: 15px;
-    background-position: -3139px 0px; }
-  .iti-flag.md {
-    height: 10px;
-    background-position: -3160px 0px; }
-  .iti-flag.me {
-    height: 10px;
-    background-position: -3182px 0px; }
-  .iti-flag.mf {
-    height: 14px;
-    background-position: -3204px 0px; }
-  .iti-flag.mg {
-    height: 14px;
-    background-position: -3226px 0px; }
-  .iti-flag.mh {
-    height: 11px;
-    background-position: -3248px 0px; }
-  .iti-flag.mk {
-    height: 10px;
-    background-position: -3270px 0px; }
-  .iti-flag.ml {
-    height: 14px;
-    background-position: -3292px 0px; }
-  .iti-flag.mm {
-    height: 14px;
-    background-position: -3314px 0px; }
-  .iti-flag.mn {
-    height: 10px;
-    background-position: -3336px 0px; }
-  .iti-flag.mo {
-    height: 14px;
-    background-position: -3358px 0px; }
-  .iti-flag.mp {
-    height: 10px;
-    background-position: -3380px 0px; }
-  .iti-flag.mq {
-    height: 14px;
-    background-position: -3402px 0px; }
-  .iti-flag.mr {
-    height: 14px;
-    background-position: -3424px 0px; }
-  .iti-flag.ms {
-    height: 10px;
-    background-position: -3446px 0px; }
-  .iti-flag.mt {
-    height: 14px;
-    background-position: -3468px 0px; }
-  .iti-flag.mu {
-    height: 14px;
-    background-position: -3490px 0px; }
-  .iti-flag.mv {
-    height: 14px;
-    background-position: -3512px 0px; }
-  .iti-flag.mw {
-    height: 14px;
-    background-position: -3534px 0px; }
-  .iti-flag.mx {
-    height: 12px;
-    background-position: -3556px 0px; }
-  .iti-flag.my {
-    height: 10px;
-    background-position: -3578px 0px; }
-  .iti-flag.mz {
-    height: 14px;
-    background-position: -3600px 0px; }
-  .iti-flag.na {
-    height: 14px;
-    background-position: -3622px 0px; }
-  .iti-flag.nc {
-    height: 10px;
-    background-position: -3644px 0px; }
-  .iti-flag.ne {
-    height: 15px;
-    background-position: -3666px 0px; }
-  .iti-flag.nf {
-    height: 10px;
-    background-position: -3686px 0px; }
-  .iti-flag.ng {
-    height: 10px;
-    background-position: -3708px 0px; }
-  .iti-flag.ni {
-    height: 12px;
-    background-position: -3730px 0px; }
-  .iti-flag.nl {
-    height: 14px;
-    background-position: -3752px 0px; }
-  .iti-flag.no {
-    height: 15px;
-    background-position: -3774px 0px; }
-  .iti-flag.np {
-    height: 15px;
-    background-position: -3796px 0px; }
-  .iti-flag.nr {
-    height: 10px;
-    background-position: -3811px 0px; }
-  .iti-flag.nu {
-    height: 10px;
-    background-position: -3833px 0px; }
-  .iti-flag.nz {
-    height: 10px;
-    background-position: -3855px 0px; }
-  .iti-flag.om {
-    height: 10px;
-    background-position: -3877px 0px; }
-  .iti-flag.pa {
-    height: 14px;
-    background-position: -3899px 0px; }
-  .iti-flag.pe {
-    height: 14px;
-    background-position: -3921px 0px; }
-  .iti-flag.pf {
-    height: 14px;
-    background-position: -3943px 0px; }
-  .iti-flag.pg {
-    height: 15px;
-    background-position: -3965px 0px; }
-  .iti-flag.ph {
-    height: 10px;
-    background-position: -3987px 0px; }
-  .iti-flag.pk {
-    height: 14px;
-    background-position: -4009px 0px; }
-  .iti-flag.pl {
-    height: 13px;
-    background-position: -4031px 0px; }
-  .iti-flag.pm {
-    height: 14px;
-    background-position: -4053px 0px; }
-  .iti-flag.pn {
-    height: 10px;
-    background-position: -4075px 0px; }
-  .iti-flag.pr {
-    height: 14px;
-    background-position: -4097px 0px; }
-  .iti-flag.ps {
-    height: 10px;
-    background-position: -4119px 0px; }
-  .iti-flag.pt {
-    height: 14px;
-    background-position: -4141px 0px; }
-  .iti-flag.pw {
-    height: 13px;
-    background-position: -4163px 0px; }
-  .iti-flag.py {
-    height: 11px;
-    background-position: -4185px 0px; }
-  .iti-flag.qa {
-    height: 8px;
-    background-position: -4207px 0px; }
-  .iti-flag.re {
-    height: 14px;
-    background-position: -4229px 0px; }
-  .iti-flag.ro {
-    height: 14px;
-    background-position: -4251px 0px; }
-  .iti-flag.rs {
-    height: 14px;
-    background-position: -4273px 0px; }
-  .iti-flag.ru {
-    height: 14px;
-    background-position: -4295px 0px; }
-  .iti-flag.rw {
-    height: 14px;
-    background-position: -4317px 0px; }
-  .iti-flag.sa {
-    height: 14px;
-    background-position: -4339px 0px; }
-  .iti-flag.sb {
-    height: 10px;
-    background-position: -4361px 0px; }
-  .iti-flag.sc {
-    height: 10px;
-    background-position: -4383px 0px; }
-  .iti-flag.sd {
-    height: 10px;
-    background-position: -4405px 0px; }
-  .iti-flag.se {
-    height: 13px;
-    background-position: -4427px 0px; }
-  .iti-flag.sg {
-    height: 14px;
-    background-position: -4449px 0px; }
-  .iti-flag.sh {
-    height: 10px;
-    background-position: -4471px 0px; }
-  .iti-flag.si {
-    height: 10px;
-    background-position: -4493px 0px; }
-  .iti-flag.sj {
-    height: 15px;
-    background-position: -4515px 0px; }
-  .iti-flag.sk {
-    height: 14px;
-    background-position: -4537px 0px; }
-  .iti-flag.sl {
-    height: 14px;
-    background-position: -4559px 0px; }
-  .iti-flag.sm {
-    height: 15px;
-    background-position: -4581px 0px; }
-  .iti-flag.sn {
-    height: 14px;
-    background-position: -4603px 0px; }
-  .iti-flag.so {
-    height: 14px;
-    background-position: -4625px 0px; }
-  .iti-flag.sr {
-    height: 14px;
-    background-position: -4647px 0px; }
-  .iti-flag.ss {
-    height: 10px;
-    background-position: -4669px 0px; }
-  .iti-flag.st {
-    height: 10px;
-    background-position: -4691px 0px; }
-  .iti-flag.sv {
-    height: 12px;
-    background-position: -4713px 0px; }
-  .iti-flag.sx {
-    height: 14px;
-    background-position: -4735px 0px; }
-  .iti-flag.sy {
-    height: 14px;
-    background-position: -4757px 0px; }
-  .iti-flag.sz {
-    height: 14px;
-    background-position: -4779px 0px; }
-  .iti-flag.ta {
-    height: 10px;
-    background-position: -4801px 0px; }
-  .iti-flag.tc {
-    height: 10px;
-    background-position: -4823px 0px; }
-  .iti-flag.td {
-    height: 14px;
-    background-position: -4845px 0px; }
-  .iti-flag.tf {
-    height: 14px;
-    background-position: -4867px 0px; }
-  .iti-flag.tg {
-    height: 13px;
-    background-position: -4889px 0px; }
-  .iti-flag.th {
-    height: 14px;
-    background-position: -4911px 0px; }
-  .iti-flag.tj {
-    height: 10px;
-    background-position: -4933px 0px; }
-  .iti-flag.tk {
-    height: 10px;
-    background-position: -4955px 0px; }
-  .iti-flag.tl {
-    height: 10px;
-    background-position: -4977px 0px; }
-  .iti-flag.tm {
-    height: 14px;
-    background-position: -4999px 0px; }
-  .iti-flag.tn {
-    height: 14px;
-    background-position: -5021px 0px; }
-  .iti-flag.to {
-    height: 10px;
-    background-position: -5043px 0px; }
-  .iti-flag.tr {
-    height: 14px;
-    background-position: -5065px 0px; }
-  .iti-flag.tt {
-    height: 12px;
-    background-position: -5087px 0px; }
-  .iti-flag.tv {
-    height: 10px;
-    background-position: -5109px 0px; }
-  .iti-flag.tw {
-    height: 14px;
-    background-position: -5131px 0px; }
-  .iti-flag.tz {
-    height: 14px;
-    background-position: -5153px 0px; }
-  .iti-flag.ua {
-    height: 14px;
-    background-position: -5175px 0px; }
-  .iti-flag.ug {
-    height: 14px;
-    background-position: -5197px 0px; }
-  .iti-flag.um {
-    height: 11px;
-    background-position: -5219px 0px; }
-  .iti-flag.us {
-    height: 11px;
-    background-position: -5241px 0px; }
-  .iti-flag.uy {
-    height: 14px;
-    background-position: -5263px 0px; }
-  .iti-flag.uz {
-    height: 10px;
-    background-position: -5285px 0px; }
-  .iti-flag.va {
-    height: 15px;
-    background-position: -5307px 0px; }
-  .iti-flag.vc {
-    height: 14px;
-    background-position: -5324px 0px; }
-  .iti-flag.ve {
-    height: 14px;
-    background-position: -5346px 0px; }
-  .iti-flag.vg {
-    height: 10px;
-    background-position: -5368px 0px; }
-  .iti-flag.vi {
-    height: 14px;
-    background-position: -5390px 0px; }
-  .iti-flag.vn {
-    height: 14px;
-    background-position: -5412px 0px; }
-  .iti-flag.vu {
-    height: 12px;
-    background-position: -5434px 0px; }
-  .iti-flag.wf {
-    height: 14px;
-    background-position: -5456px 0px; }
-  .iti-flag.ws {
-    height: 10px;
-    background-position: -5478px 0px; }
-  .iti-flag.xk {
-    height: 15px;
-    background-position: -5500px 0px; }
-  .iti-flag.ye {
-    height: 14px;
-    background-position: -5522px 0px; }
-  .iti-flag.yt {
-    height: 14px;
-    background-position: -5544px 0px; }
-  .iti-flag.za {
-    height: 14px;
-    background-position: -5566px 0px; }
-  .iti-flag.zm {
-    height: 14px;
-    background-position: -5588px 0px; }
-  .iti-flag.zw {
-    height: 10px;
-    background-position: -5610px 0px; }
+
+
+
+@import "sprite";
 
 .iti-flag {
-  width: 20px;
-  height: 15px;
+  width: $flagWidth;
+  height: $flagHeight;
   box-shadow: 0px 0px 1px 0px #888;
-  background-image: url("../img/flags.png");
+  background-image: image-url("#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}");
   background-repeat: no-repeat;
+  // empty state
   background-color: #DBDBDB;
-  background-position: 20px 0; }
+  background-position: $flagWidth 0;
+
   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
-    .iti-flag {
-      background-image: url("../img/flags@2x.png"); } }
+    background-image: image-url("#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}");
+  }
+}
+
+
 
+// hack for Nepal which is the only flag that is not square/rectangle, so it has transparency, so you can see the default grey behind it
 .iti-flag.np {
-  background-color: transparent; }
+  background-color: transparent;
+}