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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
@use "colors.sass" as c
@mixin disabled
background-color: c.$bg-dark
color: #808080
fieldset
border: none
padding: 55px 0px 0px 0px
position: relative
@media screen and (max-width: 400px)
padding-top: 70px
legend
position: absolute
top: 5px
left: 0px
width: 100%
font-size: 28px
font-weight: bold
padding: 0
border-bottom: 1px solid #333
line-height: 1.56
@media screen and (max-width: 400px)
margin-top: 15px
.field-row
line-height: 1
display: grid
grid-template-areas: "label input" "description description"
align-items: center
justify-content: space-between
position: relative
padding-bottom: 5px
margin-bottom: 5px
border-bottom: 1px solid #999
@media screen and (max-width: 400px)
flex-direction: column
align-items: start
padding-bottom: 15px
&.max-width-input
grid-template-columns: auto 1fr
.field-row__input
justify-self: stretch
&__label
grid-area: label
padding: 8px 8px 8px 0px
color: #fff
&__input
grid-area: input
justify-self: end
&__description
grid-area: description
white-space: pre-line
margin: 12px 0px 18px
font-size: 16px
color: #ccc
line-height: 1.2
//
.checkbox-row
.pill
display: flex
align-items: center
user-select: none
.fake-checkbox
-webkit-appearance: none
background-color: white
width: 16px
height: 16px
padding: 0px
border: 1px solid #666
border-radius: 3px
margin-left: 8px
position: relative
outline: none
.checkbox
display: none
&:checked + .pill .fake-checkbox
background: center center / contain url(/static/img/tick.svg)
&:disabled + .pill
@include disabled
.fake-checkbox
@include disabled
&.checkbox:not(:disabled) + .pill
@include acts-like-button
cursor: pointer
@mixin checkbox-hider($base)
##{$base}
position: relative
left: 10px
display: block
z-index: 1
height: 42px
margin: 0
.#{$base}-container
position: relative
display: grid // why does the default not work???
top: -42px
background: c.$bg-accent-x
line-height: 1
border-radius: 8px
margin-bottom: -18px
.#{$base}-label
padding: 12px 0px 12px 32px
cursor: pointer
@mixin single-button-form
display: inline-block
white-space: pre-wrap // preserve whitespace inside the form at the edge
> button
background: none
padding: 0
margin: 0
border: none
color: inherit
font-family: inherit
font-size: inherit
text-decoration: underline