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