@atlaskit/reduced-ui-pack 18.3.0 → 18.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +14 -22
  2. package/dist/bundle.css +947 -936
  3. package/package.json +55 -58
package/dist/bundle.css CHANGED
@@ -1,942 +1,953 @@
1
+ .ak-button {
2
+ align-items: baseline;
3
+ box-sizing: border-box;
4
+ border-radius: 3px;
5
+ border-width: 0;
6
+ display: inline-flex;
7
+ font-style: normal;
8
+ font-size: inherit;
9
+ height: 2.28571429em;
10
+ line-height: 2.28571429em;
11
+ margin: 0;
12
+ outline: none;
13
+ padding: 0 12px;
14
+ text-align: center;
15
+ transition:
16
+ background 0.1s ease-out,
17
+ box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
18
+ user-select: none;
19
+ vertical-align: middle;
20
+ white-space: nowrap;
21
+ }
22
+ .ak-button:hover {
23
+ cursor: pointer;
24
+ transition:
25
+ background 0s ease-out,
26
+ box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
27
+ }
28
+ .ak-button:active {
29
+ transition-duration: 0s;
30
+ }
31
+ .ak-button:focus {
32
+ outline: none;
33
+ transition-duration: 0s, 0.2s;
34
+ }
35
+ .ak-button[disabled] {
36
+ cursor: not-allowed;
37
+ }
38
+ .ak-button__appearance-default {
39
+ background: rgba(9, 30, 66, 0.04);
40
+ color: #505f79;
41
+ text-decoration: none;
42
+ }
43
+ .ak-button__appearance-default:hover {
44
+ background: rgba(9, 30, 66, 0.08);
45
+ }
46
+ .ak-button__appearance-default:active {
47
+ background: rgba(179, 212, 255, 0.6);
48
+ color: #0052cc;
49
+ }
50
+ .ak-button__appearance-default:focus {
51
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
52
+ }
53
+ .ak-button__appearance-default[disabled],
54
+ .ak-button__appearance-default[disabled]:active,
55
+ .ak-button__appearance-default[disabled]:hover {
56
+ background: rgba(9, 30, 66, 0.04);
57
+ color: #a5adba;
58
+ text-decoration: none;
59
+ }
60
+ .ak-button__appearance-default[disabled]:focus,
61
+ .ak-button__appearance-default[disabled]:active:focus,
62
+ .ak-button__appearance-default[disabled]:hover:focus {
63
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
64
+ }
65
+ .ak-button__appearance-subtle {
66
+ background: none;
67
+ color: #505f79;
68
+ text-decoration: none;
69
+ }
70
+ .ak-button__appearance-subtle:hover {
71
+ background: rgba(9, 30, 66, 0.08);
72
+ }
73
+ .ak-button__appearance-subtle:active {
74
+ background: rgba(179, 212, 255, 0.6);
75
+ color: #0052cc;
76
+ }
77
+ .ak-button__appearance-subtle:focus {
78
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
79
+ }
80
+ .ak-button__appearance-subtle[disabled],
81
+ .ak-button__appearance-subtle[disabled]:active,
82
+ .ak-button__appearance-subtle[disabled]:hover {
83
+ background: rgba(9, 30, 66, 0.04);
84
+ color: #a5adba;
85
+ text-decoration: none;
86
+ }
87
+ .ak-button__appearance-subtle[disabled]:focus,
88
+ .ak-button__appearance-subtle[disabled]:active:focus,
89
+ .ak-button__appearance-subtle[disabled]:hover:focus {
90
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
91
+ }
92
+ .ak-button__appearance-primary {
93
+ background: #0052cc;
94
+ color: #ffffff;
95
+ text-decoration: none;
96
+ }
97
+ .ak-button__appearance-primary:hover {
98
+ background: #0065ff;
99
+ }
100
+ .ak-button__appearance-primary:active {
101
+ background: #0747a6;
102
+ color: #ffffff;
103
+ }
104
+ .ak-button__appearance-primary:focus {
105
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
106
+ }
107
+ .ak-button__appearance-primary[disabled],
108
+ .ak-button__appearance-primary[disabled]:active,
109
+ .ak-button__appearance-primary[disabled]:hover {
110
+ background: #0052cc;
111
+ color: rgba(255, 255, 255, 0.5);
112
+ text-decoration: none;
113
+ }
114
+ .ak-button__appearance-primary[disabled]:focus,
115
+ .ak-button__appearance-primary[disabled]:active:focus,
116
+ .ak-button__appearance-primary[disabled]:hover:focus {
117
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
118
+ }
119
+ .ak-button__appearance-link {
120
+ background: none;
121
+ color: #0052cc;
122
+ text-decoration: none;
123
+ }
124
+ .ak-button__appearance-link:hover {
125
+ background: none;
126
+ color: #0065ff;
127
+ text-decoration: underline;
128
+ }
129
+ .ak-button__appearance-link:active {
130
+ text-decoration: none;
131
+ background: none;
132
+ color: #0747a6;
133
+ }
134
+ .ak-button__appearance-link:focus {
135
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
136
+ }
137
+ .ak-button__appearance-link[disabled],
138
+ .ak-button__appearance-link[disabled]:active,
139
+ .ak-button__appearance-link[disabled]:hover {
140
+ background: none;
141
+ color: #a5adba;
142
+ text-decoration: none;
143
+ }
144
+ .ak-button__appearance-link[disabled]:focus,
145
+ .ak-button__appearance-link[disabled]:active:focus,
146
+ .ak-button__appearance-link[disabled]:hover:focus {
147
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
148
+ }
149
+ .ak-button__appearance-subtle-link {
150
+ background: none;
151
+ color: #42526e;
152
+ text-decoration: none;
153
+ }
154
+ .ak-button__appearance-subtle-link:hover {
155
+ background: none;
156
+ color: #0065ff;
157
+ text-decoration: underline;
158
+ }
159
+ .ak-button__appearance-subtle-link:active {
160
+ text-decoration: none;
161
+ background: none;
162
+ color: #0747a6;
163
+ }
164
+ .ak-button__appearance-subtle-link:focus {
165
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
166
+ }
167
+ .ak-button__appearance-subtle-link[disabled],
168
+ .ak-button__appearance-subtle-link[disabled]:active,
169
+ .ak-button__appearance-subtle-link[disabled]:focus {
170
+ background: none;
171
+ color: #a5adba;
172
+ text-decoration: none;
173
+ }
174
+ .ak-button__appearance-subtle-link[disabled]:focus,
175
+ .ak-button__appearance-subtle-link[disabled]:active:focus,
176
+ .ak-button__appearance-subtle-link[disabled]:focus:focus {
177
+ box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
178
+ }
179
+ .ak-button__spacing-compact {
180
+ height: 1.71428571em;
181
+ line-height: 1.71428571em;
182
+ }
183
+ .ak-button__spacing-none {
184
+ height: auto;
185
+ line-height: normal;
186
+ padding: 0;
187
+ }
188
+ .ak-button::-moz-focus-inner {
189
+ border: 0;
190
+ margin: 0;
191
+ padding: 0;
192
+ }
1
193
 
