Dotclear

source: themes/berlin/scss/libs/zen-grids/_grids.scss @ 2947:d30ad4cd0994

Revision 2947:d30ad4cd0994, 10.0 KB checked in by franck <carnet.franck.paul@…>, 9 years ago (diff)

Remove old prefixed css rules (and no more required) in Berlin CSS

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

Sites map