must have sass mixins

/*--------------------------------
	Media Queries
	used for outputting content either between media query tags, or without (for fixed-width.scss)
	example: basic usage
	.element {
		width: 50%;
		@include mq("tablet-small") {
			width: 20%;
		}
	}
	example: using max-width
	.element {
		width: 50%;
		@include mq("tablet-small", "max") {
			width: 20%;
		}
	}
*/

$fixed-width:       false !default;
$fixed-width-limit: 980px !default;

@mixin mq($width, $type: min) {

    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);

        @if $type == max {
            $width: $width - 1px;
        }
    }

    @if $fixed-width {

        @if $width <= $fixed-width-limit {
            @content;
        }

    } @else {

        @media only screen and (#{$type}-width: $width) {
            @content;
        }

    }

}



/*--------------------------------
	Margin / Padding Quick Resets
	example: top margin
	.element {
		@include push--top($base-spacing-unit);
	}
	example: top & bottom margin
	.element {
		@include push--ends($base-spacing-unit);
	}
	example: left & right margin
	.element {
		@include push--sides($base-spacing-unit);
	}
	example: remove a top margin
	.element {
		@include flush--top;
	}
*/

// add/remove margins

@mixin push($spacing: $base-spacing-unit) { margin: $spacing; }
@mixin push--top($spacing: $base-spacing-unit) { margin-top: $spacing; }
@mixin push--bottom($spacing: $base-spacing-unit) { margin-bottom: $spacing; }
@mixin push--left($spacing: $base-spacing-unit) { margin-left: $spacing; }
@mixin push--right($spacing: $base-spacing-unit) { margin-right: $spacing; }
@mixin push--ends($spacing: $base-spacing-unit) { margin: { top: $spacing; bottom: $spacing; } }
@mixin push--sides($spacing: $base-spacing-unit) { margin: { left: $spacing; right: $spacing; } }

@mixin push--auto { margin: { left: auto; right: auto; } }
@mixin offset--sides($spacing: $base-spacing-unit) { margin: { left: -$spacing; right: -$spacing; } }

@mixin flush { margin: 0; }
@mixin flush--top { margin-top: 0; }
@mixin flush--bottom { margin-bottom: 0; }
@mixin flush--left { margin-left: 0; }
@mixin flush--right { margin-right: 0; }
@mixin flush--ends { margin: { top: 0; bottom: 0; } }
@mixin flush--sides { margin: { left: 0; right: 0; } }


// add/remove paddings

@mixin soft($spacing: $base-spacing-unit) { padding: $spacing; }
@mixin soft--top($spacing: $base-spacing-unit) { padding-top: $spacing; }
@mixin soft--bottom($spacing: $base-spacing-unit) { padding-bottom: $spacing; }
@mixin soft--left($spacing: $base-spacing-unit) { padding-left: $spacing; }
@mixin soft--right($spacing: $base-spacing-unit) { padding-right: $spacing; }
@mixin soft--ends($spacing: $base-spacing-unit) { padding: { top: $spacing; bottom: $spacing; } }
@mixin soft--sides($spacing: $base-spacing-unit) { padding: { left: $spacing; right: $spacing; } }

@mixin hard { padding: 0; }
@mixin hard--top { padding-top: 0; }
@mixin hard--bottom { padding-bottom: 0; }
@mixin hard--left { padding-left: 0; }
@mixin hard--right { padding-right: 0; }
@mixin hard--ends { padding: { top: 0; bottom: 0; } }
@mixin hard--sides { padding: { left: 0; right: 0; } }



/*--------------------------------
	LT IE9
	to be used in conjunction with fixed-width.scss
*/

// only chuck out content
$lt-ie9: false !default;

@mixin lt-ie9 {

	@if $lt-ie9 {

		.lt-ie9 & {
			@content;
		}

	}

}



/*--------------------------------
	Helper mixins
*/

// Contain floats / clearfix

@mixin cf {

	&:after {
		content: "";
		display: table;
		clear: both;
	}
}


// Image replacement

@mixin ir {
	display: block;
	background: {
		repeat: no-repeat;
		position: 0 0;
	}
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}


// Hide from both screenreaders and browsers

@mixin hidden {
	display: none;
	visibility: hidden;
}

@mixin visible($state: 'block') {
	display: unquote($state);
	visibility: visible;
}


// Hide only visually, but have it available for screenreaders

@mixin vh($focusable: false) {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;

	@if $focusable {
		@include vh-focusable;
	}
}

@mixin vh-reset {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}


// Allow the element to be focusable when navigated to via the keyboard

@mixin vh-focusable {

	&:active,
	&:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
}


// Hide visually and from screenreaders, but maintain layout

@mixin invisible {
	visibility: hidden;
}



/*--------------------------------
	Form input placeholder text
	example:
	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}
*/

@mixin input-placeholder {
	&.placeholder { @content; }
	&:-moz-placeholder { @content; }
	&::-moz-placeholder { @content; }
	&:-ms-input-placeholder { @content; }
	&::-webkit-input-placeholder { @content; }
}



/*--------------------------------
	Retina images
	example:
	.element {
		@include retina {
			background-image: url(../img/[email protected]);
		}
	}
*/

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3 / 2),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx) {
		@content;
	}
}



/*--------------------------------
	Content margins
	fore removing first/last child margins
	example: default
	.element {
		@include content-margins;
	}
	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}
	example: empty selector
	.element {
		@include content-margins(false);
	}
	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}
*/


@mixin content-margins($selector: '> *') {
	@if $selector {
		#{unquote($selector)} {
			&:first-child { margin-top: 0; }
			&:last-child { margin-bottom: 0; }
		}
	} @else {
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}



