Skip to content

Commit 5ee3046

Browse files
SisIvanovaSisIvanova
committed
refactor(date-picker): readonly styles
1 parent 12bcc4a commit 5ee3046

File tree

9 files changed

+110
-76
lines changed

9 files changed

+110
-76
lines changed

‎src/components/date-picker/themes/dark/_themes.scss‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,9 @@
11
@use 'sass:map';
22
@use 'styles/utilities' as *;
33
@use 'igniteui-theming/sass/themes/schemas/components/dark/calendar' as *;
4-
@use 'components/input/themes/dark/themes' as input-theme;
4+
@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
55

6-
$material: map.merge(digest-schema($dark-material-calendar), (
7-
idle-secondary-color: map.get(input-theme.$material, 'idle-secondary-color'),
8-
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
9-
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
10-
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
11-
));
12-
$bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), (
13-
idle-secondary-color: map.get(input-theme.$bootstrap, 'idle-secondary-color'),
14-
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
15-
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
16-
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
17-
));
18-
$fluent: map.merge(digest-schema($dark-fluent-calendar), (
19-
idle-secondary-color: map.get(input-theme.$fluent, 'idle-secondary-color'),
20-
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
21-
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
22-
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
23-
));
24-
$indigo: map.merge(digest-schema($dark-indigo-calendar), (
25-
idle-secondary-color: map.get(input-theme.$indigo, 'idle-secondary-color'),
26-
focused-secondary-color: map.get(input-theme.$indigo, 'focused-secondary-color'),
27-
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
28-
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
29-
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
30-
));
6+
$material: map.merge(digest-schema($dark-material-calendar), digest-schema(input-theme.$dark-material-input-group));
7+
$bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), digest-schema(input-theme.$dark-bootstrap-input-group));
8+
$fluent: map.merge(digest-schema($dark-fluent-calendar), digest-schema(input-theme.$dark-fluent-input-group));
9+
$indigo: map.merge(digest-schema($dark-indigo-calendar), digest-schema(input-theme.$dark-indigo-input-group));

‎src/components/date-picker/themes/light/_themes.scss‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,10 @@
11
@use 'sass:map';
22
@use 'styles/utilities' as *;
33
@use 'igniteui-theming/sass/themes/schemas/components/light/calendar' as *;
4-
@use 'components/input/themes/light/themes' as input-theme;
4+
@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
55

66
$base: digest-schema($light-calendar);
7-
$material: map.merge(digest-schema($material-calendar), (
8-
idle-secondary-color: map.get(input-theme.$material, 'idle-secondary-color'),
9-
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
10-
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
11-
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
12-
));
13-
$bootstrap: map.merge(digest-schema($bootstrap-calendar), (
14-
idle-secondary-color: map.get(input-theme.$bootstrap, 'idle-secondary-color'),
15-
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
16-
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
17-
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
18-
));
19-
$fluent: map.merge(digest-schema($fluent-calendar), (
20-
idle-secondary-color: map.get(input-theme.$fluent, 'idle-secondary-color'),
21-
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
22-
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
23-
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
24-
));
25-
$indigo: map.merge(digest-schema($indigo-calendar), (
26-
idle-secondary-color: map.get(input-theme.$indigo, 'idle-secondary-color'),
27-
focused-secondary-color: map.get(input-theme.$indigo, 'focused-secondary-color'),
28-
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
29-
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
30-
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
31-
));
7+
$material: map.merge(digest-schema($material-calendar), digest-schema(input-theme.$material-input-group));
8+
$bootstrap: map.merge(digest-schema($bootstrap-calendar), digest-schema(input-theme.$bootstrap-input-group));
9+
$fluent: map.merge(digest-schema($fluent-calendar), digest-schema(input-theme.$fluent-input-group));
10+
$indigo: map.merge(digest-schema($indigo-calendar), digest-schema(input-theme.$indigo-input-group));

‎src/components/date-picker/themes/shared/date-picker.bootstrap.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@ $theme: $bootstrap;
3838
}
3939
}
4040

41+
:host([readonly]) {
42+
igc-date-time-input::part(container),
43+
igc-date-time-input::part(prefix),
44+
igc-date-time-input::part(suffix) {
45+
background: var-get($theme, 'border-disabled-background');
46+
}
47+
}
48+
4149
[part='actions'] {
4250
min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
4351
}

‎src/components/date-picker/themes/shared/date-picker.common.scss‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,35 @@ $input-theme: input-theme.$material;
6363
}
6464
}
6565

66-
[part='actions'] {
67-
min-height: #{sizable(rem(40px), rem(46px), rem(52px))};
68-
border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
69-
}
66+
:host(:not([readonly])) {
67+
--affix-color: #{var-get($theme, 'input-prefix-color')};
7068

71-
igc-icon,
72-
::slotted(igc-icon) {
73-
--component-size: var(--input-size);
69+
igc-date-time-input[readonly] {
70+
--affix-color: #{var-get($theme, 'input-prefix-color')};
71+
72+
&::part(prefix),
73+
&::part(suffix) {
74+
color: var(--affix-color);
75+
}
76+
}
77+
78+
[part='calendar-icon'],
79+
[part='calendar-icon-open'],
80+
[part='clear-icon'] {
81+
color: var(--affix-color);
82+
}
83+
84+
igc-input:focus-within {
85+
--affix-color: #{var-get($theme, 'input-prefix-color--focused')};
86+
87+
&::part(filled) {
88+
--affix-color: #{var-get($theme, 'input-prefix-color--focused')};
89+
}
90+
}
91+
92+
::part(filled) {
93+
--affix-color: #{var-get($theme, 'input-prefix-color--filled')};
94+
}
7495
}
7596

7697
:host(:not([disabled])[invalid]),
@@ -91,3 +112,13 @@ igc-icon,
91112
color: var-get($input-theme, 'disabled-text-color');
92113
}
93114
}
115+
116+
[part='actions'] {
117+
min-height: #{sizable(rem(40px), rem(46px), rem(52px))};
118+
border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
119+
}
120+
121+
igc-icon,
122+
::slotted(igc-icon) {
123+
--component-size: var(--input-size);
124+
}

