Iris/src/scss/global/_variables.scss

$turquoise: #08d58f;
$off_white: #F5F5F5;
$faint_grey: #f4f2f0;
$light_grey: #cecac4;
$mid_grey: #a3a19f;
$grey: #383734;
$dark_grey: #181818;
$darkest_grey: #121212;
$secondary_grey: #888888;
$white: #FFFFFF;
$black: #000000;
$red: #cf2d2d;
$green: #47af2a;
$blue: #32b5f2;
$light_blue: #96cfea;
$yellow: #FFF39C;
$orange: #f16f19;
$overlay_dark: rgba(0, 0, 0, 0.88);
$overlay_light: rgba(255, 255, 255, 0.70);

$bp_wide: 1000px;
$bp_medium: 800px;
$bp_small: 500px;
$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 bullet {
	padding-left: 14px;
	
	&:before {
		display: inline-block;
		content: '\2022';
		margin-left: -8px;
		padding-right: 6px;
	}
}

/** 
 * General animations
 **/

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

@keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

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

@mixin fadein($duration: 0.2s){
	@keyframes fadein {
	    0% {
	    	opacity: 0;
	    	transform: translateY(5px);
	    }
	    100% {
	    	opacity: 1;
	    	transform: translateY(0px);
	    }
	}

    animation-name: fadein;
    animation-duration: $duration;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@mixin fadeout($duration: 0.2s){
	@keyframes fadeout {
	    0% {
	    	opacity: 1;
	    	transform: translateY(0px);
	    }
	    100% {
	    	opacity: 0;
	    	transform: translateY(5px);
	    }
	}

    animation-name: fadeout;
    animation-duration: $duration;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes slideloader {
    0% { 
    	left: 0%; 
    	right: 100%; 
    	border-radius: 3px 0 0 3px;
    }
    50% { 
    	left: 0%;
    	right: 0%;
    	border-radius: 3px;
    }
    100% { 
    	left: 100%; 
    	right: 0%; 
    	border-radius: 0 3px 3px 0;
    }
}


/**
 * Grid layout
 * Produces most album/playlist/artist grids
 **/

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

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

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


/** 
 * Responsive rules
 * Creates @media wrappers
 **/

@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;
		}
	}@else if $min_height {
		@media(min-height: $min_height){ 
			@content;
		}
	}
}

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

@mixin feature_font(){
	font-family: "Overpass";
	letter-spacing: -0.04em;
	font-weight: 600;
}

@mixin invert(){
	-webkit-filter: invert(1);
	filter: invert(1);
}

@mixin gradient_overlay($radius: 0, $opacity: 0){
	position: relative;
	border-radius: $radius;
	
	&:before {
		@include animate();
		border-radius: $radius;
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: $opacity;
		z-index: 9;
		pointer-events: none;
		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
		background: -o-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
		background: linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
	}
}