BikeBikeBike/app/assets/stylesheets/_settings.scss

$sidebar-width: 0;

$zindex-base: 0;

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

$white: #FFFEFE;
$black: #333;
$red:   #FF5A5F;

$extra-light-gray:  #F8F8F8;
$gray:              #E8E8E8;
$light-gray:        #EEE;
$almost-light-gray: #CCC;
$mid-light-gray:    #AAA;
$mid-gray:          #888;
$dark-gray:         #666;

$facebook-blue: #3A5795;

$blue:   $colour-1;
$pink:   $colour-2;
$yellow: $colour-3;
$orange: $colour-4;
$green:  $colour-5;

$text-on-blue:   rgba($blue, 0.333);
$text-on-pink:   rgba($pink, 0.333);
$text-on-yellow: rgba($yellow, 0.333);
$text-on-orange: rgba($orange, 0.333);
$text-on-green:  rgba($green, 0.333);
$text-on-red:    rgba($red, 0.333);

$link-colour: darken($colour-1, 13%);

$selected-colour: rgba($blue, 0.5);

$note-icon:    '\1F4C4';
$down-icon:    'ꜜ';
$up-icon:      'ꜛ';
$happy-icon:   '\1F601';
$unhappy-icon: '\1F61E';
$love-icon:    '\1F60D';
$angry-icon:   '\1F621';

@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 text-stroke {
    @include _(text-stroke, 1px rgba($black, 0.25));
}

@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;
    @include not-link-like;

    @include before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba($black, 0);
        @include _(transition, background-color 150ms ease-in-out);
    }

    &: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;
        }
    }
}

@mixin link($colour: $link-colour, $initial-opacity: 0.333) {
    color: $colour;
    text-decoration-color: rgba($colour, $initial-opacity);
    @include _(transition, text-decoration-color ease-in-out 200ms);

    &:hover, &:focus, &:active {
        text-decoration-color: $colour;
    }
}

@mixin not-link-like {
    text-decoration: none;
}

@mixin message {
    @include font-family(secondary);
    border: 0.2em solid rgba($black, 0.1);
    @include default-box-shadow(top, 2);
}