<commit_before>/// Create a css animation with fallbacks
///
/// @author <NAME>
///
/// @access public
///
/// @param {list} $args - Pass in the following animation settings. duration, delay, and iterations should be passed in that order.
///   [name](unique-id)    - name of the animation
///   [duration](1 second) - length of time it takes for an animation to complete one cycle.
///   [ease](ease-in-out)  - ease-in, ease-in-out etc... You can also refer to the eases variables. $easeInSine, $easeInOutBack.
///   [delay](0 seconds)   - delay times are always calculated in seconds (not miliseconds). You do not have to define the 's'.
///   [iterations](1)      - the number of times the animation should be performed. 'loop' or 'infinite' will result in a never-ending loop
///   [direction](normal)  - sets the direction of the animation after the cycle. Its default resets on each cycle.
///   [fill](forwards)     - sets which values are applied before/after the animation.
///   [state](null)        - pause/play the animation.
///
/// @require {Mixin} contains
/// @require {Mixin} prefixer
/// @require {Function} is-string
/// @require {Function} is-number
/// @require {Function} is-null
/// @require {Function} is-ease
/// @require {Function} is-time
/// @require {Function} addUnit
/// @require {Function} _arglist-to-list
/// @require {Variables} eases - optional
///
/// @example 1 scss - Usage
/// .foo {
///   @include animation(play 3 steps(81) infinite);
/// }
///
/// @example 1 css - CSS output
/// .foo {
///   -webkit-animation: play 3s steps(81) infinite;
///      -moz-animation: play 3s steps(81) infinite;
///           animation: play 3s steps(81) infinite;
/// }
///
/// @example 2 scss - Usage
/// If you are only using one animation, you can pass in the keyframe content.
/// Keyframes will never be nested in your CSS, it will be added to the root.
/// Adding content will initialise the animation, saving the need add a seperate keyframes animation.
/// You don't even have to define an animation name, as a unique-id will be used where necessary
/// All default options will be added automatically too.
/// .foo {
///   @include animation {
///   	0%, 100% { opacity:1}
///   	50% { opacity:0}
///   };
/// }
///
//@include keyframes(testing) { to { @include rotate(360deg);}}

@mixin animation($args...) {

  $animations : null;
	$unique-name : unique-id();
	$count : 0;

	@if length($args) == 0 {
		$args : join($unique-name, $args);
	}

  // Loop through and check all arguments for any special options
  @each $settings in $args {

    // Default Settings
    $name: null;
    $duration: null; // seconds
    $ease: ease-in-out;
    $delay: null;
    $iterations: null;
    $direction: normal;
    $fill: forwards;
    $state : null;

    @each $setting in $settings {

      @if contains($setting, forwards backwards both none) {
        $fill : $setting;
      } @elseif contains($setting, normal alternate) {
        $direction : $setting;
      } @elseif contains($setting, paused running) {
        $state : $setting;
      } @elseif is-string($setting) {
        @if contains($setting, infinite loop) {
          $iterations : infinite;
        } @elseif is-ease($setting) {
          $ease : $setting;
        } @else {
					$name : $setting;
					$unique-name : $setting;
				}
      } @elseif is-number($setting) or is-time($setting) {
        @if is-null($duration) {
          @if is-time($setting) {
            $duration : $setting;
          } @else {
            $duration : add-unit($setting, s, true);
          }
        } @elseif is-null($delay) {
          @if is-time($setting) {
            $delay : $setting;
          } @else {
            $delay : add-unit($setting, s, true);
          }
        } @elseif is-null($iterations) {
          $iterations : $setting;
        }
      }

    }

		$count : $count + 1;
		@if ($count == 1) {
			$name: if(is-null($name), $unique-name, $name);
		}

    $duration: if(is-null($duration), 1s, $duration);
    $delay: if(is-null($delay), 0s, $delay);
    $iterations: if(is-null($iterations), 1, $iterations);


		@if not is-null($name) {
  	  $animations : append($animations, $name $duration $ease $delay $iterations $direction $fill $state, comma);
		}

  }
	// TODO: When a later version of Sass allows you to check @content exists,
	// apply a queiry before using this keyframes mixin;
	@include keyframes($unique-name) { @content; }

  @if ( not is-null($animations)) {
    @include prefixer(animation, $animations);
  }

}


/// @alias animation
@mixin animate($settings...) { @include animation($settings...) { @content; }; }

@mixin animation-delay($times...) {
	$times-list : ();
	@each $time in $times {
		$times-list: append( $times-list, add-unit($time, s), comma);
	}
  @include prefixer(animation-delay, $times-list, webkit);
}

@mixin animation-timing-function($ease) {
	@include prefixer(animation-timing-function, $ease, webkit);
}

@mixin animation-state($state:pause) {
  @include prefixer(animation-play-state, $state, webkit);
}

