animations.scss 6.01 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

/*
* 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;
}

74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
@mixin disableAllAnimation {
  /*CSS transitions*/
  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  /*CSS transforms*/
  -o-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  /*CSS animations*/
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}

95 96 97 98 99 100 101 102 103 104 105 106 107
@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
108
      $p: nth($transition, $i);
109
    } @else {
dimitrieh's avatar
dimitrieh committed
110
      $p: nth($defaultProperties, $i);
111 112 113 114 115 116 117
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }

  @return $unfoldedTransition;
}

118
.btn {
119 120 121
  @include transition(background-color, border-color, color, box-shadow);
}

122
.dropdown-menu-toggle,
123 124
.avatar-circle,
.header-user-avatar {
125 126 127
  @include transition(border-color);
}

Clement Ho's avatar
Clement Ho committed
128
.note-action-button,
129
.toolbar-btn,
130
.dropdown-toggle-caret {
131 132 133
  @include transition(color);
}

134 135 136 137
a {
  @include transition(background-color, color, border);
}

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

142 143 144
.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu-nav a {
145 146
  transition: none;
}
147 148 149 150 151 152 153 154 155 156 157 158 159 160

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn $fade-in-duration 1;
}
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188

@keyframes fadeInHalf {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.fade-in-half {
  animation: fadeInHalf $fade-in-duration 1;
}

@keyframes fadeInFull {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.fade-in-full {
  animation: fadeInFull $fade-in-duration 1;
}
Jacob Schatz's avatar
Jacob Schatz committed
189 190 191 192 193 194 195 196

.animation-container {
  height: 40px;
  overflow: hidden;

  &.animation-container-small {
    height: 12px;
  }
197 198 199 200 201 202 203

  &.animation-container-right {
    .skeleton-line-2 {
      left: 0;
      right: 150px;
    }
  }
Jacob Schatz's avatar
Jacob Schatz committed
204

205
  [class^="skeleton-line-"] {
Jacob Schatz's avatar
Jacob Schatz committed
206
    position: relative;
207
    background-color: $gray-100;
Jacob Schatz's avatar
Jacob Schatz committed
208
    height: 10px;
209
    overflow: hidden;
Jacob Schatz's avatar
Jacob Schatz committed
210

211 212 213
    &:not(:last-of-type) {
      margin-bottom: 4px;
    }
Jacob Schatz's avatar
Jacob Schatz committed
214

215 216 217 218 219 220 221 222
    &::after {
      content: ' ';
      display: block;
      animation: blockTextShine 1s linear infinite forwards;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: linear-gradient(
        to right,
223 224 225 226
        $gray-100 0%,
        $gray-50 20%,
        $gray-100 40%,
        $gray-100 100%
227 228 229
      );
      height: 10px;
    }
Jacob Schatz's avatar
Jacob Schatz committed
230
  }
231
}
Jacob Schatz's avatar
Jacob Schatz committed
232

233 234 235 236 237
$skeleton-line-widths: (
  156px,
  235px,
  200px,
);
Jacob Schatz's avatar
Jacob Schatz committed
238

239 240 241
@for $count from 1 through length($skeleton-line-widths) {
  .skeleton-line-#{$count} {
    width: nth($skeleton-line-widths, $count);
Jacob Schatz's avatar
Jacob Schatz committed
242 243 244 245 246 247 248 249 250 251 252 253
  }
}

@keyframes blockTextShine {
  0% {
    transform: translateX(-468px);
  }

  100% {
    transform: translateX(468px);
  }
}
Felipe Artur's avatar
Felipe Artur committed
254 255 256 257 258 259 260 261 262

.slide-down-enter-active {
  transition: transform 0.2s;
}

.slide-down-enter,
.slide-down-leave-to {
  transform: translateY(-30%);
}
263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/** COMMON ANIMATION CLASSES **/
.transform-origin-center { @include webkit-prefix(transform-origin, 50% 50%); }
.animate-n-spin { @include webkit-prefix(animation-name, spin); }
.animate-c-infinite { @include webkit-prefix(animation-iteration-count, infinite); }
.animate-t-linear { @include webkit-prefix(animation-timing-function, linear); }
.animate-d-1 { @include webkit-prefix(animation-duration, 1s); }
.animate-d-2 { @include webkit-prefix(animation-duration, 2s); }

/** COMPOSITE ANIMATION CLASSES **/
.gl-spinner {
  @include webkit-prefix(animation-name, spin);
  @include webkit-prefix(animation-iteration-count, infinite);
  @include webkit-prefix(animation-timing-function, linear);
  @include webkit-prefix(animation-duration, 1s);
  transform-origin: 50% 50%;
}