| 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;
|