jekyll-theme-conscious-sedation 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,593 @@
1
+ .button {
2
+ background-color: var(--color-blue);
3
+ color: var(--color-powder);
4
+ }
5
+
6
+ .button:hover,
7
+ .button:focus {
8
+ background-color: var(--color-darker-blue);
9
+ color: var(--color-powder);
10
+ }
11
+
12
+ .button.primary {
13
+ background-color: var(--color-blue);
14
+ color: var(--color-powder);
15
+ }
16
+
17
+ .button.primary:hover,
18
+ .button.primary:focus {
19
+ background-color: var(--color-darker-blue);
20
+ color: var(--color-powder);
21
+ }
22
+
23
+ .button.secondary {
24
+ background-color: var(--color-dark-grey);
25
+ color: var(--color-powder);
26
+ }
27
+
28
+ .button.secondary:hover,
29
+ .button.secondary:focus {
30
+ background-color: var(--color-darker-grey);
31
+ color: var(--color-powder);
32
+ }
33
+
34
+ .button.alert {
35
+ background-color: var(--color-ruby);
36
+ color: var(--color-powder);
37
+ }
38
+
39
+ .button.alert:hover,
40
+ .button.alert:focus {
41
+ background-color: var(--color-darker-ruby);
42
+ color: var(--color-powder);
43
+ }
44
+
45
+ .button.success {
46
+ background-color: var(--color-green);
47
+ color: var(--color-powder);
48
+ }
49
+
50
+ .button.success:hover,
51
+ .button.success:focus {
52
+ background-color: var(--color-dark-green);
53
+ color: var(--color-powder);
54
+ }
55
+
56
+ .button.warning {
57
+ background-color: var(--color-orange);
58
+ color: var(--color-powder);
59
+ }
60
+
61
+ .button.warning:hover,
62
+ .button.warning:focus {
63
+ background-color: var(--color-dark-orange);
64
+ color: var(--color-powder);
65
+ }
66
+
67
+ .button.body-font {
68
+ background-color: var(--color-font);
69
+ color: var(--color-powder);
70
+ }
71
+
72
+ .button.body-font:hover,
73
+ .button.body-font:focus {
74
+ background-color: var(--color-dark-font);
75
+ color: var(--color-powder);
76
+ }
77
+
78
+ .button.header {
79
+ background-color: var(--color-font);
80
+ color: var(--color-powder);
81
+ }
82
+
83
+ .button.header:hover,
84
+ .button.header:focus {
85
+ background-color: var(--color-dark-font);
86
+ color: var(--color-powder);
87
+ }
88
+
89
+ .button.disabled,
90
+ .button.disabled:hover,
91
+ .button.disabled:focus,
92
+ .button[disabled],
93
+ .button[disabled]:hover,
94
+ .button[disabled]:focus {
95
+ background-color: var(--color-blue);
96
+ color: var(--color-powder);
97
+ }
98
+
99
+ .button.disabled.primary,
100
+ .button.disabled.primary:hover,
101
+ .button.disabled.primary:focus,
102
+ .button[disabled].primary,
103
+ .button[disabled].primary:hover,
104
+ .button[disabled].primary:focus {
105
+ background-color: var(--color-blue);
106
+ color: var(--color-powder);
107
+ }
108
+
109
+ .button.disabled.secondary,
110
+ .button.disabled.secondary:hover,
111
+ .button.disabled.secondary:focus,
112
+ .button[disabled].secondary,
113
+ .button[disabled].secondary:hover,
114
+ .button[disabled].secondary:focus {
115
+ background-color: var(--color-grey2);
116
+ color: var(--color-font);
117
+ }
118
+
119
+ .button.disabled.alert,
120
+ .button.disabled.alert:hover,
121
+ .button.disabled.alert:focus,
122
+ .button[disabled].alert,
123
+ .button[disabled].alert:hover,
124
+ .button[disabled].alert:focus {
125
+ background-color: var(--color-ruby);
126
+ color: var(--color-powder);
127
+ }
128
+
129
+ .button.disabled.success,
130
+ .button.disabled.success:hover,
131
+ .button.disabled.success:focus,
132
+ .button[disabled].success,
133
+ .button[disabled].success:hover,
134
+ .button[disabled].success:focus {
135
+ background-color: var(--color-green);
136
+ color: var(--color-font);
137
+ }
138
+
139
+ .button.disabled.warning,
140
+ .button.disabled.warning:hover,
141
+ .button.disabled.warning:focus,
142
+ .button[disabled].warning,
143
+ .button[disabled].warning:hover,
144
+ .button[disabled].warning:focus {
145
+ background-color: var(--color-orange);
146
+ color: var(--color-font);
147
+ }
148
+
149
+ .button.disabled.body-font,
150
+ .button.disabled.body-font:hover,
151
+ .button.disabled.body-font:focus,
152
+ .button[disabled].body-font,
153
+ .button[disabled].body-font:hover,
154
+ .button[disabled].body-font:focus {
155
+ background-color: var(--color-font);
156
+ color: var(--color-powder);
157
+ }
158
+
159
+ .button.disabled.header,
160
+ .button.disabled.header:hover,
161
+ .button.disabled.header:focus,
162
+ .button[disabled].header,
163
+ .button[disabled].header:hover,
164
+ .button[disabled].header:focus {
165
+ background-color: var(--color-font);
166
+ color: var(--color-powder);
167
+ }
168
+
169
+ .button.hollow {
170
+ border: 1px solid var(--color-grey1);
171
+ color: var(--color-dark-grey);
172
+ }
173
+
174
+ .button.hollow:hover,
175
+ .button.hollow:focus {
176
+ border-color: var(--color-darker-grey);
177
+ color: var(--color-darker-grey);
178
+ }
179
+
180
+ .button.hollow:hover.disabled,
181
+ .button.hollow:hover[disabled],
182
+ .button.hollow:focus.disabled,
183
+ .button.hollow:focus[disabled] {
184
+ border: 1px solid var(--color-blue);
185
+ color: var(--color-blue);
186
+ }
187
+
188
+ .button.hollow.primary {
189
+ border: 1px solid var(--color-blue);
190
+ color: var(--color-blue);
191
+ }
192
+
193
+ .button.hollow.primary:hover,
194
+ .button.hollow.primary:focus {
195
+ border-color: var(--color-darker-blue);
196
+ color: var(--color-darker-blue);
197
+ }
198
+
199
+ .button.hollow.primary:hover.disabled,
200
+ .button.hollow.primary:hover[disabled],
201
+ .button.hollow.primary:focus.disabled,
202
+ .button.hollow.primary:focus[disabled] {
203
+ border: 1px solid var(--color-blue);
204
+ color: var(--color-blue);
205
+ }
206
+
207
+ .button.hollow.secondary {
208
+ border: 1px solid var(--color-grey2);
209
+ color: var(--color-grey2);
210
+ }
211
+
212
+ .button.hollow.secondary:hover,
213
+ .button.hollow.secondary:focus {
214
+ border-color: var(--color-darker-grey);
215
+ color: var(--color-darker-grey);
216
+ }
217
+
218
+ .button.hollow.secondary:hover.disabled,
219
+ .button.hollow.secondary:hover[disabled],
220
+ .button.hollow.secondary:focus.disabled,
221
+ .button.hollow.secondary:focus[disabled] {
222
+ border: 1px solid var(--color-grey2);
223
+ color: var(--color-grey2);
224
+ }
225
+
226
+ .button.hollow.alert {
227
+ border: 1px solid var(--color-ruby);
228
+ color: var(--color-ruby);
229
+ }
230
+
231
+ .button.hollow.alert:hover,
232
+ .button.hollow.alert:focus {
233
+ border-color: var(--color-darker-ruby);
234
+ color: var(--color-darker-ruby);
235
+ }
236
+
237
+ .button.hollow.alert:hover.disabled,
238
+ .button.hollow.alert:hover[disabled],
239
+ .button.hollow.alert:focus.disabled,
240
+ .button.hollow.alert:focus[disabled] {
241
+ border: 1px solid var(--color-ruby);
242
+ color: var(--color-ruby);
243
+ }
244
+
245
+ .button.hollow.success {
246
+ border: 1px solid var(--color-green);
247
+ color: var(--color-green);
248
+ }
249
+
250
+ .button.hollow.success:hover,
251
+ .button.hollow.success:focus {
252
+ border-color: var(--color-darker-green);
253
+ color: var(--color-darker-green);
254
+ }
255
+
256
+ .button.hollow.success:hover.disabled,
257
+ .button.hollow.success:hover[disabled],
258
+ .button.hollow.success:focus.disabled,
259
+ .button.hollow.success:focus[disabled] {
260
+ border: 1px solid var(--color-green);
261
+ color: var(--color-green);
262
+ }
263
+
264
+ .button.hollow.warning {
265
+ border: 1px solid var(--color-orange);
266
+ color: var(--color-orange);
267
+ }
268
+
269
+ .button.hollow.warning:hover,
270
+ .button.hollow.warning:focus {
271
+ border-color: var(--color-darker-orange);
272
+ color: var(--color-darker-orange);
273
+ }
274
+
275
+ .button.hollow.warning:hover.disabled,
276
+ .button.hollow.warning:hover[disabled],
277
+ .button.hollow.warning:focus.disabled,
278
+ .button.hollow.warning:focus[disabled] {
279
+ border: 1px solid var(--color-orange);
280
+ color: var(--color-orange);
281
+ }
282
+
283
+ .button.hollow.body-font {
284
+ border: 1px solid var(--color-font);
285
+ color: var(--color-font);
286
+ }
287
+
288
+ .button.hollow.body-font:hover,
289
+ .button.hollow.body-font:focus {
290
+ border-color: var(--color-dark-font);
291
+ color: var(--color-dark-font);
292
+ }
293
+
294
+ .button.hollow.body-font:hover.disabled,
295
+ .button.hollow.body-font:hover[disabled],
296
+ .button.hollow.body-font:focus.disabled,
297
+ .button.hollow.body-font:focus[disabled] {
298
+ border: 1px solid var(--color-font);
299
+ color: var(--color-font);
300
+ }
301
+
302
+ .button.hollow.header {
303
+ border: 1px solid var(--color-font);
304
+ color: var(--color-font);
305
+ }
306
+
307
+ .button.hollow.header:hover,
308
+ .button.hollow.header:focus {
309
+ border-color: var(--color-dark-font);
310
+ color: var(--color-dark-font);
311
+ }
312
+
313
+ .button.hollow.header:hover.disabled,
314
+ .button.hollow.header:hover[disabled],
315
+ .button.hollow.header:focus.disabled,
316
+ .button.hollow.header:focus[disabled] {
317
+ border: 1px solid var(--color-font);
318
+ color: var(--color-font);
319
+ }
320
+
321
+ .button.clear {
322
+ border: 1px solid var(--color-blue);
323
+ color: var(--color-blue);
324
+ }
325
+
326
+ .button.clear:hover,
327
+ .button.clear:focus {
328
+ border-color: var(--color-darker-blue);
329
+ color: var(--color-darker-blue);
330
+ }
331
+
332
+ .button.clear:hover.disabled,
333
+ .button.clear:hover[disabled],
334
+ .button.clear:focus.disabled,
335
+ .button.clear:focus[disabled] {
336
+ border: 1px solid var(--color-blue);
337
+ color: var(--color-blue);
338
+ }
339
+
340
+ .button.clear.primary {
341
+ border: 1px solid var(--color-blue);
342
+ color: var(--color-blue);
343
+ }
344
+
345
+ .button.clear.primary:hover,
346
+ .button.clear.primary:focus {
347
+ border-color: var(--color-darker-blue);
348
+ color: var(--color-darker-blue);
349
+ }
350
+
351
+ .button.clear.primary:hover.disabled,
352
+ .button.clear.primary:hover[disabled],
353
+ .button.clear.primary:focus.disabled,
354
+ .button.clear.primary:focus[disabled] {
355
+ border: 1px solid var(--color-blue);
356
+ color: var(--color-blue);
357
+ }
358
+
359
+ .button.clear.secondary {
360
+ border: 1px solid var(--color-grey2);
361
+ color: var(--color-grey2);
362
+ }
363
+
364
+ .button.clear.secondary:hover,
365
+ .button.clear.secondary:focus {
366
+ border-color: var(--color-darker-grey);
367
+ color: var(--color-darker-grey);
368
+ }
369
+
370
+ .button.clear.secondary:hover.disabled,
371
+ .button.clear.secondary:hover[disabled],
372
+ .button.clear.secondary:focus.disabled,
373
+ .button.clear.secondary:focus[disabled] {
374
+ border: 1px solid var(--color-grey2);
375
+ color: var(--color-grey2);
376
+ }
377
+
378
+ .button.clear.alert {
379
+ border: 1px solid var(--color-ruby);
380
+ color: var(--color-ruby);
381
+ }
382
+
383
+ .button.clear.alert:hover,
384
+ .button.clear.alert:focus {
385
+ border-color: var(--color-darker-ruby);
386
+ color: var(--color-darker-ruby);
387
+ }
388
+
389
+ .button.clear.alert:hover.disabled,
390
+ .button.clear.alert:hover[disabled],
391
+ .button.clear.alert:focus.disabled,
392
+ .button.clear.alert:focus[disabled] {
393
+ border: 1px solid var(--color-ruby);
394
+ color: var(--color-ruby);
395
+ }
396
+
397
+ .button.clear.success {
398
+ border: 1px solid var(--color-green);
399
+ color: var(--color-green);
400
+ }
401
+
402
+ .button.clear.success:hover,
403
+ .button.clear.success:focus {
404
+ border-color: var(--color-darker-green);
405
+ color: var(--color-darker-green);
406
+ }
407
+
408
+ .button.clear.success:hover.disabled,
409
+ .button.clear.success:hover[disabled],
410
+ .button.clear.success:focus.disabled,
411
+ .button.clear.success:focus[disabled] {
412
+ border: 1px solid var(--color-green);
413
+ color: var(--color-green);
414
+ }
415
+
416
+ .button.clear.warning {
417
+ border: 1px solid var(--color-orange);
418
+ color: var(--color-orange);
419
+ }
420
+
421
+ .button.clear.warning:hover,
422
+ .button.clear.warning:focus {
423
+ border-color: var(--color-darker-orange);
424
+ color: var(--color-darker-orange);
425
+ }
426
+
427
+ .button.clear.warning:hover.disabled,
428
+ .button.clear.warning:hover[disabled],
429
+ .button.clear.warning:focus.disabled,
430
+ .button.clear.warning:focus[disabled] {
431
+ border: 1px solid var(--color-orange);
432
+ color: var(--color-orange);
433
+ }
434
+
435
+ .button.clear.body-font {
436
+ border: 1px solid var(--color-font);
437
+ color: var(--color-font);
438
+ }
439
+
440
+ .button.clear.body-font:hover,
441
+ .button.clear.body-font:focus {
442
+ border-color: var(--color-dark-font);
443
+ color: var(--color-dark-font);
444
+ }
445
+
446
+ .button.clear.body-font:hover.disabled,
447
+ .button.clear.body-font:hover[disabled],
448
+ .button.clear.body-font:focus.disabled,
449
+ .button.clear.body-font:focus[disabled] {
450
+ border: 1px solid var(--color-font);
451
+ color: var(--color-font);
452
+ }
453
+
454
+ .button.clear.header {
455
+ border: 1px solid var(--color-font);
456
+ color: var(--color-font);
457
+ }
458
+
459
+ .button.clear.header:hover,
460
+ .button.clear.header:focus {
461
+ border-color: var(--color-dark-font);
462
+ color: var(--color-dark-font);
463
+ }
464
+
465
+ .button.clear.header:hover.disabled,
466
+ .button.clear.header:hover[disabled],
467
+ .button.clear.header:focus.disabled,
468
+ .button.clear.header:focus[disabled] {
469
+ border: 1px solid var(--color-font);
470
+ color: var(--color-font);
471
+ }
472
+
473
+ .button.dropdown::after {
474
+ border-color: var(--color-powder) transparent transparent;
475
+ }
476
+
477
+ .button.dropdown.hollow::after {
478
+ border-top-color: var(--color-blue);
479
+ }
480
+
481
+ .button.dropdown.hollow.primary::after {
482
+ border-top-color: var(--color-blue);
483
+ }
484
+
485
+ .button.dropdown.hollow.secondary::after {
486
+ border-top-color: var(--color-grey2);
487
+ }
488
+
489
+ .button.dropdown.hollow.alert::after {
490
+ border-top-color: var(--color-ruby);
491
+ }
492
+
493
+ .button.dropdown.hollow.success::after {
494
+ border-top-color: var(--color-green);
495
+ }
496
+
497
+ .button.dropdown.hollow.warning::after {
498
+ border-top-color: var(--color-orange);
499
+ }
500
+
501
+ .button.dropdown.hollow.body-font::after {
502
+ border-top-color: var(--color-font);
503
+ }
504
+
505
+ .button.dropdown.hollow.header::after {
506
+ border-top-color: var(--color-font);
507
+ }
508
+
509
+ .close-button {
510
+ color: var(--color-dark-grey);
511
+ }
512
+
513
+ .close-button:hover,
514
+ .close-button:focus {
515
+ color: var(--color-font);
516
+ }
517
+
518
+ .button-group.primary .button {
519
+ background-color: var(--color-blue);
520
+ color: var(--color-powder);
521
+ }
522
+
523
+ .button-group.primary .button:hover,
524
+ .button-group.primary .button:focus {
525
+ background-color: var(--color-darker-blue);
526
+ color: var(--color-powder);
527
+ }
528
+
529
+ .button-group.secondary .button {
530
+ background-color: var(--color-grey2);
531
+ color: var(--color-font);
532
+ }
533
+
534
+ .button-group.secondary .button:hover,
535
+ .button-group.secondary .button:focus {
536
+ background-color: var(--color-dark-grey);
537
+ color: var(--color-font);
538
+ }
539
+
540
+ .button-group.alert .button {
541
+ background-color: var(--color-ruby);
542
+ color: var(--color-powder);
543
+ }
544
+
545
+ .button-group.alert .button:hover,
546
+ .button-group.alert .button:focus {
547
+ background-color: var(--color-dark-ruby);
548
+ color: var(--color-powder);
549
+ }
550
+
551
+ .button-group.success .button {
552
+ background-color: var(--color-green);
553
+ color: var(--color-font);
554
+ }
555
+
556
+ .button-group.success .button:hover,
557
+ .button-group.success .button:focus {
558
+ background-color: var(--color-dark-green);
559
+ color: var(--color-font);
560
+ }
561
+
562
+ .button-group.warning .button {
563
+ background-color: var(--color-orange);
564
+ color: var(--color-font);
565
+ }
566
+
567
+ .button-group.warning .button:hover,
568
+ .button-group.warning .button:focus {
569
+ background-color: var(--color-dark-orange);
570
+ color: var(--color-font);
571
+ }
572
+
573
+ .button-group.body-font .button {
574
+ background-color: var(--color-font);
575
+ color: var(--color-powder);
576
+ }
577
+
578
+ .button-group.body-font .button:hover,
579
+ .button-group.body-font .button:focus {
580
+ background-color: var(--color-dark-font);
581
+ color: var(--color-powder);
582
+ }
583
+
584
+ .button-group.header .button {
585
+ background-color: var(--color-font);
586
+ color: var(--color-powder);
587
+ }
588
+
589
+ .button-group.header .button:hover,
590
+ .button-group.header .button:focus {
591
+ background-color: var(--color-dark-font);
592
+ color: var(--color-powder);
593
+ }