BikeBikeBike/app/assets/stylesheets/_settings.scss

$sidebar-width: 0;

// $colour-1: #00ADEF;
// $colour-2: #FF015B;
// $colour-3: #E6C229;
// $colour-4: #F17105;
// $colour-5: #8EA604;

$colour-1: #00ADEF; // blue
$colour-2: #EF57B4; // #DD57EF; // pink
$colour-3: #E6C74B; // yellow
$colour-4: #D89E59; // orange
$colour-5: #02CA9E; // green

$white: #FFFEFE;

@mixin default-box-shadow($direction: top, $distance: 1, $inset: false, $additional-shadow: false) {
	@if capable_of(box-shadow) {
		$offset: 0.2em;
		@if $direction == right or $direction == bottom {
			$offset: -$offset;
		}
		@if $direction == left or $direction == right {
			$offset: '#{$offset} 0';
		} @else {
			$offset: '0 #{$offset}';
		}
		@if $inset {
			$offset: 'inset #{$offset}';
		}
		@if $additional-shadow {
			$additional-shadow: ', #{$additional-shadow}';
		} @else {
			$additional-shadow: '';
		}
		@include _(box-shadow, #{$offset} 0.8em #{-0.2em * $distance} #000#{$additional-shadow});
	}
}

@mixin monospace-font {
	@include font(monospace);
	@include font(monospace-bold);
}

@mixin translation-pointer {
	@include keyframes(bouncy) {
		from { transform: translateY(-0.25em); }
		to   { transform: translateY(0.25em); }
	}

	#lingua-franca-pointer {
		$colour: $colour-5;
		width: 0.6667em;
		height: 1.25em;
		background-color: $colour;
		z-index: 1000;
		margin-left: -0.5em;
	    margin-top: -2em;
	    @include _(mix-blend-mode, exclusion);
		@include default-box-shadow(top, 2);
		@include _(animation, bouncy 1s infinite alternate);

		$twidth: 0.8em;
		@include after {
			content: '';
			width: 0;
			height: 0;
			position: absolute;
			border-style: solid;
			border-color: $colour transparent transparent;
			border-width: $twidth $twidth 0;
			top: 100%;
			left: -.4em;
		}

		&.up {
	    	margin-top: 2em;

			@include after {
				top: auto;
				bottom: 100%;
				border-color: transparent transparent $colour;
				border-width: 0 $twidth $twidth;
			}
		}
	}
}

@mixin button {
	position: relative;
	display: inline-block;
	color: $white;
	background-color: $colour-1;
	border: 0;
	padding: 0.5em 1em;
	font-size: 1.25em;
	outline: 0;
	border-bottom: 0.125em solid rgba(0, 0, 0, 0.15);
	@include _(border-radius, 0.15em);
	@include default-box-shadow(top, 2);
	overflow: hidden;
	cursor: pointer;
	@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));

	@include before-and-after {
		content: '';
		position: absolute;
		display: block;
		top: 0;
		right: 100%;
		font-size: 1.15em;
		background-color: rgba(0, 0, 0, 0);
		border-color: transparent;
		@include _(transition, all 250ms ease-in-out);
	}
	@include before {
		height: 100%;
		width: 100%;
		margin-right: 1em;
	}
	@include after {
		border-style: solid;
		border-width: 1em 0 1em 1em;
	}

	&:hover,
	&:focus,
	&:hover,
	&:focus {
		@include before-and-after {
			right: -1em;
			border-left-color: rgba(0, 0, 0, 0.15);
		}
	}
	&:hover,
	&:focus {
		@include before {
			background-color: rgba(0, 0, 0, 0.15);
		}
	}

	&:active {
		@include _(transform, scale(0.95));

		@include after {
			left: 120%;
		}
	}

	&:disabled {
		@include _(opacity, 0.5);
		cursor: inherit;

		@include before-and-after {
			display: none;
		}
	}
}