jiti-meet/css/_mixins.scss

/**
 * Animation mixin.
 */
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/**
 * Keyframes mixin.
 */
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@mixin circle($diameter) {
    width: $diameter;
    height: $diameter;
    border-radius: 50%;
}

@mixin absoluteAligning($sizeX, $sizeY) {
    top: 50%;
    left: 50%;
    position: absolute;
    @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
}

@mixin transform($func) {
    -moz-transform: $func;
    -ms-transform: $func;
    -webkit-transform: $func;
    -o-transform: $func;
    transform: $func;
}

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

@mixin box-shadow($type, $h, $y, $blur, $color) {
    -webkit-box-shadow: $type $h $y $blur $color;
    -moz-box-shadow: $type $h $y $blur $color;
    box-shadow: $type $h $y $blur $color;
}

/**
* Mixin styling placeholder
**/
@mixin placeholder() {
    $selectors: (
        "::-webkit-input-placeholder",
        "::-moz-placeholder",
        ":-moz-placeholder",
        ":-ms-input-placeholder"
    );

    @each $selector in $selectors {
        #{$selector} {
            @content;
        }
    }
}