Sha256: f3aabc135974a0c1e52a6489624b8a8e4920876e8d0ba034cd7b97d89e521a48
Contents?: true
Size: 1.62 KB
Versions: 18
Compression:
Stored size: 1.62 KB
Contents
@import "compass/css3/images";
$equal-height-columns-direction: left !default;
//////////////////////////////
// Equal Height Columns
//
// Builds equal-height columns based on Dan Cederholm's Faux Columns method using CSS3 Gradients
// Can be used to build fluid or fixed backgrounds, depending on widths passed in.
// http://alistapart.com/article/fauxcolumns
//////////////////////////////
@mixin equal-height-columns($widths, $colors, $direction: $equal-height-columns-direction) {
@if (length($widths) != length($colors)) and (length($widths) != length($colors) - 1) {
@warn 'You either need an equal number of widths and colors or one less width than color, in which case it is assumed that the last width goes to 100%. Please provide the correct amount of widths and colors.';
}
@else {
$stops: ();
@if length($widths) == (length($colors) - 1) {
$widths: append($widths, 100%);
}
$i: 1;
@each $width in $widths {
$width: nth($widths, $i);
$color: nth($colors, $i);
@if $i == 1 {
$stops: join($stops, build-gradient-piece($width, $color), comma);
}
@else {
$position: nth($widths, $i - 1);
$stops: join($stops, build-gradient-piece($width, $color, $position), comma);
}
$i: $i + 1;
}
@include background-image(
linear-gradient($direction, $stops)
);
}
}
@function build-gradient-piece($width, $color, $position: false) {
@if ($position == 'last') {
@return ($color $width);
}
@else if ($position != false) {
@return $color $position, $color $width;
}
@else {
@return $color, $color $width;
}
}
Version data entries
18 entries across 18 versions & 1 rubygems