susy 2.2.14 → 3.0.0.alpha.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.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/{docs/changelog.rst → CHANGELOG.md} +0 -34
  3. data/README.md +135 -10
  4. data/VERSION +1 -1
  5. data/sass/_prefix.scss +10 -0
  6. data/sass/_susy.scss +4 -3
  7. data/sass/susy/_api.scss +134 -0
  8. data/sass/susy/_grids.scss +192 -0
  9. data/sass/susy/_parser.scss +284 -0
  10. data/sass/susy/_settings.scss +120 -0
  11. data/sass/susy/_unprefix.scss +53 -0
  12. data/sass/susy/_validation.scss +132 -0
  13. metadata +26 -75
  14. data/sass/_su.scss +0 -4
  15. data/sass/_susyone.scss +0 -4
  16. data/sass/susy/_su.scss +0 -7
  17. data/sass/susy/language/_susy.scss +0 -24
  18. data/sass/susy/language/_susyone.scss +0 -13
  19. data/sass/susy/language/susy/_background.scss +0 -385
  20. data/sass/susy/language/susy/_bleed.scss +0 -200
  21. data/sass/susy/language/susy/_box-sizing.scss +0 -47
  22. data/sass/susy/language/susy/_breakpoint-plugin.scss +0 -185
  23. data/sass/susy/language/susy/_container.scss +0 -81
  24. data/sass/susy/language/susy/_context.scss +0 -36
  25. data/sass/susy/language/susy/_gallery.scss +0 -94
  26. data/sass/susy/language/susy/_grids.scss +0 -64
  27. data/sass/susy/language/susy/_gutters.scss +0 -154
  28. data/sass/susy/language/susy/_isolate.scss +0 -77
  29. data/sass/susy/language/susy/_margins.scss +0 -94
  30. data/sass/susy/language/susy/_padding.scss +0 -74
  31. data/sass/susy/language/susy/_rows.scss +0 -138
  32. data/sass/susy/language/susy/_settings.scss +0 -216
  33. data/sass/susy/language/susy/_span.scss +0 -163
  34. data/sass/susy/language/susy/_validation.scss +0 -16
  35. data/sass/susy/language/susyone/_background.scss +0 -18
  36. data/sass/susy/language/susyone/_functions.scss +0 -377
  37. data/sass/susy/language/susyone/_grid.scss +0 -312
  38. data/sass/susy/language/susyone/_isolation.scss +0 -51
  39. data/sass/susy/language/susyone/_margin.scss +0 -93
  40. data/sass/susy/language/susyone/_media.scss +0 -105
  41. data/sass/susy/language/susyone/_padding.scss +0 -92
  42. data/sass/susy/language/susyone/_settings.scss +0 -60
  43. data/sass/susy/output/_float.scss +0 -9
  44. data/sass/susy/output/_shared.scss +0 -15
  45. data/sass/susy/output/_support.scss +0 -9
  46. data/sass/susy/output/float/_container.scss +0 -16
  47. data/sass/susy/output/float/_end.scss +0 -40
  48. data/sass/susy/output/float/_isolate.scss +0 -22
  49. data/sass/susy/output/float/_span.scss +0 -35
  50. data/sass/susy/output/shared/_background.scss +0 -26
  51. data/sass/susy/output/shared/_container.scss +0 -21
  52. data/sass/susy/output/shared/_direction.scss +0 -42
  53. data/sass/susy/output/shared/_inspect.scss +0 -25
  54. data/sass/susy/output/shared/_margins.scss +0 -23
  55. data/sass/susy/output/shared/_output.scss +0 -14
  56. data/sass/susy/output/shared/_padding.scss +0 -23
  57. data/sass/susy/output/support/_background.scss +0 -58
  58. data/sass/susy/output/support/_box-sizing.scss +0 -19
  59. data/sass/susy/output/support/_clearfix.scss +0 -18
  60. data/sass/susy/output/support/_prefix.scss +0 -19
  61. data/sass/susy/output/support/_rem.scss +0 -22
  62. data/sass/susy/output/support/_support.scss +0 -95
  63. data/sass/susy/su/_grid.scss +0 -103
  64. data/sass/susy/su/_settings.scss +0 -73
  65. data/sass/susy/su/_utilities.scss +0 -111
  66. data/sass/susy/su/_validation.scss +0 -57
  67. data/templates/project/_grids.scss +0 -9
  68. data/templates/project/manifest.rb +0 -15
  69. data/templates/project/style.scss +0 -4
