Skip to content

Commit 06b8a51

Browse files
SisIvanovaSisIvanova
authored
refactor(input-group): add readonly styles (#16328)
* refactor(input-group): add readonly styles * fix(input-group): material border styles
1 parent c0c9e4f commit 06b8a51

File tree

5 files changed

+241
-7
lines changed

5 files changed

+241
-7
lines changed

‎projects/igniteui-angular/src/lib/input-group/themes/_base.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,48 @@ $base-scale-size: (
356356
}
357357
}
358358

359+
@include m(readonly, $not: (file, disabled)) {
360+
igx-prefix,
361+
[igxPrefix],
362+
igx-suffix,
363+
[igxSuffix] {
364+
color: var-get($theme, 'disabled-text-color');
365+
}
366+
367+
@include e(input) {
368+
&:hover {
369+
cursor: default;
370+
color: var-get($theme, 'filled-text-color');
371+
}
372+
373+
&:hover:not(:focus-within) {
374+
&::placeholder {
375+
color: var-get($theme, 'placeholder-color');
376+
}
377+
}
378+
}
379+
380+
@include e(textarea) {
381+
&:hover {
382+
cursor: default;
383+
color: var-get($theme, 'filled-text-color');
384+
}
385+
386+
&:hover:not(:focus-within) {
387+
&::placeholder {
388+
color: var-get($theme, 'placeholder-color');
389+
}
390+
}
391+
}
392+
}
393+
394+
@include mx(readonly, focused, ('not': (file))) {
395+
igx-suffix,
396+
[igxSuffix] {
397+
color: var-get($theme, 'disabled-text-color');
398+
}
399+
}
400+
359401
@include m(required) {
360402
@include e(label) {
361403
&::after {

‎projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,40 @@ $border-radius: var-get($_theme, 'border-border-radius');
202202
}
203203
}
204204

205+
@include m(readonly, $not: (file, disabled)) {
206+
igx-prefix,
207+
[igxPrefix],
208+
igx-suffix,
209+
[igxSuffix] {
210+
background: var-get($_theme, 'border-disabled-background');
211+
}
212+
213+
@include e(bundle-main) {
214+
background: var-get($_theme, 'border-disabled-background');
215+
}
216+
217+
@include e(textarea) {
218+
background: var-get($_theme, 'border-disabled-background');
219+
}
220+
}
221+
222+
@include mx(invalid, readonly, ('not': (file, disabled))) {
223+
@include e(hint) {
224+
color: var-get($_theme, 'helper-text-color');
225+
}
226+
227+
@include e(bundle-main) {
228+
border-color: var-get($_theme, 'border-color');
229+
}
230+
}
231+
232+
@include mx(invalid, readonly, focused, ('not': (file, disabled))) {
233+
@include e(bundle-main) {
234+
border-color: var-get($_theme, 'focused-border-color');
235+
box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focused-secondary-color');
236+
}
237+
}
238+
205239
@include m(focused) {
206240
@include e(bundle-main) {
207241
transition: border .15s ease-out;

‎projects/igniteui-angular/src/lib/input-group/themes/shared/fluent.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,55 @@ $_theme: $fluent;
8282
}
8383
}
8484

85+
@include m(readonly, $not: (file)) {
86+
igx-prefix,
87+
[igxPrefix],
88+
igx-suffix,
89+
[igxSuffix] {
90+
background: transparent;
91+
}
92+
93+
@include e(bundle) {
94+
&:hover:not(:focus-within) {
95+
border-color: var-get($_theme, 'border-color');
96+
}
97+
}
98+
}
99+
100+
@include mx(readonly, search) {
101+
igx-prefix,
102+
[igxPrefix],
103+
igx-suffix,
104+
[igxSuffix] {
105+
color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500));
106+
}
107+
}
108+
109+
@include mx(readonly, search, focused) {
110+
igx-suffix,
111+
[igxSuffix] {
112+
color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
113+
}
114+
}
115+
116+
@include mx(invalid, readonly, ('not': (file, disabled))) {
117+
@include e(bundle) {
118+
border-color: var-get($_theme, 'border-color');
119+
}
120+
121+
@include e(hint) {
122+
color: var-get($_theme, 'helper-text-color');
123+
}
124+
}
125+
126+
@include mx(invalid, readonly, focused, ('not': (file, disabled))) {
127+
@include e(bundle) {
128+
&::after {
129+
border-color: var-get($_theme, 'focused-border-color');
130+
}
131+
}
132+
}
133+
85134
@include m(invalid) {
86135
@include e(label) {
87136
&::after {

‎projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,23 @@ $_theme: $indigo;
9494
}
9595
}
9696

97+
@include m(readonly, $not: (file, disabled)) {
98+
@include e(bundle) {
99+
border-block-end-color: var-get($_theme, 'disabled-text-color');
100+
101+
&:hover:not(:focus-within) {
102+
background: unset;
103+
border-block-end-color: var-get($_theme, 'disabled-text-color');
104+
}
105+
}
106+
}
107+
108+
@include mx(readonly, focused, ('not': (file, disabled))) {
109+
@include e(bundle) {
110+
border-block-end-color: var-get($_theme, 'focused-bottom-line-color');
111+
}
112+
}
113+
97114
@include m(focused) {
98115
@include e(bundle) {
99116
background: var-get($_theme, 'box-background-hover');

‎projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss‎

Lines changed: 99 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -648,6 +648,8 @@ $input-bottom-spacing: rem(6px);
648648

649649
@include e(label) {
650650
color: var-get($_theme, 'focused-secondary-color');
651+
translate: 0 var(--_label-translate-top);
652+
align-self: start;
651653
}
652654

653655
@include e(bundle-start) {
@@ -689,13 +691,6 @@ $input-bottom-spacing: rem(6px);
689691
}
690692
}
691693

692-
@include mx(border, focused) {
693-
@include e(label) {
694-
translate: 0 var(--_label-translate-top);
695-
align-self: start;
696-
}
697-
}
698-
699694
@include mx(border, filled, ('not': (focused))) {
700695
@include e(label) {
701696
translate: 0 var(--_label-translate-top);
@@ -944,6 +939,103 @@ $input-bottom-spacing: rem(6px);
944939
@include type-style(subtitle-1);
945940
}
946941

942+
@include m(readonly, $not: (file)) {
943+
@include e(bundle) {
944+
&:hover::before {
945+
border-block-end-color: var-get($_theme, 'idle-bottom-line-color');
946+
}
947+
}
948+
}
949+
950+
@include mx(readonly, box, ('not': (file, disabled))) {
951+
&:hover:not(:focus-within) {
952+
@include e(bundle) {
953+
background: var-get($_theme, 'box-background-focus');
954+
}
955+
}
956+
}
957+
958+
@include mx(readonly, border, ('not': (file, focused))) {
959+
&:hover {
960+
@include e(bundle-start) {
961+
border-color: var-get($_theme, 'border-color');
962+
}
963+
964+
@include e(bundle-end) {
965+
border-color: var-get($_theme, 'border-color');
966+
}
967+
968+
@include e(notch) {
969+
border-color: var-get($_theme, 'border-color');
970+
}
971+
972+
@include e(filler) {
973+
border-color: var-get($_theme, 'border-color');
974+
}
975+
}
976+
}
977+
978+
@include mx(invalid, readonly, ('not': (file, disabled))) {
979+
@include e(label) {
980+
color: var-get($_theme, 'idle-secondary-color');
981+
}
982+
983+
@include e(hint) {
984+
color: var-get($_theme, 'helper-text-color');
985+
}
986+
987+
@include e(bundle) {
988+
&::before {
989+
border-block-end-color: var-get($_theme, 'idle-bottom-line-color');
990+
}
991+
}
992+
}
993+
994+
@include mx(invalid, readonly, focused, ('not': (file, disabled))) {
995+
@include e(label) {
996+
color: var-get($_theme, 'focused-secondary-color');
997+
}
998+
999+
@include e(bundle) {
1000+
&::after {
1001+
background: var-get($_theme, 'focused-bottom-line-color');
1002+
}
1003+
}
1004+
}
1005+
1006+
@include mx(border, invalid, readonly, focused, ('not': (file, disabled))) {
1007+
@include e(bundle-start) {
1008+
border-color: var-get($_theme, 'focused-border-color');
1009+
}
1010+
1011+
@include e(bundle-end) {
1012+
border-color: var-get($_theme, 'focused-border-color');
1013+
}
1014+
1015+
@include e(notch) {
1016+
border-block-end-color: var-get($_theme, 'focused-border-color');
1017+
}
1018+
1019+
@include e(filler) {
1020+
border-color: var-get($_theme, 'focused-border-color');
1021+
}
1022+
}
1023+
1024+
@include mx(readonly, search) {
1025+
@include e(bundle) {
1026+
&:hover:not(:focus-within) {
1027+
box-shadow: var-get($_theme, 'search-resting-elevation');
1028+
}
1029+
}
1030+
}
1031+
1032+
@include mx(readonly, search, focused) {
1033+
igx-suffix,
1034+
[igxSuffix] {
1035+
color: var-get($_theme, 'disabled-text-color');
1036+
}
1037+
}
1038+
9471039
@include m(filled) {
9481040
@include e(label) {
9491041
@include type-style(caption);

0 commit comments

Comments
 (0)