_responsive.scss

/**
 * Responsive media query mixins
 * =================================
 * - These are used so that we can define separate media-query content
 * - Arguments can use:
 *   - a named breakpoint in the $breakpoints map, e.g. mid
 *   - a pixel value e.g. 500px
 *   - a unitless value that is eqivalent to a pixel e.g. 500
 */

// $mq-base variable:
//
// This is needed because browsers do not calculate em-based
// media queries correctly. It is set to 16 because we think
// the majority of users will have their browser set to 100%
// zoom level.
//
// See below for an explanation:
// http://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html
$mq-base: 16;


/**
 * Min-width media query:
 * - Equivalent to: @media screen and (min-width: 20em) { ... }
 * - Usage: @include ko-respond-min(mid) { ... };
 */
@mixin ko-respond-min($width) {
	@warn "This mixin will be deprecated soon, please use the include-media plugin for defining your media queries";
	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);

	@media screen and (min-width: $width-em) {
		@content;
	}
}


/**
 * Max-width media query:
 * - Equivalent to: @media screen and (max-width: 20em) { ... }
 * - Usage: @include ko-respond-max(mid) { ... };
 */
@mixin ko-respond-max($width) {
	@warn "This mixin will be deprecated soon, please use the include-media plugin for defining your media queries";
	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);

	@media screen and (max-width: $width-em) {
		@content;
	}
}


/**
 * Min-max-width media query:
 * - Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
 * - Usage: @include ko-respond-min-max(narrow, 600) { ... };
 */
@mixin ko-respond-min-max($min-width, $max-width) {
	@warn "This mixin will be deprecated soon, please use the include-media plugin for defining your media queries";
	$min-width-em: ko-em(ko-strip-units(ko-bp($min-width)), $mq-base);
	$max-width-em: ko-em(ko-strip-units(ko-bp($max-width)), $mq-base);

	@media screen and (min-width: $min-width-em) and (max-width: $max-width-em) {
		@content;
	}
}