openecomp-ui/resources/scss/common/_utils.scss

/* Prefix */

$box-sizing-prefix: webkit moz spec;
$border-radius-prefix: webkit spec;
$box-shadow-radius-prefix: webkit moz spec;
$text-shadow-radius-prefix: spec;
$text-shadow-prefix: spec;
$box-shadow-prefix: all;
$linear-gradient-prefix: all;
$transition-prefix: webkit moz o spec;
$flex-prefix: webkit spec;
$browserPrefixes: webkit moz o ms;

@mixin prefix($property, $value, $prefixeslist: 'all') {
    @if $prefixeslist == all {
        -webkit-#{$property}: $value;
        -moz-#{$property}: $value;
        -ms-#{$property}: $value;
        -o-#{$property}: $value;
        #{$property}: $value;
    } @else {
        @each $prefix in $prefixeslist {
            @if $prefix == webkit {
                -webkit-#{$property}: $value;
            } @else if $prefix == moz {
                -moz-#{$property}: $value;
            } @else if $prefix == ms {
                -ms-#{$property}: $value;
            } @else if $prefix == o {
                -o-#{$property}: $value;
            } @else if $prefix == spec {
                #{$property}: $value;
            } @else {
                @warn "No such prefix: #{$prefix}";
            }
        }
    }
}

/* Value Prefix*/
@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
    @if $prefixeslist == all {
        #{property}: -webkit-#{$valuesuffix}($from, $to);
        #{property}: -moz-#{$valuesuffix}($from, $to);
        #{property}: -o-#{$valuesuffix}($from, $to);
        #{property}: -ms-#{$valuesuffix}($from, $to);
    } @else {
        @each $prefix in $prefixeslist {
            @if $prefix == webkit {
                #{property}: -webkit-#{$valuesuffix}($from, $to);
            } @else if $prefix == moz {
                #{property}: -moz-#{$valuesuffix}($from, $to);
            } @else if $prefix == ms {
                #{property}: -ms-#{$valuesuffix}($from, $to);
            } @else if $prefix == o {
                #{property}: -o-#{$valuesuffix}($from, $to);
            } @else {
                @warn "No such prefix: #{$prefix}";
            }
        }
    }
}

/* Box sizing */
@mixin box-sizing($value: border-box) {
    @include prefix(box-sizing, $value, $box-sizing-prefix);
}

/* Borders & Shadows */
@mixin box-shadow($value) {
    @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
}

@mixin text-shadow($value) {
    @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
}

@mixin border-radius($value, $positions: all) {
    @if ($positions == all) {
        @include prefix(border-radius, $value, $border-radius-prefix);
    } @else {
        @each $position in $positions {
            @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
        }
    }
}

@mixin transition($value) {
    @include prefix(transition, $value, $transition-prefix);
}

/* Opacity */
@mixin opacity($alpha) {
    $ie-opacity: round($alpha * 100);
    opacity: $alpha;
    filter: unquote('alpha(opacity = #{$ie-opacity})');
}

/* Ellipsis */
@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
    overflow: hidden;
    text-overflow: ellipsis;
    width: $width;
    white-space: nowrap;
    display: $display;
    max-width: $max-width;
}

@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white) {
    overflow: hidden;
    position: relative;
    line-height: $lineHeight;
    max-height: $lineHeight * $lineCount;
    text-align: justify;
    word-break: break-all;
    // margin-right: -1em;
    padding-right: 1em;
    &:before {
        content: '...';
        position: absolute;
        right: 3px;
        bottom: 0;
    }
    &:after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
        background: $bgColor;
    }
}

@mixin gradient($from, $to) {
    /* fallback/image non-cover color */
    background-color: $from;
    background-image: -webkit-gradient(
        linear,
        0% 0%,
        0% 100%,
        from($from),
        to($to)
    );
    @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
}

/* Vertical placement of multuple lines of text */
@mixin vertical-text($height) {
    position: absolute;
    top: 50%;
    margin-top: -$height/2;
}

@mixin text-vertical-align($align: middle) {
    display: table;
    width: 100%;

    & > * {
        vertical-align: $align;
        display: table-cell;
    }
}

@mixin center-element($width) {
    width: $width;
    margin-left: auto;
    margin-right: auto;
}

@mixin center-content($width) {
    & > * {
        @include center-element($width);
    }
}

/* transform-rotate */
// @mixin
//	   Defines a 2D rotation, the angle is specified in the parameter
// @param
//     $deg - angle in degrees
@mixin transform-rotate($deg) {
    transform: rotate($deg + deg); /* IE10 and Mozilla */
    -ms-transform: rotate($deg + deg); /* IE 9 */
    -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
}

/* transform-translate */
// @mixin
//	   Defines a 2D rotation, the angle is specified in the parameter
// @param
//     $deg - angle in degrees
@mixin transform-translate($x, $y) {
    transform: translate($x, $y); /* IE10 and Mozilla */
    -ms-transform: translate($x, $y); /* IE 9 */
    -webkit-transform: translate($x, $y); /* Safari and Chrome */
}

/* transform-scale */
// @mixin
//	   Defines a 2D scale transformation, changing the elements width and height
// @param
//     $width - width
// @param
//     $height - height
@mixin transform-scale($width, $height) {
    transform: scale($width, $height); /* IE10 and Mozilla */
    -ms-transform: scale($width, $height); /* IE 9 */
    -webkit-transform: scale($width, $height); /* Safari and Chrome */
}

@mixin scrollable() {
    ::-webkit-scrollbar {
        width: 8px;
    }
}

@mixin create-circle($size, $bgcolor) {
    border-radius: 50%;
    width: $size;
    height: $size;
    background: $bgcolor;
    border: 3px solid $bgcolor;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**/
@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
    @keyframes #{$animationType} {
        from {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($fromValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
        to {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($toValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
    }
    @-moz-keyframes #{$animationType} {
        /* Firefox */
        from {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($fromValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
        to {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($toValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
    }
    @-webkit-keyframes #{$animationType} {
        /* Safari and Chrome */
        from {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($fromValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
        to {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($toValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
    }
    @-o-keyframes #{$animationType} {
        /* Opera */
        from {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($fromValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
        to {
            $startIndex: 1;
            @each $property in $properties {
                #{$property}: nth($toValue, $startIndex);
                $startIndex: $startIndex + 1;
            }
        }
    }
}

/**/
@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
    @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
}

/* percent-plus-value */
// @mixin
//     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
//     to a percentage of container height/width
@mixin percent-plus-value($property, $value, $percent: 100%) {
    $string: 'calc(' + $percent + ' + ' + $value + ')';
    #{$property}: unquote($string);
}