@mixin animation-ease($ease) {
  @include animation-timing-function($ease);
}
<commit_msg>Added custom property support for animation timings<commit_after>/// Create a css animation with fallbacks
///
/// @author <NAME>
///
/// @access public
///
/// @param {list} $args - Pass in the following animation settings. duration, delay, and iterations should be passed in that order.
///   [name](unique-id)    - name of the animation
///   [duration](1 second) - length of time it takes for an animation to complete one cycle.
///   [ease](ease-in-out)  - ease-in, ease-in-out etc... You can also refer to the eases variables. $easeInSine, $easeInOutBack.
///   [delay](0 seconds)   - delay times are always calculated in seconds (not miliseconds). You do not have to define the 's'.
///   [iterations](1)      - the number of times the animation should be performed. 'loop' or 'infinite' will result in a never-ending loop
///   [direction](normal)  - sets the direction of the animation after the cycle. Its default resets on each cycle.
///   [fill](forwards)     - sets which values are applied before/after the animation.
///   [state](null)        - pause/play the animation.
///
/// @require {Mixin} contains
/// @require {Mixin} prefixer
/// @require {Function} is-string
/// @require {Function} is-number
/// @require {Function} is-null
/// @require {Function} is-ease
/// @require {Function} is-time
/// @require {Function} addUnit
/// @require {Function} _arglist-to-list
/// @require {Variables} eases - optional
///
/// @example 1 scss - Usage
/// .foo {
///   @include animation(play 3 steps(81) infinite);
/// }
///
/// @example 1 css - CSS output
/// .foo {
///   -webkit-animation: play 3s steps(81) infinite;
///      -moz-animation: play 3s steps(81) infinite;
///           animation: play 3s steps(81) infinite;
/// }
///
/// @example 2 scss - Usage
/// If you are only using one animation, you can pass in the keyframe content.
/// Keyframes will never be nested in your CSS, it will be added to the root.
/// Adding content will initialise the animation, saving the need add a seperate keyframes animation.
/// You don't even have to define an animation name, as a unique-id will be used where necessary
/// All default options will be added automatically too.
/// .foo {
///   @include animation {
///   	0%, 100% { opacity:1}
///   	50% { opacity:0}
///   };
/// }
///
//@include keyframes(testing) { to { @include rotate(360deg);}}

@mixin animation($args...) {

  $animations : null;
	$unique-name : unique-id();
	$count : 0;

	@if length($args) == 0 {
		$args : join($unique-name, $args);
	}

  // Loop through and check all arguments for any special options
  @each $settings in $args {

    // Default Settings
    $name: null;
    $duration: null; // seconds
    $ease: ease-in-out;
    $delay: null;
    $iterations: null;
    $direction: normal;
    $fill: forwards;
    $state : null;

    @each $setting in $settings {



      @if contains($setting, forwards backwards both none) {
        $fill : $setting;
      } @elseif contains($setting, normal alternate) {
        $direction : $setting;
      } @elseif contains($setting, paused running) {
        $state : $setting;
      } @elseif is-string($setting) and not is-var($setting) {
        @if contains($setting, infinite loop) {
          $iterations : infinite;
        } @elseif is-ease($setting) {
          $ease : $setting;
        } @else {
					$name : $setting;
					$unique-name : $setting;
				}
      } @elseif is-number($setting) or is-time($setting) or is-var($setting) {
        @if is-null($duration) {
          @if is-time($setting) {
            $duration : $setting;
          } @else {
            $duration : add-unit($setting, s, true);
          }
        } @elseif is-null($delay) {
          @if is-time($setting) {
            $delay : $setting;
          } @else {
            $delay : add-unit($setting, s, true);
          }
        } @elseif is-null($iterations) {
          $iterations : $setting;
        }
      }

    }

		$count : $count + 1;
		@if ($count == 1) {
			$name: if(is-null($name), $unique-name, $name);
		}

    $duration: if(is-null($duration), 1s, $duration);
    $delay: if(is-null($delay), 0s, $delay);
    $iterations: if(is-null($iterations), 1, $iterations);


		@if not is-null($name) {
  	  $animations : append($animations, $name $duration $ease $delay $iterations $direction $fill $state, comma);
		}

  }
	// TODO: When a later version of Sass allows you to check @content exists,
	// apply a queiry before using this keyframes mixin;
	@include keyframes($unique-name) { @content; }

  @if ( not is-null($animations)) {
    @include prefixer(animation, $animations);
  }

}


/// @alias animation
@mixin animate($settings...) { @include animation($settings...) { @content; }; }

@mixin animation-delay($times...) {
	$times-list : ();
	@each $time in $times {
		$times-list: append( $times-list, add-unit($time, s), comma);
	}
  @include prefixer(animation-delay, $times-list, webkit);
}

@mixin animation-timing-function($ease) {
	@include prefixer(animation-timing-function, $ease, webkit);
}

@mixin animation-state($state:pause) {
  @include prefixer(animation-play-state, $state, webkit);
}

@mixin animation-ease($ease) {
  @include animation-timing-function($ease);
}

{'fraction_non_alphanumeric': 0.1607091241930822, 'fraction_numerical': 0.006937084497543116, 'mean_word_length': 2.642105263157895, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '519374', 'n_tokens_mistral': 3343, 'n_tokens_neox': 3210, 'n_words': 1013}