lib/generators/wrstart/template/stylesheets/tools/_tools.mediaqueries.sass in wrgem-0.0.50 vs lib/generators/wrstart/template/stylesheets/tools/_tools.mediaqueries.sass in wrgem-0.0.51
- old
+ new
@@ -1,11 +1,11 @@
-// **************************************
+// --------------------------------------
//
// #tools.mediaqueries
// http://www.sitepoint.com/managing-responsive-breakpoints-sass/
//
-// **************************************
+// --------------------------------------
$breakpoints: ("small": "(max-width: 520px)", "medium": "(min-width: 521px)", "large": "(min-width: 920px)", "xlarge": "(min-width: 1220px)", "large-shorter": "(min-width: 920px) and ( max-height: 600px)")
// ------------------------------------------------------------------
@@ -26,16 +26,17 @@
@content
@else
// Just warn the user
@warn "Unfortunately, no value could be retrieved from `#{$name}`. " + "Please make sure it is defined in `$breakpoints` map. " + "Or pass the media query as a second parameter to add it to the map."
+
// ------------------------------------------------------------------
// @mixin respond-to
// this mixin allow us to call several media-queries at once
//
// USAGE
// .searchform
-// @include respond-to(screen-xs, small)
+// +respond-to(screen-xs, screen-sm)
// padding-left: 0
// ------------------------------------------------------------------
=respond-to($media...)
@each $mediatype in $media
+media-query($mediatype)