-
Notifications
You must be signed in to change notification settings - Fork 4
/
form.css
111 lines (96 loc) · 2.17 KB
/
form.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
main .form {
background-color: white;
padding: var(--spacing-m);
box-shadow: 0 1px 6px rgb(34 34 34 / 10%);
}
main .form h2 {
padding: var(--spacing-m) 0;
font-size: var(--type-heading-l-lh);
font-weight: normal;
}
main .form h3 {
padding-top: var(--spacing-m);
font-size: var(--type-heading-m-size);
font-weight: bold;
text-transform: uppercase;
}
main .form input,
main .form textarea,
main .form select {
border: 1px solid rgb(193 193 195);
padding: 11px;
border-radius: 0;
width: 100%;
max-width: 50rem;
box-sizing: border-box;
margin-top: 4px;
}
main .form textarea {
min-height: 100px;
}
main .form input:hover,
main .form select:hover {
border-color: rgb(90 92 96);
}
main .form label {
width: 100%;
display: block;
font-size: var(--type-body-s-size);
line-height: var(--type-body-s-lh);
padding-bottom: var(--spacing-xs);
text-transform: uppercase;
box-sizing: border-box;
font-weight: 800;
}
main .form label.required::after {
content: "*";
color: red;
padding-left: 5px;
}
main .form .field-wrapper {
margin-bottom: 20px;
}
main .form .form-checkbox-wrapper {
display: flex;
margin: var(--spacing-s) 0;
}
main .form .form-checkbox-wrapper input[type='checkbox'] {
display: none;
}
main .form .form-checkbox-wrapper input[type='checkbox'] + label::before {
float: left;
margin-top: 2px;
margin-right: 5px;
height: 30px;
width: 30px;
content: ' ';
background: url('./checkbox.svg');
background-size: contain;
}
main .form .form-checkbox-wrapper input[type='checkbox']:checked +label::before {
background: url('./checkbox-checked.svg');
background-size: contain;
content: ' ';
}
main .form .form-checkbox-wrapper label {
font-size: var(--type-body-m-size);
line-height: var(--type-body-m-lh);
font-weight: normal;
text-transform: none;
display: block;
}
main .form .button {
cursor: pointer;
background: rgb(20 115 230);
color: white;
border-radius: 16px;
font-size: var(--type-body-s-size);
font-weight: 300;
padding: 6px 16px;
border: none;
font-family: adobe-clean, 'Trebuchet MS', sans-serif;
}
main .form .form-submit-wrapper {
display: flex;
justify-content: flex-end;
}