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

/**
 * @class Global_CSS
 */

@import 'icon.js';

/**
 * Generates style rules for an icon element
 *
 * @param {list/string} $icon
 * A unicode character to use as the icon, or a list specifying the character to use
 * followed by font-family and degrees of rotation (90, 180, or 270).
 * All parameters in the list are optional except for glyph.  For example, each of the
 * following is valid:
 *
 * Use the letter "A" as the icon and use the default font-family
 *
 *     @include font-icon('\0041');
 *
 * Use the letter "A" as the icon and use FontAwesome as the font-family
 *
 *     @include font-icon('\0041' FontAwesome);
 *
 * Use the letter "A" as the icon and rotate the icon 90 degrees clockwise.
 *
 *     @include font-icon('\0041' 90);
 *
 * Use the letter "A" as the icon, use FontAwesome as the font-family, and rotate the icon
 * 90 degrees clockwise.
 *
 *     @include font-icon('\0041' FontAwesome 90);
 *
 * @param {color} $color
 * The color to apply to the element which is containing the icon. See $pseudo-color below
 *
 * @param {number} $size
 * The size of the icon element
 *
 * @param {number} $size-big
 * The size of the icon element in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $font-size
 * The font-size of the icon. Applied to the :before pseudo element so that it does not affect
 * `$size` when `$size` is specified in `em` units.
 *
 * @param {number} $font-size-big
 * The font-size of the icon in the {@link Global_CSS#$enable-big big} sizing scheme.
 * Applied to the :before pseudo element so that it does not affect `$size-big` when
 * `$size-big` is specified in `em` units.
 *
 * @param {booleab} $style-pseudo
 * Specify as `true` to apply the `$color` and `$size` parameters to the pseudo element
 * which carries the icon rather than to its encapsulating element.
 *
 * @private
 */
@mixin icon(
    $icon: null,
    $color: null,
    $size: null,
    $size-big: null,
    $font-size: null,
    $font-size-big: null,
    $style-pseudo: false
) {
    $args: parseIconArgs($icon);

    $char: nth($args, 1);
    $font-family: nth($args, 2);
    $rotation: nth($args, 3);

    @if $font-size == null {
        $font-size: $size;
    }

    @if $font-size-big == null {
        $font-size-big: $size-big;
    }

    @if not $style-pseudo {
        color: $color;
        width: $size;
        height: $size;

        @if $enable-big {
            .#{$prefix}big & {
                width: $size-big;
                height: $size-big;
            }
        }
    }

    &:before {
        @if $style-pseudo {
            color: $color;
            width: $size;
            height: $size;

            @if $enable-big {
                .#{$prefix}big & {
                    width: $size-big;
                    height: $size-big;
                }
            }
        }
        content: $char;
        font-family: $font-family;
        font-size: $font-size;

        @if $rotation != null {
            $rotation-origin: 50% 50%;
            $angle: rotate(#{$rotation}deg);

            display: inline-block;
            -webkit-transform: $angle;
            -webkit-transform-origin: $rotation-origin;
            transform: $angle;
            transform-origin: $rotation-origin;
        }

        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
            }
        }
    }
}