Skip to content

Commit 3041f99

Browse files
didimmovadidimmova
committed
fix(input): add updates for input theme
1 parent f14a984 commit 3041f99

File tree

7 files changed

+62
-40
lines changed

7 files changed

+62
-40
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ $theme: $bootstrap;
4343
border-radius: var-get($theme, 'border-border-radius');
4444
padding-inline: pad-inline(8px, 10px, 14px);
4545
padding-block: pad-block(4px, 6px, 8px);
46-
color: var-get($theme, 'idle-text-color');
4746
background: transparent;
4847
box-shadow: none;
4948
z-index: 1;

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
$theme: $base;
55

6+
[part~='input'] {
7+
color: var-get($theme, 'idle-text-color');
8+
}
9+
610
[part='prefix'] {
711
color: var-get($theme, 'input-prefix-color');
812
background: var-get($theme, 'input-prefix-background');
@@ -14,6 +18,10 @@ $theme: $base;
1418
}
1519

1620
[part~='filled'] {
21+
[part~='input'] {
22+
color: var-get($theme, 'filled-text-color');
23+
}
24+
1725
[part='prefix'] {
1826
color: var-get($theme, 'input-prefix-color--filled');
1927
background: var-get($theme, 'input-prefix-background--filled');
@@ -43,6 +51,22 @@ $theme: $base;
4351
}
4452
}
4553

54+
:host(:not([readonly],[disabled]):hover) {
55+
[part~='filled'] {
56+
[part~='input'] {
57+
color: var-get($theme, 'filled-text-hover-color');
58+
}
59+
}
60+
}
61+
62+
:host(:not([readonly],[disabled]):focus-within) {
63+
[part~='filled'] {
64+
[part~='input'] {
65+
color: var-get($theme, 'focused-text-color');
66+
}
67+
}
68+
}
69+
4670
:host(:focus-within) {
4771
[part='prefix'] {
4872
color: var-get($theme, 'input-prefix-color--focused');
@@ -81,7 +105,12 @@ $theme: $base;
81105
:host(:disabled),
82106
:host([disabled]) {
83107
[part~='input']::placeholder {
84-
color: var-get($theme, 'disabled-text-color');
108+
color: var-get($theme, 'disabled-placeholder-color');
109+
}
110+
111+
[part='prefix'],
112+
[part='suffix'] {
113+
background: inherit;
85114
}
86115
}
87116

@@ -98,4 +127,4 @@ $theme: $base;
98127
::slotted([slot='prefix']) {
99128
padding-inline: var(--affix-padding);
100129
}
101-
}
130+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,16 @@ $theme: $fluent;
7777
pointer-events: none;
7878
z-index: 1;
7979
}
80+
81+
[part='prefix']:first-child {
82+
border-start-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
83+
border-end-start-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
84+
}
85+
86+
[part='suffix']:last-child {
87+
border-start-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
88+
border-end-end-radius: calc(var-get($theme, 'border-border-radius') - rem(1px));
89+
}
8090
}
8191

8292
[part~='input'] {

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $transition-duration: .25s;
4040
}
4141

