Files
web/components/TempDesignSystem/Form/Phone/phone.module.css
2024-04-16 09:24:31 +02:00

26 lines
884 B
CSS

.phone {
--react-international-phone-border-color: var(--some-black-color, #757575);
--react-international-phone-border-radius: 0.4rem;
--react-international-phone-font-size: 1.6rem;
--react-international-phone-height: 4rem;
--react-international-phone-text-color: color:
var(--some-black-color, #757575);
}
.phone :global(.react-international-phone-input-container) {
display: grid;
/* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
grid-template-columns: 4.7rem minmax(20.3rem, 1fr);
width: min(28rem, 100%);
}
/* react-international-phone only exposes variables to change border-color */
.phone :global(.react-international-phone-country-selector-button),
.phone :global(.react-international-phone-input) {
border-width: 0.2rem;
}
.phone :global(.react-international-phone-input) {
padding: 0.8rem 1.6rem;
}