flint-gs 1.3.6 → 1.4.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 +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
|
}
|