animations.scss 2.95 KB
Newer Older
1 2
// This file is based off animate.css 3.5.1, available here:
// https://github.com/daneden/animate.css/blob/3.5.1/animate.css
3
//
4 5 6
// animate.css - http://daneden.me/animate
// Version - 3.5.1
// Licensed under the MIT license - http://opensource.org/licenses/MIT
7
//
8 9 10
// Copyright (c) 2016 Daniel Eden

.animated {
11 12
  @include webkit-prefix(animation-duration, 1s);
  @include webkit-prefix(animation-fill-mode, both);
13

14 15 16
  &.infinite {
    @include webkit-prefix(animation-iteration-count, infinite);
  }
17

18 19 20
  &.once {
    @include webkit-prefix(animation-iteration-count, 1);
  }
21

22 23
  &.hinge {
    @include webkit-prefix(animation-duration, 2s);
24 25
  }

26 27 28 29 30
  &.flipOutX,
  &.flipOutY,
  &.bounceIn,
  &.bounceOut {
    @include webkit-prefix(animation-duration, .75s);
31 32
  }

33 34 35
  &.short {
    @include webkit-prefix(animation-duration, 321ms);
    @include webkit-prefix(animation-fill-mode, none);
36 37 38
  }
}

39
@include keyframes(pulse) {
40 41
  from,
  to {
42
    @include webkit-prefix(transform, scale3d(1, 1, 1));
43 44 45
  }

  50% {
46
    @include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05));
47 48 49 50
  }
}

.pulse {
51
  @include webkit-prefix(animation-name, pulse);
52
}
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

/*
* General hover animations
*/


// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
// Usage:   @include transition(width, height 0.3s ease-in-out);
// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
//          transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
  }

  transition: $unfoldedTransitions;
}

@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: $general-hover-transition-duration;
  $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // Grab transition properties if they exist
  $unfoldedTransition: ();
  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
dimitrieh's avatar
dimitrieh committed
87
      $p: nth($transition, $i);
88
    } @else {
dimitrieh's avatar
dimitrieh committed
89
      $p: nth($defaultProperties, $i);
90 91 92 93 94 95 96
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }

  @return $unfoldedTransition;
}

97 98
.btn,
.side-nav-toggle {
99 100 101
  @include transition(background-color, border-color, color, box-shadow);
}

102
.dropdown-menu-toggle,
103 104
.avatar-circle,
.header-user-avatar {
105 106 107 108 109 110
  @include transition(border-color);
}

.note-action-button .link-highlight,
.toolbar-btn,
.dropdown-toggle-caret,
111
.fa:not(.fa-bell) {
112 113 114
  @include transition(color);
}

115 116 117 118
a {
  @include transition(background-color, color, border);
}

119 120
.tree-table td,
.well-list > li {
121 122
  @include transition(background-color, border-color);
}
123 124 125 126

.stage-nav-item {
  @include transition(background-color, box-shadow);
}