/
_uswds-theme-spacing.scss
93 lines (84 loc) · 2.03 KB
/
_uswds-theme-spacing.scss
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
93
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.3.1
----------------------------------------
SPACING SETTINGS
----------------------------------------
Read more about settings and
USWDS spacing units tokens in the
documentation:
https://designsystem.digital.gov/design-tokens/spacing-units
----------------------------------------
*/
/*
----------------------------------------
Border radius
----------------------------------------
2px 2px
0.5 4px
1 8px
1.5 12px
2 16px
2.5 20px
3 24px
4 32px
5 40px
6 48px
7 56px
8 64px
9 72px
----------------------------------------
*/
$theme-border-radius-sm: 2px;
$theme-border-radius-md: 0.5;
$theme-border-radius-lg: 1;
/*
----------------------------------------
Column gap
----------------------------------------
2px 2px
0.5 4px
1 8px
2 16px
3 24px
4 32px
5 40px
6 48px
----------------------------------------
*/
$theme-column-gap-sm: 2px;
$theme-column-gap-md: 2;
$theme-column-gap-lg: 3;
// These determine the responsive gap sizes set with .grid-gap
$theme-column-gap-mobile: 2;
$theme-column-gap-desktop: 4;
/*
----------------------------------------
Grid container max-width
----------------------------------------
mobile
mobile-lg
tablet
tablet-lg
desktop
desktop-lg
widescreen
----------------------------------------
*/
$theme-grid-container-max-width: "desktop";
/*
----------------------------------------
Site
----------------------------------------
*/
$theme-site-max-width: "desktop";
$theme-site-margins-breakpoint: "desktop";
$theme-site-margins-width: 4;
$theme-site-margins-mobile-width: 2;