susy 2.0.0.beta.2 → 2.0.0.beta.3

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.
@@ -0,0 +1,305 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Imports
3
+
4
+ @import "compass/utilities/general/clearfix";
5
+ @import "compass/css3/box-sizing";
6
+
7
+ // ---------------------------------------------------------------------------
8
+ // Border-Box Sizing
9
+
10
+ // Apply the border-box sizing model to all elements
11
+ // and adjust the grid math appropriately.
12
+ @mixin border-box-sizing {
13
+ $border-box-sizing: true !global;
14
+ * { @include box-sizing(border-box); }
15
+ }
16
+
17
+ // ---------------------------------------------------------------------------
18
+ // Container
19
+
20
+ // Set the width of a container
21
+ //
22
+ // $columns : The number of columns in the Grid Layout.
23
+ @mixin set-container-width(
24
+ $columns : $total-columns,
25
+ $style : $container-style
26
+ ){
27
+ $width: container-outer-width($columns);
28
+
29
+ @if $style == 'static' {
30
+ @include if-rem(width, $width);
31
+ } @else {
32
+ @if $style == 'fluid' {
33
+ @if unit($width) == '%' { @include if-rem(width, $width); }
34
+ } @else {
35
+ @include if-rem(max-width, $width);
36
+ @include for-legacy-browser(ie,"6") {
37
+ @if unit($width) == 'rem' {
38
+ _width: round(convert-length($width, px));
39
+ } @else {
40
+ _width: $width;
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ // Set the outer grid-containing element(s).
48
+ //
49
+ // $columns : The number of columns in the container.
50
+ @mixin apply-container(
51
+ $columns : $total-columns
52
+ ){
53
+ @include pie-clearfix;
54
+ @include set-container-width($columns);
55
+ @include if-rem(padding-left, $grid-padding);
56
+ @include if-rem(padding-right, $grid-padding);
57
+ margin: { left: auto; right: auto; }
58
+ }
59
+
60
+ // Set one or more layouts on a grid-containing element at any number of media-query breakpoints.
61
+ //
62
+ // $media-layout-1 : [default:$total-columns] A list of values including -
63
+ // : One unitless number (representing columns in a layout)
64
+ // : Two optional lengths (representing min and max-width media-query breakpoints).
65
+ // $media-layout-2 ...-10 : [optional] Same as $media-layout-1
66
+ @mixin container(
67
+ $media-layout-1 : $total-columns,
68
+ $media-layout-2 : false,
69
+ $media-layout-3 : false,
70
+ $media-layout-4 : false,
71
+ $media-layout-5 : false,
72
+ $media-layout-6 : false,
73
+ $media-layout-7 : false,
74
+ $media-layout-8 : false,
75
+ $media-layout-9 : false,
76
+ $media-layout-10 : false
77
+ ){
78
+ $media-layouts : compact($media-layout-2,$media-layout-3,$media-layout-4,$media-layout-5,$media-layout-6,$media-layout-7,$media-layout-8,$media-layout-9,$media-layout-10);
79
+
80
+ @if is-default-layout($media-layout-1) {
81
+ @include apply-container();
82
+ } @else {
83
+ @include at-breakpoint($media-layout-1) {
84
+ @include apply-container();
85
+ }
86
+ }
87
+
88
+ @each $ml in $media-layouts {
89
+ @if $ml {
90
+ @include at-breakpoint($ml) {
91
+ @include set-container-width;
92
+ }
93
+ }
94
+ }
95
+ }
96
+
97
+ // ---------------------------------------------------------------------------
98
+ // Columns
99
+
100
+ // Create a grid element spanning any number of 'columns' in a grid 'context'.
101
+ // $columns : The number of columns to span.
102
+ // $context : [optional] The context (columns spanned by parent).
103
+ // : Context is required on any nested elements.
104
+ // : Context MUST NOT be declared on a root element.
105
+ // $padding : [optional] Padding applied to the inside of individual grid columns.
106
+ // : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px)
107
+ // : Padding values are applied only on the horizontal axis in from-to order
108
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
109
+ // $style : The container style to use.
110
+ @mixin span-columns(
111
+ $columns,
112
+ $context : $total-columns,
113
+ $padding : false,
114
+ $from : $from-direction,
115
+ $style : fix-static-misalignment()
116
+ ) {
117
+ $from : unquote($from);
118
+ $to : opposite-position($from);
119
+ $pos : split-columns-value($columns,position);
120
+ $cols : split-columns-value($columns,columns);
121
+ $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
122
+ $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
123
+
124
+ @if $padding != false {
125
+ $pad-from : nth($padding, 1);
126
+
127
+ @if length($padding) > 1 {
128
+ $pad-to: nth($padding, 2);
129
+ } @else {
130
+ $pad-to: $pad-from;
131
+ }
132
+
133
+ $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context));
134
+ $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context));
135
+
136
+ padding-#{$from}: $pad-from;
137
+ padding-#{$to}: $pad-to;
138
+ }
139
+
140
+ width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from);
141
+
142
+ @if ($pos == 'omega') {
143
+ @include omega($from);
144
+ } @else {
145
+ float: $from;
146
+ margin-#{$to}: gutter($context, $style);
147
+ @include for-legacy-browser(ie, "6") {
148
+ display: inline;
149
+ }
150
+ }
151
+ }
152
+
153
+ // Apply to elements spanning the last column, to account for the page edge.
154
+ // Only needed as an override. Normally 'omega' can just be called by `columns`.
155
+ //
156
+ // $from : The start-direction for your document.
157
+ @mixin omega(
158
+ $from : $from-direction
159
+ ) {
160
+ $from : unquote($from);
161
+ $to : opposite-position($from);
162
+ $hack : opposite-position($omega-float);
163
+
164
+ float: $omega-float;
165
+ margin-#{$to}: 0;
166
+
167
+ @include for-legacy-browser(ie, "6", "7") {
168
+ *margin-#{$hack}: - $gutter-width;
169
+ @include for-legacy-browser(ie, "6") {
170
+ display: inline;
171
+ }
172
+ }
173
+ }
174
+
175
+ // Shortcut to apply omega to a specific subset of elements.
176
+ //
177
+ // $n : [first | only | last | <equation>]
178
+ // $selector : [child | last-child | of-type | last-of-type ]
179
+ // $from : The start-direction for your document.
180
+ @mixin nth-omega(
181
+ $n : last,
182
+ $selector : child,
183
+ $from : $from-direction
184
+ ) {
185
+ $from : unquote($from);
186
+
187
+ &:#{format-nth($n,$selector)} {
188
+ @if $n == "first" {
189
+ @include omega($from);
190
+ } @else {
191
+ @include with-browser-ranges(css-sel3) {
192
+ @include omega($from);
193
+ }
194
+ }
195
+ }
196
+ }
197
+
198
+
199
+
200
+ // ---------------------------------------------------------------------------
201
+ // Resets
202
+
203
+ // Reset a '+columns' grid element to default block behavior
204
+ //
205
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
206
+ @mixin reset-columns(
207
+ $from: $from-direction
208
+ ) {
209
+ $from : unquote($from);
210
+ $to : opposite-position($from);
211
+ $hack : opposite-position($omega-float);
212
+
213
+ float: none;
214
+ width: auto;
215
+ margin-#{$to}: auto;
216
+
217
+ @include for-legacy-browser(ie, "6", "7") {
218
+ *margin-#{$hack}: auto;
219
+ @include for-legacy-browser(ie, "6") {
220
+ display: block;
221
+ }
222
+ }
223
+ }
224
+
225
+ // Apply to elements previously set as omega.
226
+ // This will return floats and margins back to non-omega settigns.
227
+ //
228
+ // $context : [optional] The context (columns spanned by parent).
229
+ // $from : The start-direction for your document.
230
+ // $style : The container style to use.
231
+ @mixin remove-omega(
232
+ $context : $total-columns,
233
+ $from : $from-direction,
234
+ $style : fix-static-misalignment()
235
+ ) {
236
+ $from : unquote($from);
237
+ $to : opposite-position($from);
238
+ $hack : opposite-position($omega-float);
239
+
240
+ float: $from;
241
+ margin-#{$to}: gutter($context, $style);
242
+
243
+ @include for-legacy-browser(ie, "6", "7") {
244
+ *margin-#{$hack}: auto;
245
+ }
246
+ }
247
+
248
+ // Shortcut to apply remove-omega to a specific subset of elements.
249
+ //
250
+ // $n : [first | only | last | <equation>]
251
+ // $selector : [child | last-child | of-type | last-of-type ]
252
+ // $context : [optional] The context (columns spanned by parent).
253
+ // $from : The start-direction for your document.
254
+ // $style : The container style to use.
255
+ @mixin remove-nth-omega(
256
+ $n : last,
257
+ $selector : child,
258
+ $context : $total-columns,
259
+ $from : $from-direction,
260
+ $style : fix-static-misalignment()
261
+ ) {
262
+ $from : unquote($from);
263
+
264
+ &:#{format-nth($n,$selector)} {
265
+ @if $n == "first" {
266
+ @include remove-omega($context, $from, $style);
267
+ } @else {
268
+ @include with-browser-ranges(css-sel3) {
269
+ @include remove-omega($context, $from, $style);
270
+ }
271
+ }
272
+ }
273
+ }
274
+
275
+
276
+ // ---------------------------------------------------------------------------
277
+ // Change Settings
278
+
279
+ @mixin with-grid-settings(
280
+ $columns: $total-columns,
281
+ $width: $column-width,
282
+ $gutter: $gutter-width,
283
+ $padding: $grid-padding
284
+ ) {
285
+ // keep the defaults around
286
+ $default-columns: $total-columns;
287
+ $default-width: $column-width;
288
+ $default-gutter: $gutter-width;
289
+ $default-padding: $grid-padding;
290
+
291
+ // use the new settings
292
+ $total-columns: $columns !global;
293
+ $column-width: $width !global;
294
+ $gutter-width: $gutter !global;
295
+ $grid-padding: $padding !global;
296
+
297
+ // apply to contents
298
+ @content;
299
+
300
+ // re-instate the defaults
301
+ $total-columns: $default-columns !global;
302
+ $column-width: $default-width !global;
303
+ $gutter-width: $default-gutter !global;
304
+ $grid-padding: $default-padding !global;
305
+ }
@@ -0,0 +1,51 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Isolation
3
+
4
+ // Isolate the position of a grid element (use in addition to span-columns)
5
+ //
6
+ // $location : The grid column to isolate in, relative to the container;
7
+ // $context : [optional] The context (columns spanned by parent).
8
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
9
+ @mixin isolate(
10
+ $location,
11
+ $context: $total-columns,
12
+ $from: $from-direction,
13
+ $style: fix-static-misalignment()
14
+ ) {
15
+ $to: opposite-position($from);
16
+ margin-#{$to}: -100%;
17
+ margin-#{$from}: space($location - 1, $context, $style);
18
+ }
19
+
20
+ // Isolate a group of elements in a grid, using nth-child selectors
21
+ //
22
+ // $columns : The column-width of each item on the grid;
23
+ // $context : [optional] The context (columns spanned by parent).
24
+ // $selector : [child | of-type | last-of-type ] (default is 'child')
25
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
26
+ @mixin isolate-grid(
27
+ $columns,
28
+ $context: $total-columns,
29
+ $selector: 'child',
30
+ $from: $from-direction,
31
+ $style: fix-static-misalignment()
32
+ ) {
33
+ $to: opposite-position($from);
34
+ $location: 1;
35
+ $line: floor($context / $columns);
36
+
37
+ @include span-columns($columns, $context, $from: $from, $style: $style);
38
+ margin-#{$to}: -100%;
39
+
40
+ @for $item from 1 through $line {
41
+ $nth: '#{$line}n + #{$item}';
42
+ &:#{format-nth($nth,$selector)} {
43
+ margin-#{$from}: space($location - 1, $context, $style);
44
+ @if $location == 1 { clear: $from; }
45
+ @else { clear: none; }
46
+
47
+ $location: $location + $columns;
48
+ @if $location > $context { $location: 1; }
49
+ }
50
+ }
51
+ }
@@ -0,0 +1,93 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Margin Mixins
3
+
4
+ // Apply 'columns' margin before an element to push it along the grid.
5
+ //
6
+ // $columns : The number of columns to span.
7
+ // $context : [optional] The context (columns spanned by parent).
8
+ // : Context is required on any nested elements.
9
+ // : Context MUST NOT be declared on a root element.
10
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
11
+ // $style : The container style to use.
12
+ @mixin pre(
13
+ $columns,
14
+ $context : $total-columns,
15
+ $from : $from-direction,
16
+ $style : fix-static-misalignment()
17
+ ) {
18
+ $from : unquote($from);
19
+ margin-#{$from}: space($columns, $context, $style);
20
+ }
21
+
22
+ // 'push' is a synonymn for 'pre'
23
+ @mixin push(
24
+ $columns,
25
+ $context : $total-columns,
26
+ $from : $from-direction,
27
+ $style : fix-static-misalignment()
28
+ ) {
29
+ $from : unquote($from);
30
+ @include pre($columns, $context, $from, $style);
31
+ }
32
+
33
+ // Apply negative 'columns' margin before an element to pull it along the grid.
34
+ //
35
+ // $columns : The number of columns to span.
36
+ // $context : [optional] The context (columns spanned by parent).
37
+ // : Context is required on any nested elements.
38
+ // : Context MUST NOT be declared on a root element.
39
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
40
+ // $style : The container style to use.
41
+ @mixin pull(
42
+ $columns,
43
+ $context : $total-columns,
44
+ $from : $from-direction,
45
+ $style : fix-static-misalignment()
46
+ ) {
47
+ $from : unquote($from);
48
+ margin-#{$from}: 0 - space($columns, $context, $style);
49
+ }
50
+
51
+ // Apply 'columns' margin after an element to contain it in a grid.
52
+ //
53
+ // $columns : The number of columns to span.
54
+ // $context : [optional] The context (columns spanned by parent).
55
+ // : Context is required on any nested elements.
56
+ // : Context MUST NOT be declared on a root element.
57
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
58
+ // $style : The container style to use.
59
+ @mixin post(
60
+ $columns,
61
+ $context : $total-columns,
62
+ $from : $from-direction,
63
+ $style : fix-static-misalignment()
64
+ ) {
65
+ $from : unquote($from);
66
+ $to : opposite-position($from);
67
+ margin-#{$to}: space($columns, $context, $style);
68
+ }
69
+
70
+ // Apply 'columns' before and/or after an element to contain it on a grid.
71
+ //
72
+ // $pre : The number of columns to add as margin before.
73
+ // $post : The number of columns to add as margin after.
74
+ // $context : [optional] The context (columns spanned by parent).
75
+ // : Context is required on any nested elements.
76
+ // : Context MUST NOT be declared on a root element.
77
+ // $from : The start direction of your layout (e.g. 'left' for ltr languages)
78
+ // $style : The container style to use.
79
+ @mixin squish(
80
+ $pre : false,
81
+ $post : false,
82
+ $context : $total-columns,
83
+ $from : $from-direction,
84
+ $style : fix-static-misalignment()
85
+ ) {
86
+ $from : unquote($from);
87
+ @if $pre {
88
+ @include pre($pre, $context, $from, $style)
89
+ }
90
+ @if $post {
91
+ @include post($post, $context, $from, $style)
92
+ }
93
+ }