Newer
Older
.form_field {
margin: 0.5rem 0;
border-radius: 0.25rem;
background: rgba($faint,0.25);
font-weight: 600;
color: $black;
opacity: 0.75;
padding: 0.5rem 0.5rem 0;
}
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], textarea {
border: 0;
background: transparent;
font-size: ms(0);
font-weight: 400;
font-family: $sans;
line-height: ms(0) * 1.3;
width: 100%;
opacity: 0.75;
padding: 0.5rem;
margin-top: -0.25rem;
&:focus {
opacity: 1;
}
}
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
textarea {
resize: none;
font-family: $mono;
font-size: ms(-1);
&.-sm {
height: 3.5rem;
}
&.-md {
height: 4.75rem;
}
&.-lg {
height: 8rem;
}
}
}
input.form_field_amount[type='number'] {
font-size: ms(8);
line-height: ms(8) * 1.1;
font-weight: 200;
text-align: center;
-webkit-appearance: none;
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
opacity: 1;
-webkit-appearance: none;
}
}
span.form_field_symbol {
position: absolute;
top: 0;
right: 0;
display: block;
color: $grey;
padding: 0.5rem;
text-align: right;
font-family: $mono;
font-size: ms(-1);
text-transform: uppercase;