Iris/src/scss/global/_variables.scss

$turquoise: #08d58f;
$faint_grey: #EEEEEE;
$light_grey: #DDDDDD;
$mid_grey: #AAAAAA;
$dark_grey: #333333;
$secondary_grey: #888888;
$red: #cf2d2d;

@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; 
}

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

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

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

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