sjrsmile
1/5/2017 - 9:48 AM

All mixins together, good thing about mixins, it doesn't matter how many they are, as they don't output anything. (Obviously something that

All mixins together, good thing about mixins, it doesn't matter how many they are, as they don't output anything.

(Obviously something that isn't ever used for awhile should be removed, to speed up the compiling.)

mixins.scss
content_copyfile_download
/* -----------------------------------------------------------------------
/* Breakpoints, based on a 16px base font size
/* -------------------------------------------------------------------- */
$smallest                             : 320px;  // 20em
$mobile                               : 400px;  // 25em
$tablet_portrait                      : 480px;  // 30em
$tablet_landscape                     : 624px;  // 39em
$ipad_portrait                        : 768px;  // 48em
$ipad_between                         : 896px;  // 56em
$ipad_landscape                       : 1024px; // 64em
$large_largest                        : 1152px; // 72em
$max                                  : 1280px; // 80em

@if variable-exists(testing) {
	$mobile : 420px;
	// min width of chrome is 400, this allows
	// us to see what mobiles will see
}

$tablet																: $ipad_between;
$desktop															: $large_largest;










/* -----------------------------------------------------------------------
/* General output
/* -------------------------------------------------------------------- */
@mixin radius($radius, $important: null) {

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}

	-webkit-border-radius: $radius #{$important-added};
	-moz-border-radius: $radius #{$important-added};
	-ms-border-radius: $radius #{$important-added};
	border-radius: $radius #{$important-added};
}



@mixin shadow($shadow, $important: null) {

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}

	-webkit-box-shadow: $shadow #{$important-added};
	-moz-box-shadow: $shadow #{$important-added};
	box-shadow: $shadow #{$important-added};
}



@mixin calc($property:max-width, $percent:null, $takeaway:null, $iewidth:null) {

	@if (unit($takeaway) != "px") {
		$takeaway: px($takeaway);
	}

	@if ( $media_queries == false ) {
		#{$property}: $iewidth - $takeaway;
	}

	#{$property}: -webkit-calc(#{$percent} - #{$takeaway});
	#{$property}:    -moz-calc(#{$percent} - #{$takeaway});
	#{$property}:         calc(#{$percent} - #{$takeaway});
}



@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}


// @include transform-transition(0.15s, top 0.15s);
@mixin transform-transition($args...) {
	-webkit-transition: -webkit-transform $args;
	-o-transition: -o-transform $args;
	transition: -ms-transform $args;
	transition: transform $args;
}



// @include browser(box-sizing, border-box);
@mixin browser($thething, $dothis) {
  -webkit-#{$thething}: $dothis;
  -moz-#{$thething}: $dothis;
  -ms-#{$thething}: $dothis;
  -o-#{$thething}: $dothis;
  #{$thething}: $dothis;
}



// @include filter( grayscale(100%) );
// filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
@mixin filter($args...) {
  -webkit-filter: $args;
  filter: $args;
}






