susy 2.0.0.alpha.6 → 2.0.0.beta.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/LICENSE.txt +1 -1
- data/VERSION +1 -1
- data/docs/changelog.rst +568 -0
- data/lib/susy.rb +3 -3
- data/sass/susy/_helpers.scss +0 -1
- data/sass/susy/_math.scss +2 -1
- data/sass/susy/api/_float.scss +1 -0
- data/sass/susy/api/_shared.scss +2 -0
- data/sass/susy/{helpers → api/float}/_clearfix.scss +0 -0
- data/sass/susy/api/float/_container.scss +5 -5
- data/sass/susy/api/float/_end.scss +10 -3
- data/sass/susy/api/float/_isolate.scss +1 -1
- data/sass/susy/api/float/_span.scss +1 -1
- data/sass/susy/api/shared/_background.scss +2 -2
- data/sass/susy/{helpers → api/shared}/_box-sizing.scss +0 -0
- data/sass/susy/api/shared/_container.scss +4 -7
- data/sass/susy/{helpers → api/shared}/_direction.scss +10 -3
- data/sass/susy/api/shared/_margins.scss +1 -1
- data/sass/susy/api/shared/_padding.scss +1 -1
- data/sass/susy/language/_susy.scss +3 -1
- data/sass/susy/language/susy/_background.scss +1 -1
- data/sass/susy/language/susy/_bleed.scss +4 -2
- data/sass/susy/language/susy/_box-sizing.scss +31 -0
- data/sass/susy/language/susy/_breakpoint-plugin.scss +26 -0
- data/sass/susy/language/susy/_container.scss +22 -4
- data/sass/susy/language/susy/_context.scss +1 -1
- data/sass/susy/language/susy/_gallery.scss +20 -18
- data/sass/susy/language/susy/_grids.scss +18 -5
- data/sass/susy/language/susy/_gutters.scss +3 -3
- data/sass/susy/language/susy/_isolate.scss +4 -4
- data/sass/susy/language/susy/_rows.scss +66 -73
- data/sass/susy/language/susy/_settings.scss +54 -16
- data/sass/susy/language/susy/_span.scss +45 -22
- data/sass/susy/math/_columns.scss +21 -15
- data/sass/susy/math/_container.scss +6 -21
- data/sass/susy/math/_settings.scss +24 -0
- data/sass/susy/math/_validation.scss +62 -0
- data/templates/project/_base.scss +2 -2
- data/templates/project/manifest.rb +5 -8
- data/templates/project/screen.scss +2 -2
- metadata +10 -11
- data/CHANGELOG.mkdn +0 -269
- data/sass/susy/_core.scss +0 -6
- data/sass/susy/_settings.scss +0 -10
- data/sass/susy/helpers/_nth.scss +0 -15
- data/sass/susy/math/_location.scss +0 -48
- data/templates/project/README.md +0 -84
@@ -4,24 +4,27 @@
|
|
4
4
|
// Set Grid
|
5
5
|
// --------
|
6
6
|
// Set a new grid using a shorthand
|
7
|
-
// - $grid
|
7
|
+
// - $grid: <settings>
|
8
8
|
@mixin set-grid(
|
9
9
|
$grid
|
10
10
|
) {
|
11
11
|
$susy: map-merge($susy, parse-grid($grid)) !global;
|
12
12
|
}
|
13
13
|
|
14
|
-
//
|
14
|
+
// Susy Set
|
15
|
+
// --------
|
16
|
+
// Change one setting
|
15
17
|
@mixin susy-set(
|
16
|
-
$
|
18
|
+
$key,
|
19
|
+
$value
|
17
20
|
) {
|
18
|
-
|
21
|
+
$susy: map-merge($susy, ($key: $value)) !global;
|
19
22
|
}
|
20
23
|
|
21
24
|
// Use Grid
|
22
25
|
// --------
|
23
26
|
// Use an arbitrary grid for a section of code
|
24
|
-
// - $grid
|
27
|
+
// - $grid: <settings>
|
25
28
|
@mixin use-grid(
|
26
29
|
$grid
|
27
30
|
) {
|
@@ -32,3 +35,13 @@
|
|
32
35
|
|
33
36
|
$susy: $old !global;
|
34
37
|
}
|
38
|
+
|
39
|
+
// Layout
|
40
|
+
// ------
|
41
|
+
// Return a parsed layout map based on shorthand syntax
|
42
|
+
// - $grid: <settings>
|
43
|
+
@function layout(
|
44
|
+
$grid: $susy
|
45
|
+
) {
|
46
|
+
@return parse-grid($grid);
|
47
|
+
}
|
@@ -58,10 +58,10 @@
|
|
58
58
|
$context: $susy
|
59
59
|
) {
|
60
60
|
$context : parse-gutters($context);
|
61
|
+
$gutters : susy-get(gutters, $context);
|
61
62
|
$gutter : susy-get(gutter-override, $context);
|
62
63
|
|
63
|
-
@if not $gutter {
|
64
|
-
$gutters: susy-get(gutters, $context);
|
64
|
+
@if $gutters and ($gutters > 0) and not $gutter {
|
65
65
|
$column-width: susy-get(column-width, $context);
|
66
66
|
@if $column-width and gutter-math($context) == static {
|
67
67
|
$gutter: $gutters * $column-width;
|
@@ -132,7 +132,7 @@
|
|
132
132
|
@function gutter-math(
|
133
133
|
$context: $susy
|
134
134
|
) {
|
135
|
-
$return : susy-get(
|
135
|
+
$return : susy-get(math, $context);
|
136
136
|
$return : if(susy-get(gutter-position, $context) == inside-static, static, $return);
|
137
137
|
|
138
138
|
@return $return;
|
@@ -25,14 +25,14 @@
|
|
25
25
|
$input
|
26
26
|
) {
|
27
27
|
$span : susy-get(span, $input);
|
28
|
-
$location :
|
28
|
+
$location : get-location($input);
|
29
29
|
$columns : susy-get(columns, $input);
|
30
30
|
$width : null;
|
31
31
|
|
32
32
|
@if type-of($location) == number and not unitless($location) {
|
33
33
|
$width: $location;
|
34
|
-
} @else {
|
35
|
-
$push:
|
34
|
+
} @else if $location {
|
35
|
+
$push: $location - 1;
|
36
36
|
@if $push > 0 {
|
37
37
|
$push: map-merge($input, (
|
38
38
|
span: $push,
|
@@ -47,5 +47,5 @@
|
|
47
47
|
$width: if($width == null, gutters($input), $width + gutters($input));
|
48
48
|
}
|
49
49
|
|
50
|
-
@return $width;
|
50
|
+
@return $width or 0;
|
51
51
|
}
|
@@ -1,46 +1,33 @@
|
|
1
1
|
// Row Start & End
|
2
2
|
// ===============
|
3
3
|
|
4
|
-
|
5
|
-
//
|
6
|
-
//
|
7
|
-
//
|
8
|
-
@mixin
|
9
|
-
$flow: susy-get(flow)
|
10
|
-
) {
|
11
|
-
@include susy-clearfix;
|
4
|
+
|
5
|
+
// Break
|
6
|
+
// -----
|
7
|
+
// Apply to any element that should force a line break.
|
8
|
+
@mixin break {
|
12
9
|
clear: both;
|
13
10
|
}
|
14
11
|
|
15
|
-
|
16
|
-
//
|
17
|
-
//
|
18
|
-
//
|
19
|
-
@mixin
|
12
|
+
|
13
|
+
// NoBreak
|
14
|
+
// -------
|
15
|
+
// Cancel the break() effect, e.g. when using media queries.
|
16
|
+
@mixin nobreak {
|
20
17
|
clear: none;
|
21
|
-
&:after {
|
22
|
-
content: none;
|
23
|
-
display: inline;
|
24
|
-
clear: none;
|
25
|
-
}
|
26
18
|
}
|
27
19
|
|
20
|
+
|
28
21
|
// Full
|
29
22
|
// ----
|
30
23
|
// - [$span]: <span settings>
|
31
24
|
@mixin full(
|
32
|
-
$
|
25
|
+
$context: $susy
|
33
26
|
) {
|
34
|
-
|
35
|
-
|
36
|
-
@include row(susy-get(flow, $span));
|
37
|
-
@if is-split($span) and not susy-get(is-container, $span) {
|
38
|
-
@include gutters($span);
|
39
|
-
}
|
40
|
-
float: none;
|
41
|
-
width: auto;
|
27
|
+
@include span(full of parse-grid($context) break);
|
42
28
|
}
|
43
29
|
|
30
|
+
|
44
31
|
// First
|
45
32
|
// -----
|
46
33
|
// - [$grid]: <settings>
|
@@ -49,9 +36,8 @@
|
|
49
36
|
) {
|
50
37
|
$grid: parse-grid($grid);
|
51
38
|
$flow: susy-get(flow, $grid);
|
52
|
-
$split: if(susy-get(gutter-position, $grid) == split, true, false);
|
53
39
|
|
54
|
-
@if not $
|
40
|
+
@if not is-split($grid) {
|
55
41
|
@include float-first($flow);
|
56
42
|
}
|
57
43
|
}
|
@@ -62,32 +48,9 @@
|
|
62
48
|
@include first($grid);
|
63
49
|
}
|
64
50
|
|
65
|
-
// Nth-First
|
66
|
-
// ---------
|
67
|
-
// - [$value] : first | last | only | <math>
|
68
|
-
// - [$type] : child | last-child | of-type | last-of-type
|
69
|
-
@mixin nth-first(
|
70
|
-
$value: first,
|
71
|
-
$type: child,
|
72
|
-
$grid: $susy
|
73
|
-
) {
|
74
|
-
&:#{format-nth($value,$type)} { @include first($grid); }
|
75
|
-
}
|
76
|
-
|
77
|
-
// Nth-Alpha
|
78
|
-
// ---------
|
79
|
-
// - [$value] : first | last | only | <math>
|
80
|
-
// - [$type] : child | last-child | of-type | last-of-type
|
81
|
-
@mixin nth-alpha(
|
82
|
-
$value: first,
|
83
|
-
$type: child,
|
84
|
-
$grid: $susy
|
85
|
-
) {
|
86
|
-
@include nth-first($value, $type, $grid);
|
87
|
-
}
|
88
51
|
|
89
52
|
// Last
|
90
|
-
//
|
53
|
+
// ----
|
91
54
|
// - [$grid]: <settings>
|
92
55
|
@mixin last(
|
93
56
|
$grid: $susy
|
@@ -95,7 +58,7 @@
|
|
95
58
|
$grid: parse-grid($grid);
|
96
59
|
$output: (
|
97
60
|
flow: susy-get(flow, $grid),
|
98
|
-
margin: if(
|
61
|
+
margin: if(is-split($grid), gutters($grid), 0),
|
99
62
|
);
|
100
63
|
|
101
64
|
@include float-last($output...);
|
@@ -107,28 +70,58 @@
|
|
107
70
|
@include last($grid);
|
108
71
|
}
|
109
72
|
|
110
|
-
|
73
|
+
|
74
|
+
// Get Edge
|
111
75
|
// --------
|
112
|
-
//
|
113
|
-
|
114
|
-
|
115
|
-
@mixin nth-last(
|
116
|
-
$value: last,
|
117
|
-
$type: child,
|
118
|
-
$grid: $susy
|
76
|
+
// Calculate edge value based on location, if possible
|
77
|
+
@function get-edge(
|
78
|
+
$span
|
119
79
|
) {
|
120
|
-
|
80
|
+
$span : parse-span($span);
|
81
|
+
$edge : susy-get(edge, $span);
|
82
|
+
|
83
|
+
@if not $edge {
|
84
|
+
$count: column-count(susy-get(columns, $span));
|
85
|
+
$location: susy-get(location, $span);
|
86
|
+
$n: susy-get(span, $span);
|
87
|
+
|
88
|
+
@if $n == $count {
|
89
|
+
$edge: full;
|
90
|
+
} @else if $location {
|
91
|
+
@if $location == 1 {
|
92
|
+
$edge: if($n == $count, full, first);
|
93
|
+
} @else if $location + $n - 1 == $count {
|
94
|
+
$edge: last;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
@if $edge == alpha or $edge == omega {
|
100
|
+
$edge: if($edge == alpha, first, last);
|
101
|
+
}
|
102
|
+
|
103
|
+
@return $edge;
|
121
104
|
}
|
122
105
|
|
123
|
-
|
124
|
-
//
|
125
|
-
//
|
126
|
-
//
|
127
|
-
|
128
|
-
|
129
|
-
$value: last,
|
130
|
-
$type: child,
|
131
|
-
$grid: $susy
|
106
|
+
|
107
|
+
// Get Location
|
108
|
+
// ------------
|
109
|
+
// Calculate location value based on edge, if possible
|
110
|
+
@function get-location(
|
111
|
+
$span
|
132
112
|
) {
|
133
|
-
|
113
|
+
$span : parse-span($span);
|
114
|
+
$location : susy-get(location, $span);
|
115
|
+
$edge : get-edge($span);
|
116
|
+
$n : susy-get(span, $span);
|
117
|
+
|
118
|
+
@if $edge and not $location and type-of($n) == number and unitless($n) {
|
119
|
+
@if $edge == first {
|
120
|
+
$location: 1;
|
121
|
+
} @else if $edge == last {
|
122
|
+
$location: column-count(susy-get(columns, $span)) - $n + 1;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
@return $location
|
134
127
|
}
|
@@ -1,37 +1,39 @@
|
|
1
1
|
// Susy Next Settings
|
2
2
|
// ==================
|
3
3
|
|
4
|
-
// Susy Defaults
|
5
|
-
//
|
6
|
-
// - PRIVATE
|
7
|
-
|
4
|
+
// Susy Language Defaults
|
5
|
+
// ----------------------
|
6
|
+
// - PRIVATE
|
7
|
+
@include susy-defaults((
|
8
8
|
container: auto,
|
9
|
-
|
10
|
-
|
11
|
-
layout-method: float,
|
12
|
-
flow: ltr,
|
13
|
-
box-sizing: false,
|
9
|
+
math: fluid,
|
10
|
+
output: float,
|
14
11
|
container-position: center,
|
15
12
|
gutter-position: after,
|
16
|
-
show-grids:
|
13
|
+
show-grids: hide,
|
14
|
+
global-box-sizing: content-box,
|
17
15
|
));
|
18
16
|
|
17
|
+
$nullable: gutters container-position;
|
18
|
+
|
19
19
|
// Valid Keyword Values
|
20
20
|
// --------------------
|
21
21
|
// - PRIVATE: DONT'T TOUCH
|
22
22
|
$susy-keywords: (
|
23
23
|
container: auto,
|
24
|
-
|
25
|
-
|
24
|
+
math: static fluid,
|
25
|
+
output: isolate float,
|
26
26
|
container-position: left center right,
|
27
27
|
flow: ltr rtl,
|
28
28
|
show-grids: show hide show-columns show-baseline,
|
29
29
|
gutter-position: before after split inside inside-static,
|
30
30
|
box-sizing: border-box content-box,
|
31
|
-
|
31
|
+
span: full,
|
32
|
+
edge: first alpha last omega full,
|
32
33
|
spread: narrow wide wider,
|
33
34
|
gutter-override: no-gutters no-gutter,
|
34
|
-
|
35
|
+
role: nest,
|
36
|
+
clear: break nobreak,
|
35
37
|
);
|
36
38
|
|
37
39
|
// User Settings
|
@@ -182,7 +184,31 @@ $susy: () !default;
|
|
182
184
|
@function parse-gutters(
|
183
185
|
$short: $susy
|
184
186
|
) {
|
185
|
-
|
187
|
+
$gutters: parse-span($short, gutter-override);
|
188
|
+
$span: susy-get(gutter-override, $gutters);
|
189
|
+
|
190
|
+
@if $span and not map-get($gutters, columns) {
|
191
|
+
$context: ();
|
192
|
+
$new: ();
|
193
|
+
|
194
|
+
@each $item in $span {
|
195
|
+
@if type-of($item) == number and unitless($item) {
|
196
|
+
$context: append($context, $item);
|
197
|
+
} @else {
|
198
|
+
$new: append($new, $item);
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
202
|
+
$context: parse-grid($context);
|
203
|
+
$new: if(length($new) == 0, null, $new);
|
204
|
+
$new: if(length($new) == 1, nth($new, 1), $new);
|
205
|
+
$new: (gutter-override: if($new != $span, $new, $span));
|
206
|
+
|
207
|
+
$gutters: map-merge($gutters, $new);
|
208
|
+
$gutters: map-merge($gutters, $context);
|
209
|
+
}
|
210
|
+
|
211
|
+
@return $gutters;
|
186
212
|
}
|
187
213
|
|
188
214
|
// Susy Get
|
@@ -195,6 +221,18 @@ $susy: () !default;
|
|
195
221
|
$grid: map-merge($susy-defaults, $susy)
|
196
222
|
) {
|
197
223
|
$grid: parse-grid($grid);
|
224
|
+
$options: $grid $susy $susy-defaults;
|
225
|
+
$nullish: index($nullable, $key);
|
226
|
+
$break: false;
|
227
|
+
$return: null;
|
228
|
+
|
229
|
+
@each $opt in $options {
|
230
|
+
$keyset: index(map-keys($opt), $key);
|
231
|
+
@if not $break {
|
232
|
+
$return: map-get($opt, $key);
|
233
|
+
$break: $return or if($keyset and $nullish, true, false);
|
234
|
+
}
|
235
|
+
}
|
198
236
|
|
199
|
-
@return
|
237
|
+
@return $return;
|
200
238
|
}
|
@@ -8,13 +8,29 @@
|
|
8
8
|
@mixin span(
|
9
9
|
$span
|
10
10
|
) {
|
11
|
-
$span
|
12
|
-
$output
|
13
|
-
$
|
11
|
+
$span: parse-span($span);
|
12
|
+
$output: span-math($span);
|
13
|
+
$nesting: susy-get(span, $span);
|
14
|
+
$clear: susy-get(clear, $span);
|
15
|
+
|
16
|
+
$box: susy-get(box-sizing, $span);
|
17
|
+
$content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
|
18
|
+
$box: $box or if(is-inside($span) and $content-box, border-box, null);
|
19
|
+
|
20
|
+
@if $clear == break {
|
21
|
+
@include break;
|
22
|
+
} @else if $clear == nobreak {
|
23
|
+
@include nobreak;
|
24
|
+
}
|
14
25
|
|
15
26
|
@include susy-box-sizing($box);
|
16
27
|
@include float-span-output($output...);
|
17
|
-
|
28
|
+
|
29
|
+
@if type-of($nesting) == number and unitless($nesting) {
|
30
|
+
@include nested($span) { @content; }
|
31
|
+
} @else {
|
32
|
+
@content;
|
33
|
+
}
|
18
34
|
}
|
19
35
|
|
20
36
|
// Span [function]
|
@@ -34,7 +50,10 @@
|
|
34
50
|
@function span-math(
|
35
51
|
$span
|
36
52
|
) {
|
37
|
-
$
|
53
|
+
$nest : if(susy-get(role, $span) == nest, true, false);
|
54
|
+
$split-nest : if(is-split($span) and $nest, true, false);
|
55
|
+
$edge : get-edge($span);
|
56
|
+
$location : get-location($span);
|
38
57
|
|
39
58
|
$float : from;
|
40
59
|
$padding-before : null;
|
@@ -44,38 +63,36 @@
|
|
44
63
|
|
45
64
|
// calculate widths
|
46
65
|
$spread: index(map-values($span), spread);
|
47
|
-
$span: if($split-
|
66
|
+
$span: if($split-nest and not $spread, map-merge($span, (spread: wide)), $span);
|
48
67
|
$width: get-span-width($span);
|
49
68
|
$gutters: get-gutters($span);
|
50
69
|
|
51
70
|
// apply gutters
|
52
71
|
@if is-inside($span) {
|
53
|
-
@if not susy-get(
|
72
|
+
@if not susy-get(role, $span) {
|
54
73
|
$padding-before: map-get($gutters, before);
|
55
74
|
$padding-after: map-get($gutters, after);
|
56
75
|
}
|
57
76
|
} @else {
|
58
|
-
@if not ($split-
|
77
|
+
@if not ($split-nest) {
|
59
78
|
$margin-before: map-get($gutters, before);
|
60
79
|
$margin-after: map-get($gutters, after);
|
61
80
|
}
|
62
81
|
}
|
63
82
|
|
64
83
|
// special margin handling
|
65
|
-
@if susy-get(
|
84
|
+
@if susy-get(output, $span) == isolate and $location {
|
66
85
|
$margin-before: get-isolation($span);
|
67
86
|
$margin-after: -100%;
|
68
|
-
} @else {
|
69
|
-
$
|
70
|
-
@if $
|
71
|
-
$
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
$margin-before: if($is-split, $margin-before, null);
|
78
|
-
}
|
87
|
+
} @else if $edge {
|
88
|
+
$is-split: is-split($span);
|
89
|
+
@if $edge == last or $edge == full {
|
90
|
+
$margin-after: if($is-split, $margin-after, null);
|
91
|
+
}
|
92
|
+
@if $edge == first or $edge == full {
|
93
|
+
$margin-before: if($is-split, $margin-before, null);
|
94
|
+
} @else if $edge == last {
|
95
|
+
$float: susy-get(last-flow, $span);
|
79
96
|
}
|
80
97
|
}
|
81
98
|
|
@@ -100,7 +117,7 @@
|
|
100
117
|
$span : parse-span($span);
|
101
118
|
|
102
119
|
$n : susy-get(span, $span);
|
103
|
-
$location :
|
120
|
+
$location : get-location($span);
|
104
121
|
$columns : susy-get(columns, $span);
|
105
122
|
$gutters : susy-get(gutters, $span);
|
106
123
|
$spread : susy-get(spread, $span);
|
@@ -109,11 +126,17 @@
|
|
109
126
|
$span-sum : null;
|
110
127
|
$width : null;
|
111
128
|
|
129
|
+
@if $n == 'full' {
|
130
|
+
$pos: susy-get(gutter-position, $span);
|
131
|
+
$role: susy-get(role, $span);
|
132
|
+
$n: if($pos == split and $role != nest, column-count($columns), 100%);
|
133
|
+
}
|
134
|
+
|
112
135
|
@if unitless($n) {
|
113
136
|
$context: column-sum($columns, $gutters, if(is-split($span), wide, narrow));
|
114
137
|
$span-sum: get-column-span-sum($n, $location, $columns, $gutters, if(is-inside($span), wide, $spread));
|
115
138
|
|
116
|
-
@if susy-get(
|
139
|
+
@if susy-get(math, $span) == static {
|
117
140
|
$width: $span-sum * susy-get(column-width, $span);
|
118
141
|
} @else {
|
119
142
|
$width: percentage($span-sum / $context);
|