-
Notifications
You must be signed in to change notification settings - Fork 0
/
mixins.scss
122 lines (95 loc) · 3.88 KB
/
mixins.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
/*----------------------------------------------------------
|
| SYSTEM GUTTER SIZE
|
----------------------------------------------------------*/
@mixin system-fluid-gutter($max-gutter-size, $min-gutter-size) {
padding: 0 calc(#{fluid-size($max-gutter-size, $min-gutter-size)} / 2);
@media screen and (max-width: $container-min-width) {
padding: 0 calc(#{$min-gutter-size} / 2);
}
@media screen and (min-width: $container-max-width) {
padding: 0 calc(#{$max-gutter-size} / 2);
}
}
/*----------------------------------------------------------
|
| SYSTEM FONT SIZE
|
----------------------------------------------------------*/
@mixin system-font($max-font-size, $min-font-size) {
font-size: #{fluid-size($max-font-size, $min-font-size)};
@media screen and (max-width: $container-min-width) {
font-size: $min-font-size;
}
@media screen and (min-width: $container-max-width) {
font-size: $max-font-size;
}
}
/*----------------------------------------------------------
|
| SYSTEM NESTED ROW HELPER
|
----------------------------------------------------------*/
@mixin system-nested-row-helper($max-gutter-size, $min-gutter-size) {
width: calc(100% + #{fluid-size($max-gutter-size, $min-gutter-size)});
margin-left: calc((#{fluid-size($max-gutter-size, $min-gutter-size)} / 2) * -1);
@media screen and (max-width: $container-min-width) {
width: calc(100% + #{$min-gutter-size});
margin-left: 0 calc((#{$min-gutter-size} / 2) * -1);
}
@media screen and (min-width: $container-max-width) {
width: calc(100% + #{$max-gutter-size});
margin-left: 0 calc((#{$max-gutter-size} / 2) * -1);
}
}
/*----------------------------------------------------------
|
| LINE HEIGHT
|
----------------------------------------------------------*/
@mixin system-line-height($max-font-line-height, $min-font-line-height) {
line-height: #{fluid-size($max-font-line-height, $min-font-line-height)};
@media screen and (max-width: $container-min-width) {
line-height: $min-font-line-height;
}
@media screen and (min-width: $container-max-width) {
line-height: $max-font-line-height;
}
}
/*----------------------------------------------------------
|
| GUTTER
|
----------------------------------------------------------*/
@mixin gutter($property, $name) {
$max-size: map-deep-get($options, 'gutters', #{$name}, 'max-size');
$min-size: map-deep-get($options, 'gutters', #{$name}, 'min-size');
#{$property}: fluid-size($max-size, $min-size);
@media screen and (max-width: $container-min-width) {
#{$property}: $min-size;
}
@media screen and (min-width: $container-max-width) {
#{$property}: $max-size;
}
}
/*----------------------------------------------------------
|
| FONTS
|
----------------------------------------------------------*/
@mixin font($name) {
$font-family: map-deep-get($options, 'fonts', #{$name}, 'font-family');
$font-weight: map-deep-get($options, 'fonts', #{$name}, 'font-weight');
$font-max-size: map-deep-get($options, 'fonts', #{$name}, 'max-size');
$font-min-size: map-deep-get($options, 'fonts', #{$name}, 'min-size');
$font-max-line-height: map-deep-get($options, 'fonts', #{$name}, 'max-line-height');
$font-min-line-height: map-deep-get($options, 'fonts', #{$name}, 'min-line-height');
font-family: $font-family;
font-weight: $font-weight;
@include system-font($font-max-size, $font-min-size);
@include system-line-height($font-max-line-height, $font-min-line-height);
@if type-of(map-deep-get($options, 'fonts', #{$name}, 'transform') == 'string') {
text-transform: map-deep-get($options, 'fonts', #{$name}, 'transform');
}
}