Mixins Build by Hardenberg

_mixins.scss

/**
 * Mixins by vkdg.ru
 */

/* Clearfix */
@mixin clear {
	/**
	 * Example
	 *
	 * @include clear();
	 */
	&:before, &:after { display: table; content: ''; line-height: 0; }
	&:after { clear: both; }
}

/* Flexbox */
@mixin flex {
	/**
	 * Example
	 * 
	 * @include flex();
	 */
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

/* Flex-justify-content */
@mixin flex-justify($justify) {
	/**
	 * Example 
	 * 
	 * @include flex-justify(center);
	 */
	-webkit-justify-content: $justify;
	-ms-justify-content: $justify;
	justify-content: $justify;
}

/* Flex-align-items */
@mixin flex-align-items($align) {
	/**
	 * Example
	 *
	 * @include flex-items(center);
	 */
	-webkit-align-items: $align;
	-ms-align-items: $align;
	align-items: $align;
}

/* Absolute position */
@mixin position($top: false, $right: false, $bottom: false, $left: false) {
	/**
	 * Example
	 *
	 * @include position($top: 0, $right: 0);
	 */


	position: absolute;
	@if type_of($top) == number {
		top: $top;
	}
	@if type_of($right) == number {
		left: $left;
	}
	@if type_of($bottom) == number {
		bottom: $bottom;
	}
	@if type_of($left) == number {
		right: $right;
	}
}

/* Border-radius */
@mixin border-radius($radius: false, $topleft: false, $topright: false, $bottomright: false, $bottomleft: false) {
	/**
	 * Example
	 *
	 * @include border-radius(20px);
	 * @include border-radius($topleft: 20px);
	 */
	@if type_of($radius) == number {
		-webkit-border-radius: $radius;
		-moz-border-radius: $radius;
		border-radius: $radius;
	}
	@if type_of($topleft) == number {
		-webkit-border-top-left-radius: $topleft;
		-moz-border-top-left-radius: $topleft;
		border-top-left-radius: $topleft;
	}
	@if type_of($topright) == number {
		-webkit-border-top-right-radius: $topright;
		-moz-border-top-right-radius: $topright;
		border-top-right-radius: $topright;
	}
	@if type_of($bottomleft) == number {
		-webkit-border-bottom-left-radius: $bottomleft;
		-moz-border-bottom-left-radius: $bottomleft;
		border-bottom-left-radius: $bottomleft;
	}
	@if type_of($bottomright) == number {
		-webkit-border-bottom-right-radius: $bottomright;
		-moz-border-bottom-right-radius: $bottomright;
		border-bottom-right-radius: $bottomright;
	}
}

/* Animation */
@mixin x-animation($values) {
	/*
	 * Example .selector { @include x-animation(jump 1s ease-out); }
	 */
	-webkit-animation: $values;
	-moz-animation: $values;
	-ms-animation: $values;
	animation: $values;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
}

/* Keyframes */
@mixin x-keyframes ($name) {
	/**
	 * Example
	 *
	 * @include x-keyframes(jump) {
	 * 		from { top: 0 }
	 * 		to { top: -10px; }
	 * }
	 */
	@-webkit-keyframes #{$name} {
		@content;
	}	
	@-moz-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	}
}

/* Transition Functions */
/* Transition */
@mixin transition($expression) {
	/**
	 * Example
	 * 
	 * @include transition(all .3s);
	 */
	-webkit-transition: $expression;
	-moz-transition: $expression;
	-o-transition: $expression;
	transition: $expression;
}

/* 
 * Example .element { @include transition(background-color 350ms ease-in-out-expo()); }
 */
@function linear() 				{ @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@function ease() 				{ @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }

@function ease-in() 			{ @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
@function ease-in-quad() 		{ @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
@function ease-in-cubic() 		{ @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
@function ease-in-quart() 		{ @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
@function ease-in-quint() 		{ @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
@function ease-in-sine() 		{ @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
@function ease-in-expo() 		{ @return cubic-bezier(0.950, 0.050, 0.795, 0.035); } 
@function ease-in-circ() 		{ @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }

@function ease-out() 			{ @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }
@function ease-out-quad() 		{ @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
@function ease-out-cubic() 		{ @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
@function ease-out-quart() 		{ @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
@function ease-out-quint() 		{ @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
@function ease-out-sine() 		{ @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
@function ease-out-expo() 		{ @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
@function ease-out-circ() 		{ @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }

@function ease-in-out() 		{ @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }
@function ease-in-out-quad() 	{ @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
@function ease-in-out-cubic() 	{ @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
@function ease-in-out-quart() 	{ @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
@function ease-in-out-quint() 	{ @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
@function ease-in-out-sine() 	{ @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
@function ease-in-out-expo() 	{ @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
@function ease-in-out-circ() 	{ @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }


/* Responsive */

@mixin respond-to($size) {
	/**
	 * Example
	 *
	 * .logo {
	 *		float: left;
	 *		@include respond-to(650px) {
	 *			float: none;
	 *			margin: auto;
	 *		}
	 * }
	 */
	@media only screen and (max-width: $size) { @content; }
}