igniteui-theming 1.0.0-beta.11 → 1.0.0-beta.12

package/_index.scss

@@ -1,3 +1,4 @@
+@forward './sass/animations';
 @forward './sass/color';
 @forward './sass/typography';
 @forward './sass/elevations';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/_index.scss

@@ -1,3 +1,4 @@
+@forward 'animations';
 @forward 'color';
 @forward 'elevations';
 @forward 'typography';

package/sass/animations/_easings.scss

@@ -0,0 +1,77 @@
+////
+/// @group animations
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @type Timing Function
+$in-quad: cubic-bezier(.55, .085, .68, .53);
+
+/// @type Timing Function
+$in-cubic: cubic-bezier(.55, .55, .675, .19);
+
+/// @type Timing Function
+$in-quart: cubic-bezier(.895, .03, .685, .22);
+
+/// @type Timing Function
+$in-quint: cubic-bezier(.755, .05, .855, .06);
+
+/// @type Timing Function
+$in-sine: cubic-bezier(.47, 0, .745, .715);
+
+/// @type Timing Function
+$in-expo: cubic-bezier(.95, .05, .795, .035);
+
+/// @type Timing Function
+$in-circ: cubic-bezier(.95, .05, .795, .035);
+
+/// @type Timing Function
+$in-back: cubic-bezier(.95, .05, .795, .035);
+
+/// @type Timing Function
+$out-quad: cubic-bezier(.25, .46, .45, .94);
+
+/// @type Timing Function
+$out-cubic: cubic-bezier(.215, .61, .355, 1);
+
+/// @type Timing Function
+$out-quart: cubic-bezier(.165, .84, .44, 1);
+
+/// @type Timing Function
+$out-quint: cubic-bezier(.23, 1, .32, 1);
+
+/// @type Timing Function
+$out-sine: cubic-bezier(.39, .575, .565, 1);
+
+/// @type Timing Function
+$out-expo: cubic-bezier(.19, 1, .22, 1);
+
+/// @type Timing Function
+$out-circ: cubic-bezier(.075, .82, .165, 1);
+
+/// @type Timing Function
+$out-back: cubic-bezier(.175, .885, .32, 1.275);
+
+/// @type Timing Function
+$in-out-quad: cubic-bezier(.455, .03, .515, .955);
+
+/// @type Timing Function
+$in-out-cubic: cubic-bezier(.645, .045, .355, 1);
+
+/// @type Timing Function
+$in-out-quart: cubic-bezier(.77, 0, .175, 1);
+
+/// @type Timing Function
+$in-out-quint: .5s cubic-bezier(.86, 0, .07, 1);
+
+/// @type Timing Function
+$in-out-sine: cubic-bezier(.445, .05, .55, .95);
+
+/// @type Timing Function
+$in-out-expo: cubic-bezier(1, 0, 0, 1);
+
+/// @type Timing Function
+$in-out-circ: cubic-bezier(.785, .135, .15, .86);
+
+/// @type Timing Function
+$in-out-back: cubic-bezier(.68, -.55, .265, 1.55);

package/sass/animations/_index.scss

@@ -0,0 +1,41 @@
+// Easing Functions
+@forward 'easings' as ease-*;
+
+// mixins
+@forward 'mixins';
+
+// Generic Animations
+@forward 'generic/flip';
+@forward 'generic/rotate';
+@forward 'generic/scale';
+@forward 'generic/shadows';
+@forward 'generic/slide';
+@forward 'generic/swing';
+
+// Entrance Animations
+@forward 'entrances/bounce';
+@forward 'entrances/fade';
+@forward 'entrances/flicker';
+@forward 'entrances/flip';
+@forward 'entrances/puff';
+@forward 'entrances/roll';
+@forward 'entrances/rotate';
+@forward 'entrances/scale';
+@forward 'entrances/slide';
+@forward 'entrances/slit';
+@forward 'entrances/swing';
+@forward 'entrances/swirl';
+
+// Exit Animations
+@forward 'exits/bounce';
+@forward 'exits/fade';
+@forward 'exits/flicker';
+@forward 'exits/flip';
+@forward 'exits/puff';
+@forward 'exits/roll';
+@forward 'exits/rotate';
+@forward 'exits/scale';
+@forward 'exits/slide';
+@forward 'exits/slit';
+@forward 'exits/swing';
+@forward 'exits/swirl';

package/sass/animations/_mixins.scss

