From 7ceb8802f0b3207c5f7a0218b7bfb0d754b9d782 Mon Sep 17 00:00:00 2001 From: Hansol Kim Date: Thu, 4 Jun 2020 13:51:41 +0900 Subject: [PATCH] feat: add Sass implementation --- .gitignore | 3 +- Gruntfile.js | 22 ++- build/tuesday.legacy.min.css | 1 - build/tuesday.min.css | 1 - package-lock.json | 276 +++++++++++++++++++++++++++++++++- package.json | 1 + sass/modules/_easing.scss | 3 + sass/modules/_mixins.scss | 5 + sass/modules/basic-fade.scss | 26 ++++ sass/modules/drop.scss | 68 +++++++++ sass/modules/fade.scss | 125 +++++++++++++++ sass/modules/hinge-flip.scss | 50 ++++++ sass/modules/plop.scss | 73 +++++++++ sass/modules/stamp.scss | 52 +++++++ sass/modules/swing.scss | 43 ++++++ sass/modules/zoom-expand.scss | 70 +++++++++ sass/modules/zoom-shrink.scss | 71 +++++++++ sass/tuesday.scss | 62 ++++++++ 18 files changed, 946 insertions(+), 6 deletions(-) create mode 100644 sass/modules/_easing.scss create mode 100644 sass/modules/_mixins.scss create mode 100644 sass/modules/basic-fade.scss create mode 100644 sass/modules/drop.scss create mode 100644 sass/modules/fade.scss create mode 100644 sass/modules/hinge-flip.scss create mode 100644 sass/modules/plop.scss create mode 100644 sass/modules/stamp.scss create mode 100644 sass/modules/swing.scss create mode 100644 sass/modules/zoom-expand.scss create mode 100644 sass/modules/zoom-shrink.scss create mode 100644 sass/tuesday.scss diff --git a/.gitignore b/.gitignore index f5e2886..8f9193a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ -_ignore/ \ No newline at end of file +_ignore/ +build-sass/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 5ff41bb..a9ff8ad 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,6 +46,22 @@ module.exports = function(grunt) { } }, + // Sass + 'dart-sass': { + options: { + sourceMap: false + }, + main: { + files: [{ + expand: true, + flatten: true, + src: ["sass/tuesday.scss"], + ext: ".css", + dest: "build-sass" + }] + } + }, + // postcss postcss: { // autoprefixer @@ -156,8 +172,12 @@ module.exports = function(grunt) { 'usebanner:full', 'usebanner:compact', 'usebanner:legacyfull', 'usebanner:legacycompact', ]); + grunt.registerTask('build-sass', [ + 'dart-sass', + 'postcss:autoprefixer', 'postcss:nano' + ]); grunt.registerTask('dev', [ 'watch' ]); -} \ No newline at end of file +} diff --git a/build/tuesday.legacy.min.css b/build/tuesday.legacy.min.css index 039a77e..5cc5425 100644 --- a/build/tuesday.legacy.min.css +++ b/build/tuesday.legacy.min.css @@ -1,2 +1 @@ -/* tuesday.less v1.3.0 (Legacy Compat) - (C)2020 Shakr; MIT License */ .animated{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes tdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tdFadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes tdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes tdFadeOut{0%{opacity:1}to{opacity:0}}.tdFadeIn{-webkit-animation-name:tdFadeIn;animation-name:tdFadeIn}.tdFadeOut{-webkit-animation-name:tdFadeOut;animation-name:tdFadeOut}@-webkit-keyframes tdFadeInDown{0%{opacity:0;transform:translateY(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@keyframes tdFadeInDown{0%{opacity:0;transform:translateY(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes tdFadeInLeft{0%{opacity:0;transform:translateX(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@keyframes tdFadeInLeft{0%{opacity:0;transform:translateX(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes tdFadeInUp{0%{opacity:0;transform:translateY(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@keyframes tdFadeInUp{0%{opacity:0;transform:translateY(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes tdFadeInRight{0%{opacity:0;transform:translateX(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@keyframes tdFadeInRight{0%{opacity:0;transform:translateX(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes tdFadeOutUp{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(-10px)}}@keyframes tdFadeOutUp{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(-10px)}}@-webkit-keyframes tdFadeOutRight{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(10px)}}@keyframes tdFadeOutRight{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(10px)}}@-webkit-keyframes tdFadeOutDown{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(10px)}}@keyframes tdFadeOutDown{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(10px)}}@-webkit-keyframes tdFadeOutLeft{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(-10px)}}@keyframes tdFadeOutLeft{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(-10px)}}.tdFadeInDown{-webkit-animation-name:tdFadeInDown;animation-name:tdFadeInDown}.tdFadeInLeft{-webkit-animation-name:tdFadeInLeft;animation-name:tdFadeInLeft}.tdFadeInUp{-webkit-animation-name:tdFadeInUp;animation-name:tdFadeInUp}.tdFadeInRight{-webkit-animation-name:tdFadeInRight;animation-name:tdFadeInRight}.tdFadeOutUp{-webkit-animation-name:tdFadeOutUp;animation-name:tdFadeOutUp}.tdFadeOutRight{-webkit-animation-name:tdFadeOutRight;animation-name:tdFadeOutRight}.tdFadeOutDown{-webkit-animation-name:tdFadeOutDown;animation-name:tdFadeOutDown}.tdFadeOutLeft{-webkit-animation-name:tdFadeOutLeft;animation-name:tdFadeOutLeft}@-webkit-keyframes tdExpandIn{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@keyframes tdExpandIn{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdExpandInBounce{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdExpandInBounce{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdExpandOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(1.2)}}@keyframes tdExpandOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(1.2)}}@-webkit-keyframes tdExpandOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(1.2)}}@keyframes tdExpandOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(1.2)}}@-webkit-keyframes tdShrinkIn{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@keyframes tdShrinkIn{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdShrinkInBounce{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1)}}@keyframes tdShrinkInBounce{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdShrinkOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdShrinkOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdShrinkOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdShrinkOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}.tdExpandIn{-webkit-animation-name:tdExpandIn;animation-name:tdExpandIn}.tdExpandInBounce{-webkit-animation-name:tdExpandInBounce;animation-name:tdExpandInBounce}.tdExpandOut{-webkit-animation-name:tdExpandOut;animation-name:tdExpandOut}.tdExpandOutBounce{-webkit-animation-name:tdExpandOutBounce;animation-name:tdExpandOutBounce}.tdShrinkIn{-webkit-animation-name:tdShrinkIn;animation-name:tdShrinkIn}.tdShrinkInBounce{-webkit-animation-name:tdShrinkInBounce;animation-name:tdShrinkInBounce}.tdShrinkOut{-webkit-animation-name:tdShrinkOut;animation-name:tdShrinkOut}.tdShrinkOutBounce{-webkit-animation-name:tdShrinkOutBounce;animation-name:tdShrinkOutBounce}@-webkit-keyframes tdStampIn{0%{opacity:0;transform:scale(1.3);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes tdStampIn{0%{opacity:0;transform:scale(1.3);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdStampInSwing{0%{opacity:0;transform:scale(1.3) rotate(-10deg);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes tdStampInSwing{0%{opacity:0;transform:scale(1.3) rotate(-10deg);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1) rotate(0)}}.tdStampIn{-webkit-animation-name:tdStampIn;animation-name:tdStampIn}.tdStampInSwing{-webkit-animation-name:tdStampInSwing;animation-name:tdStampInSwing}@-webkit-keyframes tdSwingIn{0%{opacity:0;transform:rotate(-10deg) scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{opacity:1;transform:rotate(1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdSwingIn{0%{opacity:0;transform:rotate(-10deg) scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{opacity:1;transform:rotate(1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdSwingOut{0%{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:rotate(-1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:rotate(10deg) scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdSwingOut{0%{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:rotate(-1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:rotate(10deg) scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}.tdSwingIn{-webkit-animation-name:tdSwingIn;animation-name:tdSwingIn}.tdSwingOut{-webkit-animation-name:tdSwingOut;animation-name:tdSwingOut}@-webkit-keyframes tdHingeFlipIn{0%{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes tdHingeFlipIn{0%{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes tdHingeFlipOut{0%{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes tdHingeFlipOut{0%{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.tdHingeFlipIn{-webkit-animation-name:tdHingeFlipIn;animation-name:tdHingeFlipIn}.tdHingeFlipOut{-webkit-animation-name:tdHingeFlipOut;animation-name:tdHingeFlipOut}@-webkit-keyframes tdDropInLeft{0%{opacity:0}1%{opacity:1;transform:rotate(2deg) translateY(-15px);transform-origin:right bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(-.5deg) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@keyframes tdDropInLeft{0%{opacity:0}1%{opacity:1;transform:rotate(2deg) translateY(-15px);transform-origin:right bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(-.5deg) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@-webkit-keyframes tdDropInRight{0%{opacity:0}1%{opacity:1;transform:rotate(-2deg) translateY(-15px);transform-origin:left bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(.5deg) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@keyframes tdDropInRight{0%{opacity:0}1%{opacity:1;transform:rotate(-2deg) translateY(-15px);transform-origin:left bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(.5deg) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}.tdDropInLeft{-webkit-animation-name:tdDropInLeft;animation-name:tdDropInLeft}.tdDropInRight{-webkit-animation-name:tdDropInRight;animation-name:tdDropInRight}@-webkit-keyframes tdPlopIn{0%{opacity:0;transform:scale(.9)}10%{opacity:1;transform:scale(.7,1.3)}70%{transform:scale(1.1,.95)}90%{transform:scale(.97,1.05)}to{opacity:1;transform:scale(1)}}@keyframes tdPlopIn{0%{opacity:0;transform:scale(.9)}10%{opacity:1;transform:scale(.7,1.3)}70%{transform:scale(1.1,.95)}90%{transform:scale(.97,1.05)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdPlopInDown{0%{opacity:0;transform:scale(.9,.8);transform-origin:center top}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center top}70%{transform:scaleY(.95);transform-origin:center top}to{opacity:1;transform:scale(1);transform-origin:center top}}@keyframes tdPlopInDown{0%{opacity:0;transform:scale(.9,.8);transform-origin:center top}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center top}70%{transform:scaleY(.95);transform-origin:center top}to{opacity:1;transform:scale(1);transform-origin:center top}}@-webkit-keyframes tdPlopInUp{0%{opacity:0;transform:scale(.9,.8);transform-origin:center bottom}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center bottom}70%{transform:scaleY(.95);transform-origin:center bottom}to{opacity:1;transform:scale(1);transform-origin:center bottom}}@keyframes tdPlopInUp{0%{opacity:0;transform:scale(.9,.8);transform-origin:center bottom}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center bottom}70%{transform:scaleY(.95);transform-origin:center bottom}to{opacity:1;transform:scale(1);transform-origin:center bottom}}.tdPlopIn{-webkit-animation-name:tdPlopIn;animation-name:tdPlopIn}.tdPlopInDown{-webkit-animation-name:tdPlopInDown;animation-name:tdPlopInDown}.tdPlopInUp{-webkit-animation-name:tdPlopInUp;animation-name:tdPlopInUp} \ No newline at end of file diff --git a/build/tuesday.min.css b/build/tuesday.min.css index 4d62d42..5cc5425 100644 --- a/build/tuesday.min.css +++ b/build/tuesday.min.css @@ -1,2 +1 @@ -/* tuesday.less v1.3.0 - (C)2020 Shakr; MIT License */ .animated{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes tdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tdFadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes tdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes tdFadeOut{0%{opacity:1}to{opacity:0}}.tdFadeIn{-webkit-animation-name:tdFadeIn;animation-name:tdFadeIn}.tdFadeOut{-webkit-animation-name:tdFadeOut;animation-name:tdFadeOut}@-webkit-keyframes tdFadeInDown{0%{opacity:0;transform:translateY(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@keyframes tdFadeInDown{0%{opacity:0;transform:translateY(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes tdFadeInLeft{0%{opacity:0;transform:translateX(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@keyframes tdFadeInLeft{0%{opacity:0;transform:translateX(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes tdFadeInUp{0%{opacity:0;transform:translateY(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@keyframes tdFadeInUp{0%{opacity:0;transform:translateY(10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes tdFadeInRight{0%{opacity:0;transform:translateX(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@keyframes tdFadeInRight{0%{opacity:0;transform:translateX(-10px);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes tdFadeOutUp{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(-10px)}}@keyframes tdFadeOutUp{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(-10px)}}@-webkit-keyframes tdFadeOutRight{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(10px)}}@keyframes tdFadeOutRight{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(10px)}}@-webkit-keyframes tdFadeOutDown{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(10px)}}@keyframes tdFadeOutDown{0%{opacity:1;transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateY(10px)}}@-webkit-keyframes tdFadeOutLeft{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(-10px)}}@keyframes tdFadeOutLeft{0%{opacity:1;transform:translateX(0);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:translateX(-10px)}}.tdFadeInDown{-webkit-animation-name:tdFadeInDown;animation-name:tdFadeInDown}.tdFadeInLeft{-webkit-animation-name:tdFadeInLeft;animation-name:tdFadeInLeft}.tdFadeInUp{-webkit-animation-name:tdFadeInUp;animation-name:tdFadeInUp}.tdFadeInRight{-webkit-animation-name:tdFadeInRight;animation-name:tdFadeInRight}.tdFadeOutUp{-webkit-animation-name:tdFadeOutUp;animation-name:tdFadeOutUp}.tdFadeOutRight{-webkit-animation-name:tdFadeOutRight;animation-name:tdFadeOutRight}.tdFadeOutDown{-webkit-animation-name:tdFadeOutDown;animation-name:tdFadeOutDown}.tdFadeOutLeft{-webkit-animation-name:tdFadeOutLeft;animation-name:tdFadeOutLeft}@-webkit-keyframes tdExpandIn{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@keyframes tdExpandIn{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdExpandInBounce{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdExpandInBounce{0%{opacity:0;transform:scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdExpandOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(1.2)}}@keyframes tdExpandOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(1.2)}}@-webkit-keyframes tdExpandOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(1.2)}}@keyframes tdExpandOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(1.2)}}@-webkit-keyframes tdShrinkIn{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@keyframes tdShrinkIn{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdShrinkInBounce{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1)}}@keyframes tdShrinkInBounce{0%{opacity:0;transform:scale(1.2);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{transform:scale(.95);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdShrinkOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdShrinkOut{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdShrinkOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdShrinkOutBounce{0%{opacity:1;transform:scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:scale(1.03);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}.tdExpandIn{-webkit-animation-name:tdExpandIn;animation-name:tdExpandIn}.tdExpandInBounce{-webkit-animation-name:tdExpandInBounce;animation-name:tdExpandInBounce}.tdExpandOut{-webkit-animation-name:tdExpandOut;animation-name:tdExpandOut}.tdExpandOutBounce{-webkit-animation-name:tdExpandOutBounce;animation-name:tdExpandOutBounce}.tdShrinkIn{-webkit-animation-name:tdShrinkIn;animation-name:tdShrinkIn}.tdShrinkInBounce{-webkit-animation-name:tdShrinkInBounce;animation-name:tdShrinkInBounce}.tdShrinkOut{-webkit-animation-name:tdShrinkOut;animation-name:tdShrinkOut}.tdShrinkOutBounce{-webkit-animation-name:tdShrinkOutBounce;animation-name:tdShrinkOutBounce}@-webkit-keyframes tdStampIn{0%{opacity:0;transform:scale(1.3);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes tdStampIn{0%{opacity:0;transform:scale(1.3);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdStampInSwing{0%{opacity:0;transform:scale(1.3) rotate(-10deg);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes tdStampInSwing{0%{opacity:0;transform:scale(1.3) rotate(-10deg);-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}50%{opacity:1}70%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1) rotate(0)}}.tdStampIn{-webkit-animation-name:tdStampIn;animation-name:tdStampIn}.tdStampInSwing{-webkit-animation-name:tdStampInSwing;animation-name:tdStampInSwing}@-webkit-keyframes tdSwingIn{0%{opacity:0;transform:rotate(-10deg) scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{opacity:1;transform:rotate(1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdSwingIn{0%{opacity:0;transform:rotate(-10deg) scale(.85);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}70%{opacity:1;transform:rotate(1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@-webkit-keyframes tdSwingOut{0%{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:rotate(-1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:rotate(10deg) scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}@keyframes tdSwingOut{0%{opacity:1;transform:rotate(0deg) scale(1);-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}30%{opacity:1;transform:rotate(-1deg);-webkit-animation-timing-function:ease;animation-timing-function:ease}to{opacity:0;transform:rotate(10deg) scale(.85);-webkit-animation-timing-function:ease;animation-timing-function:ease}}.tdSwingIn{-webkit-animation-name:tdSwingIn;animation-name:tdSwingIn}.tdSwingOut{-webkit-animation-name:tdSwingOut;animation-name:tdSwingOut}@-webkit-keyframes tdHingeFlipIn{0%{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes tdHingeFlipIn{0%{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes tdHingeFlipOut{0%{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes tdHingeFlipOut{0%{opacity:1;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}50%{transform:perspective(600px) rotateX(-10deg);transform-origin:center top;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0;transform:perspective(600px) rotateX(0deg);transform-origin:center top;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.tdHingeFlipIn{-webkit-animation-name:tdHingeFlipIn;animation-name:tdHingeFlipIn}.tdHingeFlipOut{-webkit-animation-name:tdHingeFlipOut;animation-name:tdHingeFlipOut}@-webkit-keyframes tdDropInLeft{0%{opacity:0}1%{opacity:1;transform:rotate(2deg) translateY(-15px);transform-origin:right bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(-.5deg) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@keyframes tdDropInLeft{0%{opacity:0}1%{opacity:1;transform:rotate(2deg) translateY(-15px);transform-origin:right bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(-.5deg) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@-webkit-keyframes tdDropInRight{0%{opacity:0}1%{opacity:1;transform:rotate(-2deg) translateY(-15px);transform-origin:left bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(.5deg) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}@keyframes tdDropInRight{0%{opacity:0}1%{opacity:1;transform:rotate(-2deg) translateY(-15px);transform-origin:left bottom;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;transform:rotate(0) translateY(0);transform-origin:left bottom;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}75%{transform:rotate(.5deg) translateY(0);transform-origin:right bottom;-webkit-animation-timing-function:cubic-bezier(.59,0,1,.375);animation-timing-function:cubic-bezier(.59,0,1,.375)}to{opacity:1;transform:rotate(0) translateY(0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0,.59,.375,1);animation-timing-function:cubic-bezier(0,.59,.375,1)}}.tdDropInLeft{-webkit-animation-name:tdDropInLeft;animation-name:tdDropInLeft}.tdDropInRight{-webkit-animation-name:tdDropInRight;animation-name:tdDropInRight}@-webkit-keyframes tdPlopIn{0%{opacity:0;transform:scale(.9)}10%{opacity:1;transform:scale(.7,1.3)}70%{transform:scale(1.1,.95)}90%{transform:scale(.97,1.05)}to{opacity:1;transform:scale(1)}}@keyframes tdPlopIn{0%{opacity:0;transform:scale(.9)}10%{opacity:1;transform:scale(.7,1.3)}70%{transform:scale(1.1,.95)}90%{transform:scale(.97,1.05)}to{opacity:1;transform:scale(1)}}@-webkit-keyframes tdPlopInDown{0%{opacity:0;transform:scale(.9,.8);transform-origin:center top}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center top}70%{transform:scaleY(.95);transform-origin:center top}to{opacity:1;transform:scale(1);transform-origin:center top}}@keyframes tdPlopInDown{0%{opacity:0;transform:scale(.9,.8);transform-origin:center top}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center top}70%{transform:scaleY(.95);transform-origin:center top}to{opacity:1;transform:scale(1);transform-origin:center top}}@-webkit-keyframes tdPlopInUp{0%{opacity:0;transform:scale(.9,.8);transform-origin:center bottom}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center bottom}70%{transform:scaleY(.95);transform-origin:center bottom}to{opacity:1;transform:scale(1);transform-origin:center bottom}}@keyframes tdPlopInUp{0%{opacity:0;transform:scale(.9,.8);transform-origin:center bottom}10%{opacity:1;transform:scale(.8,1.3);transform-origin:center bottom}70%{transform:scaleY(.95);transform-origin:center bottom}to{opacity:1;transform:scale(1);transform-origin:center bottom}}.tdPlopIn{-webkit-animation-name:tdPlopIn;animation-name:tdPlopIn}.tdPlopInDown{-webkit-animation-name:tdPlopInDown;animation-name:tdPlopInDown}.tdPlopInUp{-webkit-animation-name:tdPlopInUp;animation-name:tdPlopInUp} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index bf81009..a7ca557 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,16 @@ "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", "dev": true }, + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -268,6 +278,12 @@ "tweetnacl": "^0.14.3" } }, + "binary-extensions": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", + "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", + "dev": true + }, "body": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz", @@ -296,6 +312,15 @@ "concat-map": "0.0.1" } }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, "bytes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz", @@ -412,6 +437,22 @@ "supports-color": "^2.0.0" } }, + "chokidar": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz", + "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==", + "dev": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.1.2", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.4.0" + } + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -1206,8 +1247,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true, - "optional": true + "dev": true }, "extsprintf": { "version": "1.3.0", @@ -1249,6 +1289,15 @@ "object-assign": "^4.1.0" } }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, "find-up": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", @@ -1308,6 +1357,13 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true }, + "fsevents": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", + "dev": true, + "optional": true + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -1359,6 +1415,15 @@ "path-is-absolute": "^1.0.0" } }, + "glob-parent": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, "globule": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", @@ -1610,6 +1675,50 @@ } } }, + "grunt-dart-sass": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/grunt-dart-sass/-/grunt-dart-sass-1.1.3.tgz", + "integrity": "sha512-pKLo5FAfyaNn4r8JoLb+q6Zn5YHhKQEDcQyNkv+W4V0dRpafVFZ/FzbHGbzz9T36JHQHqUo4vXlS+K3EtZYPfg==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "extend": "^3.0.1", + "intercept-stdout": "^0.1.2", + "path": "^0.12.7", + "sass": "^1.16.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "grunt-known-options": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-1.1.1.tgz", @@ -1925,6 +2034,15 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "intercept-stdout": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/intercept-stdout/-/intercept-stdout-0.1.2.tgz", + "integrity": "sha1-Emq/H65sUJpCipjGGmMVWQQq6f0=", + "dev": true, + "requires": { + "lodash.toarray": "^3.0.0" + } + }, "is-absolute-url": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", @@ -1937,6 +2055,15 @@ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "dev": true }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, "is-callable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz", @@ -1969,6 +2096,12 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true + }, "is-finite": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz", @@ -1978,6 +2111,21 @@ "number-is-nan": "^1.0.0" } }, + "is-glob": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, "is-obj": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", @@ -2182,12 +2330,64 @@ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, + "lodash._arraycopy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz", + "integrity": "sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE=", + "dev": true + }, + "lodash._basevalues": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz", + "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=", + "dev": true + }, + "lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", + "dev": true + }, + "lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", + "dev": true + }, + "lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", + "dev": true + }, + "lodash.keys": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", + "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", + "dev": true, + "requires": { + "lodash._getnative": "^3.0.0", + "lodash.isarguments": "^3.0.0", + "lodash.isarray": "^3.0.0" + } + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "dev": true }, + "lodash.toarray": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-3.0.2.tgz", + "integrity": "sha1-KyBPD6T1HChcbwDIHRzqWiMEEXk=", + "dev": true, + "requires": { + "lodash._arraycopy": "^3.0.0", + "lodash._basevalues": "^3.0.0", + "lodash.keys": "^3.0.0" + } + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -2429,6 +2629,12 @@ "validate-npm-package-license": "^3.0.1" } }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true + }, "normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", @@ -2563,6 +2769,16 @@ "error-ex": "^1.2.0" } }, + "path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "dev": true, + "requires": { + "process": "^0.11.1", + "util": "^0.10.3" + } + }, "path-exists": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", @@ -2602,6 +2818,12 @@ "dev": true, "optional": true }, + "picomatch": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", + "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", + "dev": true + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -4826,6 +5048,12 @@ "number-is-nan": "^1.0.0" } }, + "process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", + "dev": true + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -4900,6 +5128,15 @@ "read-pkg": "^1.0.0" } }, + "readdirp": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz", + "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "redent": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", @@ -5027,6 +5264,15 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.26.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.7.tgz", + "integrity": "sha512-xgNazdkr6yvgHEfNaOjKtZzhDZmKYMCmoRKMPrTDo7YvjaITIzU2DDYsIUuN/atAg7/JOxPeCQHH7TtCo5Tq2g==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -5394,6 +5640,15 @@ "qs": "^6.4.0" } }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + }, "tough-cookie": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", @@ -5481,6 +5736,23 @@ "punycode": "^2.1.0" } }, + "util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dev": true, + "requires": { + "inherits": "2.0.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + } + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 56ba6c4..b9d3018 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "grunt-contrib-cssmin": "^3.0.0", "grunt-contrib-less": "^2.0.0", "grunt-contrib-watch": "^1.1.0", + "grunt-dart-sass": "^1.1.3", "grunt-postcss": "^0.9.0", "load-grunt-tasks": "^3.1.0" } diff --git a/sass/modules/_easing.scss b/sass/modules/_easing.scss new file mode 100644 index 0000000..e61616f --- /dev/null +++ b/sass/modules/_easing.scss @@ -0,0 +1,3 @@ +// custom easing imports +$easeOutCirc: cubic-bezier(0, 0.590, 0.375, 1); +$easeInCirc: cubic-bezier(0.590, 0, 1, 0.375); \ No newline at end of file diff --git a/sass/modules/_mixins.scss b/sass/modules/_mixins.scss new file mode 100644 index 0000000..853ca21 --- /dev/null +++ b/sass/modules/_mixins.scss @@ -0,0 +1,5 @@ +// mixins +@mixin animated { + animation-duration: 0.3s; + animation-fill-mode: both; +} \ No newline at end of file diff --git a/sass/modules/basic-fade.scss b/sass/modules/basic-fade.scss new file mode 100644 index 0000000..3e1c66b --- /dev/null +++ b/sass/modules/basic-fade.scss @@ -0,0 +1,26 @@ +@import 'easing'; + +// Basic Fades +@mixin FadeIn { + @keyframes tdFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } +} + +@mixin FadeOut { + @keyframes tdFadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } +} \ No newline at end of file diff --git a/sass/modules/drop.scss b/sass/modules/drop.scss new file mode 100644 index 0000000..58dd163 --- /dev/null +++ b/sass/modules/drop.scss @@ -0,0 +1,68 @@ +@import 'easing'; + +// Drop In +@mixin DropInLeft { + @keyframes tdDropInLeft { + 0% { + opacity: 0; + } + 1% { + opacity: 1; + transform: rotate(2deg) translateY(-15px); + transform-origin: right bottom; + animation-timing-function: ease-in; + } + + 50% { + opacity: 1; + transform: rotate(0) translateY(0px); + transform-origin: right bottom; + animation-timing-function: ease-out; + } + + 75% { + transform: rotate(-0.5deg) translateY(0px); + transform-origin: left bottom; + animation-timing-function: $easeInCirc; + } + 100% { + opacity: 1; + transform: rotate(0) translateY(0px); + transform-origin: center bottom; + animation-timing-function: $easeOutCirc; + } + } +} + +@mixin DropInRight { + @keyframes tdDropInRight { + 0% { + opacity: 0; + } + 1% { + opacity: 1; + transform: rotate(-2deg) translateY(-15px); + transform-origin: left bottom; + animation-timing-function: ease-in; + } + + 50% { + opacity: 1; + transform: rotate(0) translateY(0px); + transform-origin: left bottom; + animation-timing-function: ease-out; + } + + 75% { + transform: rotate(0.5deg) translateY(0px); + transform-origin: right bottom; + animation-timing-function: $easeInCirc; + } + 100% { + opacity: 1; + transform: rotate(0) translateY(0px); + transform-origin: center bottom; + animation-timing-function: $easeOutCirc; + } + } +} diff --git a/sass/modules/fade.scss b/sass/modules/fade.scss new file mode 100644 index 0000000..8aa299a --- /dev/null +++ b/sass/modules/fade.scss @@ -0,0 +1,125 @@ +@import 'easing'; + +// Fading Entrances +@mixin FadeInDown { + @keyframes tdFadeInDown { + 0% { + opacity: 0; + transform: translateY(-10px); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 1; + transform: translateY(0); + } + } +} + +@mixin FadeInLeft { + @keyframes tdFadeInLeft { + 0% { + opacity: 0; + transform: translateX(10px); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 1; + transform: translateX(0); + } + } +} + +@mixin FadeInUp { + @keyframes tdFadeInUp { + 0% { + opacity: 0; + transform: translateY(10px); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 1; + transform: translateY(0); + } + } +} + +@mixin FadeInRight { + @keyframes tdFadeInRight { + 0% { + opacity: 0; + transform: translateX(-10px); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 1; + transform: translateX(0); + } + } +} + + +// Fading Exits +@mixin FadeOutUp { + @keyframes tdFadeOutUp { + 0% { + opacity: 1; + transform: translateY(0); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 0; + transform: translateY(-10px); + } + } +} + +@mixin FadeOutRight { + @keyframes tdFadeOutRight { + 0% { + opacity: 1; + transform: translateX(0); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 0; + transform: translateX(10px); + } + } +} + +@mixin FadeOutDown { + @keyframes tdFadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 0; + transform: translateY(10px); + } + } +} + +@mixin FadeOutLeft { + @keyframes tdFadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 0; + transform: translateX(-10px); + } + } +} + diff --git a/sass/modules/hinge-flip.scss b/sass/modules/hinge-flip.scss new file mode 100644 index 0000000..99171e4 --- /dev/null +++ b/sass/modules/hinge-flip.scss @@ -0,0 +1,50 @@ +@import 'easing'; + +// Hinge Flip +@mixin HingeFlipIn { + @keyframes tdHingeFlipIn { + 0% { + opacity: 0; + transform: perspective(600px) rotateX(0deg); + transform-origin: center top; + animation-timing-function: $easeOutCirc; + } + + 50% { + transform: perspective(600px) rotateX(-10deg); + transform-origin: center top; + animation-timing-function: ease-in; + } + + 100% { + opacity: 1; + transform: perspective(600px) rotateX(0deg); + transform-origin: center top; + animation-timing-function: ease-out; + } + } +} + +@mixin HingeFlipOut { + @keyframes tdHingeFlipOut { + 0% { + opacity: 1; + transform: perspective(600px) rotateX(0deg); + transform-origin: center top; + animation-timing-function: $easeOutCirc; + } + + 50% { + transform: perspective(600px) rotateX(-10deg); + transform-origin: center top; + animation-timing-function: ease-in; + } + + 100% { + opacity: 0; + transform: perspective(600px) rotateX(0deg); + transform-origin: center top; + animation-timing-function: ease-out; + } + } +} diff --git a/sass/modules/plop.scss b/sass/modules/plop.scss new file mode 100644 index 0000000..d00a59c --- /dev/null +++ b/sass/modules/plop.scss @@ -0,0 +1,73 @@ +@import 'easing'; + +// Plop Entrances +@mixin PlopIn { + @keyframes tdPlopIn { + 0% { + opacity: 0; + transform: scale(0.9,0.9); + } + 10% { + opacity: 1; + transform: scale(0.7,1.3); + } + 70% { + transform: scale(1.1,0.95); + } + 90% { + transform: scale(0.97,1.05); + } + 100% { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin PlopInDown { + @keyframes tdPlopInDown { + 0% { + opacity: 0; + transform: scale(0.9,0.8); + transform-origin: center top; + } + 10% { + opacity: 1; + transform: scale(0.8,1.3); + transform-origin: center top; + } + 70% { + transform: scale(1,0.95); + transform-origin: center top; + } + 100% { + opacity: 1; + transform: scale(1); + transform-origin: center top; + } + } +} + +@mixin PlopInUp { + @keyframes tdPlopInUp { + 0% { + opacity: 0; + transform: scale(0.9,0.8); + transform-origin: center bottom; + } + 10% { + opacity: 1; + transform: scale(0.8,1.3); + transform-origin: center bottom; + } + 70% { + transform: scale(1,0.95); + transform-origin: center bottom; + } + 100% { + opacity: 1; + transform: scale(1); + transform-origin: center bottom; + } + } +} \ No newline at end of file diff --git a/sass/modules/stamp.scss b/sass/modules/stamp.scss new file mode 100644 index 0000000..c96cee5 --- /dev/null +++ b/sass/modules/stamp.scss @@ -0,0 +1,52 @@ +@import 'easing'; + +// Stamp Entrances +@mixin StampIn { + @keyframes tdStampIn { + 0% { + opacity: 0; + transform: scale(1.3); + animation-timing-function: $easeInCirc; + } + 50% { + opacity: 1; + } + 70% { + opacity: 1; + transform: scale(1); + } + 90% { + opacity: 1; + transform: scale(1.03); + } + 100% { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin StampInSwing { + @keyframes tdStampInSwing { + 0% { + opacity: 0; + transform: scale(1.3) rotate(-10deg); + animation-timing-function: $easeInCirc; + } + 50% { + opacity: 1; + } + 70% { + opacity: 1; + transform: scale(1); + } + 90% { + opacity: 1; + transform: scale(1.03); + } + 100% { + opacity: 1; + transform: scale(1) rotate(0); + } + } +} \ No newline at end of file diff --git a/sass/modules/swing.scss b/sass/modules/swing.scss new file mode 100644 index 0000000..09598a6 --- /dev/null +++ b/sass/modules/swing.scss @@ -0,0 +1,43 @@ +@import 'easing'; + +// Swing +@mixin SwingIn { + @keyframes tdSwingIn { + 0% { + opacity: 0; + transform: rotate(-10deg) scale(0.85); + animation-timing-function: $easeOutCirc; + } + + 70% { + opacity: 1; + transform: rotate(1deg); + animation-timing-function: ease; + } + 100% { + opacity: 1; + transform: rotate(0deg) scale(1); + animation-timing-function: ease; + } + } +} + +@mixin SwingOut { + @keyframes tdSwingOut { + 0% { + opacity: 1; + transform: rotate(0deg) scale(1); + animation-timing-function: $easeOutCirc; + } + 30% { + opacity: 1; + transform: rotate(-1deg); + animation-timing-function: ease; + } + 100% { + opacity: 0; + transform: rotate(10deg) scale(0.85); + animation-timing-function: ease; + } + } +} \ No newline at end of file diff --git a/sass/modules/zoom-expand.scss b/sass/modules/zoom-expand.scss new file mode 100644 index 0000000..6817b4c --- /dev/null +++ b/sass/modules/zoom-expand.scss @@ -0,0 +1,70 @@ +@import 'easing'; + +// Expand Entrances +@mixin ExpandIn { + @keyframes tdExpandIn { + 0% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: $easeOutCirc; + } + + 100% { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin ExpandInBounce { + @keyframes tdExpandInBounce { + 0% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: $easeOutCirc; + } + 70% { + transform: scale(1.03); + animation-timing-function: ease; + } + 100% { + opacity: 1; + transform: scale(1); + animation-timing-function: ease; + } + } +} + +// Expand Exits +@mixin ExpandOut { + @keyframes tdExpandOut { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: $easeOutCirc; + } + 100% { + opacity: 0; + transform: scale(1.2); + } + } +} + +@mixin ExpandOutBounce { + @keyframes tdExpandOutBounce { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: $easeOutCirc; + } + 30% { + opacity: 1; + transform: scale(0.95); + animation-timing-function: ease; + } + 100% { + opacity: 0; + transform: scale(1.2); + } + } +} diff --git a/sass/modules/zoom-shrink.scss b/sass/modules/zoom-shrink.scss new file mode 100644 index 0000000..90b2c85 --- /dev/null +++ b/sass/modules/zoom-shrink.scss @@ -0,0 +1,71 @@ +@import 'easing'; + +// Shrink Entrances +@mixin ShrinkIn { + @keyframes tdShrinkIn { + 0% { + opacity: 0; + transform: scale(1.2); + animation-timing-function: $easeOutCirc; + } + 100% { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin ShrinkInBounce { + @keyframes tdShrinkInBounce { + 0% { + opacity: 0; + transform: scale(1.2); + animation-timing-function: $easeOutCirc; + } + 70% { + transform: scale(0.95); + animation-timing-function: ease; + } + 100% { + opacity: 1; + transform: scale(1); + } + } +} + + +// Shrink Exits +@mixin ShrinkOut { + @keyframes tdShrinkOut { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: $easeOutCirc; + } + 100% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: ease; + } + } +} + +@mixin ShrinkOutBounce { + @keyframes tdShrinkOutBounce { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: $easeOutCirc; + } + 30% { + opacity: 1; + transform: scale(1.03); + animation-timing-function: ease; + } + 100% { + opacity: 0; + transform: scale(0.85); + animation-timing-function: ease; + } + } +} diff --git a/sass/tuesday.scss b/sass/tuesday.scss new file mode 100644 index 0000000..86abb9d --- /dev/null +++ b/sass/tuesday.scss @@ -0,0 +1,62 @@ +// ======================================== // +// ==== tuesday.scss ====================== // +// ==== A quirky CSS Animation Library ==== // +// ==== (Sass Version) ==================== // +// ======================================== // + +@import 'modules/easing'; +@import 'modules/mixins'; + +// load animation modules +@import 'modules/basic-fade'; +@import 'modules/fade'; +@import 'modules/drop'; +@import 'modules/hinge-flip'; +@import 'modules/plop'; +@import 'modules/stamp'; +@import 'modules/swing'; +@import 'modules/zoom-expand'; +@import 'modules/zoom-shrink'; + +.animated { + @include animated; +} + +// output keyframes +@include FadeIn; +@include FadeOut; + +@include FadeInDown; +@include FadeInLeft; +@include FadeInUp; +@include FadeInRight; +@include FadeOutUp; +@include FadeOutRight; +@include FadeOutDown; +@include FadeOutLeft; + +@include HingeFlipIn; +@include HingeFlipOut; + +@include DropInLeft; +@include DropInRight; + +@include PlopIn; +@include PlopInDown; +@include PlopInUp; + +@include ExpandIn; +@include ExpandInBounce; +@include ExpandOut; +@include ExpandOutBounce; + +@include ShrinkIn; +@include ShrinkInBounce; +@include ShrinkOut; +@include ShrinkOutBounce; + +@include StampIn; +@include StampInSwing; + +@include SwingIn; +@include SwingOut; \ No newline at end of file