saas-one/frontend/operation-web/ext/modern/theme-base/sass/etc/mixins.scss

/**
 * @class Global_CSS
 */

@import 'mixins/border';
@import 'mixins/outline';
@import 'mixins/font';
@import 'mixins/font-icon';
@import 'mixins/icon';
@import 'mixins/transform';

// Background property support for vendor prefixing within values.
@mixin background(
    $background-1,
    $background-2: false,
    $background-3: false,
    $background-4: false,
    $background-5: false,
    $background-6: false,
    $background-7: false,
    $background-8: false,
    $background-9: false,
    $background-10: false
) {
    $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10);
    $mult-bgs: -compass-list-size($backgrounds) > 1;
    $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
    @if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {
        background: -svg($backgrounds);
    }
    @if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {
        background: -owg($backgrounds);
    }
    @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {
        background: -webkit($backgrounds);
    }
    @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {
        background: -moz($backgrounds);
    }
    @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {
        background: -o($backgrounds);
    }
    // BEGIN PATCH
    // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon
    // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with
    // proper support
    background: -ms-#{$backgrounds};
    // END PATCH
    @if $experimental-support-for-pie          and $add-pie-bg {
        -pie-background: -pie($backgrounds);
    }
    background: $backgrounds;
}

@mixin background-image(
    $image-1,
    $image-2: false,
    $image-3: false,
    $image-4: false,
    $image-5: false,
    $image-6: false,
    $image-7: false,
    $image-8: false,
    $image-9: false,
    $image-10: false
) {
    $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
    $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;

    @if $experimental-support-for-svg          and prefixed(-svg,    $images) {
        background-image: -svg($images);
        background-size: 100%;
    }
    @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) {
        background-image: -owg($images);
    }
    @if $experimental-support-for-webkit       and prefixed(-webkit, $images) {
        background-image: -webkit($images);
    }
    @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) {
        background-image: -moz($images);
    }
    @if $experimental-support-for-opera        and prefixed(-o,      $images) {
        background-image: -o($images);
    }

    // BEGIN PATCH
    // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon
    // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with
    // proper support
    background-image: -ms-#{$images};
    // END PATCH

    @if $experimental-support-for-pie          and $add-pie-bg {
        @warn "PIE does not support background-image. Use @include background(#{$images}) instead."
    }
}

/**
 * Adds basic styles to :before or :after pseudo-elements.
 *
 *     .my-element:after {
 *       @include insertion(50px, 50px);
 *     }
 *
 * @param {measurement} $width Height of pseudo-element.
 * @param {measurement} $height Height of pseudo-element.
 * @param {measurement} $top Top positioning of pseudo-element.
 * @param {measurement} $left Left positioning of pseudo-element.
 */
@mixin insertion(
    $width: 30px,
    $height: 30px,
    $top: 0,
    $left: 0
) {
    content: '';
    position: absolute;
    width: $width;
    height: $height;
    top: $top;
    left: $left;
}

@mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0) {
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

@mixin absolute-fit {
    width: auto;
    height: auto;
    @include absolute-position;
}

@mixin st-box-shadow($shadow: none) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin st-loading-spinner($spinner-size: 50px, $color: #ccc, $bar-width: 5px, $bar-height: 15px) {
    .x-loading-spinner {
        font-size: 250%;
        height: $spinner-size;
        width: $spinner-size;
        position: relative;

        -webkit-transform-origin: $spinner-size/2 $spinner-size/2;
        transform-origin: $spinner-size/2 $spinner-size/2;

        /* Shared Properties for all the bars */
        & > span,
        & > span:before,
        & > span:after {
            display: block;
            position: absolute;
            width: $bar-width;
            height: $bar-height;
            top: 0;
            -webkit-transform-origin: $bar-width/2 $spinner-size/2;
            transform-origin: $bar-width/2 $spinner-size/2;
            content: " ";
        }

        & > span {
            left: 50%;
            margin-left: -0.05em;

            &.x-loading-top {
                background-color: rgba($color, 0.99);
            }
            &.x-loading-top::after {
                background-color: rgba($color, 0.90);
            }
            &.x-loading-left::before {
                background-color: rgba($color, 0.80);
            }
            &.x-loading-left {
                background-color: rgba($color, 0.70);
            }
            &.x-loading-left::after {
                background-color: rgba($color, 0.60);
            }
            &.x-loading-bottom::before {
                background-color: rgba($color, 0.50);
            }
            &.x-loading-bottom {
                background-color: rgba($color, 0.40);
            }
            &.x-loading-bottom::after {
                background-color: rgba($color, 0.35);
            }
            &.x-loading-right::before {
                background-color: rgba($color, 0.30);
            }
            &.x-loading-right {
                background-color: rgba($color, 0.25);
            }
            &.x-loading-right::after {
                background-color: rgba($color, 0.20);
            }
            &.x-loading-top::before {
                background-color: rgba($color, 0.15);
            }
        }
    }

    /* Rotate each of the 4 Spans */
    .x-loading-spinner > span.x-loading-top {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .x-loading-spinner > span.x-loading-right {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .x-loading-spinner > span.x-loading-bottom {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .x-loading-spinner > span.x-loading-left {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    /* These are the two lines that surround each of the 4 Span lines */
    .x-loading-spinner > span::before {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .x-loading-spinner > span::after {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    /* Set Animation */
    .x-loading-spinner {
        -webkit-animation-name: x-loading-spinner-rotate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;

        animation-name: x-loading-spinner-rotate;
        animation-duration: .5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

@mixin font-family($name, $path, $font) {
    $path: $path + '/' + $font;
    @font-face {
        font-family: $name;
        src: url($path + '.eot');
        src: url($path + '.eot?#iefix') format('embedded-opentype'),
        url($path + '.woff') format('woff'),
        url($path + '.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
}

@mixin icon-font($name, $font) {
    @include font-family($name, 'fonts', $font);
}