4242
[part='prefix'] {
43-
border-start-start-radius: var-get($theme, 'border-border-radius');
43+
border-start-start-radius: var-get($theme, 'box-border-radius');
4444
grid-area: 1 / 1;
4545

4646
::slotted(*) {
@@ -49,7 +49,7 @@ $transition-duration: .25s;
4949
}
5050

5151
[part='suffix'] {
52-
border-start-end-radius: var-get($theme, 'border-border-radius');
52+
border-start-end-radius: var-get($theme, 'box-border-radius');
5353
grid-area: 1 / 3;
5454

5555
::slotted(*) {
@@ -91,7 +91,6 @@ $transition-duration: .25s;
9191
[part~='input'] {
9292
@include type-style('body-2');
9393

94-
color: var-get($theme, 'idle-text-color');
9594
font-size: rem(12px);
9695
line-height: rem(16px);
9796
background: initial;
@@ -115,20 +114,8 @@ $transition-duration: .25s;
115114
}
116115
}
117116

118-
[part~='filled'] {
119-
[part~='input'] {
120-
color: var-get($theme, 'filled-text-color');
121-
}
122-
}
123-
124117
:host(:not([disabled],[readonly]):hover),
125118
:host(:not([disabled])[readonly][role='combobox']:hover) {
126-
[part~='filled'] {
127-
[part~='input'] {
128-
color: var-get($theme, 'filled-text-hover-color');
129-
}
130-
}
131-
132119
[part^='container'] {
133120
background: var-get($theme, 'box-background-hover');
134121
border-color: var-get($theme, 'hover-bottom-line-color');
@@ -155,12 +142,6 @@ $transition-duration: .25s;
155142
[part='label'] {
156143
color: var-get($theme, 'focused-secondary-color');
157144
}
158-
159-
[part~='filled'] {
160-
[part~='input'] {
161-
color: var-get($theme, 'focused-text-color');
162-
}
163-
}
164145
}
165146

166147
:host(:not([aria-haspopup='dialog'],[role='combobox'],[disabled])[readonly]) {

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
8282
}
8383

8484
[part='start'] {
85-
border-start-start-radius: var-get($theme, 'border-border-radius');
85+
border-start-start-radius: var-get($theme, 'box-border-radius');
8686
justify-content: flex-start;
8787
grid-area: 1 / 1;
8888

@@ -113,7 +113,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
113113
}
114114

115115
[part='end'] {
116-
border-start-end-radius: var-get($theme, 'border-border-radius');
116+
border-start-end-radius: var-get($theme, 'box-border-radius');
117117
justify-content: flex-end;
118118
grid-area: 1 / 4;
119119

@@ -282,6 +282,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
282282
[part~='container'] {
283283
background: var-get($theme, 'box-disabled-background');
284284
border-color: var-get($theme, 'disabled-border-color');
285+
border-block-end-color: var-get( $theme, 'disabled-bottom-line-color');
285286
border-bottom-style: dashed;
286287
}
287288
}
@@ -610,6 +611,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
610611
border-color: var-get($theme, 'disabled-border-color');
611612
}
612613

614+
[part~='container'] {
615+
background: var-get($theme, 'border-disabled-background');
616+
}
617+
613618
input:placeholder-shown + [part='notch'],
614619
[part~='filled'] + [part='notch'] {
615620
@extend %floated-styles;

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ $theme: $bootstrap;
3838
[part~='prefixed'] {
3939
[part~='prefix'] {
4040
border-block-width: rem(1px);
41-
border-inline-start-width: rem(1px);
42-
border-inline-end-width: 0;
41+
border-inline-width: 0;
4342
border-style: solid;
4443
border-color: var-get($theme, 'border-color');
4544
overflow: hidden;
@@ -68,8 +67,7 @@ $theme: $bootstrap;
6867
[part~='suffixed'] {
6968
[part~='suffix'] {
7069
border-block-width: rem(1px);
71-
border-inline-start-width: 0;
72-
border-inline-end-width: rem(1px);
70+
border-inline-width: 0;
7371
border-style: solid;
7472
border-color: var-get($theme, 'border-color');
7573
overflow: hidden;
@@ -166,22 +164,22 @@ textarea {
166164
box-shadow: none;
167165
}
168166

169-
::slotted([slot='suffix']):not(:last-child) {
170-
border-inline-end: rem(1px) solid var(--disabled-border-color);
167+
::slotted([slot='prefix']) {
168+
border-inline-start: rem(1px) solid var(--disabled-border-color);
171169
}
172170

173-
::slotted([slot='prefix']):not(:first-child) {
174-
border-inline-start: rem(1px) solid var(--disabled-border-color);
171+
::slotted([slot='suffix']) {
172+
border-inline-end: rem(1px) solid var(--disabled-border-color);
175173
}
176174
}
177175

178176
:host(:not([disabled])),
179177
:host(:not(:disabled)) {
180-
::slotted([slot='suffix']):not(:last-child) {
181-
border-inline-end: rem(1px) solid var(--border-color);
178+
::slotted([slot='prefix']) {
179+
border-inline-start: rem(1px) solid var(--border-color);
182180
}
183181

184-
::slotted([slot='prefix']):not(:first-child) {
185-
border-inline-start: rem(1px) solid var(--border-color);
182+
::slotted([slot='suffix']) {
183+
border-inline-end: rem(1px) solid var(--border-color);
186184
}
187185
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,13 @@ textarea {
9999

100100
[part~='prefixed'] {
101101
[part~='prefix'] {
102-
border-start-start-radius: var-get($theme, 'border-border-radius');
102+
border-start-start-radius: var-get($theme, 'box-border-radius');
103103
}
104104
}
105105

106106
[part~='suffixed'] {
107107
[part~='suffix'] {
108-
border-start-end-radius: var-get($theme, 'border-border-radius');
108+
border-start-end-radius: var-get($theme, 'box-border-radius');
109109
}
110110
}
111111

0 commit comments

Comments
 (0)