feat(WEB-304): remaning UI from design system primitives
This commit is contained in:
@@ -1,25 +1,26 @@
|
||||
.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);
|
||||
--react-international-phone-border-color: var(--UI-Grey-60);
|
||||
--react-international-phone-border-radius: var(--Corner-radius-Small);
|
||||
--react-international-phone-font-size: var(
|
||||
--typography-Body-Regular-fontSize
|
||||
);
|
||||
--react-international-phone-height: 40px;
|
||||
--react-international-phone-text-color: var(--UI-Grey-60);
|
||||
}
|
||||
|
||||
.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%);
|
||||
grid-template-columns: 470px minmax(203px, 1fr);
|
||||
width: min(280px, 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;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.phone :global(.react-international-phone-input) {
|
||||
padding: 0.8rem 1.6rem;
|
||||
padding: var(--Spacing-x1) var(--Spacing-x2);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user