149 lines
4.5 KiB
SCSS
Executable File
149 lines
4.5 KiB
SCSS
Executable File
//
|
|
// "Flow" module for the Zen Grids system.
|
|
//
|
|
|
|
|
|
@import "grids";
|
|
|
|
// @see http://next.zengrids.com/reference/flow/#zen-auto-include-grid-item-base
|
|
$zen-auto-include-flow-item-base : true !default;
|
|
|
|
|
|
//
|
|
// Apply this to an HTML item that is in the normal flow of a document to help
|
|
// align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
|
|
//
|
|
@mixin zen-grid-flow-item(
|
|
$column-span,
|
|
$parent-column-span : false,
|
|
$alpha-gutter : false,
|
|
$omega-gutter : true,
|
|
$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-flow-item-base : $zen-auto-include-flow-item-base
|
|
) {
|
|
|
|
// Save the columns and gutters from the parent context.
|
|
$main-columns: $columns;
|
|
$main-gutters: $gutters;
|
|
$main-grid-width: $grid-width;
|
|
|
|
// Find the parent context for fluid layouts.
|
|
@if unit($grid-width) == "%" {
|
|
// The number of columns the parent element spans is our new column count.
|
|
@if $parent-column-span != false {
|
|
$columns: $parent-column-span;
|
|
}
|
|
@else {
|
|
// If we don't know the number of columns the parent element spans, then
|
|
// warn the user and force the flow item to span 100% of the parent.
|
|
@warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-span to the number of columns that the parent element spans.";
|
|
$column-span: $columns;
|
|
}
|
|
// We want our inner grid to span the entire width of the parent.
|
|
$grid-width: 100%;
|
|
}
|
|
|
|
// Determine the flow direction and its reverse.
|
|
$dir: $direction;
|
|
@if $switch-direction {
|
|
$dir: zen-direction-switch($dir);
|
|
}
|
|
$rev: zen-direction-switch($dir);
|
|
|
|
// Calculate the new gutters when the layout and gutters are both fluid.
|
|
@if unit($grid-width) == "%" and unit($gutters) == "%" {
|
|
// Calculate the parent's width.
|
|
$parent-width: zen-grid-item-width($parent-column-span, $main-columns, $main-gutters, $gutter-method, $main-grid-width, $box-sizing);
|
|
// Calculate the new gutters.
|
|
$gutters: $main-gutters * ($grid-width / $parent-width);
|
|
}
|
|
|
|
// Auto-apply the unit base mixin.
|
|
@if $auto-include-flow-item-base {
|
|
@include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
|
|
}
|
|
|
|
// Calculate the item's width.
|
|
$width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
|
|
@if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and $box-sizing == border-box {
|
|
$width: $width - $gutters;
|
|
}
|
|
width: $width;
|
|
|
|
@if $gutter-method == margin {
|
|
@if $alpha-gutter {
|
|
margin-#{$dir}: $gutters;
|
|
}
|
|
@if $omega-gutter {
|
|
margin-#{$rev}: $gutters;
|
|
}
|
|
}
|
|
@else if unit($grid-width) == "%" {
|
|
// Our percentage $width is off since the parent has $main-gutters padding.
|
|
// Calculate an adjusted gutter to fix the width.
|
|
$adjusted-gutter: ($columns - $column-span) * $gutters / $columns;
|
|
|
|
// Ensure the HTML item either has a full gutter or no gutter on each side.
|
|
padding-#{$dir}: 0;
|
|
@if $alpha-gutter {
|
|
margin-#{$dir}: $gutters;
|
|
}
|
|
padding-#{$rev}: $adjusted-gutter;
|
|
@if $omega-gutter {
|
|
margin-#{$rev}: $gutters - $adjusted-gutter;
|
|
}
|
|
@else {
|
|
margin-#{$rev}: -($adjusted-gutter);
|
|
}
|
|
}
|
|
@else {
|
|
@if $alpha-gutter and $omega-gutter {
|
|
@if $gutters != 0 {
|
|
margin: {
|
|
#{$dir}: zen-half-gutter($gutters, left, $dir);
|
|
#{$rev}: zen-half-gutter($gutters, right, $dir);
|
|
}
|
|
}
|
|
}
|
|
@else if not $alpha-gutter and not $omega-gutter {
|
|
@if $gutters != 0 {
|
|
padding: {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
@else if $omega-gutter {
|
|
padding-#{$dir}: 0;
|
|
padding-#{$rev}: $gutters;
|
|
}
|
|
@else {
|
|
padding-#{$dir}: $gutters;
|
|
padding-#{$rev}: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Apply this to flow items that need to be floated.
|
|
// @see http://next.zengrids.com/reference/flow/#zen-float
|
|
//
|
|
@mixin zen-float(
|
|
$direction : $zen-direction,
|
|
$switch-direction : $zen-switch-direction
|
|
) {
|
|
// Determine the float direction.
|
|
$dir: $direction;
|
|
@if $switch-direction {
|
|
$dir: zen-direction-switch($dir);
|
|
}
|
|
float: $dir;
|
|
}
|
|
|