breakpoint mixins

gistfile1.txt

/*
** Breakpoint viewport sizes and media queries.
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
** Description:
** Breakpoints are defined as a map of (name: minimum width), order from small to large:

   (xs: 0, sm: 768px, md: 992px, lg: 1200px)

** The map defined in the `$breakpoints` global variable is used as the `$bp` argument by default.

** Name of the next breakpoint, or null for the last breakpoint.

   >> media-breakpoint-next(sm)
   md
	 >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   md
   >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
   md
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

@function media-breakpoint-next($name, $bp: $breakpoints, $breakpoint-names: map-keys($bp)) {
	$n: index($breakpoint-names, $name);

	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

/*
** Minimum breakpoint width. Null for the smallest (first) breakpoint.
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   576px
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
@function media-breakpoint-min($name, $bp: $breakpoints) {
	$min: map-get($bp, $name);

	@return if($min != 0, $min, null);
}

/*
** Maximum breakpoint width. Null for the largest (last) breakpoint.
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
** Maximum breakpoint width. Null for the largest (last) breakpoint.
** The maximum value is calculated as the minimum of the next one less 0.02px
** to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
** See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
** Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
** See https://bugs.webkit.org/show_bug.cgi?id=178261

    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    767.98px
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

@function media-breakpoint-max($name, $bp: $breakpoints) {
	$next: media-breakpoint-next($name, $bp);

	@return if($next, media-breakpoint-min($next, $bp) - 0.02px, null);
}

/*
**  Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
** Useful for making responsive utilities.

		>> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
		""  (Returns a blank string)
		>> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
		"-sm"
** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

@function media-breakpoint-infix($name, $bp: $breakpoints) {
	@return if(media-breakpoint-min($name, $bp) == null, '', '-#{$name}');
}

/* Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider. */
@mixin breakpoint-min($name, $bp: $breakpoints) {
	$min: media-breakpoint-min($name, $bp);

	@if $min {
		@media ($min-width: $min) {
			@content;
		}
	}

	@else {
		@content;
	}
}

/*
		Media of at most the maximum breakpoint width.
		No query for the largest breakpoint.
		Makes the @content apply to the given breakpoint and narrower.
*/
@mixin breakpoint-max($name, $bp: $breakpoints) {
	$max: media-breakpoint-max($name, $bp);

	@if $max {
		@media ($max-width: $max) {
			@content;
		}
	}

	@else {
		@content;
	}
}

/*
		Media that spans multiple breakpoint widths.
		Makes the @content apply between the min and max breakpoints.
*/
@mixin breakpoint-between($lower, $upper, $bp: $breakpoints) {
	$min: media-breakpoint-min($lower, $bp);
	$max: media-breakpoint-max($upper, $bp);

	@if $min != null and $max != null {
		@media ($min-width: $min) and ($max-width: $max) {
			@content;
		}
	}

	@else if $max == null {
		@include breakpoint-min($lower, $bp) {
			@content;
		}
	}

	@else if $min == null {
		@include breakpoint-max($upper, $bp) {
			@content;
		}
	}
}

/*
		Media between the breakpoint's minimum and maximum widths.
		No minimum for the smallest breakpoint, and no maximum for the largest one.
		Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
*/
@mixin breakpoint-only($name, $bp: $breakpoints) {
	$min: media-breakpoint-min($name, $bp);
	$max: media-breakpoint-max($name, $bp);

	@if $min != null and $max != null {
		@media ($min-width: $min) and ($max-width: $max) {
			@content;
		}
	}

	@else if $max == null {
		@include breakpoint-min($name, $bp) {
			@content;
		}
	}

	@else if $min == null {
		@include breakpoint-max($name, $bp) {
			@content;
		}
	}
}

/* Custom breakpoints */
@mixin breakpoint-custom-min($size, $orientation: false) {
	@if $orientation {
		@media ($min-width: $size) and (orientation: $orientation) {
			@content;
		}
	}

	@else {
		@media ($min-width: $size) {
			@content;
		}
	}
}

@mixin breakpoint-custom-max($size, $orientation: false) {
	@if $orientation {
		@media ($max-width: $size) and (orientation: $orientation) {
			@content;
		}
	}

	@else {
		@media ($max-width: $size) {
			@content;
		}
	}
}

@mixin breakpoint-custom-between($from, $to, $orientation: false) {
	@if $orientation {
		@media ($min-width: $from) and ($max-width: $to) and (orientation: $orientation) {
			@content;
		}
	}

	@else {
		@media ($min-width: $from) and ($max-width: $to) {
			@content;
		}
	}
}