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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
//
// Component: Variables
// Description: Defines common values which are used across all components
//
// ========================================================================
// Breakpoints
// ========================================================================
// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280),
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
$breakpoint-small: 640px !default; // Phone landscape
$breakpoint-medium: 960px !default; // Tablet Landscape
$breakpoint-large: 1200px !default; // Desktop
$breakpoint-xlarge: 1600px !default; // Large Screens
$breakpoint-xsmall-max: ($breakpoint-small - 1) !default;
$breakpoint-small-max: ($breakpoint-medium - 1) !default;
$breakpoint-medium-max: ($breakpoint-large - 1) !default;
$breakpoint-large-max: ($breakpoint-xlarge - 1) !default;
// Global variables
// ========================================================================
//
// Typography
//
$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$global-font-size: 16px !default;
$global-line-height: 1.5 !default; // 24px
$global-xxlarge-font-size: 2.625rem !default; // 42px
$global-xlarge-font-size: 2rem !default; // 32px
$global-large-font-size: 1.5rem !default; // 24px
$global-medium-font-size: 1.25rem !default; // 20px
$global-small-font-size: 0.875rem !default; // 14px
//
// Colors
//
$global-color: #666 !default;
$global-emphasis-color: #333 !default;
$global-muted-color: #999 !default;
$global-link-color: #1e87f0 !default;
$global-link-hover-color: #0f6ecd !default;
$global-inverse-color: #fff !default;
//
// Backgrounds
//
$global-background: #fff !default;
$global-muted-background: #f8f8f8 !default;
$global-primary-background: #1e87f0 !default;
$global-secondary-background: #222 !default;
$global-success-background: #32d296 !default;
$global-warning-background: #faa05a !default;
$global-danger-background: #f0506e !default;
//
// Borders
//
$global-border-width: 1px !default;
$global-border: #e5e5e5 !default;
//
// Box-Shadows
//
$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default;
$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default;
$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default;
$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default;
//
// Spacings
//
// Used in margin, section, list
$global-margin: 20px !default;
$global-small-margin: 10px !default;
$global-medium-margin: 40px !default;
$global-large-margin: 70px !default;
$global-xlarge-margin: 140px !default;
// Used in grid, column, container, align, card, padding
$global-gutter: 30px !default;
$global-small-gutter: 15px !default;
$global-medium-gutter: 40px !default;
$global-large-gutter: 70px !default;
//
// Controls
//
$global-control-height: 40px !default;
$global-control-small-height: 30px !default;
$global-control-large-height: 55px !default;
//
// Z-index
//
$global-z-index: 1000 !default;
|
