1
|
//
|
2
|
// Mixins for the Zen Grids system.
|
3
|
//
|
4
|
|
5
|
|
6
|
// Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-column-count
|
7
|
$zen-column-count : 1 !default;
|
8
|
|
9
|
// Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutter-width
|
10
|
$zen-gutter-width : 20px !default;
|
11
|
|
12
|
// @see http://zengrids.com/help/#zen-auto-include-item-base
|
13
|
$zen-auto-include-item-base : true !default;
|
14
|
$zen-auto-include-flow-item-base : true !default;
|
15
|
|
16
|
// Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width
|
17
|
$zen-grid-width : 100% !default;
|
18
|
|
19
|
// The box-sizing polyfill for IE6/7 requires an absolute path. @see http://zengrids.com/help/#box-sizing-polyfill-path
|
20
|
$box-sizing-polyfill-path : "" !default;
|
21
|
|
22
|
// Specify the CSS3 box-sizing method. @see http://zengrids.com/help/#zen-box-sizing
|
23
|
$zen-box-sizing : border-box !default;
|
24
|
|
25
|
// @see http://zengrids.com/help/#legacy-support-for-ie7
|
26
|
$legacy-support-for-ie7 : false !default;
|
27
|
$legacy-support-for-ie6 : false !default;
|
28
|
|
29
|
// Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-float-direction
|
30
|
$zen-float-direction : left !default;
|
31
|
|
32
|
// Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-reverse-all-floats
|
33
|
$zen-reverse-all-floats : false !default;
|
34
|
|
35
|
|
36
|
//
|
37
|
// Apply this to the grid container element.
|
38
|
// @see http://zengrids.com/help/#zen-grid-container
|
39
|
//
|
40
|
@mixin zen-grid-container {
|
41
|
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
42
|
*position: relative; // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
|
43
|
}
|
44
|
// We use the "micro clearfix", instead of Compass' clearfix or pie-clearfix.
|
45
|
&:before,
|
46
|
&:after {
|
47
|
content: "";
|
48
|
display: table;
|
49
|
}
|
50
|
&:after {
|
51
|
clear: both;
|
52
|
}
|
53
|
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
54
|
*zoom: 1;
|
55
|
}
|
56
|
}
|
57
|
|
58
|
//
|
59
|
// Apply this to any grid item that is also a grid container element for a
|
60
|
// nested grid. @see http://zengrids.com/help/#zen-nested-container
|
61
|
//
|
62
|
@mixin zen-nested-container {
|
63
|
padding: {
|
64
|
left: 0;
|
65
|
right: 0;
|
66
|
}
|
67
|
}
|
68
|
|
69
|
//
|
70
|
// Apply this to each grid item. @see http://zengrids.com/help/#zen-grid-item
|
71
|
//
|
72
|
@mixin zen-grid-item(
|
73
|
$column-span,
|
74
|
$column-position,
|
75
|
$float-direction : $zen-float-direction,
|
76
|
$column-count : $zen-column-count,
|
77
|
$gutter-width : $zen-gutter-width,
|
78
|
$grid-width : $zen-grid-width,
|
79
|
$box-sizing : $zen-box-sizing,
|
80
|
$reverse-all-floats : $zen-reverse-all-floats,
|
81
|
$auto-include-item-base : $zen-auto-include-item-base
|
82
|
) {
|
83
|
|
84
|
// Calculate the unit width.
|
85
|
$unit-width: zen-unit-width($column-count, $grid-width);
|
86
|
|
87
|
// Calculate the item's width.
|
88
|
$width: zen-grid-item-width($column-span, $column-count, $gutter-width, $grid-width, $box-sizing);
|
89
|
|
90
|
// Determine the float direction and its reverse.
|
91
|
$dir: $float-direction;
|
92
|
@if $reverse-all-floats {
|
93
|
$dir: zen-direction-flip($dir);
|
94
|
}
|
95
|
$rev: zen-direction-flip($dir);
|
96
|
|
97
|
float: $dir;
|
98
|
width: $width;
|
99
|
margin: {
|
100
|
#{$dir}: ($column-position - 1) * $unit-width;
|
101
|
#{$rev}: (1 - $column-position - $column-span) * $unit-width;
|
102
|
}
|
103
|
|
104
|
// Auto-apply the unit base mixin.
|
105
|
@if $auto-include-item-base {
|
106
|
@include zen-grid-item-base($gutter-width, $box-sizing);
|
107
|
}
|
108
|
}
|
109
|
|
110
|
//
|
111
|
// Applies a standard set of properites to all grid items in the layout.
|
112
|
// @see http://zengrids.com/help/#zen-grid-item-base
|
113
|
//
|
114
|
@mixin zen-grid-item-base(
|
115
|
$gutter-width : $zen-gutter-width,
|
116
|
$box-sizing : $zen-box-sizing,
|
117
|
$flow-direction : $zen-float-direction,
|
118
|
$reverse-all-flows : $zen-reverse-all-floats
|
119
|
) {
|
120
|
|
121
|
$dir: $flow-direction;
|
122
|
@if $reverse-all-flows {
|
123
|
$dir: zen-direction-flip($dir);
|
124
|
}
|
125
|
|
126
|
padding: {
|
127
|
left: zen-half-gutter($gutter-width, left, $dir);
|
128
|
right: zen-half-gutter($gutter-width, right, $dir);
|
129
|
}
|
130
|
// Specify the border-box properties.
|
131
|
@if $box-sizing == border-box {
|
132
|
-moz-box-sizing: border-box;
|
133
|
-webkit-box-sizing: border-box;
|
134
|
-ms-box-sizing: border-box;
|
135
|
box-sizing: border-box;
|
136
|
}
|
137
|
// Prevent left/right borders since they'll break the layout with content-box.
|
138
|
@if $box-sizing == content-box {
|
139
|
border: {
|
140
|
left: 0 !important;
|
141
|
right: 0 !important;
|
142
|
}
|
143
|
}
|
144
|
// Prevent overflowing content from being hidden beneath other grid items.
|
145
|
word-wrap: break-word; // A very nice CSS3 property.
|
146
|
|
147
|
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
148
|
@if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
|
149
|
@warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
|
150
|
}
|
151
|
@if $box-sizing-polyfill-path != "" {
|
152
|
*behavior: url($box-sizing-polyfill-path);
|
153
|
}
|
154
|
@if $legacy-support-for-ie6 {
|
155
|
_display: inline; // Display inline or double your floated margin! [1]
|
156
|
_overflow: hidden; // Prevent overflowing content from breaking the layout.
|
157
|
_overflow-y: visible; // In IE6, overflow visible is broken [2]
|
158
|
// 1. http://www.positioniseverything.net/explorer/doubled-margin.html
|
159
|
// 2. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
|
160
|
}
|
161
|
}
|
162
|
}
|
163
|
|
164
|
//
|
165
|
// Apply this to grid items that need to be cleared below other grid items.
|
166
|
// @see http://zengrids.com/help/#zen-clear
|
167
|
//
|
168
|
@mixin zen-clear(
|
169
|
$float-direction : $zen-float-direction,
|
170
|
$reverse-all-floats : $zen-reverse-all-floats
|
171
|
) {
|
172
|
// Determine the float direction.
|
173
|
$dir: $float-direction;
|
174
|
@if $reverse-all-floats {
|
175
|
$dir: zen-direction-flip($dir);
|
176
|
}
|
177
|
clear: $dir;
|
178
|
}
|
179
|
|
180
|
//
|
181
|
// Apply this to flow items that need to be floated.
|
182
|
// @see http://zengrids.com/help/#zen-float
|
183
|
//
|
184
|
@mixin zen-float(
|
185
|
$float-direction : $zen-float-direction,
|
186
|
$reverse-all-floats : $zen-reverse-all-floats
|
187
|
) {
|
188
|
// Determine the float direction.
|
189
|
$dir: $float-direction;
|
190
|
@if $reverse-all-floats {
|
191
|
$dir: zen-direction-flip($dir);
|
192
|
}
|
193
|
float: $dir;
|
194
|
}
|
195
|
|
196
|
//
|
197
|
// Apply this to an HTML item that is in the normal flow of a document to help
|
198
|
// align it to the grid. @see http://zengrids.com/help/#zen-float
|
199
|
//
|
200
|
@mixin zen-grid-flow-item(
|
201
|
$column-span,
|
202
|
$parent-column-count : false,
|
203
|
$alpha-gutter : false,
|
204
|
$omega-gutter : true,
|
205
|
$flow-direction : $zen-float-direction,
|
206
|
$column-count : $zen-column-count,
|
207
|
$gutter-width : $zen-gutter-width,
|
208
|
$grid-width : $zen-grid-width,
|
209
|
$box-sizing : $zen-box-sizing,
|
210
|
$reverse-all-flows : $zen-reverse-all-floats,
|
211
|
$auto-include-flow-item-base : $zen-auto-include-flow-item-base
|
212
|
) {
|
213
|
|
214
|
$columns: $column-count;
|
215
|
@if unit($grid-width) == "%" {
|
216
|
@if $parent-column-count == false {
|
217
|
@warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-count to the number of columns that the parent element spans.";
|
218
|
}
|
219
|
@else {
|
220
|
$columns: $parent-column-count;
|
221
|
}
|
222
|
}
|
223
|
|
224
|
$dir: $flow-direction;
|
225
|
@if $reverse-all-flows {
|
226
|
$dir: zen-direction-flip($dir);
|
227
|
}
|
228
|
$rev: zen-direction-flip($dir);
|
229
|
|
230
|
// Auto-apply the unit base mixin.
|
231
|
@if $auto-include-flow-item-base {
|
232
|
@include zen-grid-item-base($gutter-width, $box-sizing);
|
233
|
}
|
234
|
|
235
|
// Calculate the item's width.
|
236
|
$width: zen-grid-item-width($column-span, $columns, $gutter-width, $grid-width, $box-sizing);
|
237
|
|
238
|
@if unit($grid-width) == "%" {
|
239
|
// Our percentage $width is off if the parent has $gutter-width padding.
|
240
|
// Calculate an adjusted gutter to fix the width.
|
241
|
$adjusted-gutter: ($columns - $column-span) * $gutter-width / $columns;
|
242
|
|
243
|
width: $width;
|
244
|
|
245
|
// Ensure the HTML item either has a full gutter or no gutter on each side.
|
246
|
padding-#{$dir}: 0;
|
247
|
@if $alpha-gutter {
|
248
|
margin-#{$dir}: $gutter-width;
|
249
|
}
|
250
|
padding-#{$rev}: $adjusted-gutter;
|
251
|
@if $omega-gutter {
|
252
|
margin-#{$rev}: $gutter-width - $adjusted-gutter;
|
253
|
}
|
254
|
@else {
|
255
|
margin-#{$rev}: -($adjusted-gutter);
|
256
|
}
|
257
|
}
|
258
|
@else {
|
259
|
@if $alpha-gutter and $omega-gutter {
|
260
|
width: $width;
|
261
|
@if $gutter-width != 0 {
|
262
|
margin: {
|
263
|
#{$dir}: zen-half-gutter($gutter-width, left, $dir);
|
264
|
#{$rev}: zen-half-gutter($gutter-width, right, $dir);
|
265
|
}
|
266
|
}
|
267
|
}
|
268
|
@else if not $alpha-gutter and not $omega-gutter {
|
269
|
width: if($box-sizing == border-box, ($width - $gutter-width), $width);
|
270
|
@if $gutter-width != 0 {
|
271
|
padding: {
|
272
|
left: 0;
|
273
|
right: 0;
|
274
|
}
|
275
|
}
|
276
|
}
|
277
|
@else {
|
278
|
width: $width;
|
279
|
@if $omega-gutter {
|
280
|
padding-#{$dir}: 0;
|
281
|
padding-#{$rev}: $gutter-width;
|
282
|
}
|
283
|
@else {
|
284
|
padding-#{$dir}: $gutter-width;
|
285
|
padding-#{$rev}: 0;
|
286
|
}
|
287
|
}
|
288
|
}
|
289
|
}
|
290
|
|
291
|
|
292
|
//
|
293
|
// Helper functions for the Zen mixins.
|
294
|
//
|
295
|
|
296
|
// Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter
|
297
|
@function zen-half-gutter(
|
298
|
$gutter-width : $zen-gutter-width,
|
299
|
$gutter-side : $zen-float-direction,
|
300
|
$flow-direction : $zen-float-direction
|
301
|
) {
|
302
|
$half-gutter: $gutter-width / 2;
|
303
|
// Special handling in case gutter has an odd number of pixels.
|
304
|
@if unit($gutter-width) == "px" {
|
305
|
@if $gutter-side == $flow-direction {
|
306
|
@return floor($half-gutter);
|
307
|
}
|
308
|
@else {
|
309
|
@return ceil($half-gutter);
|
310
|
}
|
311
|
}
|
312
|
@return $half-gutter;
|
313
|
}
|
314
|
|
315
|
// Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width
|
316
|
@function zen-unit-width(
|
317
|
$column-count : $zen-column-count,
|
318
|
$grid-width : $zen-grid-width
|
319
|
) {
|
320
|
$unit-width: $grid-width / $column-count;
|
321
|
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
|
322
|
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
|
323
|
}
|
324
|
@return $unit-width;
|
325
|
}
|
326
|
|
327
|
// Calculates the width of a grid item that spans the specified number of columns.
|
328
|
// @see http://zengrids.com/help/#zen-grid-item-width
|
329
|
@function zen-grid-item-width(
|
330
|
$column-span,
|
331
|
$column-count : $zen-column-count,
|
332
|
$gutter-width : $zen-gutter-width,
|
333
|
$grid-width : $zen-grid-width,
|
334
|
$box-sizing : $zen-box-sizing
|
335
|
) {
|
336
|
$width: $column-span * zen-unit-width($column-count, $grid-width);
|
337
|
@if $box-sizing == content-box {
|
338
|
@if not comparable($width, $gutter-width) {
|
339
|
$units-gutter: unit($gutter-width);
|
340
|
$units-grid: unit($grid-width);
|
341
|
@warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
|
342
|
}
|
343
|
$width: $width - $gutter-width;
|
344
|
}
|
345
|
@return $width;
|
346
|
}
|
347
|
|
348
|
// Returns the opposite direction, given "left" or "right".
|
349
|
// @see http://zengrids.com/help/#zen-direction-flip
|
350
|
@function zen-direction-flip(
|
351
|
$dir
|
352
|
) {
|
353
|
@if $dir == left {
|
354
|
@return right;
|
355
|
}
|
356
|
@else if $dir == right {
|
357
|
@return left;
|
358
|
}
|
359
|
@else if $dir == none or $dir == both {
|
360
|
@return $dir;
|
361
|
}
|
362
|
@warn "Invalid direction passed to zen-direction-flip().";
|
363
|
@return both;
|
364
|
}
|