1 | //
|
2 | // Copyright IBM Corp. 2016, 2018
|
3 | //
|
4 | // This source code is licensed under the Apache-2.0 license found in the
|
5 | // LICENSE file in the root directory of this source tree.
|
6 | //
|
7 |
|
8 | @import './vendor/@carbon/elements/scss/layout/mini-unit';
|
9 | @import './vendor/@carbon/elements/scss/layout/spacing';
|
10 |
|
11 | //-------------------------------------------
|
12 | // 🌌 Spacing
|
13 | // ------------------------------------------
|
14 | //
|
15 | // Size in px based on 16px base
|
16 | //
|
17 | // Spacing Scale
|
18 | // ==========================================
|
19 | // 4xs || 1px
|
20 | // 3xs || 2px
|
21 | // 2xs || 4px
|
22 | // xs || 8px
|
23 | // sm || 12px
|
24 | // md || 16px
|
25 | // lg || 24px
|
26 | // xl || 32px
|
27 | // 2xl || 40px
|
28 | // 3xl || 48px
|
29 | // ==========================================
|
30 | //
|
31 | // Layout Scale
|
32 | // ==========================================
|
33 | // 2xs || 16px
|
34 | // xs || 24px
|
35 | // sm || 32px
|
36 | // md || 48px
|
37 | // lg || 64px
|
38 | // xl || 96px
|
39 | // 2xl || 160px
|
40 | // ==========================================
|
41 |
|
42 | /// @access public
|
43 | /// @returns 1 rem
|
44 | /// @group spacing/layout tokens
|
45 | $spacing-baseline: 1rem !default;
|
46 |
|
47 | /// @access public
|
48 | /// @returns - spacing values in rem, see scale above
|
49 | /// @example
|
50 | // .box {
|
51 | // padding-left: $spacing-md;
|
52 | // }
|
53 | $spacing-4xs: $spacing-baseline * 0.0625 !default;
|
54 | $spacing-3xs: $spacing-baseline * 0.125 !default;
|
55 | $spacing-2xs: $spacing-baseline * 0.25 !default;
|
56 | $spacing-xs: $spacing-baseline * 0.5 !default;
|
57 | $spacing-sm: $spacing-baseline * 0.75 !default;
|
58 | $spacing-md: $spacing-baseline !default;
|
59 | $spacing-lg: $spacing-baseline * 1.5 !default;
|
60 | $spacing-xl: $spacing-baseline * 2 !default;
|
61 | $spacing-2xl: $spacing-baseline * 2.5 !default;
|
62 | $spacing-3xl: $spacing-baseline * 3 !default;
|
63 |
|
64 | /// @access public
|
65 | /// @returns - layout values in rem, see scale above
|
66 | $layout-2xs: $spacing-baseline !default;
|
67 | $layout-xs: $spacing-baseline * 1.5 !default;
|
68 | $layout-sm: $spacing-baseline * 2 !default;
|
69 | $layout-md: $spacing-baseline * 3 !default;
|
70 | $layout-lg: $spacing-baseline * 4 !default;
|
71 | $layout-xl: $spacing-baseline * 6 !default;
|
72 | $layout-2xl: $spacing-baseline * 10 !default;
|