diff options
Diffstat (limited to 'sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/stylesheets/zen/_grids.scss')
| -rw-r--r-- | sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/stylesheets/zen/_grids.scss | 364 |
1 files changed, 364 insertions, 0 deletions
diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/stylesheets/zen/_grids.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/stylesheets/zen/_grids.scss new file mode 100644 index 000000000..49d5ea2a6 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/stylesheets/zen/_grids.scss @@ -0,0 +1,364 @@ +// +// Mixins for the Zen Grids system. +// + + +// Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-column-count +$zen-column-count : 1 !default; + +// Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutter-width +$zen-gutter-width : 20px !default; + +// @see http://zengrids.com/help/#zen-auto-include-item-base +$zen-auto-include-item-base : true !default; +$zen-auto-include-flow-item-base : true !default; + +// Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width +$zen-grid-width : 100% !default; + +// The box-sizing polyfill for IE6/7 requires an absolute path. @see http://zengrids.com/help/#box-sizing-polyfill-path +$box-sizing-polyfill-path : "" !default; + +// Specify the CSS3 box-sizing method. @see http://zengrids.com/help/#zen-box-sizing +$zen-box-sizing : border-box !default; + +// @see http://zengrids.com/help/#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://zengrids.com/help/#zen-float-direction +$zen-float-direction : left !default; + +// Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-reverse-all-floats +$zen-reverse-all-floats : false !default; + + +// +// Apply this to the grid container element. +// @see http://zengrids.com/help/#zen-grid-container +// +@mixin zen-grid-container { + @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) { + *position: relative; // @TODO: This is a pre-IE8 line of code; don't remember why its needed. + } + // 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; + } +} + +// +// Apply this to any grid item that is also a grid container element for a +// nested grid. @see http://zengrids.com/help/#zen-nested-container +// +@mixin zen-nested-container { + padding: { + left: 0; + right: 0; + } +} + +// +// Apply this to each grid item. @see http://zengrids.com/help/#zen-grid-item +// +@mixin zen-grid-item( + $column-span, + $column-position, + $float-direction : $zen-float-direction, + $column-count : $zen-column-count, + $gutter-width : $zen-gutter-width, + $grid-width : $zen-grid-width, + $box-sizing : $zen-box-sizing, + $reverse-all-floats : $zen-reverse-all-floats, + $auto-include-item-base : $zen-auto-include-item-base +) { + + // Calculate the unit width. + $unit-width: zen-unit-width($column-count, $grid-width); + + // Calculate the item's width. + $width: zen-grid-item-width($column-span, $column-count, $gutter-width, $grid-width, $box-sizing); + + // Determine the float direction and its reverse. + $dir: $float-direction; + @if $reverse-all-floats { + $dir: zen-direction-flip($dir); + } + $rev: zen-direction-flip($dir); + + float: $dir; + width: $width; + margin: { + #{$dir}: ($column-position - 1) * $unit-width; + #{$rev}: (1 - $column-position - $column-span) * $unit-width; + } + + // Auto-apply the unit base mixin. + @if $auto-include-item-base { + @include zen-grid-item-base($gutter-width, $box-sizing); + } +} + +// +// Applies a standard set of properites to all grid items in the layout. +// @see http://zengrids.com/help/#zen-grid-item-base +// +@mixin zen-grid-item-base( + $gutter-width : $zen-gutter-width, + $box-sizing : $zen-box-sizing, + $flow-direction : $zen-float-direction, + $reverse-all-flows : $zen-reverse-all-floats +) { + + $dir: $flow-direction; + @if $reverse-all-flows { + $dir: zen-direction-flip($dir); + } + + padding: { + left: zen-half-gutter($gutter-width, left, $dir); + right: zen-half-gutter($gutter-width, right, $dir); + } + // Specify the border-box properties. + @if $box-sizing == border-box { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-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; + } + } + // Prevent overflowing content from being hidden beneath other grid items. + word-wrap: break-word; // A very nice CSS3 property. + + @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) { + @if $box-sizing == border-box and $box-sizing-polyfill-path == "" { + @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and 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; // Display inline or double your floated margin! [1] + _overflow: hidden; // Prevent overflowing content from breaking the layout. + _overflow-y: visible; // In IE6, overflow visible is broken [2] + // 1. http://www.positioniseverything.net/explorer/doubled-margin.html + // 2. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B + } + } +} + +// +// Apply this to grid items that need to be cleared below other grid items. +// @see http://zengrids.com/help/#zen-clear +// +@mixin zen-clear( + $float-direction : $zen-float-direction, + $reverse-all-floats : $zen-reverse-all-floats +) { + // Determine the float direction. + $dir: $float-direction; + @if $reverse-all-floats { + $dir: zen-direction-flip($dir); + } + clear: $dir; +} + +// +// Apply this to flow items that need to be floated. +// @see http://zengrids.com/help/#zen-float +// +@mixin zen-float( + $float-direction : $zen-float-direction, + $reverse-all-floats : $zen-reverse-all-floats +) { + // Determine the float direction. + $dir: $float-direction; + @if $reverse-all-floats { + $dir: zen-direction-flip($dir); + } + float: $dir; +} + +// +// Apply this to an HTML item that is in the normal flow of a document to help +// align it to the grid. @see http://zengrids.com/help/#zen-float +// +@mixin zen-grid-flow-item( + $column-span, + $parent-column-count : false, + $alpha-gutter : false, + $omega-gutter : true, + $flow-direction : $zen-float-direction, + $column-count : $zen-column-count, + $gutter-width : $zen-gutter-width, + $grid-width : $zen-grid-width, + $box-sizing : $zen-box-sizing, + $reverse-all-flows : $zen-reverse-all-floats, + $auto-include-flow-item-base : $zen-auto-include-flow-item-base +) { + + $columns: $column-count; + @if unit($grid-width) == "%" { + @if $parent-column-count == false { + @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."; + } + @else { + $columns: $parent-column-count; + } + } + + $dir: $flow-direction; + @if $reverse-all-flows { + $dir: zen-direction-flip($dir); + } + $rev: zen-direction-flip($dir); + + // Auto-apply the unit base mixin. + @if $auto-include-flow-item-base { + @include zen-grid-item-base($gutter-width, $box-sizing); + } + + // Calculate the item's width. + $width: zen-grid-item-width($column-span, $columns, $gutter-width, $grid-width, $box-sizing); + + @if unit($grid-width) == "%" { + // Our percentage $width is off if the parent has $gutter-width padding. + // Calculate an adjusted gutter to fix the width. + $adjusted-gutter: ($columns - $column-span) * $gutter-width / $columns; + + width: $width; + + // Ensure the HTML item either has a full gutter or no gutter on each side. + padding-#{$dir}: 0; + @if $alpha-gutter { + margin-#{$dir}: $gutter-width; + } + padding-#{$rev}: $adjusted-gutter; + @if $omega-gutter { + margin-#{$rev}: $gutter-width - $adjusted-gutter; + } + @else { + margin-#{$rev}: -($adjusted-gutter); + } + } + @else { + @if $alpha-gutter and $omega-gutter { + width: $width; + @if $gutter-width != 0 { + margin: { + #{$dir}: zen-half-gutter($gutter-width, left, $dir); + #{$rev}: zen-half-gutter($gutter-width, right, $dir); + } + } + } + @else if not $alpha-gutter and not $omega-gutter { + width: if($box-sizing == border-box, ($width - $gutter-width), $width); + @if $gutter-width != 0 { + padding: { + left: 0; + right: 0; + } + } + } + @else { + width: $width; + @if $omega-gutter { + padding-#{$dir}: 0; + padding-#{$rev}: $gutter-width; + } + @else { + padding-#{$dir}: $gutter-width; + padding-#{$rev}: 0; + } + } + } +} + + +// +// Helper functions for the Zen mixins. +// + +// Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter +@function zen-half-gutter( + $gutter-width : $zen-gutter-width, + $gutter-side : $zen-float-direction, + $flow-direction : $zen-float-direction +) { + $half-gutter: $gutter-width / 2; + // Special handling in case gutter has an odd number of pixels. + @if unit($gutter-width) == "px" { + @if $gutter-side == $flow-direction { + @return floor($half-gutter); + } + @else { + @return ceil($half-gutter); + } + } + @return $half-gutter; +} + +// Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width +@function zen-unit-width( + $column-count : $zen-column-count, + $grid-width : $zen-grid-width +) { + $unit-width: $grid-width / $column-count; + @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) { + @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns."; + } + @return $unit-width; +} + +// Calculates the width of a grid item that spans the specified number of columns. +// @see http://zengrids.com/help/#zen-grid-item-width +@function zen-grid-item-width( + $column-span, + $column-count : $zen-column-count, + $gutter-width : $zen-gutter-width, + $grid-width : $zen-grid-width, + $box-sizing : $zen-box-sizing +) { + $width: $column-span * zen-unit-width($column-count, $grid-width); + @if $box-sizing == content-box { + @if not comparable($width, $gutter-width) { + $units-gutter: unit($gutter-width); + $units-grid: unit($grid-width); + @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})."; + } + $width: $width - $gutter-width; + } + @return $width; +} + +// Returns the opposite direction, given "left" or "right". +// @see http://zengrids.com/help/#zen-direction-flip +@function zen-direction-flip( + $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-flip()."; + @return both; +} |