flint-gs 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +13 -1
- data/lib/flint.rb +2 -2
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +24 -34
- data/stylesheets/flint/mixins/lib/_flint-main.scss +735 -521
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0b485e8f5a531a62d571916c16297761d3f6cbc8
|
|
4
|
+
data.tar.gz: fc241b91b94453da341a1634f34a10b21880b4e1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3d390061be82a075ae1204ba1267f8a02fe98ca1201d8e90e6bab56cb06d8e46b9b1a099bca5b4007d513666f4e3eb7fa7efe5ed28daa9da478b61ada139c6b1
|
|
7
|
+
data.tar.gz: f7fbed87cc04eba5f1c4e53b83e8c99704fa8ed601cfa130f4f676ecf15d946febc6a6fa478711f390efc2f7d827e10df11f7a28ea415c8d6b4d8d21d2e43bce
|
data/README.md
CHANGED
|
@@ -821,7 +821,19 @@ This will allow the instance functions to properly fallback from `.block .block_
|
|
|
821
821
|
|
|
822
822
|
##Change Log
|
|
823
823
|
|
|
824
|
-
Going to start keeping a log of changes starting
|
|
824
|
+
Going to start keeping a log of changes starting (4/11/14).**
|
|
825
|
+
|
|
826
|
+
####5/14/14
|
|
827
|
+
* Fixed issue with `_(greater than y)` not outputting the correct calculations on `fixed` grids
|
|
828
|
+
* Issue was that when you used for example: `_(greater than laptop)`, `laptop` would actually be included, instead of ommitted. It now acts as 'anything above laptops breakpoint', the same way `less than y` works.
|
|
829
|
+
* Adjusted the way breakpoints are calculated for easier modifications moving forward.
|
|
830
|
+
* Optimized `calc-breakpoint()` function
|
|
831
|
+
|
|
832
|
+
####5/09/14
|
|
833
|
+
* Added ability to pass an abitrary `$context` while maintaining a consistent gutter
|
|
834
|
+
* Small changes to `debug-mode`
|
|
835
|
+
* Added parent instance selector to output
|
|
836
|
+
* Added actual `$context` in place of `auto` in output
|
|
825
837
|
|
|
826
838
|
####5/02/14
|
|
827
839
|
* Adjusted `$length` variable in `string-to-list()` for better performance.
|
data/lib/flint.rb
CHANGED
|
@@ -5,8 +5,8 @@ Compass::Frameworks.register('flint', :path => extension_path)
|
|
|
5
5
|
# Version is a number. If a version contains alphas, it will be created as a prerelease version
|
|
6
6
|
# Date is in the form of YYYY-MM-DD
|
|
7
7
|
module Flint
|
|
8
|
-
VERSION = "1.
|
|
9
|
-
DATE = "2014-05-
|
|
8
|
+
VERSION = "1.2.0"
|
|
9
|
+
DATE = "2014-05-14"
|
|
10
10
|
end
|
|
11
11
|
|
|
12
12
|
# Custom functions
|
|
@@ -3,44 +3,34 @@
|
|
|
3
3
|
// @dependence `map-fetch()`
|
|
4
4
|
// @dependence `get-value()`
|
|
5
5
|
// -------------------------------------------------------------------------------
|
|
6
|
-
// @param $n ["
|
|
6
|
+
// @param $n ["alias" | "prev" | "next"] : how to calculate breakpoint
|
|
7
7
|
// @param $key [Value] : key of breakpoint
|
|
8
8
|
// @param $i [Value] : index of current breakpoint
|
|
9
9
|
// -------------------------------------------------------------------------------
|
|
10
10
|
// @return [Value]
|
|
11
11
|
|
|
12
12
|
@function calc-breakpoint($n, $key, $i) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}@else if $n == "to" {
|
|
37
|
-
@if steal-key($i) != steal-key(1) {
|
|
38
|
-
@return (get-value(steal-key(($i - 1)), breakpoint) - 1);
|
|
39
|
-
} @else {
|
|
40
|
-
@return (get-value(steal-key($i), breakpoint) - 1);
|
|
41
|
-
}
|
|
42
|
-
} @else if $n == "alt-to" {
|
|
43
|
-
@return (get-value(steal-key($i), breakpoint));
|
|
44
|
-
}
|
|
45
|
-
}
|
|
13
|
+
@if $n == "alias" {
|
|
14
|
+
@if get-value(settings, grid) == "fixed" {
|
|
15
|
+
@if is-lowest-breakpoint($key) {
|
|
16
|
+
@return 0;
|
|
17
|
+
} @else {
|
|
18
|
+
@return get-value($key, breakpoint);
|
|
19
|
+
}
|
|
20
|
+
} @else if get-value(settings, grid) == "fluid" {
|
|
21
|
+
@return get-value($key, breakpoint);
|
|
22
|
+
}
|
|
23
|
+
} @else if $n == "next" {
|
|
24
|
+
@if is-lowest-breakpoint($key) {
|
|
25
|
+
@return 0;
|
|
26
|
+
} @else {
|
|
27
|
+
@return get-value(steal-key(($i + 1)), breakpoint);
|
|
28
|
+
}
|
|
29
|
+
} @else if $n == "prev" {
|
|
30
|
+
@if is-highest-breakpoint($key) {
|
|
31
|
+
@return get-value($key, breakpoint);
|
|
32
|
+
} @else {
|
|
33
|
+
@return get-value(steal-key(($i - 1)), breakpoint);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
46
36
|
}
|
|
@@ -1,551 +1,765 @@
|
|
|
1
1
|
@mixin _(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
$key: NULL,
|
|
3
|
+
$span: NULL,
|
|
4
|
+
$context: NULL,
|
|
5
|
+
$gutter: NULL,
|
|
6
|
+
$shift: NULL
|
|
7
7
|
) {
|
|
8
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
|
-
} @else if length($key) > 1 or type-of($key) != "string" {
|
|
51
|
-
|
|
52
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
53
|
-
$calcKey: steal-key($i);
|
|
54
|
-
|
|
55
|
-
@if is-default($calcKey) {
|
|
56
|
-
display: block;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// apply individually if foundation is not set globally, but is set to true in config
|
|
62
|
-
@if get-value(settings, border-box-sizing) == true and $flint__foundation == "nonexistant" {
|
|
63
|
-
-moz-box-sizing: border-box;
|
|
64
|
-
-webkit-box-sizing: border-box;
|
|
65
|
-
box-sizing: border-box;
|
|
66
|
-
|
|
67
|
-
// warn to either set a global foundation, or turn border-box-sizing off
|
|
68
|
-
@if global-variable-exists(global-foundation-is-set) == false {
|
|
69
|
-
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global flint(foundation) rule, or turn border-box-sizing to false in your config file.";
|
|
70
|
-
|
|
71
|
-
// declare global variable so only a single warning prints out
|
|
72
|
-
$global-foundation-is-set: true !global;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// check if center container is set to true
|
|
77
|
-
@if $key == "container" {
|
|
78
|
-
float: none;
|
|
79
|
-
|
|
80
|
-
// check if max-width is set
|
|
81
|
-
@if get-value(settings, max-width) == true {
|
|
82
|
-
max-width: max(get-all-breakpoints()...);
|
|
83
|
-
} @else if type-of(get-value(settings, max-width)) == number {
|
|
84
|
-
max-width: get-value(settings, max-width);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
@if get-value(settings, center-container) == true {
|
|
88
|
-
margin-right: auto;
|
|
89
|
-
margin-left: auto;
|
|
90
|
-
} @else {
|
|
91
|
-
margin-right: 0;
|
|
92
|
-
margin-left: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
} @else {
|
|
96
|
-
|
|
97
|
-
@if is-default($key) {
|
|
98
|
-
|
|
99
|
-
float: unquote(get-value(settings, float-style));
|
|
100
|
-
|
|
101
|
-
} @else if length($key) > 1 or type-of($key) != "string" {
|
|
102
|
-
|
|
103
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
104
|
-
$calcKey: steal-key($i);
|
|
105
|
-
|
|
106
|
-
@if is-default($calcKey) {
|
|
107
|
-
float: unquote(get-value(settings, float-style));
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// Recursive shorthand without context
|
|
115
|
-
// -------------------------------------------------------------------------------
|
|
116
|
-
// @param $span [Value] : span
|
|
117
|
-
// -------------------------------------------------------------------------------
|
|
118
|
-
// @output [Styles...]
|
|
119
|
-
|
|
120
|
-
@if is-number($key) and length($key) == 1 or $key == "container" {
|
|
121
|
-
|
|
122
|
-
@if $key == "container" {
|
|
123
|
-
|
|
124
|
-
@if get-value(settings, grid) == "fixed" {
|
|
125
|
-
|
|
126
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
127
|
-
|
|
128
|
-
$calcKey: steal-key($i);
|
|
129
|
-
$calcSpan: $key;
|
|
130
|
-
$calcContext: $span;
|
|
131
|
-
$calcGutter: $gutter;
|
|
132
|
-
$calcShift: $shift;
|
|
9
|
+
// Foundation check
|
|
10
|
+
// -------------------------------------------------------------------------------
|
|
11
|
+
// @param $key [Value] : checks if key is a foundation or container instance
|
|
12
|
+
// -------------------------------------------------------------------------------
|
|
13
|
+
// @output [Foundation] | container
|
|
14
|
+
|
|
15
|
+
@if $key == "foundation" {
|
|
16
|
+
|
|
17
|
+
// apply global border-box-sizing if true
|
|
18
|
+
@if get-value(settings, border-box-sizing) == true {
|
|
19
|
+
$flint__foundation: "existant" !global;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// foundation is now globally existant
|
|
23
|
+
@if $flint__foundation == "existant" {
|
|
24
|
+
@at-root *, *:before, *:after {
|
|
25
|
+
-moz-box-sizing: border-box;
|
|
26
|
+
-webkit-box-sizing: border-box;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
@content;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
} @else if $key == "clear" {
|
|
33
|
+
|
|
34
|
+
@include clearfix();
|
|
35
|
+
|
|
36
|
+
} @else if $key == "container"
|
|
37
|
+
or exists($flint, $key) and $span != NULL
|
|
38
|
+
or length($key) == 1 and exists($flint, $key) == false
|
|
39
|
+
or length($span) > 1
|
|
40
|
+
or length($key) > 1
|
|
41
|
+
and type-of(nth($key, 1)) != "string"
|
|
42
|
+
and type-of(nth($key, 2)) != "string"
|
|
43
|
+
{
|
|
44
|
+
|
|
45
|
+
// only apply display rule if the key is the default
|
|
46
|
+
@if is-default($key) or $key == "container" {
|
|
47
|
+
|
|
48
|
+
display: block;
|
|
133
49
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
@if is-highest-breakpoint($calcKey) {
|
|
139
|
-
@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
|
|
140
|
-
width: calc-width($calcKey, $calcSpan);
|
|
141
|
-
@content;
|
|
142
|
-
}
|
|
143
|
-
} @else {
|
|
144
|
-
@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) {
|
|
145
|
-
width: calc-width($calcKey, $calcSpan);
|
|
146
|
-
@content;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
} @else {
|
|
50
|
+
} @else if length($key) > 1 or type-of($key) != "string" {
|
|
51
|
+
|
|
52
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
53
|
+
$calcKey: steal-key($i);
|
|
154
54
|
|
|
155
|
-
|
|
55
|
+
@if is-default($calcKey) {
|
|
56
|
+
display: block;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// apply individually if foundation is not set globally, but is set to true in config
|
|
62
|
+
@if get-value(settings, border-box-sizing) == true and $flint__foundation == "nonexistant" {
|
|
63
|
+
-moz-box-sizing: border-box;
|
|
64
|
+
-webkit-box-sizing: border-box;
|
|
65
|
+
box-sizing: border-box;
|
|
156
66
|
|
|
157
|
-
|
|
67
|
+
// warn to either set a global foundation, or turn border-box-sizing off
|
|
68
|
+
@if global-variable-exists(global-foundation-is-set) == false {
|
|
69
|
+
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global flint(foundation) rule, or turn border-box-sizing to false in your config file.";
|
|
158
70
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
$calcShift: $shift;
|
|
71
|
+
// declare global variable so only a single warning prints out
|
|
72
|
+
$global-foundation-is-set: true !global;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
164
75
|
|
|
165
|
-
|
|
76
|
+
// check if center container is set to true
|
|
77
|
+
@if $key == "container" {
|
|
78
|
+
float: none;
|
|
166
79
|
|
|
167
|
-
|
|
80
|
+
// check if max-width is set
|
|
81
|
+
@if get-value(settings, max-width) == true {
|
|
82
|
+
max-width: max(get-all-breakpoints()...);
|
|
83
|
+
} @else if type-of(get-value(settings, max-width)) == number {
|
|
84
|
+
max-width: get-value(settings, max-width);
|
|
85
|
+
}
|
|
168
86
|
|
|
169
|
-
|
|
87
|
+
@if get-value(settings, center-container) == true {
|
|
88
|
+
margin-right: auto;
|
|
89
|
+
margin-left: auto;
|
|
90
|
+
} @else {
|
|
91
|
+
margin-right: 0;
|
|
92
|
+
margin-left: 0;
|
|
93
|
+
}
|
|
170
94
|
|
|
171
|
-
|
|
95
|
+
} @else {
|
|
172
96
|
|
|
173
|
-
|
|
174
|
-
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
175
|
-
@content;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
97
|
+
@if is-default($key) {
|
|
178
98
|
|
|
179
|
-
|
|
99
|
+
float: unquote(get-value(settings, float-style));
|
|
180
100
|
|
|
181
|
-
|
|
182
|
-
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
183
|
-
@content;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
101
|
+
} @else if length($key) > 1 or type-of($key) != "string" {
|
|
186
102
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
}
|
|
103
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
104
|
+
$calcKey: steal-key($i);
|
|
190
105
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
} @else if length($key) == 1 and length($span) == 1 {
|
|
199
|
-
|
|
200
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
201
|
-
|
|
202
|
-
$calcKey: steal-key($i);
|
|
203
|
-
$calcSpan: $key;
|
|
204
|
-
$calcContext: $span;
|
|
205
|
-
$calcGutter: $gutter;
|
|
206
|
-
$calcShift: $shift;
|
|
106
|
+
@if is-default($calcKey) {
|
|
107
|
+
float: unquote(get-value(settings, float-style));
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
207
113
|
|
|
208
|
-
|
|
114
|
+
// Recursive shorthand without context
|
|
115
|
+
// -------------------------------------------------------------------------------
|
|
116
|
+
// @param $span [Value] : span
|
|
117
|
+
// -------------------------------------------------------------------------------
|
|
118
|
+
// @output [Styles...]
|
|
209
119
|
|
|
210
|
-
|
|
120
|
+
@if is-number($key) and length($key) == 1 or $key == "container" {
|
|
211
121
|
|
|
212
|
-
|
|
122
|
+
@if $key == "container" {
|
|
213
123
|
|
|
214
|
-
|
|
124
|
+
@if get-value(settings, grid) == "fixed" {
|
|
215
125
|
|
|
216
|
-
|
|
217
|
-
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
218
|
-
@content;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
126
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
221
127
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
// Recursive shorthand with differing context
|
|
235
|
-
// -------------------------------------------------------------------------------
|
|
236
|
-
// @param $span [Value] : span
|
|
237
|
-
// @param $context [Values...] : context of span for each breakpoint
|
|
238
|
-
// -------------------------------------------------------------------------------
|
|
239
|
-
// @output [Styles...]
|
|
240
|
-
|
|
241
|
-
} @else if length($key) == 1 and length($span) > 1 {
|
|
242
|
-
|
|
243
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
244
|
-
|
|
245
|
-
$calcKey: steal-key($i);
|
|
246
|
-
$calcSpan: $key;
|
|
247
|
-
$calcContext: $span;
|
|
248
|
-
$calcGutter: $gutter;
|
|
249
|
-
$calcShift: $shift;
|
|
128
|
+
$calcKey: steal-key($i);
|
|
129
|
+
$calcSpan: $key;
|
|
130
|
+
$calcContext: $span;
|
|
131
|
+
$calcGutter: $gutter;
|
|
132
|
+
$calcShift: $shift;
|
|
250
133
|
|
|
251
|
-
|
|
134
|
+
@if is-default($calcKey) {
|
|
252
135
|
|
|
253
|
-
|
|
136
|
+
width: calc-width($calcKey, $calcSpan);
|
|
137
|
+
@content;
|
|
254
138
|
|
|
255
|
-
|
|
139
|
+
} @else {
|
|
256
140
|
|
|
257
|
-
|
|
141
|
+
@if is-highest-breakpoint($calcKey) {
|
|
258
142
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
143
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
144
|
+
width: calc-width($calcKey, $calcSpan);
|
|
145
|
+
@content;
|
|
146
|
+
}
|
|
264
147
|
|
|
265
|
-
|
|
148
|
+
} @else {
|
|
266
149
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
150
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
151
|
+
width: calc-width($calcKey, $calcSpan);
|
|
152
|
+
@content;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
} @else {
|
|
161
|
+
|
|
162
|
+
@if length($key) == 1 and $span == NULL {
|
|
163
|
+
|
|
164
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
165
|
+
|
|
166
|
+
$calcKey: steal-key($i);
|
|
167
|
+
$calcSpan: $key;
|
|
168
|
+
$calcContext: $span;
|
|
169
|
+
$calcGutter: $gutter;
|
|
170
|
+
$calcShift: $shift;
|
|
171
|
+
|
|
172
|
+
@if is-default($calcKey) {
|
|
173
|
+
|
|
174
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
175
|
+
@content;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
} @else {
|
|
179
|
+
|
|
180
|
+
@if get-value(settings, grid) == "fluid" {
|
|
181
|
+
|
|
182
|
+
@if is-highest-breakpoint($calcKey) {
|
|
183
|
+
|
|
184
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
|
|
185
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
186
|
+
@content;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
} @else {
|
|
191
|
+
|
|
192
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
193
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
194
|
+
@content;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
201
|
+
|
|
202
|
+
@if is-highest-breakpoint($calcKey) {
|
|
203
|
+
|
|
204
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
205
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
206
|
+
@content;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
} @else {
|
|
211
|
+
|
|
212
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
213
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
214
|
+
@content;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
// Recursive shorthand with identical context
|
|
225
|
+
// -------------------------------------------------------------------------------
|
|
226
|
+
// @param $span [Value] : span
|
|
227
|
+
// @param $context [Value] : context of span
|
|
228
|
+
// -------------------------------------------------------------------------------
|
|
229
|
+
// @output [Styles...]
|
|
230
|
+
|
|
231
|
+
} @else if length($key) == 1 and length($span) == 1 {
|
|
232
|
+
|
|
233
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
234
|
+
|
|
235
|
+
$calcKey: steal-key($i);
|
|
236
|
+
$calcSpan: $key;
|
|
237
|
+
$calcContext: $span;
|
|
238
|
+
$calcGutter: $gutter;
|
|
239
|
+
$calcShift: $shift;
|
|
240
|
+
|
|
241
|
+
@if is-default($calcKey) {
|
|
242
|
+
|
|
243
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
244
|
+
@content;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
} @else {
|
|
248
|
+
|
|
249
|
+
@if get-value(settings, grid) == "fluid" {
|
|
250
|
+
|
|
251
|
+
@if is-highest-breakpoint($calcKey) {
|
|
252
|
+
|
|
253
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
|
|
254
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
255
|
+
@content;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
} @else {
|
|
260
|
+
|
|
261
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
262
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
263
|
+
@content;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
270
|
+
|
|
271
|
+
@if is-highest-breakpoint($calcKey) {
|
|
272
|
+
|
|
273
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
274
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
275
|
+
@content;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
} @else {
|
|
280
|
+
|
|
281
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
282
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
283
|
+
@content;
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
// Recursive shorthand with differing context
|
|
294
|
+
// -------------------------------------------------------------------------------
|
|
295
|
+
// @param $span [Value] : span
|
|
296
|
+
// @param $context [Values...] : context of span for each breakpoint
|
|
297
|
+
// -------------------------------------------------------------------------------
|
|
298
|
+
// @output [Styles...]
|
|
299
|
+
|
|
300
|
+
} @else if length($key) == 1 and length($span) > 1 {
|
|
301
|
+
|
|
302
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
303
|
+
|
|
304
|
+
$calcKey: steal-key($i);
|
|
305
|
+
$calcSpan: $key;
|
|
306
|
+
$calcContext: $span;
|
|
307
|
+
$calcGutter: $gutter;
|
|
308
|
+
$calcShift: $shift;
|
|
309
|
+
|
|
310
|
+
@if is-default($calcKey) {
|
|
311
|
+
|
|
312
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
313
|
+
@content;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
} @else {
|
|
317
|
+
|
|
318
|
+
@if get-value(settings, grid) == "fluid" {
|
|
319
|
+
|
|
320
|
+
@if is-highest-breakpoint($calcKey) {
|
|
321
|
+
|
|
322
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
|
|
323
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
324
|
+
@content;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
} @else {
|
|
329
|
+
|
|
330
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
331
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
332
|
+
@content;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
339
|
+
|
|
340
|
+
@if is-highest-breakpoint($calcKey) {
|
|
341
|
+
|
|
342
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
343
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
344
|
+
@content;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
} @else {
|
|
349
|
+
|
|
350
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
351
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
352
|
+
@content;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
// Variable shorthand
|
|
366
|
+
// -------------------------------------------------------------------------------
|
|
367
|
+
// @param $span [Values...] : span for each breakpoint
|
|
368
|
+
// -------------------------------------------------------------------------------
|
|
369
|
+
// @output [Styles...]
|
|
370
|
+
|
|
371
|
+
@if length($key) > 1
|
|
372
|
+
and $span == NULL
|
|
373
|
+
and is-not-string(nth($key, 1))
|
|
374
|
+
and is-not-string(nth($key, 2))
|
|
375
|
+
{
|
|
376
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
377
|
+
|
|
378
|
+
$calcKey: steal-key($i);
|
|
379
|
+
$calcSpan: $key;
|
|
380
|
+
$calcContext: $context;
|
|
381
|
+
$calcGutter: $gutter;
|
|
382
|
+
$calcShift: $shift;
|
|
383
|
+
|
|
384
|
+
@if is-default($calcKey) {
|
|
385
|
+
|
|
386
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
387
|
+
@content;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
} @else {
|
|
391
|
+
|
|
392
|
+
@if get-value(settings, grid) == "fluid" {
|
|
393
|
+
|
|
394
|
+
@if is-highest-breakpoint($calcKey) {
|
|
395
|
+
|
|
396
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
|
|
397
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
398
|
+
@content;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
} @else {
|
|
403
|
+
|
|
404
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
405
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
406
|
+
@content;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
413
|
+
|
|
414
|
+
@if is-highest-breakpoint($calcKey) {
|
|
415
|
+
|
|
416
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
417
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
418
|
+
@content;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
} @else {
|
|
423
|
+
|
|
424
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
425
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
426
|
+
@content;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
// Variable shorthand with context
|
|
437
|
+
// -------------------------------------------------------------------------------
|
|
438
|
+
// @param $span [Values...] : span for each breakpoint
|
|
439
|
+
// @param $context [Values...] : context for each breakpoint
|
|
440
|
+
// -------------------------------------------------------------------------------
|
|
441
|
+
// @output [Styles...]
|
|
442
|
+
|
|
443
|
+
} @else if length($key) > 1
|
|
444
|
+
and length($span) >= 1
|
|
445
|
+
and is-not-string(nth($key, 1))
|
|
446
|
+
and is-not-string(nth($key, 2))
|
|
447
|
+
{
|
|
448
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
449
|
+
|
|
450
|
+
$calcKey: steal-key($i);
|
|
451
|
+
$calcSpan: $key;
|
|
452
|
+
$calcContext: $span;
|
|
453
|
+
$calcGutter: $gutter;
|
|
454
|
+
$calcShift: $shift;
|
|
455
|
+
|
|
456
|
+
@if is-default($calcKey) {
|
|
457
|
+
|
|
458
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
459
|
+
@content;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
} @else {
|
|
463
|
+
|
|
464
|
+
@if get-value(settings, grid) == "fluid" {
|
|
465
|
+
|
|
466
|
+
@if is-highest-breakpoint($calcKey) {
|
|
467
|
+
|
|
468
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
|
|
469
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
470
|
+
@content;
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
} @else {
|
|
475
|
+
|
|
476
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
477
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
478
|
+
@content;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
485
|
+
|
|
486
|
+
@if is-highest-breakpoint($calcKey) {
|
|
487
|
+
|
|
488
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
|
|
489
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
490
|
+
@content;
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
} @else {
|
|
495
|
+
|
|
496
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
|
|
497
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
498
|
+
@content;
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
// Call by key
|
|
509
|
+
// -------------------------------------------------------------------------------
|
|
510
|
+
// @param $key [Breakpoint] : breakpoint key
|
|
511
|
+
// @param $span [Value] : span
|
|
512
|
+
// -------------------------------------------------------------------------------
|
|
513
|
+
// @output [Styles...]
|
|
514
|
+
|
|
515
|
+
} @else if exists($flint, $key) and $span != NULL and $context == NULL {
|
|
516
|
+
|
|
517
|
+
$calcKey: $key;
|
|
518
|
+
$calcSpan: $span;
|
|
519
|
+
$calcContext: $context;
|
|
520
|
+
$calcGutter: $gutter;
|
|
521
|
+
$calcShift: $shift;
|
|
522
|
+
|
|
523
|
+
@if is-default($calcKey) {
|
|
524
|
+
|
|
525
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
526
|
+
@content;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
} @else {
|
|
530
|
+
|
|
531
|
+
@if get-value(settings, grid) == "fluid" {
|
|
532
|
+
|
|
533
|
+
@if is-highest-breakpoint($calcKey) {
|
|
534
|
+
|
|
535
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) {
|
|
536
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
537
|
+
@content;
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
} @else {
|
|
542
|
+
|
|
543
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
|
|
544
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
545
|
+
@content;
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
552
|
+
|
|
553
|
+
@if is-highest-breakpoint($calcKey) {
|
|
554
|
+
|
|
555
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
|
|
556
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
557
|
+
@content;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
} @else {
|
|
562
|
+
|
|
563
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) {
|
|
564
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
565
|
+
@content;
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
// Call by key with context
|
|
575
|
+
// -------------------------------------------------------------------------------
|
|
576
|
+
// @param $key [Breakpoint] : breakpoint key
|
|
577
|
+
// @param $span [Value] : span
|
|
578
|
+
// @param $context [Value] : context of span
|
|
579
|
+
// -------------------------------------------------------------------------------
|
|
580
|
+
// @output [Styles...]
|
|
581
|
+
|
|
582
|
+
} @else if exists($flint, $key) and $span != NULL and $context != NULL {
|
|
583
|
+
|
|
584
|
+
$calcKey: $key;
|
|
585
|
+
$calcSpan: $span;
|
|
586
|
+
$calcContext: $context;
|
|
587
|
+
$calcGutter: $gutter;
|
|
588
|
+
$calcShift: $shift;
|
|
589
|
+
|
|
590
|
+
@if is-default($calcKey) {
|
|
591
|
+
|
|
592
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
593
|
+
@content;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
} @else {
|
|
597
|
+
|
|
598
|
+
@if get-value(settings, grid) == "fluid" {
|
|
599
|
+
|
|
600
|
+
@if is-highest-breakpoint($calcKey) {
|
|
601
|
+
|
|
602
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) {
|
|
603
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
604
|
+
@content;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
} @else {
|
|
609
|
+
|
|
610
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
|
|
611
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
612
|
+
@content;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
619
|
+
|
|
620
|
+
@if is-highest-breakpoint($calcKey) {
|
|
621
|
+
|
|
622
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
|
|
623
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
624
|
+
@content;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
} @else {
|
|
629
|
+
|
|
630
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) {
|
|
631
|
+
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
632
|
+
@content;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
// Wrap @content in media queries
|
|
642
|
+
// -------------------------------------------------------------------------------
|
|
643
|
+
// @param $key [Values...] : defines how o make up media query
|
|
644
|
+
// @param ["from $x to $y"] | ["greater than $x"] | ["less than $x"] | ["for $x $y $z"]
|
|
645
|
+
// -------------------------------------------------------------------------------
|
|
646
|
+
// @output [Media Query]
|
|
647
|
+
|
|
648
|
+
} @else if exists($flint, $key) and $span == NULL and $context == NULL or length($key) > 1 {
|
|
649
|
+
|
|
650
|
+
// only key-x breakpoint
|
|
651
|
+
@if length($key) == 1 {
|
|
652
|
+
@if get-value(settings, grid) == "fluid" {
|
|
653
|
+
@if is-highest-breakpoint($key) == true {
|
|
654
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + 1) ) {
|
|
655
|
+
@content;
|
|
656
|
+
}
|
|
657
|
+
} @else {
|
|
658
|
+
@media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $key, get-index($key)) ) {
|
|
659
|
+
@content;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
663
|
+
@if is-highest-breakpoint($key) == true {
|
|
664
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) {
|
|
665
|
+
@content;
|
|
666
|
+
}
|
|
667
|
+
} @else {
|
|
668
|
+
@media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) and ( max-width: (calc-breakpoint(prev, $key, get-index($key)) - 1) ) {
|
|
669
|
+
@content;
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
// from key breakpoint to infinity
|
|
675
|
+
} @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
|
|
676
|
+
@if get-value(settings, grid) == "fluid" {
|
|
677
|
+
@media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) {
|
|
678
|
+
@content;
|
|
679
|
+
}
|
|
680
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
681
|
+
@media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) {
|
|
682
|
+
@content;
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
// from key-x breakpoint to key-y breakpoint
|
|
687
|
+
} @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
688
|
+
@if get-value(settings, grid) == "fluid" {
|
|
689
|
+
@media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) and ( max-width: calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) ) {
|
|
690
|
+
@content;
|
|
691
|
+
}
|
|
692
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
693
|
+
@media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint(prev, nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, 1)) ) {
|
|
694
|
+
@content;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
// greater than key-x breakpoint
|
|
699
|
+
} @else if length($key) > 1 and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
700
|
+
@if get-value(settings, grid) == "fluid" {
|
|
701
|
+
@media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) + 1) ) {
|
|
702
|
+
@content;
|
|
703
|
+
}
|
|
704
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
705
|
+
@media only screen and ( min-width: calc-breakpoint(prev, nth($key, 3), get-index(nth($key, 3))) ) {
|
|
706
|
+
@content;
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
// (y)px greater than key-x breakpoint
|
|
711
|
+
} @else if length($key) > 1 and nth($key, 2) == "greater" and nth($key, 3) == "than" {
|
|
712
|
+
@media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) {
|
|
713
|
+
@content;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
// less than key-x breakpoint
|
|
717
|
+
} @else if length($key) > 1 and nth($key, 1) == "less" and nth($key, 2) == "than" {
|
|
718
|
+
@if get-value(settings, grid) == "fluid" {
|
|
719
|
+
@media only screen and ( max-width: calc-breakpoint(next, nth($key, 3), get-index(nth($key, 3))) ) {
|
|
720
|
+
@content;
|
|
721
|
+
}
|
|
722
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
723
|
+
@media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) - 1) ) {
|
|
724
|
+
@content;
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
// (y)px less than key-x breakpoint
|
|
729
|
+
} @else if length($key) > 1 and nth($key, 2) == "less" and nth($key, 3) == "than" {
|
|
730
|
+
@media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) {
|
|
731
|
+
@content;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
// for key-x key-y key-z
|
|
735
|
+
} @else if length($key) > 1 and nth($key, 1) == "for" {
|
|
736
|
+
@for $i from 1 through length($key) {
|
|
737
|
+
@if exists($flint, nth($key, $i)) {
|
|
738
|
+
@if get-value(settings, grid) == "fluid" {
|
|
739
|
+
@if is-highest-breakpoint(nth($key, $i)) == true {
|
|
740
|
+
@media only screen and ( min-width: (calc-breakpoint(next, nth($key, $i), get-index(nth($key, $i))) + 1) ) {
|
|
741
|
+
@content;
|
|
742
|
+
}
|
|
743
|
+
} @else {
|
|
744
|
+
@media only screen and ( min-width: (calc-breakpoint(next, nth($key, $i), get-index(nth($key, $i))) + if(is-lowest-breakpoint($key), 0, 1)) ) and ( max-width: calc-breakpoint(alias, nth($key, $i), get-index(nth($key, $i))) ) {
|
|
745
|
+
@content;
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
} @else if get-value(settings, grid) == "fixed" {
|
|
750
|
+
@if get-value(settings, grid) == "fluid" {
|
|
751
|
+
@if is-highest-breakpoint(nth($key, $i)) == true {
|
|
752
|
+
@media only screen and ( min-width: calc-breakpoint(alias, nth($key, $i), get-index(nth($key, $i))) ) {
|
|
753
|
+
@content;
|
|
754
|
+
}
|
|
755
|
+
} @else {
|
|
756
|
+
@media only screen and ( min-width: calc-breakpoint(alias, nth($key, $i), get-index(nth($key, $i))) ) and ( max-width: (calc-breakpoint(next, nth($key, $i), get-index(nth($key, $i))) - 1) ) {
|
|
757
|
+
@content;
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
}
|
|
551
765
|
}
|