‎src/components/date-picker/themes/shared/date-picker.fluent.scss‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,38 @@ $theme: $fluent;
2222
}
2323
}
2424

25-
[part='actions'] {
26-
min-height: #{sizable(rem(40px), rem(48px), rem(54px))};
27-
}
28-
2925
:host([required]) {
3026
[part='label']::after {
3127
color: var-get($theme, 'error-secondary-color');
3228
}
3329
}
3430

31+
:host(:not([disabled])[readonly]) {
32+
igc-date-time-input::part(prefix),
33+
igc-date-time-input::part(suffix) {
34+
background: transparent;
35+
}
36+
}
37+
38+
:host(:not([invalid])[readonly]:hover) {
39+
igc-date-time-input::part(container) {
40+
border-color: var-get($theme, 'border-color');
41+
}
42+
}
43+
44+
:host(:not([invalid])[readonly]:focus-within) {
45+
igc-date-time-input::part(container) {
46+
border-color: var-get($theme, 'focused-border-color');
47+
}
48+
}
49+
3550
:host(:disabled),
3651
:host([disabled]) {
3752
[part='label']::after {
3853
color: var-get($theme, 'disabled-text-color');
3954
}
4055
}
56+
57+
[part='actions'] {
58+
min-height: #{sizable(rem(40px), rem(48px), rem(54px))};
59+
}

‎src/components/date-picker/themes/shared/date-picker.indigo.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,26 @@ $input-theme: input-theme.$indigo;
3030
}
3131
}
3232

33-
[part='actions'] {
34-
min-height: #{sizable(rem(40px), rem(44px), rem(48px))};
35-
padding: rem(8px) rem(16px);
36-
}
37-
3833
:host(:focus-within) {
3934
[part='label'] {
4035
color: var-get($input-theme, 'focused-secondary-color');
4136
}
4237
}
4338

39+
:host(:not([invalid])[readonly]) {
40+
igc-date-time-input::part(container) {
41+
border-color: var-get($theme, 'disabled-text-color');
42+
}
43+
}
44+
4445
:host(:not([disabled])[invalid]),
4546
:host(:not(:disabled)[invalid]) {
4647
::part(helper-text) {
4748
color: var-get($input-theme, 'helper-text-color');
4849
}
4950
}
51+
52+
[part='actions'] {
53+
min-height: #{sizable(rem(40px), rem(44px), rem(48px))};
54+
padding: rem(8px) rem(16px);
55+
}

‎src/components/input/themes/shared/input.bootstrap.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ $theme: $bootstrap;
162162
}
163163
}
164164

165-
:host(:not([aria-haspopup='dialog'])[readonly]) {
165+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]) {
166166
[part='prefix'],
167167
[part='suffix'],
168168
[part~='container'] {

‎src/components/input/themes/shared/input.fluent.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,20 +76,20 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
7676
}
7777
}
7878

79-
:host(:not([aria-haspopup='dialog'])[readonly]) {
79+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]) {
8080
[part='prefix'],
8181
[part='suffix'] {
8282
background: transparent;
8383
}
8484
}
8585

86-
:host(:not([aria-haspopup='dialog'])[readonly]:hover) {
86+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]:hover) {
8787
[part^='container'] {
8888
border-color: var-get($theme, 'border-color');
8989
}
9090
}
9191

92-
:host(:not([aria-haspopup='dialog'])[readonly]:focus-within) {
92+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
9393
[part^='container'] {
9494
border-color: var-get($theme, 'focused-border-color');
9595
}
@@ -147,13 +147,22 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
147147
}
148148
}
149149

150+
:host([readonly][type='search']:focus-within) {
151+
[part='suffix'] {
152+
color: var-get($theme, 'disabled-text-color');
153+
}
154+
}
155+
150156
:host([required]) {
151157
[part='label']::after {
152158
color: var-get($theme, 'error-secondary-color');
153159
}
154160
}
155161

156-
:host([invalid]) {
162+
:host([invalid]),
163+
:host([invalid]:hover),
164+
:host([readonly][invalid]:hover),
165+
:host([readonly][invalid]:focus-within) {
157166
[part^='container'] {
158167
border-color: var-get($theme, 'error-secondary-color');
159168
}

‎src/components/input/themes/shared/input.indigo.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ $transition-duration: .25s;
125125
}
126126
}
127127

128-
:host(:not([readonly]):hover) {
128+
:host(:not([readonly]):hover),
129+
:host([readonly][role='combobox']:hover) {
129130
[part~='filled'] {
130131
[part~='input'] {
131132
color: var-get($theme, 'filled-text-hover-color');
@@ -166,13 +167,15 @@ $transition-duration: .25s;
166167
}
167168
}
168169

169-
:host(:not([aria-haspopup='dialog'])[readonly]) {
170+
:host(:not([aria-haspopup='dialog'],[role='combobox'])[readonly]) {
170171
[part^='container'] {
171172
border-color: var-get($theme, 'disabled-text-color');
172173
}
173174
}
174175

175-
:host([invalid]) {
176+
:host([invalid]),
177+
:host([invalid]:hover),
178+
:host([invalid][readonly]) {
176179
[part^='container'] {
177180
caret-color: initial;
178181
border-color: var-get($theme, 'error-secondary-color');

0 commit comments

Comments
 (0)