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%;
}

/**
* Absolute position the element at the top left corner
**/
@mixin topLeft() {
    position: absolute;
    top: 0;
    left: 0;
}

@mixin absoluteAligning() {
  top: 50%;
  left: 50%;
  position: absolute;
  @include transform(translate(-50%, -50%))
}

@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 styling placeholder
**/
@mixin placeholder() {
  $selectors: (
          "::-webkit-input-placeholder",
          "::-moz-placeholder",
          ":-moz-placeholder",
          ":-ms-input-placeholder"
  );

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

@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $h $y $blur $color;
    -moz-box-shadow: inset $h $y $blur $color;
    box-shadow: inset $h $y $blur $color;
  } @else {
    -webkit-box-shadow: $h $y $blur $color;
    -moz-box-shadow: $h $y $blur $color;
    box-shadow: $h $y $blur $color;
  }
}

@mixin no-box-shadow {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  /* stops bg color from leaking outside the border: */
  background-clip: padding-box;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}