Commit dbb94611 authored by Aron Carroll's avatar Aron Carroll

Fix responsive styles when running Sass >= 3.4

In Sass 3.4 the index() function now returns null instead of false. So
we just perform a truthy check in the respond-to mixin rather than a
direct comparison.

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html
parent 3f243561
...@@ -3,31 +3,31 @@ $break-medium: 768px !default; ...@@ -3,31 +3,31 @@ $break-medium: 768px !default;
$break-large: 1024px !default; $break-large: 1024px !default;
@mixin respond-to($media) { @mixin respond-to($media) {
@if type-of($media) == string { @if type-of($media) == 'string' {
@if $media == handhelds { @if $media == 'handhelds' {
@media only screen and (max-width: $break-small) { @content; } @media only screen and (max-width: $break-small) { @content; }
} }
@else if $media == wide-handhelds { @else if $media == 'wide-handhelds' {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; } @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
} }
@else if $media == tablets { @else if $media == 'tablets' {
@media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; } @media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; }
} }
@else if $media == desktops { @else if $media == 'desktops' {
@media only screen and (min-width: $break-large + 1) { @content; } @media only screen and (min-width: $break-large + 1) { @content; }
} }
} }
@else if type-of($media) == list { @else if type-of($media) == 'list' {
@if index($media, handhelds) != false { @if index($media, 'handhelds') {
@media only screen and (max-width: $break-small) { @content; } @media only screen and (max-width: $break-small) { @content; }
} }
@if index($media, wide-handhelds) != false { @if index($media, 'wide-handhelds') {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; } @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
} }
@if index($media, tablets) != false { @if index($media, 'tablets') {
@media only screen and (min-width: $break-medium + -1) and (max-width: $break-large){ @content; } @media only screen and (min-width: $break-medium + -1) and (max-width: $break-large){ @content; }
} }
@if index($media, desktops) != false { @if index($media, 'desktops') {
@media only screen and (min-width: $break-large + 1) { @content; } @media only screen and (min-width: $break-large + 1) { @content; }
} }
} }
......
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