@@ -1,74 +0,0 @@
1
- // Padding Syntax
2
- // ==============
3
-
4
- // Prefix
5
- // ------
6
- // Add spanning-padding before an element.
7
- // - $span : <span>
8
- @mixin prefix(
9
- $span
10
- ) {
11
- $inspect : $span;
12
- $span : map-merge((spread: wide), parse-span($span));
13
- $flow : susy-get(flow, $span);
14
- $width : span($span);
15
-
16
- @if is-inside($span) {
17
- $gutter: gutter($span);
18
- $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
19
- }
20
-
21
- @include susy-inspect(prefix, $inspect);
22
- @include padding-output($width, null, $flow);
23
- }
24
-
25
- // Suffix
26
- // ------
27
- // Add spanning-padding after an element.
28
- // - $span : <span>
29
- @mixin suffix(
30
- $span
31
- ) {
32
- $inspect : $span;
33
- $span : map-merge((spread: wide), parse-span($span));
34
- $flow : susy-get(flow, $span);
35
- $width : span($span);
36
-
37
- @if is-inside($span) {
38
- $gutter: gutter($span);
39
- $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
40
- }
41
-
42
- @include susy-inspect(suffix, $inspect);
43
- @include padding-output(null, $width, $flow);
44
- }
45
-
46
- // Pad
47
- // ---
48
- // Add spanning-padding before and after an element.
49
- // - $pre : <span>
50
- // - [$post] : <span>
51
- @mixin pad(
52
- $pre,
53
- $post: false
54
- ) {
55
- $inspect : ($pre, $post);
56
- $pre : map-merge((spread: wide), parse-span($pre));
57
-
58
- @if $post {
59
- $post: map-merge((spread: wide), parse-span($post));
60
- } @else {
61
- $span: susy-get(span, $pre);
62
- @if length($span) > 1 {
63
- $pre: map-merge($pre, (span: nth($span, 1)));
64
- $post: map-merge($pre, (span: nth($span, 2)));
65
- } @else {
66
- $post: $pre;
67
- }
68
- }
69
-
70
- @include susy-inspect(pad, $inspect);
71
- @include prefix($pre);
72
- @include suffix($post);
73
-
74
- }
@@ -1,138 +0,0 @@
1
- // Row Start & End
2
- // ===============
3
-
4
- // Break
5
- // -----
6
- // Apply to any element that should force a line break.
7
- @mixin break {
8
- @include output((clear: both));
9
- }
10
-
11
-
12
- // NoBreak
13
- // -------
14
- // Cancel the break() effect, e.g. when using media queries.
15
- @mixin nobreak {
16
- @include output((clear: none));
17
- }
18
-
19
-
20
- // Full
21
- // ----
22
- // - [$context]: <layout shorthand>
23
- @mixin full(
24
- $context: $susy
25
- ) {
26
- $inspect : $context;
27
- @include susy-inspect(full, $inspect);
28
- @include span(full of parse-grid($context) break);
29
- }
30
-
31
-
32
- // First
33
- // -----
34
- // - [$context]: <settings>
35
- @mixin first(
36
- $context: $susy
37
- ) {
38
- $inspect : $context;
39
- $context : parse-grid($context);
40
- $flow : susy-get(flow, $context);
41
-
42
- @include susy-inspect(first, $inspect);
43
- @if not(is-split($context)) {
44
- @include float-first($flow);
45
- }
46
- }
47
-
48
- @mixin alpha(
49
- $context: $susy
50
- ) {
51
- @include first($context);
52
- }
53
-
54
-
55
- // Last
56
- // ----
57
- // - [$context]: <settings>
58
- @mixin last(
59
- $context: $susy
60
- ) {
61
- $inspect : $context;
62
- $context : parse-grid($context);
63
-
64
- @include susy-inspect(last, $inspect);
65
-
66
- $output: (
67
- flow: susy-get(flow, $context),
68
- last-flow: susy-get(last-flow, $context),
69
- margin: if(is-split($context), null, 0),
70
- );
71
-
72
- @include float-last($output...);
73
- }
74
-
75
- @mixin omega(
76
- $context: $susy
77
- ) {
78
- @include last($context);
79
- }
80
-
81
-
82
- // Get Edge
83
- // --------
84
- // Calculate edge value based on location, if possible
85
- @function get-edge(
86
- $span
87
- ) {
88
- $span : parse-span($span);
89
- $edge : susy-get(edge, $span);
90
-
91
- @if not($edge) {
92
- $count: susy-count(susy-get(columns, $span));
93
- $location: susy-get(location, $span);
94
- $n: susy-get(span, $span);
95
-
96
- $number: if(type-of($location) == number, true, false);
97
- $index: if($number and unitless($location), true, false);
98
-
99
- @if $n == $count {
100
- $edge: full;
101
- } @else if $location and $n and $index {
102
- @if $location == 1 {
103
- $edge: if($n == $count, full, first);
104
- } @else if $location + $n - 1 == $count {
105
- $edge: last;
106
- }
107
- }
108
- }
109
-
110
- @if $edge == alpha or $edge == omega {
111
- $edge: if($edge == alpha, first, last);
112
- }
113
-
114
- @return $edge;
115
- }
116
-
117
-
118
- // Get Location
119
- // ------------
120
- // Calculate location value based on edge, if possible
121
- @function get-location(
122
- $span
123
- ) {
124
- $span : parse-span($span);
125
- $location : susy-get(location, $span);
126
- $edge : get-edge($span);
127
- $n : susy-get(span, $span);
128
-
129
- @if $edge and not($location) and type-of($n) == number and unitless($n) {
130
- @if $edge == first {
131
- $location: 1;
132
- } @else if $edge == last {
133
- $location: susy-count(susy-get(columns, $span)) - $n + 1;
134
- }
135
- }
136
-
137
- @return $location
138
- }
@@ -1,216 +0,0 @@
1
- // Susy Settings
2
- // =============
3
-
4
- // Susy Language Defaults
5
- // ----------------------
6
- // - PRIVATE
7
- @include susy-defaults((
8
- container: auto,
9
- math: fluid,
10
- output: float,
11
- container-position: center,
12
- gutter-position: after,
13
- global-box-sizing: content-box,
14
- debug: (
15
- image: hide,
16
- color: rgba(#66f, .25),
17
- output: background,
18
- toggle: top right,
19
- ),
20
- ));
21
-
22
-
23
- // Valid Keyword Values
24
- // --------------------
25
- // - PRIVATE: DONT'T TOUCH
26
- $susy-keywords: (
27
- container: auto,
28
- math: static fluid,
29
- output: isolate float,
30
- container-position: left center right,
31
- flow: ltr rtl,
32
- gutter-position: before after split inside inside-static,
33
- box-sizing: border-box content-box,
34
- span: full,
35
- edge: first alpha last omega full,
36
- spread: narrow wide wider,
37
- gutter-override: no-gutters no-gutter,
38
- role: nest,
39
- clear: break nobreak,
40
- debug image: show hide show-columns show-baseline,
41
- debug output: background overlay,
42
- );
43
-
44
-
45
- // Parse Susy Keywords and Maps
46
- // ----------------------------
47
- @function parse-settings(
48
- $short: $susy
49
- ) {
50
- $_return: ();
51
-
52
- @if type-of($short) == map {
53
- $_return: $short;
54
- } @else {
55
- @each $item in $short {
56
- // strings
57
- @if type-of($item) == string {
58
- @each $key, $value in $susy-keywords {
59
- @if index($value, $item) {
60
- $_key-value: append($key, $item);
61
- $_return: _susy-deep-set($_return, $_key-value...);
62
- }
63
- }
64
- // maps
65
- } @else if type-of($item) == map {
66
- $_return: map-merge($_return, $item);
67
- }
68
- }
69
- }
70
-
71
- @return $_return;
72
- }
73
-
74
-
75
- // Parse Columns & Gutters
76
- // -----------------------
77
- @function parse-layout(
78
- $short
79
- ) {
80
- $_return: ();
81
- $_columns: ();
82
- $_gutters: null;
83
-
84
- @if not(unitless(nth(nth($short, 1), 1))) {
85
- $_gutters: nth($short, 1);
86
- } @else {
87
- $_columns: (columns: nth($short, 1));
88
- $_gutters: if(length($short) > 1, nth($short, 2), $_gutters);
89
- }
90
-
91
- @if type-of($_gutters) == list and length($_gutters) > 0 {
92
- $_gutters: (
93
- gutters: nth($_gutters, 2) / nth($_gutters, 1),
94
- column-width: nth($_gutters, 1),
95
- );
96
- } @else {
97
- $_gutters: if($_gutters, (gutters: $_gutters), ());
98
- }
99
-
100
- $_return: map-merge($_return, $_columns);
101
- $_return: map-merge($_return, $_gutters);
102
-
103
- @return $_return;
104
- }
105
-
106
-
107
- // Parse Grid/Context
108
- // ------------------
109
- @function parse-grid(
110
- $short: $susy
111
- ) {
112
- $_return: parse-settings($short);
113
- $_layout: ();
114
-
115
- @if type-of($short) == map {
116
- $_return: $short;
117
- } @else {
118
- @each $item in $short {
119
- // number or list
120
- @if type-of($item) == number or type-of($item) == list {
121
- @if type-of($item) == list or unitless($item) {
122
- $_layout: append($_layout, $item);
123
- } @else {
124
- $_return: map-merge($_return, (container: $item));
125
- }
126
- }
127
- }
128
-
129
- $_layout: if(length($_layout) > 0, parse-layout($_layout), $_layout);
130
- }
131
-
132
- @return map-merge($_return, $_layout);
133
- }
134
-
135
-
136
- // Parse Span
137
- // ----------
138
- @function parse-span(
139
- $short,
140
- $key: span
141
- ) {
142
- $_return: ();
143
-
144
- @if type-of($short) == map {
145
- $_return: $short;
146
- } @else {
147
- $_at: index($short, at);
148
-
149
- @if $_at {
150
- $_loci: $_at + 1;
151
- $_location: nth($short, $_loci);
152
- $_return: map-merge($_return, (location: $_location));
153
- $short: set-nth($short, $_at, null);
154
- $short: set-nth($short, $_loci, null);
155
- }
156
-
157
- $_i: 1;
158
- $_span: ();
159
-
160
- @while $_i <= length($short) {
161
- $_this: nth($short, $_i);
162
-
163
- @if type-of($_this) == number {
164
- $_span: append($_span, $_this);
165
- $short: set-nth($short, $_i, null);
166
- } @else if $_this == of {
167
- $short: set-nth($short, $_i, null);
168
- $_i: length($short) + 1;
169
- }
170
-
171
- $_i: $_i + 1;
172
- }
173
-
174
- @if length($_span) > 0 {
175
- $_span: if(length($_span) == 1, nth($_span, 1), $_span);
176
- $_return: map-merge($_return, ($key: $_span));
177
- }
178
-
179
- $_return: map-merge($_return, parse-grid($short));
180
- }
181
-
182
- @return $_return;
183
- }
184
-
185
-
186
- // Parse Gutters
187
- // -------------
188
- @function parse-gutters(
189
- $short: $susy
190
- ) {
191
- $_gutters: parse-span($short, gutter-override);
192
- $_span: susy-get(gutter-override, $_gutters);
193
-
194
- @if $_span and not(map-get($_gutters, columns)) {
195
- $_context: ();
196
- $_new: ();
197
-
198
- @each $item in $_span {
199
- @if type-of($item) == number and unitless($item) {
200
- $_context: append($_context, $item);
201
- } @else {
202
- $_new: append($_new, $item);
203
- }
204
- }
205
-
206
- $_context: parse-grid($_context);
207
- $_new: if(length($_new) == 0, null, $_new);
208
- $_new: if(length($_new) == 1, nth($_new, 1), $_new);
209
- $_new: (gutter-override: if($_new != $_span, $_new, $_span));
210
-
211
- $_gutters: map-merge($_gutters, $_new);
212
- $_gutters: map-merge($_gutters, $_context);
213
- }
214
-
215
- @return $_gutters;
216
- }
@@ -1,163 +0,0 @@
1
- // Span Syntax
2
- // ===========
3
-
4
- // Span [mixin]
5
- // ------------
6
- // Set a spanning element using shorthand syntax.
7
- // - $span : <span>
8
- @mixin span(
9
- $span
10
- ) {
11
- $inspect: $span;
12
- $span: parse-span($span);
13
- $output: span-math($span);
14
- $nesting: susy-get(span, $span);
15
- $clear: susy-get(clear, $span);
16
-
17
- $box: susy-get(box-sizing, $span);
18
- $content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
19
- $box: $box or if(is-inside($span) and $content-box, border-box, null);
20
-
21
- @if $clear == break {
22
- @include break;
23
- } @else if $clear == nobreak {
24
- @include nobreak;
25
- }
26
-
27
- @include susy-inspect(span, $inspect);
28
- @include output((box-sizing: $box));
29
- @include float-span-output($output...);
30
-
31
- @if valid-columns($nesting, silent) {
32
- @include nested($span) { @content; }
33
- } @else {
34
- @content;
35
- }
36
- }
37
-
38
- // Span [function]
39
- // ---------------
40
- // Return the width of a span.
41
- // - $span : <span>
42
- @function span(
43
- $span
44
- ) {
45
- @return get-span-width($span);
46
- }
47
-
48
- // Span Math
49
- // ---------
50
- // Get all the span results.
51
- // - $span: <map>
52
- @function span-math(
53
- $span
54
- ) {
55
- $nest : if(susy-get(role, $span) == nest, true, false);
56
- $split-nest : if(is-split($span) and $nest, true, false);
57
- $edge : get-edge($span);
58
- $location : get-location($span);
59
-
60
- $float : from;
61
- $padding-before : null;
62
- $padding-after : null;
63
- $margin-before : null;
64
- $margin-after : null;
65
-
66
- // calculate widths
67
- $spread: index(map-values($span), spread);
68
- $span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span);
69
- $width: get-span-width($span);
70
- $gutters: get-gutters($span);
71
-
72
- // apply gutters
73
- @if is-inside($span) {
74
- @if not(susy-get(role, $span)) {
75
- $padding-before: map-get($gutters, before);
76
- $padding-after: map-get($gutters, after);
77
- }
78
- } @else {
79
- @if not($split-nest) {
80
- $margin-before: map-get($gutters, before);
81
- $margin-after: map-get($gutters, after);
82
- }
83
- }
84
-
85
- // special margin handling
86
- @if susy-get(output, $span) == isolate and $location {
87
- $margin-before: get-isolation($span);
88
- $margin-after: -100%;
89
- } @else if $edge {
90
- $is-split: is-split($span);
91
- $pos: susy-get(gutter-position, $span);
92
-
93
- @if $edge == last {
94
- $float: susy-get(last-flow, $span);
95
- }
96
-
97
- @if not($is-split) {
98
- @if $edge == full or ($edge == first and $pos == before) {
99
- $margin-before: 0;
100
- }
101
- @if $edge == full or ($edge == last and $pos == after) {
102
- $margin-after: 0;
103
- }
104
- }
105
-
106
- }
107
-
108
- @return (
109
- width : $width,
110
- float : $float,
111
- margin-before : $margin-before,
112
- margin-after : $margin-after,
113
- padding-before : $padding-before,
114
- padding-after : $padding-after,
115
- flow : susy-get(flow, $span),
116
- );
117
- }
118
-
119
- // Get Span Width
120
- // --------------
121
- // Return span width.
122
- // - $span: <map>
123
- @function get-span-width(
124
- $span
125
- ) {
126
- $span : parse-span($span);
127
-
128
- $n : susy-get(span, $span);
129
- $location : get-location($span);
130
- $columns : susy-get(columns, $span);
131
- $gutters : susy-get(gutters, $span);
132
- $spread : susy-get(spread, $span);
133
-
134
- $context : null;
135
- $span-sum : null;
136
- $width : null;
137
-
138
- @if $n == 'full' {
139
- $pos: susy-get(gutter-position, $span);
140
- $role: susy-get(role, $span);
141
- $n: if($pos == split and $role != nest, susy-count($columns), 100%);
142
- }
143
-
144
- @if type-of($n) != number {
145
- @warn "(#{type-of($n)}) #{$n} is not a valid span.";
146
- } @else if unitless($n) {
147
- $context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow));
148
- $spread: if(is-inside($span), $spread or wide, $spread);
149
- $span-sum: susy($n, $location, $columns, $gutters, $spread);
150
-
151
- $_math: susy-get(math, $span);
152
- $_column-width: susy-get(column-width, $span);
153
- @if $_math == static {
154
- $width: $span-sum * valid-column-math($_math, $_column-width);
155
- } @else {
156
- $width: percentage($span-sum / $context);
157
- }
158
- } @else {
159
- $width: $n;
160
- }
161
-
162
- @return $width;
163
- }