Skip to content

Commit 6c47e91

Browse files
juanjotorres90juanjotorres90
authored
Merge pull request #34 from Kamma31/feature/add-css-overrides
feat: add variables to customize styles
2 parents cb9340c + 32411ec commit 6c47e91

File tree

1 file changed

+120
-49
lines changed

1 file changed

+120
-49
lines changed

‎libs/ngx-material-intl-tel-input-lib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.scss‎

Lines changed: 120 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,71 +6,146 @@
66
display: flex;
77
flex-direction: column;
88
width: 100%;
9+
910
.main-label {
1011
padding: 2px 0;
1112
font-size: 14px;
1213
}
13-
.tel-form {
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
17-
width: 100%;
18-
border-radius: 8px;
19-
border: 1px solid #d8d8d8;
20-
background-color: #fbfbfb;
14+
15+
.tel-form:has(.mat-form-field-appearance-fill) {
16+
border-style: solid;
17+
border-width: var(--mdc-filled-tel-form-outline-width, 1px);
18+
border-color: var(--mdc-filled-tel-form-outline-color, #d8d8d8);
19+
border-radius: var(--mdc-filled-tel-form-container-shape, 8px);
20+
background-color: var(
21+
--mdc-filled-tel-form-background,
22+
#fbfbfb
23+
) !important;
24+
2125
&.is-focused {
22-
border: 1px solid var(--mdc-theme-primary, #209ffc);
23-
outline: 2px solid rgba(var(--mdc-theme-primary-rgb, 32, 159, 252), 0.3);
24-
background-color: #fff;
26+
border-color: var(
27+
--mdc-filled-tel-form-focus-outline-color,
28+
var(--mdc-theme-primary, rgb(32, 159, 252))
29+
);
30+
outline: 2px solid
31+
var(
32+
--mdc-filled-tel-form-focus-outline-color,
33+
rgba(var(--mdc-theme-primary-rgb, 32, 159, 252), 0.3)
34+
);
35+
background-color: var(
36+
--mdc-filled-tel-form-focus-background,
37+
#fff
38+
) !important;
39+
}
40+
&:hover {
41+
background-color: var(
42+
--mdc-filled-tel-form-hover-background,
43+
#f5f5f5
44+
) !important;
2545
}
2646
&.ng-invalid.ng-dirty:not(.is-focused) {
2747
border: 1px solid var(--mdc-theme-error, #f44336);
2848
}
49+
}
50+
51+
.tel-form:has(.mat-form-field-appearance-outline) {
52+
border: none;
53+
background-color: var(
54+
--mdc-outline-tel-form-background,
55+
#fbfbfb
56+
) !important;
57+
&:hover {
58+
background-color: var(
59+
--mdc-outline-tel-form-hover-background,
60+
#f5f5f5
61+
) !important;
62+
}
63+
mat-form-field {
64+
&.prefix-form-field {
65+
&::ng-deep .mat-mdc-text-field-wrapper {
66+
border-top-left-radius: var(
67+
--mdc-outlined-tel-form-container-shape,
68+
var(--mat-sys-corner-extra-small)
69+
);
70+
border-bottom-left-radius: var(
71+
--mdc-outlined-tel-form-container-shape,
72+
var(--mat-sys-corner-extra-small)
73+
);
74+
}
75+
&::ng-deep .mdc-notched-outline__trailing {
76+
margin-right: -1px;
77+
border-radius: 0;
78+
}
79+
}
80+
&.number-form-field {
81+
&::ng-deep .mat-mdc-text-field-wrapper {
82+
border-top-right-radius: var(
83+
--mdc-outlined-text-field-container-shape,
84+
var(--mat-sys-corner-extra-small)
85+
);
86+
border-bottom-right-radius: var(
87+
--mdc-outlined-text-field-container-shape,
88+
var(--mat-sys-corner-extra-small)
89+
);
90+
}
91+
&::ng-deep .mdc-notched-outline__leading {
92+
border-radius: 0;
93+
width: max(
94+
12px,
95+
var(
96+
--mdc-outlined-text-field-container-shape,
97+
var(--mat-sys-corner-extra-small)
98+
)
99+
);
100+
}
101+
}
102+
}
103+
}
104+
105+
.tel-form {
106+
display: flex;
107+
justify-content: center;
108+
align-items: center;
109+
width: 100%;
110+
29111
mat-form-field {
30112
&::ng-deep .mat-mdc-form-field-subscript-wrapper {
31113
display: none;
32114
}
33-
&::ng-deep .mdc-text-field--filled,
34-
&::ng-deep .mdc-text-field--filled.mdc-text-field--focused,
35-
&::ng-deep
36-
.mdc-text-field--filled.mdc-text-field--focused.mdc-text-field--invalid,
37-
&::ng-deep .mdc-line-ripple::after,
38-
&::ng-deep .mdc-line-ripple::before {
39-
border-left: none !important;
40-
border-right: none !important;
41-
border-top: none !important;
42-
border-bottom: none !important;
43-
outline: none !important;
115+
.mdc-text-field--filled,
116+
.mdc-text-field--filled.mdc-text-field--focused,
117+
.mdc-text-field--filled.mdc-text-field--focused.mdc-text-field--invalid,
118+
.mdc-line-ripple::after,
119+
.mdc-line-ripple::before {
120+
border-left: none;
121+
border-right: none;
122+
border-top: none;
123+
border-bottom: none;
124+
outline: none;
44125
}
45126

46127
&::ng-deep .mat-mdc-text-field-wrapper,
47128
&::ng-deep .mat-mdc-form-field-focus-overlay {
48-
border-left: none !important;
49-
border-right: none !important;
50-
border-top: none !important;
51-
border-bottom: none !important;
129+
border-left: none;
130+
border-right: none;
131+
border-top: none;
132+
border-bottom: none;
52133
background-color: transparent !important;
53134

54135
&:hover {
55-
border-left: none !important;
56-
border-right: none !important;
57-
border-top: none !important;
58-
border-bottom: none !important;
136+
border-left: none;
137+
border-right: none;
138+
border-top: none;
139+
border-bottom: none;
59140
background-color: transparent !important;
60141
}
61142
}
62-
&::ng-deep .mat-mdc-text-field-wrapper:hover {
63-
background-color: #f5f5f5 !important;
64-
}
65143
&.prefix-form-field {
66144
min-width: 106px;
67145
width: 106px;
68-
&::ng-deep .mat-mdc-text-field-wrapper {
69-
border-right: none;
70-
border-radius: 8px 0 0 8px;
71-
}
146+
72147
&::ng-deep .mat-mdc-form-field-infix {
73-
padding-top: 16px;
148+
padding-top: var(--mat-form-field-container-vertical-padding, 16px);
74149
padding-bottom: 0;
75150
}
76151
&::ng-deep .mdc-text-field {
@@ -80,22 +155,15 @@
80155

81156
&.number-form-field {
82157
width: 100%;
83-
&::ng-deep .mat-mdc-text-field-wrapper {
84-
border-left: none;
85-
border-radius: 0 8px 8px 0;
86-
}
87-
&::ng-deep .mdc-text-field {
88-
padding-left: 12px;
89-
}
90158
input {
91159
&::placeholder {
92-
color: #ccc;
160+
color: var(--mdc-tel-form-placeholder-color, #ccc);
93161
}
94162
}
95163
mat-icon {
96164
padding: 0 8px;
97165
svg {
98-
color: #909090;
166+
color: var(--mdc-tel-form-icon-color, #909090);
99167
}
100168
a {
101169
text-decoration: none;
@@ -131,10 +199,13 @@
131199
margin: 2px 0;
132200
}
133201
mat-hint {
134-
color: #b2b2b2;
202+
color: var(--mdc-tel-form-hint-color, #b2b2b2);
135203
}
136204
mat-error {
137-
color: var(--mdc-theme-error, #f44336);
205+
color: var(
206+
--mdc-tel-form-error-color,
207+
var(--mat-sys-error, var(--mdc-theme-error, #f44336))
208+
);
138209
}
139210
}
140211

0 commit comments

Comments
 (0)