77 lines
2.0 KiB
SCSS
77 lines
2.0 KiB
SCSS
|
// Foundation for Sites by ZURB
|
||
|
|
// foundation.zurb.com
|
||
|
|
// Licensed under MIT Open Source
|
||
|
|
|
||
|
|
////
|
||
|
|
/// @group grid
|
||
|
|
////
|
||
|
|
|
||
|
|
/// Sizes child elements so that `$n` number of items appear on each row.
|
||
|
|
///
|
||
|
|
/// @param {Number} $n - Number of elements to display per row.
|
||
|
|
/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
|
||
|
|
/// @param {Number|List} $gutter
|
||
|
|
/// The gutter to apply to child elements. Accepts multiple values:
|
||
|
|
/// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
|
||
|
|
/// - A fixed numeric value will apply this gutter to all breakpoints.
|
||
|
|
@mixin grid-layout(
|
||
|
|
$n,
|
||
|
|
$selector: '.column',
|
||
|
|
$gutter: null
|
||
|
|
) {
|
||
|
|
& > #{$selector} {
|
||
|
|
float: $global-left;
|
||
|
|
width: percentage(1/$n);
|
||
|
|
|
||
|
|
// If a $gutter value is passed
|
||
|
|
@if($gutter) {
|
||
|
|
// Gutters
|
||
|
|
@if type-of($gutter) == 'map' {
|
||
|
|
@each $breakpoint, $value in $gutter {
|
||
|
|
$padding: rem-calc($value) / 2;
|
||
|
|
|
||
|
|
@include breakpoint($breakpoint) {
|
||
|
|
padding-right: $padding;
|
||
|
|
padding-left: $padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
|
||
|
|
$padding: rem-calc($gutter) / 2;
|
||
|
|
padding-right: $padding;
|
||
|
|
padding-left: $padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(1n) {
|
||
|
|
clear: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(#{$n}n+1) {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
float: $global-left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
|
||
|
|
///
|
||
|
|
/// @param {Number} $n - Number of items that appear in each row.
|
||
|
|
@mixin grid-layout-center-last($n) {
|
||
|
|
@for $i from 1 to $n {
|
||
|
|
@if $i == 1 {
|
||
|
|
&:nth-child(#{$n}n+1):last-child {
|
||
|
|
margin-left: (100 - 100/$n * $i) / 2 * 1%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
&:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
|
||
|
|
margin-left: (100 - 100/$n * $i) / 2 * 1%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|