@duetds/css 4.0.36 → 4.0.38

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/lib/duet.css +795 -794
  2. package/lib/duet.min.css +1 -1
  3. package/package.json +4 -4
package/lib/duet.css CHANGED
@@ -1,68 +1,23 @@
1
1
  @charset "UTF-8";
2
2
  /* DUET CSS FRAMEWORK
3
3
  --------------------------------------------- */
4
- .duet-background-warning {
5
- background: rgb(247, 178, 40) !important;
6
- }
7
- .duet-color-warning {
8
- color: rgb(247, 178, 40) !important;
9
- }
10
- .duet-fill-warning {
11
- fill: rgb(247, 178, 40) !important;
12
- }
13
- .duet-background-gray-darker {
14
- background: rgb(101, 119, 135) !important;
15
- }
16
- .duet-color-gray-darker {
17
- color: rgb(101, 119, 135) !important;
18
- }
19
- .duet-fill-gray-darker {
20
- fill: rgb(101, 119, 135) !important;
21
- }
22
- .duet-background-gray-lighter {
23
- background: rgb(245, 248, 250) !important;
24
- }
25
- .duet-color-gray-lighter {
26
- color: rgb(245, 248, 250) !important;
27
- }
28
- .duet-fill-gray-lighter {
29
- fill: rgb(245, 248, 250) !important;
30
- }
31
- .duet-background-category-home {
32
- background: rgb(211, 36, 131) !important;
33
- }
34
- .duet-color-category-home {
35
- color: rgb(211, 36, 131) !important;
36
- }
37
- .duet-fill-category-home {
38
- fill: rgb(211, 36, 131) !important;
39
- }
40
- .duet-background-primary {
41
- background: rgb(0, 119, 179) !important;
42
- }
43
- .duet-color-primary {
44
- color: rgb(0, 119, 179) !important;
45
- }
46
- .duet-fill-primary {
47
- fill: rgb(0, 119, 179) !important;
48
- }
49
- .duet-background-category-vehicle {
50
- background: rgb(54, 74, 129) !important;
4
+ .duet-background-brand-blue {
5
+ background: rgb(0, 161, 212) !important;
51
6
  }
52
- .duet-color-category-vehicle {
53
- color: rgb(54, 74, 129) !important;
7
+ .duet-color-brand-blue {
8
+ color: rgb(0, 161, 212) !important;
54
9
  }
55
- .duet-fill-category-vehicle {
56
- fill: rgb(54, 74, 129) !important;
10
+ .duet-fill-brand-blue {
11
+ fill: rgb(0, 161, 212) !important;
57
12
  }
58
- .duet-background-success {
59
- background: rgb(0, 135, 90) !important;
13
+ .duet-background-brand-gray-turva {
14
+ background: rgb(178, 180, 179) !important;
60
15
  }
61
- .duet-color-success {
62
- color: rgb(0, 135, 90) !important;
16
+ .duet-color-brand-gray-turva {
17
+ color: rgb(178, 180, 179) !important;
63
18
  }
64
- .duet-fill-success {
65
- fill: rgb(0, 135, 90) !important;
19
+ .duet-fill-brand-gray-turva {
20
+ fill: rgb(178, 180, 179) !important;
66
21
  }
67
22
  .duet-background-category-family {
68
23
  background: rgb(11, 114, 136) !important;
@@ -73,50 +28,14 @@
73
28
  .duet-fill-category-family {
74
29
  fill: rgb(11, 114, 136) !important;
75
30
  }
76
- .duet-background-primary-lightest {
77
- background: rgb(243, 249, 252) !important;
78
- }
79
- .duet-color-primary-lightest {
80
- color: rgb(243, 249, 252) !important;
81
- }
82
- .duet-fill-primary-lightest {
83
- fill: rgb(243, 249, 252) !important;
84
- }
85
- .duet-background-primary-lighter {
86
- background: rgb(230, 242, 248) !important;
87
- }
88
- .duet-color-primary-lighter {
89
- color: rgb(230, 242, 248) !important;
90
- }
91
- .duet-fill-primary-lighter {
92
- fill: rgb(230, 242, 248) !important;
93
- }
94
- .duet-background-brand-blue {
95
- background: rgb(0, 161, 212) !important;
96
- }
97
- .duet-color-brand-blue {
98
- color: rgb(0, 161, 212) !important;
99
- }
100
- .duet-fill-brand-blue {
101
- fill: rgb(0, 161, 212) !important;
102
- }
103
- .duet-background-primary-dark {
104
- background: rgb(0, 77, 128) !important;
105
- }
106
- .duet-color-primary-dark {
107
- color: rgb(0, 77, 128) !important;
108
- }
109
- .duet-fill-primary-dark {
110
- fill: rgb(0, 77, 128) !important;
111
- }
112
- .duet-background-gray-lightest {
113
- background: rgb(255, 255, 255) !important;
31
+ .duet-background-category-family-turva {
32
+ background: rgb(199, 12, 112) !important;
114
33
  }
115
- .duet-color-gray-lightest {
116
- color: rgb(255, 255, 255) !important;
34
+ .duet-color-category-family-turva {
35
+ color: rgb(199, 12, 112) !important;
117
36
  }
118
- .duet-fill-gray-lightest {
119
- fill: rgb(255, 255, 255) !important;
37
+ .duet-fill-category-family-turva {
38
+ fill: rgb(199, 12, 112) !important;
120
39
  }
121
40
  .duet-background-category-finance {
122
41
  background: rgb(122, 1, 196) !important;
@@ -127,32 +46,23 @@
127
46
  .duet-fill-category-finance {
128
47
  fill: rgb(122, 1, 196) !important;
129
48
  }
130
- .duet-background-gray-dark {
131
- background: rgb(144, 149, 153) !important;
132
- }
133
- .duet-color-gray-dark {
134
- color: rgb(144, 149, 153) !important;
135
- }
136
- .duet-fill-gray-dark {
137
- fill: rgb(144, 149, 153) !important;
138
- }
139
- .duet-background-gray-light {
140
- background: rgb(225, 227, 230) !important;
49
+ .duet-background-category-home {
50
+ background: rgb(211, 36, 131) !important;
141
51
  }
142
- .duet-color-gray-light {
143
- color: rgb(225, 227, 230) !important;
52
+ .duet-color-category-home {
53
+ color: rgb(211, 36, 131) !important;
144
54
  }
145
- .duet-fill-gray-light {
146
- fill: rgb(225, 227, 230) !important;
55
+ .duet-fill-category-home {
56
+ fill: rgb(211, 36, 131) !important;
147
57
  }
148
- .duet-background-secondary {
149
- background: rgb(0, 41, 77) !important;
58
+ .duet-background-category-home-turva {
59
+ background: rgb(161, 10, 78) !important;
150
60
  }
151
- .duet-color-secondary {
152
- color: rgb(0, 41, 77) !important;
61
+ .duet-color-category-home-turva {
62
+ color: rgb(161, 10, 78) !important;
153
63
  }
154
- .duet-fill-secondary {
155
- fill: rgb(0, 41, 77) !important;
64
+ .duet-fill-category-home-turva {
65
+ fill: rgb(161, 10, 78) !important;
156
66
  }
157
67
  .duet-background-category-pet {
158
68
  background: rgb(168, 1, 78) !important;
@@ -163,24 +73,6 @@
163
73
  .duet-fill-category-pet {
164
74
  fill: rgb(168, 1, 78) !important;
165
75
  }
166
- .duet-background-primary-darker {
167
- background: rgb(0, 98, 154) !important;
168
- }
169
- .duet-color-primary-darker {
170
- color: rgb(0, 98, 154) !important;
171
- }
172
- .duet-fill-primary-darker {
173
- fill: rgb(0, 98, 154) !important;
174
- }
175
- .duet-background-primary-light {
176
- background: rgb(205, 229, 241) !important;
177
- }
178
- .duet-color-primary-light {
179
- color: rgb(205, 229, 241) !important;
180
- }
181
- .duet-fill-primary-light {
182
- fill: rgb(205, 229, 241) !important;
183
- }
184
76
  .duet-background-category-travel {
185
77
  background: rgb(213, 66, 3) !important;
186
78
  }
@@ -190,59 +82,32 @@
190
82
  .duet-fill-category-travel {
191
83
  fill: rgb(213, 66, 3) !important;
192
84
  }
193
- .duet-background-gray {
194
- background: rgb(207, 210, 212) !important;
195
- }
196
- .duet-color-gray {
197
- color: rgb(207, 210, 212) !important;
198
- }
199
- .duet-fill-gray {
200
- fill: rgb(207, 210, 212) !important;
201
- }
202
- .duet-background-danger {
203
- background: rgb(222, 35, 98) !important;
204
- }
205
- .duet-color-danger {
206
- color: rgb(222, 35, 98) !important;
207
- }
208
- .duet-fill-danger {
209
- fill: rgb(222, 35, 98) !important;
210
- }
211
- .duet-background-gray-darker-turva {
212
- background: rgb(68, 68, 69) !important;
213
- }
214
- .duet-color-gray-darker-turva {
215
- color: rgb(68, 68, 69) !important;
216
- }
217
- .duet-fill-gray-darker-turva {
218
- fill: rgb(68, 68, 69) !important;
219
- }
220
- .duet-background-gray-lighter-turva {
221
- background: rgb(245, 245, 247) !important;
85
+ .duet-background-category-travel-turva {
86
+ background: rgb(9, 129, 148) !important;
222
87
  }
223
- .duet-color-gray-lighter-turva {
224
- color: rgb(245, 245, 247) !important;
88
+ .duet-color-category-travel-turva {
89
+ color: rgb(9, 129, 148) !important;
225
90
  }
226
- .duet-fill-gray-lighter-turva {
227
- fill: rgb(245, 245, 247) !important;
91
+ .duet-fill-category-travel-turva {
92
+ fill: rgb(9, 129, 148) !important;
228
93
  }
229
- .duet-background-category-home-turva {
230
- background: rgb(161, 10, 78) !important;
94
+ .duet-background-category-union-turva {
95
+ background: rgb(169, 69, 124) !important;
231
96
  }
232
- .duet-color-category-home-turva {
233
- color: rgb(161, 10, 78) !important;
97
+ .duet-color-category-union-turva {
98
+ color: rgb(169, 69, 124) !important;
234
99
  }
235
- .duet-fill-category-home-turva {
236
- fill: rgb(161, 10, 78) !important;
100
+ .duet-fill-category-union-turva {
101
+ fill: rgb(169, 69, 124) !important;
237
102
  }
238
- .duet-background-primary-turva {
239
- background: rgb(198, 12, 48) !important;
103
+ .duet-background-category-vehicle {
104
+ background: rgb(54, 74, 129) !important;
240
105
  }
241
- .duet-color-primary-turva {
242
- color: rgb(198, 12, 48) !important;
106
+ .duet-color-category-vehicle {
107
+ color: rgb(54, 74, 129) !important;
243
108
  }
244
- .duet-fill-primary-turva {
245
- fill: rgb(198, 12, 48) !important;
109
+ .duet-fill-category-vehicle {
110
+ fill: rgb(54, 74, 129) !important;
246
111
  }
247
112
  .duet-background-category-vehicle-turva {
248
113
  background: rgb(23, 28, 58) !important;
@@ -253,158 +118,77 @@
253
118
  .duet-fill-category-vehicle-turva {
254
119
  fill: rgb(23, 28, 58) !important;
255
120
  }
256
- .duet-background-success-turva {
257
- background: rgb(8, 135, 78) !important;
121
+ .duet-background-danger {
122
+ background: rgb(222, 35, 98) !important;
258
123
  }
259
- .duet-color-success-turva {
260
- color: rgb(8, 135, 78) !important;
124
+ .duet-color-danger {
125
+ color: rgb(222, 35, 98) !important;
261
126
  }
262
- .duet-fill-success-turva {
263
- fill: rgb(8, 135, 78) !important;
127
+ .duet-fill-danger {
128
+ fill: rgb(222, 35, 98) !important;
264
129
  }
265
- .duet-background-primary-lightest-turva {
266
- background: rgb(252, 243, 244) !important;
130
+ .duet-background-danger-turva {
131
+ background: rgb(224, 42, 13) !important;
267
132
  }
268
- .duet-color-primary-lightest-turva {
269
- color: rgb(252, 243, 244) !important;
133
+ .duet-color-danger-turva {
134
+ color: rgb(224, 42, 13) !important;
270
135
  }
271
- .duet-fill-primary-lightest-turva {
272
- fill: rgb(252, 243, 244) !important;
136
+ .duet-fill-danger-turva {
137
+ fill: rgb(224, 42, 13) !important;
273
138
  }
274
- .duet-background-category-family-turva {
275
- background: rgb(199, 12, 112) !important;
276
- }
277
- .duet-color-category-family-turva {
278
- color: rgb(199, 12, 112) !important;
279
- }
280
- .duet-fill-category-family-turva {
281
- fill: rgb(199, 12, 112) !important;
282
- }
283
- .duet-background-category-union-turva {
284
- background: rgb(169, 69, 124) !important;
285
- }
286
- .duet-color-category-union-turva {
287
- color: rgb(169, 69, 124) !important;
288
- }
289
- .duet-fill-category-union-turva {
290
- fill: rgb(169, 69, 124) !important;
291
- }
292
- .duet-background-primary-lighter-turva {
293
- background: rgb(249, 230, 234) !important;
294
- }
295
- .duet-color-primary-lighter-turva {
296
- color: rgb(249, 230, 234) !important;
297
- }
298
- .duet-fill-primary-lighter-turva {
299
- fill: rgb(249, 230, 234) !important;
300
- }
301
- .duet-background-primary-dark-turva {
302
- background: rgb(148, 9, 37) !important;
303
- }
304
- .duet-color-primary-dark-turva {
305
- color: rgb(148, 9, 37) !important;
306
- }
307
- .duet-fill-primary-dark-turva {
308
- fill: rgb(148, 9, 37) !important;
309
- }
310
- .duet-background-gray-lightest-turva {
311
- background: rgb(255, 255, 255) !important;
312
- }
313
- .duet-color-gray-lightest-turva {
314
- color: rgb(255, 255, 255) !important;
315
- }
316
- .duet-fill-gray-lightest-turva {
317
- fill: rgb(255, 255, 255) !important;
318
- }
319
- .duet-background-gray-dark-turva {
320
- background: rgb(116, 116, 117) !important;
321
- }
322
- .duet-color-gray-dark-turva {
323
- color: rgb(116, 116, 117) !important;
324
- }
325
- .duet-fill-gray-dark-turva {
326
- fill: rgb(116, 116, 117) !important;
327
- }
328
- .duet-background-gray-light-turva {
329
- background: rgb(228, 228, 230) !important;
330
- }
331
- .duet-color-gray-light-turva {
332
- color: rgb(228, 228, 230) !important;
333
- }
334
- .duet-fill-gray-light-turva {
335
- fill: rgb(228, 228, 230) !important;
336
- }
337
- .duet-background-brand-gray-turva {
338
- background: rgb(178, 180, 179) !important;
339
- }
340
- .duet-color-brand-gray-turva {
341
- color: rgb(178, 180, 179) !important;
342
- }
343
- .duet-fill-brand-gray-turva {
344
- fill: rgb(178, 180, 179) !important;
345
- }
346
- .duet-background-secondary-turva {
347
- background: rgb(23, 28, 58) !important;
348
- }
349
- .duet-color-secondary-turva {
350
- color: rgb(23, 28, 58) !important;
351
- }
352
- .duet-fill-secondary-turva {
353
- fill: rgb(23, 28, 58) !important;
354
- }
355
- .duet-background-primary-darker-turva {
356
- background: rgb(173, 11, 43) !important;
139
+ .duet-background-data-01 {
140
+ background: rgb(122, 1, 196) !important;
357
141
  }
358
- .duet-color-primary-darker-turva {
359
- color: rgb(173, 11, 43) !important;
142
+ .duet-color-data-01 {
143
+ color: rgb(122, 1, 196) !important;
360
144
  }
361
- .duet-fill-primary-darker-turva {
362
- fill: rgb(173, 11, 43) !important;
145
+ .duet-fill-data-01 {
146
+ fill: rgb(122, 1, 196) !important;
363
147
  }
364
- .duet-background-primary-light-turva {
365
- background: rgb(244, 207, 214) !important;
148
+ .duet-background-data-02 {
149
+ background: rgb(0, 155, 204) !important;
366
150
  }
367
- .duet-color-primary-light-turva {
368
- color: rgb(244, 207, 214) !important;
151
+ .duet-color-data-02 {
152
+ color: rgb(0, 155, 204) !important;
369
153
  }
370
- .duet-fill-primary-light-turva {
371
- fill: rgb(244, 207, 214) !important;
154
+ .duet-fill-data-02 {
155
+ fill: rgb(0, 155, 204) !important;
372
156
  }
373
- .duet-background-category-travel-turva {
374
- background: rgb(9, 129, 148) !important;
157
+ .duet-background-data-03 {
158
+ background: rgb(27, 171, 75) !important;
375
159
  }
376
- .duet-color-category-travel-turva {
377
- color: rgb(9, 129, 148) !important;
160
+ .duet-color-data-03 {
161
+ color: rgb(27, 171, 75) !important;
378
162
  }
379
- .duet-fill-category-travel-turva {
380
- fill: rgb(9, 129, 148) !important;
163
+ .duet-fill-data-03 {
164
+ fill: rgb(27, 171, 75) !important;
381
165
  }
382
- .duet-background-gray-turva {
383
- background: rgb(207, 207, 209) !important;
166
+ .duet-background-data-04 {
167
+ background: rgb(255, 86, 34) !important;
384
168
  }
385
- .duet-color-gray-turva {
386
- color: rgb(207, 207, 209) !important;
169
+ .duet-color-data-04 {
170
+ color: rgb(255, 86, 34) !important;
387
171
  }
388
- .duet-fill-gray-turva {
389
- fill: rgb(207, 207, 209) !important;
172
+ .duet-fill-data-04 {
173
+ fill: rgb(255, 86, 34) !important;
390
174
  }
391
- .duet-background-danger-turva {
392
- background: rgb(224, 42, 13) !important;
175
+ .duet-background-data-05 {
176
+ background: rgb(245, 76, 154) !important;
393
177
  }
394
- .duet-color-danger-turva {
395
- color: rgb(224, 42, 13) !important;
178
+ .duet-color-data-05 {
179
+ color: rgb(245, 76, 154) !important;
396
180
  }
397
- .duet-fill-danger-turva {
398
- fill: rgb(224, 42, 13) !important;
181
+ .duet-fill-data-05 {
182
+ fill: rgb(245, 76, 154) !important;
399
183
  }
400
- .duet-background-warning-turva {
401
- background: rgb(250, 164, 15) !important;
184
+ .duet-background-data-06 {
185
+ background: rgb(194, 21, 101) !important;
402
186
  }
403
- .duet-color-warning-turva {
404
- color: rgb(250, 164, 15) !important;
187
+ .duet-color-data-06 {
188
+ color: rgb(194, 21, 101) !important;
405
189
  }
406
- .duet-fill-warning-turva {
407
- fill: rgb(250, 164, 15) !important;
190
+ .duet-fill-data-06 {
191
+ fill: rgb(194, 21, 101) !important;
408
192
  }
409
193
  .duet-background-data-07 {
410
194
  background: rgb(192, 101, 247) !important;
@@ -451,15 +235,6 @@
451
235
  .duet-fill-data-11 {
452
236
  fill: rgb(13, 163, 166) !important;
453
237
  }
454
- .duet-background-data-01 {
455
- background: rgb(122, 1, 196) !important;
456
- }
457
- .duet-color-data-01 {
458
- color: rgb(122, 1, 196) !important;
459
- }
460
- .duet-fill-data-01 {
461
- fill: rgb(122, 1, 196) !important;
462
- }
463
238
  .duet-background-data-12 {
464
239
  background: rgb(11, 114, 136) !important;
465
240
  }
@@ -469,15 +244,6 @@
469
244
  .duet-fill-data-12 {
470
245
  fill: rgb(11, 114, 136) !important;
471
246
  }
472
- .duet-background-data-02 {
473
- background: rgb(0, 155, 204) !important;
474
- }
475
- .duet-color-data-02 {
476
- color: rgb(0, 155, 204) !important;
477
- }
478
- .duet-fill-data-02 {
479
- fill: rgb(0, 155, 204) !important;
480
- }
481
247
  .duet-background-data-13 {
482
248
  background: rgb(179, 137, 24) !important;
483
249
  }
@@ -487,15 +253,6 @@
487
253
  .duet-fill-data-13 {
488
254
  fill: rgb(179, 137, 24) !important;
489
255
  }
490
- .duet-background-data-03 {
491
- background: rgb(27, 171, 75) !important;
492
- }
493
- .duet-color-data-03 {
494
- color: rgb(27, 171, 75) !important;
495
- }
496
- .duet-fill-data-03 {
497
- fill: rgb(27, 171, 75) !important;
498
- }
499
256
  .duet-background-data-14 {
500
257
  background: rgb(128, 98, 17) !important;
501
258
  }
@@ -505,15 +262,6 @@
505
262
  .duet-fill-data-14 {
506
263
  fill: rgb(128, 98, 17) !important;
507
264
  }
508
- .duet-background-data-04 {
509
- background: rgb(255, 86, 34) !important;
510
- }
511
- .duet-color-data-04 {
512
- color: rgb(255, 86, 34) !important;
513
- }
514
- .duet-fill-data-04 {
515
- fill: rgb(255, 86, 34) !important;
516
- }
517
265
  .duet-background-data-15 {
518
266
  background: rgb(0, 41, 77) !important;
519
267
  }
@@ -523,62 +271,287 @@
523
271
  .duet-fill-data-15 {
524
272
  fill: rgb(0, 41, 77) !important;
525
273
  }
526
- .duet-background-data-05 {
527
- background: rgb(245, 76, 154) !important;
274
+ .duet-background-gray {
275
+ background: rgb(207, 210, 212) !important;
528
276
  }
529
- .duet-color-data-05 {
530
- color: rgb(245, 76, 154) !important;
277
+ .duet-color-gray {
278
+ color: rgb(207, 210, 212) !important;
531
279
  }
532
- .duet-fill-data-05 {
533
- fill: rgb(245, 76, 154) !important;
280
+ .duet-fill-gray {
281
+ fill: rgb(207, 210, 212) !important;
534
282
  }
535
- .duet-background-data-06 {
536
- background: rgb(194, 21, 101) !important;
283
+ .duet-background-gray-dark {
284
+ background: rgb(144, 149, 153) !important;
537
285
  }
538
- .duet-color-data-06 {
539
- color: rgb(194, 21, 101) !important;
286
+ .duet-color-gray-dark {
287
+ color: rgb(144, 149, 153) !important;
540
288
  }
541
- .duet-fill-data-06 {
542
- fill: rgb(194, 21, 101) !important;
289
+ .duet-fill-gray-dark {
290
+ fill: rgb(144, 149, 153) !important;
543
291
  }
544
- .duet-font-weight-extra-bold {
545
- font-weight: 800 !important;
292
+ .duet-background-gray-dark-turva {
293
+ background: rgb(116, 116, 117) !important;
546
294
  }
547
- .duet-letter-spacing-heading {
548
- letter-spacing: -0.01rem !important;
295
+ .duet-color-gray-dark-turva {
296
+ color: rgb(116, 116, 117) !important;
549
297
  }
550
- .duet-font-family-heading-turva {
551
- font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
298
+ .duet-fill-gray-dark-turva {
299
+ fill: rgb(116, 116, 117) !important;
552
300
  }
553
- .duet-font-family-text-turva {
554
- font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
301
+ .duet-background-gray-darker {
302
+ background: rgb(101, 119, 135) !important;
555
303
  }
556
- .duet-font-family-heading {
557
- font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
304
+ .duet-color-gray-darker {
305
+ color: rgb(101, 119, 135) !important;
558
306
  }
559
- .duet-font-family-text {
560
- font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
307
+ .duet-fill-gray-darker {
308
+ fill: rgb(101, 119, 135) !important;
561
309
  }
562
- .duet-font-weight-bold {
563
- font-weight: 700 !important;
310
+ .duet-background-gray-darker-turva {
311
+ background: rgb(68, 68, 69) !important;
564
312
  }
565
- .duet-font-weight-normal {
566
- font-weight: 400 !important;
313
+ .duet-color-gray-darker-turva {
314
+ color: rgb(68, 68, 69) !important;
567
315
  }
568
- .duet-font-weight-semi-bold {
569
- font-weight: 600 !important;
316
+ .duet-fill-gray-darker-turva {
317
+ fill: rgb(68, 68, 69) !important;
570
318
  }
571
- .duet-font-size-xxxx-large {
572
- font-size: 4.5rem !important;
319
+ .duet-background-gray-light {
320
+ background: rgb(225, 227, 230) !important;
573
321
  }
574
- .duet-font-size-xxx-large {
575
- font-size: 3rem !important;
322
+ .duet-color-gray-light {
323
+ color: rgb(225, 227, 230) !important;
576
324
  }
577
- .duet-font-size-xx-large {
578
- font-size: 2.25rem !important;
325
+ .duet-fill-gray-light {
326
+ fill: rgb(225, 227, 230) !important;
579
327
  }
580
- .duet-font-size-x-large {
581
- font-size: 1.5rem !important;
328
+ .duet-background-gray-light-turva {
329
+ background: rgb(228, 228, 230) !important;
330
+ }
331
+ .duet-color-gray-light-turva {
332
+ color: rgb(228, 228, 230) !important;
333
+ }
334
+ .duet-fill-gray-light-turva {
335
+ fill: rgb(228, 228, 230) !important;
336
+ }
337
+ .duet-background-gray-lighter {
338
+ background: rgb(245, 248, 250) !important;
339
+ }
340
+ .duet-color-gray-lighter {
341
+ color: rgb(245, 248, 250) !important;
342
+ }
343
+ .duet-fill-gray-lighter {
344
+ fill: rgb(245, 248, 250) !important;
345
+ }
346
+ .duet-background-gray-lighter-turva {
347
+ background: rgb(245, 245, 247) !important;
348
+ }
349
+ .duet-color-gray-lighter-turva {
350
+ color: rgb(245, 245, 247) !important;
351
+ }
352
+ .duet-fill-gray-lighter-turva {
353
+ fill: rgb(245, 245, 247) !important;
354
+ }
355
+ .duet-background-gray-lightest {
356
+ background: rgb(255, 255, 255) !important;
357
+ }
358
+ .duet-color-gray-lightest {
359
+ color: rgb(255, 255, 255) !important;
360
+ }
361
+ .duet-fill-gray-lightest {
362
+ fill: rgb(255, 255, 255) !important;
363
+ }
364
+ .duet-background-gray-lightest-turva {
365
+ background: rgb(255, 255, 255) !important;
366
+ }
367
+ .duet-color-gray-lightest-turva {
368
+ color: rgb(255, 255, 255) !important;
369
+ }
370
+ .duet-fill-gray-lightest-turva {
371
+ fill: rgb(255, 255, 255) !important;
372
+ }
373
+ .duet-background-gray-turva {
374
+ background: rgb(207, 207, 209) !important;
375
+ }
376
+ .duet-color-gray-turva {
377
+ color: rgb(207, 207, 209) !important;
378
+ }
379
+ .duet-fill-gray-turva {
380
+ fill: rgb(207, 207, 209) !important;
381
+ }
382
+ .duet-background-primary {
383
+ background: rgb(0, 119, 179) !important;
384
+ }
385
+ .duet-color-primary {
386
+ color: rgb(0, 119, 179) !important;
387
+ }
388
+ .duet-fill-primary {
389
+ fill: rgb(0, 119, 179) !important;
390
+ }
391
+ .duet-background-primary-dark {
392
+ background: rgb(0, 77, 128) !important;
393
+ }
394
+ .duet-color-primary-dark {
395
+ color: rgb(0, 77, 128) !important;
396
+ }
397
+ .duet-fill-primary-dark {
398
+ fill: rgb(0, 77, 128) !important;
399
+ }
400
+ .duet-background-primary-dark-turva {
401
+ background: rgb(148, 9, 37) !important;
402
+ }
403
+ .duet-color-primary-dark-turva {
404
+ color: rgb(148, 9, 37) !important;
405
+ }
406
+ .duet-fill-primary-dark-turva {
407
+ fill: rgb(148, 9, 37) !important;
408
+ }
409
+ .duet-background-primary-darker {
410
+ background: rgb(0, 98, 154) !important;
411
+ }
412
+ .duet-color-primary-darker {
413
+ color: rgb(0, 98, 154) !important;
414
+ }
415
+ .duet-fill-primary-darker {
416
+ fill: rgb(0, 98, 154) !important;
417
+ }
418
+ .duet-background-primary-darker-turva {
419
+ background: rgb(173, 11, 43) !important;
420
+ }
421
+ .duet-color-primary-darker-turva {
422
+ color: rgb(173, 11, 43) !important;
423
+ }
424
+ .duet-fill-primary-darker-turva {
425
+ fill: rgb(173, 11, 43) !important;
426
+ }
427
+ .duet-background-primary-light {
428
+ background: rgb(205, 229, 241) !important;
429
+ }
430
+ .duet-color-primary-light {
431
+ color: rgb(205, 229, 241) !important;
432
+ }
433
+ .duet-fill-primary-light {
434
+ fill: rgb(205, 229, 241) !important;
435
+ }
436
+ .duet-background-primary-light-turva {
437
+ background: rgb(244, 207, 214) !important;
438
+ }
439
+ .duet-color-primary-light-turva {
440
+ color: rgb(244, 207, 214) !important;
441
+ }
442
+ .duet-fill-primary-light-turva {
443
+ fill: rgb(244, 207, 214) !important;
444
+ }
445
+ .duet-background-primary-lighter {
446
+ background: rgb(230, 242, 248) !important;
447
+ }
448
+ .duet-color-primary-lighter {
449
+ color: rgb(230, 242, 248) !important;
450
+ }
451
+ .duet-fill-primary-lighter {
452
+ fill: rgb(230, 242, 248) !important;
453
+ }
454
+ .duet-background-primary-lighter-turva {
455
+ background: rgb(249, 230, 234) !important;
456
+ }
457
+ .duet-color-primary-lighter-turva {
458
+ color: rgb(249, 230, 234) !important;
459
+ }
460
+ .duet-fill-primary-lighter-turva {
461
+ fill: rgb(249, 230, 234) !important;
462
+ }
463
+ .duet-background-primary-lightest {
464
+ background: rgb(243, 249, 252) !important;
465
+ }
466
+ .duet-color-primary-lightest {
467
+ color: rgb(243, 249, 252) !important;
468
+ }
469
+ .duet-fill-primary-lightest {
470
+ fill: rgb(243, 249, 252) !important;
471
+ }
472
+ .duet-background-primary-lightest-turva {
473
+ background: rgb(252, 243, 244) !important;
474
+ }
475
+ .duet-color-primary-lightest-turva {
476
+ color: rgb(252, 243, 244) !important;
477
+ }
478
+ .duet-fill-primary-lightest-turva {
479
+ fill: rgb(252, 243, 244) !important;
480
+ }
481
+ .duet-background-primary-turva {
482
+ background: rgb(198, 12, 48) !important;
483
+ }
484
+ .duet-color-primary-turva {
485
+ color: rgb(198, 12, 48) !important;
486
+ }
487
+ .duet-fill-primary-turva {
488
+ fill: rgb(198, 12, 48) !important;
489
+ }
490
+ .duet-background-secondary {
491
+ background: rgb(0, 41, 77) !important;
492
+ }
493
+ .duet-color-secondary {
494
+ color: rgb(0, 41, 77) !important;
495
+ }
496
+ .duet-fill-secondary {
497
+ fill: rgb(0, 41, 77) !important;
498
+ }
499
+ .duet-background-secondary-turva {
500
+ background: rgb(23, 28, 58) !important;
501
+ }
502
+ .duet-color-secondary-turva {
503
+ color: rgb(23, 28, 58) !important;
504
+ }
505
+ .duet-fill-secondary-turva {
506
+ fill: rgb(23, 28, 58) !important;
507
+ }
508
+ .duet-background-success {
509
+ background: rgb(0, 135, 90) !important;
510
+ }
511
+ .duet-color-success {
512
+ color: rgb(0, 135, 90) !important;
513
+ }
514
+ .duet-fill-success {
515
+ fill: rgb(0, 135, 90) !important;
516
+ }
517
+ .duet-background-success-turva {
518
+ background: rgb(8, 135, 78) !important;
519
+ }
520
+ .duet-color-success-turva {
521
+ color: rgb(8, 135, 78) !important;
522
+ }
523
+ .duet-fill-success-turva {
524
+ fill: rgb(8, 135, 78) !important;
525
+ }
526
+ .duet-background-warning {
527
+ background: rgb(247, 178, 40) !important;
528
+ }
529
+ .duet-color-warning {
530
+ color: rgb(247, 178, 40) !important;
531
+ }
532
+ .duet-fill-warning {
533
+ fill: rgb(247, 178, 40) !important;
534
+ }
535
+ .duet-background-warning-turva {
536
+ background: rgb(250, 164, 15) !important;
537
+ }
538
+ .duet-color-warning-turva {
539
+ color: rgb(250, 164, 15) !important;
540
+ }
541
+ .duet-fill-warning-turva {
542
+ fill: rgb(250, 164, 15) !important;
543
+ }
544
+ .duet-font-family-heading {
545
+ font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
546
+ }
547
+ .duet-font-family-heading-turva {
548
+ font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
549
+ }
550
+ .duet-font-family-text {
551
+ font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
552
+ }
553
+ .duet-font-family-text-turva {
554
+ font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
582
555
  }
583
556
  .duet-font-size-large {
584
557
  font-size: 1.25rem !important;
@@ -589,126 +562,182 @@
589
562
  .duet-font-size-small {
590
563
  font-size: 0.875rem !important;
591
564
  }
565
+ .duet-font-size-x-large {
566
+ font-size: 1.5rem !important;
567
+ }
592
568
  .duet-font-size-x-small {
593
569
  font-size: 0.75rem !important;
594
570
  }
595
- .duet-radius-sharp {
596
- border-radius: 0 !important;
571
+ .duet-font-size-xx-large {
572
+ font-size: 2.25rem !important;
573
+ }
574
+ .duet-font-size-xxx-large {
575
+ font-size: 3rem !important;
576
+ }
577
+ .duet-font-size-xxxx-large {
578
+ font-size: 4.5rem !important;
579
+ }
580
+ .duet-font-weight-bold {
581
+ font-weight: 700 !important;
582
+ }
583
+ .duet-font-weight-extra-bold {
584
+ font-weight: 800 !important;
585
+ }
586
+ .duet-font-weight-normal {
587
+ font-weight: 400 !important;
588
+ }
589
+ .duet-font-weight-semi-bold {
590
+ font-weight: 600 !important;
591
+ }
592
+ .duet-letter-spacing-heading {
593
+ letter-spacing: -0.01rem !important;
594
+ }
595
+ .duet-line-height-medium {
596
+ line-height: 1.5 !important;
597
+ }
598
+ .duet-line-height-small {
599
+ line-height: 1.25 !important;
600
+ }
601
+ .duet-line-height-x-small {
602
+ line-height: 1.1 !important;
603
+ }
604
+ .duet-opacity-30 {
605
+ opacity: 0.3 !important;
606
+ }
607
+ .duet-opacity-50 {
608
+ opacity: 0.5 !important;
609
+ }
610
+ .duet-opacity-75 {
611
+ opacity: 0.75 !important;
612
+ }
613
+ .duet-opacity-85 {
614
+ opacity: 0.85 !important;
615
+ }
616
+ .duet-radius-circle {
617
+ border-radius: 50% !important;
597
618
  }
598
619
  .duet-radius-default {
599
620
  border-radius: 4px !important;
600
621
  }
601
- .duet-radius-medium {
602
- border-radius: 8px !important;
603
- }
604
622
  .duet-radius-intermediate {
605
623
  border-radius: 12px !important;
606
624
  }
607
625
  .duet-radius-large {
608
626
  border-radius: 16px !important;
609
627
  }
610
- .duet-radius-circle {
611
- border-radius: 50% !important;
628
+ .duet-radius-medium {
629
+ border-radius: 8px !important;
612
630
  }
613
631
  .duet-radius-pill {
614
632
  border-radius: 20rem !important;
615
633
  }
616
- .duet-shadow-tooltip-turva {
617
- box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13) !important;
618
- }
619
- .duet-shadow-focus-input-turva {
620
- box-shadow: 0 0 0 1px #171c3a !important;
621
- }
622
- .duet-shadow-default {
623
- box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07) !important;
624
- }
625
- .duet-shadow-focus-input {
626
- box-shadow: 0 0 0 1px #0077b3 !important;
634
+ .duet-radius-sharp {
635
+ border-radius: 0 !important;
627
636
  }
628
- .duet-shadow-tooltip {
629
- box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07) !important;
637
+ .duet-shadow-card {
638
+ box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07) !important;
630
639
  }
631
- .duet-shadow-hover-input-turva {
632
- box-shadow: 0 0 0 1px #747475 !important;
640
+ .duet-shadow-card-turva {
641
+ box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07) !important;
633
642
  }
634
- .duet-shadow-error-turva {
635
- box-shadow: 0 0 0 1px #e55039 !important;
643
+ .duet-shadow-default {
644
+ box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07) !important;
636
645
  }
637
- .duet-shadow-hover-input {
638
- box-shadow: 0 0 0 1px #909599 !important;
646
+ .duet-shadow-default-turva {
647
+ box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13) !important;
639
648
  }
640
649
  .duet-shadow-error {
641
650
  box-shadow: 0 0 0 1px #de2362 !important;
642
651
  }
643
- .duet-shadow-card-turva {
644
- box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07) !important;
652
+ .duet-shadow-error-turva {
653
+ box-shadow: 0 0 0 1px #e55039 !important;
645
654
  }
646
- .duet-shadow-modal {
647
- box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2) !important;
655
+ .duet-shadow-focus {
656
+ box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
648
657
  }
649
- .duet-shadow-card {
650
- box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07) !important;
658
+ .duet-shadow-focus-input {
659
+ box-shadow: 0 0 0 1px #0077b3 !important;
660
+ }
661
+ .duet-shadow-focus-input-turva {
662
+ box-shadow: 0 0 0 1px #171c3a !important;
651
663
  }
652
664
  .duet-shadow-focus-turva {
653
665
  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
654
666
  }
655
- .duet-shadow-focus {
656
- box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
667
+ .duet-shadow-hover {
668
+ box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.1) !important;
669
+ }
670
+ .duet-shadow-hover-input {
671
+ box-shadow: 0 0 0 1px #909599 !important;
672
+ }
673
+ .duet-shadow-hover-input-turva {
674
+ box-shadow: 0 0 0 1px #747475 !important;
657
675
  }
658
676
  .duet-shadow-hover-turva {
659
677
  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.15) !important;
660
678
  }
661
- .duet-shadow-hover {
662
- box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.1) !important;
679
+ .duet-shadow-modal {
680
+ box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2) !important;
663
681
  }
664
- .duet-shadow-default-turva {
665
- box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13) !important;
682
+ .duet-shadow-tooltip {
683
+ box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07) !important;
666
684
  }
667
- .duet-mt-xx-small {
668
- margin-top: 4px !important;
685
+ .duet-shadow-tooltip-turva {
686
+ box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13) !important;
669
687
  }
670
- .duet-mb-xx-small {
671
- margin-bottom: 4px !important;
688
+ .duet-size-button-min-width {
689
+ min-width: 8rem !important;
672
690
  }
673
- .duet-ml-xx-small {
674
- margin-left: 4px !important;
691
+ .duet-size-form-border {
692
+ border-width: 1px !important;
675
693
  }
676
- .duet-mr-xx-small {
677
- margin-right: 4px !important;
694
+ .duet-size-icon-large {
695
+ width: 30px !important;
696
+ height: 30px !important;
678
697
  }
679
- .duet-mx-xx-small {
680
- margin-right: 4px !important;
681
- margin-left: 4px !important;
698
+ .duet-size-icon-medium {
699
+ width: 24px !important;
700
+ height: 24px !important;
682
701
  }
683
- .duet-my-xx-small {
684
- margin-top: 4px !important;
685
- margin-bottom: 4px !important;
702
+ .duet-size-icon-small {
703
+ width: 20px !important;
704
+ height: 20px !important;
686
705
  }
687
- .duet-m-xx-small {
688
- margin: 4px !important;
706
+ .duet-size-icon-x-large {
707
+ width: 36px !important;
708
+ height: 36px !important;
689
709
  }
690
- .duet-pt-xx-small {
691
- padding-top: 4px !important;
710
+ .duet-size-icon-x-small {
711
+ width: 16px !important;
712
+ height: 16px !important;
692
713
  }
693
- .duet-pb-xx-small {
694
- padding-bottom: 4px !important;
714
+ .duet-size-icon-xx-large {
715
+ width: 48px !important;
716
+ height: 48px !important;
695
717
  }
696
- .duet-pl-xx-small {
697
- padding-left: 4px !important;
718
+ .duet-size-icon-xx-small {
719
+ width: 10px !important;
720
+ height: 10px !important;
698
721
  }
699
- .duet-pr-xx-small {
700
- padding-right: 4px !important;
722
+ .duet-size-icon-xxx-large {
723
+ width: 72px !important;
724
+ height: 72px !important;
701
725
  }
702
- .duet-px-xx-small {
703
- padding-right: 4px !important;
704
- padding-left: 4px !important;
726
+ .duet-size-icon-xxx-small {
727
+ width: 7px !important;
728
+ height: 7px !important;
705
729
  }
706
- .duet-py-xx-small {
707
- padding-top: 4px !important;
708
- padding-bottom: 4px !important;
730
+ .duet-size-step-medium {
731
+ width: 40px !important;
732
+ height: 40px !important;
709
733
  }
710
- .duet-p-xx-small {
711
- padding: 4px !important;
734
+ .duet-size-step-small {
735
+ width: 30px !important;
736
+ height: 30px !important;
737
+ }
738
+ .duet-size-tappable-square {
739
+ width: 48px !important;
740
+ height: 48px !important;
712
741
  }
713
742
  .duet-mt-large {
714
743
  margin-top: 20px !important;
@@ -730,31 +759,169 @@
730
759
  margin-top: 20px !important;
731
760
  margin-bottom: 20px !important;
732
761
  }
733
- .duet-m-large {
734
- margin: 20px !important;
762
+ .duet-m-large {
763
+ margin: 20px !important;
764
+ }
765
+ .duet-pt-large {
766
+ padding-top: 20px !important;
767
+ }
768
+ .duet-pb-large {
769
+ padding-bottom: 20px !important;
770
+ }
771
+ .duet-pl-large {
772
+ padding-left: 20px !important;
773
+ }
774
+ .duet-pr-large {
775
+ padding-right: 20px !important;
776
+ }
777
+ .duet-px-large {
778
+ padding-right: 20px !important;
779
+ padding-left: 20px !important;
780
+ }
781
+ .duet-py-large {
782
+ padding-top: 20px !important;
783
+ padding-bottom: 20px !important;
784
+ }
785
+ .duet-p-large {
786
+ padding: 20px !important;
787
+ }
788
+ .duet-mt-medium {
789
+ margin-top: 16px !important;
790
+ }
791
+ .duet-mb-medium {
792
+ margin-bottom: 16px !important;
793
+ }
794
+ .duet-ml-medium {
795
+ margin-left: 16px !important;
796
+ }
797
+ .duet-mr-medium {
798
+ margin-right: 16px !important;
799
+ }
800
+ .duet-mx-medium {
801
+ margin-right: 16px !important;
802
+ margin-left: 16px !important;
803
+ }
804
+ .duet-my-medium {
805
+ margin-top: 16px !important;
806
+ margin-bottom: 16px !important;
807
+ }
808
+ .duet-m-medium {
809
+ margin: 16px !important;
810
+ }
811
+ .duet-pt-medium {
812
+ padding-top: 16px !important;
813
+ }
814
+ .duet-pb-medium {
815
+ padding-bottom: 16px !important;
816
+ }
817
+ .duet-pl-medium {
818
+ padding-left: 16px !important;
819
+ }
820
+ .duet-pr-medium {
821
+ padding-right: 16px !important;
822
+ }
823
+ .duet-px-medium {
824
+ padding-right: 16px !important;
825
+ padding-left: 16px !important;
826
+ }
827
+ .duet-py-medium {
828
+ padding-top: 16px !important;
829
+ padding-bottom: 16px !important;
830
+ }
831
+ .duet-p-medium {
832
+ padding: 16px !important;
833
+ }
834
+ .duet-mt-small {
835
+ margin-top: 12px !important;
836
+ }
837
+ .duet-mb-small {
838
+ margin-bottom: 12px !important;
839
+ }
840
+ .duet-ml-small {
841
+ margin-left: 12px !important;
842
+ }
843
+ .duet-mr-small {
844
+ margin-right: 12px !important;
845
+ }
846
+ .duet-mx-small {
847
+ margin-right: 12px !important;
848
+ margin-left: 12px !important;
849
+ }
850
+ .duet-my-small {
851
+ margin-top: 12px !important;
852
+ margin-bottom: 12px !important;
853
+ }
854
+ .duet-m-small {
855
+ margin: 12px !important;
856
+ }
857
+ .duet-pt-small {
858
+ padding-top: 12px !important;
859
+ }
860
+ .duet-pb-small {
861
+ padding-bottom: 12px !important;
862
+ }
863
+ .duet-pl-small {
864
+ padding-left: 12px !important;
865
+ }
866
+ .duet-pr-small {
867
+ padding-right: 12px !important;
868
+ }
869
+ .duet-px-small {
870
+ padding-right: 12px !important;
871
+ padding-left: 12px !important;
872
+ }
873
+ .duet-py-small {
874
+ padding-top: 12px !important;
875
+ padding-bottom: 12px !important;
876
+ }
877
+ .duet-p-small {
878
+ padding: 12px !important;
879
+ }
880
+ .duet-mt-x-large {
881
+ margin-top: 28px !important;
882
+ }
883
+ .duet-mb-x-large {
884
+ margin-bottom: 28px !important;
885
+ }
886
+ .duet-ml-x-large {
887
+ margin-left: 28px !important;
888
+ }
889
+ .duet-mr-x-large {
890
+ margin-right: 28px !important;
891
+ }
892
+ .duet-mx-x-large {
893
+ margin-right: 28px !important;
894
+ margin-left: 28px !important;
895
+ }
896
+ .duet-my-x-large {
897
+ margin-top: 28px !important;
898
+ margin-bottom: 28px !important;
899
+ }
900
+ .duet-m-x-large {
901
+ margin: 28px !important;
735
902
  }
736
- .duet-pt-large {
737
- padding-top: 20px !important;
903
+ .duet-pt-x-large {
904
+ padding-top: 28px !important;
738
905
  }
739
- .duet-pb-large {
740
- padding-bottom: 20px !important;
906
+ .duet-pb-x-large {
907
+ padding-bottom: 28px !important;
741
908
  }
742
- .duet-pl-large {
743
- padding-left: 20px !important;
909
+ .duet-pl-x-large {
910
+ padding-left: 28px !important;
744
911
  }
745
- .duet-pr-large {
746
- padding-right: 20px !important;
912
+ .duet-pr-x-large {
913
+ padding-right: 28px !important;
747
914
  }
748
- .duet-px-large {
749
- padding-right: 20px !important;
750
- padding-left: 20px !important;
915
+ .duet-px-x-large {
916
+ padding-right: 28px !important;
917
+ padding-left: 28px !important;
751
918
  }
752
- .duet-py-large {
753
- padding-top: 20px !important;
754
- padding-bottom: 20px !important;
919
+ .duet-py-x-large {
920
+ padding-top: 28px !important;
921
+ padding-bottom: 28px !important;
755
922
  }
756
- .duet-p-large {
757
- padding: 20px !important;
923
+ .duet-p-x-large {
924
+ padding: 28px !important;
758
925
  }
759
926
  .duet-mt-x-small {
760
927
  margin-top: 8px !important;
@@ -802,189 +969,189 @@
802
969
  .duet-p-x-small {
803
970
  padding: 8px !important;
804
971
  }
805
- .duet-mt-xxx-small {
806
- margin-top: 2px !important;
807
- }
808
- .duet-mb-xxx-small {
809
- margin-bottom: 2px !important;
972
+ .duet-mt-xx-large {
973
+ margin-top: 36px !important;
810
974
  }
811
- .duet-ml-xxx-small {
812
- margin-left: 2px !important;
975
+ .duet-mb-xx-large {
976
+ margin-bottom: 36px !important;
813
977
  }
814
- .duet-mr-xxx-small {
815
- margin-right: 2px !important;
978
+ .duet-ml-xx-large {
979
+ margin-left: 36px !important;
816
980
  }
817
- .duet-mx-xxx-small {
818
- margin-right: 2px !important;
819
- margin-left: 2px !important;
981
+ .duet-mr-xx-large {
982
+ margin-right: 36px !important;
820
983
  }
821
- .duet-my-xxx-small {
822
- margin-top: 2px !important;
823
- margin-bottom: 2px !important;
984
+ .duet-mx-xx-large {
985
+ margin-right: 36px !important;
986
+ margin-left: 36px !important;
824
987
  }
825
- .duet-m-xxx-small {
826
- margin: 2px !important;
988
+ .duet-my-xx-large {
989
+ margin-top: 36px !important;
990
+ margin-bottom: 36px !important;
827
991
  }
828
- .duet-pt-xxx-small {
829
- padding-top: 2px !important;
992
+ .duet-m-xx-large {
993
+ margin: 36px !important;
830
994
  }
831
- .duet-pb-xxx-small {
832
- padding-bottom: 2px !important;
995
+ .duet-pt-xx-large {
996
+ padding-top: 36px !important;
833
997
  }
834
- .duet-pl-xxx-small {
835
- padding-left: 2px !important;
998
+ .duet-pb-xx-large {
999
+ padding-bottom: 36px !important;
836
1000
  }
837
- .duet-pr-xxx-small {
838
- padding-right: 2px !important;
1001
+ .duet-pl-xx-large {
1002
+ padding-left: 36px !important;
839
1003
  }
840
- .duet-px-xxx-small {
841
- padding-right: 2px !important;
842
- padding-left: 2px !important;
1004
+ .duet-pr-xx-large {
1005
+ padding-right: 36px !important;
843
1006
  }
844
- .duet-py-xxx-small {
845
- padding-top: 2px !important;
846
- padding-bottom: 2px !important;
1007
+ .duet-px-xx-large {
1008
+ padding-right: 36px !important;
1009
+ padding-left: 36px !important;
847
1010
  }
848
- .duet-p-xxx-small {
849
- padding: 2px !important;
1011
+ .duet-py-xx-large {
1012
+ padding-top: 36px !important;
1013
+ padding-bottom: 36px !important;
850
1014
  }
851
- .duet-mt-small {
852
- margin-top: 12px !important;
1015
+ .duet-p-xx-large {
1016
+ padding: 36px !important;
853
1017
  }
854
- .duet-mb-small {
855
- margin-bottom: 12px !important;
1018
+ .duet-mt-xx-small {
1019
+ margin-top: 4px !important;
856
1020
  }
857
- .duet-ml-small {
858
- margin-left: 12px !important;
1021
+ .duet-mb-xx-small {
1022
+ margin-bottom: 4px !important;
859
1023
  }
860
- .duet-mr-small {
861
- margin-right: 12px !important;
1024
+ .duet-ml-xx-small {
1025
+ margin-left: 4px !important;
862
1026
  }
863
- .duet-mx-small {
864
- margin-right: 12px !important;
865
- margin-left: 12px !important;
1027
+ .duet-mr-xx-small {
1028
+ margin-right: 4px !important;
866
1029
  }
867
- .duet-my-small {
868
- margin-top: 12px !important;
869
- margin-bottom: 12px !important;
1030
+ .duet-mx-xx-small {
1031
+ margin-right: 4px !important;
1032
+ margin-left: 4px !important;
870
1033
  }
871
- .duet-m-small {
872
- margin: 12px !important;
1034
+ .duet-my-xx-small {
1035
+ margin-top: 4px !important;
1036
+ margin-bottom: 4px !important;
873
1037
  }
874
- .duet-pt-small {
875
- padding-top: 12px !important;
1038
+ .duet-m-xx-small {
1039
+ margin: 4px !important;
876
1040
  }
877
- .duet-pb-small {
878
- padding-bottom: 12px !important;
1041
+ .duet-pt-xx-small {
1042
+ padding-top: 4px !important;
879
1043
  }
880
- .duet-pl-small {
881
- padding-left: 12px !important;
1044
+ .duet-pb-xx-small {
1045
+ padding-bottom: 4px !important;
882
1046
  }
883
- .duet-pr-small {
884
- padding-right: 12px !important;
1047
+ .duet-pl-xx-small {
1048
+ padding-left: 4px !important;
885
1049
  }
886
- .duet-px-small {
887
- padding-right: 12px !important;
888
- padding-left: 12px !important;
1050
+ .duet-pr-xx-small {
1051
+ padding-right: 4px !important;
889
1052
  }
890
- .duet-py-small {
891
- padding-top: 12px !important;
892
- padding-bottom: 12px !important;
1053
+ .duet-px-xx-small {
1054
+ padding-right: 4px !important;
1055
+ padding-left: 4px !important;
893
1056
  }
894
- .duet-p-small {
895
- padding: 12px !important;
1057
+ .duet-py-xx-small {
1058
+ padding-top: 4px !important;
1059
+ padding-bottom: 4px !important;
896
1060
  }
897
- .duet-mt-medium {
898
- margin-top: 16px !important;
1061
+ .duet-p-xx-small {
1062
+ padding: 4px !important;
899
1063
  }
900
- .duet-mb-medium {
901
- margin-bottom: 16px !important;
1064
+ .duet-mt-xxx-large {
1065
+ margin-top: 48px !important;
902
1066
  }
903
- .duet-ml-medium {
904
- margin-left: 16px !important;
1067
+ .duet-mb-xxx-large {
1068
+ margin-bottom: 48px !important;
905
1069
  }
906
- .duet-mr-medium {
907
- margin-right: 16px !important;
1070
+ .duet-ml-xxx-large {
1071
+ margin-left: 48px !important;
908
1072
  }
909
- .duet-mx-medium {
910
- margin-right: 16px !important;
911
- margin-left: 16px !important;
1073
+ .duet-mr-xxx-large {
1074
+ margin-right: 48px !important;
912
1075
  }
913
- .duet-my-medium {
914
- margin-top: 16px !important;
915
- margin-bottom: 16px !important;
1076
+ .duet-mx-xxx-large {
1077
+ margin-right: 48px !important;
1078
+ margin-left: 48px !important;
916
1079
  }
917
- .duet-m-medium {
918
- margin: 16px !important;
1080
+ .duet-my-xxx-large {
1081
+ margin-top: 48px !important;
1082
+ margin-bottom: 48px !important;
919
1083
  }
920
- .duet-pt-medium {
921
- padding-top: 16px !important;
1084
+ .duet-m-xxx-large {
1085
+ margin: 48px !important;
922
1086
  }
923
- .duet-pb-medium {
924
- padding-bottom: 16px !important;
1087
+ .duet-pt-xxx-large {
1088
+ padding-top: 48px !important;
925
1089
  }
926
- .duet-pl-medium {
927
- padding-left: 16px !important;
1090
+ .duet-pb-xxx-large {
1091
+ padding-bottom: 48px !important;
928
1092
  }
929
- .duet-pr-medium {
930
- padding-right: 16px !important;
1093
+ .duet-pl-xxx-large {
1094
+ padding-left: 48px !important;
931
1095
  }
932
- .duet-px-medium {
933
- padding-right: 16px !important;
934
- padding-left: 16px !important;
1096
+ .duet-pr-xxx-large {
1097
+ padding-right: 48px !important;
935
1098
  }
936
- .duet-py-medium {
937
- padding-top: 16px !important;
938
- padding-bottom: 16px !important;
1099
+ .duet-px-xxx-large {
1100
+ padding-right: 48px !important;
1101
+ padding-left: 48px !important;
939
1102
  }
940
- .duet-p-medium {
941
- padding: 16px !important;
1103
+ .duet-py-xxx-large {
1104
+ padding-top: 48px !important;
1105
+ padding-bottom: 48px !important;
942
1106
  }
943
- .duet-mt-xx-large {
944
- margin-top: 36px !important;
1107
+ .duet-p-xxx-large {
1108
+ padding: 48px !important;
945
1109
  }
946
- .duet-mb-xx-large {
947
- margin-bottom: 36px !important;
1110
+ .duet-mt-xxx-small {
1111
+ margin-top: 2px !important;
948
1112
  }
949
- .duet-ml-xx-large {
950
- margin-left: 36px !important;
1113
+ .duet-mb-xxx-small {
1114
+ margin-bottom: 2px !important;
951
1115
  }
952
- .duet-mr-xx-large {
953
- margin-right: 36px !important;
1116
+ .duet-ml-xxx-small {
1117
+ margin-left: 2px !important;
954
1118
  }
955
- .duet-mx-xx-large {
956
- margin-right: 36px !important;
957
- margin-left: 36px !important;
1119
+ .duet-mr-xxx-small {
1120
+ margin-right: 2px !important;
958
1121
  }
959
- .duet-my-xx-large {
960
- margin-top: 36px !important;
961
- margin-bottom: 36px !important;
1122
+ .duet-mx-xxx-small {
1123
+ margin-right: 2px !important;
1124
+ margin-left: 2px !important;
962
1125
  }
963
- .duet-m-xx-large {
964
- margin: 36px !important;
1126
+ .duet-my-xxx-small {
1127
+ margin-top: 2px !important;
1128
+ margin-bottom: 2px !important;
965
1129
  }
966
- .duet-pt-xx-large {
967
- padding-top: 36px !important;
1130
+ .duet-m-xxx-small {
1131
+ margin: 2px !important;
968
1132
  }
969
- .duet-pb-xx-large {
970
- padding-bottom: 36px !important;
1133
+ .duet-pt-xxx-small {
1134
+ padding-top: 2px !important;
971
1135
  }
972
- .duet-pl-xx-large {
973
- padding-left: 36px !important;
1136
+ .duet-pb-xxx-small {
1137
+ padding-bottom: 2px !important;
974
1138
  }
975
- .duet-pr-xx-large {
976
- padding-right: 36px !important;
1139
+ .duet-pl-xxx-small {
1140
+ padding-left: 2px !important;
977
1141
  }
978
- .duet-px-xx-large {
979
- padding-right: 36px !important;
980
- padding-left: 36px !important;
1142
+ .duet-pr-xxx-small {
1143
+ padding-right: 2px !important;
981
1144
  }
982
- .duet-py-xx-large {
983
- padding-top: 36px !important;
984
- padding-bottom: 36px !important;
1145
+ .duet-px-xxx-small {
1146
+ padding-right: 2px !important;
1147
+ padding-left: 2px !important;
985
1148
  }
986
- .duet-p-xx-large {
987
- padding: 36px !important;
1149
+ .duet-py-xxx-small {
1150
+ padding-top: 2px !important;
1151
+ padding-bottom: 2px !important;
1152
+ }
1153
+ .duet-p-xxx-small {
1154
+ padding: 2px !important;
988
1155
  }
989
1156
  .duet-mt-xxxx-large {
990
1157
  margin-top: 72px !important;
@@ -1078,218 +1245,52 @@
1078
1245
  .duet-p-xxxxx-large {
1079
1246
  padding: 94px !important;
1080
1247
  }
1081
- .duet-mt-xxx-large {
1082
- margin-top: 48px !important;
1083
- }
1084
- .duet-mb-xxx-large {
1085
- margin-bottom: 48px !important;
1086
- }
1087
- .duet-ml-xxx-large {
1088
- margin-left: 48px !important;
1089
- }
1090
- .duet-mr-xxx-large {
1091
- margin-right: 48px !important;
1092
- }
1093
- .duet-mx-xxx-large {
1094
- margin-right: 48px !important;
1095
- margin-left: 48px !important;
1096
- }
1097
- .duet-my-xxx-large {
1098
- margin-top: 48px !important;
1099
- margin-bottom: 48px !important;
1100
- }
1101
- .duet-m-xxx-large {
1102
- margin: 48px !important;
1103
- }
1104
- .duet-pt-xxx-large {
1105
- padding-top: 48px !important;
1106
- }
1107
- .duet-pb-xxx-large {
1108
- padding-bottom: 48px !important;
1109
- }
1110
- .duet-pl-xxx-large {
1111
- padding-left: 48px !important;
1112
- }
1113
- .duet-pr-xxx-large {
1114
- padding-right: 48px !important;
1115
- }
1116
- .duet-px-xxx-large {
1117
- padding-right: 48px !important;
1118
- padding-left: 48px !important;
1119
- }
1120
- .duet-py-xxx-large {
1121
- padding-top: 48px !important;
1122
- padding-bottom: 48px !important;
1123
- }
1124
- .duet-p-xxx-large {
1125
- padding: 48px !important;
1126
- }
1127
- .duet-mt-x-large {
1128
- margin-top: 28px !important;
1129
- }
1130
- .duet-mb-x-large {
1131
- margin-bottom: 28px !important;
1132
- }
1133
- .duet-ml-x-large {
1134
- margin-left: 28px !important;
1135
- }
1136
- .duet-mr-x-large {
1137
- margin-right: 28px !important;
1138
- }
1139
- .duet-mx-x-large {
1140
- margin-right: 28px !important;
1141
- margin-left: 28px !important;
1142
- }
1143
- .duet-my-x-large {
1144
- margin-top: 28px !important;
1145
- margin-bottom: 28px !important;
1146
- }
1147
- .duet-m-x-large {
1148
- margin: 28px !important;
1149
- }
1150
- .duet-pt-x-large {
1151
- padding-top: 28px !important;
1152
- }
1153
- .duet-pb-x-large {
1154
- padding-bottom: 28px !important;
1155
- }
1156
- .duet-pl-x-large {
1157
- padding-left: 28px !important;
1158
- }
1159
- .duet-pr-x-large {
1160
- padding-right: 28px !important;
1161
- }
1162
- .duet-px-x-large {
1163
- padding-right: 28px !important;
1164
- padding-left: 28px !important;
1165
- }
1166
- .duet-py-x-large {
1167
- padding-top: 28px !important;
1168
- padding-bottom: 28px !important;
1169
- }
1170
- .duet-p-x-large {
1171
- padding: 28px !important;
1172
- }
1173
- .duet-size-icon-xx-large {
1174
- width: 48px !important;
1175
- height: 48px !important;
1176
- }
1177
- .duet-size-form-border {
1178
- border-width: 1px !important;
1179
- }
1180
- .duet-size-step-medium {
1181
- width: 40px !important;
1182
- height: 40px !important;
1183
- }
1184
- .duet-size-button-min-width {
1185
- min-width: 8rem !important;
1186
- }
1187
- .duet-size-icon-xxx-large {
1188
- width: 72px !important;
1189
- height: 72px !important;
1190
- }
1191
- .duet-size-icon-x-large {
1192
- width: 36px !important;
1193
- height: 36px !important;
1194
- }
1195
- .duet-size-icon-xx-small {
1196
- width: 10px !important;
1197
- height: 10px !important;
1198
- }
1199
- .duet-size-step-small {
1200
- width: 30px !important;
1201
- height: 30px !important;
1202
- }
1203
- .duet-size-icon-large {
1204
- width: 30px !important;
1205
- height: 30px !important;
1206
- }
1207
- .duet-size-tappable-square {
1208
- width: 48px !important;
1209
- height: 48px !important;
1210
- }
1211
- .duet-size-icon-x-small {
1212
- width: 16px !important;
1213
- height: 16px !important;
1214
- }
1215
- .duet-size-icon-xxx-small {
1216
- width: 7px !important;
1217
- height: 7px !important;
1218
- }
1219
- .duet-size-icon-medium {
1220
- width: 24px !important;
1221
- height: 24px !important;
1222
- }
1223
- .duet-size-icon-small {
1224
- width: 20px !important;
1225
- height: 20px !important;
1226
- }
1227
- .duet-opacity-85 {
1228
- opacity: 0.85 !important;
1229
- }
1230
- .duet-opacity-75 {
1231
- opacity: 0.75 !important;
1232
- }
1233
- .duet-opacity-50 {
1234
- opacity: 0.5 !important;
1235
- }
1236
- .duet-opacity-30 {
1237
- opacity: 0.3 !important;
1238
- }
1239
- .duet-z-index-mask-buttons {
1240
- z-index: 250 !important;
1248
+ .duet-transition-quickly {
1249
+ transition: all 300ms ease !important;
1241
1250
  }
1242
- .duet-z-index-dropdown {
1243
- z-index: 600 !important;
1251
+ .duet-transition-slowly {
1252
+ transition: all 600ms ease !important;
1244
1253
  }
1245
- .duet-z-index-spinner {
1246
- z-index: 800 !important;
1254
+ .duet-z-index-deep {
1255
+ z-index: -999999 !important;
1247
1256
  }
1248
1257
  .duet-z-index-default {
1249
1258
  z-index: 1 !important;
1250
1259
  }
1251
- .duet-z-index-toast {
1252
- z-index: 500 !important;
1260
+ .duet-z-index-dropdown {
1261
+ z-index: 600 !important;
1253
1262
  }
1254
- .duet-z-index-popup {
1255
- z-index: 950 !important;
1263
+ .duet-z-index-header {
1264
+ z-index: 400 !important;
1256
1265
  }
1257
- .duet-z-index-modal {
1258
- z-index: 900 !important;
1266
+ .duet-z-index-mask {
1267
+ z-index: 200 !important;
1259
1268
  }
1260
- .duet-z-index-sticky {
1261
- z-index: 300 !important;
1269
+ .duet-z-index-mask-buttons {
1270
+ z-index: 250 !important;
1262
1271
  }
1263
1272
  .duet-z-index-masked {
1264
1273
  z-index: 100 !important;
1265
1274
  }
1266
- .duet-z-index-deep {
1267
- z-index: -999999 !important;
1275
+ .duet-z-index-modal {
1276
+ z-index: 900 !important;
1268
1277
  }
1269
1278
  .duet-z-index-overlay {
1270
1279
  z-index: 700 !important;
1271
1280
  }
1272
- .duet-z-index-mask {
1273
- z-index: 200 !important;
1274
- }
1275
- .duet-z-index-header {
1276
- z-index: 400 !important;
1277
- }
1278
- .duet-line-height-medium {
1279
- line-height: 1.5 !important;
1280
- }
1281
- .duet-line-height-small {
1282
- line-height: 1.25 !important;
1281
+ .duet-z-index-popup {
1282
+ z-index: 950 !important;
1283
1283
  }
1284
- .duet-line-height-x-small {
1285
- line-height: 1.1 !important;
1284
+ .duet-z-index-spinner {
1285
+ z-index: 800 !important;
1286
1286
  }
1287
- .duet-transition-quickly {
1288
- transition: all 300ms ease !important;
1287
+ .duet-z-index-sticky {
1288
+ z-index: 300 !important;
1289
1289
  }
1290
- .duet-transition-slowly {
1291
- transition: all 600ms ease !important;
1290
+ .duet-z-index-toast {
1291
+ z-index: 500 !important;
1292
1292
  }
1293
+
1293
1294
  *,
1294
1295
  *::after,
1295
1296
  *::before {