@c8y/style/styles/mixins/animation.less

Styles for Cumulocity IoT applications

/**
* add an increasing transition delay to elements
* in a list using the element index
*
* @range: number of elements
* @el: html element
* @delay: time in seconds
* @lastIndex: max number of elements
* @pos: either top, right, bottom or left
* @size: height of the element
*/

.make-el-increment(@range; @el; @delay: 0.05s; @lastIndex: 100; @pos: top; @size: 40px )
  when
  (@range > 0) {
  @{el}:nth-child(@{range}) {
    transition-delay: (@range * @delay);
    z-index: (@lastIndex - @range);
    @{pos}: -340px;
  }
  .make-el-increment((@range - 1), @el, @delay, @lastIndex, @pos, @size );
}