forked from folio-org/stripes-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvariables.css
92 lines (88 loc) · 3.27 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
:root {
--color-text: #000;
--color-text-p2: rgba(0, 0, 0, 0.62);
--color-border-form: rgba(0, 0, 0, 0.42);
--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: #2f609f;
--color-link-current: rgb(165, 234, 255);
--color-link-visited: #4f2bbb;
--color-link-visited-current: rgb(185, 192, 255);
--color-fill: rgba(0, 0, 0, 0.03);
--color-fill-table-row-odd: rgba(0, 0, 0, 0.08);
--color-fill-table-row-even: rgba(0, 0, 0, 0.03);
--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-focus-current: rgb(116, 173, 191);
--color-fill-active: var(--primary);
--highlighter-fill: #fc0;
--shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
--bg: #fff;
--bg-hover: color(var(--bg) contrast(100%) blend(var(--bg) 90%));
--checkable-disabled-fill: #808080;
--primary: #1960a4;
--secondary: #999;
--error: #900;
--error-fill: rgba(149, 29, 18, 0.2);
--danger: #900;
--warn: #943e00;
--warn-fill: rgba(215, 137, 88, 0.2);
--success: #070;
--success-fill: rgba(51, 117, 30, 0.2);
--control-margin-bottom: 1rem;
--control-min-size-touch: 44px;
--control-min-size-desktop: 24px;
--control-label-margin-bottom: 0.25rem;
--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;
--container-max-width: 80rem;
/**
* 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-size-form-label: 1.05rem;
/**
* Font-weights
*/
--text-weight-black: 900;
--text-weight-bold: 700;
--text-weight-medium: 600;
--text-weight-regular: 400;
--text-weights-are-bolder: 0;
--text-weight-basis: var(--text-weight-regular);
--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: var(--text-weight-bold);
--text-weight-button: var(--text-weight-bold);
}
/* 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);