Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fix bug with relation between container-width and container-style

  • Loading branch information...
commit e2535a36372efffd8a402089d2e81e6699a569c3 1 parent 6cae34a
Eric M. Suzanne authored
26 sass/susy/_functions.scss
View
@@ -30,6 +30,24 @@ $rem-with-px-fallback : true !default;
}
// ---------------------------------------------------------------------------
+// Don't use static output when it will break things
+
+// Switch element-level output to fluid, when container-width is wrong for static
+//
+// fix-static-misalignment([$style, $width])
+// - $style: $container-style.
+// - $width: $container-width.
+@function fix-static-misalignment(
+ $style: $container-style,
+ $width: $container-width
+) {
+ @if $container-width and $container-width != container-outer-width($width: false) {
+ $style: fluid;
+ }
+ @return $style;
+}
+
+// ---------------------------------------------------------------------------
// Grid Functions
// Returns the full width of a grid based on your grid settings.
@@ -88,7 +106,7 @@ $rem-with-px-fallback : true !default;
// $style : The container style to use.
@function column(
$context : $total-columns,
- $style : $container-style
+ $style : fix-static-misalignment()
) {
@return if($style == static, $column-width, relative-width($column-width, $context));
}
@@ -101,7 +119,7 @@ $rem-with-px-fallback : true !default;
@function columns(
$columns,
$context : $total-columns,
- $style : $container-style
+ $style : fix-static-misalignment()
) {
@return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
}
@@ -112,7 +130,7 @@ $rem-with-px-fallback : true !default;
// $style : The container style to use.
@function gutter(
$context : $total-columns,
- $style : $container-style
+ $style : fix-static-misalignment()
) {
@return if($style == static, $gutter-width, relative-width($gutter-width, $context));
}
@@ -137,7 +155,7 @@ $rem-with-px-fallback : true !default;
@function space(
$columns,
$context : $total-columns,
- $style : $container-style
+ $style : fix-static-misalignment()
) {
@return columns($columns, $context, $style) + if($columns >= 1, gutter($context), 0);
}
2  sass/susy/_grid.scss
View
@@ -112,7 +112,7 @@
$context : $total-columns,
$padding : false,
$from : $from-direction,
- $style : $container-style
+ $style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
16 test/css/grid.css
View
@@ -114,3 +114,19 @@
*margin-left: -1em;
display: inline;
}
+
+/* ---------------------------------------------------------------------------
+/* Static output */
+.static {
+ width: 9em;
+ float: left;
+ margin-right: 1em;
+ display: inline;
+}
+
+.force-fluid {
+ width: 15.25424%;
+ float: left;
+ margin-right: 1.69492%;
+ display: inline;
+}
17 test/scss/grid.scss
View
@@ -57,3 +57,20 @@
// Reset $border-box-sizing so it doesn't have other effects
$border-box-sizing: false;
+
+/* ---------------------------------------------------------------------------
+/* Static output */
+
+$container-style: static;
+
+.static {
+ @include span-columns(2);
+}
+
+.force-fluid {
+ $container-width: 960px;
+ @include span-columns(2);
+ $container-width: false;
+}
+
+$container-style: magic;
Please sign in to comment.
Something went wrong with that request. Please try again.