flint-gs 1.7.2 → 1.8.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 +11 -5
- data/lib/flint.rb +2 -2
- data/stylesheets/flint/globals/_globals.scss +1 -1
- data/stylesheets/flint/mixins/_mixins.scss +1 -0
- data/stylesheets/flint/mixins/lib/_box-sizing.scss +14 -0
- data/stylesheets/flint/mixins/lib/_calculate.scss +26 -7
- data/stylesheets/flint/mixins/lib/_clearfix.scss +15 -9
- data/stylesheets/flint/mixins/lib/_main.scss +200 -550
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6d3d740711745817f4afa2cb46a3b39c2e62aa2a
|
|
4
|
+
data.tar.gz: 8dedb3aa43b439b8c1026023ae6720b44a801c9c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d477bed5e3b8e642550cb652fc7e96c0e779ca9f3b9721f6b7dd5a0898c3cafdbe390d9f145af2e495ccf5bd9faec24ac75f90795c739ce1403f915831b9f603
|
|
7
|
+
data.tar.gz: 87b693caa081a1e2ca7b0763d6848ccb1f8b42c0731d55db9fa1768bde3a9ec7a6a8b9a68670cda8e2bd42084d5d6dead5ff89cddc3be4c54f65e9692386b3bc
|
data/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**Flint is designed to be a flexible layout toolkit that developers can use for any responsive grid-based project.** Built on Sass 3.3, Flint is capable of complex responsive layouts customized at each breakpoint; all while using a single mixin, having minimal output, as well as being completely semantic. All of your layout settings are housed in a simple config file that is immensely customizable. Flint will only output the code you need, and nothing else. We handle the hard stuff, so you can focus on the rest.
|
|
4
4
|
|
|
5
|
-
Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/
|
|
5
|
+
Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/228449011362bcdfe38c)!
|
|
6
6
|
|
|
7
7
|
Enjoy.
|
|
8
8
|
|
|
@@ -23,7 +23,7 @@ Enjoy.
|
|
|
23
23
|
* [Wrapping in media queries](#wrapping-in-media-queries)
|
|
24
24
|
* [Call by alias](#call-by-alias)
|
|
25
25
|
* [Gutter modifiers](#gutter-modifiers)
|
|
26
|
-
* [Shift modifiers](#shift)
|
|
26
|
+
* [Shift modifiers](#shift) _[Deprecated]_
|
|
27
27
|
1. [Syntax support](#syntax-support)
|
|
28
28
|
1. [Authors](#authors)
|
|
29
29
|
1. [License](#license)
|
|
@@ -143,13 +143,15 @@ $flint: (
|
|
|
143
143
|
|
|
144
144
|
### Foundation
|
|
145
145
|
|
|
146
|
-
|
|
146
|
+
_Flint will attempt to use a local box-sizing mixin named `box-sizing`. If one is not found, it will use it's own._
|
|
147
|
+
|
|
148
|
+
A foundation instance will output a global `box-sizing: border-box` declaration. If you selected `"border-box-sizing": true`, then it is *advised* to create a global foundation instance.
|
|
147
149
|
|
|
148
150
|
```scss
|
|
149
151
|
@include _(foundation);
|
|
150
152
|
```
|
|
151
153
|
|
|
152
|
-
|
|
154
|
+
This way your output won't be riddled with `box-sizing` declarations every time you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
|
|
153
155
|
|
|
154
156
|
### Container
|
|
155
157
|
|
|
@@ -175,6 +177,8 @@ Outputs,
|
|
|
175
177
|
|
|
176
178
|
### Clear
|
|
177
179
|
|
|
180
|
+
_Flint will attempt to use a local clearfix mixin named `clearfix`. If one is not found, it will use it's own._
|
|
181
|
+
|
|
178
182
|
Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes packaged with a micro-clearfix function.
|
|
179
183
|
|
|
180
184
|
```scss
|
|
@@ -746,6 +750,8 @@ Outputs,
|
|
|
746
750
|
|
|
747
751
|
### Shift
|
|
748
752
|
|
|
753
|
+
_The `$shift` modifier has been deprecated as of `1.8.0`. It is set to be removed in version `2.0`._
|
|
754
|
+
|
|
749
755
|
Much like the gutter modifiers, you may also call in a shift parameter using the `$shift` variable. This will cause the element to shift the desired amount of columns using positive/negative left margins.
|
|
750
756
|
|
|
751
757
|
```scss
|
|
@@ -889,7 +895,7 @@ function parses the selector string (for example, `.block__element__element`) li
|
|
|
889
895
|
|
|
890
896
|
This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
|
|
891
897
|
instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `flint-support-syntax-<syntax-name>` function
|
|
892
|
-
and hook into it through the config `"
|
|
898
|
+
and hook into it through the config `"support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
|
|
893
899
|
order to parse the selector string.
|
|
894
900
|
|
|
895
901
|
#### Officially supported syntaxes
|
data/lib/flint.rb
CHANGED
|
@@ -23,7 +23,7 @@ $flint__support-syntax: if(flint-exists($flint, "support-syntax"), flint-get-val
|
|
|
23
23
|
|
|
24
24
|
// Use Ruby functions?
|
|
25
25
|
// ----
|
|
26
|
-
$flint__use-ruby-functions: if(flint-use-ruby-functions(), true, false) !global;
|
|
26
|
+
$flint__use-ruby-functions: if(flint-use-ruby-functions() == true, true, false) !global;
|
|
27
27
|
|
|
28
28
|
// Cached selector instance lists
|
|
29
29
|
// ----
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Box sizing
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param $type [string] : border-box type, defaults to "border-box"
|
|
4
|
+
// -------------------------------------------------------------------------------
|
|
5
|
+
// @uses : local box-sizing mixin if available
|
|
6
|
+
// -------------------------------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
@mixin flint-box-sizing($type: "border-box") {
|
|
9
|
+
@if mixin-exists("box-sizing") {
|
|
10
|
+
@include box-sizing($type);
|
|
11
|
+
} @else {
|
|
12
|
+
box-sizing: #{$type};
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -24,9 +24,16 @@
|
|
|
24
24
|
// -------------------------------------------------------------------------------
|
|
25
25
|
// @output calculated styles
|
|
26
26
|
|
|
27
|
-
@mixin flint-calculate($
|
|
27
|
+
@mixin flint-calculate($key, $span, $context, $gutter, $shift, $i: null) {
|
|
28
28
|
|
|
29
|
-
//
|
|
29
|
+
// Define local vars
|
|
30
|
+
$calc-key: $key;
|
|
31
|
+
$calc-span: $span;
|
|
32
|
+
$calc-context: $context;
|
|
33
|
+
$calc-gutter: $gutter;
|
|
34
|
+
$calc-shift: $shift;
|
|
35
|
+
|
|
36
|
+
// Define default values
|
|
30
37
|
$output-width: 0;
|
|
31
38
|
$output-margin-right: 0;
|
|
32
39
|
$output-margin-left: 0;
|
|
@@ -38,27 +45,29 @@
|
|
|
38
45
|
$cached: false;
|
|
39
46
|
|
|
40
47
|
// Check if any arguments are lists if called from loop
|
|
48
|
+
// ----
|
|
41
49
|
@if $i != null {
|
|
42
50
|
|
|
43
|
-
@if
|
|
51
|
+
@if flint-types-in-list($calc-key, "number") {
|
|
44
52
|
$calc-key: nth($calc-key, $i);
|
|
45
53
|
}
|
|
46
|
-
@if
|
|
54
|
+
@if flint-types-in-list($calc-span, "number") {
|
|
47
55
|
$calc-span: nth($calc-span, $i);
|
|
48
56
|
}
|
|
49
|
-
@if
|
|
57
|
+
@if flint-types-in-list($calc-context, "number") {
|
|
50
58
|
$calc-context: nth($calc-context, $i);
|
|
51
59
|
}
|
|
52
|
-
@if
|
|
60
|
+
@if flint-types-in-list($calc-gutter, "string") {
|
|
53
61
|
$calc-gutter: nth($calc-gutter, $i);
|
|
54
62
|
}
|
|
55
|
-
@if
|
|
63
|
+
@if flint-types-in-list($calc-shift, "number") {
|
|
56
64
|
$calc-shift: nth($calc-shift, $i);
|
|
57
65
|
}
|
|
58
66
|
|
|
59
67
|
}
|
|
60
68
|
|
|
61
69
|
// Check for cached results
|
|
70
|
+
// ----
|
|
62
71
|
@if $calc-context != "auto" and $calc-span != 0 {
|
|
63
72
|
@if map-has-key($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}") {
|
|
64
73
|
|
|
@@ -81,6 +90,10 @@
|
|
|
81
90
|
@include _($calc-key) {
|
|
82
91
|
display: none;
|
|
83
92
|
}
|
|
93
|
+
// If we're hiding the default, but span is a list, define floats for other queries
|
|
94
|
+
@if flint-is-list($span) {
|
|
95
|
+
float: unquote(flint-get-value("settings", "float-style"));
|
|
96
|
+
}
|
|
84
97
|
} @else {
|
|
85
98
|
display: none;
|
|
86
99
|
}
|
|
@@ -90,6 +103,12 @@
|
|
|
90
103
|
|
|
91
104
|
} @else {
|
|
92
105
|
|
|
106
|
+
// Define floats if key is default, or this is a single instance call
|
|
107
|
+
// ----
|
|
108
|
+
@if flint-is-default($calc-key) or $i == null {
|
|
109
|
+
float: unquote(flint-get-value("settings", "float-style"));
|
|
110
|
+
}
|
|
111
|
+
|
|
93
112
|
// Only run through if cache search was unsuccessful
|
|
94
113
|
@if $cached == false {
|
|
95
114
|
|
|
@@ -2,18 +2,24 @@
|
|
|
2
2
|
// -------------------------------------------------------------------------------
|
|
3
3
|
// @documentation http://nicolasgallagher.com/micro-clearfix-hack/
|
|
4
4
|
// -------------------------------------------------------------------------------
|
|
5
|
+
// @uses : local clearfix mixin if available
|
|
6
|
+
// -------------------------------------------------------------------------------
|
|
5
7
|
|
|
6
8
|
@mixin flint-clearfix {
|
|
7
|
-
|
|
9
|
+
@if mixin-exists("clearfix") {
|
|
10
|
+
@include clearfix;
|
|
11
|
+
} @else {
|
|
12
|
+
zoom: 1;
|
|
8
13
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
&:before, &:after {
|
|
15
|
+
content: "\0020";
|
|
16
|
+
display: block;
|
|
17
|
+
height: 0;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
15
20
|
|
|
16
|
-
|
|
17
|
-
|
|
21
|
+
&:after {
|
|
22
|
+
clear: both;
|
|
23
|
+
}
|
|
18
24
|
}
|
|
19
25
|
}
|
|
@@ -16,14 +16,17 @@
|
|
|
16
16
|
$shift: null
|
|
17
17
|
) {
|
|
18
18
|
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
// Emit deprecation warnings
|
|
20
|
+
// ----
|
|
21
|
+
@if $shift != null {
|
|
22
|
+
@warn "The shift modifier has been deprecated due to it having such little-use and being a pain to maintain. It is set to be removed in version 2.0";
|
|
23
|
+
}
|
|
24
24
|
|
|
25
25
|
// Foundation
|
|
26
|
-
//
|
|
26
|
+
// -------------------------------------------------------------------------------
|
|
27
|
+
// @param $key [string] : foundation instance
|
|
28
|
+
// -------------------------------------------------------------------------------
|
|
29
|
+
// @output global box-sizing
|
|
27
30
|
@if $key == "foundation" {
|
|
28
31
|
|
|
29
32
|
// Apply global border-box-sizing if set to true
|
|
@@ -35,9 +38,7 @@
|
|
|
35
38
|
// ----
|
|
36
39
|
@if $flint__foundation == "existant" {
|
|
37
40
|
@at-root *, *:before, *:after {
|
|
38
|
-
-
|
|
39
|
-
-webkit-box-sizing: border-box;
|
|
40
|
-
box-sizing: border-box;
|
|
41
|
+
@include flint-box-sizing();
|
|
41
42
|
@content;
|
|
42
43
|
}
|
|
43
44
|
}
|
|
@@ -48,139 +49,104 @@
|
|
|
48
49
|
|
|
49
50
|
@include flint-clearfix();
|
|
50
51
|
|
|
51
|
-
//
|
|
52
|
-
//
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
or flint-types-in-list($key, "number") or type-of($key) == "number"
|
|
59
|
-
{
|
|
52
|
+
// Container
|
|
53
|
+
// -------------------------------------------------------------------------------
|
|
54
|
+
// @param $key [string] : container instance
|
|
55
|
+
// -------------------------------------------------------------------------------
|
|
56
|
+
// @output container styles
|
|
57
|
+
} @else if $key == "container" {
|
|
58
|
+
float: none;
|
|
60
59
|
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
// Apply individually if foundation is not set globally, but is set to true in config
|
|
61
|
+
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
|
|
62
|
+
@include flint-box-sizing();
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
65
|
+
@if global-variable-exists("global-foundation-is-set") == false {
|
|
66
|
+
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _('foundation') rule, or turn border-box-sizing to false in your config file.";
|
|
65
67
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
// Loop over all keys, set to default
|
|
69
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
70
|
-
$calc-key: flint-steal-key($i);
|
|
71
|
-
|
|
72
|
-
@if flint-is-default($calc-key) {
|
|
73
|
-
display: block;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
68
|
+
// Declare global variable so only a single warning prints out
|
|
69
|
+
$global-foundation-is-set: true !global;
|
|
76
70
|
}
|
|
71
|
+
}
|
|
77
72
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
-webkit-box-sizing: border-box;
|
|
82
|
-
box-sizing: border-box;
|
|
83
|
-
|
|
84
|
-
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
85
|
-
@if global-variable-exists("global-foundation-is-set") == false {
|
|
86
|
-
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _(foundation) rule, or turn border-box-sizing to false in your config file.";
|
|
87
|
-
|
|
88
|
-
// Declare global variable so only a single warning prints out
|
|
89
|
-
$global-foundation-is-set: true !global;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
73
|
+
// Output container for each breakpoint if fixed grid
|
|
74
|
+
// ----
|
|
75
|
+
@if flint-get-value("settings", "grid") == "fixed" {
|
|
92
76
|
|
|
93
|
-
|
|
94
|
-
// -------------------------------------------------------------------------------
|
|
95
|
-
// @param $key [string] : container instance
|
|
96
|
-
// -------------------------------------------------------------------------------
|
|
97
|
-
// @output container styles
|
|
77
|
+
@for $i from 1 through length($flint__all__keys) {
|
|
98
78
|
|
|
99
|
-
|
|
100
|
-
|
|
79
|
+
// Set up variables
|
|
80
|
+
$calc-key: flint-steal-key($i);
|
|
81
|
+
$calcContainer: $key;
|
|
101
82
|
|
|
102
|
-
//
|
|
103
|
-
|
|
104
|
-
@if flint-get-value("settings", "grid") == "fixed" {
|
|
83
|
+
// Key is default, no media queries
|
|
84
|
+
@if flint-is-default($calc-key) {
|
|
105
85
|
|
|
106
|
-
|
|
86
|
+
width: flint-calc-width($calc-key, $calcContainer);
|
|
87
|
+
@content;
|
|
107
88
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
$calcContainer: $key;
|
|
89
|
+
// Not default, wrap in media queries
|
|
90
|
+
} @else {
|
|
111
91
|
|
|
112
|
-
|
|
113
|
-
|
|
92
|
+
// Highest breakpoint? No max-width
|
|
93
|
+
@if flint-is-highest-breakpoint($calc-key) {
|
|
114
94
|
|
|
95
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
115
96
|
width: flint-calc-width($calc-key, $calcContainer);
|
|
116
97
|
@content;
|
|
98
|
+
}
|
|
117
99
|
|
|
118
|
-
|
|
119
|
-
} @else {
|
|
120
|
-
|
|
121
|
-
// Highest breakpoint? No max-width
|
|
122
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
123
|
-
|
|
124
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
125
|
-
width: flint-calc-width($calc-key, $calcContainer);
|
|
126
|
-
@content;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
} @else {
|
|
130
|
-
|
|
131
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
132
|
-
width: flint-calc-width($calc-key, $calcContainer);
|
|
133
|
-
@content;
|
|
134
|
-
}
|
|
100
|
+
} @else {
|
|
135
101
|
|
|
136
|
-
|
|
102
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
103
|
+
width: flint-calc-width($calc-key, $calcContainer);
|
|
104
|
+
@content;
|
|
137
105
|
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
// Check if max-width is set
|
|
142
|
-
// ----
|
|
143
|
-
@if flint-get-value("settings", "max-width") {
|
|
144
106
|
|
|
145
|
-
// Check if it's an number
|
|
146
|
-
@if flint-is-number(flint-get-value("settings", "max-width")) {
|
|
147
|
-
max-width: flint-get-value("settings", "max-width");
|
|
148
|
-
// Then use highest breakpoint
|
|
149
|
-
} @else {
|
|
150
|
-
max-width: max(flint-get-all-breakpoints()...);
|
|
151
107
|
}
|
|
152
|
-
|
|
153
108
|
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
154
111
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
margin-right: auto;
|
|
159
|
-
margin-left: auto;
|
|
160
|
-
} @else {
|
|
161
|
-
margin-right: 0;
|
|
162
|
-
margin-left: 0;
|
|
163
|
-
}
|
|
112
|
+
// Check if max-width is set
|
|
113
|
+
// ----
|
|
114
|
+
@if flint-get-value("settings", "max-width") {
|
|
164
115
|
|
|
165
|
-
//
|
|
166
|
-
|
|
116
|
+
// Check if it's an number
|
|
117
|
+
@if flint-is-number(flint-get-value("settings", "max-width")) {
|
|
118
|
+
max-width: flint-get-value("settings", "max-width");
|
|
119
|
+
// Then use highest breakpoint
|
|
167
120
|
} @else {
|
|
121
|
+
max-width: max(flint-get-all-breakpoints()...);
|
|
122
|
+
}
|
|
168
123
|
|
|
169
|
-
|
|
170
|
-
@if flint-is-default($key) {
|
|
124
|
+
}
|
|
171
125
|
|
|
172
|
-
|
|
126
|
+
// Center container is set
|
|
127
|
+
// ----
|
|
128
|
+
@if flint-get-value("settings", "center-container") {
|
|
129
|
+
margin-right: auto;
|
|
130
|
+
margin-left: auto;
|
|
131
|
+
} @else {
|
|
132
|
+
margin-right: 0;
|
|
133
|
+
margin-left: 0;
|
|
134
|
+
}
|
|
173
135
|
|
|
174
|
-
|
|
136
|
+
// Create a new instance, add to global instance map
|
|
137
|
+
// -------------------------------------------------------------------------------
|
|
138
|
+
} @else {
|
|
175
139
|
|
|
176
|
-
|
|
177
|
-
|
|
140
|
+
// Apply individually if foundation is not set globally, but is set to true in config
|
|
141
|
+
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
|
|
142
|
+
@include flint-box-sizing();
|
|
178
143
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
144
|
+
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
145
|
+
@if global-variable-exists("global-foundation-is-set") == false {
|
|
146
|
+
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _('foundation') rule, or turn border-box-sizing to false in your config file.";
|
|
147
|
+
|
|
148
|
+
// Declare global variable so only a single warning prints out
|
|
149
|
+
$global-foundation-is-set: true !global;
|
|
184
150
|
}
|
|
185
151
|
}
|
|
186
152
|
|
|
@@ -190,222 +156,27 @@
|
|
|
190
156
|
// @param $span [null] : null context value
|
|
191
157
|
// -------------------------------------------------------------------------------
|
|
192
158
|
// @output calculated styles
|
|
159
|
+
@if flint-is-number($key) and length($key) == 1 and $span == null
|
|
193
160
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
$calc-context: $span;
|
|
203
|
-
$calc-gutter: $gutter;
|
|
204
|
-
$calc-shift: $shift;
|
|
205
|
-
|
|
206
|
-
@if flint-is-default($calc-key) {
|
|
207
|
-
|
|
208
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
209
|
-
@content;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
} @else {
|
|
213
|
-
|
|
214
|
-
@if flint-get-value("settings", "grid") == "fluid" {
|
|
215
|
-
|
|
216
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
217
|
-
|
|
218
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
219
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
220
|
-
@content;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
} @else {
|
|
225
|
-
|
|
226
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
227
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
228
|
-
@content;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
235
|
-
|
|
236
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
237
|
-
|
|
238
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
239
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
240
|
-
@content;
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
} @else {
|
|
245
|
-
|
|
246
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
247
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
248
|
-
@content;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
} @else {
|
|
255
|
-
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
// Recursive shorthand with identical context
|
|
261
|
-
// -------------------------------------------------------------------------------
|
|
262
|
-
// @param $key [number] : span value
|
|
263
|
-
// @param $span [number] : context value of span
|
|
264
|
-
// -------------------------------------------------------------------------------
|
|
265
|
-
// @output calculated styles
|
|
266
|
-
|
|
267
|
-
} @else if length($span) == 1 and flint-is-number($span) or $span == "auto" {
|
|
268
|
-
|
|
269
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
270
|
-
|
|
271
|
-
$calc-key: flint-steal-key($i);
|
|
272
|
-
$calc-span: $key;
|
|
273
|
-
$calc-context: $span;
|
|
274
|
-
$calc-gutter: $gutter;
|
|
275
|
-
$calc-shift: $shift;
|
|
276
|
-
|
|
277
|
-
@if flint-is-default($calc-key) {
|
|
278
|
-
|
|
279
|
-
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
280
|
-
@content;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
} @else {
|
|
284
|
-
|
|
285
|
-
@if flint-get-value("settings", "grid") == "fluid" {
|
|
286
|
-
|
|
287
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
288
|
-
|
|
289
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
290
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
291
|
-
@content;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
} @else {
|
|
296
|
-
|
|
297
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
298
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
299
|
-
@content;
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
306
|
-
|
|
307
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
308
|
-
|
|
309
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
310
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
311
|
-
@content;
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
} @else {
|
|
316
|
-
|
|
317
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
318
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
319
|
-
@content;
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
} @else {
|
|
326
|
-
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
// Recursive shorthand with differing context
|
|
332
|
-
// -------------------------------------------------------------------------------
|
|
333
|
-
// @param $key [number] : span value
|
|
334
|
-
// @param $span [list] : context value of span for each breakpoint
|
|
335
|
-
// -------------------------------------------------------------------------------
|
|
336
|
-
// @throw [warning] : if length does not match number of breakpoints
|
|
337
|
-
// -------------------------------------------------------------------------------
|
|
338
|
-
// @output calculated styles
|
|
339
|
-
|
|
340
|
-
} @else if flint-types-in-list($span, "number") or $span == "auto" {
|
|
341
|
-
|
|
342
|
-
@if length($span) != length($flint__all__keys) and $span != "auto" {
|
|
343
|
-
@warn "Invalid argument length for context: #{length($span)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$span}";
|
|
344
|
-
} @else {
|
|
345
|
-
|
|
346
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
347
|
-
|
|
348
|
-
$calc-key: flint-steal-key($i);
|
|
349
|
-
$calc-span: $key;
|
|
350
|
-
$calc-context: $span;
|
|
351
|
-
$calc-gutter: $gutter;
|
|
352
|
-
$calc-shift: $shift;
|
|
353
|
-
|
|
354
|
-
@if flint-is-default($calc-key) {
|
|
355
|
-
|
|
356
|
-
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
357
|
-
@content;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
} @else {
|
|
361
|
-
|
|
362
|
-
@if flint-get-value("settings", "grid") == "fluid" {
|
|
363
|
-
|
|
364
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
365
|
-
|
|
366
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
367
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
368
|
-
@content;
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
} @else {
|
|
373
|
-
|
|
374
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
375
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
376
|
-
@content;
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
383
|
-
|
|
384
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
385
|
-
|
|
386
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
387
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
388
|
-
@content;
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
} @else {
|
|
393
|
-
|
|
394
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
395
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
396
|
-
@content;
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
}
|
|
161
|
+
// Recursive shorthand with identical context
|
|
162
|
+
// -------------------------------------------------------------------------------
|
|
163
|
+
// @param $key [number] : span value
|
|
164
|
+
// @param $span [number | string] : context value of span
|
|
165
|
+
// -------------------------------------------------------------------------------
|
|
166
|
+
// @output calculated styles
|
|
167
|
+
or flint-is-number($key) and length($key) == 1 and flint-is-number($span) and length($span) == 1
|
|
168
|
+
or flint-is-number($key) and length($key) == 1 and $span == "auto"
|
|
401
169
|
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
170
|
+
// Recursive shorthand with differing context
|
|
171
|
+
// -------------------------------------------------------------------------------
|
|
172
|
+
// @param $key [number] : span value
|
|
173
|
+
// @param $span [list | string] : context value of span for each breakpoint
|
|
174
|
+
// -------------------------------------------------------------------------------
|
|
175
|
+
// @throw [warning] : if length does not match number of breakpoints
|
|
176
|
+
// -------------------------------------------------------------------------------
|
|
177
|
+
// @output calculated styles
|
|
178
|
+
or flint-is-number($key) and length($key) == 1 and flint-types-in-list($span, "number")
|
|
179
|
+
or flint-is-number($key) and length($key) == 1 and $span == "auto"
|
|
409
180
|
|
|
410
181
|
// Variable shorthand
|
|
411
182
|
// -------------------------------------------------------------------------------
|
|
@@ -415,91 +186,28 @@
|
|
|
415
186
|
// @throw [warning] : if length does not match number of breakpoints
|
|
416
187
|
// -------------------------------------------------------------------------------
|
|
417
188
|
// @output calculated styles
|
|
418
|
-
|
|
419
|
-
} @else if flint-types-in-list($key, "number") and $span == null {
|
|
420
|
-
|
|
421
|
-
@if length($key) != length($flint__all__keys) {
|
|
422
|
-
@warn "Invalid argument length for column: #{length($key)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$key}";
|
|
423
|
-
} @else {
|
|
424
|
-
|
|
425
|
-
@for $i from 1 through length($flint__all__keys) {
|
|
426
|
-
|
|
427
|
-
$calc-key: flint-steal-key($i);
|
|
428
|
-
$calc-span: $key;
|
|
429
|
-
$calc-context: $context;
|
|
430
|
-
$calc-gutter: $gutter;
|
|
431
|
-
$calc-shift: $shift;
|
|
432
|
-
|
|
433
|
-
@if flint-is-default($calc-key) {
|
|
434
|
-
|
|
435
|
-
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
436
|
-
@content;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
} @else {
|
|
440
|
-
|
|
441
|
-
@if flint-get-value("settings", "grid") == "fluid" {
|
|
442
|
-
|
|
443
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
444
|
-
|
|
445
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
446
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
447
|
-
@content;
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
} @else {
|
|
452
|
-
|
|
453
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
454
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
455
|
-
@content;
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
462
|
-
|
|
463
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
464
|
-
|
|
465
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
466
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
467
|
-
@content;
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
} @else {
|
|
472
|
-
|
|
473
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
474
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
475
|
-
@content;
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
} @else {
|
|
482
|
-
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
}
|
|
189
|
+
or flint-types-in-list($key, "number") and $span == null
|
|
487
190
|
|
|
488
191
|
// Variable shorthand with context
|
|
489
192
|
// -------------------------------------------------------------------------------
|
|
490
193
|
// @param $key [list] : span value for each breakpoint
|
|
491
|
-
// @param $span [list] : context value for each breakpoint
|
|
194
|
+
// @param $span [list | string] : context value for each breakpoint
|
|
492
195
|
// -------------------------------------------------------------------------------
|
|
493
196
|
// @throw [warning] : if lengths do not match number of breakpoints
|
|
494
197
|
// -------------------------------------------------------------------------------
|
|
495
198
|
// @output calculated styles
|
|
199
|
+
or flint-types-in-list($key, "number") and flint-types-in-list($span, "number")
|
|
200
|
+
or flint-types-in-list($key, "number") and $span == "auto" {
|
|
496
201
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
202
|
+
// Emit warning for invalid argument lengths
|
|
203
|
+
@if flint-is-string($key) and length($key) == 1 {
|
|
204
|
+
@if not flint-exists($flint, $key) {
|
|
205
|
+
@warn "Invalid argument: #{$key}. Breakpoint does not exist. Please provide a valid argument.";
|
|
206
|
+
}
|
|
207
|
+
} @else if flint-types-in-list($key, "number") and length($key) != length($flint__all__keys) {
|
|
208
|
+
@warn "Invalid argument length for column: #{length($key)}. Please provide an argument for each breakpoint in your config (#{length($flint__all__keys)}). Your argument was: #{$key}";
|
|
209
|
+
} @else if flint-types-in-list($span, "number") and length($span) != length($flint__all__keys) {
|
|
210
|
+
@warn "Invalid argument length for context: #{length($span)}. Please provide an argument for each breakpoint in your config (#{length($flint__all__keys)}). Your argument was: #{$span}";
|
|
503
211
|
} @else {
|
|
504
212
|
|
|
505
213
|
@for $i from 1 through length($flint__all__keys) {
|
|
@@ -512,7 +220,7 @@
|
|
|
512
220
|
|
|
513
221
|
@if flint-is-default($calc-key) {
|
|
514
222
|
|
|
515
|
-
@include flint-calculate
|
|
223
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
516
224
|
@content;
|
|
517
225
|
}
|
|
518
226
|
|
|
@@ -522,7 +230,7 @@
|
|
|
522
230
|
|
|
523
231
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
524
232
|
|
|
525
|
-
@media
|
|
233
|
+
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
526
234
|
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
527
235
|
@content;
|
|
528
236
|
}
|
|
@@ -530,7 +238,7 @@
|
|
|
530
238
|
|
|
531
239
|
} @else {
|
|
532
240
|
|
|
533
|
-
@media
|
|
241
|
+
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
534
242
|
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
535
243
|
@content;
|
|
536
244
|
}
|
|
@@ -542,7 +250,7 @@
|
|
|
542
250
|
|
|
543
251
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
544
252
|
|
|
545
|
-
@media
|
|
253
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
546
254
|
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
547
255
|
@content;
|
|
548
256
|
}
|
|
@@ -550,7 +258,7 @@
|
|
|
550
258
|
|
|
551
259
|
} @else {
|
|
552
260
|
|
|
553
|
-
@media
|
|
261
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
554
262
|
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) {
|
|
555
263
|
@content;
|
|
556
264
|
}
|
|
@@ -569,136 +277,85 @@
|
|
|
569
277
|
// -------------------------------------------------------------------------------
|
|
570
278
|
// @param $key [string] : breakpoint alias
|
|
571
279
|
// @param $span [number] : span value
|
|
280
|
+
// @param $context [null] : context value of span
|
|
572
281
|
// -------------------------------------------------------------------------------
|
|
573
282
|
// @output calculated styles
|
|
574
|
-
|
|
575
|
-
} @else if flint-exists($flint, $key) and flint-is-number($span) and $context == null {
|
|
576
|
-
|
|
577
|
-
$calc-key: $key;
|
|
578
|
-
$calc-span: $span;
|
|
579
|
-
$calc-context: $context;
|
|
580
|
-
$calc-gutter: $gutter;
|
|
581
|
-
$calc-shift: $shift;
|
|
582
|
-
|
|
583
|
-
@if flint-is-default($calc-key) {
|
|
584
|
-
|
|
585
|
-
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
586
|
-
@content;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
} @else {
|
|
590
|
-
|
|
591
|
-
@if flint-get-value("settings", "grid") == "fluid" {
|
|
592
|
-
|
|
593
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
594
|
-
|
|
595
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
596
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
597
|
-
@content;
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
} @else {
|
|
602
|
-
|
|
603
|
-
@media only screen and ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
604
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
605
|
-
@content;
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
612
|
-
|
|
613
|
-
@if flint-is-highest-breakpoint($calc-key) {
|
|
614
|
-
|
|
615
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
616
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
617
|
-
@content;
|
|
618
|
-
}
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
} @else {
|
|
622
|
-
|
|
623
|
-
@media only screen and ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
624
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
625
|
-
@content;
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
} @else {
|
|
632
|
-
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
633
|
-
}
|
|
634
|
-
}
|
|
283
|
+
} @else if flint-exists($flint, $key) and flint-is-number($span) and $context == null
|
|
635
284
|
|
|
636
285
|
// Call by alias with context
|
|
637
286
|
// -------------------------------------------------------------------------------
|
|
638
287
|
// @param $key [string] : breakpoint alias
|
|
639
288
|
// @param $span [number] : span value
|
|
640
|
-
// @param $context [number] : context value of span
|
|
289
|
+
// @param $context [number | string] : context value of span
|
|
641
290
|
// -------------------------------------------------------------------------------
|
|
642
291
|
// @output calculated styles
|
|
292
|
+
or flint-exists($flint, $key) and flint-is-number($span) and flint-is-number($context)
|
|
293
|
+
or flint-exists($flint, $key) and flint-is-number($span) and $context == "auto" {
|
|
294
|
+
|
|
295
|
+
// Emit warning for invalid argument lengths
|
|
296
|
+
@if not length($span) == 1 {
|
|
297
|
+
@warn "Invalid argument length for column: #{length($span)}. Please provide a single argument for your breakpoint. Your argument was: #{$span}";
|
|
298
|
+
} @else if not length($context) == 1 {
|
|
299
|
+
@warn "Invalid argument length for context: #{length($context)}. Please provide a single argument for your breakpoint. Your argument was: #{$context}";
|
|
300
|
+
} @else {
|
|
643
301
|
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
$calc-gutter: $gutter;
|
|
650
|
-
$calc-shift: $shift;
|
|
302
|
+
$calc-key: $key;
|
|
303
|
+
$calc-span: $span;
|
|
304
|
+
$calc-context: $context;
|
|
305
|
+
$calc-gutter: $gutter;
|
|
306
|
+
$calc-shift: $shift;
|
|
651
307
|
|
|
652
|
-
|
|
308
|
+
@if flint-is-default($calc-key) {
|
|
653
309
|
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
310
|
+
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
311
|
+
@content;
|
|
312
|
+
}
|
|
657
313
|
|
|
658
|
-
|
|
314
|
+
} @else {
|
|
659
315
|
|
|
660
|
-
|
|
316
|
+
@if flint-get-value("settings", "grid") == "fluid" {
|
|
661
317
|
|
|
662
|
-
|
|
318
|
+
@if flint-is-highest-breakpoint($calc-key) {
|
|
663
319
|
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
320
|
+
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
321
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
322
|
+
@content;
|
|
323
|
+
}
|
|
667
324
|
}
|
|
668
|
-
}
|
|
669
325
|
|
|
670
|
-
|
|
326
|
+
} @else {
|
|
671
327
|
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
328
|
+
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
329
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
330
|
+
@content;
|
|
331
|
+
}
|
|
675
332
|
}
|
|
676
|
-
}
|
|
677
333
|
|
|
678
|
-
|
|
334
|
+
}
|
|
679
335
|
|
|
680
|
-
|
|
336
|
+
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
681
337
|
|
|
682
|
-
|
|
338
|
+
@if flint-is-highest-breakpoint($calc-key) {
|
|
683
339
|
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
340
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
341
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
342
|
+
@content;
|
|
343
|
+
}
|
|
687
344
|
}
|
|
688
|
-
}
|
|
689
345
|
|
|
690
|
-
|
|
346
|
+
} @else {
|
|
691
347
|
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
348
|
+
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
349
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) {
|
|
350
|
+
@content;
|
|
351
|
+
}
|
|
695
352
|
}
|
|
353
|
+
|
|
696
354
|
}
|
|
697
355
|
|
|
356
|
+
} @else {
|
|
357
|
+
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
698
358
|
}
|
|
699
|
-
|
|
700
|
-
} @else {
|
|
701
|
-
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
702
359
|
}
|
|
703
360
|
}
|
|
704
361
|
|
|
@@ -707,33 +364,32 @@
|
|
|
707
364
|
// @param $key [list] : defines how to make up media query
|
|
708
365
|
// -------------------------------------------------------------------------------
|
|
709
366
|
// @output styles wrapped in media query
|
|
710
|
-
|
|
711
|
-
|
|
367
|
+
} @else if flint-exists($flint, $key) and $span == null and $context == null
|
|
368
|
+
or flint-is-list($key) and $span == null and $context == null {
|
|
712
369
|
|
|
713
370
|
// Call $key breakpoint by alias
|
|
714
371
|
// -------------------------------------------------------------------------------
|
|
715
372
|
// @param $key [string] : only for $key breakpoint
|
|
716
373
|
// -------------------------------------------------------------------------------
|
|
717
|
-
|
|
718
374
|
@if length($key) == 1 {
|
|
719
375
|
|
|
720
376
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
721
377
|
@if flint-is-highest-breakpoint($key) {
|
|
722
|
-
@media
|
|
378
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
723
379
|
@content;
|
|
724
380
|
}
|
|
725
381
|
} @else {
|
|
726
|
-
@media
|
|
382
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
727
383
|
@content;
|
|
728
384
|
}
|
|
729
385
|
}
|
|
730
386
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
731
387
|
@if flint-is-highest-breakpoint($key) {
|
|
732
|
-
@media
|
|
388
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
733
389
|
@content;
|
|
734
390
|
}
|
|
735
391
|
} @else {
|
|
736
|
-
@media
|
|
392
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - 1) ) {
|
|
737
393
|
@content;
|
|
738
394
|
}
|
|
739
395
|
}
|
|
@@ -745,15 +401,14 @@
|
|
|
745
401
|
// -------------------------------------------------------------------------------
|
|
746
402
|
// @param $key [from key to infinity] : min-width from $key breakpoint
|
|
747
403
|
// -------------------------------------------------------------------------------
|
|
748
|
-
|
|
749
404
|
} @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
|
|
750
405
|
|
|
751
406
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
752
|
-
@media
|
|
407
|
+
@media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) {
|
|
753
408
|
@content;
|
|
754
409
|
}
|
|
755
410
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
756
|
-
@media
|
|
411
|
+
@media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) {
|
|
757
412
|
@content;
|
|
758
413
|
}
|
|
759
414
|
} @else {
|
|
@@ -764,15 +419,14 @@
|
|
|
764
419
|
// -------------------------------------------------------------------------------
|
|
765
420
|
// @param $key [from key-x to key-y] : from $key-x breakpoint to $key-y
|
|
766
421
|
// -------------------------------------------------------------------------------
|
|
767
|
-
|
|
768
422
|
} @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
769
423
|
|
|
770
424
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
771
|
-
@media
|
|
425
|
+
@media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) ) {
|
|
772
426
|
@content;
|
|
773
427
|
}
|
|
774
428
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
775
|
-
@media
|
|
429
|
+
@media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) and ( max-width: (flint-calc-breakpoint("prev", nth($key, 4), flint-get-index(nth($key, 4))) - if(flint-is-highest-breakpoint(nth($key, 4)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) {
|
|
776
430
|
@content;
|
|
777
431
|
}
|
|
778
432
|
} @else {
|
|
@@ -783,11 +437,10 @@
|
|
|
783
437
|
// -------------------------------------------------------------------------------
|
|
784
438
|
// @param $key [from number to number] : arbitrary media query
|
|
785
439
|
// -------------------------------------------------------------------------------
|
|
786
|
-
|
|
787
440
|
} @else if flint-types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
788
441
|
// Make sure passed units match units used in config
|
|
789
442
|
@if flint-get-config-unit() == unit(nth($key, 2)) and flint-get-config-unit() == unit(nth($key, 4)) {
|
|
790
|
-
@media
|
|
443
|
+
@media ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) {
|
|
791
444
|
@content;
|
|
792
445
|
}
|
|
793
446
|
// Throw error
|
|
@@ -799,15 +452,14 @@
|
|
|
799
452
|
// -------------------------------------------------------------------------------
|
|
800
453
|
// @param $key [greater than key] : anything above $key breakpoint
|
|
801
454
|
// -------------------------------------------------------------------------------
|
|
802
|
-
|
|
803
455
|
} @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
804
456
|
|
|
805
457
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
806
|
-
@media
|
|
458
|
+
@media ( min-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
807
459
|
@content;
|
|
808
460
|
}
|
|
809
461
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
810
|
-
@media
|
|
462
|
+
@media ( min-width: flint-calc-breakpoint("prev", nth($key, 3), flint-get-index(nth($key, 3))) ) {
|
|
811
463
|
@content;
|
|
812
464
|
}
|
|
813
465
|
} @else {
|
|
@@ -818,11 +470,10 @@
|
|
|
818
470
|
// -------------------------------------------------------------------------------
|
|
819
471
|
// @param $key [greater than number] : anything above number
|
|
820
472
|
// -------------------------------------------------------------------------------
|
|
821
|
-
|
|
822
473
|
} @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
823
474
|
|
|
824
475
|
@if flint-get-config-unit() == unit(nth($key, 3)) {
|
|
825
|
-
@media
|
|
476
|
+
@media ( min-width: nth($key, 3) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1) ) {
|
|
826
477
|
@content;
|
|
827
478
|
}
|
|
828
479
|
} @else {
|
|
@@ -833,11 +484,10 @@
|
|
|
833
484
|
// -------------------------------------------------------------------------------
|
|
834
485
|
// @param $key [number greater than key] : unit value greater than $key breakpoint
|
|
835
486
|
// -------------------------------------------------------------------------------
|
|
836
|
-
|
|
837
487
|
} @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
|
|
838
488
|
|
|
839
489
|
@if flint-get-config-unit() == unit(nth($key, 1)) {
|
|
840
|
-
@media
|
|
490
|
+
@media ( min-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) + nth($key, 1)) ) {
|
|
841
491
|
@content;
|
|
842
492
|
}
|
|
843
493
|
} @else {
|
|
@@ -848,15 +498,14 @@
|
|
|
848
498
|
// -------------------------------------------------------------------------------
|
|
849
499
|
// @param $key [less than key] : anything below $key breakpoint
|
|
850
500
|
// -------------------------------------------------------------------------------
|
|
851
|
-
|
|
852
501
|
} @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
|
|
853
502
|
|
|
854
503
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
855
|
-
@media
|
|
504
|
+
@media ( max-width: flint-calc-breakpoint("next", nth($key, 3), flint-get-index(nth($key, 3))) ) {
|
|
856
505
|
@content;
|
|
857
506
|
}
|
|
858
507
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
859
|
-
@media
|
|
508
|
+
@media ( max-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
860
509
|
@content;
|
|
861
510
|
}
|
|
862
511
|
} @else {
|
|
@@ -867,11 +516,10 @@
|
|
|
867
516
|
// -------------------------------------------------------------------------------
|
|
868
517
|
// @param $key [less than number] : anything below number
|
|
869
518
|
// -------------------------------------------------------------------------------
|
|
870
|
-
|
|
871
519
|
} @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
|
|
872
520
|
|
|
873
521
|
@if flint-get-config-unit() == unit(nth($key, 3)) {
|
|
874
|
-
@media
|
|
522
|
+
@media ( max-width: nth($key, 3) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1) ) {
|
|
875
523
|
@content;
|
|
876
524
|
}
|
|
877
525
|
} @else {
|
|
@@ -882,11 +530,10 @@
|
|
|
882
530
|
// -------------------------------------------------------------------------------
|
|
883
531
|
// @param $key [number less than key] : unit value less than $key breakpoint
|
|
884
532
|
// -------------------------------------------------------------------------------
|
|
885
|
-
|
|
886
533
|
} @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
|
|
887
534
|
|
|
888
535
|
@if flint-get-config-unit() == unit(nth($key, 1)) {
|
|
889
|
-
@media
|
|
536
|
+
@media ( max-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) - nth($key, 1)) ) {
|
|
890
537
|
@content;
|
|
891
538
|
}
|
|
892
539
|
} @else {
|
|
@@ -897,38 +544,41 @@
|
|
|
897
544
|
// -------------------------------------------------------------------------------
|
|
898
545
|
// @param $key [for list of strings] : will duplicate styles for each passed $key breakpoint
|
|
899
546
|
// -------------------------------------------------------------------------------
|
|
900
|
-
|
|
901
547
|
} @else if flint-types-in-list($key, "string") and nth($key, 1) == "for" {
|
|
548
|
+
// Define empty query list
|
|
549
|
+
$query: ();
|
|
902
550
|
|
|
551
|
+
// Build out comma delimited query list for each breakpoint
|
|
552
|
+
// ----
|
|
903
553
|
@for $i from 1 through length($key) {
|
|
904
554
|
$calc-key: nth($key, $i);
|
|
905
555
|
|
|
906
556
|
@if flint-exists($flint, $calc-key) {
|
|
907
557
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
908
558
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
909
|
-
|
|
910
|
-
@content;
|
|
911
|
-
}
|
|
559
|
+
$query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1))} )'), "comma");
|
|
912
560
|
} @else {
|
|
913
|
-
|
|
914
|
-
@content;
|
|
915
|
-
}
|
|
561
|
+
$query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1)))} ) and ( max-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
|
|
916
562
|
}
|
|
917
563
|
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
918
564
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
919
|
-
|
|
920
|
-
@content;
|
|
921
|
-
}
|
|
565
|
+
$query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
|
|
922
566
|
} @else {
|
|
923
|
-
|
|
924
|
-
@content;
|
|
925
|
-
}
|
|
567
|
+
$query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} ) and ( max-width: #{(flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1))} )'), "comma");
|
|
926
568
|
}
|
|
927
569
|
} @else {
|
|
928
570
|
@warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
|
|
929
571
|
}
|
|
572
|
+
} @else {
|
|
573
|
+
@if not $calc-key == "for" {
|
|
574
|
+
@warn "Invalid argument: #{$calc-key}. Breakpoint does not exist. Please provide a valid argument.";
|
|
575
|
+
}
|
|
930
576
|
}
|
|
931
577
|
}
|
|
578
|
+
|
|
579
|
+
@media #{$query} {
|
|
580
|
+
@content;
|
|
581
|
+
}
|
|
932
582
|
}
|
|
933
583
|
}
|
|
934
584
|
}
|