Skip to content

Commit afa5452

Browse files
wuda-iowuda-io
committed
fix(text-inputs): color tokens
1 parent 8186323 commit afa5452

File tree

2 files changed

+44
-32
lines changed

2 files changed

+44
-32
lines changed

‎components/text-fields/formfields.css‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@ new approach for floating labels aka "form-fields" (css only)
2525
*/
2626

2727
:root {
28-
--font-size: 16px;
28+
--mw-font-size: 16px;
2929
--mw-border-radius: 8px;
3030
--mw-input-height: 56px;
31-
--mw-idle-color: #888;
31+
--mw-idle-color: var(--md-sys-color-outline);
3232
--mw-border-width: 1px;
33-
--mw-hover-color: darkgoldenrod;
34-
--mw-hover-border-width: 2px;
33+
--mw-hover-color: var(--md-sys-color-on-primary-container);
34+
--mw-hover-border-width: 1px;
3535
--mw-focus-color: var(--md-sys-color-primary);
3636
--mw-focus-border-width: 2px;
3737
--mw-disabled-color: #8886;
3838
--mw-padding-left: 16px;
39-
--input-padding-x: var(--mw-padding-left);
40-
--input-padding-r: 12px;
41-
--label-padding: 4px;
42-
--animation-duration: 0.9s;
43-
/* calc */
39+
--mw-input-padding-x: var(--mw-padding-left);
40+
--mw-input-padding-r: 12px;
41+
--mw-label-padding: 4px;
42+
--mw-inputlabel-duration: 0.9s;
4443
--mw-inset: 5px;
45-
--label-size: calc(var(--font-size) * 0.75);
46-
--label-margin-left: calc(var(--mw-padding-left) - var(--label-padding));
44+
/* calclated properties */
45+
--label-size: calc(var(--mw-font-size) * 0.75);
46+
--label-margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
4747
--half-inp: calc((-0.5 * var(--mw-input-height)));
4848
--half-lbl: calc((0.5 * var(--label-size)));
4949
--distY: calc(var(--half-inp) + var(--half-lbl));
@@ -64,15 +64,15 @@ fieldset.form-field {
6464
display: grid;
6565
grid-auto-flow: column;
6666
align-items: baseline;
67-
font-size: var(--font-size);
67+
font-size: var(--mw-font-size);
6868
padding: 0 calc(var(--mw-inset) - var(--mw-border-width));
6969
}
7070
fieldset.form-field legend {
7171
color: var(--mw-idle-color);
7272
font-size: var(--label-size);
73-
padding: 0 var(--label-padding);
73+
padding: 0 var(--mw-label-padding);
7474
margin: 0;
75-
margin-left: calc(var(--mw-padding-left) - var(--label-padding) - var(--mw-border-width));
75+
margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
7676
cursor: text;
7777
/* color: transparent; */
7878
user-select: none;
@@ -83,7 +83,7 @@ fieldset.form-field select {
8383
var(--mw-input-height) - var(--label-size) + 2 * var(--mw-border-width)
8484
);
8585
box-sizing: border-box;
86-
font-size: var(--font-size);
86+
font-size: var(--mw-font-size);
8787
padding: 0;
8888
margin: 0;
8989
width: 100%;
@@ -100,7 +100,7 @@ fieldset.form-field select {
100100
fieldset.form-field select {
101101
padding: 0;
102102
/* margin: 0; */
103-
padding-left: calc(var(--mw-padding-left) - var(--label-padding));
103+
padding-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
104104
/* background-color: #f005 !important; */
105105
z-index: 2;
106106
}
@@ -110,20 +110,26 @@ fieldset.form-field select option {
110110
}
111111
fieldset.form-field input::placeholder {
112112
color: var(--mw-idle-color);
113-
font-size: var(--font-size);
113+
font-size: var(--mw-font-size);
114114
}
115115
fieldset.form-field label {
116116
position: absolute;
117-
top: calc(var(--mw-input-height) / 2 - var(--label-size) - var(--font-size) / 2);
117+
top: calc(var(--mw-input-height) / 2 - var(--label-size) - var(--mw-font-size) / 2);
118118
margin-left: calc(var(--mw-inset) - var(--mw-border-width));
119-
font-size: var(--font-size);
119+
font-size: var(--mw-font-size);
120120
cursor: text;
121121
user-select: none;
122122
color: transparent;
123123
/* color: green; */
124124
z-index: 1; /* for not blocking klicks */
125125
pointer-events: none;
126126
}
127+
128+
/* fixes from other inputs */
129+
fieldset.form-field .select-wrapper {
130+
outline: none !important;
131+
}
132+
127133
/*--- idle animated */
128134
fieldset.form-field.animated legend::before {
129135
content: '';
@@ -134,23 +140,23 @@ fieldset.form-field.animated legend::before {
134140
height: 0;
135141
border-top: var(--mw-border-width) solid var(--mw-idle-color);
136142
align-self: center;
137-
transition: width calc(var(--animation-duration) * 0.8);
143+
transition: width calc(var(--mw-inputlabel-duration) * 0.8);
138144
}
139145
fieldset.form-field.animated legend {
140146
color: transparent;
141147
}
142148
fieldset.form-field.animated input::placeholder {
143149
opacity: 1;
144-
transition: opacity var(--animation-duration) step-end;
150+
transition: opacity var(--mw-inputlabel-duration) step-end;
145151
}
146152
fieldset.form-field.animated label {
147153
position: absolute;
148-
left: calc(var(--input-padding-x) - var(--mw-border-width));
149-
font-size: var(--font-size);
154+
left: calc(var(--mw-input-padding-x) - var(--mw-border-width));
155+
font-size: var(--mw-font-size);
150156
transition:
151-
font-size var(--animation-duration),
152-
transform var(--animation-duration),
153-
opacity var(--animation-duration) step-end;
157+
font-size var(--mw-inputlabel-duration),
158+
transform var(--mw-inputlabel-duration),
159+
opacity var(--mw-inputlabel-duration) step-end;
154160
}
155161
/*--- idle animated populated */
156162
fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
@@ -189,9 +195,9 @@ fieldset.form-field.animated:has(input:not(:placeholder-shown)):hover legend {
189195
fieldset.form-field.animated:hover label {
190196
/* color: transparent; */
191197
color: var(--mw-hover-color);
192-
left: calc(var(--input-padding-x) - var(--mw-hover-border-width));
198+
left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
193199
top: calc(
194-
0.5 * var(--mw-input-height) - var(--label-size) * 0.5 - var(--font-size) +
200+
0.5 * var(--mw-input-height) - var(--label-size) * 0.5 - var(--mw-font-size) +
195201
var(--mw-hover-border-width)
196202
);
197203
}
@@ -227,7 +233,7 @@ fieldset.form-field.animated:focus-within input::placeholder {
227233
}
228234
fieldset.form-field.animated:focus-within label {
229235
color: transparent;
230-
left: calc(var(--input-padding-x) - var(--mw-hover-border-width));
236+
left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
231237
}
232238

233239
/*
@@ -243,8 +249,8 @@ fieldset.form-field.animated label {
243249
opacity: 1;
244250
color: var(--mw-focus-color);
245251
font-size: var(--label-size);
246-
transform: translateY(var(--distY)) translateX(var(--input-padding-x));
247-
transition: font-size var(--animation-duration), transform var(--animation-duration), opacity 0s;
252+
transform: translateY(var(--distY)) translateX(var(--mw-input-padding-x));
253+
transition: font-size var(--mw-inputlabel-duration), transform var(--mw-inputlabel-duration), opacity 0s;
248254
}
249255
fieldset.form-field.animated:focus-within legend::before,
250256
fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
@@ -286,7 +292,7 @@ fieldset.form-field[disabled]:hover select {
286292
padding-left: calc(var(--mw-padding-left) - var(--mw-border-width));
287293
}
288294
fieldset.form-field[disabled]:hover legend {
289-
margin-left: calc(var(--mw-padding-left) - var(--label-padding) - var(--mw-border-width));
295+
margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
290296
border-color: transparent;
291297
border-color: var(--mw-disabled-color);
292298
color: var(--mw-disabled-color);

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ <h6>Textfields</h6>
3333
<input type="text" id="my-input-1" placeholder="Given Name" />
3434
<label for="my-input-1">Given Name</label>
3535
</fieldset>
36+
<!-- Preset -->
37+
<fieldset class="form-field animated s12 m4">
38+
<legend>Middle Name</legend>
39+
<input type="text" id="in-middlename" placeholder="Middle Name" value="John" />
40+
<label for="in-middlename">Middle Name</label>
41+
</fieldset>
3642
<!-- Disabled-->
3743
<fieldset class="form-field s12 m4" disabled>
3844
<legend>Family Name</legend>

0 commit comments

Comments
 (0)