/* -----------------------------------------------------------------------
/* Media query
/* -------------------------------------------------------------------- */
@mixin min-media( $min-width, $only-content: null, $ignore: null ) {

	@if ( $media_queries == true and $only-content == null and $ignore == null ) {

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

	@elseif ( $only-content != null and $ignore == null ) {
		@content;
	}

}

@mixin max-media( $max-width, $only-content: null, $ignore: null ) {

	@if ( $media_queries == true and $only-content == null and $ignore == null ) {

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

	@elseif ( $only-content != null and $ignore == null ) {
		@content;
	}

}


@mixin min-height( $ignore: null ) {

	@if ( $media_queries == true and $ignore == null ) {

		@media screen and (min-height: 500px) {
			@content;
		}
	}
	@else {
		@content;
	}
}











/* -----------------------------------------------------------------------
/* Unit work
/* -------------------------------------------------------------------- */
@function px($px) {

	@if ( $px == null ) {
		@return null;
	}
	@else {

		@if ( unit( $px ) == "em" ) {
			$px: ( $px / 1em ) * 16px;
		}
		@if ( unitless($px) ) {
			$px: $px * 1px;
		}

		@return $px;
	}
} // px


@function em($em) {

	@if ( $em == null ) {
		@return null;
	}
	@else {

		@if ( unit( $em ) == "px" ) {
			$em: ( $em / 16px ) * 1em;
		}
		@if ( unitless($em) ) {
			$em: $em * 1em;
		}

		@return $em;
	}
} // em


@function nounit( $unit ) {

	@if ( unit($unit) == "px" ) {
		$unit: $unit / 1px;
	}
	@else if ( unit($unit) == "em" ) {
		$unit: $unit / 1em;
	}
	@else {
		$unit: $unit / 1%;
	}

	@return $unit;

} // nounit











/* -----------------------------------------------------------------------
/* Auto width / height
/* -------------------------------------------------------------------- */
@function autowidth( $oldwidth, $oldheight, $newwidth ) {
	@if (unit($oldwidth) != "px") { $oldwidth : px($oldwidth); }
	@if (unit($oldheight) != "px") { $oldheight : px($oldheight); }
	@if (unit($newwidth) != "px") { $newwidth : px($newwidth); }

	@return round( ( ($oldwidth / $oldheight) * $newwidth ) );
}

@function autoheight( $oldwidth, $oldheight, $newheight ) {
	@if (unit($oldwidth) != "px") { $oldwidth : px($oldwidth); }
	@if (unit($oldheight) != "px") { $oldheight : px($oldheight); }
	@if (unit($newheight) != "px") { $newheight : px($newheight); }

	@return round( ( ($oldheight / $oldwidth) * $newheight ) );
}











/* -----------------------------------------------------------------------
/* Font sizes
/* -------------------------------------------------------------------- */
@mixin font-size-single( $size, $parent: null, $important: null ) {

	$size     		: px($size);
	$parent   		: px($parent);
	$size_new 		: null;

	@if ($parent != null) {
		$size_new : $size / $parent;
	}
	@else {
		$size_new : $size / 16px;
	}

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}



	font-size : $size #{$important-added};
	font-size : em($size_new) #{$important-added};
} // font-size-single











@mixin font-size( $max, $important: null, $max-parent: null, $min-parent: null, $min: null ) {

	// sort correct units

	// max
	$max-px						: px( $max );
	$max-em    				: em( $max );
	$max-unitless  		: nounit( px( $max-px ) );


	// min - unique font-size
	$min-px  				: px( $p_size_mobile );
	$min-em 		 		: em( $p_size_mobile );
	$min-unitless		: nounit( px( $min-px ) );

	// min
	@if ( $min != null ) {
		$min-px  				: px( $min );
		$min-em  				: em( $min );
		$min-unitless		: nounit( px( $min-px ) );
	}

	// fix parent
	@if( $max-parent != null ) {
		$min-em					: em( $min-px / $max-parent );
	}

	// media size
	$min_vw-px  			: px( $mobile );
	$min_vw-em  			: em( $mobile );
	$maxmin_vw-em  		: em( $max-mobile );
	$min_vw 					: nounit( px( $mobile ) );

	// media size
	$max_vw-px  			: px( $desktop );
	$max_vw-em  			: em( $desktop );
	$max_vw 					: nounit( px( $desktop ) );

	$maxmax_vw-em  		: em( $max-desktop );
	$maxmax_vw				: nounit( px( $max-desktop ) );

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}


	@media ( max-width: #{$maxmin_vw-em} ) {
		@include font-size-single( $min-px, $min-parent, $important );
	}

	@media ( min-width: #{$min_vw-em} ) and ( max-width: #{$maxmax_vw-em} ) {

		font-size:          calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		font-size:     -moz-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		font-size:  -webkit-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
	}

	@media ( min-width: #{$max_vw-em} ) {
		@include font-size-single( $max-px, $max-parent, $important );
	}

} // font-size











