Skip to content

Commit 3f0e325

Browse files
didimmovasimeonoffSisIvanova
authored
fix(textarea): update sass themes (#1935)
--------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
1 parent 004955e commit 3f0e325

24 files changed

+176
-229
lines changed

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

Lines changed: 11 additions & 7 deletions
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;
@@ -156,12 +155,6 @@ $theme: $bootstrap;
156155
}
157156
}
158157

159-
[part~='filled'] {
160-
[part~='input'] {
161-
color: var-get($theme, 'input-prefix-color--filled');
162-
}
163-
}
164-
165158
[part~='prefixed'] [part='prefix'],
166159
[part~='suffixed'] [part='suffix'] {
167160
::slotted(*) {
@@ -191,6 +184,17 @@ $theme: $bootstrap;
191184
}
192185
}
193186

187+
:host([type='search']) {
188+
[part^='container'] {
189+
background: var-get($theme, 'search-background');
190+
box-shadow: var-get($theme, 'search-resting-elevation');
191+
192+
&:focus-within {
193+
background: var-get($theme, 'search-background');
194+
}
195+
}
196+
}
197+
194198
:host(:disabled),
195199
:host([disabled]) {
196200
[part='prefix'],

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

Lines changed: 35 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,7 +51,27 @@ $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) {
71+
[part^='container'] {
72+
caret-color: var-get($theme, 'focused-text-color');
73+
}
74+
4775
[part='prefix'] {
4876
color: var-get($theme, 'input-prefix-color--focused');
4977
background: var-get($theme, 'input-prefix-background--focused');
@@ -81,7 +109,12 @@ $theme: $base;
81109
:host(:disabled),
82110
:host([disabled]) {
83111
[part~='input']::placeholder {
84-
color: var-get($theme, 'disabled-text-color');
112+
color: var-get($theme, 'disabled-placeholder-color');
113+
}
114+
115+
[part='prefix'],
116+
[part='suffix'] {
117+
background: inherit;
85118
}
86119
}
87120

@@ -98,4 +131,4 @@ $theme: $base;
98131
::slotted([slot='prefix']) {
99132
padding-inline: var(--affix-padding);
100133
}
101-
}
134+
}

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,19 @@ $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'] {
83-
color: var-get($theme, 'idle-text-color');
8493
background: initial;
8594
font-size: rem(14px);
8695
padding-inline: pad-inline(rem(8px));

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

Lines changed: 32 additions & 25 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,26 +114,22 @@ $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');
135122
}
136123
}
137124

125+
:host(:not([disabled],[readonly]):focus-within),
126+
:host(:not([disabled])[readonly][role='combobox']:focus-within) {
127+
[part^='container'] {
128+
background: var-get($theme, 'box-background-focus');
129+
caret-color: var-get($theme, 'focused-bottom-line-color');
130+
}
131+
}
132+
138133
:host(:focus-within) {
139134
[part='prefix'],
140135
[part='suffix'] {
@@ -144,9 +139,6 @@ $transition-duration: .25s;
144139
}
145140

146141
[part^='container'] {
147-
background: var-get($theme, 'box-background-focus');
148-
caret-color: var-get($theme, 'focused-bottom-line-color');
149-
150142
&::after {
151143
transform: scaleY(1);
152144
}
@@ -155,12 +147,6 @@ $transition-duration: .25s;
155147
[part='label'] {
156148
color: var-get($theme, 'focused-secondary-color');
157149
}
158-
159-
[part~='filled'] {
160-
[part~='input'] {
161-
color: var-get($theme, 'focused-text-color');
162-
}
163-
}
164150
}
165151

166152
:host(:not([aria-haspopup='dialog'],[role='combobox'],[disabled])[readonly]) {
@@ -186,7 +172,28 @@ $transition-duration: .25s;
186172
}
187173
}
188174

189-
:host([type='search']) {
175+
:host([type='search']:not([disabled])) {
176+
[part^='container'] {
177+
background: var-get($theme, 'search-background');
178+
box-shadow: var-get($theme, 'search-resting-elevation');
179+
180+
&:hover {
181+
background: var-get($theme, 'box-background-hover');
182+
}
183+
184+
&:focus-within,
185+
&:focus-within:hover {
186+
background: var-get($theme, 'box-background-focus');
187+
}
188+
}
189+
190+
&:focus-within,
191+
&:focus-within:hover {
192+
[part^='container'] {
193+
background: var-get($theme, 'box-background-focus');
194+
}
195+
}
196+
190197
%suffix-preffix {
191198
padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
192199
}

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

Lines changed: 12 additions & 3 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

@@ -281,7 +281,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
281281
:host(:not([outlined]):disabled) {
282282
[part~='container'] {
283283
background: var-get($theme, 'box-disabled-background');
284-
border-color: var-get($theme, 'disabled-border-color');
284+
border-block-end-color: var-get($theme, 'disabled-bottom-line-color');
285285
border-bottom-style: dashed;
286286
}
287287
}
@@ -302,6 +302,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
302302
}
303303
}
304304
}
305+
306+
[part='prefix'],
307+
[part='suffix'] {
308+
max-height: 100%;
309+
}
305310
}
306311

307312
:host(:not([readonly])[type='search']:hover),
@@ -624,6 +629,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
624629
border-color: var-get($theme, 'disabled-border-color');
625630
}
626631

632+
[part~='container'] {
633+
background: var-get($theme, 'border-disabled-background');
634+
}
635+
627636
input:placeholder-shown + [part='notch'],
628637
[part~='filled'] + [part='notch'] {
629638
@extend %floated-styles;

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ $theme: $bootstrap;
3838
[part~='prefixed'] {
3939
[part~='prefix'] {
4040
border-block-width: rem(1px);
41+
border-inline-width: 0;
4142
border-style: solid;
4243
border-color: var-get($theme, 'border-color');
4344
overflow: hidden;
44-
border-inline-width: 0;
4545
border: {
4646
start: {
4747
start-radius: var-get($theme, 'border-border-radius');
@@ -67,10 +67,10 @@ $theme: $bootstrap;
6767
[part~='suffixed'] {
6868
[part~='suffix'] {
6969
border-block-width: rem(1px);
70+
border-inline-width: 0;
7071
border-style: solid;
7172
border-color: var-get($theme, 'border-color');
7273
overflow: hidden;
73-
border-inline-width: 0;
7474
border: {
7575
start: {
7676
end-radius: var-get($theme, 'border-border-radius');
@@ -164,22 +164,22 @@ textarea {
164164
box-shadow: none;
165165
}
166166

167-
::slotted([slot='suffix']) {
168-
border-inline-end: rem(1px) solid var(--disabled-border-color);
169-
}
170-
171167
::slotted([slot='prefix']) {
172168
border-inline-start: rem(1px) solid var(--disabled-border-color);
173169
}
170+
171+
::slotted([slot='suffix']) {
172+
border-inline-end: rem(1px) solid var(--disabled-border-color);
173+
}
174174
}
175175

176176
:host(:not([disabled])),
177177
:host(:not(:disabled)) {
178-
::slotted([slot='suffix']) {
179-
border-inline-end: rem(1px) solid var(--border-color);
178+
::slotted([slot='prefix']) {
179+
border-inline-start: rem(1px) solid var(--border-color);
180180
}
181181

182-
::slotted([slot='prefix']) {
183-
border-inline-start: rem(1px) solid var(--border-color);
182+
::slotted([slot='suffix']) {
183+
border-inline-end: rem(1px) solid var(--border-color);
184184
}
185185
}

0 commit comments

Comments
 (0)