<commit_before>// ┌────────────┐
// │ Animations │
// └────────────┘
//  ↳ http://esri.github.io/calcite-web/components/#animation
//  ↳ componenet → _animation.md

@include keyframes (fade-in) {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@mixin fade-in () {
  opacity: 0;
  @include animation(fade-in ease-in 1);
  @include animation-fill-mode(forwards);
  @include animation-duration(.75s);
}
@include keyframes (fade-out) {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@mixin fade-out () {
  @include animation(fade-out ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(.75s);
}

@include keyframes (in-down) {
  0%   { transform: translate3d(0, -100%, 0);}
  100% { transform: translate3d(0, 0, 0); }
}
@mixin in-down () {
  @include animation(in-down ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@include keyframes (in-down) {
  0%   { transform: translate3d(0, -100%, 0);}
  100% { transform: translate3d(0, 0, 0); }
}
@mixin in-down () {
  @include animation(in-down ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@include keyframes (in-up) {
  0%   { transform: translate3d(0, 100%, 0);}
  100% { transform: translate3d(0, 0, 0); }
}
@mixin in-up () {
  @include animation(in-up ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@include keyframes (in-down) {
  0%   { transform: translate3d(0, -100%, 0);}
  100% { transform: translate3d(0, 0, 0); }
}
@mixin in-down () {
  @include animation(in-down ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@include keyframes (out-down) {
  0%   { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(0, -100%, 0); }
}
@mixin out-down () {
  @include animation(out-down ease-in 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@include keyframes (out-up) {
  0%   { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(0, 100%, 0); }
}
@mixin out-up () {
  @include animation(out-up ease-in 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@if $include-card == true {
  .fade-in, .animate-fade-in {@include fade-in();}
  .animate-fade-out { @include fade-out(); }
  .animate-in-down  { @include in-down(); }
  .animate-in-up    { @include in-up(); }
  .animate-out-down { @include out-down(); }
  .animate-out-up   { @include out-up(); }
}<commit_msg>clean up animation sass, properly fence output, #702<commit_after>// ┌────────────┐
// │ Animations │
// └────────────┘
//  ↳ http://esri.github.io/calcite-web/components/#animation
//  ↳ component → _animation.md

@mixin fade-in () {
  opacity: 0;
  @include animation(fade-in ease-in 1);
  @include animation-fill-mode(forwards);
  @include animation-duration(.75s);
}

@mixin fade-out () {
  @include animation(fade-out ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(.75s);
}

@mixin in-up () {
  @include animation(in-up ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@mixin in-down () {
  @include animation(in-down ease-out 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@mixin out-up () {
  @include animation(out-up ease-in 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@mixin out-down () {
  @include animation(out-down ease-in 1);
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

@if $include-animation == true {

  @include keyframes (fade-in) {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  @include keyframes (fade-out) {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }

  @include keyframes (in-up) {
    0%   { transform: translate3d(0, 100%, 0);}
    100% { transform: translate3d(0, 0, 0); }
  }

  @include keyframes (in-down) {
    0%   { transform: translate3d(0, -100%, 0);}
    100% { transform: translate3d(0, 0, 0); }
  }

  @include keyframes (out-up) {
    0%   { transform: translate3d(0, 0, 0);}
    100% { transform: translate3d(0, 100%, 0); }
  }

  @include keyframes (out-down) {
    0%   { transform: translate3d(0, 0, 0);}
    100% { transform: translate3d(0, -100%, 0); }
  }

  .fade-in, .animate-fade-in {@include fade-in();}
  .animate-fade-out { @include fade-out(); }
  .animate-in-down  { @include in-down(); }
  .animate-in-up    { @include in-up(); }
  .animate-out-down { @include out-down(); }
  .animate-out-up   { @include out-up(); }
}
{'fraction_non_alphanumeric': 0.2, 'fraction_numerical': 0.046019629225736096, 'mean_word_length': 3.469785575048733, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '5518738', 'n_tokens_mistral': 1904, 'n_tokens_neox': 1743, 'n_words': 385}