Current oav website
This commit is contained in:
Charlie Root
320
dotclear._no/themes/berlin/scss/libs/zen-grids/_grids.scss
Executable file
320
dotclear._no/themes/berlin/scss/libs/zen-grids/_grids.scss
Executable file
@ -0,0 +1,320 @@
|
||||
//
|
||||
// Main module for the Zen Grids system.
|
||||
//
|
||||
|
||||
|
||||
// Specify the number of columns in the grid. @see http://next.zengrids.com/reference/grids/#zen-columns
|
||||
$zen-columns : 1 !default;
|
||||
|
||||
// Specify the width of the gutters (as padding). @see http://next.zengrids.com/reference/grids/#zen-gutters
|
||||
$zen-gutters : 20px !default;
|
||||
|
||||
// Specify the gutter method. Can be padding or margin.
|
||||
$zen-gutter-method : padding !default;
|
||||
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-auto-include-grid-item-base
|
||||
$zen-auto-include-grid-item-base : true !default;
|
||||
|
||||
// Specify the width of the entire grid. @see http://next.zengrids.com/reference/grids/#zen-grid-width
|
||||
$zen-grid-width : 100% !default;
|
||||
|
||||
// The box-sizing polyfill for IE6/7 requires an absolute path. @see http://next.zengrids.com/reference/grids/#box-sizing-polyfill-path
|
||||
$box-sizing-polyfill-path : "" !default;
|
||||
|
||||
// Specify the CSS3 box-sizing method. @see http://next.zengrids.com/reference/grids/#zen-box-sizing
|
||||
$zen-box-sizing : border-box !default;
|
||||
|
||||
// @see http://next.zengrids.com/reference/grids/#legacy-support-for-ie7
|
||||
$legacy-support-for-ie7 : false !default;
|
||||
$legacy-support-for-ie6 : false !default;
|
||||
|
||||
// Specify the default floating direction for zen's mixins. @see http://next.zengrids.com/reference/grids/#zen-direction
|
||||
$zen-direction : left !default;
|
||||
|
||||
// Reverse the floating direction in all zen's mixins. @see http://next.zengrids.com/reference/grids/#zen-switch-direction
|
||||
$zen-switch-direction : false !default;
|
||||
|
||||
|
||||
//
|
||||
// Apply this to create a grid container element.
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-grid-container
|
||||
//
|
||||
@mixin zen-grid-container(
|
||||
$context : none,
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-method : $zen-gutter-method,
|
||||
$direction : $zen-direction
|
||||
) {
|
||||
|
||||
// @TODO: This is a pre-IE8 line of code; don't remember why its needed.
|
||||
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
||||
*position: relative;
|
||||
}
|
||||
|
||||
// We use the "micro clearfix", instead of Compass' clearfix or pie-clearfix.
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// Un-do the gutter padding of the parent grid item.
|
||||
@if $context == flow and $gutter-method == padding {
|
||||
margin: {
|
||||
left: -(zen-half-gutter($gutters, left, $direction));
|
||||
right: -(zen-half-gutter($gutters, right, $direction));
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent any padding from messing up the alignment of the nested grid.
|
||||
@if $context == grid-item or $context == flow {
|
||||
padding: {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Apply this to each grid item. @see http://next.zengrids.com/reference/grids/#zen-grid-item
|
||||
//
|
||||
@mixin zen-grid-item(
|
||||
$column-span,
|
||||
$column-position,
|
||||
$direction : $zen-direction,
|
||||
$columns : $zen-columns,
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-method : $zen-gutter-method,
|
||||
$grid-width : $zen-grid-width,
|
||||
$box-sizing : $zen-box-sizing,
|
||||
$switch-direction : $zen-switch-direction,
|
||||
$auto-include-grid-item-base : $zen-auto-include-grid-item-base
|
||||
) {
|
||||
|
||||
// Calculate the unit width.
|
||||
$unit-width: zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
|
||||
|
||||
// Calculate the item's width.
|
||||
$width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
|
||||
|
||||
// Calculate the margin from the container's edge.
|
||||
$margin: ($column-position - 1) * $unit-width;
|
||||
@if $gutter-method == margin {
|
||||
$margin: $margin + (floor($column-position) - 1) * $gutters;
|
||||
}
|
||||
|
||||
// Determine the float direction and its reverse.
|
||||
$dir: $direction;
|
||||
@if $switch-direction {
|
||||
$dir: zen-direction-switch($dir);
|
||||
}
|
||||
$rev: zen-direction-switch($dir);
|
||||
|
||||
float: $dir;
|
||||
width: $width;
|
||||
margin: {
|
||||
#{$dir}: $margin;
|
||||
#{$rev}: -100%;
|
||||
}
|
||||
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
||||
*margin-#{$rev}: -99.9%;
|
||||
}
|
||||
|
||||
// Auto-apply the unit base mixin.
|
||||
@if $auto-include-grid-item-base {
|
||||
@include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Applies a standard set of properites to all grid items in the layout.
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
|
||||
//
|
||||
@mixin zen-grid-item-base(
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-method : $zen-gutter-method,
|
||||
$box-sizing : $zen-box-sizing,
|
||||
$direction : $zen-direction,
|
||||
$switch-direction : $zen-switch-direction
|
||||
) {
|
||||
|
||||
$dir: $direction;
|
||||
@if $switch-direction {
|
||||
$dir: zen-direction-switch($dir);
|
||||
}
|
||||
|
||||
@if $gutter-method == padding {
|
||||
padding: {
|
||||
left: zen-half-gutter($gutters, left, $dir);
|
||||
right: zen-half-gutter($gutters, right, $dir);
|
||||
}
|
||||
}
|
||||
// Specify the border-box properties.
|
||||
@if $box-sizing == border-box {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// Prevent left/right borders since they'll break the layout with content-box.
|
||||
@if $box-sizing == content-box {
|
||||
border: {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
@if $gutter-method == margin {
|
||||
padding: {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Prevent overflowing content from being hidden beneath other grid items.
|
||||
word-wrap: break-word;
|
||||
|
||||
@if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
|
||||
@if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
|
||||
@warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
|
||||
}
|
||||
@if $box-sizing-polyfill-path != "" {
|
||||
*behavior: url($box-sizing-polyfill-path);
|
||||
}
|
||||
@if $legacy-support-for-ie6 {
|
||||
// Display inline or double your floated margin!
|
||||
// @see http://www.positioniseverything.net/explorer/doubled-margin.html
|
||||
_display: inline;
|
||||
// Prevent overflowing content from breaking the layout.
|
||||
_overflow: hidden;
|
||||
// In IE6, overflow visible is broken.
|
||||
// @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
|
||||
_overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Apply this to a grid item so that it starts a new row.
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-new-row
|
||||
//
|
||||
@mixin zen-new-row(
|
||||
$clear : $zen-direction,
|
||||
$switch-direction : $zen-switch-direction
|
||||
) {
|
||||
// Determine the clearing direction.
|
||||
@if $switch-direction {
|
||||
$clear: zen-direction-switch($clear);
|
||||
}
|
||||
clear: $clear;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Helper functions for the Zen mixins.
|
||||
//
|
||||
|
||||
// Returns a half gutter width. @see http://next.zengrids.com/reference/grids/#zen-half-gutter
|
||||
@function zen-half-gutter(
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-side : $zen-direction,
|
||||
$direction : $zen-direction
|
||||
) {
|
||||
$half-gutter: $gutters / 2;
|
||||
// Special handling in case gutter has an odd number of pixels.
|
||||
@if unit($gutters) == "px" {
|
||||
@if $gutter-side == $direction {
|
||||
@return floor($half-gutter);
|
||||
}
|
||||
@else {
|
||||
@return ceil($half-gutter);
|
||||
}
|
||||
}
|
||||
@return $half-gutter;
|
||||
}
|
||||
|
||||
// Warns if the gutter and grid width units are not comparable.
|
||||
@function zen-compare-units(
|
||||
$feature,
|
||||
$gutters : $zen-gutters,
|
||||
$grid-width : $zen-grid-width
|
||||
) {
|
||||
@if not comparable($gutters, $grid-width) {
|
||||
$units-gutter: unit($gutters);
|
||||
$units-grid: unit($grid-width);
|
||||
@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}).";
|
||||
@return false;
|
||||
}
|
||||
@return true;
|
||||
}
|
||||
|
||||
// Calculates the unit width of a column. @see http://next.zengrids.com/reference/grids/#zen-unit-width
|
||||
@function zen-unit-width(
|
||||
$columns : $zen-columns,
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-method : $zen-gutter-method,
|
||||
$grid-width : $zen-grid-width
|
||||
) {
|
||||
$unit-width: 0;
|
||||
@if $gutter-method == margin {
|
||||
$test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
|
||||
$unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
|
||||
}
|
||||
@else {
|
||||
$unit-width: $grid-width / $columns;
|
||||
}
|
||||
@if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
|
||||
@if $gutter-method == margin {
|
||||
$num_gutters: $columns - 1;
|
||||
@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.";
|
||||
}
|
||||
@else {
|
||||
@warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
|
||||
}
|
||||
}
|
||||
@return $unit-width;
|
||||
}
|
||||
|
||||
// Calculates the width of a grid item that spans the specified number of columns.
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-grid-item-width
|
||||
@function zen-grid-item-width(
|
||||
$column-span,
|
||||
$columns : $zen-columns,
|
||||
$gutters : $zen-gutters,
|
||||
$gutter-method : $zen-gutter-method,
|
||||
$grid-width : $zen-grid-width,
|
||||
$box-sizing : $zen-box-sizing
|
||||
) {
|
||||
$width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
|
||||
|
||||
// Add the margin gutters internal to the spanning grid item.
|
||||
@if $gutter-method == margin {
|
||||
$width: $width + (floor($column-span) - 1) * $gutters;
|
||||
}
|
||||
// For the original box model, remove the padding from the width.
|
||||
@elseif $box-sizing == content-box {
|
||||
$test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
|
||||
$width: $width - $gutters;
|
||||
}
|
||||
@return $width;
|
||||
}
|
||||
|
||||
// Returns the opposite direction, given "left" or "right".
|
||||
// @see http://next.zengrids.com/reference/grids/#zen-direction-switch
|
||||
@function zen-direction-switch(
|
||||
$dir
|
||||
) {
|
||||
@if $dir == left {
|
||||
@return right;
|
||||
}
|
||||
@else if $dir == right {
|
||||
@return left;
|
||||
}
|
||||
@else if $dir == none or $dir == both {
|
||||
@return $dir;
|
||||
}
|
||||
@warn "Invalid direction passed to zen-direction-switch().";
|
||||
@return both;
|
||||
}
|
||||
Reference in New Issue
Block a user