flint-gs 1.3.6 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +63 -99
- data/lib/flint.rb +3 -3
- data/stylesheets/flint/config/_config.scss +51 -23
- data/stylesheets/flint/functions/helpers/_helpers.scss +24 -4
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +1 -1
- data/stylesheets/flint/functions/lib/_calc-margin.scss +2 -2
- data/stylesheets/flint/functions/lib/_calc-width.scss +2 -2
- data/stylesheets/flint/functions/lib/_fluid-width.scss +3 -3
- data/stylesheets/flint/functions/lib/_get-index.scss +1 -1
- data/stylesheets/flint/functions/lib/_get-instance-value.scss +3 -3
- data/stylesheets/flint/functions/lib/_get-substring.scss +1 -1
- data/stylesheets/flint/functions/lib/_get-value.scss +3 -3
- data/stylesheets/flint/functions/lib/_instance.scss +7 -7
- data/stylesheets/flint/functions/lib/_map-fetch.scss +8 -10
- data/stylesheets/flint/functions/lib/_next-index.scss +1 -1
- data/stylesheets/flint/functions/lib/_steal-key.scss +1 -1
- data/stylesheets/flint/functions/lib/_steal-values.scss +3 -3
- data/stylesheets/flint/functions/lib/_string-to-number.scss +1 -1
- data/stylesheets/flint/globals/_globals.scss +7 -4
- data/stylesheets/flint/mixins/lib/_flint-calculate.scss +8 -8
- data/stylesheets/flint/mixins/lib/_flint-main.scss +93 -67
- data/stylesheets/flint/mixins/lib/_new-instance.scss +7 -7
- metadata +2 -2
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
// @dependence `fluid-width()`
|
|
5
5
|
// -------------------------------------------------------------------------------
|
|
6
6
|
// @param $key [string] : key for lookup
|
|
7
|
-
// @param $span [
|
|
8
|
-
// @param $context [
|
|
7
|
+
// @param $span [number] : span value of element
|
|
8
|
+
// @param $context [number] : context value of element
|
|
9
9
|
// -------------------------------------------------------------------------------
|
|
10
10
|
// @return calculated value | false
|
|
11
11
|
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
// @dependence `fluid-width()`
|
|
5
5
|
// -------------------------------------------------------------------------------
|
|
6
6
|
// @param $key [string] : key for lookup
|
|
7
|
-
// @param $span [
|
|
8
|
-
// @param $context [
|
|
7
|
+
// @param $span [number] : span value of element
|
|
8
|
+
// @param $context [number] : context value of element
|
|
9
9
|
// -------------------------------------------------------------------------------
|
|
10
10
|
// @return calculated value | false
|
|
11
11
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Convert fixed to fluid width
|
|
2
2
|
//--------------------------------------------------------------------------------
|
|
3
|
-
// @param $target [
|
|
4
|
-
// @param $context [
|
|
3
|
+
// @param $target [number] : target
|
|
4
|
+
// @param $context [number] : context
|
|
5
5
|
// -------------------------------------------------------------------------------
|
|
6
|
-
// @return [
|
|
6
|
+
// @return [number]
|
|
7
7
|
|
|
8
8
|
@function fluid-width($target, $context) {
|
|
9
9
|
@return ($target / $context) * 100%;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @param $key [string] : breakpoint key
|
|
6
6
|
// -------------------------------------------------------------------------------
|
|
7
|
-
// @return [
|
|
7
|
+
// @return [number]
|
|
8
8
|
|
|
9
9
|
@function get-index($key) {
|
|
10
10
|
@for $i from 1 through (length(map-fetch($flint, "config")) - 1) {
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
// @warning : all values @returned are strings and must be converted with `to-number()`
|
|
6
6
|
// -------------------------------------------------------------------------------
|
|
7
7
|
// @param $key [string] : key
|
|
8
|
-
// @param $value [
|
|
9
|
-
// @param $deep [
|
|
8
|
+
// @param $value [number] : value
|
|
9
|
+
// @param $deep [number] : fetch deep value
|
|
10
10
|
// -------------------------------------------------------------------------------
|
|
11
11
|
// @return [string]
|
|
12
12
|
|
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
} @else {
|
|
17
17
|
@return map-fetch($flint__instances, get-family-instance($key) $value $deep);
|
|
18
18
|
}
|
|
19
|
-
}
|
|
19
|
+
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// @dependence `string-to-list()`
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @param $full-string [string] : string that contains substring
|
|
6
|
-
// @param $depth [
|
|
6
|
+
// @param $depth [number | string] : depth of substring
|
|
7
7
|
// -------------------------------------------------------------------------------
|
|
8
8
|
// @return [string]
|
|
9
9
|
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
// @dependence `map-fetch()`
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @param $key [string] : breakpoint key
|
|
6
|
-
// @param $value [string] :
|
|
6
|
+
// @param $value [string] : key of value
|
|
7
7
|
// -------------------------------------------------------------------------------
|
|
8
|
-
// @return
|
|
8
|
+
// @return [literal]
|
|
9
9
|
|
|
10
10
|
@function get-value($key, $value: null) {
|
|
11
11
|
@if $value == null {
|
|
@@ -13,4 +13,4 @@
|
|
|
13
13
|
} @else {
|
|
14
14
|
@return map-fetch($flint, "config" $key $value);
|
|
15
15
|
}
|
|
16
|
-
}
|
|
16
|
+
}
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
// @dependence `get-value()`
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @param $key [string] : computed breakpoint of instance
|
|
6
|
-
// @param $span [
|
|
7
|
-
// @param $context [
|
|
8
|
-
// @param $gutter [
|
|
9
|
-
// @param $shift [
|
|
10
|
-
// @param $outputWidth [
|
|
11
|
-
// @param $outputMarginRight [
|
|
12
|
-
// @param $outputMarginLeft [
|
|
6
|
+
// @param $span [number] : computed span of instance
|
|
7
|
+
// @param $context [number] : computed context of instance
|
|
8
|
+
// @param $gutter [number] : computed gutter of instance
|
|
9
|
+
// @param $shift [number] : computed shift of instance
|
|
10
|
+
// @param $outputWidth [number] : computed width of instance
|
|
11
|
+
// @param $outputMarginRight [number] : computed right margin of instance
|
|
12
|
+
// @param $outputMarginLeft [number] : computed left margin of instance
|
|
13
13
|
// -------------------------------------------------------------------------------
|
|
14
14
|
// @return instance map
|
|
15
15
|
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
// Fetch value from key in map
|
|
2
2
|
// -------------------------------------------------------------------------------
|
|
3
|
-
// @
|
|
3
|
+
// @param $map [map] : map to fetch from
|
|
4
|
+
// @param $keys [list] : list of keys
|
|
4
5
|
// -------------------------------------------------------------------------------
|
|
5
|
-
// @
|
|
6
|
-
// @param $n [list] : keys
|
|
7
|
-
// -------------------------------------------------------------------------------
|
|
8
|
-
// @return fetched value | false
|
|
6
|
+
// @return fetched literal | false
|
|
9
7
|
|
|
10
8
|
@function map-fetch($map, $keys) {
|
|
11
9
|
$key: nth($keys, 1);
|
|
12
10
|
$length: length($keys);
|
|
13
11
|
$value: map-get($map, $key);
|
|
14
12
|
|
|
15
|
-
// check if
|
|
13
|
+
// check if the key was incorrect, meaning the map doesn't exist
|
|
16
14
|
@if $value == null {
|
|
17
|
-
@warn "Invalid arguments
|
|
15
|
+
@warn "Invalid arguments passed to function: map-fetch(#{$map}, #{$keys}). One or more of the keys do not exist.";
|
|
18
16
|
@return false;
|
|
19
17
|
}
|
|
20
18
|
|
|
@@ -24,12 +22,12 @@
|
|
|
24
22
|
|
|
25
23
|
@for $i from 2 through $length {
|
|
26
24
|
$rest: append($rest, nth($keys, $i))
|
|
27
|
-
}
|
|
25
|
+
}
|
|
28
26
|
|
|
29
27
|
@return map-fetch($value, $rest);
|
|
30
|
-
|
|
28
|
+
|
|
31
29
|
} @else {
|
|
32
30
|
@return $value;
|
|
33
31
|
}
|
|
34
32
|
}
|
|
35
|
-
}
|
|
33
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Returns next indexed key based on passed index
|
|
2
2
|
// -------------------------------------------------------------------------------
|
|
3
|
-
// @param $index [
|
|
3
|
+
// @param $index [number] : index
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @return [string] | null
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Steal key based on index number
|
|
2
2
|
//--------------------------------------------------------------------------------
|
|
3
|
-
// @param $index [
|
|
3
|
+
// @param $index [number] : index of key
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
5
|
// @return [string]
|
|
6
6
|
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
// @dependence `map-fetch()`
|
|
4
4
|
// @dependence `get-value()`
|
|
5
5
|
// -------------------------------------------------------------------------------
|
|
6
|
-
// @param $index [
|
|
7
|
-
// @param $value [
|
|
6
|
+
// @param $index [number] : index of breakpoint key in config
|
|
7
|
+
// @param $value [number] : value
|
|
8
8
|
// -------------------------------------------------------------------------------
|
|
9
|
-
// @return [
|
|
9
|
+
// @return [number]
|
|
10
10
|
|
|
11
11
|
@function steal-values($index, $value) {
|
|
12
12
|
@for $n from 1 through (length(map-fetch($flint, config)) - 1) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
// @param $number [string] : number
|
|
6
6
|
// @param $unit [string] : unit
|
|
7
7
|
// -------------------------------------------------------------------------------
|
|
8
|
-
// @return [
|
|
8
|
+
// @return [number]
|
|
9
9
|
|
|
10
10
|
@function num-length($number, $unit) {
|
|
11
11
|
$strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Set global variable to check if foundation has been applied globally
|
|
2
2
|
$flint__foundation: "nonexistant" !global;
|
|
3
3
|
|
|
4
|
-
//
|
|
4
|
+
// Gather all keys, breakpoints and column counts
|
|
5
5
|
$flint__all__keys: get-all-keys() !global;
|
|
6
6
|
$flint__all__breakpoints: get-all-breakpoints() !global;
|
|
7
7
|
$flint__all__columns: get-all-columns() !global;
|
|
8
8
|
|
|
9
|
-
//
|
|
9
|
+
// Keep track of all instances of mixin
|
|
10
10
|
$flint__instance-count: 0 !global;
|
|
11
|
-
$flint__instances: () !global;
|
|
11
|
+
$flint__instances: () !global;
|
|
12
|
+
|
|
13
|
+
// Font size for em calculation
|
|
14
|
+
$flint__base-font-size: 16px !global;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// Outputs calculated styles
|
|
2
2
|
// -------------------------------------------------------------------------------
|
|
3
|
-
// @param $width [
|
|
4
|
-
// @param $margin-right [
|
|
5
|
-
// @param $margin-left [
|
|
3
|
+
// @param $width [number] : width
|
|
4
|
+
// @param $margin-right [number] : right margin
|
|
5
|
+
// @param $margin-left [number] : left margin
|
|
6
6
|
// -------------------------------------------------------------------------------
|
|
7
7
|
// @output outputs styles
|
|
8
8
|
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
// Calculate widths, save all variables to instance
|
|
17
17
|
// -------------------------------------------------------------------------------
|
|
18
18
|
// @param $calcKey [string] : breakpoint key
|
|
19
|
-
// @param $calcSpan [
|
|
20
|
-
// @param $calcContext [
|
|
21
|
-
// @param $calcGutter [
|
|
22
|
-
// @param $calcShift [
|
|
23
|
-
// @param $i [
|
|
19
|
+
// @param $calcSpan [number] : span value
|
|
20
|
+
// @param $calcContext [number] : context value
|
|
21
|
+
// @param $calcGutter [number] : gutter value
|
|
22
|
+
// @param $calcShift [number] : shift value
|
|
23
|
+
// @param $i [number] : index if variable length is > 1
|
|
24
24
|
// -------------------------------------------------------------------------------
|
|
25
25
|
// @output calculated styles
|
|
26
26
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
// Initial check to see what type of instance this is
|
|
10
10
|
// -------------------------------------------------------------------------------
|
|
11
|
-
// @param $key [string |
|
|
11
|
+
// @param $key [string | number | list] : checks type of instance
|
|
12
12
|
// -------------------------------------------------------------------------------
|
|
13
13
|
// @output foundation styles | container styles | calculated styles
|
|
14
14
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
@if get-value("settings", "border-box-sizing") {
|
|
19
19
|
$flint__foundation: "existant" !global;
|
|
20
20
|
}
|
|
21
|
-
|
|
21
|
+
|
|
22
22
|
// foundation is now globally existant
|
|
23
23
|
@if $flint__foundation == "existant" {
|
|
24
24
|
@at-root *, *:before, *:after {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
@include clearfix();
|
|
35
35
|
|
|
36
|
-
} @else if
|
|
36
|
+
} @else if
|
|
37
37
|
$key == "container"
|
|
38
38
|
or exists($flint, $key) and $span != null
|
|
39
39
|
or length($key) == 1 and exists($flint, $key) == false
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
|
|
60
60
|
// apply individually if foundation is not set globally, but is set to true in config
|
|
61
61
|
@if get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
|
|
62
62
|
-moz-box-sizing: border-box;
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
// check if max-width is set
|
|
80
80
|
@if get-value("settings", "max-width") {
|
|
81
81
|
max-width: max(get-all-breakpoints()...);
|
|
82
|
-
// check if it's an
|
|
82
|
+
// check if it's an number
|
|
83
83
|
} @else if is-number(get-value("settings", "max-width")) {
|
|
84
84
|
max-width: get-value("settings", "max-width");
|
|
85
85
|
}
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
|
|
114
114
|
// Recursive shorthand without context
|
|
115
115
|
// -------------------------------------------------------------------------------
|
|
116
|
-
// @param $span [
|
|
116
|
+
// @param $span [number] : span value
|
|
117
117
|
// -------------------------------------------------------------------------------
|
|
118
118
|
// @output calculated styles
|
|
119
119
|
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
|
|
148
148
|
} @else {
|
|
149
149
|
|
|
150
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
150
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
151
151
|
width: calc-width($calcKey, $calcSpan);
|
|
152
152
|
@content;
|
|
153
153
|
}
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
|
|
182
182
|
@if is-highest-breakpoint($calcKey) {
|
|
183
183
|
|
|
184
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
|
|
184
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
185
185
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
186
186
|
@content;
|
|
187
187
|
}
|
|
@@ -189,12 +189,12 @@
|
|
|
189
189
|
|
|
190
190
|
} @else {
|
|
191
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) ) {
|
|
192
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
|
|
193
193
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
194
194
|
@content;
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
|
-
|
|
197
|
+
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -209,21 +209,23 @@
|
|
|
209
209
|
|
|
210
210
|
} @else {
|
|
211
211
|
|
|
212
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
212
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
213
213
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
214
214
|
@content;
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
|
-
|
|
217
|
+
|
|
218
218
|
}
|
|
219
|
-
|
|
219
|
+
|
|
220
|
+
} @else {
|
|
221
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
220
222
|
}
|
|
221
223
|
}
|
|
222
224
|
}
|
|
223
225
|
|
|
224
226
|
// Recursive shorthand with identical context
|
|
225
227
|
// -------------------------------------------------------------------------------
|
|
226
|
-
// @param $span [
|
|
228
|
+
// @param $span [number] : span value
|
|
227
229
|
// @param $context [Value] : context value of span
|
|
228
230
|
// -------------------------------------------------------------------------------
|
|
229
231
|
// @output calculated styles
|
|
@@ -250,7 +252,7 @@
|
|
|
250
252
|
|
|
251
253
|
@if is-highest-breakpoint($calcKey) {
|
|
252
254
|
|
|
253
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
|
|
255
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
254
256
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
255
257
|
@content;
|
|
256
258
|
}
|
|
@@ -258,12 +260,12 @@
|
|
|
258
260
|
|
|
259
261
|
} @else {
|
|
260
262
|
|
|
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) ) {
|
|
263
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
|
|
262
264
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
263
265
|
@content;
|
|
264
266
|
}
|
|
265
267
|
}
|
|
266
|
-
|
|
268
|
+
|
|
267
269
|
}
|
|
268
270
|
|
|
269
271
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -278,21 +280,23 @@
|
|
|
278
280
|
|
|
279
281
|
} @else {
|
|
280
282
|
|
|
281
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
283
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
282
284
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
283
285
|
@content;
|
|
284
286
|
}
|
|
285
287
|
}
|
|
286
|
-
|
|
288
|
+
|
|
287
289
|
}
|
|
288
|
-
|
|
290
|
+
|
|
291
|
+
} @else {
|
|
292
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
289
293
|
}
|
|
290
294
|
}
|
|
291
295
|
}
|
|
292
296
|
|
|
293
297
|
// Recursive shorthand with differing context
|
|
294
298
|
// -------------------------------------------------------------------------------
|
|
295
|
-
// @param $span [
|
|
299
|
+
// @param $span [number] : span value
|
|
296
300
|
// @param $context [list] : context value of span for each breakpoint
|
|
297
301
|
// -------------------------------------------------------------------------------
|
|
298
302
|
// @output calculated styles
|
|
@@ -319,7 +323,7 @@
|
|
|
319
323
|
|
|
320
324
|
@if is-highest-breakpoint($calcKey) {
|
|
321
325
|
|
|
322
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
|
|
326
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
323
327
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
324
328
|
@content;
|
|
325
329
|
}
|
|
@@ -327,12 +331,12 @@
|
|
|
327
331
|
|
|
328
332
|
} @else {
|
|
329
333
|
|
|
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) ) {
|
|
334
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
|
|
331
335
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
332
336
|
@content;
|
|
333
337
|
}
|
|
334
338
|
}
|
|
335
|
-
|
|
339
|
+
|
|
336
340
|
}
|
|
337
341
|
|
|
338
342
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -347,14 +351,16 @@
|
|
|
347
351
|
|
|
348
352
|
} @else {
|
|
349
353
|
|
|
350
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
354
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
351
355
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
352
356
|
@content;
|
|
353
357
|
}
|
|
354
358
|
}
|
|
355
|
-
|
|
359
|
+
|
|
356
360
|
}
|
|
357
|
-
|
|
361
|
+
|
|
362
|
+
} @else {
|
|
363
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
358
364
|
}
|
|
359
365
|
}
|
|
360
366
|
}
|
|
@@ -394,7 +400,7 @@
|
|
|
394
400
|
|
|
395
401
|
@if is-highest-breakpoint($calcKey) {
|
|
396
402
|
|
|
397
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
|
|
403
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
398
404
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
399
405
|
@content;
|
|
400
406
|
}
|
|
@@ -402,12 +408,12 @@
|
|
|
402
408
|
|
|
403
409
|
} @else {
|
|
404
410
|
|
|
405
|
-
@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) ) {
|
|
411
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
|
|
406
412
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
407
413
|
@content;
|
|
408
414
|
}
|
|
409
415
|
}
|
|
410
|
-
|
|
416
|
+
|
|
411
417
|
}
|
|
412
418
|
|
|
413
419
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -422,21 +428,23 @@
|
|
|
422
428
|
|
|
423
429
|
} @else {
|
|
424
430
|
|
|
425
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
431
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
426
432
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
427
433
|
@content;
|
|
428
434
|
}
|
|
429
435
|
}
|
|
430
|
-
|
|
436
|
+
|
|
431
437
|
}
|
|
432
|
-
|
|
438
|
+
|
|
439
|
+
} @else {
|
|
440
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
433
441
|
}
|
|
434
442
|
}
|
|
435
443
|
}
|
|
436
444
|
|
|
437
445
|
// Variable shorthand with context
|
|
438
446
|
// -------------------------------------------------------------------------------
|
|
439
|
-
// @param $span [list] : span value for each breakpoint
|
|
447
|
+
// @param $span [list] : span value for each breakpoint
|
|
440
448
|
// @param $context [list] : context value for each breakpoint
|
|
441
449
|
// -------------------------------------------------------------------------------
|
|
442
450
|
// @output calculated styles
|
|
@@ -467,7 +475,7 @@
|
|
|
467
475
|
|
|
468
476
|
@if is-highest-breakpoint($calcKey) {
|
|
469
477
|
|
|
470
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
|
|
478
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
471
479
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
472
480
|
@content;
|
|
473
481
|
}
|
|
@@ -475,12 +483,12 @@
|
|
|
475
483
|
|
|
476
484
|
} @else {
|
|
477
485
|
|
|
478
|
-
@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) ) {
|
|
486
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
|
|
479
487
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
480
488
|
@content;
|
|
481
489
|
}
|
|
482
490
|
}
|
|
483
|
-
|
|
491
|
+
|
|
484
492
|
}
|
|
485
493
|
|
|
486
494
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -495,14 +503,16 @@
|
|
|
495
503
|
|
|
496
504
|
} @else {
|
|
497
505
|
|
|
498
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
|
|
506
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
499
507
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
|
|
500
508
|
@content;
|
|
501
509
|
}
|
|
502
510
|
}
|
|
503
|
-
|
|
511
|
+
|
|
504
512
|
}
|
|
505
|
-
|
|
513
|
+
|
|
514
|
+
} @else {
|
|
515
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
506
516
|
}
|
|
507
517
|
}
|
|
508
518
|
}
|
|
@@ -510,11 +520,11 @@
|
|
|
510
520
|
// Call by alias
|
|
511
521
|
// -------------------------------------------------------------------------------
|
|
512
522
|
// @param $key [string] : breakpoint alias
|
|
513
|
-
// @param $span [
|
|
523
|
+
// @param $span [number] : span value
|
|
514
524
|
// -------------------------------------------------------------------------------
|
|
515
525
|
// @output calculated styles
|
|
516
526
|
|
|
517
|
-
} @else if exists($flint, $key) and $span != null and $context == null {
|
|
527
|
+
} @else if exists($flint, $key) and $span != null and $context == null {
|
|
518
528
|
|
|
519
529
|
$calcKey: $key;
|
|
520
530
|
$calcSpan: $span;
|
|
@@ -534,7 +544,7 @@
|
|
|
534
544
|
|
|
535
545
|
@if is-highest-breakpoint($calcKey) {
|
|
536
546
|
|
|
537
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
|
|
547
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
538
548
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
539
549
|
@content;
|
|
540
550
|
}
|
|
@@ -542,12 +552,12 @@
|
|
|
542
552
|
|
|
543
553
|
} @else {
|
|
544
554
|
|
|
545
|
-
@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)) ) {
|
|
555
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
|
|
546
556
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
547
557
|
@content;
|
|
548
558
|
}
|
|
549
559
|
}
|
|
550
|
-
|
|
560
|
+
|
|
551
561
|
}
|
|
552
562
|
|
|
553
563
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -562,27 +572,29 @@
|
|
|
562
572
|
|
|
563
573
|
} @else {
|
|
564
574
|
|
|
565
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
|
|
575
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
566
576
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
567
577
|
@content;
|
|
568
578
|
}
|
|
569
579
|
}
|
|
570
|
-
|
|
580
|
+
|
|
571
581
|
}
|
|
572
|
-
|
|
582
|
+
|
|
583
|
+
} @else {
|
|
584
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
573
585
|
}
|
|
574
586
|
}
|
|
575
587
|
|
|
576
588
|
// Call by alias with context
|
|
577
589
|
// -------------------------------------------------------------------------------
|
|
578
590
|
// @param $key [string] : breakpoint alias
|
|
579
|
-
// @param $span [
|
|
580
|
-
// @param $context [
|
|
591
|
+
// @param $span [number] : span value
|
|
592
|
+
// @param $context [number] : context value of span
|
|
581
593
|
// -------------------------------------------------------------------------------
|
|
582
594
|
// @output calculated styles
|
|
583
595
|
|
|
584
596
|
} @else if exists($flint, $key) and $span != null and $context != null {
|
|
585
|
-
|
|
597
|
+
|
|
586
598
|
$calcKey: $key;
|
|
587
599
|
$calcSpan: $span;
|
|
588
600
|
$calcContext: $context;
|
|
@@ -601,7 +613,7 @@
|
|
|
601
613
|
|
|
602
614
|
@if is-highest-breakpoint($calcKey) {
|
|
603
615
|
|
|
604
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
|
|
616
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
605
617
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
606
618
|
@content;
|
|
607
619
|
}
|
|
@@ -609,12 +621,12 @@
|
|
|
609
621
|
|
|
610
622
|
} @else {
|
|
611
623
|
|
|
612
|
-
@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)) ) {
|
|
624
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
|
|
613
625
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
614
626
|
@content;
|
|
615
627
|
}
|
|
616
628
|
}
|
|
617
|
-
|
|
629
|
+
|
|
618
630
|
}
|
|
619
631
|
|
|
620
632
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
@@ -629,20 +641,22 @@
|
|
|
629
641
|
|
|
630
642
|
} @else {
|
|
631
643
|
|
|
632
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
|
|
644
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
633
645
|
@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
|
|
634
646
|
@content;
|
|
635
647
|
}
|
|
636
648
|
}
|
|
637
|
-
|
|
649
|
+
|
|
638
650
|
}
|
|
639
651
|
|
|
652
|
+
} @else {
|
|
653
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
640
654
|
}
|
|
641
655
|
}
|
|
642
656
|
|
|
643
657
|
// Wrap @content in media queries
|
|
644
658
|
// -------------------------------------------------------------------------------
|
|
645
|
-
// @param $key [list of strings] : defines how to make up media query
|
|
659
|
+
// @param $key [list of strings] : defines how to make up media query
|
|
646
660
|
// -------------------------------------------------------------------------------
|
|
647
661
|
// @output styles wrapped in media query
|
|
648
662
|
|
|
@@ -656,11 +670,11 @@
|
|
|
656
670
|
@if length($key) == 1 {
|
|
657
671
|
@if get-value("settings", "grid") == "fluid" {
|
|
658
672
|
@if is-highest-breakpoint($key) {
|
|
659
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + 1) ) {
|
|
673
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
660
674
|
@content;
|
|
661
675
|
}
|
|
662
676
|
} @else {
|
|
663
|
-
@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)) ) {
|
|
677
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $key, get-index($key)) ) {
|
|
664
678
|
@content;
|
|
665
679
|
}
|
|
666
680
|
}
|
|
@@ -674,6 +688,8 @@
|
|
|
674
688
|
@content;
|
|
675
689
|
}
|
|
676
690
|
}
|
|
691
|
+
} @else {
|
|
692
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
677
693
|
}
|
|
678
694
|
|
|
679
695
|
// From $key breakpoint to infinity
|
|
@@ -683,13 +699,15 @@
|
|
|
683
699
|
|
|
684
700
|
} @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
|
|
685
701
|
@if get-value("settings", "grid") == "fluid" {
|
|
686
|
-
@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)) ) {
|
|
702
|
+
@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, if(get-config-unit() == "em", em(1px), 1))) ) {
|
|
687
703
|
@content;
|
|
688
704
|
}
|
|
689
705
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
690
706
|
@media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) {
|
|
691
707
|
@content;
|
|
692
708
|
}
|
|
709
|
+
} @else {
|
|
710
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
693
711
|
}
|
|
694
712
|
|
|
695
713
|
// From $key-x breakpoint to $key-y breakpoint
|
|
@@ -699,13 +717,15 @@
|
|
|
699
717
|
|
|
700
718
|
} @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
701
719
|
@if get-value("settings", "grid") == "fluid" {
|
|
702
|
-
@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))) ) {
|
|
720
|
+
@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, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) ) {
|
|
703
721
|
@content;
|
|
704
722
|
}
|
|
705
723
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
706
|
-
@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)) ) {
|
|
724
|
+
@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, if(get-config-unit() == "em", em(1px), 1))) ) {
|
|
707
725
|
@content;
|
|
708
726
|
}
|
|
727
|
+
} @else {
|
|
728
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
709
729
|
}
|
|
710
730
|
|
|
711
731
|
// Greater than $key breakpoint
|
|
@@ -715,13 +735,15 @@
|
|
|
715
735
|
|
|
716
736
|
} @else if length($key) > 1 and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
717
737
|
@if get-value("settings", "grid") == "fluid" {
|
|
718
|
-
@media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) + 1) ) {
|
|
738
|
+
@media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
719
739
|
@content;
|
|
720
740
|
}
|
|
721
741
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
722
742
|
@media only screen and ( min-width: calc-breakpoint("prev", nth($key, 3), get-index(nth($key, 3))) ) {
|
|
723
743
|
@content;
|
|
724
744
|
}
|
|
745
|
+
} @else {
|
|
746
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
725
747
|
}
|
|
726
748
|
|
|
727
749
|
// x[unit] greater than $key breakpoint
|
|
@@ -745,9 +767,11 @@
|
|
|
745
767
|
@content;
|
|
746
768
|
}
|
|
747
769
|
} @else if get-value("settings", "grid") == "fixed" {
|
|
748
|
-
@media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) - 1) ) {
|
|
770
|
+
@media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
749
771
|
@content;
|
|
750
772
|
}
|
|
773
|
+
} @else {
|
|
774
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
751
775
|
}
|
|
752
776
|
|
|
753
777
|
// x[unit] less than $key breakpoint
|
|
@@ -772,11 +796,11 @@
|
|
|
772
796
|
@if exists($flint, $calcKey) {
|
|
773
797
|
@if get-value("settings", "grid") == "fluid" {
|
|
774
798
|
@if is-highest-breakpoint($calcKey) {
|
|
775
|
-
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
|
|
799
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
776
800
|
@content;
|
|
777
801
|
}
|
|
778
802
|
} @else {
|
|
779
|
-
@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)) ) {
|
|
803
|
+
@media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
|
|
780
804
|
@content;
|
|
781
805
|
}
|
|
782
806
|
}
|
|
@@ -786,10 +810,12 @@
|
|
|
786
810
|
@content;
|
|
787
811
|
}
|
|
788
812
|
} @else {
|
|
789
|
-
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
|
|
813
|
+
@media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
|
|
790
814
|
@content;
|
|
791
815
|
}
|
|
792
816
|
}
|
|
817
|
+
} @else {
|
|
818
|
+
@warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
793
819
|
}
|
|
794
820
|
}
|
|
795
821
|
}
|