1123 lines
18 KiB
CSS
Executable File
1123 lines
18 KiB
CSS
Executable File
/* packages/core/src/css/flag-offsets.css */
|
|
:root {
|
|
--iti-flag-width: 20px;
|
|
--iti-flag-count: 244;
|
|
}
|
|
.iti__ac {
|
|
--iti-flag-offset: 0;
|
|
}
|
|
.iti__ad {
|
|
--iti-flag-offset: -1;
|
|
}
|
|
.iti__ae {
|
|
--iti-flag-offset: -2;
|
|
}
|
|
.iti__af {
|
|
--iti-flag-offset: -3;
|
|
}
|
|
.iti__ag {
|
|
--iti-flag-offset: -4;
|
|
}
|
|
.iti__ai {
|
|
--iti-flag-offset: -5;
|
|
}
|
|
.iti__al {
|
|
--iti-flag-offset: -6;
|
|
}
|
|
.iti__am {
|
|
--iti-flag-offset: -7;
|
|
}
|
|
.iti__ao {
|
|
--iti-flag-offset: -8;
|
|
}
|
|
.iti__ar {
|
|
--iti-flag-offset: -9;
|
|
}
|
|
.iti__as {
|
|
--iti-flag-offset: -10;
|
|
}
|
|
.iti__at {
|
|
--iti-flag-offset: -11;
|
|
}
|
|
.iti__au {
|
|
--iti-flag-offset: -12;
|
|
}
|
|
.iti__aw {
|
|
--iti-flag-offset: -13;
|
|
}
|
|
.iti__ax {
|
|
--iti-flag-offset: -14;
|
|
}
|
|
.iti__az {
|
|
--iti-flag-offset: -15;
|
|
}
|
|
.iti__ba {
|
|
--iti-flag-offset: -16;
|
|
}
|
|
.iti__bb {
|
|
--iti-flag-offset: -17;
|
|
}
|
|
.iti__bd {
|
|
--iti-flag-offset: -18;
|
|
}
|
|
.iti__be {
|
|
--iti-flag-offset: -19;
|
|
}
|
|
.iti__bf {
|
|
--iti-flag-offset: -20;
|
|
}
|
|
.iti__bg {
|
|
--iti-flag-offset: -21;
|
|
}
|
|
.iti__bh {
|
|
--iti-flag-offset: -22;
|
|
}
|
|
.iti__bi {
|
|
--iti-flag-offset: -23;
|
|
}
|
|
.iti__bj {
|
|
--iti-flag-offset: -24;
|
|
}
|
|
.iti__bl {
|
|
--iti-flag-offset: -25;
|
|
}
|
|
.iti__bm {
|
|
--iti-flag-offset: -26;
|
|
}
|
|
.iti__bn {
|
|
--iti-flag-offset: -27;
|
|
}
|
|
.iti__bo {
|
|
--iti-flag-offset: -28;
|
|
}
|
|
.iti__bq {
|
|
--iti-flag-offset: -29;
|
|
}
|
|
.iti__br {
|
|
--iti-flag-offset: -30;
|
|
}
|
|
.iti__bs {
|
|
--iti-flag-offset: -31;
|
|
}
|
|
.iti__bt {
|
|
--iti-flag-offset: -32;
|
|
}
|
|
.iti__bw {
|
|
--iti-flag-offset: -33;
|
|
}
|
|
.iti__by {
|
|
--iti-flag-offset: -34;
|
|
}
|
|
.iti__bz {
|
|
--iti-flag-offset: -35;
|
|
}
|
|
.iti__ca {
|
|
--iti-flag-offset: -36;
|
|
}
|
|
.iti__cc {
|
|
--iti-flag-offset: -37;
|
|
}
|
|
.iti__cd {
|
|
--iti-flag-offset: -38;
|
|
}
|
|
.iti__cf {
|
|
--iti-flag-offset: -39;
|
|
}
|
|
.iti__cg {
|
|
--iti-flag-offset: -40;
|
|
}
|
|
.iti__ch {
|
|
--iti-flag-offset: -41;
|
|
}
|
|
.iti__ci {
|
|
--iti-flag-offset: -42;
|
|
}
|
|
.iti__ck {
|
|
--iti-flag-offset: -43;
|
|
}
|
|
.iti__cl {
|
|
--iti-flag-offset: -44;
|
|
}
|
|
.iti__cm {
|
|
--iti-flag-offset: -45;
|
|
}
|
|
.iti__cn {
|
|
--iti-flag-offset: -46;
|
|
}
|
|
.iti__co {
|
|
--iti-flag-offset: -47;
|
|
}
|
|
.iti__cr {
|
|
--iti-flag-offset: -48;
|
|
}
|
|
.iti__cu {
|
|
--iti-flag-offset: -49;
|
|
}
|
|
.iti__cv {
|
|
--iti-flag-offset: -50;
|
|
}
|
|
.iti__cw {
|
|
--iti-flag-offset: -51;
|
|
}
|
|
.iti__cx {
|
|
--iti-flag-offset: -52;
|
|
}
|
|
.iti__cy {
|
|
--iti-flag-offset: -53;
|
|
}
|
|
.iti__cz {
|
|
--iti-flag-offset: -54;
|
|
}
|
|
.iti__de {
|
|
--iti-flag-offset: -55;
|
|
}
|
|
.iti__dj {
|
|
--iti-flag-offset: -56;
|
|
}
|
|
.iti__dk {
|
|
--iti-flag-offset: -57;
|
|
}
|
|
.iti__dm {
|
|
--iti-flag-offset: -58;
|
|
}
|
|
.iti__do {
|
|
--iti-flag-offset: -59;
|
|
}
|
|
.iti__dz {
|
|
--iti-flag-offset: -60;
|
|
}
|
|
.iti__ec {
|
|
--iti-flag-offset: -61;
|
|
}
|
|
.iti__ee {
|
|
--iti-flag-offset: -62;
|
|
}
|
|
.iti__eg {
|
|
--iti-flag-offset: -63;
|
|
}
|
|
.iti__eh {
|
|
--iti-flag-offset: -64;
|
|
}
|
|
.iti__er {
|
|
--iti-flag-offset: -65;
|
|
}
|
|
.iti__es {
|
|
--iti-flag-offset: -66;
|
|
}
|
|
.iti__et {
|
|
--iti-flag-offset: -67;
|
|
}
|
|
.iti__fi {
|
|
--iti-flag-offset: -68;
|
|
}
|
|
.iti__fj {
|
|
--iti-flag-offset: -69;
|
|
}
|
|
.iti__fk {
|
|
--iti-flag-offset: -70;
|
|
}
|
|
.iti__fm {
|
|
--iti-flag-offset: -71;
|
|
}
|
|
.iti__fo {
|
|
--iti-flag-offset: -72;
|
|
}
|
|
.iti__fr {
|
|
--iti-flag-offset: -73;
|
|
}
|
|
.iti__ga {
|
|
--iti-flag-offset: -74;
|
|
}
|
|
.iti__gb {
|
|
--iti-flag-offset: -75;
|
|
}
|
|
.iti__gd {
|
|
--iti-flag-offset: -76;
|
|
}
|
|
.iti__ge {
|
|
--iti-flag-offset: -77;
|
|
}
|
|
.iti__gf {
|
|
--iti-flag-offset: -78;
|
|
}
|
|
.iti__gg {
|
|
--iti-flag-offset: -79;
|
|
}
|
|
.iti__gh {
|
|
--iti-flag-offset: -80;
|
|
}
|
|
.iti__gi {
|
|
--iti-flag-offset: -81;
|
|
}
|
|
.iti__gl {
|
|
--iti-flag-offset: -82;
|
|
}
|
|
.iti__gm {
|
|
--iti-flag-offset: -83;
|
|
}
|
|
.iti__gn {
|
|
--iti-flag-offset: -84;
|
|
}
|
|
.iti__gp {
|
|
--iti-flag-offset: -85;
|
|
}
|
|
.iti__gq {
|
|
--iti-flag-offset: -86;
|
|
}
|
|
.iti__gr {
|
|
--iti-flag-offset: -87;
|
|
}
|
|
.iti__gt {
|
|
--iti-flag-offset: -88;
|
|
}
|
|
.iti__gu {
|
|
--iti-flag-offset: -89;
|
|
}
|
|
.iti__gw {
|
|
--iti-flag-offset: -90;
|
|
}
|
|
.iti__gy {
|
|
--iti-flag-offset: -91;
|
|
}
|
|
.iti__hk {
|
|
--iti-flag-offset: -92;
|
|
}
|
|
.iti__hn {
|
|
--iti-flag-offset: -93;
|
|
}
|
|
.iti__hr {
|
|
--iti-flag-offset: -94;
|
|
}
|
|
.iti__ht {
|
|
--iti-flag-offset: -95;
|
|
}
|
|
.iti__hu {
|
|
--iti-flag-offset: -96;
|
|
}
|
|
.iti__id {
|
|
--iti-flag-offset: -97;
|
|
}
|
|
.iti__ie {
|
|
--iti-flag-offset: -98;
|
|
}
|
|
.iti__il {
|
|
--iti-flag-offset: -99;
|
|
}
|
|
.iti__im {
|
|
--iti-flag-offset: -100;
|
|
}
|
|
.iti__in {
|
|
--iti-flag-offset: -101;
|
|
}
|
|
.iti__io {
|
|
--iti-flag-offset: -102;
|
|
}
|
|
.iti__iq {
|
|
--iti-flag-offset: -103;
|
|
}
|
|
.iti__ir {
|
|
--iti-flag-offset: -104;
|
|
}
|
|
.iti__is {
|
|
--iti-flag-offset: -105;
|
|
}
|
|
.iti__it {
|
|
--iti-flag-offset: -106;
|
|
}
|
|
.iti__je {
|
|
--iti-flag-offset: -107;
|
|
}
|
|
.iti__jm {
|
|
--iti-flag-offset: -108;
|
|
}
|
|
.iti__jo {
|
|
--iti-flag-offset: -109;
|
|
}
|
|
.iti__jp {
|
|
--iti-flag-offset: -110;
|
|
}
|
|
.iti__ke {
|
|
--iti-flag-offset: -111;
|
|
}
|
|
.iti__kg {
|
|
--iti-flag-offset: -112;
|
|
}
|
|
.iti__kh {
|
|
--iti-flag-offset: -113;
|
|
}
|
|
.iti__ki {
|
|
--iti-flag-offset: -114;
|
|
}
|
|
.iti__km {
|
|
--iti-flag-offset: -115;
|
|
}
|
|
.iti__kn {
|
|
--iti-flag-offset: -116;
|
|
}
|
|
.iti__kp {
|
|
--iti-flag-offset: -117;
|
|
}
|
|
.iti__kr {
|
|
--iti-flag-offset: -118;
|
|
}
|
|
.iti__kw {
|
|
--iti-flag-offset: -119;
|
|
}
|
|
.iti__ky {
|
|
--iti-flag-offset: -120;
|
|
}
|
|
.iti__kz {
|
|
--iti-flag-offset: -121;
|
|
}
|
|
.iti__la {
|
|
--iti-flag-offset: -122;
|
|
}
|
|
.iti__lb {
|
|
--iti-flag-offset: -123;
|
|
}
|
|
.iti__lc {
|
|
--iti-flag-offset: -124;
|
|
}
|
|
.iti__li {
|
|
--iti-flag-offset: -125;
|
|
}
|
|
.iti__lk {
|
|
--iti-flag-offset: -126;
|
|
}
|
|
.iti__lr {
|
|
--iti-flag-offset: -127;
|
|
}
|
|
.iti__ls {
|
|
--iti-flag-offset: -128;
|
|
}
|
|
.iti__lt {
|
|
--iti-flag-offset: -129;
|
|
}
|
|
.iti__lu {
|
|
--iti-flag-offset: -130;
|
|
}
|
|
.iti__lv {
|
|
--iti-flag-offset: -131;
|
|
}
|
|
.iti__ly {
|
|
--iti-flag-offset: -132;
|
|
}
|
|
.iti__ma {
|
|
--iti-flag-offset: -133;
|
|
}
|
|
.iti__mc {
|
|
--iti-flag-offset: -134;
|
|
}
|
|
.iti__md {
|
|
--iti-flag-offset: -135;
|
|
}
|
|
.iti__me {
|
|
--iti-flag-offset: -136;
|
|
}
|
|
.iti__mf {
|
|
--iti-flag-offset: -137;
|
|
}
|
|
.iti__mg {
|
|
--iti-flag-offset: -138;
|
|
}
|
|
.iti__mh {
|
|
--iti-flag-offset: -139;
|
|
}
|
|
.iti__mk {
|
|
--iti-flag-offset: -140;
|
|
}
|
|
.iti__ml {
|
|
--iti-flag-offset: -141;
|
|
}
|
|
.iti__mm {
|
|
--iti-flag-offset: -142;
|
|
}
|
|
.iti__mn {
|
|
--iti-flag-offset: -143;
|
|
}
|
|
.iti__mo {
|
|
--iti-flag-offset: -144;
|
|
}
|
|
.iti__mp {
|
|
--iti-flag-offset: -145;
|
|
}
|
|
.iti__mq {
|
|
--iti-flag-offset: -146;
|
|
}
|
|
.iti__mr {
|
|
--iti-flag-offset: -147;
|
|
}
|
|
.iti__ms {
|
|
--iti-flag-offset: -148;
|
|
}
|
|
.iti__mt {
|
|
--iti-flag-offset: -149;
|
|
}
|
|
.iti__mu {
|
|
--iti-flag-offset: -150;
|
|
}
|
|
.iti__mv {
|
|
--iti-flag-offset: -151;
|
|
}
|
|
.iti__mw {
|
|
--iti-flag-offset: -152;
|
|
}
|
|
.iti__mx {
|
|
--iti-flag-offset: -153;
|
|
}
|
|
.iti__my {
|
|
--iti-flag-offset: -154;
|
|
}
|
|
.iti__mz {
|
|
--iti-flag-offset: -155;
|
|
}
|
|
.iti__na {
|
|
--iti-flag-offset: -156;
|
|
}
|
|
.iti__nc {
|
|
--iti-flag-offset: -157;
|
|
}
|
|
.iti__ne {
|
|
--iti-flag-offset: -158;
|
|
}
|
|
.iti__nf {
|
|
--iti-flag-offset: -159;
|
|
}
|
|
.iti__ng {
|
|
--iti-flag-offset: -160;
|
|
}
|
|
.iti__ni {
|
|
--iti-flag-offset: -161;
|
|
}
|
|
.iti__nl {
|
|
--iti-flag-offset: -162;
|
|
}
|
|
.iti__no {
|
|
--iti-flag-offset: -163;
|
|
}
|
|
.iti__np {
|
|
--iti-flag-offset: -164;
|
|
}
|
|
.iti__nr {
|
|
--iti-flag-offset: -165;
|
|
}
|
|
.iti__nu {
|
|
--iti-flag-offset: -166;
|
|
}
|
|
.iti__nz {
|
|
--iti-flag-offset: -167;
|
|
}
|
|
.iti__om {
|
|
--iti-flag-offset: -168;
|
|
}
|
|
.iti__pa {
|
|
--iti-flag-offset: -169;
|
|
}
|
|
.iti__pe {
|
|
--iti-flag-offset: -170;
|
|
}
|
|
.iti__pf {
|
|
--iti-flag-offset: -171;
|
|
}
|
|
.iti__pg {
|
|
--iti-flag-offset: -172;
|
|
}
|
|
.iti__ph {
|
|
--iti-flag-offset: -173;
|
|
}
|
|
.iti__pk {
|
|
--iti-flag-offset: -174;
|
|
}
|
|
.iti__pl {
|
|
--iti-flag-offset: -175;
|
|
}
|
|
.iti__pm {
|
|
--iti-flag-offset: -176;
|
|
}
|
|
.iti__pr {
|
|
--iti-flag-offset: -177;
|
|
}
|
|
.iti__ps {
|
|
--iti-flag-offset: -178;
|
|
}
|
|
.iti__pt {
|
|
--iti-flag-offset: -179;
|
|
}
|
|
.iti__pw {
|
|
--iti-flag-offset: -180;
|
|
}
|
|
.iti__py {
|
|
--iti-flag-offset: -181;
|
|
}
|
|
.iti__qa {
|
|
--iti-flag-offset: -182;
|
|
}
|
|
.iti__re {
|
|
--iti-flag-offset: -183;
|
|
}
|
|
.iti__ro {
|
|
--iti-flag-offset: -184;
|
|
}
|
|
.iti__rs {
|
|
--iti-flag-offset: -185;
|
|
}
|
|
.iti__ru {
|
|
--iti-flag-offset: -186;
|
|
}
|
|
.iti__rw {
|
|
--iti-flag-offset: -187;
|
|
}
|
|
.iti__sa {
|
|
--iti-flag-offset: -188;
|
|
}
|
|
.iti__sb {
|
|
--iti-flag-offset: -189;
|
|
}
|
|
.iti__sc {
|
|
--iti-flag-offset: -190;
|
|
}
|
|
.iti__sd {
|
|
--iti-flag-offset: -191;
|
|
}
|
|
.iti__se {
|
|
--iti-flag-offset: -192;
|
|
}
|
|
.iti__sg {
|
|
--iti-flag-offset: -193;
|
|
}
|
|
.iti__sh {
|
|
--iti-flag-offset: -194;
|
|
}
|
|
.iti__si {
|
|
--iti-flag-offset: -195;
|
|
}
|
|
.iti__sj {
|
|
--iti-flag-offset: -196;
|
|
}
|
|
.iti__sk {
|
|
--iti-flag-offset: -197;
|
|
}
|
|
.iti__sl {
|
|
--iti-flag-offset: -198;
|
|
}
|
|
.iti__sm {
|
|
--iti-flag-offset: -199;
|
|
}
|
|
.iti__sn {
|
|
--iti-flag-offset: -200;
|
|
}
|
|
.iti__so {
|
|
--iti-flag-offset: -201;
|
|
}
|
|
.iti__sr {
|
|
--iti-flag-offset: -202;
|
|
}
|
|
.iti__ss {
|
|
--iti-flag-offset: -203;
|
|
}
|
|
.iti__st {
|
|
--iti-flag-offset: -204;
|
|
}
|
|
.iti__sv {
|
|
--iti-flag-offset: -205;
|
|
}
|
|
.iti__sx {
|
|
--iti-flag-offset: -206;
|
|
}
|
|
.iti__sy {
|
|
--iti-flag-offset: -207;
|
|
}
|
|
.iti__sz {
|
|
--iti-flag-offset: -208;
|
|
}
|
|
.iti__tc {
|
|
--iti-flag-offset: -209;
|
|
}
|
|
.iti__td {
|
|
--iti-flag-offset: -210;
|
|
}
|
|
.iti__tg {
|
|
--iti-flag-offset: -211;
|
|
}
|
|
.iti__th {
|
|
--iti-flag-offset: -212;
|
|
}
|
|
.iti__tj {
|
|
--iti-flag-offset: -213;
|
|
}
|
|
.iti__tk {
|
|
--iti-flag-offset: -214;
|
|
}
|
|
.iti__tl {
|
|
--iti-flag-offset: -215;
|
|
}
|
|
.iti__tm {
|
|
--iti-flag-offset: -216;
|
|
}
|
|
.iti__tn {
|
|
--iti-flag-offset: -217;
|
|
}
|
|
.iti__to {
|
|
--iti-flag-offset: -218;
|
|
}
|
|
.iti__tr {
|
|
--iti-flag-offset: -219;
|
|
}
|
|
.iti__tt {
|
|
--iti-flag-offset: -220;
|
|
}
|
|
.iti__tv {
|
|
--iti-flag-offset: -221;
|
|
}
|
|
.iti__tw {
|
|
--iti-flag-offset: -222;
|
|
}
|
|
.iti__tz {
|
|
--iti-flag-offset: -223;
|
|
}
|
|
.iti__ua {
|
|
--iti-flag-offset: -224;
|
|
}
|
|
.iti__ug {
|
|
--iti-flag-offset: -225;
|
|
}
|
|
.iti__us {
|
|
--iti-flag-offset: -226;
|
|
}
|
|
.iti__uy {
|
|
--iti-flag-offset: -227;
|
|
}
|
|
.iti__uz {
|
|
--iti-flag-offset: -228;
|
|
}
|
|
.iti__va {
|
|
--iti-flag-offset: -229;
|
|
}
|
|
.iti__vc {
|
|
--iti-flag-offset: -230;
|
|
}
|
|
.iti__ve {
|
|
--iti-flag-offset: -231;
|
|
}
|
|
.iti__vg {
|
|
--iti-flag-offset: -232;
|
|
}
|
|
.iti__vi {
|
|
--iti-flag-offset: -233;
|
|
}
|
|
.iti__vn {
|
|
--iti-flag-offset: -234;
|
|
}
|
|
.iti__vu {
|
|
--iti-flag-offset: -235;
|
|
}
|
|
.iti__wf {
|
|
--iti-flag-offset: -236;
|
|
}
|
|
.iti__ws {
|
|
--iti-flag-offset: -237;
|
|
}
|
|
.iti__xk {
|
|
--iti-flag-offset: -238;
|
|
}
|
|
.iti__ye {
|
|
--iti-flag-offset: -239;
|
|
}
|
|
.iti__yt {
|
|
--iti-flag-offset: -240;
|
|
}
|
|
.iti__za {
|
|
--iti-flag-offset: -241;
|
|
}
|
|
.iti__zm {
|
|
--iti-flag-offset: -242;
|
|
}
|
|
.iti__zw {
|
|
--iti-flag-offset: -243;
|
|
}
|
|
|
|
/* packages/core/src/css/intlTelInput.css */
|
|
:root {
|
|
--iti-hover-color: rgba(0, 0, 0, 0.05);
|
|
--iti-border-color: #ccc;
|
|
--iti-dropdown-bg: white;
|
|
--iti-icon-color: #555;
|
|
--iti-spacer-horizontal: 10px;
|
|
--iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);
|
|
--iti-globe-icon-size: 17px;
|
|
--iti-clear-icon-size: 15px;
|
|
--iti-border-width: 1px;
|
|
--iti-arrow-size: 5px;
|
|
--iti-arrow-width: 1.5px;
|
|
--iti-arrow-padding: 7px;
|
|
--iti-mobile-popup-margin: 30px;
|
|
--iti-strict-reject-flash-color: rgba(255, 0, 0, 0.12);
|
|
}
|
|
.iti {
|
|
position: relative;
|
|
display: inline-block;
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
input.iti__tel-input,
|
|
input.iti__tel-input[type=text],
|
|
input.iti__tel-input[type=tel] {
|
|
position: relative;
|
|
z-index: 0;
|
|
display: block;
|
|
min-width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
.iti__a11y-text {
|
|
width: 1px;
|
|
height: 1px;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.iti__country-container {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: var(--iti-border-width);
|
|
}
|
|
.iti__selected-country {
|
|
z-index: 1;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
background: none;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
border-radius: 0;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.iti__selected-country-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
|
|
}
|
|
.iti__selected-dial-code {
|
|
margin-left: 4px;
|
|
}
|
|
.iti__arrow {
|
|
margin-left: var(--iti-arrow-padding);
|
|
margin-top: -2px;
|
|
width: var(--iti-arrow-size);
|
|
height: var(--iti-arrow-size);
|
|
box-sizing: border-box;
|
|
border-right: var(--iti-arrow-width) solid var(--iti-icon-color);
|
|
border-bottom: var(--iti-arrow-width) solid var(--iti-icon-color);
|
|
transform: rotate(45deg);
|
|
}
|
|
.iti__arrow--up {
|
|
margin-top: 4px;
|
|
transform: rotate(-135deg);
|
|
}
|
|
.iti__dropdown-content {
|
|
border-radius: 3px;
|
|
background-color: var(--iti-dropdown-bg);
|
|
.iti--inline-dropdown & {
|
|
border: var(--iti-border-width) solid var(--iti-border-color);
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.iti--inline-dropdown:not(.iti--container) & {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
}
|
|
}
|
|
.iti__search-input {
|
|
width: 100%;
|
|
border-width: 0;
|
|
border-radius: 3px;
|
|
padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
|
|
padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
|
|
[dir=rtl] & {
|
|
padding-left: inherit;
|
|
padding-right: 30px;
|
|
background-position: right 8px center;
|
|
}
|
|
&::-webkit-search-cancel-button {
|
|
appearance: none;
|
|
}
|
|
}
|
|
.iti__search-input,
|
|
.iti__country {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.iti__search-input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--iti-border-color);
|
|
}
|
|
.iti__search-icon {
|
|
position: absolute;
|
|
left: var(--iti-spacer-horizontal);
|
|
display: flex;
|
|
pointer-events: none;
|
|
[dir=rtl] & {
|
|
left: auto;
|
|
right: var(--iti-spacer-horizontal);
|
|
}
|
|
}
|
|
.iti__search-icon-svg {
|
|
width: var(--iti-globe-icon-size);
|
|
height: var(--iti-globe-icon-size);
|
|
display: block;
|
|
stroke: var(--iti-icon-color);
|
|
fill: none;
|
|
stroke-width: 3;
|
|
}
|
|
.iti__search-clear {
|
|
position: absolute;
|
|
right: calc(var(--iti-spacer-horizontal) / 2);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
padding: calc(var(--iti-spacer-horizontal) / 2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.15s ease;
|
|
.iti__search-clear-x {
|
|
stroke-width: 2;
|
|
}
|
|
.iti__search-clear-bg {
|
|
fill: var(--iti-icon-color);
|
|
}
|
|
[dir=rtl] & {
|
|
right: auto;
|
|
left: var(--iti-spacer-horizontal);
|
|
}
|
|
&:hover,
|
|
&:focus-visible {
|
|
background: var(--iti-hover-color);
|
|
outline: none;
|
|
}
|
|
}
|
|
.iti__search-clear-svg {
|
|
width: var(--iti-clear-icon-size);
|
|
height: var(--iti-clear-icon-size);
|
|
display: block;
|
|
}
|
|
.iti__no-results {
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
}
|
|
.iti__country-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
.iti--inline-dropdown & {
|
|
max-height: 185px;
|
|
}
|
|
}
|
|
.iti--flexible-dropdown-width .iti__country-list {
|
|
white-space: nowrap;
|
|
@media (max-width: 500px) {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
.iti__country {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: var(--iti-spacer-horizontal);
|
|
padding-right: var(--iti-spacer-horizontal);
|
|
outline: none;
|
|
&.iti__highlight {
|
|
background-color: var(--iti-hover-color);
|
|
}
|
|
}
|
|
.iti__country-name {
|
|
flex-grow: 1;
|
|
}
|
|
.iti__country-check {
|
|
margin-left: var(--iti-spacer-horizontal);
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--iti-icon-color);
|
|
}
|
|
.iti__country-check-svg {
|
|
width: var(--iti-clear-icon-size);
|
|
height: var(--iti-clear-icon-size);
|
|
display: block;
|
|
}
|
|
.iti__country-list .iti__flag {
|
|
margin-right: var(--iti-spacer-horizontal);
|
|
flex-shrink: 0;
|
|
[dir=rtl] & {
|
|
margin-right: 0;
|
|
margin-left: var(--iti-spacer-horizontal);
|
|
}
|
|
}
|
|
.iti--allow-dropdown {
|
|
.iti__country-container:has(+ input[disabled]),
|
|
.iti__country-container:has(+ input[readonly]) {
|
|
button.iti__selected-country {
|
|
cursor: not-allowed;
|
|
.iti__arrow {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
.iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) {
|
|
.iti__selected-country-primary:hover,
|
|
.iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
|
|
background-color: var(--iti-hover-color);
|
|
}
|
|
}
|
|
}
|
|
.iti--container {
|
|
position: fixed;
|
|
top: -1000px;
|
|
left: -1000px;
|
|
z-index: 1060;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.iti__hide {
|
|
display: none;
|
|
}
|
|
.iti__v-hide {
|
|
visibility: hidden;
|
|
}
|
|
.iti--fullscreen-popup {
|
|
&.iti--container {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
position: fixed;
|
|
padding: var(--iti-mobile-popup-margin);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
.iti__dropdown-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
position: relative;
|
|
}
|
|
.iti__country,
|
|
.iti__search-input {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.iti__country {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
line-height: 1.5em;
|
|
}
|
|
}
|
|
.iti__flag {
|
|
height: var(--iti-flag-height);
|
|
width: var(--iti-flag-width);
|
|
border-radius: 1px;
|
|
box-shadow: 0px 0px 1px 0px #888;
|
|
background-image: image-set(var(--iti-path-flags-1x) 1x, var(--iti-path-flags-2x) 2x);
|
|
background-repeat: no-repeat;
|
|
background-position: calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;
|
|
background-size: calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height);
|
|
}
|
|
.iti__loading {
|
|
position: relative;
|
|
background: none;
|
|
box-shadow: none;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: var(--iti-flag-height);
|
|
height: var(--iti-flag-height);
|
|
box-sizing: border-box;
|
|
border: 2px solid var(--iti-icon-color);
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: iti-spinner 1s linear infinite;
|
|
}
|
|
}
|
|
@keyframes iti-spinner {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.iti__strict-reject-animation {
|
|
.iti__tel-input,
|
|
.iti__selected-country {
|
|
animation: iti-strict-reject-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.iti__tel-input {
|
|
animation: iti-strict-reject-flash 0.3s ease-out both;
|
|
}
|
|
.iti__selected-country {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
@keyframes iti-strict-reject-shake {
|
|
10%, 90% {
|
|
transform: translateX(-1px);
|
|
}
|
|
20%, 80% {
|
|
transform: translateX(2px);
|
|
}
|
|
30%, 50%, 70% {
|
|
transform: translateX(-3px);
|
|
}
|
|
40%, 60% {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
@keyframes iti-strict-reject-flash {
|
|
40% {
|
|
background-color: var(--iti-strict-reject-flash-color);
|
|
}
|
|
}
|
|
.iti__globe {
|
|
background: none;
|
|
box-shadow: none;
|
|
height: var(--iti-globe-icon-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
.iti__globe-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: var(--iti-icon-color);
|
|
}
|
|
}
|
|
@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
|
|
.iti__tel-input:focus {
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
/* packages/core/src/css/intlTelInputWithAssets.css */
|
|
:root {
|
|
--iti-path-flags-1x: url(../img/flags.webp);
|
|
--iti-path-flags-2x: url(../img/flags@2x.webp);
|
|
}
|