Iris/src/scss/global/_variables.scss

$turquoise: #08d58f;
$off_white: #F5F5F5;
$faint_grey: #EEEEEE;
$light_grey: #DDDDDD;
$mid_grey: #AAAAAA;
$dark_grey: #333333;
$darkest_grey: #111111;
$secondary_grey: #888888;
$red: #cf2d2d;
$green: #47af2a;
$blue: #32b5f2;
$yellow: #FFF39C;
$orange: #f16f19;

$bp_wide: 1000px;
$bp_medium: 800px;
$bp_narrow: 350px;
$bp_shallow: 650px;

@mixin one_line_text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@mixin clearfix {
	&::after {
		content: '';
		clear: both;
		display: block;
	}
}

@mixin animate( $duration: 0.2s, $easing: ease-in-out ){
	-webkit-transition: all $duration $easing;
	   -moz-transition: all $duration $easing;
		 -o-transition: all $duration $easing;
		    transition: all $duration $easing; 
}

@mixin noanimate(){
	-webkit-transition: none !important;
	   -moz-transition: none !important;
	     -o-transition: none !important;
	        transition: none !important;
}

@keyframes shrink_from_right {
    from {	width: 100%; }
    to {	width: 0%; }
}

@mixin animate_timeout( $duration: 0.2s ){
    animation-name: shrink_from_right;
    animation-duration: $duration;
    animation-timing-function: linear;
}

@keyframes spin {
	from { transform: rotate(0); }
	to {   transform: rotate(360deg); }
}

@mixin spin( $duration: 0.5s ){
    animation-name: spin;
    animation-duration: $duration;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@mixin blur( $size: 10px ) {
	-webkit-filter: blur( $size );
	filter: blur( $size );
}

@mixin grid_item( $cols, $gap: 2% ){
	width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
	box-sizing: border-box;
	margin: 0 $gap 3%;

	&:nth-child(#{$cols}n-#{$cols}) {
		margin-right: 0;
		@include clearfix;
	}

	&:nth-child(#{$cols}n-#{$cols - 1}) {
		margin-left: 0;
	}
}

@mixin responsive( $max_width: null, $min_width: null, $max_height: null, $min_height: null ){
	@if $max_width and $max_height {
		@media( max-width: $max_width ), ( max-height: $max_height ){ 
			@content;
		}
	}@else if $max_width and $min_width {
		@media( max-width: $max_width ) and ( min-width: $min_width ){ 
			@content;
		}
	}@else if $max_width {
		@media( max-width: $max_width ){ 
			@content;
		}
	}@else if $max_height {
		@media( max-height: $max_height ){ 
			@content;
		}
	}@else if $min_width {
		@media( min-width: $min_width ){ 
			@content;
		}
	}
}