clever-calculator/app/assets/stylesheets/application/variables.scss at 8474e02d375971ff9eeb42a20da0f14ddb2568b6 · wahanegi/clever-calculator · GitHub

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
94
95
96
97
98
99
100
101
102
103
@import 'bootstrap/scss/functions';

// Base Colors
$primary: #2487bf;
$secondary: #9aa9b8;
$light: #f0f6fc;
$dark: #1f2f3f;
$danger: #f12711;

// Other Colors
$gray: #9e9e9e;
$gray-light: #d9d9d9;
$gray-700: #616161;
$blue-light: #e2e6f9;
$blue-sky: #3f84bd;
$red-light: #f5b8b8;
$green-light: #f3fbeb;
$teal: #a0c9c8;
$teal-dark: #115d5b;

// Button Colors
$coral-primary: #fe6d75;
$coral-secondary: #ff9298;
$coral-dark: #e35c67;
$coral-light: #ffdbdd;
$text-coral: #fe6d754d;
$gray-disable: #ececec;
$text-gray-disable: #999999;

// Font Families
$font-family-base: 'Roboto', sans-serif;
$font-family-inter: 'Inter', sans-serif;
$font-family-lato: 'Lato', sans-serif;
$font-family-jost: 'Jost', sans-serif;

// Font Sizes
$font-size-base: 1rem; // 16px
$font-size-xs: 0.75rem; // 12px
$font-size-sm: 0.875rem; // 14px
$font-size-lg: 2rem; // 32px
$font-size-xl: 3rem; // 48px

// Font Weights
$font-weight-lighter: 200;
$font-weight-light: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// line-height variables
$line-height-sm: 1.2;
$line-height-base: 1.4;
$line-height-lg: 1.6;

// Button styles
$border-radius: 8px;

// Enable RFS
$enable-responsive-font-sizes: true !default;

// Spacer Customization
$spacer: 1rem;
$spacers: (
        0: 0,
        1: $spacer * 0.25, // 4px
        2: $spacer * 0.5, // 8px
        3: $spacer * 0.75, // 12px
        4: $spacer * 1, // 16px
        5: $spacer * 1.5, // 24px
        6: $spacer * 2, // 32px
        7: $spacer * 2.5, // 40px
        8: $spacer * 3, // 48px
        9: $spacer * 3.5, // 56px
        10: $spacer * 4, // 64px
        11: $spacer * 4.5, // 72px
        12: $spacer * 5, // 80px
        13: $spacer * 5.5, // 88px
        14: $spacer * 6, // 96px
        15: $spacer * 6.5, // 104px
        16: $spacer * 7, // 112px
        17: $spacer * 7.5, // 120px
        18: $spacer * 8, // 128px
        19: $spacer * 8.5, // 136px
        20: $spacer * 9, // 144px
        21: $spacer * 9.5, // 152px
        22: $spacer * 10, // 160px
);
$enable-negative-margins: true;

// Custom Font Sizes for Utilities
$font-sizes: (
        1: 3rem, // 48px
        2: 2.75rem, // 44px
        3: 2.5rem, // 40px
        4: 2.25rem, // 36px
        5: 2rem, // 32px
        6: 1.75rem, // 28px
        7: 1.5rem, // 24px
        8: 1.25rem, // 20px
        9: 1.125rem, // 18px
        10: $font-size-sm, // 14px
        11: $font-size-xs, // 12px
);