|
1
|
//
|
|
2
|
// Component: Variables
|
|
3
|
// Description: Defines common values which are used across all components
|
|
4
|
//
|
|
5
|
// ========================================================================
|
|
6
|
|
|
7
|
|
|
8
|
// Breakpoints
|
|
9
|
// ========================================================================
|
|
10
|
|
|
11
|
// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
|
|
12
|
// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
|
|
13
|
// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280),
|
|
14
|
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
|
|
15
|
// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
|
|
16
|
|
|
17
|
$breakpoint-small: 640px !default; // Phone landscape
|
|
18
|
$breakpoint-medium: 960px !default; // Tablet Landscape
|
|
19
|
$breakpoint-large: 1200px !default; // Desktop
|
|
20
|
$breakpoint-xlarge: 1600px !default; // Large Screens
|
|
21
|
|
|
22
|
$breakpoint-xsmall-max: ($breakpoint-small - 1) !default;
|
|
23
|
$breakpoint-small-max: ($breakpoint-medium - 1) !default;
|
|
24
|
$breakpoint-medium-max: ($breakpoint-large - 1) !default;
|
|
25
|
$breakpoint-large-max: ($breakpoint-xlarge - 1) !default;
|
|
26
|
|
|
27
|
|
|
28
|
// Global variables
|
|
29
|
// ========================================================================
|
|
30
|
|
|
31
|
//
|
|
32
|
// Typography
|
|
33
|
//
|
|
34
|
|
|
35
|
$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
|
36
|
$global-font-size: 16px !default;
|
|
37
|
$global-line-height: 1.5 !default; // 24px
|
|
38
|
|
|
39
|
$global-xxlarge-font-size: 2.625rem !default; // 42px
|
|
40
|
$global-xlarge-font-size: 2rem !default; // 32px
|
|
41
|
$global-large-font-size: 1.5rem !default; // 24px
|
|
42
|
$global-medium-font-size: 1.25rem !default; // 20px
|
|
43
|
$global-small-font-size: 0.875rem !default; // 14px
|
|
44
|
|
|
45
|
//
|
|
46
|
// Colors
|
|
47
|
//
|
|
48
|
|
|
49
|
$global-color: #666 !default;
|
|
50
|
$global-emphasis-color: #333 !default;
|
|
51
|
$global-muted-color: #999 !default;
|
|
52
|
|
|
53
|
$global-link-color: #1e87f0 !default;
|
|
54
|
$global-link-hover-color: #0f6ecd !default;
|
|
55
|
|
|
56
|
$global-inverse-color: #fff !default;
|
|
57
|
|
|
58
|
//
|
|
59
|
// Backgrounds
|
|
60
|
//
|
|
61
|
|
|
62
|
$global-background: #fff !default;
|
|
63
|
|
|
64
|
$global-muted-background: #f8f8f8 !default;
|
|
65
|
$global-primary-background: #1e87f0 !default;
|
|
66
|
$global-secondary-background: #222 !default;
|
|
67
|
|
|
68
|
$global-success-background: #32d296 !default;
|
|
69
|
$global-warning-background: #faa05a !default;
|
|
70
|
$global-danger-background: #f0506e !default;
|
|
71
|
|
|
72
|
//
|
|
73
|
// Borders
|
|
74
|
//
|
|
75
|
|
|
76
|
$global-border-width: 1px !default;
|
|
77
|
$global-border: #e5e5e5 !default;
|
|
78
|
|
|
79
|
//
|
|
80
|
// Box-Shadows
|
|
81
|
//
|
|
82
|
|
|
83
|
$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default;
|
|
84
|
$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default;
|
|
85
|
$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default;
|
|
86
|
$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default;
|
|
87
|
|
|
88
|
//
|
|
89
|
// Spacings
|
|
90
|
//
|
|
91
|
|
|
92
|
// Used in margin, section, list
|
|
93
|
$global-margin: 20px !default;
|
|
94
|
$global-small-margin: 10px !default;
|
|
95
|
$global-medium-margin: 40px !default;
|
|
96
|
$global-large-margin: 70px !default;
|
|
97
|
$global-xlarge-margin: 140px !default;
|
|
98
|
|
|
99
|
// Used in grid, column, container, align, card, padding
|
|
100
|
$global-gutter: 30px !default;
|
|
101
|
$global-small-gutter: 15px !default;
|
|
102
|
$global-medium-gutter: 40px !default;
|
|
103
|
$global-large-gutter: 70px !default;
|
|
104
|
|
|
105
|
//
|
|
106
|
// Controls
|
|
107
|
//
|
|
108
|
|
|
109
|
$global-control-height: 40px !default;
|
|
110
|
$global-control-small-height: 30px !default;
|
|
111
|
$global-control-large-height: 55px !default;
|
|
112
|
|
|
113
|
//
|
|
114
|
// Z-index
|
|
115
|
//
|
|
116
|
|
|
117
|
$global-z-index: 1000 !default;
|