@mixin header-size( $max, $important: null, $max-parent: null, $min-parent: null, $min: null ) {

	// sort correct units

	// max
	$max-px						: px( $max );
	$max-em    				: em( $max );
	$max-unitless  		: nounit( px( $max-px ) );


	// min - unique font-size
	$min-px  				: px( $h_size_mobile );
	$min-em 		 		: em( $h_size_mobile );
	$min-unitless		: nounit( px( $min-px ) );

	// min
	@if ( $min != null ) {
		$min-px  				: px( $min );
		$min-em  				: em( $min );
		$min-unitless		: nounit( px( $min-px ) );
	}

	// fix parent
	@if( $max-parent != null ) {
		$min-em					: em( $min-px / $max-parent );
	}

	// media size
	$min_vw-px  			: px( $mobile );
	$min_vw-em  			: em( $mobile );
	$maxmin_vw-em  		: em( $max-mobile );
	$min_vw 					: nounit( px( $mobile ) );

	// media size
	$max_vw-px  			: px( $desktop );
	$max_vw-em  			: em( $desktop );
	$max_vw 					: nounit( px( $desktop ) );

	$maxmax_vw-em  		: em( $max-desktop );
	$maxmax_vw				: nounit( px( $max-desktop ) );

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}


	@media ( max-width: #{$maxmin_vw-em} ) {
		@include font-size-single( $min-px, $min-parent, $important );
	}

	@media ( min-width: #{$min_vw-em} ) and ( max-width: #{$maxmax_vw-em} ) {

		font-size:          calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		font-size:     -moz-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		font-size:  -webkit-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
	}

	@media ( min-width: #{$max_vw-em} ) {
		@include font-size-single( $max-px, $max-parent, $important );
	}

} // font-size











/* -----------------------------------------------------------------------
/* Automatic responsive
/* -------------------------------------------------------------------- */
@mixin auto($property, $max: null, $min: null, $important: null, $px_only: null) {

	// max
	$max-px						: px( $max );
	$max-em    				: em( $max );
	$max-unitless  		: nounit( px( $max-px ) );

	// min - unique font-size
	$min-px  					: px( $min );
	$min-em  					: em( $min );
	$min-unitless			: nounit( px( $min-px ) );

	@if ( $px_only != null ) {
		$min-em  				: $min-px;
	}



	// media size
	$min_vw-px  			: px( $mobile );
	$min_vw-em  			: em( $mobile );
	$maxmin_vw-em  		: em( $max-mobile );
	$min_vw 					: nounit( px( $mobile ) );

	// media size
	$max_vw-px  			: px( $desktop );
	$max_vw-em  			: em( $desktop );
	$max_vw 					: nounit( px( $desktop ) );

	$maxmax_vw-em  		: em( $max-desktop );
	$maxmax_vw				: nounit( px( $max-desktop ) );

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}



	@media ( max-width: #{$maxmin_vw-em} ) {
		#{$property}: $min-px #{$important-added};
	}

	@media ( min-width: #{$min_vw-em} ) and ( max-width: #{$maxmax_vw-em} ) {

		#{$property}:         calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		#{$property}:    -moz-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		#{$property}: -webkit-calc( #{$min-em} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
	}

	@media ( min-width: #{$max_vw-em} ) {
		#{$property}: $max-px #{$important-added};
	}

} // auto