/*--------------------------------
	CSS Triangle
	used for creating CSS only triangles
	example:
	.element {
		&:before {
			@include css-triangle(blue, down);
		}
	}
*/

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
	@include pseudo($pos: $position);
	width: 0;
	height: 0;

	@if $round {
		border-radius: 3px;
	}

	@if $direction == down {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
		margin-top: 0 - round( $size / 2.5 );
	} @else if $direction == up {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
		margin-bottom: 0 - round( $size / 2.5 );
	} @else if $direction == right {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
		margin-right: -$size;
	} @else if  $direction == left {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right: $size solid $color;
		margin-left: -$size;
	}
}



/*--------------------------------
	Hide text
	example:
	.element {
		@include hide-text;
	}
*/

@mixin hide-text($break: false, $indent: 200%, $align: left, $overflow: hidden) {
	@if $break {
		position: absolute;
		top: 0; left: 0;
		pointer-events: none;
	}
	text: {
		indent: $indent;
		align: $align;
	}
	font-size: 0;
	white-space: nowrap;
	@if $overflow {
		overflow: $overflow;
	}
}



/*--------------------------------
	Responsive ratio
	Used for creating scalable elements that maintain the same ratio
	example:
	.element {
		@include responsive-ratio(400, 300);
	}
*/

@mixin responsive-ratio($x,$y, $pseudo: false) {
	$padding: unquote( ( $y / $x ) * 100 + '%' );

	@if $pseudo {
		&:before {
			@include pseudo($pos: relative);
			width: 100%;
			padding-top: $padding;
		}
	} @else {
		padding-top: $padding;
	}
}



/*--------------------------------
	Typography
	Text image replacement, with responsive ratio
	HTML:
	<h1 class="element">
		<span>Text to replace</span>
	</h1>
	example:
	.element {
		@include typography(200, 50, 'hello-world');
	}
*/

@mixin typography($w, $h, $file, $type: png, $overflow: hidden) {
	@include responsive-ratio($w, $h, true);
	position: relative;
	max-width: ( $w / 10 ) * 1rem;
	background: url('/assets/img/typography/#{$file}.#{$type}') 50% 50% no-repeat;
	background-size: contain;

	span {
		@include hide-text(true, $overflow: $overflow);
	}
}



/*--------------------------------
	Icon
	For using fontastic icons in pseudo elements
*/

@mixin icon-css($content: false) {
	@if $content {
		content: '#{$content}';
	}
	display: block;
	font-family: "university-of-northampton" !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/*--------------------------------
	Colours
	background, colour, etc. match up with colour map in _variables.scss
	modify to suit per project
*/

@mixin colours(
	$selector: false,
	$chain: "&--",
	$background: "base",
	$border: true
) {

	@each $name, $values in $colours {
		#{$chain}#{$name} {

			@if $selector {

				#{$selector} {
					@if $background {
						background-color: map-get($values, $background);
						@if $border {
							border-color: darken(map-get($values, $background), 20%);
						}
					}
				}

			} @else {

				@if $background {
					background-color: map-get($values, $background);
				}

			}
		}

	}

}



/*--------------------------------
	Misc
*/

@mixin antialias {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


@mixin appearance($val: none) {
	-webkit-appearance: $val;
	-moz-appearance: $val;
	appearance: $val;
}


@mixin hardware($backface: true, $perspective: 1000) {

	@if $backface {
		backface-visibility: hidden;
	}

	perspective: $perspective;
}


@mixin pos($pos, $t, $r, $b, $l, $z: false, $hardware: true) {
	@if $pos == fixed and $hardware { @include hardware; }
	@if $pos { position: $pos; }
	@if $t { top: $t; }
	@if $r { right: $r; }
	@if $b { bottom: $b; }
	@if $l { left: $l; }
	@if $z { z-index: $z; }
}


@mixin pseudo($display: block, $pos: absolute, $content: ''){
	content: $content;
	display: $display;
	position: $pos;
}


@mixin selection {
	::-moz-selection { @content; }
	::selection { @content; }
}


@mixin truncate($truncation-boundary) {
	max-width: $truncation-boundary;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


@mixin unlist($margin: true, $padding: true) {
	@if $margin {
		@if $margin == 'vertical' {
			@include flush--ends;
		} @elseif $margin == 'horizontal' {
			@include flush--sides;
		} @else {
			margin: 0;
		}
	}
	@if $padding {
		padding: 0;
	}
	list-style: none;
}


@mixin unselectable {
	-webkit-touch-callout: none;
	user-select: none;
}


/*--------------------------------
	Fluid Property
	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
	HTML:
	<h1 class="element">
		<span>Text to replace</span>
	</h1>
	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}
	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}
	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}
	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}
*/

@mixin fp($property, $min, $max, $start: 320, $end: breakpoint('desktop'), $clip: true, $clipAtStart: true, $clipAtEnd: true) {
	$start: $start / ($start * 0 + 1);
	$end: $end / ($end * 0 + 1);
	$multiplier: ($max - $min) / ($end - $start) * 100;
	$adder: ($min * $end - $max * $start) / ($end - $start);
	$formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
	@if $clip and $clipAtStart {
		@media (max-width: #{$start + 0px}) {
			#{$property}: $min + 0px;
		}
	}
	@if $clip and $clipAtEnd {
		@media (min-width: #{$end + 0px}) {
			#{$property}: $max + 0px;
		}
	}
	#{$property}: $formula;
}

9. Hardware

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

10. Tuncate

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}