Commit 5a253654 authored by Alexander Dubovskoy's avatar Alexander Dubovskoy

Susy grid update

parent c65fc0f0
......@@ -15,7 +15,7 @@ $susy-overlay-grid-head-exists: false;
$_output: debug-get(output, $grid);
@include susy-inspect(show-grid, $inspect);
@if $_output == overlay {
@if $_output == overlay and susy-get(debug image, $grid) != hide {
@include overlay-grid($grid);
} @else {
@include background-grid($grid);
......@@ -62,7 +62,7 @@ $susy-overlay-grid-head-exists: false;
$grid: $susy
) {
@if not($susy-overlay-grid-head-exists) {
@at-root head { @include overlay-head; }
@at-root head { @include overlay-head($grid); }
@at-root head:before { @include overlay-trigger; }
@at-root head:hover { @include overlay-trigger-hover; }
$susy-overlay-grid-head-exists: true !global;
......@@ -104,8 +104,10 @@ $susy-overlay-grid-head-exists: false;
// [Private] Overlay Head
// ----------------------
// <head> styles to create grid overlay toggle
@mixin overlay-head {
$_toggle: debug-get(toggle);
@mixin overlay-head (
$grid: $susy
) {
$_toggle: debug-get(toggle, $grid);
$_horz: null;
$_vert: null;
......@@ -327,39 +329,38 @@ $susy-overlay-grid-head-exists: false;
$_show : susy-get(debug image, $grid);
$_return : ();
@if $_show and $_show != hide {
$_line-height: variable-exists(base-line-height);
$_line-height: if($_line-height, $base-line-height, false);
@if $_show and $_show != 'hide' {
$_columns: susy-get(columns, $grid);
@if $_show != show-baseline {
@if $_show != 'show-baseline' {
$_sym: is-symmetrical($_columns);
$_return: if($_sym, get-background-sym($grid), get-background-asym($grid));
$_return: map-merge($_return, (clip: content-box));
} @else if not($_line-height) {
@warn 'Please provide $base-line-height in order to see baseline grids.';
}
@if $_line-height {
@if $_show != show-columns {
$_color: variable-exists(grid-background-baseline-color);
$_color: if($_color, $grid-background-baseline-color, #000);
@if $_show != 'show-columns'
and global-variable-exists(base-line-height)
and type-of($base-line-height) == 'number'
and not unitless($base-line-height) {
$_color: variable-exists('grid-background-baseline-color');
$_color: if($_color, $grid-background-baseline-color, #000);
$_image: map-get($_return, image);
$_size: map-get($_return, size);
$_baseline: (baseline: ($_color 1px, transparent 1px));
$_baseline-size: 100% $_line-height;
$_image: map-get($_return, image);
$_size: map-get($_return, size);
$_baseline: (baseline: ($_color 1px, transparent 1px));
$_baseline-size: 100% $base-line-height;
$_return: map-merge($_return, (
image: if($_image, map-merge($_image, $_baseline), $_baseline),
size: if($_size, ($_size, $_baseline-size), $_baseline-size),
));
}
$_return: map-merge($_return, (
image: if($_image, map-merge($_image, $_baseline), $_baseline),
size: if($_size, ($_size, $_baseline-size), $_baseline-size),
));
@if $_show == show {
@if $_show == 'show' {
$_clip: map-get($_return, clip);
$_return: map-merge($_return, (clip: join($_clip, border-box, comma)));
}
} @else if $_show == 'show-baseline' {
@warn 'Please provide a $base-line-height with the desired height and units';
}
}
......
......@@ -122,8 +122,12 @@ $_susy-media-context: ();
$name
) {
@if map-has-key($susy-media, $name) {
$name: map-get($susy-media, $name);
$name: susy-get-media($name);
$map-value: map-get($susy-media, $name);
@if ($name == $map-value) {
$name: $map-value;
} @else {
$name: susy-get-media($map-value);
}
}
@return $name;
......
......@@ -68,7 +68,8 @@
}
}
@if susy-get(gutter-position, $input) == split {
@if susy-get(gutter-position, $input) == split
and susy-get(gutters, $input) > 0 {
$width: if($width == null, gutters($input), $width + gutters($input));
}
......
......@@ -12,7 +12,9 @@
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$split : if(susy-get(gutter-position, $span) == split, true, false);
$width : if($split, span($span) + gutter($span), span($span));
$gutter : gutter($span);
$span : span($span);
$width : if($split and $gutter, $span + $gutter, $span);
@include susy-inspect(pre, $inspect);
@include margin-output($width, null, $flow);
......@@ -71,7 +73,7 @@
$pre,
$post: false
) {
$inspect : $pre, $post;
$inspect : ($pre, $post);
$pre : map-merge((spread: wide), parse-span($pre));
@if $post {
......@@ -86,7 +88,7 @@
}
}
@include susy-inspect(squish, $inspect...);
@include susy-inspect(squish, $inspect);
@include pre($pre);
@include post($post);
}
......@@ -52,7 +52,7 @@
$pre,
$post: false
) {
$inspect : $pre, $post;
$inspect : ($pre, $post);
$pre : map-merge((spread: wide), parse-span($pre));
@if $post {
......@@ -67,7 +67,7 @@
}
}
@include susy-inspect(pad, $inspect...);
@include susy-inspect(pad, $inspect);
@include prefix($pre);
@include suffix($post);
......
......@@ -9,8 +9,8 @@
$column-width
) {
@if $math == static and not($column-width) {
@warn 'Static math requires a valid column-width setting.';
} @else {
@return $column-width;
@error 'Static math requires a valid column-width setting.';
}
@return $column-width;
}
......@@ -22,17 +22,33 @@
// $columns : The number of columns in the Grid Layout.
@mixin set-container-width(
$columns : $total-columns,
$style : $container-style
$style : $container-style,
$px-vals : $pixel-values-only
){
$width: container-outer-width($columns);
@if $style == 'static' {
@include rem(width, $width);
@if $px-vals == true {
width: round(convert-length($width, px));
} @else {
@include rem(width, $width);
}
} @else {
@if $style == 'fluid' {
@if unit($width) == '%' { @include rem(width, $width); }
@if unit($width) == '%' {
@if $px-vals == true {
width: round(convert-length($width, px));
} @else {
@include rem(width, $width);
}
}
} @else {
@include rem(max-width, $width);
@if $px-vals == true {
max-width: round(convert-length($width, px));
} @else {
@include rem(max-width, $width);
}
@include for-legacy-browser(ie,"6") {
@if unit($width) == 'rem' {
_width: round(convert-length($width, px));
......@@ -48,12 +64,18 @@
//
// $columns : The number of columns in the container.
@mixin apply-container(
$columns : $total-columns
$columns : $total-columns,
$px-vals : $pixel-values-only
){
@include pie-clearfix;
@include set-container-width($columns);
@include rem(padding-left, $grid-padding);
@include rem(padding-right, $grid-padding);
@if $px-vals == true {
padding-left: round(convert-length($grid-padding, px));
padding-right: round(convert-length($grid-padding, px));
} @else {
@include rem(padding-left, $grid-padding);
@include rem(padding-right, $grid-padding);
}
margin: { left: auto; right: auto; }
}
......
......@@ -98,8 +98,8 @@
}
} @else {
@warn "You need to provide either a valid layout (number of columns)
or a valid media-query min-width breakpoint (length).";
@warn "You need to provide either a valid layout (number of columns)"
+ "or a valid media-query min-width breakpoint (length).";
}
}
......@@ -42,6 +42,10 @@ $container-style : magic !default;
// and simply apply the border-box-sizing mixin.
$border-box-sizing : false !default;
// Pixel Values only:
// Make sure only pixel values are set for the container width.
$pixel-values-only : false !default;
// ---------------------------------------------------------------------------
// IE Settings
......
......@@ -7,7 +7,10 @@
// - $mixin : <susy mixin>
// - $inspec : <mixin arguments>
@mixin susy-inspect($mixin, $inspect...) {
@mixin susy-inspect(
$mixin,
$inspect
) {
$show: false;
@each $item in $inspect {
......
......@@ -8,10 +8,12 @@
@mixin susy-box-sizing(
$model: content-box
) {
@if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
@include box-sizing($model);
} @else {
$prefix: (moz, webkit, official);
@include susy-prefix(box-sizing, $model, $prefix);
@if $model {
@if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
@include box-sizing($model);
} @else {
$prefix: (moz, webkit, official);
@include susy-prefix(box-sizing, $model, $prefix);
}
}
}
......@@ -67,7 +67,7 @@
@each $_type, $_req in $requirements {
@each $_i in $_req {
$_pass: call(#{$_type}-exists, $_i);
$_pass: call(unquote("#{$_type}-exists"), $_i);
@if not($_pass) {
$_fail: true;
......
......@@ -11,7 +11,7 @@ $su-version: 1.1;
// PRIVATE: The basic settings
$susy-defaults: (
columns: 4,
gutters: 1/4,
gutters: .25,
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment