Skip to content

Commit 36f3aee

Browse files
SisIvanovaSisIvanova
committed
feat(input-group): add read-only styles
1 parent dd5ba17 commit 36f3aee

File tree

1 file changed

+160
-57
lines changed

1 file changed

+160
-57
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 160 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,28 @@
202202
-webkit-appearance: none;
203203
}
204204

205+
&:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
206+
&:has(textarea:read-only:not(:disabled)) {
207+
igx-prefix,
208+
[igxPrefix],
209+
igx-suffix,
210+
[igxSuffix] {
211+
color: var-get($theme, 'disabled-text-color');
212+
}
213+
214+
%form-group-label {
215+
color: var-get($theme, 'idle-secondary-color');
216+
}
217+
218+
%form-group-line {
219+
background: var-get($theme, 'focused-secondary-color');
220+
}
221+
222+
%form-group-helper {
223+
color: var-get($theme, 'helper-text-color');
224+
}
225+
}
226+
205227
igx-icon,
206228
igx-icon[igxPrefix],
207229
igx-icon[igxSuffix] {
@@ -363,9 +385,14 @@
363385
%form-group-bundle--hover {
364386
//cursor: pointer;
365387

366-
&::after {
367-
border-block-end-width: rem(1px);
368-
border-block-end-color: var-get($theme, 'hover-bottom-line-color');
388+
&:has(input:not([readonly])),
389+
&:has(textarea:not([readonly])),
390+
&:has(input[readonly][role="combobox"]),
391+
&:has(input[readonly][type="file"]) {
392+
&::after {
393+
border-block-end-width: rem(1px);
394+
border-block-end-color: var-get($theme, 'hover-bottom-line-color');
395+
}
369396
}
370397
}
371398

@@ -397,10 +424,16 @@
397424
}
398425

399426
%form-group-bundle--error {
400-
&::after {
401-
border-block-end-color: var-get($theme, 'error-secondary-color');
427+
&:has(input:not([readonly])),
428+
&:has(textarea:not([readonly])),
429+
&:has(input[readonly][role="combobox"]),
430+
&:has(input[readonly][type="file"]) {
431+
&::after {
432+
border-block-end-color: var-get($theme, 'error-secondary-color');
433+
}
434+
435+
caret-color: initial;
402436
}
403-
caret-color: initial;
404437
}
405438

406439
%form-group-bundle--disabled {
@@ -612,8 +645,7 @@
612645
%bootstrap-file-focused,
613646
%bootstrap-file-valid,
614647
%bootstrap-file-warning,
615-
%bootstrap-file-invalid,
616-
{
648+
%bootstrap-file-invalid {
617649
%form-group-bundle {
618650
border-radius: var-get($theme, 'box-border-radius');
619651
transition: box-shadow .15s ease-out, border .15s ease-out;
@@ -714,6 +746,11 @@
714746
&:hover {
715747
background: var-get($theme, 'box-background-hover');
716748
}
749+
750+
&:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
751+
&:has(textarea:read-only:not(:disabled)) {
752+
background: var-get($theme, 'box-background-focus');
753+
}
717754
}
718755

719756
%form-group-bundle--box-focus {
@@ -873,22 +910,27 @@
873910
display: none;
874911
}
875912

876-
&:hover {
877-
%form-group-bundle-start {
878-
border-color: var-get($theme, 'hover-border-color');
879-
}
913+
&:has(input:not([readonly])),
914+
&:has(textarea:not([readonly])),
915+
&:has(input[readonly][role="combobox"]),
916+
&:has(input[readonly][type="file"]) {
917+
&:hover {
918+
%form-group-bundle-start {
919+
border-color: var-get($theme, 'hover-border-color');
920+
}
880921

881-
%igx-input-group__filler {
882-
border-color: var-get($theme, 'hover-border-color');
883-
}
922+
%igx-input-group__filler {
923+
border-color: var-get($theme, 'hover-border-color');
924+
}
884925

885-
%igx-input-group__notch {
886-
border-block-start-color: var-get($theme, 'hover-border-color');
887-
border-block-end-color: var-get($theme, 'hover-border-color');
888-
}
926+
%igx-input-group__notch {
927+
border-block-start-color: var-get($theme, 'hover-border-color');
928+
border-block-end-color: var-get($theme, 'hover-border-color');
929+
}
889930

890-
%form-group-bundle-end {
891-
border-color: var-get($theme, 'hover-border-color');
931+
%form-group-bundle-end {
932+
border-color: var-get($theme, 'hover-border-color');
933+
}
892934
}
893935
}
894936
}
@@ -948,8 +990,10 @@
948990
}
949991

950992
%form-group-bundle-search--hover {
951-
box-shadow: var-get($theme, 'search-hover-shadow');
952-
border-color: var-get($theme, 'hover-border-color');
993+
&:has(input:not([readonly])) {
994+
box-shadow: var-get($theme, 'search-hover-shadow');
995+
border-color: var-get($theme, 'hover-border-color');
996+
}
953997
}
954998

955999
%form-group-bundle-search--focus {
@@ -1323,11 +1367,14 @@
13231367
}
13241368

13251369
%form-group-input--hover {
1326-
cursor: pointer;
1327-
color: var-get($theme, 'filled-text-hover-color');
1370+
&:not([readonly]),
1371+
&[role="combobox"] {
1372+
cursor: pointer;
1373+
color: var-get($theme, 'filled-text-hover-color');
13281374

1329-
&::placeholder {
1330-
color: var-get($theme, 'hover-placeholder-color');
1375+
&::placeholder {
1376+
color: var-get($theme, 'hover-placeholder-color');
1377+
}
13311378
}
13321379
}
13331380

@@ -1490,29 +1537,34 @@
14901537
}
14911538

14921539
%form-group-border--error {
1493-
%form-group-bundle-start {
1494-
border-inline-start-color: var-get($theme, 'error-secondary-color');
1495-
border-block-start-color: var-get($theme, 'error-secondary-color');
1496-
border-block-end-color: var-get($theme, 'error-secondary-color');
1497-
}
1540+
&:has(input:not([readonly])),
1541+
&:has(textarea:not([readonly])),
1542+
&:has(input[readonly][role="combobox"]),
1543+
&:has(input[readonly][type="file"]) {
1544+
%form-group-bundle-start {
1545+
border-inline-start-color: var-get($theme, 'error-secondary-color');
1546+
border-block-start-color: var-get($theme, 'error-secondary-color');
1547+
border-block-end-color: var-get($theme, 'error-secondary-color');
1548+
}
14981549

1499-
%form-group-bundle-end {
1500-
border-inline-end-color: var-get($theme, 'error-secondary-color');
1501-
border-block-start-color: var-get($theme, 'error-secondary-color');
1502-
border-block-end-color: var-get($theme, 'error-secondary-color');
1503-
}
1550+
%form-group-bundle-end {
1551+
border-inline-end-color: var-get($theme, 'error-secondary-color');
1552+
border-block-start-color: var-get($theme, 'error-secondary-color');
1553+
border-block-end-color: var-get($theme, 'error-secondary-color');
1554+
}
15041555

1505-
%igx-input-group__notch,
1506-
%igx-input-group__filler {
1507-
border-block-color: var-get($theme, 'error-secondary-color');
1508-
}
1556+
%igx-input-group__notch,
1557+
%igx-input-group__filler {
1558+
border-block-color: var-get($theme, 'error-secondary-color');
1559+
}
15091560

1510-
%form-group-bundle--border:hover {
1511-
%form-group-bundle-start,
1512-
%form-group-bundle-end,
1513-
%igx-input-group__filler,
1514-
%igx-input-group__notch {
1515-
border-color: var-get($theme, 'error-secondary-color');
1561+
%form-group-bundle--border:hover {
1562+
%form-group-bundle-start,
1563+
%form-group-bundle-end,
1564+
%igx-input-group__filler,
1565+
%igx-input-group__notch {
1566+
border-color: var-get($theme, 'error-secondary-color');
1567+
}
15161568
}
15171569
}
15181570
}
@@ -1656,6 +1708,19 @@
16561708
&:focus {
16571709
background: var-get($theme, 'box-background-hover');
16581710
}
1711+
1712+
&:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
1713+
&:has(textarea:read-only:not(:disabled)) {
1714+
&:not(:focus-within) {
1715+
&::after {
1716+
border-block-end: rem(1px) solid var-get($theme, 'disabled-text-color');
1717+
}
1718+
1719+
&:hover {
1720+
background: unset;
1721+
}
1722+
}
1723+
}
16591724
}
16601725

16611726
%indigo-label--focused {
@@ -1807,11 +1872,26 @@
18071872
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
18081873
border-radius: inherit;
18091874
}
1875+
1876+
&:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
1877+
&:has(textarea:read-only:not(:disabled)) {
1878+
igx-prefix,
1879+
[igxPrefix],
1880+
igx-suffix,
1881+
[igxSuffix] {
1882+
background: transparent;
1883+
}
1884+
}
18101885
}
18111886

1812-
%form-group-bundle--fluent--hover {
1813-
&::before {
1814-
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
1887+
%form-group-bundle--fluent--hover:not(:focus-within) {
1888+
&:has(input:not([readonly])),
1889+
&:has(textarea:not([readonly])),
1890+
&:has(input[readonly][role="combobox"]),
1891+
&:has(input[readonly][type="file"]) {
1892+
&::before {
1893+
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
1894+
}
18151895
}
18161896
}
18171897

@@ -1832,8 +1912,14 @@
18321912
%form-group-bundle-error--fluent,
18331913
%form-group-bundle-error--fluent--hover,
18341914
%form-group-bundle-error--fluent--focus {
1835-
&::before {
1836-
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
1915+
// should be fixed
1916+
&:has(input:not([readonly])),
1917+
&:has(textarea:not([readonly])),
1918+
&:has(input[readonly][role="combobox"]),
1919+
&:has(input[readonly][type="file"]) {
1920+
&::before {
1921+
box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
1922+
}
18371923
}
18381924
}
18391925

@@ -2184,6 +2270,20 @@
21842270
transition: box-shadow .15s ease-out, border .15s ease-out;
21852271
}
21862272
}
2273+
2274+
&:has(input:read-only:not(:disabled, [role="combobox"], [type="file"])),
2275+
&:has(textarea:read-only:not(:disabled)) {
2276+
%bootstrap-input {
2277+
background: var-get($theme, 'border-disabled-background');
2278+
}
2279+
2280+
igx-prefix,
2281+
[igxPrefix],
2282+
igx-suffix,
2283+
[igxSuffix] {
2284+
background: var-get($theme, 'border-disabled-background');
2285+
}
2286+
}
21872287
}
21882288

21892289
%bootstrap-input,
@@ -2240,13 +2340,16 @@
22402340
}
22412341

22422342
%bootstrap-input--error {
2243-
border: rem(1px) solid var-get($theme, 'error-secondary-color');
2343+
&:not([readonly]),
2344+
&[role="combobox"] {
2345+
border: rem(1px) solid var-get($theme, 'error-secondary-color');
22442346

2245-
&:focus {
2246-
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2247-
2248-
+ %bootstrap-file-input {
2347+
&:focus {
22492348
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2349+
2350+
+ %bootstrap-file-input {
2351+
box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
2352+
}
22502353
}
22512354
}
22522355
}

0 commit comments

Comments
 (0)