e74cba8a92
Added jquery plugin that allows for flags and country codes to be displayed in a user-friendly way, on top of the existing phone view
1 line
12 KiB
CSS
1 line
12 KiB
CSS
.iti-flag{width:16px;height:11px;background:url("../img/flags.png")}.iti-flag.ad{background-position:-16px 0}.iti-flag.ae{background-position:-32px 0}.iti-flag.af{background-position:-48px 0}.iti-flag.ag{background-position:-64px 0}.iti-flag.ai{background-position:-80px 0}.iti-flag.al{background-position:-96px 0}.iti-flag.am{background-position:-112px 0}.iti-flag.ao{background-position:-128px 0}.iti-flag.ar{background-position:-144px 0}.iti-flag.as{background-position:-160px 0}.iti-flag.at{background-position:-176px 0}.iti-flag.au{background-position:-192px 0}.iti-flag.aw{background-position:-208px 0}.iti-flag.az{background-position:-224px 0}.iti-flag.ba{background-position:-240px 0}.iti-flag.bb{background-position:0 -11px}.iti-flag.bd{background-position:-16px -11px}.iti-flag.be{background-position:-32px -11px}.iti-flag.bf{background-position:-48px -11px}.iti-flag.bg{background-position:-64px -11px}.iti-flag.bh{background-position:-80px -11px}.iti-flag.bi{background-position:-96px -11px}.iti-flag.bj{background-position:-112px -11px}.iti-flag.bm{background-position:-128px -11px}.iti-flag.bn{background-position:-144px -11px}.iti-flag.bo{background-position:-160px -11px}.iti-flag.br{background-position:-176px -11px}.iti-flag.bs{background-position:-192px -11px}.iti-flag.bt{background-position:-208px -11px}.iti-flag.bw{background-position:-224px -11px}.iti-flag.by{background-position:-240px -11px}.iti-flag.bz{background-position:0 -22px}.iti-flag.ca{background-position:-16px -22px}.iti-flag.cd{background-position:-32px -22px}.iti-flag.cf{background-position:-48px -22px}.iti-flag.cg{background-position:-64px -22px}.iti-flag.ch{background-position:-80px -22px}.iti-flag.ci{background-position:-96px -22px}.iti-flag.ck{background-position:-112px -22px}.iti-flag.cl{background-position:-128px -22px}.iti-flag.cm{background-position:-144px -22px}.iti-flag.cn{background-position:-160px -22px}.iti-flag.co{background-position:-176px -22px}.iti-flag.cr{background-position:-192px -22px}.iti-flag.cu{background-position:-208px -22px}.iti-flag.cv{background-position:-224px -22px}.iti-flag.cw{background-position:-240px -22px}.iti-flag.cy{background-position:0 -33px}.iti-flag.cz{background-position:-16px -33px}.iti-flag.de{background-position:-32px -33px}.iti-flag.dj{background-position:-48px -33px}.iti-flag.dk{background-position:-64px -33px}.iti-flag.dm{background-position:-80px -33px}.iti-flag.do{background-position:-96px -33px}.iti-flag.dz{background-position:-112px -33px}.iti-flag.ec{background-position:-128px -33px}.iti-flag.ee{background-position:-144px -33px}.iti-flag.eg{background-position:-160px -33px}.iti-flag.er{background-position:-176px -33px}.iti-flag.es{background-position:-192px -33px}.iti-flag.et{background-position:-208px -33px}.iti-flag.fi{background-position:-224px -33px}.iti-flag.fj{background-position:-240px -33px}.iti-flag.fk{background-position:0 -44px}.iti-flag.fm{background-position:-16px -44px}.iti-flag.fo{background-position:-32px -44px}.iti-flag.fr,.iti-flag.bl,.iti-flag.mf{background-position:-48px -44px}.iti-flag.ga{background-position:-64px -44px}.iti-flag.gb{background-position:-80px -44px}.iti-flag.gd{background-position:-96px -44px}.iti-flag.ge{background-position:-112px -44px}.iti-flag.gf{background-position:-128px -44px}.iti-flag.gh{background-position:-144px -44px}.iti-flag.gi{background-position:-160px -44px}.iti-flag.gl{background-position:-176px -44px}.iti-flag.gm{background-position:-192px -44px}.iti-flag.gn{background-position:-208px -44px}.iti-flag.gp{background-position:-224px -44px}.iti-flag.gq{background-position:-240px -44px}.iti-flag.gr{background-position:0 -55px}.iti-flag.gt{background-position:-16px -55px}.iti-flag.gu{background-position:-32px -55px}.iti-flag.gw{background-position:-48px -55px}.iti-flag.gy{background-position:-64px -55px}.iti-flag.hk{background-position:-80px -55px}.iti-flag.hn{background-position:-96px -55px}.iti-flag.hr{background-position:-112px -55px}.iti-flag.ht{background-position:-128px -55px}.iti-flag.hu{background-position:-144px -55px}.iti-flag.id{background-position:-160px -55px}.iti-flag.ie{background-position:-176px -55px}.iti-flag.il{background-position:-192px -55px}.iti-flag.in{background-position:-208px -55px}.iti-flag.io{background-position:-224px -55px}.iti-flag.iq{background-position:-240px -55px}.iti-flag.ir{background-position:0 -66px}.iti-flag.is{background-position:-16px -66px}.iti-flag.it{background-position:-32px -66px}.iti-flag.jm{background-position:-48px -66px}.iti-flag.jo{background-position:-64px -66px}.iti-flag.jp{background-position:-80px -66px}.iti-flag.ke{background-position:-96px -66px}.iti-flag.kg{background-position:-112px -66px}.iti-flag.kh{background-position:-128px -66px}.iti-flag.ki{background-position:-144px -66px}.iti-flag.km{background-position:-160px -66px}.iti-flag.kn{background-position:-176px -66px}.iti-flag.kp{background-position:-192px -66px}.iti-flag.kr{background-position:-208px -66px}.iti-flag.kw{background-position:-224px -66px}.iti-flag.ky{background-position:-240px -66px}.iti-flag.kz{background-position:0 -77px}.iti-flag.la{background-position:-16px -77px}.iti-flag.lb{background-position:-32px -77px}.iti-flag.lc{background-position:-48px -77px}.iti-flag.li{background-position:-64px -77px}.iti-flag.lk{background-position:-80px -77px}.iti-flag.lr{background-position:-96px -77px}.iti-flag.ls{background-position:-112px -77px}.iti-flag.lt{background-position:-128px -77px}.iti-flag.lu{background-position:-144px -77px}.iti-flag.lv{background-position:-160px -77px}.iti-flag.ly{background-position:-176px -77px}.iti-flag.ma{background-position:-192px -77px}.iti-flag.mc{background-position:-208px -77px}.iti-flag.md{background-position:-224px -77px}.iti-flag.me{background-position:-112px -154px;height:12px}.iti-flag.mg{background-position:0 -88px}.iti-flag.mh{background-position:-16px -88px}.iti-flag.mk{background-position:-32px -88px}.iti-flag.ml{background-position:-48px -88px}.iti-flag.mm{background-position:-64px -88px}.iti-flag.mn{background-position:-80px -88px}.iti-flag.mo{background-position:-96px -88px}.iti-flag.mp{background-position:-112px -88px}.iti-flag.mq{background-position:-128px -88px}.iti-flag.mr{background-position:-144px -88px}.iti-flag.ms{background-position:-160px -88px}.iti-flag.mt{background-position:-176px -88px}.iti-flag.mu{background-position:-192px -88px}.iti-flag.mv{background-position:-208px -88px}.iti-flag.mw{background-position:-224px -88px}.iti-flag.mx{background-position:-240px -88px}.iti-flag.my{background-position:0 -99px}.iti-flag.mz{background-position:-16px -99px}.iti-flag.na{background-position:-32px -99px}.iti-flag.nc{background-position:-48px -99px}.iti-flag.ne{background-position:-64px -99px}.iti-flag.nf{background-position:-80px -99px}.iti-flag.ng{background-position:-96px -99px}.iti-flag.ni{background-position:-112px -99px}.iti-flag.nl,.iti-flag.bq{background-position:-128px -99px}.iti-flag.no{background-position:-144px -99px}.iti-flag.np{background-position:-160px -99px}.iti-flag.nr{background-position:-176px -99px}.iti-flag.nu{background-position:-192px -99px}.iti-flag.nz{background-position:-208px -99px}.iti-flag.om{background-position:-224px -99px}.iti-flag.pa{background-position:-240px -99px}.iti-flag.pe{background-position:0 -110px}.iti-flag.pf{background-position:-16px -110px}.iti-flag.pg{background-position:-32px -110px}.iti-flag.ph{background-position:-48px -110px}.iti-flag.pk{background-position:-64px -110px}.iti-flag.pl{background-position:-80px -110px}.iti-flag.pm{background-position:-96px -110px}.iti-flag.pr{background-position:-112px -110px}.iti-flag.ps{background-position:-128px -110px}.iti-flag.pt{background-position:-144px -110px}.iti-flag.pw{background-position:-160px -110px}.iti-flag.py{background-position:-176px -110px}.iti-flag.qa{background-position:-192px -110px}.iti-flag.re{background-position:-208px -110px}.iti-flag.ro{background-position:-224px -110px}.iti-flag.rs{background-position:-240px -110px}.iti-flag.ru{background-position:0 -121px}.iti-flag.rw{background-position:-16px -121px}.iti-flag.sa{background-position:-32px -121px}.iti-flag.sb{background-position:-48px -121px}.iti-flag.sc{background-position:-64px -121px}.iti-flag.sd{background-position:-80px -121px}.iti-flag.se{background-position:-96px -121px}.iti-flag.sg{background-position:-112px -121px}.iti-flag.sh{background-position:-128px -121px}.iti-flag.si{background-position:-144px -121px}.iti-flag.sk{background-position:-160px -121px}.iti-flag.sl{background-position:-176px -121px}.iti-flag.sm{background-position:-192px -121px}.iti-flag.sn{background-position:-208px -121px}.iti-flag.so{background-position:-224px -121px}.iti-flag.sr{background-position:-240px -121px}.iti-flag.ss{background-position:0 -132px}.iti-flag.st{background-position:-16px -132px}.iti-flag.sv{background-position:-32px -132px}.iti-flag.sx{background-position:-48px -132px}.iti-flag.sy{background-position:-64px -132px}.iti-flag.sz{background-position:-80px -132px}.iti-flag.tc{background-position:-96px -132px}.iti-flag.td{background-position:-112px -132px}.iti-flag.tg{background-position:-128px -132px}.iti-flag.th{background-position:-144px -132px}.iti-flag.tj{background-position:-160px -132px}.iti-flag.tk{background-position:-176px -132px}.iti-flag.tl{background-position:-192px -132px}.iti-flag.tm{background-position:-208px -132px}.iti-flag.tn{background-position:-224px -132px}.iti-flag.to{background-position:-240px -132px}.iti-flag.tr{background-position:0 -143px}.iti-flag.tt{background-position:-16px -143px}.iti-flag.tv{background-position:-32px -143px}.iti-flag.tw{background-position:-48px -143px}.iti-flag.tz{background-position:-64px -143px}.iti-flag.ua{background-position:-80px -143px}.iti-flag.ug{background-position:-96px -143px}.iti-flag.us{background-position:-112px -143px}.iti-flag.uy{background-position:-128px -143px}.iti-flag.uz{background-position:-144px -143px}.iti-flag.va{background-position:-160px -143px}.iti-flag.vc{background-position:-176px -143px}.iti-flag.ve{background-position:-192px -143px}.iti-flag.vg{background-position:-208px -143px}.iti-flag.vi{background-position:-224px -143px}.iti-flag.vn{background-position:-240px -143px}.iti-flag.vu{background-position:0 -154px}.iti-flag.wf{background-position:-16px -154px}.iti-flag.ws{background-position:-32px -154px}.iti-flag.ye{background-position:-48px -154px}.iti-flag.za{background-position:-64px -154px}.iti-flag.zm{background-position:-80px -154px}.iti-flag.zw{background-position:-96px -154px}.intl-tel-input{position:relative;display:inline-block}.intl-tel-input *{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]{position:relative;z-index:0;margin-top:0 !important;margin-bottom:0 !important;padding-left:44px;margin-left:0}.intl-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:1px}.intl-tel-input .flag-dropdown:hover{cursor:pointer}.intl-tel-input .flag-dropdown:hover .selected-flag{background-color:rgba(0,0,0,0.05)}.intl-tel-input input[disabled]+.flag-dropdown:hover,.intl-tel-input input[readonly]+.flag-dropdown:hover{cursor:default}.intl-tel-input input[disabled]+.flag-dropdown:hover .selected-flag,.intl-tel-input input[readonly]+.flag-dropdown:hover .selected-flag{background-color:transparent}.intl-tel-input .selected-flag{z-index:1;position:relative;width:38px;height:100%;padding:0 0 0 8px}.intl-tel-input .selected-flag .iti-flag{position:absolute;top:50%;margin-top:-5px}.intl-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.intl-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.intl-tel-input .country-list{list-style:none;position:absolute;z-index:2;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,0.2);background-color:white;border:1px solid #CCC;width:430px;max-height:200px;overflow-y:scroll}.intl-tel-input .country-list .iti-flag{display:inline-block}.intl-tel-input .country-list .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 .iti-flag,.intl-tel-input .country-list .country-name{margin-right:6px}
|