@mixin line-height($max-line, $important: null, $font-max: null, $min-line: null) {

	// media size
	$min_vw-px  			: px( $mobile );
	$min_vw-em  			: em( $mobile );
	$maxmin_vw-em  		: em( $max-mobile );
	$min_vw 					: nounit( px( $mobile ) );

	// media size
	$max_vw-px  			: px( $desktop );
	$max_vw-em  			: em( $desktop );
	$max_vw 					: nounit( px( $desktop ) );

	$maxmax_vw-em  		: em( $max-desktop );
	$maxmax_vw				: nounit( px( $max-desktop ) );

	$min-line-used		: $p_line_mobile;

	@if ( $min-line != null ) {
		$min-line-used	: $min-line;
	}

	$max-font					: $p_size;

	@if ( $font-max != null ) {
		$max-font				: $font-max;
	}

	$font-line-max 		: nounit( ( $max-line * $max-font ) );
	$font-line-min 		: nounit( ( $min-line-used * $max-font ) );

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}



	@media ( max-width: #{$maxmin_vw-em} ) {
		line-height: $min-line-used #{$important-added};
	}

	@media (min-width: #{$min_vw-em}) and (max-width: #{$maxmax_vw-em}) {

		line-height:         calc( #{$min-line-used}em + ( #{$font-line-max} - #{$font-line-min} ) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		line-height:    -moz-calc( #{$min-line-used}em + ( #{$font-line-max} - #{$font-line-min} ) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		line-height: -webkit-calc( #{$min-line-used}em + ( #{$font-line-max} - #{$font-line-min} ) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
	}

	@media ( min-width: #{$max_vw-em} ) { line-height: $max-line #{$important-added}; }

} // line-height



@mixin line-height-auto ($desktop-line: null, $tablet-line: null, $mobile-line: null) {

	@if ( $mobile-line != null and $tablet-line != null ) {
		@include max-media ( $max-mobile ) {
			line-height: $mobile-line;
		}
	}
	@elseif ( $mobile-line != null and $tablet-line == null ) {
		line-height: $mobile-line;
	}

	@if ( $tablet-line != null ) {

		@media (min-width: $mobile) and (max-width: $max-desktop) {
			line-height: $tablet-line;
		}
	}

	@if ( $desktop-line != null ) {

		@include min-media ( $desktop ) {
			line-height: $desktop-line;
		}
	}

} // line-height-auto



@mixin margin-bottom($max, $min: null, $important: null) {

	// max
	$max-px						: px( $max );
	$max-unitless  		: nounit( px( $max-px ) );

	// min - unique font-size
	$min-px  					: px( $min );
	$min-unitless			: nounit( px( $min-px ) );



	// media size
	$min_vw-px  			: px( $mobile );
	$min_vw-em  			: em( $mobile );
	$maxmin_vw-em  		: em( $max-mobile );
	$min_vw 					: nounit( px( $mobile ) );

	// media size
	$max_vw-px  			: px( $desktop );
	$max_vw-em  			: em( $desktop );
	$max_vw 					: nounit( px( $desktop ) );

	$maxmax_vw-em  		: em( $max-desktop );
	$maxmax_vw				: nounit( px( $max-desktop ) );

	$important-added	: "";
	@if ( $important != null ) {
		$important-added	: "!important";
	}



	@media ( max-width: #{$maxmin_vw-em} ) {
		margin-bottom: $min-px #{$important-added};
	}

	@media ( min-width: #{$min_vw-em} ) and ( max-width: #{$maxmax_vw-em} ) {

		margin-bottom:         calc( #{$min-px} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		margin-bottom:    -moz-calc( #{$min-px} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
		margin-bottom: -webkit-calc( #{$min-px} + (#{$max-unitless} - #{$min-unitless}) * ( (100vw - #{$min_vw-px}) / ( #{$maxmax_vw} - #{$min_vw}) ) ) #{$important-added};
	}

	@media ( min-width: #{$max_vw-em} ) { margin-bottom: $max-px #{$important-added}; }

} // margin-bottom











/* -----------------------------------------------------------------------
/* IE
/* -------------------------------------------------------------------- */
@mixin inline-block {

	@if $media_queries == true {
		display: inline-block;
	}
	@else {
		zoom: 1;
		display: inline;
		*display: inline;
		display: inline-block;
	}
}











/* -----------------------------------------------------------------------
/* Header quick mixins
/* -------------------------------------------------------------------- */
@mixin h1-size( $h1-max, $h1-important: null, $h1-max-parent: null, $h1-min-parent: null, $h1-min: null ) {
	// min - unique font-size
	$h1-min-px  			: px( $h1_size_mobile );
	@if ( $h1-min != null ) {
		$h1-min-px  		: px( $h1-min );
	}

	@include font-size( $h1-max, $h1-important, $h1-max-parent, $h1-min-parent, $h1-min-px );
}
@mixin h2-size( $h2-max, $h2-important: null, $h2-max-parent: null, $h2-min-parent: null, $h2-min: null ) {
	// min - unique font-size
	$h2-min-px  			: px( $h2_size_mobile );
	@if ( $h2-min != null ) {
		$h2-min-px  		: px( $h2-min );
	}

	@include font-size( $h2-max, $h2-important, $h2-max-parent, $h2-min-parent, $h2-min-px );
}
@mixin h3-size( $h3-max, $h3-important: null, $h3-max-parent: null, $h3-min-parent: null, $h3-min: null ) {
	// min - unique font-size
	$h3-min-px  			: px( $h3_size_mobile );
	@if ( $h3-min != null ) {
		$h3-min-px  		: px( $h3-min );
	}

	@include font-size( $h3-max, $h3-important, $h3-max-parent, $h3-min-parent, $h3-min-px );
}
@mixin h4-size( $h4-max, $h4-important: null, $h4-max-parent: null, $h4-min-parent: null, $h4-min: null ) {
	// min - unique font-size
	$h4-min-px  			: px( $h4_size_mobile );
	@if ( $h4-min != null ) {
		$h4-min-px  		: px( $h4-min );
	}

	@include font-size( $h4-max, $h4-important, $h4-max-parent, $h4-min-parent, $h4-min-px );
}
@mixin h5-size( $h5-max, $h5-important: null, $h5-max-parent: null, $h5-min-parent: null, $h5-min: null ) {
	// min - unique font-size
	$h5-min-px  			: px( $h5_size_mobile );
	@if ( $h5-min != null ) {
		$h5-min-px  		: px( $h5-min );
	}

	@include font-size( $h5-max, $h5-important, $h5-max-parent, $h5-min-parent, $h5-min-px );
}
@mixin h6-size( $h6-max, $h6-important: null, $h6-max-parent: null, $h6-min-parent: null, $h6-min: null ) {
	// min - unique font-size
	$h6-min-px  			: px( $h6_size_mobile );
	@if ( $h6-min != null ) {
		$h6-min-px  		: px( $h6-min );
	}

	@include font-size( $h6-max, $h6-important, $h6-max-parent, $h6-min-parent, $h6-min-px );
} // header sizes



@mixin h1-height($h1_max-line, $h1_important: null, $h1_font-max: null, $h1_min-line: null) {
	$h_font-max			: $h1_size;
	@if ( $h1_font-max != null ) {
		$h_font-max			: $h1_font-max;
	}
	@include line-height($h1_max-line, $h1_important, $h_font-max, $h1_min-line);
}
@mixin h2-height($h2_max-line, $h2_important: null, $h2_font-max: null, $h2_min-line: null) {
	$h_font-max			: $h2_size;
	@if ( $h2_font-max != null ) {
		$h_font-max			: $h2_font-max;
	}
	@include line-height($h2_max-line, $h2_important, $h_font-max, $h2_min-line);
}
@mixin h3-height($h3_max-line, $h3_important: null, $h3_font-max: null, $h3_min-line: null) {
	$h_font-max			: $h3_size;
	@if ( $h3_font-max != null ) {
		$h_font-max			: $h3_font-max;
	}
	@include line-height($h3_max-line, $h3_important, $h_font-max, $h3_min-line);
}
@mixin h4-height($h4_max-line, $h4_important: null, $h4_font-max: null, $h4_min-line: null) {
	$h_font-max			: $h4_size;
	@if ( $h4_font-max != null ) {
		$h_font-max			: $h4_font-max;
	}
	@include line-height($h4_max-line, $h4_important, $h_font-max, $h4_min-line);
}
@mixin h5-height($h5_max-line, $h5_important: null, $h5_font-max: null, $h5_min-line: null) {
	$h_font-max			: $h5_size;
	@if ( $h5_font-max != null ) {
		$h_font-max			: $h5_font-max;
	}
	@include line-height($h5_max-line, $h5_important, $h_font-max, $h5_min-line);
}
@mixin h6-height($h6_max-line, $h6_important: null, $h6_font-max: null, $h6_min-line: null) {
	$h_font-max			: $h6_size;
	@if ( $h6_font-max != null ) {
		$h_font-max			: $h6_font-max;
	}
	@include line-height($h6_max-line, $h6_important, $h_font-max, $h6_min-line);
}  // header-line