public/layouts/global/_mixins.scss

// Ripped from guss-css3 currently - will import directly in the future...

/**
 * `transition` prefixer.
 * Do not use when transitionning prefixed properties
 * to avoid impossible code like `-moz-transition: -webkit-border-radius 1s`.
 *
 * @param {Arglist} $args
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/transition transition on MDN
 *
 * @group css3
 */
@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    transition: $args;
}

/**
 * `border-radius` prefixer.
 *
 * @param {Number} $radius (5px)
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius border-radius on MDN
 *
 * @group css3
 */
@mixin border-radius($radius: 5px) {
    // If we want to draw a circle, output a pixel value instead,
    // as older versions of WebKit do not support % in border-radius
    @if $radius == 50% {
        $radius: 1000px;
    }

    -webkit-border-radius: $radius;
    border-radius: $radius;
}

/**
 * `box-shadow` prefixer.
 *
 * @param {Arglist} $args
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box-shadow on MDN
 *
 * @group css3
 */
@mixin box-shadow($args...) {
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
}

@mixin text-truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


@mixin smallScreen {
    @media screen and (max-width: 1350px) {
        @content;
    }
}

@mixin largeScreen {
    @media screen and (min-width: 1600px) {
        @content;
    }
}

// Spinner

@mixin spinner($backgroundColor: #ffffff, $spinnerColor: #ffffff) {
    display: inline-block;
    font-size: 10px;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: $spinnerColor;
    background: -moz-linear-gradient(left, $spinnerColor 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, $spinnerColor 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, $spinnerColor 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, $spinnerColor 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, $spinnerColor 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before {
        width: 50%;
        height: 50%;
        background: #FFF;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    &:after {
        background: $backgroundColor;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content }
    @keyframes #{$name} { @content }
}