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