2
- .ak-button {
3
- align-items: baseline;
4
- box-sizing: border-box;
5
- border-radius: 3px;
6
- border-width: 0;
7
- display: inline-flex;
8
- font-style: normal;
9
- font-size: inherit;
10
- height: 2.28571429em;
11
- line-height: 2.28571429em;
12
- margin: 0;
13
- outline: none;
14
- padding: 0 12px;
15
- text-align: center;
16
- transition: background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
17
- user-select: none;
18
- vertical-align: middle;
19
- white-space: nowrap;
20
- }
21
- .ak-button:hover {
22
- cursor: pointer;
23
- transition: background 0s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
24
- }
25
- .ak-button:active {
26
- transition-duration: 0s;
27
- }
28
- .ak-button:focus {
29
- outline: none;
30
- transition-duration: 0s, 0.2s;
31
- }
32
- .ak-button[disabled] {
33
- cursor: not-allowed;
34
- }
35
- .ak-button__appearance-default {
36
- background: rgba(9, 30, 66, 0.04);
37
- color: #505F79;
38
- text-decoration: none;
39
- }
40
- .ak-button__appearance-default:hover {
41
- background: rgba(9, 30, 66, 0.08);
42
- }
43
- .ak-button__appearance-default:active {
44
- background: rgba(179, 212, 255, 0.6);
45
- color: #0052CC;
46
- }
47
- .ak-button__appearance-default:focus {
48
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
49
- }
50
- .ak-button__appearance-default[disabled],
51
- .ak-button__appearance-default[disabled]:active,
52
- .ak-button__appearance-default[disabled]:hover {
53
- background: rgba(9, 30, 66, 0.04);
54
- color: #A5ADBA;
55
- text-decoration: none;
56
- }
57
- .ak-button__appearance-default[disabled]:focus,
58
- .ak-button__appearance-default[disabled]:active:focus,
59
- .ak-button__appearance-default[disabled]:hover:focus {
60
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
61
- }
62
- .ak-button__appearance-subtle {
63
- background: none;
64
- color: #505F79;
65
- text-decoration: none;
66
- }
67
- .ak-button__appearance-subtle:hover {
68
- background: rgba(9, 30, 66, 0.08);
69
- }
70
- .ak-button__appearance-subtle:active {
71
- background: rgba(179, 212, 255, 0.6);
72
- color: #0052CC;
73
- }
74
- .ak-button__appearance-subtle:focus {
75
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
76
- }
77
- .ak-button__appearance-subtle[disabled],
78
- .ak-button__appearance-subtle[disabled]:active,
79
- .ak-button__appearance-subtle[disabled]:hover {
80
- background: rgba(9, 30, 66, 0.04);
81
- color: #A5ADBA;
82
- text-decoration: none;
83
- }
84
- .ak-button__appearance-subtle[disabled]:focus,
85
- .ak-button__appearance-subtle[disabled]:active:focus,
86
- .ak-button__appearance-subtle[disabled]:hover:focus {
87
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
88
- }
89
- .ak-button__appearance-primary {
90
- background: #0052CC;
91
- color: #FFFFFF;
92
- text-decoration: none;
93
- }
94
- .ak-button__appearance-primary:hover {
95
- background: #0065FF;
96
- }
97
- .ak-button__appearance-primary:active {
98
- background: #0747A6;
99
- color: #FFFFFF;
100
- }
101
- .ak-button__appearance-primary:focus {
102
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
103
- }
104
- .ak-button__appearance-primary[disabled],
105
- .ak-button__appearance-primary[disabled]:active,
106
- .ak-button__appearance-primary[disabled]:hover {
107
- background: #0052CC;
108
- color: rgba(255, 255, 255, 0.5);
109
- text-decoration: none;
110
- }
111
- .ak-button__appearance-primary[disabled]:focus,
112
- .ak-button__appearance-primary[disabled]:active:focus,
113
- .ak-button__appearance-primary[disabled]:hover:focus {
114
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
115
- }
116
- .ak-button__appearance-link {
117
- background: none;
118
- color: #0052CC;
119
- text-decoration: none;
120
- }
121
- .ak-button__appearance-link:hover {
122
- background: none;
123
- color: #0065FF;
124
- text-decoration: underline;
125
- }
126
- .ak-button__appearance-link:active {
127
- text-decoration: none;
128
- background: none;
129
- color: #0747A6;
130
- }
131
- .ak-button__appearance-link:focus {
132
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
133
- }
134
- .ak-button__appearance-link[disabled],
135
- .ak-button__appearance-link[disabled]:active,
136
- .ak-button__appearance-link[disabled]:hover {
137
- background: none;
138
- color: #A5ADBA;
139
- text-decoration: none;
140
- }
141
- .ak-button__appearance-link[disabled]:focus,
142
- .ak-button__appearance-link[disabled]:active:focus,
143
- .ak-button__appearance-link[disabled]:hover:focus {
144
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
145
- }
146
- .ak-button__appearance-subtle-link {
147
- background: none;
148
- color: #42526E;
149
- text-decoration: none;
150
- }
151
- .ak-button__appearance-subtle-link:hover {
152
- background: none;
153
- color: #0065FF;
154
- text-decoration: underline;
155
- }
156
- .ak-button__appearance-subtle-link:active {
157
- text-decoration: none;
158
- background: none;
159
- color: #0747A6;
160
- }
161
- .ak-button__appearance-subtle-link:focus {
162
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
163
- }
164
- .ak-button__appearance-subtle-link[disabled],
165
- .ak-button__appearance-subtle-link[disabled]:active,
166
- .ak-button__appearance-subtle-link[disabled]:focus {
167
- background: none;
168
- color: #A5ADBA;
169
- text-decoration: none;
170
- }
171
- .ak-button__appearance-subtle-link[disabled]:focus,
172
- .ak-button__appearance-subtle-link[disabled]:active:focus,
173
- .ak-button__appearance-subtle-link[disabled]:focus:focus {
174
- box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.6);
175
- }
176
- .ak-button__spacing-compact {
177
- height: 1.71428571em;
178
- line-height: 1.71428571em;
179
- }
180
- .ak-button__spacing-none {
181
- height: auto;
182
- line-height: normal;
183
- padding: 0;
184
- }
185
- .ak-button::-moz-focus-inner {
186
- border: 0;
187
- margin: 0;
188
- padding: 0;
189
- }
194
+ ak-grid {
195
+ align-content: flex-start;
196
+ align-items: flex-start;
197
+ display: flex;
198
+ flex-wrap: wrap;
199
+ margin: 0 auto;
200
+ max-width: 960px;
201
+ padding: 0 8px;
202
+ position: relative;
203
+ }
204
+ ak-grid[layout='fluid'] {
205
+ max-width: 100%;
206
+ }
207
+ ak-grid-column {
208
+ flex-grow: 1;
209
+ flex-shrink: 0;
210
+ flex-basis: auto;
211
+ margin: 0 8px;
212
+ max-width: calc(100% - 16px);
213
+ min-width: calc(99.9999% / 12 - 16px);
214
+ word-wrap: break-word;
215
+ }
216
+ ak-grid-column[size='1'] {
217
+ flex-basis: calc(99.9999% / 12 * 1 - 16px);
218
+ max-width: calc(99.9999% / 12 * 1 - 16px);
219
+ }
220
+ ak-grid-column[size='2'] {
221
+ flex-basis: calc(99.9999% / 12 * 2 - 16px);
222
+ max-width: calc(99.9999% / 12 * 2 - 16px);
223
+ }
224
+ ak-grid-column[size='3'] {
225
+ flex-basis: calc(99.9999% / 12 * 3 - 16px);
226
+ max-width: calc(99.9999% / 12 * 3 - 16px);
227
+ }
228
+ ak-grid-column[size='4'] {
229
+ flex-basis: calc(99.9999% / 12 * 4 - 16px);
230
+ max-width: calc(99.9999% / 12 * 4 - 16px);
231
+ }
232
+ ak-grid-column[size='5'] {
233
+ flex-basis: calc(99.9999% / 12 * 5 - 16px);
234
+ max-width: calc(99.9999% / 12 * 5 - 16px);
235
+ }
236
+ ak-grid-column[size='6'] {
237
+ flex-basis: calc(99.9999% / 12 * 6 - 16px);
238
+ max-width: calc(99.9999% / 12 * 6 - 16px);
239
+ }
240
+ ak-grid-column[size='7'] {
241
+ flex-basis: calc(99.9999% / 12 * 7 - 16px);
242
+ max-width: calc(99.9999% / 12 * 7 - 16px);
243
+ }
244
+ ak-grid-column[size='8'] {
245
+ flex-basis: calc(99.9999% / 12 * 8 - 16px);
246
+ max-width: calc(99.9999% / 12 * 8 - 16px);
247
+ }
248
+ ak-grid-column[size='9'] {
249
+ flex-basis: calc(99.9999% / 12 * 9 - 16px);
250
+ max-width: calc(99.9999% / 12 * 9 - 16px);
251
+ }
252
+ ak-grid-column[size='10'] {
253
+ flex-basis: calc(99.9999% / 12 * 10 - 16px);
254
+ max-width: calc(99.9999% / 12 * 10 - 16px);
255
+ }
256
+ ak-grid-column[size='11'] {
257
+ flex-basis: calc(99.9999% / 12 * 11 - 16px);
258
+ max-width: calc(99.9999% / 12 * 11 - 16px);
259
+ }
260
+ ak-grid-column[size='12'] {
261
+ flex-basis: calc(100% - 16px);
262
+ max-width: calc(100% - 16px);
263
+ }
190
264
 
