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

/**
 * @class Global_CSS
 */

/**
 * Adds a small text shadow (or highlight) to give the impression of beveled text.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-text($type: 'shadow') {
    @if $enable-highlights {
        @if $type == shadow {
            text-shadow: rgba(0,0,0,.5) 0 -1px 0;
        } @else {
            text-shadow: rgba(255,255,255,.25) 0 1px 0;
        }
    }
}

/**
 * Adds a small box shadow (or highlight) to give the impression of being beveled.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-box($type: 'light') {
    @if $enable-highlights {
        @if $type == shadow {
            @include st-box-shadow(rgba(#000, .5) 0 -1px 0);
        } @else {
            @include st-box-shadow(rgba(#fff, .35) 0 1px 0);
        }
    }
}

/**
 * Bevels the text based on its background.
 *
 * @param {color} $bg-color Background color of element.
 *
 * See {@link #bevel-text}.
 */
@mixin bevel-by-background($bg-color) {
    @if (lightness($bg-color) > 50) {
        @include bevel-text(light);
    } @else {
        @include bevel-text;
    }
}

/**
 * Creates a background gradient for masked elements, based on the lightness of their background.
 *
 * @param {color} $bg-color Background color of element.
 * @param {percent} $contrast Contrast of the new gradient to its background.
 * @param {percent} $style Gradient style of the gradient.
 *
 * See background-gradient mixin.
 */
@mixin mask-by-background(
    $bg-color,
    $contrast: 100%,
    $style: $base-background-gradient
) {
    @if (lightness($bg-color) > 50) {
        @include background-gradient(darken($bg-color, $contrast), $style);
    } @else {
        @include background-gradient(lighten($bg-color, $contrast), $style);
    }
}