-
Notifications
You must be signed in to change notification settings - Fork 7
/
_variables.scss
122 lines (98 loc) · 3.76 KB
/
_variables.scss
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
118
119
120
121
122
/**
* Variables
* =================================
* - Typography
* - Breakpoints
* - Paths
* - Layout & Grid
* - App-specific
*/
/* stylelint-disable indentation */
/**
* Typography
* =================================
*
* Base sizes:
* Set this in pixels (but do not add px),
* the font-size mixin will convert to REMS
*/
$font-size-base : 20;
$font-size-base-px : $font-size-base * 1px;
$font-size-base-narrow : $font-size-base - 2;
$font-size-base-narrow-px : $font-size-base-narrow * 1px;
$leading-base : 1.4;
$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4
$baseline : $line-height-base * 1px;
$type-scale : 1.25; // Major third
$type: (
micro : ko-ms(-2),
small : ko-ms(-1), // h5, h6
base : ko-ms(0), // p, h4
mid : ko-ms(1), // h3
large : ko-ms(2), // h2
jumbo : ko-ms(3) // h1
);
// Useful to set here when bold webfonts come as 400 font-weight.
$font-weight-bold : bold;
// Font stacks
$font-family-system : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif : Georgia, "Times New Roman", Times, serif;
$font-family-mono : Menlo, Monaco, "Courier New", monospace;
$font-family-base : $font-family-system;
$font-family-alt : $font-family-serif;
$font-family-headings : $font-family-base; // using inherit will use $font-family-base for all headings
$font-weight-headings : bold; // instead of browser default, bold
$line-height-headings : 1.1;
/**
* Breakpoints
* =================================
* There are no common breakpoints so these are just a suggestions
* You'll need to define your own breakpoints to suit your design
* Add your breakpoints to this Sass map
* Used in the Kickoff grid
*/
$breakpoints: (
narrow : 400px,
mid : 750px,
wide : 1000px,
huge : 1250px
);
// Setup layout max-width
$layout-margin : 0; // [in pixels] Space outside the grid
$layout-max-width : 1000; // [in pixels]
$layout-min-width : 960; // [in pixels] Minimum width for layout in <IE9
$layout-max-width--huge : 1100; // [in pixels]
$layout-min-width--huge : 1100; // [in pixels] Minimum width for layout in <IE9
/**
* Grid
* =================================
* These variables will control the grid module.
*
* if your project doesnt use Kickoff’s default grid, you can delete these
*/
$grid-column-count : 12; // Total column count
$grid-gutter-width : 20; // [in pixels]
//Settings here override & affect the grid classes output
$responsive-grid-sizes : true; // Disable this if you don't want grid sizes for each breakpoint
$use-legacy-grid : true; // Disable this is you on’t want to output .no-flexbox classes for older browsers to use
/**
* Path variables
* =================================
*/
$img-path : "/assets/dist/img"; // Usage: background: url('#{$img-path}/img.jpg') 0 0 no-repeat;
/**
* Z-index variables
* =================================
*/
$z-low : 10;
$z-mid : 100;
$z-high : 1000;
/**
* App-specific variables
* =================================
*/
$default-transition-timing : cubic-bezier(0.77, 0, 0.175, 1);
$default-transition-duration : 300ms;
$default-transition : all $default-transition-duration $default-transition-timing;
// Add your own :)