mirror of
https://github.com/itflow-org/itflow
synced 2026-09-14 02:35:12 +00:00
use intl js lib across all phone number fields
This commit is contained in:
johnnyq
@@ -1,253 +0,0 @@
|
||||
/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT. */
|
||||
|
||||
: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; }
|
||||
|
||||
/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT. */
|
||||
@@ -1,558 +0,0 @@
|
||||
@import "flag-offsets.css";
|
||||
|
||||
:root {
|
||||
/* rgba is needed for the selected country hover state to blend in with the border-highlighting some browsers give the input on focus.
|
||||
Used as the bg color for both the selected country and the country list items, on hover. */
|
||||
--iti-hover-color: rgba(0, 0, 0, 0.05);
|
||||
/* Used for both the country selector border, and the divider under the country search input. */
|
||||
--iti-border-color: #ccc;
|
||||
--iti-country-selector-bg: white;
|
||||
/* icons include: arrow icon, globe icon, search icon, clear icon, check icon */
|
||||
--iti-icon-color: #555;
|
||||
/* horizontal spacing around the flag, country name, search icon, clear icon, check icon etc */
|
||||
--iti-spacer-horizontal: 10px;
|
||||
/* Flags are a 4:3 aspect ratio, so height is derived from width — consumers only need to override --iti-flag-width to scale.
|
||||
--iti-flag-width itself is set in flag-offsets.css (auto-generated). */
|
||||
--iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);
|
||||
/* Separate height for the globe icon, as it's much thinner than the flags, so nice to have it a bit taller. This is also re-used for the search icon. */
|
||||
--iti-globe-icon-size: 17px;
|
||||
/* Separate height for the search clear icon, which looks too big if it's the same as the others. */
|
||||
--iti-clear-icon-size: 15px;
|
||||
/* 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. */
|
||||
--iti-border-width: 1px;
|
||||
/* Arrow */
|
||||
--iti-arrow-size: 5px;
|
||||
--iti-arrow-width: 1.5px; /* thickness */
|
||||
--iti-arrow-padding: 7px;
|
||||
|
||||
/* NOTE: image paths are now defined in intlTelInputWithAssets.css */
|
||||
|
||||
/* Enough space for them to click off to close. */
|
||||
--iti-mobile-popup-margin: 30px;
|
||||
|
||||
/* Colour used for the flash variant of the strictRejectAnimation option (shown when the user has prefers-reduced-motion). */
|
||||
--iti-strict-reject-flash-color: rgba(255, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.iti {
|
||||
/* We need position on the container so the selected country can be absolutely positioned over the input. */
|
||||
position: relative;
|
||||
/* Keep the input's default inline properties. */
|
||||
display: inline-block;
|
||||
|
||||
/* Paul Irish (paulirish) says this is ok.
|
||||
http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Specify types to increase specificity e.g. to override bootstrap v2.3. */
|
||||
input.iti__tel-input,
|
||||
input.iti__tel-input[type="text"],
|
||||
input.iti__tel-input[type="tel"] {
|
||||
position: relative;
|
||||
/* Input is bottom level, below selected country and country selector. */
|
||||
z-index: 0;
|
||||
|
||||
/* By default the input is inline, which means any inherited line-height will make the wrapper (and hence the selected country) taller than the input. Block is a better default in this case, given it should fill the wrapper. */
|
||||
display: block;
|
||||
|
||||
/* Ensure the input fills the wrapper e.g. when the wrapper is inside a flex/grid container.
|
||||
When the wrapper has no explicit width (standard inline-block), this is a cyclic percentage
|
||||
and resolves to auto per CSS Sizing 3, so it has no effect and any consumer-set width wins. */
|
||||
min-width: 100%;
|
||||
|
||||
/* Since we wrap the input in a container div, any margin here would interfere with the positioning of the selected country. */
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.iti__a11y-text {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.iti__country-container {
|
||||
/* Positioned over the top of the input. */
|
||||
position: absolute;
|
||||
/* Full height. */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* Prevent the highlighted child from overlapping the input border. */
|
||||
padding: var(--iti-border-width);
|
||||
}
|
||||
|
||||
/* Now a button element. */
|
||||
.iti__selected-country {
|
||||
/* Render above the input. */
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* This must be full-height both for the hover highlight, and to push down the dropdown so it appears below the input. */
|
||||
height: 100%;
|
||||
|
||||
/* Reset button styles (can't use all:unset as lose browser default focus outline styles). */
|
||||
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;
|
||||
/* This must be full-height for the hover highlight. */
|
||||
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);
|
||||
}
|
||||
|
||||
/* The country selector. */
|
||||
.iti__country-selector {
|
||||
border-radius: 3px;
|
||||
background-color: var(--iti-country-selector-bg);
|
||||
|
||||
.iti--inline-country-selector & {
|
||||
border: var(--iti-border-width) solid var(--iti-border-color);
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
/* Note: don't apply these styles when using dropdownParent, as that uses pos:fixed and so this (child) doesn't need pos:absolute */
|
||||
.iti--inline-country-selector:not(.iti--detached-country-selector) & {
|
||||
position: absolute;
|
||||
/* Popup so render above everything else. */
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.iti__search-input {
|
||||
width: 100%;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
/* Space for search icon. */
|
||||
padding-left: calc(
|
||||
var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) +
|
||||
var(--iti-spacer-horizontal)
|
||||
);
|
||||
/* Space for clear button. */
|
||||
padding-right: calc(
|
||||
var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) +
|
||||
var(--iti-spacer-horizontal)
|
||||
);
|
||||
|
||||
/* RTL: put the icon on the right instead. */
|
||||
[dir="rtl"] & {
|
||||
padding-left: inherit;
|
||||
padding-right: 30px;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
/* hide chrome/safari's native clear button for inputs with type=search */
|
||||
&::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* give the search input the same v-padding as the country items, for visual consistency */
|
||||
.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;
|
||||
/* half the spacer value as the other half is in the padding */
|
||||
right: calc(var(--iti-spacer-horizontal) / 2);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 3px; /* nice on hover state */
|
||||
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 {
|
||||
/* Override default list styles. */
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
overflow-y: scroll;
|
||||
/* Fixes https://github.com/jackocnr/intl-tel-input/issues/765
|
||||
Apple still hasn't fixed the issue where setting overflow: scroll on a div element does not use inertia scrolling
|
||||
If this is not set, then the country list scroll stops moving after raising a finger, and users report that scroll is slow
|
||||
Stackoverflow question about it: https://stackoverflow.com/questions/33601165/scrolling-slow-on-mobile-ios-when-using-overflowscroll */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.iti--inline-country-selector & {
|
||||
max-height: 185px;
|
||||
}
|
||||
}
|
||||
|
||||
.iti--flexible-dropdown-width .iti__country-list {
|
||||
/* Don't let the contents wrap AKA the container will be as wide as the contents. */
|
||||
white-space: nowrap;
|
||||
|
||||
/* Except on small screens, where we force the dropdown width to match the input. */
|
||||
@media (max-width: 500px) {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Each country item in the list (we must have separate class to differentiate from dividers). */
|
||||
.iti__country {
|
||||
/* Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: var(--iti-spacer-horizontal);
|
||||
padding-right: var(--iti-spacer-horizontal);
|
||||
outline: none;
|
||||
|
||||
&.iti__highlight {
|
||||
background-color: var(--iti-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.iti__country-name {
|
||||
/* expand to fill available space, so the last flex item, the check mark, is pushed to the right edge */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Check icon shown on the right for the selected country. */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Spacing between country flag and country name. */
|
||||
.iti__country-list .iti__flag {
|
||||
margin-right: var(--iti-spacer-horizontal);
|
||||
flex-shrink: 0; /* stop long country names from shrinking the flag */
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--iti-spacer-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
.iti--has-country-selector {
|
||||
/* If the adjacent input is disabled/readonly, ensure the country button doesn't look clickable. */
|
||||
.iti__country-container:has(+ input[disabled]),
|
||||
.iti__country-container:has(+ input[readonly]) {
|
||||
button.iti__selected-country {
|
||||
cursor: not-allowed;
|
||||
|
||||
.iti__arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Show the active background colour on the selected flag/arrow when you hover it, or for as long as the country selector (dropdown) is open. Deliberately not applied when hovering the selected dial code, which would feel weird.
|
||||
Only apply when the input is NOT disabled/readonly. */
|
||||
.iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) {
|
||||
.iti__selected-country-primary:hover,
|
||||
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary {
|
||||
background-color: var(--iti-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* When the country selector is rendered detached (fullscreen, or dropdown with dropdownParent set), increase z-index to prevent display issues. */
|
||||
.iti--detached-country-selector {
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
/* Higher than default Bootstrap modal z-index of 1050. */
|
||||
z-index: 1060;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS Anchor Positioning: when supported, the browser keeps the detached country selector
|
||||
anchored to the input on the compositor (no JS scroll/resize listeners needed) and flips it
|
||||
above the input automatically via @position-try when there isn't room below. In unsupporting
|
||||
browsers anchor() is invalid so these declarations are dropped, and ui.ts falls back to
|
||||
JS-driven positioning (which sets inline top/left, overriding the offscreen defaults above). */
|
||||
.iti--detached-country-selector {
|
||||
top: calc(anchor(bottom) + 3px);
|
||||
left: anchor(left);
|
||||
position-try-fallbacks: --iti-flip-above;
|
||||
}
|
||||
|
||||
@position-try --iti-flip-above {
|
||||
top: auto;
|
||||
bottom: calc(anchor(top) + 3px);
|
||||
}
|
||||
|
||||
/* Put these at the end, so they override other classes with display:flex etc. */
|
||||
.iti__hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Need this during init, to get the height of the country list. */
|
||||
.iti__v-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Overrides for mobile popup. */
|
||||
.iti--fullscreen-popup {
|
||||
&.iti--detached-country-selector {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
padding: var(--iti-mobile-popup-margin);
|
||||
/* Short country lists should be vertically centred. */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* The country search input auto-focuses, so mobile keyboard appears, so stick to top (also because when filter countries down, the height changes and the vertical centring would make it jump around). */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.iti__country-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
position: relative; /* Override needed in order to get full-width working properly. */
|
||||
}
|
||||
|
||||
/* give the search input the same v-padding as the country items, for visual consistency */
|
||||
.iti__country,
|
||||
.iti__search-input {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.iti__country {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
/* Increase line height because country list copy is v likely to overflow on mobile and when it does it needs to be well spaced. */
|
||||
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;
|
||||
/* Offset and sprite size are expressed as multiples of --iti-flag-width / --iti-flag-height
|
||||
so consumers can scale the flags by overriding just those two vars.
|
||||
The 100 fallback hides all flags when no country class is set (useful for the empty state
|
||||
shown while initialCountryLookup is resolving) — done via var()'s fallback rather than as a rule
|
||||
default so the country-specific offsets win regardless of source order. */
|
||||
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);
|
||||
}
|
||||
|
||||
/* Loading state (used while initialCountryLookup is resolving the initial country). */
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
/* Subtle visual feedback when strictMode rejects the whole input. Opt-in via the strictRejectAnimation option.
|
||||
Targets the input and selected-country button (not the wrapper), so an open dropdown (e.g. with dropdownAlwaysOpen) doesn't shake along with them. */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Users who have opted out of motion get a brief background-color flash on the input instead (the selected-country button is skipped to avoid an odd-looking flash on a small UI element). */
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
/* Keyframe omits 0%/100% so the element falls back to its base background-color
|
||||
(important because `both` fill-mode would otherwise persist the last keyframe). */
|
||||
@keyframes iti-strict-reject-flash {
|
||||
40% {
|
||||
background-color: var(--iti-strict-reject-flash-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty state.
|
||||
Inline globe icon (now rendered as SVG inside .iti__flag). Keep class for width/position logic and to clear box-shadow. */
|
||||
.iti__globe {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
height: var(--iti-globe-icon-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0; /* ensure svg centers */
|
||||
|
||||
.iti__globe-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--iti-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Browsers normally add a coloured outline when you focus an input. Chrome adds a blue outline WITHIN the input. If you focus the input and then hover the selected country, it's bg color square overlaps the focus outline and looks bad. Here, @supports is used to target Chrome only, and move the default outline out by 1px so there's no overlap. */
|
||||
@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
|
||||
.iti__tel-input:focus {
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
1
libs/intl-tel-input/css/intlTelInput.min.css
vendored
Normal file
1
libs/intl-tel-input/css/intlTelInput.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,7 +0,0 @@
|
||||
@import "intlTelInput.css";
|
||||
|
||||
:root {
|
||||
/* Image related variables. */
|
||||
--iti-path-flags-1x: url('../img/flags.webp');
|
||||
--iti-path-flags-2x: url('../img/flags@2x.webp');
|
||||
}
|
||||
2
libs/intl-tel-input/css/styles.d.ts
vendored
2
libs/intl-tel-input/css/styles.d.ts
vendored
@@ -1,2 +0,0 @@
|
||||
declare const styles: string;
|
||||
export default styles;
|
||||
Reference in New Issue
Block a user