@@ -0,0 +1,50 @@
+/* stylelint-disable keyframes-name-pattern */
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+
+$keyframes: () !default;
+
+/// Registers a keyframes animation in the keyframes registry.
+/// @access public
+/// @group animations
+/// @param {String} $name - The name of the keyframes animation.
+@mixin keyframes($name) {
+    $keyframe: map.has-key($keyframes, $name);
+
+    @if not($keyframe) {
+        $keyframe: string.unique-id();
+        $keyframes: map.merge($keyframes, (#{$name}: $keyframe)) !global;
+
+        @at-root {
+            @keyframes #{$name} {
+                @content;
+            }
+        }
+    }
+}
+
+/// Animates an element.
+/// @access public
+/// @group animations
+/// @param {List} $animate - The list of animation properties.
+/// @example scss - Animating an element
+///  @include fade-in(); // include the 'fade-in' keyframes animation mixin
+///
+///  .bozo {
+///     @include animation('fade-in' .3s ease-out);
+///  }
+@mixin animation($animate...) {
+    $max: list.length($animate);
+    $animations: '';
+
+    @for $i from 1 through $max {
+        $animations: #{$animations + list.nth($animate, $i)};
+
+        @if $i < $max {
+            $animations: #{$animations + ', '};
+        }
+    }
+
+    animation: #{$animations};
+}

package/sass/animations/entrances/_bounce.scss

@@ -0,0 +1,289 @@
+@use '../mixins' as *;
+
+////
+/// @group animations
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-top {
+    @include keyframes(bounce-in-top) {
+        0% {
+            transform: translateY(-500px);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: translateY(-65px);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: translateY(-28px);
+            animation-timing-function: ease-in;
+        }
+
+        90% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: translateY(-8px);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-right {
+    @include keyframes(bounce-in-right) {
+        0% {
+            transform: translateX(600px);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: translateX(68px);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: translateX(32px);
+            animation-timing-function: ease-in;
+        }
+
+        90% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: translateX(8px);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-bottom {
+    @include keyframes(bounce-in-bottom) {
+        0% {
+            transform: translateY(500px);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: translateY(65px);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: translateY(28px);
+            animation-timing-function: ease-in;
+        }
+
+        90% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: translateY(8px);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: translateY(0);
+            animation-timing-function: ease-out;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-left {
+    @include keyframes(bounce-in-left) {
+        0% {
+            transform: translateX(-600px);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: translateX(-68px);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: translateX(-28px);
+            animation-timing-function: ease-in;
+        }
+
+        90% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: translateX(-8px);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: translateX(0);
+            animation-timing-function: ease-out;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-fwd {
+    @include keyframes(bounce-in-fwd) {
+        0% {
+            transform: scale(0);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: scale(.7);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: scale(.84);
+            animation-timing-function: ease-in;
+        }
+
+        89% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: scale(.95);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin bounce-in-bck {
+    @include keyframes(bounce-in-bck) {
+        0% {
+            transform: scale(7);
+            animation-timing-function: ease-in;
+            opacity: 0;
+        }
+
+        38% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+            opacity: 1;
+        }
+
+        55% {
+            transform: scale(1.5);
+            animation-timing-function: ease-in;
+        }
+
+        72% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+
+        81% {
+            transform: scale(1.24);
+            animation-timing-function: ease-in;
+        }
+
+        89% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+
+        95% {
+            transform: scale(1.04);
+            animation-timing-function: ease-in;
+        }
+
+        100% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+        }
+    }
+}

package/sass/animations/entrances/_fade.scss

@@ -0,0 +1,170 @@
+@use '../mixins' as *;
+
+////
+/// @group animations
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @requires {mixin} keyframes
+@mixin fade-in-bck {
+    @include keyframes(fade-in-bck) {
+        0% {
+            transform: translateZ(80px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateZ(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-bl {
+    @include keyframes(fade-in-bl) {
+        0% {
+            transform: translateX(-50px) translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0) translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-bottom {
+    @include keyframes(fade-in-bottom) {
+        0% {
+            transform: translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-br {
+    @include keyframes(fade-in-br) {
+        0% {
+            transform: translateX(50px) translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0) translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-fwd {
+    @include keyframes(fade-in-fwd) {
+        0% {
+            transform: translateZ(-80px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateZ(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-left {
+    @include keyframes(fade-in-left) {
+        0% {
+            transform: translateX(-50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-right {
+    @include keyframes(fade-in-right) {
+        0% {
+            transform: translateX(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-tl {
+    @include keyframes(fade-in-tl) {
+        0% {
+            transform: translateX(-50px) translateY(-50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0) translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-top {
+    @include keyframes(fade-in-top) {
+        0% {
+            transform: translateY(-50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in-tr {
+    @include keyframes(fade-in-tr) {
+        0% {
+            transform: translateX(50px) translateY(-50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0) translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+/// @requires {mixin} keyframes
+@mixin fade-in {
+    @include keyframes(fade-in) {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}