flint-gs 1.12.0 → 2.0.0.rc.1
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 +71 -207
- data/lib/flint.rb +8 -8
- data/stylesheets/_flint.scss +3 -2
- data/stylesheets/flint/config/_config.scss +37 -68
- data/stylesheets/flint/functions/_functions.scss +15 -7
- data/stylesheets/flint/functions/helpers/_helpers.scss +115 -117
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +23 -32
- data/stylesheets/flint/functions/lib/_calc-width.scss +40 -26
- data/stylesheets/flint/functions/lib/_exists.scss +8 -7
- data/stylesheets/flint/functions/lib/_fluid-width.scss +8 -7
- data/stylesheets/flint/functions/lib/_get-index.scss +12 -10
- data/stylesheets/flint/functions/lib/_get-instance-value.scss +10 -16
- data/stylesheets/flint/functions/lib/_get-value.scss +9 -13
- data/stylesheets/flint/functions/lib/_has-family-instance.scss +21 -20
- data/stylesheets/flint/functions/lib/_instance.scss +19 -22
- data/stylesheets/flint/functions/lib/_last.scss +7 -6
- data/stylesheets/flint/functions/lib/_list-to-string.scss +11 -9
- data/stylesheets/flint/functions/lib/_map-fetch.scss +13 -19
- data/stylesheets/flint/functions/lib/_next-index.scss +9 -14
- data/stylesheets/flint/functions/lib/_purge.scss +9 -8
- data/stylesheets/flint/functions/lib/_remove.scss +11 -10
- data/stylesheets/flint/functions/lib/_replace-substring.scss +9 -8
- data/stylesheets/flint/functions/lib/_replace.scss +11 -10
- data/stylesheets/flint/functions/lib/_steal-key.scss +24 -13
- data/stylesheets/flint/functions/lib/_steal-values.scss +9 -12
- data/stylesheets/flint/functions/lib/_string-to-list.scss +11 -10
- data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +10 -9
- data/stylesheets/flint/functions/lib/_support-syntax.scss +14 -12
- data/stylesheets/flint/functions/lib/_types-in-list.scss +9 -8
- data/stylesheets/flint/functions/lib/_use-syntax.scss +12 -8
- data/stylesheets/flint/globals/_globals.scss +35 -21
- data/stylesheets/flint/mixins/_mixins.scss +3 -2
- data/stylesheets/flint/mixins/lib/_box-sizing.scss +7 -7
- data/stylesheets/flint/mixins/lib/_calculate.scss +112 -583
- data/stylesheets/flint/mixins/lib/_clearfix.scss +7 -7
- data/stylesheets/flint/mixins/lib/_container.scss +6 -12
- data/stylesheets/flint/mixins/lib/_main.scss +271 -202
- data/stylesheets/flint/mixins/lib/_new-instance.scss +12 -15
- data/stylesheets/flint/mixins/lib/_print-instance.scss +16 -20
- metadata +3 -4
- data/stylesheets/flint/functions/lib/_calc-margin.scss +0 -57
@@ -1,25 +1,30 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
/*
|
2
|
+
* Helpers
|
3
|
+
*/
|
3
4
|
@import "helpers/helpers";
|
4
5
|
|
5
|
-
|
6
|
-
|
6
|
+
/*
|
7
|
+
* Functions
|
8
|
+
*/
|
7
9
|
@import "lib/exists";
|
10
|
+
|
8
11
|
// Getters
|
9
12
|
@import "lib/map-fetch";
|
10
13
|
@import "lib/get-value";
|
11
14
|
@import "lib/get-index";
|
12
15
|
@import "lib/steal-key";
|
13
16
|
@import "lib/steal-values";
|
17
|
+
|
14
18
|
// Calculations
|
15
19
|
@import "lib/fluid-width";
|
16
20
|
@import "lib/calc-width";
|
17
|
-
@import "lib/calc-margin";
|
18
21
|
@import "lib/calc-breakpoint";
|
22
|
+
|
19
23
|
// Instance functions
|
20
24
|
@import "lib/instance";
|
21
25
|
@import "lib/has-family-instance";
|
22
26
|
@import "lib/get-instance-value";
|
27
|
+
|
23
28
|
// List functions
|
24
29
|
@import "lib/list-to-string";
|
25
30
|
@import "lib/types-in-list";
|
@@ -28,13 +33,16 @@
|
|
28
33
|
@import "lib/replace";
|
29
34
|
@import "lib/remove";
|
30
35
|
@import "lib/last";
|
36
|
+
|
31
37
|
// String functions
|
32
38
|
@import "lib/replace-substring";
|
33
39
|
@import "lib/string-to-list";
|
34
40
|
|
35
|
-
|
36
|
-
|
41
|
+
/*
|
42
|
+
* Support syntax
|
43
|
+
*/
|
37
44
|
@import "lib/use-syntax";
|
38
45
|
@import "lib/support-syntax";
|
46
|
+
|
39
47
|
// Syntaxes
|
40
48
|
@import "lib/support-syntax-bem"
|
@@ -1,181 +1,179 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
/**
|
2
|
+
* Returns truthiness of a value
|
3
|
+
*
|
4
|
+
* @param {*} $value
|
5
|
+
*
|
6
|
+
* @return {Bool}
|
7
|
+
*/
|
7
8
|
@function flint-is-true($value) {
|
8
9
|
@return if($value == null, false, $value and $value != null and $value != "" and $value != ());
|
9
10
|
}
|
10
11
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
12
|
+
/**
|
13
|
+
* Checks if item is map
|
14
|
+
*
|
15
|
+
* @param {Map} $n
|
16
|
+
*
|
17
|
+
* @return {Bool}
|
18
|
+
*/
|
17
19
|
@function flint-is-map($n) {
|
18
20
|
@return type-of($n) == "map";
|
19
21
|
}
|
20
22
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
23
|
+
/**
|
24
|
+
* Checks if item is list
|
25
|
+
*
|
26
|
+
* @param {List} $n
|
27
|
+
*
|
28
|
+
* @return {Bool}
|
29
|
+
*/
|
27
30
|
@function flint-is-list($n) {
|
28
31
|
@return type-of($n) == "list";
|
29
32
|
}
|
30
33
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
34
|
+
/**
|
35
|
+
* Checks if item is number
|
36
|
+
*
|
37
|
+
* @param {Number} $n
|
38
|
+
*
|
39
|
+
* @return {Bool}
|
40
|
+
*/
|
37
41
|
@function flint-is-number($n) {
|
38
42
|
@return type-of($n) == "number";
|
39
43
|
}
|
40
44
|
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
45
|
+
/**
|
46
|
+
* Checks if item is string
|
47
|
+
*
|
48
|
+
* @param {String} $n
|
49
|
+
*
|
50
|
+
* @return {Bool}
|
51
|
+
*/
|
47
52
|
@function flint-is-string($n) {
|
48
53
|
@return type-of($n) == "string";
|
49
54
|
}
|
50
55
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
56
|
+
/**
|
57
|
+
* Checks if item is not string
|
58
|
+
*
|
59
|
+
* @param {String} $n
|
60
|
+
*
|
61
|
+
* @return {Bool}
|
62
|
+
*/
|
57
63
|
@function flint-is-not-string($n) {
|
58
64
|
@return type-of($n) != "string";
|
59
65
|
}
|
60
66
|
|
61
|
-
|
62
|
-
|
63
|
-
|
67
|
+
/**
|
68
|
+
* Get gutter value from config map
|
69
|
+
*
|
70
|
+
* @return {Number}
|
71
|
+
*/
|
72
|
+
@function flint-get-gutter() {
|
73
|
+
@return flint-get-value("settings", "gutter");
|
74
|
+
}
|
64
75
|
|
76
|
+
/**
|
77
|
+
* Gets list of each breakpoint's key
|
78
|
+
*
|
79
|
+
* @return {List}
|
80
|
+
*/
|
65
81
|
@function flint-get-all-keys() {
|
66
|
-
|
67
|
-
|
68
|
-
@for $i from 1 through (length(flint-map-fetch($flint, "config")) - 1) {
|
69
|
-
$key: flint-steal-key($i);
|
70
|
-
$all-keys: append($all-keys, $key, "comma");
|
71
|
-
}
|
72
|
-
|
73
|
-
@return $all-keys;
|
82
|
+
@return map-keys(flint-get-value("breakpoints"));
|
74
83
|
}
|
75
84
|
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
85
|
+
/**
|
86
|
+
* Gets list of all breakpoints
|
87
|
+
*
|
88
|
+
* @return {List}
|
89
|
+
*/
|
80
90
|
@function flint-get-all-breakpoints() {
|
91
|
+
$all-keys: flint-get-all-keys();
|
81
92
|
$all-breakpoints: ();
|
82
93
|
|
83
|
-
@each $
|
84
|
-
|
85
|
-
@if $key == "breakpoint" {
|
86
|
-
$all-breakpoints: append($all-breakpoints, $value, "comma");
|
87
|
-
}
|
88
|
-
}
|
94
|
+
@each $key in $all-keys {
|
95
|
+
$all-breakpoints: append($all-breakpoints, flint-get-value("breakpoints", $key, "breakpoint"), "comma");
|
89
96
|
}
|
90
97
|
|
91
98
|
@return $all-breakpoints;
|
92
99
|
}
|
93
100
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
101
|
+
/**
|
102
|
+
* Checks if passed $key is the highest breakpoint
|
103
|
+
*
|
104
|
+
* @param {String} $key - alias of breakpoint
|
105
|
+
*
|
106
|
+
* @return {Bool}
|
107
|
+
*/
|
100
108
|
@function flint-is-highest-breakpoint($key) {
|
101
|
-
@
|
102
|
-
@return true;
|
103
|
-
} @else {
|
104
|
-
@return false;
|
105
|
-
}
|
109
|
+
@return flint-get-value("breakpoints", $key, "breakpoint") == max(flint-get-all-breakpoints()...);
|
106
110
|
}
|
107
111
|
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
112
|
+
/**
|
113
|
+
* Checks if passed $key is the lowest breakpoint
|
114
|
+
*
|
115
|
+
* @param {String} $key - alias of breakpoint
|
116
|
+
*
|
117
|
+
* @return {Bool}
|
118
|
+
*/
|
114
119
|
@function flint-is-lowest-breakpoint($key) {
|
115
|
-
@
|
116
|
-
@return true;
|
117
|
-
} @else {
|
118
|
-
@return false;
|
119
|
-
}
|
120
|
+
@return flint-get-value("breakpoints", $key, "breakpoint") == min(flint-get-all-breakpoints()...);
|
120
121
|
}
|
121
122
|
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
123
|
+
/**
|
124
|
+
* Checks if $key is grid default
|
125
|
+
*
|
126
|
+
* @param {String} $key - alias of breakpoint
|
127
|
+
*
|
128
|
+
* @return {Bool}
|
129
|
+
*/
|
128
130
|
@function flint-is-default($key) {
|
129
|
-
@
|
130
|
-
@return true;
|
131
|
-
} @else {
|
132
|
-
@return false;
|
133
|
-
}
|
131
|
+
@return $key == flint-get-value("settings", "default");
|
134
132
|
}
|
135
133
|
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
134
|
+
/**
|
135
|
+
* Gets all breakpoint column values
|
136
|
+
*
|
137
|
+
* @return {List}
|
138
|
+
*/
|
140
139
|
@function flint-get-all-columns() {
|
140
|
+
$all-keys: flint-get-all-keys();
|
141
141
|
$all-columns: ();
|
142
142
|
|
143
|
-
@each $
|
144
|
-
|
145
|
-
@if $key == "columns" {
|
146
|
-
$all-columns: append($all-columns, $value, "comma");
|
147
|
-
}
|
148
|
-
}
|
143
|
+
@each $key in $all-keys {
|
144
|
+
$all-columns: append($all-columns, flint-get-value("breakpoints", $key, "columns"), "comma");
|
149
145
|
}
|
150
146
|
|
151
147
|
@return $all-columns;
|
152
148
|
}
|
153
149
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
150
|
+
/**
|
151
|
+
* Returns the unit used in config
|
152
|
+
*
|
153
|
+
* @return {*}
|
154
|
+
*/
|
158
155
|
@function flint-get-config-unit() {
|
159
156
|
@return unit(flint-get-value("settings", "gutter"));
|
160
157
|
}
|
161
158
|
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
159
|
+
/**
|
160
|
+
* Convert pixel value to em
|
161
|
+
*
|
162
|
+
* @param {Number} $target - pixel value
|
163
|
+
* @param {Number} $context - context to divide by
|
164
|
+
*
|
165
|
+
* @return em value of target relative to context
|
166
|
+
*/
|
170
167
|
@function flint-to-em($target, $context: $flint__base-font-size) {
|
171
168
|
@return ($target / $context) * 1em;
|
172
169
|
}
|
173
170
|
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
171
|
+
/**
|
172
|
+
* Use Ruby functions in place of Sass functions where possible
|
173
|
+
* to speed up performance, especially with string functions
|
174
|
+
*
|
175
|
+
* @return {Bool}
|
176
|
+
*/
|
179
177
|
@function flint-use-ruby-functions() {
|
180
178
|
@return flint_use_ruby() == true;
|
181
179
|
}
|
@@ -1,52 +1,43 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
1
|
+
/**
|
2
|
+
* Calculate breakpoint query
|
3
|
+
*
|
4
|
+
* @param {String} $type - type of query to get
|
5
|
+
* @param {String} $key - key of breakpoint
|
6
|
+
* @param {Number} $i - index of current breakpoint
|
7
|
+
*
|
8
|
+
* @return {Number} - breakpoint value
|
9
|
+
*/
|
10
|
+
@function flint-calc-breakpoint($type, $key, $i) {
|
11
|
+
|
12
|
+
@if $type == "alias" {
|
11
13
|
|
12
14
|
@if flint-get-value("settings", "grid") == "fixed" {
|
13
|
-
|
14
15
|
@if flint-is-lowest-breakpoint($key) {
|
15
|
-
|
16
16
|
@return 0;
|
17
|
-
|
18
17
|
} @else {
|
19
|
-
|
20
|
-
@return flint-get-value($key, "breakpoint");
|
21
|
-
|
18
|
+
@return flint-get-value("breakpoints", $key, "breakpoint");
|
22
19
|
}
|
23
20
|
} @else if flint-get-value("settings", "grid") == "fluid" {
|
24
|
-
|
25
|
-
@return flint-get-value($key, "breakpoint");
|
26
|
-
|
21
|
+
@return flint-get-value("breakpoints", $key, "breakpoint");
|
27
22
|
}
|
28
|
-
} @else if $n == "next" {
|
29
23
|
|
30
|
-
|
24
|
+
} @else if $type == "next" {
|
31
25
|
|
26
|
+
@if flint-is-lowest-breakpoint($key) {
|
32
27
|
@return 0;
|
33
|
-
|
34
28
|
} @else {
|
35
|
-
|
36
|
-
@return flint-get-value(flint-steal-key(($i + 1)), "breakpoint");
|
37
|
-
|
29
|
+
@return flint-get-value("breakpoints", flint-steal-key(($i + 1)), "breakpoint");
|
38
30
|
}
|
39
31
|
|
40
|
-
} @else if $
|
32
|
+
} @else if $type == "prev" {
|
41
33
|
|
42
34
|
@if flint-is-highest-breakpoint($key) {
|
43
|
-
|
44
|
-
@return flint-get-value($key, "breakpoint");
|
45
|
-
|
35
|
+
@return flint-get-value("breakpoints", $key, "breakpoint");
|
46
36
|
} @else {
|
47
|
-
|
48
|
-
@return flint-get-value(flint-steal-key(($i - 1)), "breakpoint");
|
49
|
-
|
37
|
+
@return flint-get-value("breakpoints", flint-steal-key(($i - 1)), "breakpoint");
|
50
38
|
}
|
39
|
+
|
51
40
|
}
|
41
|
+
|
42
|
+
@return false;
|
52
43
|
}
|
@@ -1,45 +1,59 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
@
|
10
|
-
|
1
|
+
/**
|
2
|
+
* Calculate width
|
3
|
+
*
|
4
|
+
* @param {String} $key - key of breakpoint
|
5
|
+
* @param {Number} $span - span value of element
|
6
|
+
* @param {Number | String} $context (null) - context value of element
|
7
|
+
* @param {Number} $deduct (null) - subtract value out of final width
|
8
|
+
*
|
9
|
+
* @return {Map | False} - map of target and context result
|
10
|
+
*/
|
11
|
+
@function flint-calc-width($key, $span, $context: null, $deduct: null) {
|
12
|
+
$result: ();
|
11
13
|
|
12
14
|
// Check to see if value has been cached
|
13
15
|
@if map-has-key($flint__cached-values, "#{$key, $span, $context}::width") and $context != "auto" {
|
14
16
|
@return map-get($flint__cached-values, "#{$key, $span, $context}::width");
|
15
17
|
}
|
16
18
|
|
17
|
-
@if
|
18
|
-
|
19
|
-
@if $key == "container" or $span == "container" {
|
19
|
+
@if $span == "container" {
|
20
20
|
|
21
|
-
|
21
|
+
$result: flint-get-value("breakpoints", $key, "breakpoint");
|
22
22
|
|
23
|
-
|
23
|
+
} @else if $context == "auto" {
|
24
24
|
|
25
|
-
|
25
|
+
/*
|
26
|
+
* Check if instance maps are enabled
|
27
|
+
*/
|
28
|
+
@if not flint-get-value("settings", "instance-maps") {
|
29
|
+
@if not $flint__development-mode {
|
30
|
+
@error "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
|
31
|
+
} @else {
|
32
|
+
@warn "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
|
33
|
+
}
|
34
|
+
}
|
26
35
|
|
36
|
+
@if flint-has-family-instance($key) {
|
37
|
+
$result: map-merge($result, ("target": ((flint-get-instance-value($key, "internal", "width") / flint-get-instance-value($key, "span") * $span) - if($deduct, $deduct, 0))));
|
38
|
+
$result: map-merge($result, ("context": flint-get-instance-value($key, "internal", "width")));
|
27
39
|
} @else {
|
28
|
-
|
29
|
-
|
30
|
-
|
40
|
+
@if not $flint__development-mode {
|
41
|
+
@error "You set context to `#{$context}`, but a parent instance could not be found for `#{nth(&, 1) + '::' + $key}`";
|
42
|
+
} @else {
|
43
|
+
@return false;
|
44
|
+
}
|
31
45
|
}
|
32
|
-
} @if flint-get-value("settings", "grid") == "fixed" {
|
33
|
-
|
34
|
-
@if $key == "container" or $span == "container" {
|
35
46
|
|
36
|
-
|
47
|
+
} @else {
|
37
48
|
|
38
|
-
|
39
|
-
|
40
|
-
$result: flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span;
|
49
|
+
$result: map-merge($result, ("target": ((flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $span) - if($deduct, $deduct, 0))));
|
41
50
|
|
51
|
+
@if $context {
|
52
|
+
$result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $context));
|
53
|
+
} @else {
|
54
|
+
$result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint")));
|
42
55
|
}
|
56
|
+
|
43
57
|
}
|
44
58
|
|
45
59
|
// Save result to cache
|