265
+ .ak-field-toggle {
266
+ display: inline-block;
267
+ overflow: hidden;
268
+ position: relative;
269
+ user-select: none;
270
+ }
271
+ .ak-field-toggle > label {
272
+ background-clip: content-box;
273
+ background-color: #97a0af;
274
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041%20(35326)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EDone%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%2224-x-20%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22editor-24x20%2Feditor-done%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22check%22%20transform%3D%22translate(2.000000%2C%204.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.16564164%2C6.89951467%20C2.97539446%2C6.70637871%202.66546153%2C6.7078825%202.47552459%2C6.90070352%20L1.18248183%2C8.21338031%20C0.991587885%2C8.40717286%200.989942114%2C8.7197019%201.18758597%2C8.92034685%20L6.67982192%2C14.4959789%20C6.8735348%2C14.6926332%207.18853946%2C14.691685%207.38390826%2C14.4933496%20L18.4834996%2C3.22521804%20C18.6786429%2C3.02711165%2018.6811307%2C2.70844326%2018.4911937%2C2.51562224%20L17.1981509%2C1.20294545%20C17.007257%2C1.0091529%2016.6982277%2C1.0086748%2016.502939%2C1.2069289%20L7.38013805%2C10.4682537%20C7.18707701%2C10.6642463%206.87069672%2C10.6608286%206.68609713%2C10.473426%20L3.16564164%2C6.89951467%20Z%22%20id%3D%22Path-3%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A'),
275
+ url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041.2%20(35397)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECancel%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Experiments%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22cancel-icon%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13.3635%2C11.94925%20C13.7545%2C12.34025%2013.7545%2C12.97225%2013.3635%2C13.36325%20C13.1685%2C13.55825%2012.9125%2C13.65625%2012.6565%2C13.65625%20C12.4005%2C13.65625%2012.1445%2C13.55825%2011.9495%2C13.36325%20L9.8285%2C11.24225%20L7.7065%2C13.36325%20C7.5115%2C13.55825%207.2555%2C13.65625%206.9995%2C13.65625%20C6.7435%2C13.65625%206.4885%2C13.55825%206.2925%2C13.36325%20C5.9025%2C12.97225%205.9025%2C12.34025%206.2925%2C11.94925%20L8.4135%2C9.82825%20L6.2925%2C7.70725%20C5.9025%2C7.31625%205.9025%2C6.68325%206.2925%2C6.29325%20C6.6835%2C5.90225%207.3165%2C5.90225%207.7065%2C6.29325%20L9.8285%2C8.41425%20L11.9495%2C6.29325%20C12.3405%2C5.90225%2012.9725%2C5.90225%2013.3635%2C6.29325%20C13.7545%2C6.68325%2013.7545%2C7.31625%2013.3635%2C7.70725%20L11.2425%2C9.82825%20L13.3635%2C11.94925%20Z%22%20id%3D%22Error-Icon%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
276
+ background-repeat: no-repeat;
277
+ border: 2px solid transparent;
278
+ color: transparent;
279
+ cursor: pointer;
280
+ display: inline-block;
281
+ overflow: hidden;
282
+ padding: 2px;
283
+ text-indent: -9999px;
284
+ transition:
285
+ background-color 0.2s,
286
+ border-color 0.2s;
287
+ vertical-align: top;
288
+ white-space: nowrap;
289
+ }
290
+ .ak-field-toggle > label::before {
291
+ background: white;
292
+ content: '';
293
+ cursor: pointer;
294
+ display: block;
295
+ transition: transform 0.2s;
296
+ }
297
+ .ak-field-toggle > input {
298
+ left: 0;
299
+ opacity: 0;
300
+ position: absolute;
301
+ top: 0;
302
+ }
303
+ .ak-field-toggle > input:checked + label {
304
+ background-color: #36b37e;
305
+ }
306
+ .ak-field-toggle > input:disabled + label {
307
+ background-color: #f3f4f5;
308
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041%20(35326)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EDone%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%2224-x-20%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22editor-24x20%2Feditor-done%22%20fill%3D%22%23A1DCC4%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22check%22%20transform%3D%22translate(2.000000%2C%204.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.16564164%2C6.89951467%20C2.97539446%2C6.70637871%202.66546153%2C6.7078825%202.47552459%2C6.90070352%20L1.18248183%2C8.21338031%20C0.991587885%2C8.40717286%200.989942114%2C8.7197019%201.18758597%2C8.92034685%20L6.67982192%2C14.4959789%20C6.8735348%2C14.6926332%207.18853946%2C14.691685%207.38390826%2C14.4933496%20L18.4834996%2C3.22521804%20C18.6786429%2C3.02711165%2018.6811307%2C2.70844326%2018.4911937%2C2.51562224%20L17.1981509%2C1.20294545%20C17.007257%2C1.0091529%2016.6982277%2C1.0086748%2016.502939%2C1.2069289%20L7.38013805%2C10.4682537%20C7.18707701%2C10.6642463%206.87069672%2C10.6608286%206.68609713%2C10.473426%20L3.16564164%2C6.89951467%20Z%22%20id%3D%22Path-3%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A'),
309
+ url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041.2%20(35397)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECancel%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Experiments%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22cancel-icon%22%20fill%3D%22%23AFB6C2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13.3635%2C11.94925%20C13.7545%2C12.34025%2013.7545%2C12.97225%2013.3635%2C13.36325%20C13.1685%2C13.55825%2012.9125%2C13.65625%2012.6565%2C13.65625%20C12.4005%2C13.65625%2012.1445%2C13.55825%2011.9495%2C13.36325%20L9.8285%2C11.24225%20L7.7065%2C13.36325%20C7.5115%2C13.55825%207.2555%2C13.65625%206.9995%2C13.65625%20C6.7435%2C13.65625%206.4885%2C13.55825%206.2925%2C13.36325%20C5.9025%2C12.97225%205.9025%2C12.34025%206.2925%2C11.94925%20L8.4135%2C9.82825%20L6.2925%2C7.70725%20C5.9025%2C7.31625%205.9025%2C6.68325%206.2925%2C6.29325%20C6.6835%2C5.90225%207.3165%2C5.90225%207.7065%2C6.29325%20L9.8285%2C8.41425%20L11.9495%2C6.29325%20C12.3405%2C5.90225%2012.9725%2C5.90225%2013.3635%2C6.29325%20C13.7545%2C6.68325%2013.7545%2C7.31625%2013.3635%2C7.70725%20L11.2425%2C9.82825%20L13.3635%2C11.94925%20Z%22%20id%3D%22Error-Icon%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
310
+ cursor: not-allowed;
311
+ }
312
+ .ak-field-toggle > input:disabled + label::before {
313
+ background-color: #afb6c2;
314
+ cursor: not-allowed;
315
+ }
316
+ .ak-field-toggle > input:checked:disabled + label {
317
+ background-color: #35b885;
318
+ }
319
+ .ak-field-toggle > input:checked:disabled + label::before {
320
+ background-color: #a1dcc4;
321
+ }
322
+ .ak-field-toggle > input:focus {
323
+ outline: none;
324
+ }
325
+ .ak-field-toggle > input:focus + label {
326
+ border-color: #4c9aff;
327
+ }
328
+ .ak-field-toggle__size-large > label {
329
+ background-position:
330
+ 5px 4px,
331
+ 23px 4px;
332
+ background-size:
333
+ 16px 16px,
334
+ 16px 16px;
335
+ border-radius: 20px;
336
+ height: 20px;
337
+ width: 40px;
338
+ }
339
+ .ak-field-toggle__size-large > label::before {
340
+ background: white;
341
+ border-radius: 16px;
342
+ content: '';
343
+ display: block;
344
+ height: 16px;
345
+ margin-left: 2px;
346
+ margin-top: 2px;
347
+ width: 16px;
348
+ }
349
+ .ak-field-toggle__size-large > input:checked + label::before {
350
+ transform: translate(20px, 0);
351
+ }
352
+ .ak-field-toggle__size-default > label {
353
+ background-position:
354
+ 5px 4px,
355
+ 19px 4px;
356
+ background-size:
357
+ 12px 12px,
358
+ 12px 12px;
359
+ border-radius: 16px;
360
+ height: 16px;
361
+ width: 32px;
362
+ }
363
+ .ak-field-toggle__size-default > label::before {
364
+ background: white;
365
+ border-radius: 12px;
366
+ content: '';
367
+ display: block;
368
+ height: 12px;
369
+ margin-left: 2px;
370
+ margin-top: 2px;
371
+ width: 12px;
372
+ }
373
+ .ak-field-toggle__size-default > input:checked + label::before {
374
+ transform: translate(16px, 0);
375
+ }
191
376
 
192
- ak-grid {
193
- align-content: flex-start;
194
- align-items: flex-start;
195
- display: flex;
196
- flex-wrap: wrap;
197
- margin: 0 auto;
198
- max-width: 960px;
199
- padding: 0 8px;
200
- position: relative;
201
- }
202
- ak-grid[layout='fluid'] {
203
- max-width: 100%;
204
- }
205
- ak-grid-column {
206
- flex-grow: 1;
207
- flex-shrink: 0;
208
- flex-basis: auto;
209
- margin: 0 8px;
210
- max-width: calc(100% - 16px);
211
- min-width: calc(99.9999% / 12 - 16px);
212
- word-wrap: break-word;
213
- }
214
- ak-grid-column[size='1'] {
215
- flex-basis: calc(99.9999% / 12 * 1 - 16px);
216
- max-width: calc(99.9999% / 12 * 1 - 16px);
217
- }
218
- ak-grid-column[size='2'] {
219
- flex-basis: calc(99.9999% / 12 * 2 - 16px);
220
- max-width: calc(99.9999% / 12 * 2 - 16px);
221
- }
222
- ak-grid-column[size='3'] {
223
- flex-basis: calc(99.9999% / 12 * 3 - 16px);
224
- max-width: calc(99.9999% / 12 * 3 - 16px);
225
- }
226
- ak-grid-column[size='4'] {
227
- flex-basis: calc(99.9999% / 12 * 4 - 16px);
228
- max-width: calc(99.9999% / 12 * 4 - 16px);
229
- }
230
- ak-grid-column[size='5'] {
231
- flex-basis: calc(99.9999% / 12 * 5 - 16px);
232
- max-width: calc(99.9999% / 12 * 5 - 16px);
233
- }
234
- ak-grid-column[size='6'] {
235
- flex-basis: calc(99.9999% / 12 * 6 - 16px);
236
- max-width: calc(99.9999% / 12 * 6 - 16px);
237
- }
238
- ak-grid-column[size='7'] {
239
- flex-basis: calc(99.9999% / 12 * 7 - 16px);
240
- max-width: calc(99.9999% / 12 * 7 - 16px);
241
- }
242
- ak-grid-column[size='8'] {
243
- flex-basis: calc(99.9999% / 12 * 8 - 16px);
244
- max-width: calc(99.9999% / 12 * 8 - 16px);
245
- }
246
- ak-grid-column[size='9'] {
247
- flex-basis: calc(99.9999% / 12 * 9 - 16px);
248
- max-width: calc(99.9999% / 12 * 9 - 16px);
249
- }
250
- ak-grid-column[size='10'] {
251
- flex-basis: calc(99.9999% / 12 * 10 - 16px);
252
- max-width: calc(99.9999% / 12 * 10 - 16px);
253
- }
254
- ak-grid-column[size='11'] {
255
- flex-basis: calc(99.9999% / 12 * 11 - 16px);
256
- max-width: calc(99.9999% / 12 * 11 - 16px);
257
- }
258
- ak-grid-column[size='12'] {
259
- flex-basis: calc(100% - 16px);
260
- max-width: calc(100% - 16px);
261
- }
377
+ a[href][data-ak-tooltip],
378
+ button[data-ak-tooltip] {
379
+ overflow: visible;
380
+ position: relative;
381
+ }
382
+ a[href][data-ak-tooltip]:hover::after,
383
+ button[data-ak-tooltip]:hover::after,
384
+ a[href][data-ak-tooltip]:focus::after,
385
+ button[data-ak-tooltip]:focus::after {
386
+ background-color: #091e42;
387
+ border-radius: 3px;
388
+ box-sizing: border-box;
389
+ color: white;
390
+ content: attr(data-ak-tooltip);
391
+ display: inline-block;
392
+ font-size: 12px;
393
+ line-height: 1.3333333333333333;
394
+ max-width: 420px;
395
+ overflow: hidden;
396
+ padding: 2px 8px;
397
+ pointer-events: none;
398
+ position: absolute;
399
+ text-decoration: none;
400
+ text-overflow: ellipsis;
401
+ white-space: nowrap;
402
+ z-index: 10000;
403
+ }
404
+ a[href][data-ak-tooltip][data-ak-tooltip-position='top']::after,
405
+ button[data-ak-tooltip][data-ak-tooltip-position='top']::after {
406
+ bottom: 100%;
407
+ left: 50%;
408
+ transform: translateX(-50%) translateY(-8px);
409
+ }
410
+ a[href][data-ak-tooltip][data-ak-tooltip-position='right']::after,
411
+ button[data-ak-tooltip][data-ak-tooltip-position='right']::after {
412
+ left: 100%;
413
+ top: 50%;
414
+ transform: translateY(-50%) translateX(8px);
415
+ }
416
+ a[href][data-ak-tooltip][data-ak-tooltip-position='bottom']::after,
417
+ button[data-ak-tooltip][data-ak-tooltip-position='bottom']::after {
418
+ left: 50%;
419
+ top: 100%;
420
+ transform: translateX(-50%) translateY(8px);
421
+ }
422
+ a[href][data-ak-tooltip][data-ak-tooltip-position='left']::after,
423
+ button[data-ak-tooltip][data-ak-tooltip-position='left']::after {
424
+ top: 50%;
425
+ transform: translateY(-50%) translateX(-8px);
426
+ right: 100%;
427
+ }
262
428
 
429
+ .ak-field-group {
430
+ border: 0;
431
+ margin: 0;
432
+ min-width: 0;
433
+ padding: 16px 0 0 0;
434
+ }
435
+ .ak-field-group > label,
436
+ .ak-field-group > legend {
437
+ color: #6b778c;
438
+ display: block;
439
+ font-size: 12px;
440
+ font-weight: 600;
441
+ line-height: 1;
442
+ padding: 0;
443
+ margin-bottom: 4px;
444
+ }
445
+ .ak-field-group > legend {
446
+ float: left;
447
+ width: 100%;
448
+ }
449
+ .ak-field-text,
450
+ .ak-field-date,
451
+ .ak-field-search,
452
+ .ak-field-email,
453
+ .ak-field-url,
454
+ .ak-field-tel,
455
+ .ak-field-number,
456
+ .ak-field-month,
457
+ .ak-field-week,
458
+ .ak-field-time,
459
+ .ak-field-datetime-local,
460
+ .ak-field-password,
461
+ .ak-field-select,
462
+ .ak-field-textarea {
463
+ background-color: #fafbfc;
464
+ border-radius: 3px;
465
+ border: 2px solid #dfe1e6;
466
+ box-shadow: none;
467
+ box-sizing: border-box;
468
+ color: #172b4d;
469
+ font-family: inherit;
470
+ font-size: 14px;
471
+ line-height: 20px;
472
+ max-width: 100%;
473
+ outline: none;
474
+ padding: 8px 6px;
475
+ transition:
476
+ background-color 0.2s ease-in-out,
477
+ border-color 0.2s ease-in-out;
478
+ width: 100%;
479
+ }
480
+ .ak-field-text:hover,
481
+ .ak-field-date:hover,
482
+ .ak-field-search:hover,
483
+ .ak-field-email:hover,
484
+ .ak-field-url:hover,
485
+ .ak-field-tel:hover,
486
+ .ak-field-number:hover,
487
+ .ak-field-month:hover,
488
+ .ak-field-week:hover,
489
+ .ak-field-time:hover,
490
+ .ak-field-datetime-local:hover,
491
+ .ak-field-password:hover,
492
+ .ak-field-select:hover,
493
+ .ak-field-textarea:hover {
494
+ background-color: #ebecf0;
495
+ border-color: #dfe1e6;
496
+ }
497
+ .ak-field-text:focus,
498
+ .ak-field-date:focus,
499
+ .ak-field-search:focus,
500
+ .ak-field-email:focus,
501
+ .ak-field-url:focus,
502
+ .ak-field-tel:focus,
503
+ .ak-field-number:focus,
504
+ .ak-field-month:focus,
505
+ .ak-field-week:focus,
506
+ .ak-field-time:focus,
507
+ .ak-field-datetime-local:focus,
508
+ .ak-field-password:focus,
509
+ .ak-field-select:focus,
510
+ .ak-field-textarea:focus {
511
+ background-color: #ffffff;
512
+ border-color: #4c9aff;
513
+ }
514
+ .ak-field-text:focus:invalid,
515
+ .ak-field-date:focus:invalid,
516
+ .ak-field-search:focus:invalid,
517
+ .ak-field-email:focus:invalid,
518
+ .ak-field-url:focus:invalid,
519
+ .ak-field-tel:focus:invalid,
520
+ .ak-field-number:focus:invalid,
521
+ .ak-field-month:focus:invalid,
522
+ .ak-field-week:focus:invalid,
523
+ .ak-field-time:focus:invalid,
524
+ .ak-field-datetime-local:focus:invalid,
525
+ .ak-field-password:focus:invalid,
526
+ .ak-field-select:focus:invalid,
527
+ .ak-field-textarea:focus:invalid,
528
+ .ak-field-text:focus:out-of-range,
529
+ .ak-field-date:focus:out-of-range,
530
+ .ak-field-search:focus:out-of-range,
531
+ .ak-field-email:focus:out-of-range,
532
+ .ak-field-url:focus:out-of-range,
533
+ .ak-field-tel:focus:out-of-range,
534
+ .ak-field-number:focus:out-of-range,
535
+ .ak-field-month:focus:out-of-range,
536
+ .ak-field-week:focus:out-of-range,
537
+ .ak-field-time:focus:out-of-range,
538
+ .ak-field-datetime-local:focus:out-of-range,
539
+ .ak-field-password:focus:out-of-range,
540
+ .ak-field-select:focus:out-of-range,
541
+ .ak-field-textarea:focus:out-of-range {
542
+ border-color: #de350b;
543
+ }
544
+ .ak-field-text[disabled],
545
+ .ak-field-date[disabled],
546
+ .ak-field-search[disabled],
547
+ .ak-field-email[disabled],
548
+ .ak-field-url[disabled],
549
+ .ak-field-tel[disabled],
550
+ .ak-field-number[disabled],
551
+ .ak-field-month[disabled],
552
+ .ak-field-week[disabled],
553
+ .ak-field-time[disabled],
554
+ .ak-field-datetime-local[disabled],
555
+ .ak-field-password[disabled],
556
+ .ak-field-select[disabled],
557
+ .ak-field-textarea[disabled],
558
+ .ak-field-text[disabled]:hover,
559
+ .ak-field-date[disabled]:hover,
560
+ .ak-field-search[disabled]:hover,
561
+ .ak-field-email[disabled]:hover,
562
+ .ak-field-url[disabled]:hover,
563
+ .ak-field-tel[disabled]:hover,
564
+ .ak-field-number[disabled]:hover,
565
+ .ak-field-month[disabled]:hover,
566
+ .ak-field-week[disabled]:hover,
567
+ .ak-field-time[disabled]:hover,
568
+ .ak-field-datetime-local[disabled]:hover,
569
+ .ak-field-password[disabled]:hover,
570
+ .ak-field-select[disabled]:hover,
571
+ .ak-field-textarea[disabled]:hover {
572
+ background-color: #f4f5f7;
573
+ border-color: transparent;
574
+ color: #a5adba;
575
+ cursor: not-allowed;
576
+ resize: none;
577
+ }
578
+ .ak-field-text::-webkit-input-placeholder,
579
+ .ak-field-date::-webkit-input-placeholder,
580
+ .ak-field-search::-webkit-input-placeholder,
581
+ .ak-field-email::-webkit-input-placeholder,
582
+ .ak-field-url::-webkit-input-placeholder,
583
+ .ak-field-tel::-webkit-input-placeholder,
584
+ .ak-field-number::-webkit-input-placeholder,
585
+ .ak-field-month::-webkit-input-placeholder,
586
+ .ak-field-week::-webkit-input-placeholder,
587
+ .ak-field-time::-webkit-input-placeholder,
588
+ .ak-field-datetime-local::-webkit-input-placeholder,
589
+ .ak-field-password::-webkit-input-placeholder,
590
+ .ak-field-select::-webkit-input-placeholder,
591
+ .ak-field-textarea::-webkit-input-placeholder {
592
+ color: #7a869a;
593
+ }
594
+ .ak-field-text::-moz-placeholder,
595
+ .ak-field-date::-moz-placeholder,
596
+ .ak-field-search::-moz-placeholder,
597
+ .ak-field-email::-moz-placeholder,
598
+ .ak-field-url::-moz-placeholder,
599
+ .ak-field-tel::-moz-placeholder,
600
+ .ak-field-number::-moz-placeholder,
601
+ .ak-field-month::-moz-placeholder,
602
+ .ak-field-week::-moz-placeholder,
603
+ .ak-field-time::-moz-placeholder,
604
+ .ak-field-datetime-local::-moz-placeholder,
605
+ .ak-field-password::-moz-placeholder,
606
+ .ak-field-select::-moz-placeholder,
607
+ .ak-field-textarea::-moz-placeholder {
608
+ color: #7a869a;
609
+ }
610
+ .ak-field-text:-ms-input-placeholder,
611
+ .ak-field-date:-ms-input-placeholder,
612
+ .ak-field-search:-ms-input-placeholder,
613
+ .ak-field-email:-ms-input-placeholder,
614
+ .ak-field-url:-ms-input-placeholder,
615
+ .ak-field-tel:-ms-input-placeholder,
616
+ .ak-field-number:-ms-input-placeholder,
617
+ .ak-field-month:-ms-input-placeholder,
618
+ .ak-field-week:-ms-input-placeholder,
619
+ .ak-field-time:-ms-input-placeholder,
620
+ .ak-field-datetime-local:-ms-input-placeholder,
621
+ .ak-field-password:-ms-input-placeholder,
622
+ .ak-field-select:-ms-input-placeholder,
623
+ .ak-field-textarea:-ms-input-placeholder {
624
+ color: #7a869a;
625
+ }
626
+ .ak-field-text:-moz-placeholder,
627
+ .ak-field-date:-moz-placeholder,
628
+ .ak-field-search:-moz-placeholder,
629
+ .ak-field-email:-moz-placeholder,
630
+ .ak-field-url:-moz-placeholder,
631
+ .ak-field-tel:-moz-placeholder,
632
+ .ak-field-number:-moz-placeholder,
633
+ .ak-field-month:-moz-placeholder,
634
+ .ak-field-week:-moz-placeholder,
635
+ .ak-field-time:-moz-placeholder,
636
+ .ak-field-datetime-local:-moz-placeholder,
637
+ .ak-field-password:-moz-placeholder,
638
+ .ak-field-select:-moz-placeholder,
639
+ .ak-field-textarea:-moz-placeholder {
640
+ color: #7a869a;
641
+ }
642
+ .ak-field-textarea {
643
+ display: block;
644
+ overflow: auto;
645
+ }
646
+ .ak-field__resize-none {
647
+ resize: none;
648
+ }
649
+ .ak-field__resize-horizontal {
650
+ resize: both;
651
+ }
652
+ .ak-field__resize-vertical {
653
+ resize: both;
654
+ }
655
+ .ak-field-search {
656
+ -moz-appearance: textfield;
657
+ -webkit-appearance: textfield;
658
+ appearance: textfield;
659
+ }
660
+ .ak-field-search::-webkit-search-decoration {
661
+ -webkit-appearance: none;
662
+ }
663
+ .ak-field-color {
664
+ background-color: #fafbfc;
665
+ border-radius: 3px;
666
+ border: 2px solid #dfe1e6;
667
+ box-sizing: border-box;
668
+ height: 40px;
669
+ padding: 6px 4px; /* special sizes just for color inputs */
670
+ transition: border-color 0.2s ease-in-out;
671
+ }
672
+ .ak-field-color:focus {
673
+ background-color: #ffffff;
674
+ border-color: #4c9aff;
675
+ outline: none;
676
+ }
677
+ .ak-field-color:focus:invalid {
678
+ border-color: #de350b;
679
+ }
680
+ .ak-field-select {
681
+ -moz-appearance: none;
682
+ -webkit-appearance: none;
683
+ appearance: none;
684
+ }
685
+ .ak-field-select > optgroup[label] {
686
+ color: #5e6c84;
687
+ font-size: 14px;
688
+ font-weight: normal;
689
+ line-height: 1.42857143;
690
+ }
691
+ .ak-field-select > optgroup[label] > option {
692
+ color: #172b4d;
693
+ }
694
+ .ak-field-select > option {
695
+ color: #172b4d;
696
+ }
697
+ .ak-field-select:not([multiple]) {
698
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.8.3%20(29802)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EExpand%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22expand%22%20fill%3D%22currentColor%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate(6.000000%2C%208.000000)%22%20id%3D%22Path-6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M6.58397485%2C0.375962279%20L3.58397485%2C2.37596228%20L4.41602515%2C2.37596228%20L1.41602515%2C0.375962279%20C1.07137863%2C0.146197935%200.605726624%2C0.239328336%200.375962279%2C0.583974853%20C0.146197935%2C0.928621369%200.239328336%2C1.39427338%200.583974853%2C1.62403772%20L3.58397485%2C3.62403772%20L4%2C3.90138782%20L4.41602515%2C3.62403772%20L7.41602515%2C1.62403772%20C7.76067166%2C1.39427338%207.85380207%2C0.928621369%207.62403772%2C0.583974853%20C7.39427338%2C0.239328336%206.92862137%2C0.146197935%206.58397485%2C0.375962279%20L6.58397485%2C0.375962279%20Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
699
+ background-position-x: calc(100% - 7px);
700
+ background-position-y: center;
701
+ background-repeat: no-repeat;
702
+ padding-right: 35px;
703
+ }
704
+ .ak-field-select[multiple] {
705
+ overflow-y: auto;
706
+ padding: 1px;
707
+ }
708
+ .ak-field-select[multiple] > option {
709
+ box-sizing: border-box;
710
+ height: 24px;
711
+ line-height: 1.42857143;
712
+ padding: 2px 6px;
713
+ }
714
+ .ak-field-select[multiple] > option:checked {
715
+ background-color: #dfe1e6;
716
+ color: inherit;
717
+ }
718
+ .ak-field-select[multiple]:focus > option:checked {
719
+ background-color: #4c9aff;
720
+ color: white;
721
+ }
722
+ .ak-field-select:-moz-focusring {
723
+ color: transparent;
724
+ text-shadow: 0 0 0 #000;
725
+ }
726
+ .ak-field-select::-ms-expand {
727
+ display: none;
728
+ }
729
+ .ak-field-checkbox {
730
+ clear: both;
731
+ position: relative;
732
+ }
733
+ .ak-field-checkbox > input[type='checkbox'] {
734
+ left: 0;
735
+ margin: 0 8px;
736
+ opacity: 0;
737
+ outline: none;
738
+ position: absolute;
739
+ top: 50%;
740
+ transform: translateY(-50%);
741
+ width: 12px;
742
+ }
743
+ .ak-field-checkbox > input[type='checkbox'] + label {
744
+ box-sizing: border-box;
745
+ display: block;
746
+ padding: 4px 4px 4px 32px;
747
+ position: relative;
748
+ width: 100%;
749
+ }
750
+ .ak-field-checkbox > input[type='checkbox'] + label::after {
751
+ background: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23FAFBFC%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A')
752
+ no-repeat 50% 50%;
753
+ border-radius: 3px;
754
+ border: 2px solid #dfe1e6;
755
+ box-sizing: border-box;
756
+ content: '';
757
+ height: 14px;
758
+ left: 7px;
759
+ position: absolute;
760
+ top: 6px;
761
+ transition: border-color 0.2s ease-in-out;
762
+ width: 14px;
763
+ }
764
+ .ak-field-checkbox > input[type='checkbox']:not([disabled]) + label:hover::after {
765
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23EBECF0%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A');
766
+ border-color: #dfe1e6;
767
+ }
768
+ .ak-field-checkbox > input[type='checkbox'][disabled] + label {
769
+ color: #a5adba;
770
+ }
771
+ .ak-field-checkbox > input[type='checkbox'][disabled] + label::after {
772
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23F4F5F7%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A');
773
+ border-color: transparent;
774
+ cursor: not-allowed;
775
+ }
776
+ .ak-field-checkbox > input[type='checkbox']:checked + label::after {
777
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%230052CC%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
778
+ border-color: transparent;
779
+ }
780
+ .ak-field-checkbox > input[type='checkbox']:checked:not([disabled]) + label:hover::after {
781
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%230065FF%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
782
+ }
783
+ .ak-field-checkbox > input[type='checkbox']:checked[disabled] + label::after {
784
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23F4F5F7%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23A5ADBA%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
785
+ }
786
+ .ak-field-checkbox > input[type='checkbox']:focus + label::after {
787
+ border-color: #4c9aff !important;
788
+ }
789
+ .ak-field-radio {
790
+ clear: both;
791
+ position: relative;
792
+ }
793
+ .ak-field-radio > input[type='radio'] {
794
+ left: 0;
795
+ margin: 0 8px;
796
+ opacity: 0;
797
+ outline: none;
798
+ position: absolute;
799
+ top: 50%;
800
+ transform: translateY(-50%);
801
+ width: 12px;
802
+ }
803
+ .ak-field-radio > input[type='radio'] + label {
804
+ box-sizing: border-box;
805
+ display: block;
806
+ padding: 4px 4px 4px 32px;
807
+ position: relative;
808
+ width: 100%;
809
+ }
810
+ .ak-field-radio > input[type='radio'] + label::after {
811
+ background: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%23FAFBFC%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A')
812
+ no-repeat 50% 50%;
813
+ border-radius: 50%;
814
+ border: 2px solid #dfe1e6;
815
+ box-sizing: border-box;
816
+ content: '';
817
+ height: 14px;
818
+ left: 7px;
819
+ position: absolute;
820
+ transition: border-color 0.2s ease-in-out;
821
+ top: 6px;
822
+ width: 14px;
823
+ }
824
+ .ak-field-radio > input[type='radio']:not([disabled]) + label:hover::after {
825
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%20%22%23EBECF0%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A');
826
+ border-color: #dfe1e6;
827
+ }
828
+ .ak-field-radio > input[type='radio'][disabled] + label {
829
+ color: #a5adba;
830
+ }
831
+ .ak-field-radio > input[type='radio'][disabled] + label::after {
832
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%20%22%23F4F5F7%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A');
833
+ border-color: transparent;
834
+ cursor: not-allowed;
835
+ }
836
+ .ak-field-radio > input[type='radio']:checked + label::after {
837
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%230052CC%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A');
838
+ border-color: transparent;
839
+ }
840
+ .ak-field-radio > input[type='radio']:checked:not([disabled]) + label:hover::after {
841
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%230065FF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A');
842
+ }
843
+ .ak-field-radio > input[type='radio']:checked[disabled] + label::after {
844
+ background-image: url('data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%23F4F5F7%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23A5ADBA%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A');
845
+ }
846
+ .ak-field-radio > input[type='radio']:focus + label::after {
847
+ border-color: #4c9aff !important;
848
+ }
849
+ .ak-field__width-xsmall {
850
+ max-width: 80px;
851
+ }
852
+ .ak-field__width-small {
853
+ max-width: 160px;
854
+ }
855
+ .ak-field__width-medium {
856
+ max-width: 240px;
857
+ }
858
+ .ak-field__width-large {
859
+ max-width: 320px;
860
+ }
861
+ .ak-field__width-xlarge {
862
+ max-width: 480px;
863
+ }
263
864
 
264
- .ak-field-toggle {
265
- display: inline-block;
266
- overflow: hidden;
267
- position: relative;
268
- user-select: none;
269
- }
270
- .ak-field-toggle > label {
271
- background-clip: content-box;
272
- background-color: #97A0AF;
273
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041%20(35326)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EDone%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%2224-x-20%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22editor-24x20%2Feditor-done%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22check%22%20transform%3D%22translate(2.000000%2C%204.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.16564164%2C6.89951467%20C2.97539446%2C6.70637871%202.66546153%2C6.7078825%202.47552459%2C6.90070352%20L1.18248183%2C8.21338031%20C0.991587885%2C8.40717286%200.989942114%2C8.7197019%201.18758597%2C8.92034685%20L6.67982192%2C14.4959789%20C6.8735348%2C14.6926332%207.18853946%2C14.691685%207.38390826%2C14.4933496%20L18.4834996%2C3.22521804%20C18.6786429%2C3.02711165%2018.6811307%2C2.70844326%2018.4911937%2C2.51562224%20L17.1981509%2C1.20294545%20C17.007257%2C1.0091529%2016.6982277%2C1.0086748%2016.502939%2C1.2069289%20L7.38013805%2C10.4682537%20C7.18707701%2C10.6642463%206.87069672%2C10.6608286%206.68609713%2C10.473426%20L3.16564164%2C6.89951467%20Z%22%20id%3D%22Path-3%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041.2%20(35397)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECancel%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Experiments%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22cancel-icon%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13.3635%2C11.94925%20C13.7545%2C12.34025%2013.7545%2C12.97225%2013.3635%2C13.36325%20C13.1685%2C13.55825%2012.9125%2C13.65625%2012.6565%2C13.65625%20C12.4005%2C13.65625%2012.1445%2C13.55825%2011.9495%2C13.36325%20L9.8285%2C11.24225%20L7.7065%2C13.36325%20C7.5115%2C13.55825%207.2555%2C13.65625%206.9995%2C13.65625%20C6.7435%2C13.65625%206.4885%2C13.55825%206.2925%2C13.36325%20C5.9025%2C12.97225%205.9025%2C12.34025%206.2925%2C11.94925%20L8.4135%2C9.82825%20L6.2925%2C7.70725%20C5.9025%2C7.31625%205.9025%2C6.68325%206.2925%2C6.29325%20C6.6835%2C5.90225%207.3165%2C5.90225%207.7065%2C6.29325%20L9.8285%2C8.41425%20L11.9495%2C6.29325%20C12.3405%2C5.90225%2012.9725%2C5.90225%2013.3635%2C6.29325%20C13.7545%2C6.68325%2013.7545%2C7.31625%2013.3635%2C7.70725%20L11.2425%2C9.82825%20L13.3635%2C11.94925%20Z%22%20id%3D%22Error-Icon%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
274
- background-repeat: no-repeat;
275
- border: 2px solid transparent;
276
- color: transparent;
277
- cursor: pointer;
278
- display: inline-block;
279
- overflow: hidden;
280
- padding: 2px;
281
- text-indent: -9999px;
282
- transition: background-color 0.2s, border-color 0.2s;
283
- vertical-align: top;
284
- white-space: nowrap;
285
- }
286
- .ak-field-toggle > label::before {
287
- background: white;
288
- content: '';
289
- cursor: pointer;
290
- display: block;
291
- transition: transform 0.2s;
292
- }
293
- .ak-field-toggle > input {
294
- left: 0;
295
- opacity: 0;
296
- position: absolute;
297
- top: 0;
298
- }
299
- .ak-field-toggle > input:checked + label {
300
- background-color: #36B37E;
301
- }
302
- .ak-field-toggle > input:disabled + label {
303
- background-color: #f3f4f5;
304
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041%20(35326)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EDone%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%2224-x-20%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22editor-24x20%2Feditor-done%22%20fill%3D%22%23A1DCC4%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22check%22%20transform%3D%22translate(2.000000%2C%204.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.16564164%2C6.89951467%20C2.97539446%2C6.70637871%202.66546153%2C6.7078825%202.47552459%2C6.90070352%20L1.18248183%2C8.21338031%20C0.991587885%2C8.40717286%200.989942114%2C8.7197019%201.18758597%2C8.92034685%20L6.67982192%2C14.4959789%20C6.8735348%2C14.6926332%207.18853946%2C14.691685%207.38390826%2C14.4933496%20L18.4834996%2C3.22521804%20C18.6786429%2C3.02711165%2018.6811307%2C2.70844326%2018.4911937%2C2.51562224%20L17.1981509%2C1.20294545%20C17.007257%2C1.0091529%2016.6982277%2C1.0086748%2016.502939%2C1.2069289%20L7.38013805%2C10.4682537%20C7.18707701%2C10.6642463%206.87069672%2C10.6608286%206.68609713%2C10.473426%20L3.16564164%2C6.89951467%20Z%22%20id%3D%22Path-3%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2041.2%20(35397)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECancel%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Experiments%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22cancel-icon%22%20fill%3D%22%23AFB6C2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13.3635%2C11.94925%20C13.7545%2C12.34025%2013.7545%2C12.97225%2013.3635%2C13.36325%20C13.1685%2C13.55825%2012.9125%2C13.65625%2012.6565%2C13.65625%20C12.4005%2C13.65625%2012.1445%2C13.55825%2011.9495%2C13.36325%20L9.8285%2C11.24225%20L7.7065%2C13.36325%20C7.5115%2C13.55825%207.2555%2C13.65625%206.9995%2C13.65625%20C6.7435%2C13.65625%206.4885%2C13.55825%206.2925%2C13.36325%20C5.9025%2C12.97225%205.9025%2C12.34025%206.2925%2C11.94925%20L8.4135%2C9.82825%20L6.2925%2C7.70725%20C5.9025%2C7.31625%205.9025%2C6.68325%206.2925%2C6.29325%20C6.6835%2C5.90225%207.3165%2C5.90225%207.7065%2C6.29325%20L9.8285%2C8.41425%20L11.9495%2C6.29325%20C12.3405%2C5.90225%2012.9725%2C5.90225%2013.3635%2C6.29325%20C13.7545%2C6.68325%2013.7545%2C7.31625%2013.3635%2C7.70725%20L11.2425%2C9.82825%20L13.3635%2C11.94925%20Z%22%20id%3D%22Error-Icon%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
305
- cursor: not-allowed;
306
- }
307
- .ak-field-toggle > input:disabled + label::before {
308
- background-color: #afb6c2;
309
- cursor: not-allowed;
310
- }
311
- .ak-field-toggle > input:checked:disabled + label {
312
- background-color: #35b885;
313
- }
314
- .ak-field-toggle > input:checked:disabled + label::before {
315
- background-color: #a1dcc4;
316
- }
317
- .ak-field-toggle > input:focus {
318
- outline: none;
319
- }
320
- .ak-field-toggle > input:focus + label {
321
- border-color: #4C9AFF;
322
- }
323
- .ak-field-toggle__size-large > label {
324
- background-position: 5px 4px, 23px 4px;
325
- background-size: 16px 16px, 16px 16px;
326
- border-radius: 20px;
327
- height: 20px;
328
- width: 40px;
329
- }
330
- .ak-field-toggle__size-large > label::before {
331
- background: white;
332
- border-radius: 16px;
333
- content: '';
334
- display: block;
335
- height: 16px;
336
- margin-left: 2px;
337
- margin-top: 2px;
338
- width: 16px;
339
- }
340
- .ak-field-toggle__size-large > input:checked + label::before {
341
- transform: translate(20px, 0);
342
- }
343
- .ak-field-toggle__size-default > label {
344
- background-position: 5px 4px, 19px 4px;
345
- background-size: 12px 12px, 12px 12px;
346
- border-radius: 16px;
347
- height: 16px;
348
- width: 32px;
349
- }
350
- .ak-field-toggle__size-default > label::before {
351
- background: white;
352
- border-radius: 12px;
353
- content: '';
354
- display: block;
355
- height: 12px;
356
- margin-left: 2px;
357
- margin-top: 2px;
358
- width: 12px;
359
- }
360
- .ak-field-toggle__size-default > input:checked + label::before {
361
- transform: translate(16px, 0);
362
- }
865
+ /* global rule that sets the default fill that will cascade into 2 colour icons */
866
+ .ak-icon {
867
+ fill: white;
868
+ height: 24px;
869
+ width: 24px;
870
+ }
871
+ .ak-icon__size-small {
872
+ height: 16px;
873
+ width: 16px;
874
+ }
875
+ .ak-icon__size-medium {
876
+ height: 24px;
877
+ width: 24px;
878
+ max-width: 24px;
879
+ }
880
+ .ak-icon__size-large {
881
+ height: 32px;
882
+ width: 32px;
883
+ max-width: 32px;
884
+ }
885
+ .ak-icon__size-xlarge {
886
+ height: 48px;
887
+ width: 48px;
888
+ max-width: 48px;
889
+ }
363
890
 
364
-
365
- a[href][data-ak-tooltip],
366
- button[data-ak-tooltip] {
367
- overflow: visible;
368
- position: relative;
369
- }
370
- a[href][data-ak-tooltip]:hover::after,
371
- button[data-ak-tooltip]:hover::after,
372
- a[href][data-ak-tooltip]:focus::after,
373
- button[data-ak-tooltip]:focus::after {
374
- background-color: #091E42;
375
- border-radius: 3px;
376
- box-sizing: border-box;
377
- color: white;
378
- content: attr(data-ak-tooltip);
379
- display: inline-block;
380
- font-size: 12px;
381
- line-height: 1.3333333333333333;
382
- max-width: 420px;
383
- overflow: hidden;
384
- padding: 2px 8px;
385
- pointer-events: none;
386
- position: absolute;
387
- text-decoration: none;
388
- text-overflow: ellipsis;
389
- white-space: nowrap;
390
- z-index: 10000;
391
- }
392
- a[href][data-ak-tooltip][data-ak-tooltip-position='top']::after,
393
- button[data-ak-tooltip][data-ak-tooltip-position='top']::after {
394
- bottom: 100%;
395
- left: 50%;
396
- transform: translateX(-50%) translateY(-8px);
397
- }
398
- a[href][data-ak-tooltip][data-ak-tooltip-position='right']::after,
399
- button[data-ak-tooltip][data-ak-tooltip-position='right']::after {
400
- left: 100%;
401
- top: 50%;
402
- transform: translateY(-50%) translateX(8px);
403
- }
404
- a[href][data-ak-tooltip][data-ak-tooltip-position='bottom']::after,
405
- button[data-ak-tooltip][data-ak-tooltip-position='bottom']::after {
406
- left: 50%;
407
- top: 100%;
408
- transform: translateX(-50%) translateY(8px);
409
- }
410
- a[href][data-ak-tooltip][data-ak-tooltip-position='left']::after,
411
- button[data-ak-tooltip][data-ak-tooltip-position='left']::after {
412
- top: 50%;
413
- transform: translateY(-50%) translateX(-8px);
414
- right: 100%;
415
- }
416
-
417
-
418
- .ak-field-group {
419
- border: 0;
420
- margin: 0;
421
- min-width: 0;
422
- padding: 16px 0 0 0;
423
- }
424
- .ak-field-group > label,
425
- .ak-field-group > legend {
426
- color: #6B778C;
427
- display: block;
428
- font-size: 12px;
429
- font-weight: 600;
430
- line-height: 1;
431
- padding: 0;
432
- margin-bottom: 4px;
433
- }
434
- .ak-field-group > legend {
435
- float: left;
436
- width: 100%;
437
- }
438
- .ak-field-text,
439
- .ak-field-date,
440
- .ak-field-search,
441
- .ak-field-email,
442
- .ak-field-url,
443
- .ak-field-tel,
444
- .ak-field-number,
445
- .ak-field-month,
446
- .ak-field-week,
447
- .ak-field-time,
448
- .ak-field-datetime-local,
449
- .ak-field-password,
450
- .ak-field-select,
451
- .ak-field-textarea {
452
- background-color: #FAFBFC;
453
- border-radius: 3px;
454
- border: 2px solid #DFE1E6;
455
- box-shadow: none;
456
- box-sizing: border-box;
457
- color: #172B4D;
458
- font-family: inherit;
459
- font-size: 14px;
460
- line-height: 20px;
461
- max-width: 100%;
462
- outline: none;
463
- padding: 8px 6px;
464
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
465
- width: 100%;
466
- }
467
- .ak-field-text:hover,
468
- .ak-field-date:hover,
469
- .ak-field-search:hover,
470
- .ak-field-email:hover,
471
- .ak-field-url:hover,
472
- .ak-field-tel:hover,
473
- .ak-field-number:hover,
474
- .ak-field-month:hover,
475
- .ak-field-week:hover,
476
- .ak-field-time:hover,
477
- .ak-field-datetime-local:hover,
478
- .ak-field-password:hover,
479
- .ak-field-select:hover,
480
- .ak-field-textarea:hover {
481
- background-color: #EBECF0;
482
- border-color: #DFE1E6;
483
- }
484
- .ak-field-text:focus,
485
- .ak-field-date:focus,
486
- .ak-field-search:focus,
487
- .ak-field-email:focus,
488
- .ak-field-url:focus,
489
- .ak-field-tel:focus,
490
- .ak-field-number:focus,
491
- .ak-field-month:focus,
492
- .ak-field-week:focus,
493
- .ak-field-time:focus,
494
- .ak-field-datetime-local:focus,
495
- .ak-field-password:focus,
496
- .ak-field-select:focus,
497
- .ak-field-textarea:focus {
498
- background-color: #FFFFFF;
499
- border-color: #4C9AFF;
500
- }
501
- .ak-field-text:focus:invalid,
502
- .ak-field-date:focus:invalid,
503
- .ak-field-search:focus:invalid,
504
- .ak-field-email:focus:invalid,
505
- .ak-field-url:focus:invalid,
506
- .ak-field-tel:focus:invalid,
507
- .ak-field-number:focus:invalid,
508
- .ak-field-month:focus:invalid,
509
- .ak-field-week:focus:invalid,
510
- .ak-field-time:focus:invalid,
511
- .ak-field-datetime-local:focus:invalid,
512
- .ak-field-password:focus:invalid,
513
- .ak-field-select:focus:invalid,
514
- .ak-field-textarea:focus:invalid,
515
- .ak-field-text:focus:out-of-range,
516
- .ak-field-date:focus:out-of-range,
517
- .ak-field-search:focus:out-of-range,
518
- .ak-field-email:focus:out-of-range,
519
- .ak-field-url:focus:out-of-range,
520
- .ak-field-tel:focus:out-of-range,
521
- .ak-field-number:focus:out-of-range,
522
- .ak-field-month:focus:out-of-range,
523
- .ak-field-week:focus:out-of-range,
524
- .ak-field-time:focus:out-of-range,
525
- .ak-field-datetime-local:focus:out-of-range,
526
- .ak-field-password:focus:out-of-range,
527
- .ak-field-select:focus:out-of-range,
528
- .ak-field-textarea:focus:out-of-range {
529
- border-color: #DE350B;
530
- }
531
- .ak-field-text[disabled],
532
- .ak-field-date[disabled],
533
- .ak-field-search[disabled],
534
- .ak-field-email[disabled],
535
- .ak-field-url[disabled],
536
- .ak-field-tel[disabled],
537
- .ak-field-number[disabled],
538
- .ak-field-month[disabled],
539
- .ak-field-week[disabled],
540
- .ak-field-time[disabled],
541
- .ak-field-datetime-local[disabled],
542
- .ak-field-password[disabled],
543
- .ak-field-select[disabled],
544
- .ak-field-textarea[disabled],
545
- .ak-field-text[disabled]:hover,
546
- .ak-field-date[disabled]:hover,
547
- .ak-field-search[disabled]:hover,
548
- .ak-field-email[disabled]:hover,
549
- .ak-field-url[disabled]:hover,
550
- .ak-field-tel[disabled]:hover,
551
- .ak-field-number[disabled]:hover,
552
- .ak-field-month[disabled]:hover,
553
- .ak-field-week[disabled]:hover,
554
- .ak-field-time[disabled]:hover,
555
- .ak-field-datetime-local[disabled]:hover,
556
- .ak-field-password[disabled]:hover,
557
- .ak-field-select[disabled]:hover,
558
- .ak-field-textarea[disabled]:hover {
559
- background-color: #F4F5F7;
560
- border-color: transparent;
561
- color: #A5ADBA;
562
- cursor: not-allowed;
563
- resize: none;
564
- }
565
- .ak-field-text::-webkit-input-placeholder,
566
- .ak-field-date::-webkit-input-placeholder,
567
- .ak-field-search::-webkit-input-placeholder,
568
- .ak-field-email::-webkit-input-placeholder,
569
- .ak-field-url::-webkit-input-placeholder,
570
- .ak-field-tel::-webkit-input-placeholder,
571
- .ak-field-number::-webkit-input-placeholder,
572
- .ak-field-month::-webkit-input-placeholder,
573
- .ak-field-week::-webkit-input-placeholder,
574
- .ak-field-time::-webkit-input-placeholder,
575
- .ak-field-datetime-local::-webkit-input-placeholder,
576
- .ak-field-password::-webkit-input-placeholder,
577
- .ak-field-select::-webkit-input-placeholder,
578
- .ak-field-textarea::-webkit-input-placeholder {
579
- color: #7A869A;
580
- }
581
- .ak-field-text::-moz-placeholder,
582
- .ak-field-date::-moz-placeholder,
583
- .ak-field-search::-moz-placeholder,
584
- .ak-field-email::-moz-placeholder,
585
- .ak-field-url::-moz-placeholder,
586
- .ak-field-tel::-moz-placeholder,
587
- .ak-field-number::-moz-placeholder,
588
- .ak-field-month::-moz-placeholder,
589
- .ak-field-week::-moz-placeholder,
590
- .ak-field-time::-moz-placeholder,
591
- .ak-field-datetime-local::-moz-placeholder,
592
- .ak-field-password::-moz-placeholder,
593
- .ak-field-select::-moz-placeholder,
594
- .ak-field-textarea::-moz-placeholder {
595
- color: #7A869A;
596
- }
597
- .ak-field-text:-ms-input-placeholder,
598
- .ak-field-date:-ms-input-placeholder,
599
- .ak-field-search:-ms-input-placeholder,
600
- .ak-field-email:-ms-input-placeholder,
601
- .ak-field-url:-ms-input-placeholder,
602
- .ak-field-tel:-ms-input-placeholder,
603
- .ak-field-number:-ms-input-placeholder,
604
- .ak-field-month:-ms-input-placeholder,
605
- .ak-field-week:-ms-input-placeholder,
606
- .ak-field-time:-ms-input-placeholder,
607
- .ak-field-datetime-local:-ms-input-placeholder,
608
- .ak-field-password:-ms-input-placeholder,
609
- .ak-field-select:-ms-input-placeholder,
610
- .ak-field-textarea:-ms-input-placeholder {
611
- color: #7A869A;
612
- }
613
- .ak-field-text:-moz-placeholder,
614
- .ak-field-date:-moz-placeholder,
615
- .ak-field-search:-moz-placeholder,
616
- .ak-field-email:-moz-placeholder,
617
- .ak-field-url:-moz-placeholder,
618
- .ak-field-tel:-moz-placeholder,
619
- .ak-field-number:-moz-placeholder,
620
- .ak-field-month:-moz-placeholder,
621
- .ak-field-week:-moz-placeholder,
622
- .ak-field-time:-moz-placeholder,
623
- .ak-field-datetime-local:-moz-placeholder,
624
- .ak-field-password:-moz-placeholder,
625
- .ak-field-select:-moz-placeholder,
626
- .ak-field-textarea:-moz-placeholder {
627
- color: #7A869A;
628
- }
629
- .ak-field-textarea {
630
- display: block;
631
- overflow: auto;
632
- }
633
- .ak-field__resize-none {
634
- resize: none;
635
- }
636
- .ak-field__resize-horizontal {
637
- resize: both;
638
- }
639
- .ak-field__resize-vertical {
640
- resize: both;
641
- }
642
- .ak-field-search {
643
- -moz-appearance: textfield;
644
- -webkit-appearance: textfield;
645
- appearance: textfield;
646
- }
647
- .ak-field-search::-webkit-search-decoration {
648
- -webkit-appearance: none;
649
- }
650
- .ak-field-color {
651
- background-color: #FAFBFC;
652
- border-radius: 3px;
653
- border: 2px solid #DFE1E6;
654
- box-sizing: border-box;
655
- height: 40px;
656
- padding: 6px 4px; /* special sizes just for color inputs */
657
- transition: border-color 0.2s ease-in-out;
658
- }
659
- .ak-field-color:focus {
660
- background-color: #FFFFFF;
661
- border-color: #4C9AFF;
662
- outline: none;
663
- }
664
- .ak-field-color:focus:invalid {
665
- border-color: #DE350B;
666
- }
667
- .ak-field-select {
668
- -moz-appearance: none;
669
- -webkit-appearance: none;
670
- appearance: none;
671
- }
672
- .ak-field-select > optgroup[label] {
673
- color: #5E6C84;
674
- font-size: 14px;
675
- font-weight: normal;
676
- line-height: 1.42857143;
677
- }
678
- .ak-field-select > optgroup[label] > option {
679
- color: #172B4D;
680
- }
681
- .ak-field-select > option {
682
- color: #172B4D;
683
- }
684
- .ak-field-select:not([multiple]) {
685
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.8.3%20(29802)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3EExpand%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22expand%22%20fill%3D%22currentColor%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate(6.000000%2C%208.000000)%22%20id%3D%22Path-6%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M6.58397485%2C0.375962279%20L3.58397485%2C2.37596228%20L4.41602515%2C2.37596228%20L1.41602515%2C0.375962279%20C1.07137863%2C0.146197935%200.605726624%2C0.239328336%200.375962279%2C0.583974853%20C0.146197935%2C0.928621369%200.239328336%2C1.39427338%200.583974853%2C1.62403772%20L3.58397485%2C3.62403772%20L4%2C3.90138782%20L4.41602515%2C3.62403772%20L7.41602515%2C1.62403772%20C7.76067166%2C1.39427338%207.85380207%2C0.928621369%207.62403772%2C0.583974853%20C7.39427338%2C0.239328336%206.92862137%2C0.146197935%206.58397485%2C0.375962279%20L6.58397485%2C0.375962279%20Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
686
- background-position-x: calc(100% - 7px);
687
- background-position-y: center;
688
- background-repeat: no-repeat;
689
- padding-right: 35px;
690
- }
691
- .ak-field-select[multiple] {
692
- overflow-y: auto;
693
- padding: 1px;
694
- }
695
- .ak-field-select[multiple] > option {
696
- box-sizing: border-box;
697
- height: 24px;
698
- line-height: 1.42857143;
699
- padding: 2px 6px;
700
- }
701
- .ak-field-select[multiple] > option:checked {
702
- background-color: #DFE1E6;
703
- color: inherit;
704
- }
705
- .ak-field-select[multiple]:focus > option:checked {
706
- background-color: #4C9AFF;
707
- color: white;
708
- }
709
- .ak-field-select:-moz-focusring {
710
- color: transparent;
711
- text-shadow: 0 0 0 #000;
712
- }
713
- .ak-field-select::-ms-expand {
714
- display: none;
715
- }
716
- .ak-field-checkbox {
717
- clear: both;
718
- position: relative;
719
- }
720
- .ak-field-checkbox > input[type='checkbox'] {
721
- left: 0;
722
- margin: 0 8px;
723
- opacity: 0;
724
- outline: none;
725
- position: absolute;
726
- top: 50%;
727
- transform: translateY(-50%);
728
- width: 12px;
729
- }
730
- .ak-field-checkbox > input[type='checkbox'] + label {
731
- box-sizing: border-box;
732
- display: block;
733
- padding: 4px 4px 4px 32px;
734
- position: relative;
735
- width: 100%;
736
- }
737
- .ak-field-checkbox > input[type='checkbox'] + label::after {
738
- background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%23FAFBFC%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A") no-repeat 50% 50%;
739
- border-radius: 3px;
740
- border: 2px solid #DFE1E6;
741
- box-sizing: border-box;
742
- content: '';
743
- height: 14px;
744
- left: 7px;
745
- position: absolute;
746
- top: 6px;
747
- transition: border-color 0.2s ease-in-out;
748
- width: 14px;
749
- }
750
- .ak-field-checkbox > input[type='checkbox']:not([disabled]) + label:hover::after {
751
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23EBECF0%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A");
752
- border-color: #DFE1E6;
753
- }
754
- .ak-field-checkbox > input[type='checkbox'][disabled] + label {
755
- color: #A5ADBA;
756
- }
757
- .ak-field-checkbox > input[type='checkbox'][disabled] + label::after {
758
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23F4F5F7%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E%0A");
759
- border-color: transparent;
760
- cursor: not-allowed;
761
- }
762
- .ak-field-checkbox > input[type='checkbox']:checked + label::after {
763
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%230052CC%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");
764
- border-color: transparent;
765
- }
766
- .ak-field-checkbox > input[type='checkbox']:checked:not([disabled]) + label:hover::after {
767
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%230065FF%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");
768
- }
769
- .ak-field-checkbox > input[type='checkbox']:checked[disabled] + label::after {
770
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%20%22%23F4F5F7%22%3E%3C%2Frect%3E%0A%20%20%3Cpath%20fill%3D%22%23A5ADBA%22%20d%3D%22M9.374%204.914L5.456%208.832a.769.769%200%200%201-1.088%200L2.626%207.091a.769.769%200%201%201%201.088-1.089L4.912%207.2l3.374-3.374a.769.769%200%201%201%201.088%201.088%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");
771
- }
772
- .ak-field-checkbox > input[type='checkbox']:focus + label::after {
773
- border-color: #4C9AFF !important;
774
- }
775
- .ak-field-radio {
776
- clear: both;
777
- position: relative;
778
- }
779
- .ak-field-radio > input[type='radio'] {
780
- left: 0;
781
- margin: 0 8px;
782
- opacity: 0;
783
- outline: none;
784
- position: absolute;
785
- top: 50%;
786
- transform: translateY(-50%);
787
- width: 12px;
788
- }
789
- .ak-field-radio > input[type='radio'] + label {
790
- box-sizing: border-box;
791
- display: block;
792
- padding: 4px 4px 4px 32px;
793
- position: relative;
794
- width: 100%;
795
- }
796
- .ak-field-radio > input[type='radio'] + label::after {
797
- background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%23FAFBFC%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat 50% 50%;
798
- border-radius: 50%;
799
- border: 2px solid #DFE1E6;
800
- box-sizing: border-box;
801
- content: '';
802
- height: 14px;
803
- left: 7px;
804
- position: absolute;
805
- transition: border-color 0.2s ease-in-out;
806
- top: 6px;
807
- width: 14px;
808
- }
809
- .ak-field-radio > input[type='radio']:not([disabled]) + label:hover::after {
810
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%20%22%23EBECF0%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
811
- border-color: #DFE1E6;
812
- }
813
- .ak-field-radio > input[type='radio'][disabled] + label {
814
- color: #A5ADBA;
815
- }
816
- .ak-field-radio > input[type='radio'][disabled] + label::after {
817
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%20%22%23F4F5F7%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
818
- border-color: transparent;
819
- cursor: not-allowed;
820
- }
821
- .ak-field-radio > input[type='radio']:checked + label::after {
822
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%230052CC%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
823
- border-color: transparent;
824
- }
825
- .ak-field-radio
826
- > input[type='radio']:checked:not([disabled])
827
- + label:hover::after {
828
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%230065FF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
829
- }
830
- .ak-field-radio > input[type='radio']:checked[disabled] + label::after {
831
- background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Ccircle%20fill%3D%22%23F4F5F7%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%3E%3C%2Fcircle%3E%0A%20%20%3Ccircle%20fill%3D%22%23A5ADBA%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
832
- }
833
- .ak-field-radio > input[type='radio']:focus + label::after {
834
- border-color: #4C9AFF !important;
835
- }
836
- .ak-field__width-xsmall {
837
- max-width: 80px;
838
- }
839
- .ak-field__width-small {
840
- max-width: 160px;
841
- }
842
- .ak-field__width-medium {
843
- max-width: 240px;
844
- }
845
- .ak-field__width-large {
846
- max-width: 320px;
847
- }
848
- .ak-field__width-xlarge {
849
- max-width: 480px;
850
- }
851
-
852
-
853
- /* global rule that sets the default fill that will cascade into 2 colour icons */
854
- .ak-icon {
855
- fill: white;
856
- height: 24px;
857
- width: 24px;
858
- }
859
- .ak-icon__size-small {
860
- height: 16px;
861
- width: 16px;
862
- }
863
- .ak-icon__size-medium {
864
- height: 24px;
865
- width: 24px;
866
- max-width: 24px;
867
- }
868
- .ak-icon__size-large {
869
- height: 32px;
870
- width: 32px;
871
- max-width: 32px;
872
- }
873
- .ak-icon__size-xlarge {
874
- height: 48px;
875
- width: 48px;
876
- max-width: 48px;
877
- }
878
-
879
-
880
- .ak-lozenge {
881
- border-radius: 3px;
882
- box-sizing: border-box;
883
- display: inline-flex;
884
- font-size: 11px;
885
- font-weight: 700;
886
- line-height: 1;
887
- max-width: 200px;
888
- overflow: hidden;
889
- padding: 2px 4px 3px 4px;
890
- text-transform: uppercase;
891
- text-overflow: ellipsis;
892
- vertical-align: baseline;
893
- white-space: nowrap;
894
- }
895
- .ak-lozenge__appearance-default {
896
- background-color: #DFE1E6;
897
- color: #42526E;
898
- }
899
- .ak-lozenge__appearance-default-bold {
900
- background-color: #42526E;
901
- color: #FFFFFF;
902
- }
903
- .ak-lozenge__appearance-inprogress {
904
- background-color: #DEEBFF;
905
- color: #0747A6;
906
- }
907
- .ak-lozenge__appearance-inprogress-bold {
908
- background-color: #0052CC;
909
- color: #FFFFFF;
910
- }
911
- .ak-lozenge__appearance-moved {
912
- background-color: #FFF0B3;
913
- color: #172B4D;
914
- }
915
- .ak-lozenge__appearance-moved-bold {
916
- background-color: #FF8B00;
917
- color: #172B4D;
918
- }
919
- .ak-lozenge__appearance-new {
920
- background-color: #EAE6FF;
921
- color: #403294;
922
- }
923
- .ak-lozenge__appearance-new-bold {
924
- background-color: #5243AA;
925
- color: #FFFFFF;
926
- }
927
- .ak-lozenge__appearance-removed {
928
- background-color: #FFEBE6;
929
- color: #BF2600;
930
- }
931
- .ak-lozenge__appearance-removed-bold {
932
- background-color: #DE350B;
933
- color: #FFFFFF;
934
- }
935
- .ak-lozenge__appearance-success {
936
- background-color: #E3FCEF;
937
- color: #006644;
938
- }
939
- .ak-lozenge__appearance-success-bold {
940
- background-color: #00875A;
941
- color: #FFFFFF;
942
- }
891
+ .ak-lozenge {
892
+ border-radius: 3px;
893
+ box-sizing: border-box;
894
+ display: inline-flex;
895
+ font-size: 11px;
896
+ font-weight: 700;
897
+ line-height: 1;
898
+ max-width: 200px;
899
+ overflow: hidden;
900
+ padding: 2px 4px 3px 4px;
901
+ text-transform: uppercase;
902
+ text-overflow: ellipsis;
903
+ vertical-align: baseline;
904
+ white-space: nowrap;
905
+ }
906
+ .ak-lozenge__appearance-default {
907
+ background-color: #dfe1e6;
908
+ color: #42526e;
909
+ }
910
+ .ak-lozenge__appearance-default-bold {
911
+ background-color: #42526e;
912
+ color: #ffffff;
913
+ }
914
+ .ak-lozenge__appearance-inprogress {
915
+ background-color: #deebff;
916
+ color: #0747a6;
917
+ }
918
+ .ak-lozenge__appearance-inprogress-bold {
919
+ background-color: #0052cc;
920
+ color: #ffffff;
921
+ }
922
+ .ak-lozenge__appearance-moved {
923
+ background-color: #fff0b3;
924
+ color: #172b4d;
925
+ }
926
+ .ak-lozenge__appearance-moved-bold {
927
+ background-color: #ff8b00;
928
+ color: #172b4d;
929
+ }
930
+ .ak-lozenge__appearance-new {
931
+ background-color: #eae6ff;
932
+ color: #403294;
933
+ }
934
+ .ak-lozenge__appearance-new-bold {
935
+ background-color: #5243aa;
936
+ color: #ffffff;
937
+ }
938
+ .ak-lozenge__appearance-removed {
939
+ background-color: #ffebe6;
940
+ color: #bf2600;
941
+ }
942
+ .ak-lozenge__appearance-removed-bold {
943
+ background-color: #de350b;
944
+ color: #ffffff;
945
+ }
946
+ .ak-lozenge__appearance-success {
947
+ background-color: #e3fcef;
948
+ color: #006644;
949
+ }
950
+ .ak-lozenge__appearance-success-bold {
951
+ background-color: #00875a;
952
+ color: #ffffff;
953
+ }