-
Notifications
You must be signed in to change notification settings - Fork 37
/
Copy pathvariables.css
76 lines (72 loc) · 2.86 KB
/
variables.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
:root {
--color-text: #000;
--color-text-p2: rgba(0, 0, 0, 0.62);
--color-border: rgba(0, 0, 0, 0.2);
--color-border-p2: rgba(0, 0, 0, 0.1);
--color-icon: rgba(0, 0, 0, 0.62);
--color-link: var(--primary);
--color-link-visited: #4f2bbb;
--color-fill: rgba(0, 0, 0, 0.03);
--color-fill-table-row-odd: rgba(0, 0, 0, 0.05);
--color-fill-form-element: var(--color-fill);
--color-fill-current: rgba(0, 0, 0, 0.62);
--color-fill-disabled: rgba(0, 0, 0, 0.15);
--color-fill-hover: rgba(37, 118, 195, 0.2);
--color-fill-focus: rgba(37, 118, 195, 0.3);
--color-fill-active: var(--primary);
--shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
--bg: #fff;
--bg-hover: color(var(--bg) contrast(100%) blend(var(--bg) 90%));
--primary: #2b75bb;
--secondary: #999;
--error: #900;
--danger: #900;
--warn: #e27c3e;
--success: #070;
--control-margin-bottom: 1rem;
--control-min-size-touch: 44px;
--control-min-size-desktop: 24px;
--radius: 6px;
--gutter: 1rem;
--gutter-static: 15px;
--gutter-static-one-third: calc(var(--gutter-static) / 3);
--gutter-static-two-thirds: calc(var(--gutter-static-one-third) * 2);
--input-horizontal-padding: var(--gutter-static-one-third);
--input-vertical-padding: 0;
/**
* Font-size
* Size ratios from Fonts Module Level 3
* https://www.w3.org/TR/css-fonts-3/#propdef-font-size
*/
--line-height: 1.5;
--font-size-x-small: 0.857142rem;
--font-size-small: 0.857142rem;
--font-size-medium: 1rem;
--font-size-large: 1.3rem;
--font-size-x-large: 1.7143rem;
--font-size-xx-large: 2.2858rem;
/**
* Font-weights
*/
--text-weights-are-bolder: 0;
--text-weight-basis: 400;
--text-weight-addition-factor: 200;
--text-weight-headline-basis: 600;
--text-weight-headline-addition-factor: 100;
--text-weight: calc(var(--text-weight-basis) + ( var(--text-weight-addition-factor) * var(--text-weights-are-bolder)));
--text-weight-headline: calc(var(--text-weight-headline-basis) + ( var(--text-weight-headline-addition-factor) * var(--text-weights-are-bolder)));
--text-weight-button: var(--text-weight);
--text-weight-button-primary: calc(var(--text-weight-headline-basis) + ( var(--text-weight-headline-addition-factor) * var(--text-weights-are-bolder)));
}
/* Lean on min-width queries to create mobile-first CSS. */
@custom-media --small-up (min-width: 321px);
@custom-media --medium-up (min-width: 641px);
@custom-media --large-up (min-width: 1025px);
@custom-media --x-large-up (min-width: 1441px);
@custom-media --xx-large-up (min-width: 1921px);
/* Use these max-width queries as infrequently as possible. */
@custom-media --small (max-width: 640px);
@custom-media --medium-down (max-width: 1024px);
@custom-media --medium (min-width: 641px) and (max-width: 1024px);
@custom-media --large (min-width: 1025px) and (max-width: 1440px);
@custom-media --x-large (min-width: 1441px) and (max-width: 1920px);