AS1024/itflow
1
0
Fork 0
mirror of https://github.com/itflow-org/itflow synced 2026-08-27 18:05:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

use intl js lib across all phone number fields

Browse Source
This commit is contained in:
johnnyq
2026-08-26 13:53:27 -04:00
parent cfafc385f0
commit 96f2c697c6
107 changed files with 492 additions and 10356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
css/itflow_custom.css
View File

@@ -1175,6 +1175,57 @@ a:focus {
--lte-primary-color-rgb: 0, 0, 0;
}
/* --- intl-tel-input --------------------------------------------------------
The library wraps the input in a .iti container, which inside an
.input-group becomes the flex item instead of the input. Bootstrap sizes its
children with `.input-group > .form-control { flex: 1 1 auto; width: 1% }`,
and that selector no longer matches the now-nested input - so without these
the wrapper collapses to its content width and the field sits detached from
the addon beside it.
The wrapper takes the sizing the input used to get, and the input inside it
is squared off on the left because .iti draws the country button there and
the addon draws the rounded edge. */
.input-group > .iti {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group > .iti > .form-control {
width: 100%;
}
.input-group > .iti:not(:last-child) > .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .iti:not(:first-child) > .form-control,
.iti--separate-dial-code .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* the country button is chrome, not a control - keep it on the form-control
palette so it does not read as a raised button in either mode */
.iti__selected-country {
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-right: 0;
border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}
.iti__country-list,
.iti__dropdown-content {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border: var(--bs-border-width) solid var(--bs-border-color);
}
.iti__country.iti__highlight,
.iti__country:hover {
background-color: var(--bs-secondary-bg);
}
.iti__dial-code {
color: var(--bs-secondary-color);
}
/* --- Print ----------------------------------------------------------------
AdminLTE 3 bundled Bootstrap 4, whose print reboot shrank every printout by
declaring `@page { size: a3 }` and letting the browser scale that oversized