1 | //-------------------------------------------
|
2 | // Spacing
|
3 | // ------------------------------------------
|
4 | //
|
5 | // Size in px based on 16px base
|
6 | //
|
7 | // Spacing Scale
|
8 | // ==========================================
|
9 | // 4xs || 1px
|
10 | // 3xs || 2px
|
11 | // 2xs || 4px
|
12 | // xs || 8px
|
13 | // sm || 12px
|
14 | // md || 16px
|
15 | // lg || 24px
|
16 | // xl || 32px
|
17 | // 2xl || 40px
|
18 | // 3xl || 48px
|
19 | // ==========================================
|
20 | //
|
21 | // Layout Scale
|
22 | // ==========================================
|
23 | // 2xs || 16px
|
24 | // xs || 24px
|
25 | // sm || 32px
|
26 | // md || 48px
|
27 | // lg || 64px
|
28 | // xl || 96px
|
29 | // 2xl || 160px
|
30 | // ==========================================
|
31 |
|
32 | /// 1rem baseline spacing
|
33 | $spacing-baseline: 1rem !default; // 16px
|
34 |
|
35 | /// 1px spacing in rem units
|
36 | $spacing-4xs: $spacing-baseline * 0.0625 !default;
|
37 |
|
38 | /// 2px spacing in rem units
|
39 | $spacing-3xs: $spacing-baseline * 0.125 !default;
|
40 |
|
41 | /// 4px spacing in rem units
|
42 | $spacing-2xs: $spacing-baseline * 0.25 !default;
|
43 |
|
44 | /// 8px spacing in rem units
|
45 | $spacing-xs: $spacing-baseline * 0.5 !default;
|
46 |
|
47 | /// 12px spacing in rem units
|
48 | $spacing-sm: $spacing-baseline * 0.75 !default;
|
49 |
|
50 | /// 16px spacing in rem units
|
51 | $spacing-md: $spacing-baseline !default;
|
52 |
|
53 | /// 24px spacing in rem units
|
54 | $spacing-lg: $spacing-baseline * 1.5 !default;
|
55 |
|
56 | /// 32px spacing in rem units
|
57 | $spacing-xl: $spacing-baseline * 2 !default;
|
58 |
|
59 | /// 40px spacing in rem units
|
60 | $spacing-2xl: $spacing-baseline * 2.5 !default;
|
61 |
|
62 | /// 48px spacing in rem units
|
63 | $spacing-3xl: $spacing-baseline * 3 !default;
|
64 |
|
65 | /// 16px layout in rem units
|
66 | $layout-2xs: $spacing-baseline !default;
|
67 |
|
68 | /// 24px layout in rem units
|
69 | $layout-xs: $spacing-baseline * 1.5 !default;
|
70 |
|
71 | /// 32px layout in rem units
|
72 | $layout-sm: $spacing-baseline * 2 !default;
|
73 |
|
74 | /// 48px layout in rem units
|
75 | $layout-md: $spacing-baseline * 3 !default;
|
76 |
|
77 | /// 64px layout in rem units
|
78 | $layout-lg: $spacing-baseline * 4 !default;
|
79 |
|
80 | /// 96px layout in rem units
|
81 | $layout-xl: $spacing-baseline * 6 !default;
|
82 |
|
83 | /// 160px layout in rem units
|
84 | $layout-2xl: $spacing-baseline * 10 !default;
|