├── .gitignore ├── bower_components ├── hmps-animate-scss │ ├── .gitignore │ ├── partials │ │ ├── _fadeIn.scss │ │ ├── _fadeOut.scss │ │ ├── _rotateIn.scss │ │ ├── _fadeInUp.scss │ │ ├── _pulse.scss │ │ ├── _rotateOut.scss │ │ ├── _fadeOutUp.scss │ │ ├── _slideInUp.scss │ │ ├── _fadeInDown.scss │ │ ├── _fadeInLeft.scss │ │ ├── _fadeInRight.scss │ │ ├── _fadeOutDown.scss │ │ ├── _slideOutUp.scss │ │ ├── _fadeInUpBig.scss │ │ ├── _fadeOutLeft.scss │ │ ├── _fadeOutRight.scss │ │ ├── _slideInDown.scss │ │ ├── _slideInLeft.scss │ │ ├── _fadeOutUpBig.scss │ │ ├── _slideInRight.scss │ │ ├── _slideOutDown.scss │ │ ├── _slideOutLeft.scss │ │ ├── _slideOutRight.scss │ │ ├── _fadeInDownBig.scss │ │ ├── _fadeInLeftBig.scss │ │ ├── _fadeInRightBig.scss │ │ ├── _fadeOutDownBig.scss │ │ ├── _fadeOutLeftBig.scss │ │ ├── _rollIn.scss │ │ ├── _rollOut.scss │ │ ├── _fadeOutRightBig.scss │ │ ├── _flipOutX.scss │ │ ├── _flipOutY.scss │ │ ├── _bounce.scss │ │ ├── _lightSpeedOut.scss │ │ ├── _shake.scss │ │ ├── _rotateInUpLeft.scss │ │ ├── _rotateInUpRight.scss │ │ ├── _rotateOutUpLeft.scss │ │ ├── _rotateInDownLeft.scss │ │ ├── _rotateOutUpRight.scss │ │ ├── _rotateInDownRight.scss │ │ ├── _rotateOutDownLeft.scss │ │ ├── _rotateOutDownRight.scss │ │ ├── _bounceOutUp.scss │ │ ├── _bounceOutDown.scss │ │ ├── _bounceOutLeft.scss │ │ ├── _bounceOutRight.scss │ │ ├── _bounceOut.scss │ │ ├── _bounceIn.scss │ │ ├── _bounceInUp.scss │ │ ├── _bounceInLeft.scss │ │ ├── _bounceInDown.scss │ │ ├── _bounceInRight.scss │ │ ├── _swing.scss │ │ ├── _tada.scss │ │ ├── _lightSpeedIn.scss │ │ ├── _wobble.scss │ │ ├── _flipInX.scss │ │ ├── _flipInY.scss │ │ ├── _wiggle.scss │ │ ├── _flip.scss │ │ ├── _hingeLeft.scss │ │ ├── _hingeRight.scss │ │ └── _helpers.scss │ ├── .bower.json │ ├── README.md │ └── animate.scss ├── angular-sanitize │ ├── index.js │ ├── bower.json │ ├── .bower.json │ ├── package.json │ ├── README.md │ └── angular-sanitize.min.js ├── angular │ ├── angular.min.js.gzip │ ├── bower.json │ ├── .bower.json │ ├── angular-csp.css │ ├── package.json │ └── README.md └── angular-mocks │ ├── bower.json │ ├── .bower.json │ ├── package.json │ └── README.md ├── example ├── bower_components │ ├── angular-sanitize │ │ ├── index.js │ │ ├── bower.json │ │ ├── package.json │ │ ├── README.md │ │ └── angular-sanitize.min.js │ ├── angular │ │ ├── angular.min.js.gzip │ │ ├── bower.json │ │ ├── angular-csp.css │ │ ├── package.json │ │ └── README.md │ ├── angular-mocks │ │ ├── bower.json │ │ ├── package.json │ │ └── README.md │ └── hmps-animate-scss │ │ ├── partials │ │ ├── _fadeIn.scss │ │ ├── _fadeOut.scss │ │ ├── _pulse.scss │ │ ├── _rotateIn.scss │ │ ├── _rotateOut.scss │ │ ├── _fadeInUp.scss │ │ ├── _fadeInDown.scss │ │ ├── _fadeInLeft.scss │ │ ├── _fadeOutUp.scss │ │ ├── _slideInUp.scss │ │ ├── _fadeInRight.scss │ │ ├── _fadeInUpBig.scss │ │ ├── _fadeOutDown.scss │ │ ├── _fadeOutLeft.scss │ │ ├── _slideInLeft.scss │ │ ├── _slideOutUp.scss │ │ ├── _fadeOutRight.scss │ │ ├── _fadeOutUpBig.scss │ │ ├── _slideInDown.scss │ │ ├── _slideInRight.scss │ │ ├── _slideOutDown.scss │ │ ├── _slideOutLeft.scss │ │ ├── _fadeInDownBig.scss │ │ ├── _fadeInLeftBig.scss │ │ ├── _rollIn.scss │ │ ├── _rollOut.scss │ │ ├── _slideOutRight.scss │ │ ├── _fadeInRightBig.scss │ │ ├── _fadeOutDownBig.scss │ │ ├── _fadeOutLeftBig.scss │ │ ├── _fadeOutRightBig.scss │ │ ├── _flipOutX.scss │ │ ├── _flipOutY.scss │ │ ├── _lightSpeedOut.scss │ │ ├── _bounce.scss │ │ ├── _shake.scss │ │ ├── _rotateInUpLeft.scss │ │ ├── _rotateOutUpLeft.scss │ │ ├── _rotateInUpRight.scss │ │ ├── _rotateInDownLeft.scss │ │ ├── _rotateOutUpRight.scss │ │ ├── _rotateInDownRight.scss │ │ ├── _rotateOutDownLeft.scss │ │ ├── _rotateOutDownRight.scss │ │ ├── _bounceOutUp.scss │ │ ├── _bounceOutDown.scss │ │ ├── _bounceOutLeft.scss │ │ ├── _bounceOutRight.scss │ │ ├── _bounceOut.scss │ │ ├── _bounceIn.scss │ │ ├── _bounceInUp.scss │ │ ├── _bounceInDown.scss │ │ ├── _bounceInLeft.scss │ │ ├── _bounceInRight.scss │ │ ├── _swing.scss │ │ ├── _tada.scss │ │ ├── _lightSpeedIn.scss │ │ ├── _wobble.scss │ │ ├── _flipInX.scss │ │ ├── _flipInY.scss │ │ ├── _wiggle.scss │ │ ├── _flip.scss │ │ ├── _hingeLeft.scss │ │ ├── _hingeRight.scss │ │ └── _helpers.scss │ │ ├── README.md │ │ └── animate.scss ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── js │ └── app.js ├── dist │ ├── ngNotificationsBar.min.css │ └── ngNotificationsBar.min.js ├── css │ ├── app.css │ └── normalize.css └── index.html ├── css ├── ngNotificationsBar.min.css └── ngNotificationsBar.css ├── .editorconfig ├── bower.json ├── sass └── ngNotificationsBar.scss ├── .jshintrc ├── package.json ├── dist ├── ngNotificationsBar.min.css └── ngNotificationsBar.min.js ├── Gruntfile.js ├── README.md └── src └── ngNotificationsBar.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .sass-cache 4 | *.log 5 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | test/ -------------------------------------------------------------------------------- /bower_components/angular-sanitize/index.js: -------------------------------------------------------------------------------- 1 | require('./angular-sanitize'); 2 | module.exports = 'ngSanitize'; 3 | -------------------------------------------------------------------------------- /example/bower_components/angular-sanitize/index.js: -------------------------------------------------------------------------------- 1 | require('./angular-sanitize'); 2 | module.exports = 'ngSanitize'; 3 | -------------------------------------------------------------------------------- /bower_components/angular/angular.min.js.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexbeletsky/ng-notifications-bar/HEAD/bower_components/angular/angular.min.js.gzip -------------------------------------------------------------------------------- /bower_components/angular/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.2.26", 4 | "main": "./angular.js", 5 | "dependencies": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /css/ngNotificationsBar.min.css: -------------------------------------------------------------------------------- 1 | /*! ng-notifications-bar - v0.0.1 (https://github.com/alexanderbeletsky/ng-notifications-bar) */ 2 | 3 | .notifications{color:red} -------------------------------------------------------------------------------- /example/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexbeletsky/ng-notifications-bar/HEAD/example/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /example/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexbeletsky/ng-notifications-bar/HEAD/example/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /example/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexbeletsky/ng-notifications-bar/HEAD/example/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /example/bower_components/angular/angular.min.js.gzip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexbeletsky/ng-notifications-bar/HEAD/example/bower_components/angular/angular.min.js.gzip -------------------------------------------------------------------------------- /example/bower_components/angular/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.2.26", 4 | "main": "./angular.js", 5 | "dependencies": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /bower_components/angular-mocks/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mocks", 3 | "version": "1.2.26", 4 | "main": "./angular-mocks.js", 5 | "dependencies": { 6 | "angular": "1.2.26" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/bower_components/angular-mocks/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mocks", 3 | "version": "1.2.26", 4 | "main": "./angular-mocks.js", 5 | "dependencies": { 6 | "angular": "1.2.26" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /bower_components/angular-sanitize/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sanitize", 3 | "version": "1.3.14", 4 | "main": "./angular-sanitize.js", 5 | "ignore": [], 6 | "dependencies": { 7 | "angular": "1.3.14" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/bower_components/angular-sanitize/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sanitize", 3 | "version": "1.3.14", 4 | "main": "./angular-sanitize.js", 5 | "ignore": [], 6 | "dependencies": { 7 | "angular": "1.3.14" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeIn.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeIn) { 7 | 0% {opacity: 0;} 8 | 100% {opacity: 1;} 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOut.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOut) { 7 | 0% {opacity: 1;} 8 | 100% {opacity: 0;} 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hmps-animate-scss", 3 | "homepage": "https://github.com/hmps/animate.scss", 4 | "version": "1.0.1", 5 | "_release": "1.0.1", 6 | "_resolution": { 7 | "type": "version", 8 | "tag": "1.0.1", 9 | "commit": "6a59a0085b8060a4f71c3fd77c1685a2b1d1e9b1" 10 | }, 11 | "_source": "git://github.com/hmps/animate.scss.git", 12 | "_target": "~1.0.1", 13 | "_originalSource": "hmps-animate-scss" 14 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeIn.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeIn) { 7 | 0% {opacity: 0;} 8 | 100% {opacity: 1;} 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOut.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOut) { 7 | 0% {opacity: 1;} 8 | 100% {opacity: 0;} 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /bower_components/angular/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "1.2.26", 4 | "main": "./angular.js", 5 | "dependencies": {}, 6 | "homepage": "https://github.com/angular/bower-angular", 7 | "_release": "1.2.26", 8 | "_resolution": { 9 | "type": "version", 10 | "tag": "v1.2.26", 11 | "commit": "7308d8d650b2b9948796035cbf6f3b175d45efe0" 12 | }, 13 | "_source": "git://github.com/angular/bower-angular.git", 14 | "_target": "1.2.26", 15 | "_originalSource": "angular" 16 | } -------------------------------------------------------------------------------- /bower_components/angular-mocks/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mocks", 3 | "version": "1.2.26", 4 | "main": "./angular-mocks.js", 5 | "dependencies": { 6 | "angular": "1.2.26" 7 | }, 8 | "homepage": "https://github.com/angular/bower-angular-mocks", 9 | "_release": "1.2.26", 10 | "_resolution": { 11 | "type": "version", 12 | "tag": "v1.2.26", 13 | "commit": "0eda339dd42aba2628586f39d4806bcfb57fd6f4" 14 | }, 15 | "_source": "git://github.com/angular/bower-angular-mocks.git", 16 | "_target": "~1.2.25", 17 | "_originalSource": "angular-mocks" 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateIn.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rotateIn) { 7 | 0% { 8 | @include transform(rotate(-200deg)); 9 | opacity: 0; 10 | } 11 | 100% { 12 | @include transform(rotate(0)); 13 | opacity: 1; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_pulse.scss: -------------------------------------------------------------------------------- 1 | @mixin pulse($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(pulse $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(pulse) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 50% { 11 | @include transform(scale(1.1)); 12 | } 13 | 100% { 14 | @include transform(scale(1)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateOut.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rotateOut) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(rotate(-200deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutUp) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_pulse.scss: -------------------------------------------------------------------------------- 1 | @mixin pulse($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(pulse $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(pulse) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 50% { 11 | @include transform(scale(1.1)); 12 | } 13 | 100% { 14 | @include transform(scale(1)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateIn.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rotateIn) { 7 | 0% { 8 | @include transform(rotate(-200deg)); 9 | opacity: 0; 10 | } 11 | 100% { 12 | @include transform(rotate(0)); 13 | opacity: 1; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateOut.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rotateOut) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(rotate(-200deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutDown) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutUp) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInUpBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInUpBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInUpBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInUpBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(-20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutUp) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutUpBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutUpBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutUpBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutUpBig) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutDown) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutLeft) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_slideOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutRight) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(20px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInUpBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInUpBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInUpBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInUpBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutDown) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(-20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutUp) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/angular-sanitize/.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sanitize", 3 | "version": "1.3.14", 4 | "main": "./angular-sanitize.js", 5 | "ignore": [], 6 | "dependencies": { 7 | "angular": "1.3.14" 8 | }, 9 | "homepage": "https://github.com/angular/bower-angular-sanitize", 10 | "_release": "1.3.14", 11 | "_resolution": { 12 | "type": "version", 13 | "tag": "v1.3.14", 14 | "commit": "ae307cd94fc71360c376c666ebe964fb95918132" 15 | }, 16 | "_source": "git://github.com/angular/bower-angular-sanitize.git", 17 | "_target": "~1.3.12", 18 | "_originalSource": "angular-sanitize" 19 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInDownBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInDownBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInDownBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInDownBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInLeftBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInLeftBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInLeftBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInLeftBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeInRightBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInRightBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInRightBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInRightBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutDownBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutDownBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutDownBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutDownBig) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutLeftBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutLeftBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutLeftBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutLeftBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rollIn.scss: -------------------------------------------------------------------------------- 1 | @mixin rollIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rollIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rollIn) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-100%) rotate(-120deg)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0px) rotate(0deg)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rollOut.scss: -------------------------------------------------------------------------------- 1 | @mixin rollOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rollOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rollOut) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0) rotate(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(-100%) rotate(-120deg)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(20px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutUpBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutUpBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutUpBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutUpBig) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin slideInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutDown) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutLeft) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_fadeOutRightBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutRightBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutRightBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutRightBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInDownBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInDownBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInDownBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInDownBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateY(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInLeftBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInLeftBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInLeftBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInLeftBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rollIn.scss: -------------------------------------------------------------------------------- 1 | @mixin rollIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rollIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rollIn) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-100%) rotate(-120deg)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0px) rotate(0deg)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rollOut.scss: -------------------------------------------------------------------------------- 1 | @mixin rollOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rollOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(rollOut) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0) rotate(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(-100%) rotate(-120deg)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_slideOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin slideOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(slideOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(slideOutRight) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateX(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_flipOutX.scss: -------------------------------------------------------------------------------- 1 | @mixin flipOutX($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipOutX $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipOutX) { 7 | 0% { 8 | @include transform(perspective(400px) rotateX(0deg)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(perspective(400px) rotateX(90deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_flipOutY.scss: -------------------------------------------------------------------------------- 1 | @mixin flipOutY($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipOutY $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipOutY) { 7 | 0% { 8 | @include transform(perspective(400px) rotateY(0deg)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(perspective(400px) rotateY(90deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeInRightBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeInRightBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeInRightBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeInRightBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(0)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutDownBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutDownBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutDownBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutDownBig) { 7 | 0% { 8 | opacity: 1; 9 | @include transform(translateY(0)); 10 | } 11 | 100% { 12 | opacity: 0; 13 | @include transform(translateY(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutLeftBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutLeftBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutLeftBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutLeftBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(-2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_fadeOutRightBig.scss: -------------------------------------------------------------------------------- 1 | @mixin fadeOutRightBig($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(fadeOutRightBig $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(fadeOutRightBig) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(0)); 10 | } 11 | 100% { 12 | opacity: 1; 13 | @include transform(translateX(2000px)); 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounce.scss: -------------------------------------------------------------------------------- 1 | @mixin bounce($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounce $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounce) { 7 | 0%, 20%, 50%, 80%, 100% { 8 | @include transform(translateY(0px)); 9 | } 10 | 40% { 11 | @include transform(translateY(-30px)); 12 | } 13 | 60% { 14 | @include transform(translateY(-15px)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_lightSpeedOut.scss: -------------------------------------------------------------------------------- 1 | @mixin lightSpeedOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(lightSpeedOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(lightSpeedOut) { 7 | 0% { 8 | @include transform(translateX(0) skewX(0)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(translateX(2000px) skewX(30deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_flipOutX.scss: -------------------------------------------------------------------------------- 1 | @mixin flipOutX($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipOutX $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipOutX) { 7 | 0% { 8 | @include transform(perspective(400px) rotateX(0deg)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(perspective(400px) rotateX(90deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_flipOutY.scss: -------------------------------------------------------------------------------- 1 | @mixin flipOutY($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipOutY $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipOutY) { 7 | 0% { 8 | @include transform(perspective(400px) rotateY(0deg)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(perspective(400px) rotateY(90deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_lightSpeedOut.scss: -------------------------------------------------------------------------------- 1 | @mixin lightSpeedOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(lightSpeedOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(lightSpeedOut) { 7 | 0% { 8 | @include transform(translateX(0) skewX(0)); 9 | opacity: 1; 10 | } 11 | 100% { 12 | @include transform(translateX(2000px) skewX(30deg)); 13 | opacity: 0; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_shake.scss: -------------------------------------------------------------------------------- 1 | @mixin shake($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(shake $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(shake) { 7 | 0%, 100% { 8 | @include transform(translateX(0)); 9 | } 10 | 10%, 30%, 50%, 70%, 90% { 11 | @include transform(translateX(-6px)); 12 | } 13 | 20%, 40%, 60%, 80% { 14 | @include transform(translateX(6px)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounce.scss: -------------------------------------------------------------------------------- 1 | @mixin bounce($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounce $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounce) { 7 | 0%, 20%, 50%, 80%, 100% { 8 | @include transform(translateY(0px)); 9 | } 10 | 40% { 11 | @include transform(translateY(-30px)); 12 | } 13 | 60% { 14 | @include transform(translateY(-15px)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateInUpLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInUpLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInUpLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInUpLeft) { 8 | 0% { 9 | @include transform(rotate(90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateInUpRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInUpRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInUpRight $duration $function $delay $count $fill); 3 | @include transform-origin(right top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInUpRight) { 8 | 0% { 9 | @include transform(rotate(-90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateOutUpLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutUpLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutUpLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutUpLeft) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_shake.scss: -------------------------------------------------------------------------------- 1 | @mixin shake($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(shake $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(shake) { 7 | 0%, 100% { 8 | @include transform(translateX(0)); 9 | } 10 | 10%, 30%, 50%, 70%, 90% { 11 | @include transform(translateX(-6px)); 12 | } 13 | 20%, 40%, 60%, 80% { 14 | @include transform(translateX(6px)); 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateInDownLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInDownLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInDownLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInDownLeft) { 8 | 0% { 9 | @include transform(rotate(-90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateOutUpRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutUpRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutUpRight $duration $function $delay $count $fill); 3 | @include transform-origin(right top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutUpRight) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(-90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateInUpLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInUpLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInUpLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInUpLeft) { 8 | 0% { 9 | @include transform(rotate(90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateOutUpLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutUpLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutUpLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutUpLeft) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateInDownRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInDownRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInDownRight $duration $function $delay $count $fill); 3 | @include transform-origin(right bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInDownRight) { 8 | 0% { 9 | @include transform(rotate(90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateOutDownLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutDownLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutDownLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutDownLeft) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateInUpRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInUpRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInUpRight $duration $function $delay $count $fill); 3 | @include transform-origin(right top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInUpRight) { 8 | 0% { 9 | @include transform(rotate(-90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/angular/angular-csp.css: -------------------------------------------------------------------------------- 1 | /* Include this file in your html if you are using the CSP mode. */ 2 | 3 | @charset "UTF-8"; 4 | 5 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], 6 | .ng-cloak, .x-ng-cloak, 7 | .ng-hide { 8 | display: none !important; 9 | } 10 | 11 | ng\:form { 12 | display: block; 13 | } 14 | 15 | .ng-animate-block-transitions { 16 | transition:0s all!important; 17 | -webkit-transition:0s all!important; 18 | } 19 | 20 | /* show the element during a show/hide animation when the 21 | * animation is ongoing, but the .ng-hide class is active */ 22 | .ng-hide-add-active, .ng-hide-remove { 23 | display: block!important; 24 | } 25 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_rotateOutDownRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutDownRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutDownRight $duration $function $delay $count $fill); 3 | @include transform-origin(right bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutDownRight) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(-90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateInDownLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInDownLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInDownLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInDownLeft) { 8 | 0% { 9 | @include transform(rotate(-90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateOutUpRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutUpRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutUpRight $duration $function $delay $count $fill); 3 | @include transform-origin(right top); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutUpRight) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(-90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutUp) { 7 | 0% { 8 | @include transform(translateY(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateY(20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateY(-2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateInDownRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateInDownRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateInDownRight $duration $function $delay $count $fill); 3 | @include transform-origin(right bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateInDownRight) { 8 | 0% { 9 | @include transform(rotate(90deg)); 10 | opacity: 0; 11 | } 12 | 100% { 13 | @include transform(rotate(0)); 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateOutDownLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutDownLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutDownLeft $duration $function $delay $count $fill); 3 | @include transform-origin(left bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutDownLeft) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/bower_components/angular/angular-csp.css: -------------------------------------------------------------------------------- 1 | /* Include this file in your html if you are using the CSP mode. */ 2 | 3 | @charset "UTF-8"; 4 | 5 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], 6 | .ng-cloak, .x-ng-cloak, 7 | .ng-hide { 8 | display: none !important; 9 | } 10 | 11 | ng\:form { 12 | display: block; 13 | } 14 | 15 | .ng-animate-block-transitions { 16 | transition:0s all!important; 17 | -webkit-transition:0s all!important; 18 | } 19 | 20 | /* show the element during a show/hide animation when the 21 | * animation is ongoing, but the .ng-hide class is active */ 22 | .ng-hide-add-active, .ng-hide-remove { 23 | display: block!important; 24 | } 25 | -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_rotateOutDownRight.scss: -------------------------------------------------------------------------------- 1 | @mixin rotateOutDownRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(rotateOutDownRight $duration $function $delay $count $fill); 3 | @include transform-origin(right bottom); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(rotateOutDownRight) { 8 | 0% { 9 | @include transform(rotate(0)); 10 | opacity: 1; 11 | } 12 | 100% { 13 | @include transform(rotate(-90deg)); 14 | opacity: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutDown) { 7 | 0% { 8 | @include transform(translateY(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateY(-20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateY(2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutLeft) { 7 | 0% { 8 | @include transform(translateX(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateX(20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateX(-2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceOutUp.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutUp) { 7 | 0% { 8 | @include transform(translateY(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateY(20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateY(-2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutRight) { 7 | 0% { 8 | @include transform(translateX(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateX(-20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateX(2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceOutDown.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutDown) { 7 | 0% { 8 | @include transform(translateY(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateY(-20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateY(2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceOutLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutLeft) { 7 | 0% { 8 | @include transform(translateX(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateX(20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateX(-2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceOutRight.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOutRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOutRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOutRight) { 7 | 0% { 8 | @include transform(translateX(0)); 9 | } 10 | 20% { 11 | opacity: 1; 12 | @include transform(translateX(-20px)); 13 | } 14 | 100% { 15 | opacity: 0; 16 | @include transform(translateX(2000px)); 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /bower_components/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "", 4 | "description": "HTML enhanced for web apps", 5 | "main": "angular.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "client-side" 18 | ], 19 | "author": "Angular Core Team ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/angular/angular.js/issues" 23 | }, 24 | "homepage": "http://angularjs.org" 25 | } 26 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceOut.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOut) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 25% { 11 | @include transform(scale(.95)); 12 | } 13 | 50% { 14 | opacity: 1; 15 | @include transform(scale(1.1)); 16 | } 17 | 100% { 18 | opacity: 0; 19 | @include transform(scale(.3)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "", 4 | "description": "HTML enhanced for web apps", 5 | "main": "angular.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "client-side" 18 | ], 19 | "author": "Angular Core Team ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/angular/angular.js/issues" 23 | }, 24 | "homepage": "http://angularjs.org" 25 | } 26 | -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceOut.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceOut($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceOut $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceOut) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 25% { 11 | @include transform(scale(.95)); 12 | } 13 | 50% { 14 | opacity: 1; 15 | @include transform(scale(1.1)); 16 | } 17 | 100% { 18 | opacity: 0; 19 | @include transform(scale(.3)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceIn.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceIn) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(scale(.3)); 10 | } 11 | 50% { 12 | opacity: 1; 13 | @include transform(scale(1.05)); 14 | } 15 | 70% { 16 | @include transform(scale(.9)); 17 | } 18 | 100% { 19 | @include transform(scale(1)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceIn.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceIn) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(scale(.3)); 10 | } 11 | 50% { 12 | opacity: 1; 13 | @include transform(scale(1.05)); 14 | } 15 | 70% { 16 | @include transform(scale(.9)); 17 | } 18 | 100% { 19 | @include transform(scale(1)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateY(-30px)); 14 | } 15 | 80% { 16 | @include transform(translateY(10px)); 17 | } 18 | 100% { 19 | @include transform(translateY(0px)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateX(30px)); 14 | } 15 | 80% { 16 | @include transform(translateX(-10px)); 17 | } 18 | 100% { 19 | @include transform(translateX(0)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/angular-sanitize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sanitize", 3 | "version": "1.3.14", 4 | "description": "AngularJS module for sanitizing HTML", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "html", 18 | "client-side" 19 | ], 20 | "author": "Angular Core Team ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/angular/angular.js/issues" 24 | }, 25 | "homepage": "http://angularjs.org" 26 | } 27 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateY(30px)); 14 | } 15 | 80% { 16 | @include transform(translateY(-10px)); 17 | } 18 | 100% { 19 | @include transform(translateY(0px)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_bounceInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateX(-30px)); 14 | } 15 | 80% { 16 | @include transform(translateX(10px)); 17 | } 18 | 100% { 19 | @include transform(translateX(0)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceInUp.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInUp($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInUp $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInUp) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateY(-30px)); 14 | } 15 | 80% { 16 | @include transform(translateY(10px)); 17 | } 18 | 100% { 19 | @include transform(translateY(0px)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceInDown.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInDown($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInDown $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInDown) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateY(-2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateY(30px)); 14 | } 15 | 80% { 16 | @include transform(translateY(-10px)); 17 | } 18 | 100% { 19 | @include transform(translateY(0px)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceInLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInLeft) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(-2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateX(30px)); 14 | } 15 | 80% { 16 | @include transform(translateX(-10px)); 17 | } 18 | 100% { 19 | @include transform(translateX(0)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/angular-mocks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mocks", 3 | "version": "", 4 | "description": "AngularJS mocks for testing", 5 | "main": "angular-mocks.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "mocks", 18 | "testing", 19 | "client-side" 20 | ], 21 | "author": "Angular Core Team ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/angular/angular.js/issues" 25 | }, 26 | "homepage": "http://angularjs.org" 27 | } 28 | -------------------------------------------------------------------------------- /example/bower_components/angular-sanitize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-sanitize", 3 | "version": "1.3.14", 4 | "description": "AngularJS module for sanitizing HTML", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "html", 18 | "client-side" 19 | ], 20 | "author": "Angular Core Team ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/angular/angular.js/issues" 24 | }, 25 | "homepage": "http://angularjs.org" 26 | } 27 | -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_bounceInRight.scss: -------------------------------------------------------------------------------- 1 | @mixin bounceInRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(bounceInRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(bounceInRight) { 7 | 0% { 8 | opacity: 0; 9 | @include transform(translateX(2000px)); 10 | } 11 | 60% { 12 | opacity: 1; 13 | @include transform(translateX(-30px)); 14 | } 15 | 80% { 16 | @include transform(translateX(10px)); 17 | } 18 | 100% { 19 | @include transform(translateX(0)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/angular-mocks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-mocks", 3 | "version": "", 4 | "description": "AngularJS mocks for testing", 5 | "main": "angular-mocks.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/angular/angular.js.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "framework", 16 | "browser", 17 | "mocks", 18 | "testing", 19 | "client-side" 20 | ], 21 | "author": "Angular Core Team ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/angular/angular.js/issues" 25 | }, 26 | "homepage": "http://angularjs.org" 27 | } 28 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_swing.scss: -------------------------------------------------------------------------------- 1 | @mixin swing($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(swing $duration $function $delay $count $fill); 3 | @include transform-origin(top center); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(swing) { 8 | 20% { 9 | @include transform(rotate(15deg)); 10 | } 11 | 40% { 12 | @include transform(rotate(-10deg)); 13 | } 14 | 60% { 15 | @include transform(rotate(5deg)); 16 | } 17 | 80% { 18 | @include transform(rotate(-5deg)); 19 | } 20 | 100% { 21 | @include transform(rotate(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_swing.scss: -------------------------------------------------------------------------------- 1 | @mixin swing($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(swing $duration $function $delay $count $fill); 3 | @include transform-origin(top center); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(swing) { 8 | 20% { 9 | @include transform(rotate(15deg)); 10 | } 11 | 40% { 12 | @include transform(rotate(-10deg)); 13 | } 14 | 60% { 15 | @include transform(rotate(5deg)); 16 | } 17 | 80% { 18 | @include transform(rotate(-5deg)); 19 | } 20 | 100% { 21 | @include transform(rotate(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_tada.scss: -------------------------------------------------------------------------------- 1 | @mixin tada($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(tada $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(tada) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 10%, 20% { 11 | @include transform(scale(0.9) rotate(-3deg)); 12 | } 13 | 30%, 50%, 70%, 90% { 14 | @include transform(scale(1.1) rotate(3deg)); 15 | } 16 | 40%, 60%, 80% { 17 | @include transform(scale(1.1) rotate(-3deg)); 18 | } 19 | 100% { 20 | @include transform(scale(1) rotate(0)); 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_lightSpeedIn.scss: -------------------------------------------------------------------------------- 1 | @mixin lightSpeedIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(lightSpeedIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(lightSpeedIn) { 7 | 0% { 8 | @include transform(translateX(2000px) skewX(-30deg)); 9 | opacity: 0; 10 | } 11 | 60% { 12 | @include transform(translateX(-50px) skewX(30deg)); 13 | opacity: 1; 14 | } 15 | 80% { 16 | @include transform(translateX(0) skewX(-15deg)); 17 | } 18 | 100% { 19 | @include transform(translateX(0) skewX(0deg)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_tada.scss: -------------------------------------------------------------------------------- 1 | @mixin tada($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(tada $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(tada) { 7 | 0% { 8 | @include transform(scale(1)); 9 | } 10 | 10%, 20% { 11 | @include transform(scale(0.9) rotate(-3deg)); 12 | } 13 | 30%, 50%, 70%, 90% { 14 | @include transform(scale(1.1) rotate(3deg)); 15 | } 16 | 40%, 60%, 80% { 17 | @include transform(scale(1.1) rotate(-3deg)); 18 | } 19 | 100% { 20 | @include transform(scale(1) rotate(0)); 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_lightSpeedIn.scss: -------------------------------------------------------------------------------- 1 | @mixin lightSpeedIn($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(lightSpeedIn $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(lightSpeedIn) { 7 | 0% { 8 | @include transform(translateX(2000px) skewX(-30deg)); 9 | opacity: 0; 10 | } 11 | 60% { 12 | @include transform(translateX(-50px) skewX(30deg)); 13 | opacity: 1; 14 | } 15 | 80% { 16 | @include transform(translateX(0) skewX(-15deg)); 17 | } 18 | 100% { 19 | @include transform(translateX(0) skewX(0deg)); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_wobble.scss: -------------------------------------------------------------------------------- 1 | @mixin wobble($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(wobble $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(wobble) { 7 | 0% {@include transform(translateX(0%));} 8 | 15% {@include transform(translateX(-25%) rotate(-5deg));} 9 | 30% {@include transform(translateX(20%) rotate(3deg));} 10 | 45% {@include transform(translateX(-15%) rotate(-3deg));} 11 | 60% {@include transform(translateX(10%) rotate(2deg));} 12 | 75% {@include transform(translateX(-5%) rotate(-1deg));} 13 | 100% {@include transform(translateX(0%));} 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_wobble.scss: -------------------------------------------------------------------------------- 1 | @mixin wobble($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(wobble $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(wobble) { 7 | 0% {@include transform(translateX(0%));} 8 | 15% {@include transform(translateX(-25%) rotate(-5deg));} 9 | 30% {@include transform(translateX(20%) rotate(3deg));} 10 | 45% {@include transform(translateX(-15%) rotate(-3deg));} 11 | 60% {@include transform(translateX(10%) rotate(2deg));} 12 | 75% {@include transform(translateX(-5%) rotate(-1deg));} 13 | 100% {@include transform(translateX(0%));} 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /example/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('app', ['ngNotificationsBar', 'ngSanitize']); 2 | app.config(['notificationsConfigProvider', function(notificationsConfigProvider){ 3 | notificationsConfigProvider.setHideDelay(3000); 4 | notificationsConfigProvider.setAutoHide(true); 5 | notificationsConfigProvider.setAcceptHTML(true); 6 | }]); 7 | 8 | app.controller('main', function ($scope, notifications) { 9 | $scope.showError = function () { 10 | notifications.showError('Oops! Something bad just happend!'); 11 | }; 12 | 13 | $scope.showWarning = function () { 14 | notifications.showWarning('Hey! Take a look here..'); 15 | }; 16 | 17 | $scope.showSuccess = function () { 18 | notifications.showSuccess('Congrats! Life is great!'); 19 | }; 20 | 21 | $scope.closeAll = function () { 22 | notifications.closeAll(); 23 | }; 24 | }); 25 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_flipInX.scss: -------------------------------------------------------------------------------- 1 | @mixin flipInX($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipInX $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipInX) { 7 | 0% { 8 | @include transform(perspective(400px) rotateX(90deg)); 9 | opacity: 0; 10 | } 11 | 40% { 12 | @include transform(perspective(400px) rotateX(-10deg)); 13 | animation-timing-function: ease-out; 14 | } 15 | 70% { 16 | @include transform(perspective(400px) rotateX(10deg)); 17 | animation-timing-function: ease-in; 18 | opacity: 1; 19 | } 20 | 100% { 21 | @include transform(perspective(400px) rotateX(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_flipInY.scss: -------------------------------------------------------------------------------- 1 | @mixin flipInY($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipInY $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipInY) { 7 | 0% { 8 | @include transform(perspective(400px) rotateY(90deg)); 9 | opacity: 0; 10 | } 11 | 40% { 12 | @include transform(perspective(400px) rotateY(-10deg)); 13 | animation-timing-function: ease-out; 14 | } 15 | 70% { 16 | @include transform(perspective(400px) rotateY(10deg)); 17 | animation-timing-function: ease-in; 18 | opacity: 1; 19 | } 20 | 100% { 21 | @include transform(perspective(400px) rotateY(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_flipInX.scss: -------------------------------------------------------------------------------- 1 | @mixin flipInX($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipInX $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipInX) { 7 | 0% { 8 | @include transform(perspective(400px) rotateX(90deg)); 9 | opacity: 0; 10 | } 11 | 40% { 12 | @include transform(perspective(400px) rotateX(-10deg)); 13 | animation-timing-function: ease-out; 14 | } 15 | 70% { 16 | @include transform(perspective(400px) rotateX(10deg)); 17 | animation-timing-function: ease-in; 18 | opacity: 1; 19 | } 20 | 100% { 21 | @include transform(perspective(400px) rotateX(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_flipInY.scss: -------------------------------------------------------------------------------- 1 | @mixin flipInY($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(flipInY $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(flipInY) { 7 | 0% { 8 | @include transform(perspective(400px) rotateY(90deg)); 9 | opacity: 0; 10 | } 11 | 40% { 12 | @include transform(perspective(400px) rotateY(-10deg)); 13 | animation-timing-function: ease-out; 14 | } 15 | 70% { 16 | @include transform(perspective(400px) rotateY(10deg)); 17 | animation-timing-function: ease-in; 18 | opacity: 1; 19 | } 20 | 100% { 21 | @include transform(perspective(400px) rotateY(0deg)); 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_wiggle.scss: -------------------------------------------------------------------------------- 1 | @mixin wiggle($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(wiggle $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(wiggle) { 7 | 0% { @include transform(skewX(0deg)); } 8 | 10% { @include transform(skewX(-8deg)); } 9 | 20% { @include transform(skewX(7deg)); } 10 | 30% { @include transform(skewX(-6deg)); } 11 | 40% { @include transform(skewX(5deg)); } 12 | 50% { @include transform(skewX(-4deg)); } 13 | 60% { @include transform(skewX(3deg)); } 14 | 70% { @include transform(skewX(-2deg)); } 15 | 80% { @include transform(skewX(1deg)); } 16 | 90% { @include transform(skewX(0deg)); } 17 | 100% { @include transform(skewX(0deg)); } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_wiggle.scss: -------------------------------------------------------------------------------- 1 | @mixin wiggle($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(wiggle $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(wiggle) { 7 | 0% { @include transform(skewX(0deg)); } 8 | 10% { @include transform(skewX(-8deg)); } 9 | 20% { @include transform(skewX(7deg)); } 10 | 30% { @include transform(skewX(-6deg)); } 11 | 40% { @include transform(skewX(5deg)); } 12 | 50% { @include transform(skewX(-4deg)); } 13 | 60% { @include transform(skewX(3deg)); } 14 | 70% { @include transform(skewX(-2deg)); } 15 | 80% { @include transform(skewX(1deg)); } 16 | 90% { @include transform(skewX(0deg)); } 17 | 100% { @include transform(skewX(0deg)); } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-notifications-bar", 3 | "version": "0.0.15", 4 | "homepage": "https://github.com/alexbeletsky/ng-notifications-bar", 5 | "authors": [ 6 | "alexanderbeletsky " 7 | ], 8 | "description": "Angular.js component for stylish and flexible application notifications.", 9 | "main": ["dist/ngNotificationsBar.min.js", "dist/ngNotificationsBar.min.css"], 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "angular", 15 | "angularjs", 16 | "notifications", 17 | "bar", 18 | "component" 19 | ], 20 | "license": "MIT", 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests" 27 | ], 28 | "dependencies": { 29 | "angular": ">= 1.2.25", 30 | "hmps-animate-scss": "~1.0.1", 31 | "angular-sanitize": ">= 1.3.12" 32 | }, 33 | "devDependencies": { 34 | "angular-mocks": ">= 1.2.25" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_flip.scss: -------------------------------------------------------------------------------- 1 | @mixin flip($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include transform-style(preserve-3d); 3 | @include animation(flip $duration $function $delay $count $fill); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(flip) { 8 | 0% { 9 | @include transform(perspective(400px) rotateY(0)); 10 | animation-timing-function: ease-out; 11 | } 12 | 40% { 13 | @include transform(perspective(400px) translateZ(150px) rotateY(170deg)); 14 | animation-timing-function: ease-out; 15 | } 16 | 50% { 17 | @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)); 18 | animation-timing-function: ease-in; 19 | } 20 | 80% { 21 | @include transform(perspective(400px) rotateY(360deg) scale(.95)); 22 | animation-timing-function: ease-in; 23 | } 24 | 100% { 25 | @include transform(perspective(400px) scale(1)); 26 | animation-timing-function: ease-in; 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_flip.scss: -------------------------------------------------------------------------------- 1 | @mixin flip($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include transform-style(preserve-3d); 3 | @include animation(flip $duration $function $delay $count $fill); 4 | @include visibility($visibility); 5 | 6 | @at-root { 7 | @include keyframes(flip) { 8 | 0% { 9 | @include transform(perspective(400px) rotateY(0)); 10 | animation-timing-function: ease-out; 11 | } 12 | 40% { 13 | @include transform(perspective(400px) translateZ(150px) rotateY(170deg)); 14 | animation-timing-function: ease-out; 15 | } 16 | 50% { 17 | @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)); 18 | animation-timing-function: ease-in; 19 | } 20 | 80% { 21 | @include transform(perspective(400px) rotateY(360deg) scale(.95)); 22 | animation-timing-function: ease-in; 23 | } 24 | 100% { 25 | @include transform(perspective(400px) scale(1)); 26 | animation-timing-function: ease-in; 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /sass/ngNotificationsBar.scss: -------------------------------------------------------------------------------- 1 | @import "../bower_components/hmps-animate-scss/animate.scss"; 2 | 3 | .notifications { 4 | .notifications-container { 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | min-height: 60px; 9 | line-height: 60px; 10 | width: 100%; 11 | z-index: 1000; 12 | } 13 | 14 | .notification { 15 | position: relative; 16 | @include fadeInDown(); 17 | text-align: center; 18 | font-size: 18px; 19 | color: #fff; 20 | } 21 | 22 | .message { 23 | padding: 0 12px; 24 | } 25 | 26 | .error { 27 | @extend .notification; 28 | background-color: #F64747; 29 | border-bottom: 1px solid #f31515; 30 | } 31 | 32 | .success { 33 | @extend .notification; 34 | background-color: #03C9A9; 35 | border-bottom: 1px solid #02aa8f; 36 | } 37 | 38 | .warning { 39 | @extend .notification; 40 | background-color: #F7CA18; 41 | border-bottom: 1px solid #e7ba08; 42 | } 43 | 44 | .info { 45 | @extend .notification; 46 | background-color: #0c6997; 47 | border-bottom: 1px solid #0c6997; 48 | } 49 | 50 | .close-click { 51 | font-size: 12px; 52 | cursor: pointer; 53 | padding: 10px; 54 | margin: 0 auto; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_hingeLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin hingeLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(hingeLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(hingeLeft) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | @include transform-origin(top left); 10 | animation-timing-function: ease-in-out; 11 | } 12 | 20%, 60% { 13 | @include transform(rotate(80deg)); 14 | @include transform-origin(top left); 15 | animation-timing-function: ease-in-out; 16 | } 17 | 40% { 18 | @include transform(rotate(60deg)); 19 | @include transform-origin(top left); 20 | animation-timing-function: ease-in-out; 21 | } 22 | 80% { 23 | @include transform(rotate(60deg) translateY(0)); 24 | opacity: 1; 25 | @include transform-origin(top left); 26 | animation-timing-function: ease-in-out; 27 | } 28 | 100% { 29 | @include transform(translateY(700px)); 30 | opacity: 0; 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_hingeLeft.scss: -------------------------------------------------------------------------------- 1 | @mixin hingeLeft($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(hingeLeft $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(hingeLeft) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | @include transform-origin(top left); 10 | animation-timing-function: ease-in-out; 11 | } 12 | 20%, 60% { 13 | @include transform(rotate(80deg)); 14 | @include transform-origin(top left); 15 | animation-timing-function: ease-in-out; 16 | } 17 | 40% { 18 | @include transform(rotate(60deg)); 19 | @include transform-origin(top left); 20 | animation-timing-function: ease-in-out; 21 | } 22 | 80% { 23 | @include transform(rotate(60deg) translateY(0)); 24 | opacity: 1; 25 | @include transform-origin(top left); 26 | animation-timing-function: ease-in-out; 27 | } 28 | 100% { 29 | @include transform(translateY(700px)); 30 | opacity: 0; 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_hingeRight.scss: -------------------------------------------------------------------------------- 1 | @mixin hingeRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(hingeRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(hingeRight) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | @include transform-origin(top right); 10 | animation-timing-function: ease-in-out; 11 | } 12 | 20%, 60% { 13 | @include transform(rotate(-80deg)); 14 | @include transform-origin(top right); 15 | animation-timing-function: ease-in-out; 16 | } 17 | 40% { 18 | @include transform(rotate(-60deg)); 19 | @include transform-origin(top right); 20 | animation-timing-function: ease-in-out; 21 | } 22 | 80% { 23 | @include transform(rotate(-60deg) translateY(0)); 24 | opacity: 1; 25 | @include transform-origin(top right); 26 | animation-timing-function: ease-in-out; 27 | } 28 | 100% { 29 | @include transform(translateY(700px)); 30 | opacity: 0; 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_hingeRight.scss: -------------------------------------------------------------------------------- 1 | @mixin hingeRight($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 2 | @include animation(hingeRight $duration $function $delay $count $fill); 3 | @include visibility($visibility); 4 | 5 | @at-root { 6 | @include keyframes(hingeRight) { 7 | 0% { 8 | @include transform(rotate(0)); 9 | @include transform-origin(top right); 10 | animation-timing-function: ease-in-out; 11 | } 12 | 20%, 60% { 13 | @include transform(rotate(-80deg)); 14 | @include transform-origin(top right); 15 | animation-timing-function: ease-in-out; 16 | } 17 | 40% { 18 | @include transform(rotate(-60deg)); 19 | @include transform-origin(top right); 20 | animation-timing-function: ease-in-out; 21 | } 22 | 80% { 23 | @include transform(rotate(-60deg) translateY(0)); 24 | opacity: 1; 25 | @include transform-origin(top right); 26 | animation-timing-function: ease-in-out; 27 | } 28 | 100% { 29 | @include transform(translateY(700px)); 30 | opacity: 0; 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "camelcase": true, 4 | "curly": true, 5 | "eqeqeq": true, 6 | "es3": false, 7 | "forin": true, 8 | "freeze": true, 9 | "immed": true, 10 | "indent": 4, 11 | "latedef": "nofunc", 12 | "newcap": true, 13 | "noarg": true, 14 | "noempty": true, 15 | "nonbsp": true, 16 | "nonew": true, 17 | "plusplus": false, 18 | "quotmark": "single", 19 | "undef": true, 20 | "unused": false, 21 | "strict": false, 22 | "maxparams": 10, 23 | "maxdepth": 5, 24 | "maxstatements": 40, 25 | "maxcomplexity": 8, 26 | "maxlen": 120, 27 | 28 | "asi": false, 29 | "boss": false, 30 | "debug": false, 31 | "eqnull": true, 32 | "esnext": false, 33 | "evil": false, 34 | "expr": false, 35 | "funcscope": false, 36 | "globalstrict": false, 37 | "iterator": false, 38 | "lastsemic": false, 39 | "laxbreak": false, 40 | "laxcomma": false, 41 | "loopfunc": true, 42 | "maxerr": false, 43 | "moz": false, 44 | "notypeof": false, 45 | "proto": false, 46 | "scripturl": false, 47 | "shadow": false, 48 | "sub": true, 49 | "supernew": false, 50 | "validthis": false, 51 | "noyield": false, 52 | "multistr": true, 53 | 54 | "browser": true, 55 | "node": true, 56 | 57 | "globals": { 58 | "angular": false, 59 | "$": false, 60 | "define" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-notifications-bar", 3 | "version": "0.0.16", 4 | "description": "Angular.js component for stylish and flexible application notifications.", 5 | "main": "src/ngNotificationsBar.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alexbeletsky/ng-notifications-bar.git" 15 | }, 16 | "keywords": [ 17 | "angular", 18 | "angularjs", 19 | "notifications", 20 | "bar", 21 | "component" 22 | ], 23 | "author": "alexander.beletsky@gmail.com", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/alexbeletsky/ng-notifications-bar/issues" 27 | }, 28 | "homepage": "http://beletsky.net/ng-notifications-bar/", 29 | "devDependencies": { 30 | "grunt": "^0.4.5", 31 | "grunt-shell": "^1.1.1", 32 | "grunt-wiredep": "^2.0.0", 33 | "grunt-contrib-compass": "^1.0.1", 34 | "grunt-contrib-connect": "^0.8.0", 35 | "grunt-contrib-copy": "^0.8.0", 36 | "grunt-contrib-cssmin": "^0.10.0", 37 | "grunt-contrib-jshint": "^0.10.0", 38 | "grunt-contrib-uglify": "^0.6.0", 39 | "grunt-contrib-watch": "^0.6.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /dist/ngNotificationsBar.min.css: -------------------------------------------------------------------------------- 1 | /*! ng-notifications-bar - v0.0.16 (http://beletsky.net/ng-notifications-bar/) */ 2 | 3 | body{-webkit-backface-visibility:hidden}.notifications .notifications-container{position:fixed;top:0;left:0;min-height:60px;line-height:60px;width:100%;z-index:1000}.notifications .error,.notifications .info,.notifications .notification,.notifications .success,.notifications .warning{position:relative;-webkit-animation:fadeInDown 1s ease .2s 1 both;-moz-animation:fadeInDown 1s ease .2s 1 both;animation:fadeInDown 1s ease .2s 1 both;-webkit-animation-backface-visibility:hidden;-moz-animation-backface-visibility:hidden;-ms-animation-backface-visibility:hidden;-o-animation-backface-visibility:hidden;animation-backface-visibility:hidden;text-align:center;font-size:18px;color:#fff}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.notifications .message{padding:0 12px}.notifications .error{background-color:#F64747;border-bottom:1px solid #f31515}.notifications .success{background-color:#03C9A9;border-bottom:1px solid #02aa8f}.notifications .warning{background-color:#F7CA18;border-bottom:1px solid #e7ba08}.notifications .info{background-color:#0c6997;border-bottom:1px solid #0c6997}.notifications .close-click{font-size:inherit;cursor:pointer;padding:10px;margin:0 auto} -------------------------------------------------------------------------------- /example/dist/ngNotificationsBar.min.css: -------------------------------------------------------------------------------- 1 | /*! ng-notifications-bar - v0.0.16 (http://beletsky.net/ng-notifications-bar/) */ 2 | 3 | body{-webkit-backface-visibility:hidden}.notifications .notifications-container{position:fixed;top:0;left:0;min-height:60px;line-height:60px;width:100%;z-index:1000}.notifications .error,.notifications .info,.notifications .notification,.notifications .success,.notifications .warning{position:relative;-webkit-animation:fadeInDown 1s ease .2s 1 both;-moz-animation:fadeInDown 1s ease .2s 1 both;animation:fadeInDown 1s ease .2s 1 both;-webkit-animation-backface-visibility:hidden;-moz-animation-backface-visibility:hidden;-ms-animation-backface-visibility:hidden;-o-animation-backface-visibility:hidden;animation-backface-visibility:hidden;text-align:center;font-size:18px;color:#fff}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.notifications .message{padding:0 12px}.notifications .error{background-color:#F64747;border-bottom:1px solid #f31515}.notifications .success{background-color:#03C9A9;border-bottom:1px solid #02aa8f}.notifications .warning{background-color:#F7CA18;border-bottom:1px solid #e7ba08}.notifications .info{background-color:#0c6997;border-bottom:1px solid #0c6997}.notifications .close-click{font-size:12px;cursor:pointer;padding:10px;margin:0 auto} -------------------------------------------------------------------------------- /bower_components/angular-mocks/README.md: -------------------------------------------------------------------------------- 1 | # bower-angular-mocks 2 | 3 | This repo is for distribution on `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js/tree/master/src/ngMock). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | Install with `bower`: 10 | 11 | ```shell 12 | bower install angular-mocks 13 | ``` 14 | 15 | ## Documentation 16 | 17 | Documentation is available on the 18 | [AngularJS docs site](http://docs.angularjs.org/guide/dev_guide.unit-testing). 19 | 20 | ## License 21 | 22 | The MIT License 23 | 24 | Copyright (c) 2010-2012 Google, Inc. http://angularjs.org 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. 43 | -------------------------------------------------------------------------------- /example/bower_components/angular-mocks/README.md: -------------------------------------------------------------------------------- 1 | # bower-angular-mocks 2 | 3 | This repo is for distribution on `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js/tree/master/src/ngMock). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | Install with `bower`: 10 | 11 | ```shell 12 | bower install angular-mocks 13 | ``` 14 | 15 | ## Documentation 16 | 17 | Documentation is available on the 18 | [AngularJS docs site](http://docs.angularjs.org/guide/dev_guide.unit-testing). 19 | 20 | ## License 21 | 22 | The MIT License 23 | 24 | Copyright (c) 2010-2012 Google, Inc. http://angularjs.org 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. 43 | -------------------------------------------------------------------------------- /bower_components/angular/README.md: -------------------------------------------------------------------------------- 1 | # bower-angular 2 | 3 | This repo is for distribution on `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | Install with `bower`: 10 | 11 | ```shell 12 | bower install angular 13 | ``` 14 | 15 | Add a ` 19 | ``` 20 | 21 | ## Documentation 22 | 23 | Documentation is available on the 24 | [AngularJS docs site](http://docs.angularjs.org/). 25 | 26 | ## License 27 | 28 | The MIT License 29 | 30 | Copyright (c) 2010-2012 Google, Inc. http://angularjs.org 31 | 32 | Permission is hereby granted, free of charge, to any person obtaining a copy 33 | of this software and associated documentation files (the "Software"), to deal 34 | in the Software without restriction, including without limitation the rights 35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 36 | copies of the Software, and to permit persons to whom the Software is 37 | furnished to do so, subject to the following conditions: 38 | 39 | The above copyright notice and this permission notice shall be included in 40 | all copies or substantial portions of the Software. 41 | 42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 48 | THE SOFTWARE. 49 | -------------------------------------------------------------------------------- /example/bower_components/angular/README.md: -------------------------------------------------------------------------------- 1 | # bower-angular 2 | 3 | This repo is for distribution on `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | Install with `bower`: 10 | 11 | ```shell 12 | bower install angular 13 | ``` 14 | 15 | Add a ` 19 | ``` 20 | 21 | ## Documentation 22 | 23 | Documentation is available on the 24 | [AngularJS docs site](http://docs.angularjs.org/). 25 | 26 | ## License 27 | 28 | The MIT License 29 | 30 | Copyright (c) 2010-2012 Google, Inc. http://angularjs.org 31 | 32 | Permission is hereby granted, free of charge, to any person obtaining a copy 33 | of this software and associated documentation files (the "Software"), to deal 34 | in the Software without restriction, including without limitation the rights 35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 36 | copies of the Software, and to permit persons to whom the Software is 37 | furnished to do so, subject to the following conditions: 38 | 39 | The above copyright notice and this permission notice shall be included in 40 | all copies or substantial portions of the Software. 41 | 42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 48 | THE SOFTWARE. 49 | -------------------------------------------------------------------------------- /bower_components/angular-sanitize/README.md: -------------------------------------------------------------------------------- 1 | # packaged angular-sanitize 2 | 3 | This repo is for distribution on `npm` and `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js/tree/master/src/ngSanitize). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | You can install this package either with `npm` or with `bower`. 10 | 11 | ### npm 12 | 13 | ```shell 14 | npm install angular-sanitize 15 | ``` 16 | 17 | Then add `ngSanitize` as a dependency for your app: 18 | 19 | ```javascript 20 | angular.module('myApp', [require('angular-sanitize')]); 21 | ``` 22 | 23 | ### bower 24 | 25 | ```shell 26 | bower install angular-sanitize 27 | ``` 28 | 29 | Add a ` 33 | ``` 34 | 35 | Then add `ngSanitize` as a dependency for your app: 36 | 37 | ```javascript 38 | angular.module('myApp', ['ngSanitize']); 39 | ``` 40 | 41 | ## Documentation 42 | 43 | Documentation is available on the 44 | [AngularJS docs site](http://docs.angularjs.org/api/ngSanitize). 45 | 46 | ## License 47 | 48 | The MIT License 49 | 50 | Copyright (c) 2010-2015 Google, Inc. http://angularjs.org 51 | 52 | Permission is hereby granted, free of charge, to any person obtaining a copy 53 | of this software and associated documentation files (the "Software"), to deal 54 | in the Software without restriction, including without limitation the rights 55 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 56 | copies of the Software, and to permit persons to whom the Software is 57 | furnished to do so, subject to the following conditions: 58 | 59 | The above copyright notice and this permission notice shall be included in 60 | all copies or substantial portions of the Software. 61 | 62 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 63 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 64 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 65 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 66 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 67 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 68 | THE SOFTWARE. 69 | -------------------------------------------------------------------------------- /example/bower_components/angular-sanitize/README.md: -------------------------------------------------------------------------------- 1 | # packaged angular-sanitize 2 | 3 | This repo is for distribution on `npm` and `bower`. The source for this module is in the 4 | [main AngularJS repo](https://github.com/angular/angular.js/tree/master/src/ngSanitize). 5 | Please file issues and pull requests against that repo. 6 | 7 | ## Install 8 | 9 | You can install this package either with `npm` or with `bower`. 10 | 11 | ### npm 12 | 13 | ```shell 14 | npm install angular-sanitize 15 | ``` 16 | 17 | Then add `ngSanitize` as a dependency for your app: 18 | 19 | ```javascript 20 | angular.module('myApp', [require('angular-sanitize')]); 21 | ``` 22 | 23 | ### bower 24 | 25 | ```shell 26 | bower install angular-sanitize 27 | ``` 28 | 29 | Add a ` 33 | ``` 34 | 35 | Then add `ngSanitize` as a dependency for your app: 36 | 37 | ```javascript 38 | angular.module('myApp', ['ngSanitize']); 39 | ``` 40 | 41 | ## Documentation 42 | 43 | Documentation is available on the 44 | [AngularJS docs site](http://docs.angularjs.org/api/ngSanitize). 45 | 46 | ## License 47 | 48 | The MIT License 49 | 50 | Copyright (c) 2010-2015 Google, Inc. http://angularjs.org 51 | 52 | Permission is hereby granted, free of charge, to any person obtaining a copy 53 | of this software and associated documentation files (the "Software"), to deal 54 | in the Software without restriction, including without limitation the rights 55 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 56 | copies of the Software, and to permit persons to whom the Software is 57 | furnished to do so, subject to the following conditions: 58 | 59 | The above copyright notice and this permission notice shall be included in 60 | all copies or substantial portions of the Software. 61 | 62 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 63 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 64 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 65 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 66 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 67 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 68 | THE SOFTWARE. 69 | -------------------------------------------------------------------------------- /example/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Titillium Web', sans-serif; 3 | font-size: 15px; 4 | width: 100%; 5 | overflow-x: hidden; 6 | overflow-y: scroll; 7 | } 8 | 9 | a { 10 | color: #049372; 11 | font-weight: 700; 12 | text-decoration: none; 13 | } 14 | 15 | header { 16 | text-align: center; 17 | padding: 16px 0; 18 | } 19 | 20 | header h1 { 21 | font-size: 2.3em; 22 | font-family: 'Merriweather'; 23 | font-weight: 900; 24 | } 25 | 26 | header p.info { 27 | font-size: 18px; 28 | } 29 | 30 | section.buttons { 31 | text-align: center; 32 | padding: 30px 0; 33 | } 34 | 35 | section.buttons .hide { 36 | margin-top: 16px; 37 | } 38 | 39 | section.example { 40 | max-width: 560px; 41 | margin: 26px auto; 42 | background-color: #434c54; 43 | color: #fff; 44 | padding: 6px 24px; 45 | border-radius: 6px; 46 | } 47 | 48 | pre.code { 49 | white-space: pre-wrap; 50 | font-size: 11px; 51 | font-family: 'Source Code', 'Source Code Pro', monospace; 52 | } 53 | 54 | pre.code .kwrd, pre.code .str { 55 | color: #86E2D5; 56 | } 57 | 58 | pre.code .rem { 59 | color: #E4F1FE; 60 | } 61 | 62 | footer { 63 | text-align: center; 64 | } 65 | 66 | .btn { 67 | padding: 16px; 68 | margin: 0 14px; 69 | border: 0; 70 | width: 160px; 71 | } 72 | 73 | .btn:focus { 74 | outline: 0; 75 | } 76 | 77 | .btn-error { 78 | background-color: #F64747; 79 | color: #fff; 80 | } 81 | 82 | .btn-warning { 83 | background-color: #F7CA18; 84 | color: #fff; 85 | } 86 | 87 | .btn-success { 88 | background-color: #03C9A9; 89 | color: #fff; 90 | } 91 | 92 | .github-ribbon { 93 | font-family: sans-serif; 94 | display: block; 95 | background: #ABB7B7; 96 | color: #fff; 97 | font-size: 12px; 98 | padding: 12px 50px; 99 | position: absolute; 100 | top: 38px; 101 | right: -45px; 102 | text-decoration: none; 103 | text-transform: uppercase; 104 | -webkit-transform: rotate(45deg); 105 | -ms-transform: rotate(45deg); 106 | transform: rotate(45deg); 107 | z-index: 1; 108 | } 109 | 110 | @font-face { 111 | font-family: 'Glyphicons Halflings'; 112 | src: url("../fonts/glyphicons-halflings-regular.eot"); 113 | src: url("../fonts/glyphicons-halflings-regular.eot") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"); 114 | } 115 | 116 | .glyphicon { 117 | position: relative; 118 | top: 1px; 119 | display: inline-block; 120 | font-family: 'Glyphicons Halflings'; 121 | font-style: normal; 122 | font-weight: normal; 123 | line-height: 1; 124 | -webkit-font-smoothing: antialiased; 125 | -moz-osx-font-smoothing: grayscale; 126 | } 127 | 128 | .glyphicon-remove:before { 129 | content: "\e014"; 130 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | uglify: { 5 | options: { 6 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %> (<%= pkg.homepage %>) */\n', 7 | mangle: false 8 | }, 9 | main: { 10 | files: { 11 | './dist/ngNotificationsBar.min.js': ['./src/ngNotificationsBar.js'] 12 | } 13 | } 14 | }, 15 | jshint: { 16 | files: ['src/*.js'] 17 | }, 18 | compass: { 19 | dev: { 20 | options: { 21 | sassDir: 'sass', 22 | cssDir: 'css', 23 | } 24 | } 25 | }, 26 | cssmin: { 27 | options: { 28 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %> (<%= pkg.homepage %>) */\n' 29 | }, 30 | minify:{ 31 | files: { 32 | 'dist/ngNotificationsBar.min.css': ['css/ngNotificationsBar.css'] 33 | } 34 | } 35 | }, 36 | watch: { 37 | src: { 38 | files: 'src/*.js', 39 | tasks: ['uglify'], 40 | options: { 41 | livereload: true 42 | } 43 | }, 44 | sass: { 45 | files: 'sass/*.scss', 46 | tasks: ['compass', 'cssmin'], 47 | options: { 48 | livereload: true 49 | } 50 | }, 51 | html: { 52 | files: ['example/**/*.html', 'example/**/*.css'], 53 | options: { 54 | livereload: true 55 | } 56 | } 57 | }, 58 | connect: { 59 | example: { 60 | options: { 61 | port: 9002, 62 | open: { 63 | target: 'http://localhost:9002/example/index.html' 64 | } 65 | } 66 | } 67 | }, 68 | shell: { 69 | deploy: { 70 | command: 'git push origin `git subtree split --prefix example master`:gh-pages --force' 71 | } 72 | }, 73 | wiredep: { 74 | task: { 75 | src: [ 76 | 'example/*.html', 77 | ] 78 | } 79 | }, 80 | copy: { 81 | main: { 82 | files: [ 83 | {expand: true, src: ['bower_components/**'], dest: 'example/'}, 84 | {expand: true, src: ['dist/**'], dest: 'example/'}, 85 | ] 86 | } 87 | } 88 | }); 89 | 90 | grunt.loadNpmTasks('grunt-wiredep'); 91 | grunt.loadNpmTasks('grunt-contrib-jshint'); 92 | grunt.loadNpmTasks('grunt-contrib-uglify'); 93 | grunt.loadNpmTasks('grunt-contrib-compass'); 94 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 95 | grunt.loadNpmTasks('grunt-contrib-watch'); 96 | grunt.loadNpmTasks('grunt-contrib-connect'); 97 | grunt.loadNpmTasks('grunt-shell'); 98 | grunt.loadNpmTasks('grunt-contrib-copy'); 99 | 100 | grunt.registerTask('sass', ['compass', 'cssmin']); 101 | grunt.registerTask('build', ['uglify', 'compass', 'cssmin', 'wiredep', 'copy']); 102 | grunt.registerTask('deploy', ['build', 'shell']); 103 | 104 | grunt.registerTask('start:example', ['build', 'connect', 'watch']); 105 | 106 | grunt.registerTask('default', ['build']); 107 | }; 108 | -------------------------------------------------------------------------------- /css/ngNotificationsBar.css: -------------------------------------------------------------------------------- 1 | /* line 64, ../bower_components/hmps-animate-scss/animate.scss */ 2 | body { 3 | -webkit-backface-visibility: hidden; 4 | } 5 | 6 | /* line 4, ../sass/ngNotificationsBar.scss */ 7 | .notifications .notifications-container { 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | min-height: 60px; 12 | line-height: 60px; 13 | width: 100%; 14 | z-index: 1000; 15 | } 16 | /* line 14, ../sass/ngNotificationsBar.scss */ 17 | .notifications .notification, .notifications .error, .notifications .success, .notifications .warning, .notifications .info { 18 | position: relative; 19 | -webkit-animation: fadeInDown 1s ease 0.2s 1 both; 20 | -moz-animation: fadeInDown 1s ease 0.2s 1 both; 21 | animation: fadeInDown 1s ease 0.2s 1 both; 22 | -webkit-animation-backface-visibility: hidden; 23 | -moz-animation-backface-visibility: hidden; 24 | -ms-animation-backface-visibility: hidden; 25 | -o-animation-backface-visibility: hidden; 26 | animation-backface-visibility: hidden; 27 | text-align: center; 28 | font-size: 18px; 29 | color: #fff; 30 | } 31 | @-webkit-keyframes fadeInDown { 32 | 0% { 33 | opacity: 0; 34 | -webkit-transform: translateY(-20px); 35 | } 36 | 100% { 37 | opacity: 1; 38 | -webkit-transform: translateY(0); 39 | } 40 | } 41 | @-moz-keyframes fadeInDown { 42 | 0% { 43 | opacity: 0; 44 | -moz-transform: translateY(-20px); 45 | } 46 | 100% { 47 | opacity: 1; 48 | -moz-transform: translateY(0); 49 | } 50 | } 51 | @-o-keyframes fadeInDown { 52 | 0% { 53 | opacity: 0; 54 | -o-transform: translateY(-20px); 55 | } 56 | 100% { 57 | opacity: 1; 58 | -o-transform: translateY(0); 59 | } 60 | } 61 | @keyframes fadeInDown { 62 | 0% { 63 | opacity: 0; 64 | -webkit-transform: translateY(-20px); 65 | transform: translateY(-20px); 66 | } 67 | 100% { 68 | opacity: 1; 69 | -webkit-transform: translateY(0); 70 | transform: translateY(0); 71 | } 72 | } 73 | /* line 22, ../sass/ngNotificationsBar.scss */ 74 | .notifications .message { 75 | padding: 0 12px; 76 | } 77 | /* line 26, ../sass/ngNotificationsBar.scss */ 78 | .notifications .error { 79 | background-color: #F64747; 80 | border-bottom: 1px solid #f31515; 81 | } 82 | /* line 32, ../sass/ngNotificationsBar.scss */ 83 | .notifications .success { 84 | background-color: #03C9A9; 85 | border-bottom: 1px solid #02aa8f; 86 | } 87 | /* line 38, ../sass/ngNotificationsBar.scss */ 88 | .notifications .warning { 89 | background-color: #F7CA18; 90 | border-bottom: 1px solid #e7ba08; 91 | } 92 | /* line 44, ../sass/ngNotificationsBar.scss */ 93 | .notifications .info { 94 | background-color: #0c6997; 95 | border-bottom: 1px solid #0c6997; 96 | } 97 | /* line 50, ../sass/ngNotificationsBar.scss */ 98 | .notifications .close-click { 99 | font-size: inherit; 100 | cursor: pointer; 101 | padding: 10px; 102 | margin: 0 auto; 103 | } 104 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Ng-Notifications-Bar

18 |

19 | Angular.js and Animate.css based component for stylish and flexible application notifications. 20 |

21 |
22 | 23 |
24 | 
25 | // HTML
26 | <notifications-bar class="notifications"></notifications-bar>
27 | 
28 | // Javascript
29 | var app = angular.module('app', ['ngNotificationsBar']);
30 | app.controller('main', function ($scope, notifications) {
31 | 	$scope.showError = function () {
32 | 		notifications.showError('Oops! Something bad just happened!');
33 | 	};
34 | 	$scope.showWarning = function () {
35 | 		notifications.showWarning('Hey! Take a look <em>here</em>..');
36 | 	};
37 | 	$scope.showSuccess = function () {
38 | 		notifications.showSuccess('Congrats! Life is great!');
39 | 	};
40 | });
41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 | 58 | Fork on Github 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/README.md: -------------------------------------------------------------------------------- 1 | # Animate.scss 2 | 3 | *Sass 3.3 is required to use Animate.scss* 4 | 5 | Based on the wildly popular [Animate.css](https://github.com/daneden/animate.css) by [@daneden](https://github.com/daneden) Animate.scss is a SASS-version of that same library. 6 | 7 | ## What is it? 8 | Animate.scss is a collection of fun, easy-to-use css animations for your project. There great to draw attention to objects, sliders and other awe-inspiring effects on your site. 9 | 10 | ## How to 11 | Just drop animate.scss into your project, import it into your main stylesheet and include one of the mixins in a selector that you want to animate. 12 | 13 | ## Why SASS 3.3? 14 | On of the great additions to SASS 3.3 is the `@at-root` function, which lets you put rules att the root of your file, even from within selectors or mixins. This makes it possible to write mixins that outputs @keyframes that we can use to animate. Take the bounce-effect for example: 15 | ``` 16 | @mixin bounce($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 17 | @include animation(bounce $duration $function $delay $count $fill); 18 | @include visibility($visibility); 19 | 20 | @at-root { 21 | @include keyframes(bounce) { 22 | 0%, 20%, 50%, 80%, 100% { 23 | @include transform(translateY(0px)); 24 | } 25 | 40% { 26 | @include transform(translateY(-30px)); 27 | } 28 | 60% { 29 | @include transform(translateY(-15px)); 30 | } 31 | } 32 | } 33 | } 34 | ``` 35 | So when you want to bounce something on your screen you just include that in a selecter, say a button: 36 | ``` 37 | .bouncing-button { 38 | @include bounce(); 39 | } 40 | ``` 41 | Run it through SASS and the resulting CSS will be: 42 | ``` 43 | .bouncing-button { 44 | -webkit-animation: bounce 1s ease 0.2s 1 both; 45 | -moz-animation: bounce 1s ease 0.2s 1 both; 46 | animation: bounce 1s ease 0.2s 1 both; 47 | -webkit-animation-backface-visibility: hidden; 48 | -moz-animation-backface-visibility: hidden; 49 | -ms-animation-backface-visibility: hidden; 50 | -o-animation-backface-visibility: hidden; 51 | animation-backface-visibility: hidden; 52 | } 53 | 54 | @-webkit-keyframes bounce { 55 | 0%, 20%, 50%, 80%, 100% { 56 | -webkit-transform: translateY(0px); 57 | } 58 | 40% { 59 | -webkit-transform: translateY(-30px); 60 | } 61 | 60% { 62 | -webkit-transform: translateY(-15px); 63 | } 64 | } 65 | 66 | @-moz-keyframes bounce { 67 | 0%, 20%, 50%, 80%, 100% { 68 | -moz-transform: translateY(0px); 69 | } 70 | 40% { 71 | -moz-transform: translateY(-30px); 72 | } 73 | 60% { 74 | -moz-transform: translateY(-15px); } 75 | } 76 | 77 | @-o-keyframes bounce { 78 | 0%, 20%, 50%, 80%, 100% { 79 | -o-transform: translateY(0px); 80 | } 81 | 40% { 82 | -o-transform: translateY(-30px); 83 | } 84 | 60% { 85 | -o-transform: translateY(-15px); } 86 | } 87 | 88 | @keyframes bounce { 89 | 0%, 20%, 50%, 80%, 100% { 90 | -webkit-transform: translateY(0px); 91 | transform: translateY(0px); 92 | } 93 | 40% { 94 | -webkit-transform: translateY(-30px); 95 | transform: translateY(-30px); 96 | } 97 | 60% { 98 | -webkit-transform: translateY(-15px); 99 | transform: translateY(-15px); } 100 | } 101 | ``` 102 | **Whoa, hold up! That's a lot of code dude!** 103 | 104 | Yeah, I know it looks kind of bloated. But that's due to the state of CSS animations and browser vendors. It need a whole lot of prefixing... And that's also the reason why Daniel's original project is close to 3500 lines of CSS, or 50-some kb minified. 105 | 106 | And here's the biggest reason why SASS 3.3 is perfect for this project - it gives you easy access to all animations without bloating your code or forcing you to make that extra HTTP-request. It just includes the animations that you actually use, nothing more and nothing less. 107 | 108 | ## The catch 109 | The only downside to animate.scss is that you need SASS 3.3 installed. But that should be installed anyway if you're into web development... 110 | 111 | ## Credit 112 | - @daneden for the original concept in animate.css 113 | - @jackilyn for the scss port of Daniel's work 114 | 115 | ## License 116 | [WFTPL](http://www.wtfpl.net/) 117 | 118 | *Tested in Chrome, Safari, Firefox and Mobile Safari* -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/README.md: -------------------------------------------------------------------------------- 1 | # Animate.scss 2 | 3 | *Sass 3.3 is required to use Animate.scss* 4 | 5 | Based on the wildly popular [Animate.css](https://github.com/daneden/animate.css) by [@daneden](https://github.com/daneden) Animate.scss is a SASS-version of that same library. 6 | 7 | ## What is it? 8 | Animate.scss is a collection of fun, easy-to-use css animations for your project. There great to draw attention to objects, sliders and other awe-inspiring effects on your site. 9 | 10 | ## How to 11 | Just drop animate.scss into your project, import it into your main stylesheet and include one of the mixins in a selector that you want to animate. 12 | 13 | ## Why SASS 3.3? 14 | On of the great additions to SASS 3.3 is the `@at-root` function, which lets you put rules att the root of your file, even from within selectors or mixins. This makes it possible to write mixins that outputs @keyframes that we can use to animate. Take the bounce-effect for example: 15 | ``` 16 | @mixin bounce($duration: $global-duration, $function: $global-function, $delay: $global-delay, $count: $global-count, $fill: $global-fill, $visibility: $global-visibility) { 17 | @include animation(bounce $duration $function $delay $count $fill); 18 | @include visibility($visibility); 19 | 20 | @at-root { 21 | @include keyframes(bounce) { 22 | 0%, 20%, 50%, 80%, 100% { 23 | @include transform(translateY(0px)); 24 | } 25 | 40% { 26 | @include transform(translateY(-30px)); 27 | } 28 | 60% { 29 | @include transform(translateY(-15px)); 30 | } 31 | } 32 | } 33 | } 34 | ``` 35 | So when you want to bounce something on your screen you just include that in a selecter, say a button: 36 | ``` 37 | .bouncing-button { 38 | @include bounce(); 39 | } 40 | ``` 41 | Run it through SASS and the resulting CSS will be: 42 | ``` 43 | .bouncing-button { 44 | -webkit-animation: bounce 1s ease 0.2s 1 both; 45 | -moz-animation: bounce 1s ease 0.2s 1 both; 46 | animation: bounce 1s ease 0.2s 1 both; 47 | -webkit-animation-backface-visibility: hidden; 48 | -moz-animation-backface-visibility: hidden; 49 | -ms-animation-backface-visibility: hidden; 50 | -o-animation-backface-visibility: hidden; 51 | animation-backface-visibility: hidden; 52 | } 53 | 54 | @-webkit-keyframes bounce { 55 | 0%, 20%, 50%, 80%, 100% { 56 | -webkit-transform: translateY(0px); 57 | } 58 | 40% { 59 | -webkit-transform: translateY(-30px); 60 | } 61 | 60% { 62 | -webkit-transform: translateY(-15px); 63 | } 64 | } 65 | 66 | @-moz-keyframes bounce { 67 | 0%, 20%, 50%, 80%, 100% { 68 | -moz-transform: translateY(0px); 69 | } 70 | 40% { 71 | -moz-transform: translateY(-30px); 72 | } 73 | 60% { 74 | -moz-transform: translateY(-15px); } 75 | } 76 | 77 | @-o-keyframes bounce { 78 | 0%, 20%, 50%, 80%, 100% { 79 | -o-transform: translateY(0px); 80 | } 81 | 40% { 82 | -o-transform: translateY(-30px); 83 | } 84 | 60% { 85 | -o-transform: translateY(-15px); } 86 | } 87 | 88 | @keyframes bounce { 89 | 0%, 20%, 50%, 80%, 100% { 90 | -webkit-transform: translateY(0px); 91 | transform: translateY(0px); 92 | } 93 | 40% { 94 | -webkit-transform: translateY(-30px); 95 | transform: translateY(-30px); 96 | } 97 | 60% { 98 | -webkit-transform: translateY(-15px); 99 | transform: translateY(-15px); } 100 | } 101 | ``` 102 | **Whoa, hold up! That's a lot of code dude!** 103 | 104 | Yeah, I know it looks kind of bloated. But that's due to the state of CSS animations and browser vendors. It need a whole lot of prefixing... And that's also the reason why Daniel's original project is close to 3500 lines of CSS, or 50-some kb minified. 105 | 106 | And here's the biggest reason why SASS 3.3 is perfect for this project - it gives you easy access to all animations without bloating your code or forcing you to make that extra HTTP-request. It just includes the animations that you actually use, nothing more and nothing less. 107 | 108 | ## The catch 109 | The only downside to animate.scss is that you need SASS 3.3 installed. But that should be installed anyway if you're into web development... 110 | 111 | ## Credit 112 | - @daneden for the original concept in animate.css 113 | - @jackilyn for the scss port of Daniel's work 114 | 115 | ## License 116 | [WFTPL](http://www.wtfpl.net/) 117 | 118 | *Tested in Chrome, Safari, Firefox and Mobile Safari* -------------------------------------------------------------------------------- /dist/ngNotificationsBar.min.js: -------------------------------------------------------------------------------- 1 | /*! ng-notifications-bar - v0.0.16 (http://beletsky.net/ng-notifications-bar/) */ 2 | !function(root,factory){"object"==typeof exports?module.exports=factory(root,require("angular")):"function"==typeof define&&define.amd?define(["angular"],function(angular){return root.ngNotificationsBar=factory(root,angular)}):root.ngNotificationsBar=factory(root,root.angular)}(this,function(window,angular){var module=angular.module("ngNotificationsBar",[]);return module.provider("notificationsConfig",function(){function setHideDelay(value){config.hideDelay=value}function getHideDelay(){return config.hideDelay}function setAcceptHTML(value){config.acceptHTML=value}function getAcceptHTML(){return config.acceptHTML}function setAutoHide(value){config.autoHide=value}function setAutoHideAnimation(value){config.autoHideAnimation=value}function getAutoHideAnimation(){return config.autoHideAnimation}function setAutoHideAnimationDelay(value){config.autoHideAnimationDelay=value}function getAutoHideAnimationDelay(){return config.autoHideAnimationDelay}function getAutoHide(){return config.autoHide}var config={};return{setHideDelay:setHideDelay,setAutoHide:setAutoHide,setAutoHideAnimation:setAutoHideAnimation,setAutoHideAnimationDelay:setAutoHideAnimationDelay,setAcceptHTML:setAcceptHTML,$get:function(){return{getHideDelay:getHideDelay,getAutoHide:getAutoHide,getAutoHideAnimation:getAutoHideAnimation,getAutoHideAnimationDelay:getAutoHideAnimationDelay,getAcceptHTML:getAcceptHTML}}}}),module.factory("notifications",["$rootScope",function($rootScope){var showError=function(message){$rootScope.$broadcast("notifications:error",message)},showWarning=function(message){$rootScope.$broadcast("notifications:warning",message)},showInfo=function(message){$rootScope.$broadcast("notifications:info",message)},showSuccess=function(message){$rootScope.$broadcast("notifications:success",message)},closeAll=function(){$rootScope.$broadcast("notifications:closeAll")};return{showError:showError,showInfo:showInfo,showWarning:showWarning,showSuccess:showSuccess,closeAll:closeAll}}]),module.directive("notificationsBar",["notificationsConfig","$timeout",function(notificationsConfig,$timeout){return{restrict:"EA",template:function(elem,attr){var acceptHTML=notificationsConfig.getAcceptHTML()||!1,iconClasses=attr.closeicon||"glyphicon glyphicon-remove";return acceptHTML?'
':'
{{note.message}}
'},link:function(scope){var notifications=scope.notifications=[],autoHideDelay=notificationsConfig.getHideDelay()||3e3,autoHide=notificationsConfig.getAutoHide()||!1,autoHideAnimation=notificationsConfig.getAutoHideAnimation()||"",autoHideAnimationDelay=notificationsConfig.getAutoHideAnimationDelay()||1200,removeById=function(id){var found=-1;notifications.forEach(function(el,index){el.id===id&&(found=index,el.animation={},el.animation[autoHideAnimation]=!0,scope.$apply())}),found>=0&&$timeout(function(){notifications.splice(found,1)},autoHideAnimationDelay)},notificationHandler=function(event,data,type,animation){var message,hide=autoHide,hideDelay=autoHideDelay;"object"==typeof data?(message=data.message,hide="undefined"==typeof data.hide?autoHide:!!data.hide,hideDelay=data.hideDelay||hideDelay):message=data;var id="notif_"+(new Date).getTime();if(notifications.push({id:id,type:type,message:message,animation:animation}),hide)var timer=$timeout(function(){removeById(id),$timeout.cancel(timer)},hideDelay)};scope.$on("notifications:error",function(event,data){notificationHandler(event,data,"error")}),scope.$on("notifications:warning",function(event,data){notificationHandler(event,data,"warning")}),scope.$on("notifications:info",function(event,data){notificationHandler(event,data,"info")}),scope.$on("notifications:success",function(event,data){notificationHandler(event,data,"success")}),scope.$on("notifications:closeAll",function(){notifications.length=0}),scope.close=function(index){notifications.splice(index,1)}}}}]),module}); -------------------------------------------------------------------------------- /example/dist/ngNotificationsBar.min.js: -------------------------------------------------------------------------------- 1 | /*! ng-notifications-bar - v0.0.16 (http://beletsky.net/ng-notifications-bar/) */ 2 | !function(root,factory){"object"==typeof exports?module.exports=factory(root,require("angular")):"function"==typeof define&&define.amd?define(["angular"],function(angular){return root.ngNotificationsBar=factory(root,angular)}):root.ngNotificationsBar=factory(root,root.angular)}(this,function(window,angular){var module=angular.module("ngNotificationsBar",[]);return module.provider("notificationsConfig",function(){function setHideDelay(value){config.hideDelay=value}function getHideDelay(){return config.hideDelay}function setAcceptHTML(value){config.acceptHTML=value}function getAcceptHTML(){return config.acceptHTML}function setAutoHide(value){config.autoHide=value}function setAutoHideAnimation(value){config.autoHideAnimation=value}function getAutoHideAnimation(){return config.autoHideAnimation}function setAutoHideAnimationDelay(value){config.autoHideAnimationDelay=value}function getAutoHideAnimationDelay(){return config.autoHideAnimationDelay}function getAutoHide(){return config.autoHide}var config={};return{setHideDelay:setHideDelay,setAutoHide:setAutoHide,setAutoHideAnimation:setAutoHideAnimation,setAutoHideAnimationDelay:setAutoHideAnimationDelay,setAcceptHTML:setAcceptHTML,$get:function(){return{getHideDelay:getHideDelay,getAutoHide:getAutoHide,getAutoHideAnimation:getAutoHideAnimation,getAutoHideAnimationDelay:getAutoHideAnimationDelay,getAcceptHTML:getAcceptHTML}}}}),module.factory("notifications",["$rootScope",function($rootScope){var showError=function(message){$rootScope.$broadcast("notifications:error",message)},showWarning=function(message){$rootScope.$broadcast("notifications:warning",message)},showInfo=function(message){$rootScope.$broadcast("notifications:info",message)},showSuccess=function(message){$rootScope.$broadcast("notifications:success",message)},closeAll=function(){$rootScope.$broadcast("notifications:closeAll")};return{showError:showError,showInfo:showInfo,showWarning:showWarning,showSuccess:showSuccess,closeAll:closeAll}}]),module.directive("notificationsBar",["notificationsConfig","$timeout",function(notificationsConfig,$timeout){return{restrict:"EA",template:function(elem,attr){var acceptHTML=notificationsConfig.getAcceptHTML()||!1,iconClasses=attr.closeicon||"glyphicon glyphicon-remove";return acceptHTML?'
':'
{{note.message}}
'},link:function(scope){var notifications=scope.notifications=[],autoHideDelay=notificationsConfig.getHideDelay()||3e3,autoHide=notificationsConfig.getAutoHide()||!1,autoHideAnimation=notificationsConfig.getAutoHideAnimation()||"",autoHideAnimationDelay=notificationsConfig.getAutoHideAnimationDelay()||1200,removeById=function(id){var found=-1;notifications.forEach(function(el,index){el.id===id&&(found=index,el.animation={},el.animation[autoHideAnimation]=!0,scope.$apply())}),found>=0&&$timeout(function(){notifications.splice(found,1)},autoHideAnimationDelay)},notificationHandler=function(event,data,type,animation){var message,hide=autoHide,hideDelay=autoHideDelay;"object"==typeof data?(message=data.message,hide="undefined"==typeof data.hide?autoHide:!!data.hide,hideDelay=data.hideDelay||hideDelay):message=data;var id="notif_"+(new Date).getTime();if(notifications.push({id:id,type:type,message:message,animation:animation}),hide)var timer=$timeout(function(){removeById(id),$timeout.cancel(timer)},hideDelay)};scope.$on("notifications:error",function(event,data){notificationHandler(event,data,"error")}),scope.$on("notifications:warning",function(event,data){notificationHandler(event,data,"warning")}),scope.$on("notifications:info",function(event,data){notificationHandler(event,data,"info")}),scope.$on("notifications:success",function(event,data){notificationHandler(event,data,"success")}),scope.$on("notifications:closeAll",function(){notifications.length=0}),scope.close=function(index){notifications.splice(index,1)}}}}]),module}); -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/animate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //-----------------------------------------------------------------------// 3 | // ANIMATE.SCSS 4 | // 5 | // With animate.scss you can create beatiful and engaging animation without 6 | // barely touching any code. Just include a mixin and your good to go! 7 | 8 | // DOCUMENATION: 9 | // Check out the GitHub repo for docs on how to use animate.scss 10 | // 11 | // CREDIT: 12 | // @daneden for the original concept in animate.css 13 | // @jackilyn for the scss port of Daniel's work 14 | // 15 | // LICENSE: 16 | // WFTPL - http://www.wtfpl.net/ 17 | // 18 | // Version: 1.0.1 19 | //-----------------------------------------------------------------------// 20 | 21 | //-----------------------------------------------------------------------// 22 | // This is the main file for animate.scss. All partials and helpers will 23 | // be pulled into this file by the code below. If you want to decrease 24 | // the size of this file you can comment out sections below, but remember 25 | // that due to the nature of mixins it won't hurt your actual performance 26 | // to leave it all in here! 27 | // 28 | // So, without further ado, let's get started! 29 | //-----------------------------------------------------------------------// 30 | 31 | //-----------------------------------------------------------------------// 32 | // VARIABLES 33 | // 34 | // First, we'll set up some sensible defaults for the helper functions. 35 | // These are prefixed global- to separate them from the variables used 36 | // in each mixin. 37 | //-----------------------------------------------------------------------// 38 | 39 | $global-duration: 1s !default; 40 | $global-function: ease !default; 41 | $global-delay: .2s !default; 42 | $global-count: 1 !default; 43 | $global-fill: both !default; 44 | $global-visibility: hidden !default; 45 | 46 | $prefixes: (webkit moz ms o spec); 47 | 48 | $prefix-for-webkit: true !default; 49 | $prefix-for-mozilla: true !default; 50 | $prefix-for-microsoft: true !default; 51 | $prefix-for-opera: true !default; 52 | $prefix-for-spec: true !default; // required for keyframe mixin 53 | 54 | //-----------------------------------------------------------------------// 55 | // HELPERS 56 | // These are functions that are called from the mixins to setup stuff 57 | // like duration, fill-mode etc. 58 | //-----------------------------------------------------------------------// 59 | 60 | @import "partials/helpers"; 61 | 62 | // There's a small bug in webkit that requires a CSS3 property to be set on an element. 63 | // Read more about it at http://bit.ly/NEdoDq 64 | body { 65 | -webkit-backface-visibility: hidden; 66 | } 67 | 68 | //-----------------------------------------------------------------------// 69 | // NUTS 'N BOLTS 70 | // These are the partials that contain the actual mixins. 71 | //-----------------------------------------------------------------------// 72 | 73 | @import "partials/bounce"; 74 | 75 | @import "partials/bounceIn"; 76 | @import "partials/bounceInDown"; 77 | @import "partials/bounceInLeft"; 78 | @import "partials/bounceInRight"; 79 | @import "partials/bounceInUp"; 80 | 81 | @import "partials/bounceOut"; 82 | @import "partials/bounceOutDown"; 83 | @import "partials/bounceOutLeft"; 84 | @import "partials/bounceOutRight"; 85 | @import "partials/bounceOutUp"; 86 | 87 | @import "partials/fadeIn"; 88 | @import "partials/fadeInDown"; 89 | @import "partials/fadeInDownBig"; 90 | @import "partials/fadeInLeft"; 91 | @import "partials/fadeInLeftBig"; 92 | @import "partials/fadeInRight"; 93 | @import "partials/fadeInRightBig"; 94 | @import "partials/fadeInUp"; 95 | @import "partials/fadeInUpBig"; 96 | 97 | @import "partials/fadeOut"; 98 | @import "partials/fadeOutDown"; 99 | @import "partials/fadeOutDownBig"; 100 | @import "partials/fadeOutUp"; 101 | @import "partials/fadeOutUpBig"; 102 | @import "partials/fadeOutLeft"; 103 | @import "partials/fadeOutLeftBig"; 104 | @import "partials/fadeOutRight"; 105 | @import "partials/fadeOutRightBig"; 106 | 107 | @import "partials/flip"; 108 | 109 | @import "partials/flipInX"; 110 | @import "partials/flipInY"; 111 | @import "partials/flipOutX"; 112 | @import "partials/flipOutY"; 113 | 114 | @import "partials/hingeLeft"; 115 | @import "partials/hingeRight"; 116 | 117 | @import "partials/lightSpeedIn"; 118 | @import "partials/lightSpeedOut"; 119 | 120 | @import "partials/pulse"; 121 | 122 | @import "partials/rollIn"; 123 | @import "partials/rollOut"; 124 | 125 | @import "partials/rotateIn"; 126 | @import "partials/rotateInDownLeft"; 127 | @import "partials/rotateInDownRight"; 128 | @import "partials/rotateInUpLeft"; 129 | @import "partials/rotateInUpRight"; 130 | 131 | @import "partials/rotateOut"; 132 | @import "partials/rotateOutDownLeft"; 133 | @import "partials/rotateOutDownRight"; 134 | @import "partials/rotateOutUpLeft"; 135 | @import "partials/rotateOutUpRight"; 136 | 137 | @import "partials/slideInDown"; 138 | @import "partials/slideInLeft"; 139 | @import "partials/slideInRight"; 140 | @import "partials/slideInUp"; 141 | 142 | @import "partials/slideOutDown"; 143 | @import "partials/slideOutLeft"; 144 | @import "partials/slideOutRight"; 145 | @import "partials/slideOutUp"; 146 | 147 | @import "partials/shake"; 148 | @import "partials/swing"; 149 | @import "partials/tada"; 150 | @import "partials/wiggle"; 151 | @import "partials/wobble"; -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/animate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //-----------------------------------------------------------------------// 3 | // ANIMATE.SCSS 4 | // 5 | // With animate.scss you can create beatiful and engaging animation without 6 | // barely touching any code. Just include a mixin and your good to go! 7 | 8 | // DOCUMENATION: 9 | // Check out the GitHub repo for docs on how to use animate.scss 10 | // 11 | // CREDIT: 12 | // @daneden for the original concept in animate.css 13 | // @jackilyn for the scss port of Daniel's work 14 | // 15 | // LICENSE: 16 | // WFTPL - http://www.wtfpl.net/ 17 | // 18 | // Version: 1.0.1 19 | //-----------------------------------------------------------------------// 20 | 21 | //-----------------------------------------------------------------------// 22 | // This is the main file for animate.scss. All partials and helpers will 23 | // be pulled into this file by the code below. If you want to decrease 24 | // the size of this file you can comment out sections below, but remember 25 | // that due to the nature of mixins it won't hurt your actual performance 26 | // to leave it all in here! 27 | // 28 | // So, without further ado, let's get started! 29 | //-----------------------------------------------------------------------// 30 | 31 | //-----------------------------------------------------------------------// 32 | // VARIABLES 33 | // 34 | // First, we'll set up some sensible defaults for the helper functions. 35 | // These are prefixed global- to separate them from the variables used 36 | // in each mixin. 37 | //-----------------------------------------------------------------------// 38 | 39 | $global-duration: 1s !default; 40 | $global-function: ease !default; 41 | $global-delay: .2s !default; 42 | $global-count: 1 !default; 43 | $global-fill: both !default; 44 | $global-visibility: hidden !default; 45 | 46 | $prefixes: (webkit moz ms o spec); 47 | 48 | $prefix-for-webkit: true !default; 49 | $prefix-for-mozilla: true !default; 50 | $prefix-for-microsoft: true !default; 51 | $prefix-for-opera: true !default; 52 | $prefix-for-spec: true !default; // required for keyframe mixin 53 | 54 | //-----------------------------------------------------------------------// 55 | // HELPERS 56 | // These are functions that are called from the mixins to setup stuff 57 | // like duration, fill-mode etc. 58 | //-----------------------------------------------------------------------// 59 | 60 | @import "partials/helpers"; 61 | 62 | // There's a small bug in webkit that requires a CSS3 property to be set on an element. 63 | // Read more about it at http://bit.ly/NEdoDq 64 | body { 65 | -webkit-backface-visibility: hidden; 66 | } 67 | 68 | //-----------------------------------------------------------------------// 69 | // NUTS 'N BOLTS 70 | // These are the partials that contain the actual mixins. 71 | //-----------------------------------------------------------------------// 72 | 73 | @import "partials/bounce"; 74 | 75 | @import "partials/bounceIn"; 76 | @import "partials/bounceInDown"; 77 | @import "partials/bounceInLeft"; 78 | @import "partials/bounceInRight"; 79 | @import "partials/bounceInUp"; 80 | 81 | @import "partials/bounceOut"; 82 | @import "partials/bounceOutDown"; 83 | @import "partials/bounceOutLeft"; 84 | @import "partials/bounceOutRight"; 85 | @import "partials/bounceOutUp"; 86 | 87 | @import "partials/fadeIn"; 88 | @import "partials/fadeInDown"; 89 | @import "partials/fadeInDownBig"; 90 | @import "partials/fadeInLeft"; 91 | @import "partials/fadeInLeftBig"; 92 | @import "partials/fadeInRight"; 93 | @import "partials/fadeInRightBig"; 94 | @import "partials/fadeInUp"; 95 | @import "partials/fadeInUpBig"; 96 | 97 | @import "partials/fadeOut"; 98 | @import "partials/fadeOutDown"; 99 | @import "partials/fadeOutDownBig"; 100 | @import "partials/fadeOutUp"; 101 | @import "partials/fadeOutUpBig"; 102 | @import "partials/fadeOutLeft"; 103 | @import "partials/fadeOutLeftBig"; 104 | @import "partials/fadeOutRight"; 105 | @import "partials/fadeOutRightBig"; 106 | 107 | @import "partials/flip"; 108 | 109 | @import "partials/flipInX"; 110 | @import "partials/flipInY"; 111 | @import "partials/flipOutX"; 112 | @import "partials/flipOutY"; 113 | 114 | @import "partials/hingeLeft"; 115 | @import "partials/hingeRight"; 116 | 117 | @import "partials/lightSpeedIn"; 118 | @import "partials/lightSpeedOut"; 119 | 120 | @import "partials/pulse"; 121 | 122 | @import "partials/rollIn"; 123 | @import "partials/rollOut"; 124 | 125 | @import "partials/rotateIn"; 126 | @import "partials/rotateInDownLeft"; 127 | @import "partials/rotateInDownRight"; 128 | @import "partials/rotateInUpLeft"; 129 | @import "partials/rotateInUpRight"; 130 | 131 | @import "partials/rotateOut"; 132 | @import "partials/rotateOutDownLeft"; 133 | @import "partials/rotateOutDownRight"; 134 | @import "partials/rotateOutUpLeft"; 135 | @import "partials/rotateOutUpRight"; 136 | 137 | @import "partials/slideInDown"; 138 | @import "partials/slideInLeft"; 139 | @import "partials/slideInRight"; 140 | @import "partials/slideInUp"; 141 | 142 | @import "partials/slideOutDown"; 143 | @import "partials/slideOutLeft"; 144 | @import "partials/slideOutRight"; 145 | @import "partials/slideOutUp"; 146 | 147 | @import "partials/shake"; 148 | @import "partials/swing"; 149 | @import "partials/tada"; 150 | @import "partials/wiggle"; 151 | @import "partials/wobble"; -------------------------------------------------------------------------------- /bower_components/angular-sanitize/angular-sanitize.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.3.14 3 | (c) 2010-2014 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(n,h,p){'use strict';function E(a){var e=[];r(e,h.noop).chars(a);return e.join("")}function g(a){var e={};a=a.split(",");var d;for(d=0;d=c;d--)e.end&&e.end(f[d]);f.length=c}}"string"!==typeof a&&(a=null===a||"undefined"===typeof a?"":""+a);var b,k,f=[],m=a,l;for(f.last=function(){return f[f.length-1]};a;){l="";k=!0;if(f.last()&&w[f.last()])a=a.replace(new RegExp("([\\W\\w]*)<\\s*\\/\\s*"+f.last()+"[^>]*>","i"),function(a,b){b=b.replace(H,"$1").replace(I,"$1");e.chars&&e.chars(q(b));return""}),c("",f.last());else{if(0===a.indexOf("\x3c!--"))b=a.indexOf("--",4),0<=b&&a.lastIndexOf("--\x3e",b)===b&&(e.comment&& 8 | e.comment(a.substring(4,b)),a=a.substring(b+3),k=!1);else if(x.test(a)){if(b=a.match(x))a=a.replace(b[0],""),k=!1}else if(J.test(a)){if(b=a.match(y))a=a.substring(b[0].length),b[0].replace(y,c),k=!1}else K.test(a)&&((b=a.match(z))?(b[4]&&(a=a.substring(b[0].length),b[0].replace(z,d)),k=!1):(l+="<",a=a.substring(1)));k&&(b=a.indexOf("<"),l+=0>b?a:a.substring(0,b),a=0>b?"":a.substring(b),e.chars&&e.chars(q(l)))}if(a==m)throw L("badparse",a);m=a}c()}function q(a){if(!a)return"";A.innerHTML=a.replace(//g,">")}function r(a,e){var d=!1,c=h.bind(a,a.push);return{start:function(a,k,f){a=h.lowercase(a);!d&&w[a]&&(d=a);d||!0!==C[a]||(c("<"),c(a),h.forEach(k,function(d,f){var k=h.lowercase(f),g="img"===a&&"src"===k||"background"=== 10 | k;!0!==O[k]||!0===D[k]&&!e(d,g)||(c(" "),c(f),c('="'),c(B(d)),c('"'))}),c(f?"/>":">"))},end:function(a){a=h.lowercase(a);d||!0!==C[a]||(c(""));a==d&&(d=!1)},chars:function(a){d||c(B(a))}}}var L=h.$$minErr("$sanitize"),z=/^<((?:[a-zA-Z])[\w:-]*)((?:\s+[\w:-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)\s*(>?)/,y=/^<\/\s*([\w:-]+)[^>]*>/,G=/([\w:-]+)(?:\s*=\s*(?:(?:"((?:[^"])*)")|(?:'((?:[^'])*)')|([^>\s]+)))?/g,K=/^]*?)>/i, 11 | I=/"\u201d\u2019]/,d=/^mailto:/;return function(c,b){function k(a){a&&g.push(E(a))}function f(a,c){g.push("');k(c);g.push("")}if(!c)return c;for(var m,l=c,g=[],n,p;m=l.match(e);)n=m[0],m[2]||m[4]||(n=(m[3]?"http://":"mailto:")+n),p=m.index,k(l.substr(0,p)),f(n,m[0].replace(d,"")),l=l.substring(p+m[0].length);k(l);return a(g.join(""))}}])})(window,window.angular); 16 | //# sourceMappingURL=angular-sanitize.min.js.map 17 | -------------------------------------------------------------------------------- /example/bower_components/angular-sanitize/angular-sanitize.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.3.14 3 | (c) 2010-2014 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(n,h,p){'use strict';function E(a){var e=[];r(e,h.noop).chars(a);return e.join("")}function g(a){var e={};a=a.split(",");var d;for(d=0;d=c;d--)e.end&&e.end(f[d]);f.length=c}}"string"!==typeof a&&(a=null===a||"undefined"===typeof a?"":""+a);var b,k,f=[],m=a,l;for(f.last=function(){return f[f.length-1]};a;){l="";k=!0;if(f.last()&&w[f.last()])a=a.replace(new RegExp("([\\W\\w]*)<\\s*\\/\\s*"+f.last()+"[^>]*>","i"),function(a,b){b=b.replace(H,"$1").replace(I,"$1");e.chars&&e.chars(q(b));return""}),c("",f.last());else{if(0===a.indexOf("\x3c!--"))b=a.indexOf("--",4),0<=b&&a.lastIndexOf("--\x3e",b)===b&&(e.comment&& 8 | e.comment(a.substring(4,b)),a=a.substring(b+3),k=!1);else if(x.test(a)){if(b=a.match(x))a=a.replace(b[0],""),k=!1}else if(J.test(a)){if(b=a.match(y))a=a.substring(b[0].length),b[0].replace(y,c),k=!1}else K.test(a)&&((b=a.match(z))?(b[4]&&(a=a.substring(b[0].length),b[0].replace(z,d)),k=!1):(l+="<",a=a.substring(1)));k&&(b=a.indexOf("<"),l+=0>b?a:a.substring(0,b),a=0>b?"":a.substring(b),e.chars&&e.chars(q(l)))}if(a==m)throw L("badparse",a);m=a}c()}function q(a){if(!a)return"";A.innerHTML=a.replace(//g,">")}function r(a,e){var d=!1,c=h.bind(a,a.push);return{start:function(a,k,f){a=h.lowercase(a);!d&&w[a]&&(d=a);d||!0!==C[a]||(c("<"),c(a),h.forEach(k,function(d,f){var k=h.lowercase(f),g="img"===a&&"src"===k||"background"=== 10 | k;!0!==O[k]||!0===D[k]&&!e(d,g)||(c(" "),c(f),c('="'),c(B(d)),c('"'))}),c(f?"/>":">"))},end:function(a){a=h.lowercase(a);d||!0!==C[a]||(c(""));a==d&&(d=!1)},chars:function(a){d||c(B(a))}}}var L=h.$$minErr("$sanitize"),z=/^<((?:[a-zA-Z])[\w:-]*)((?:\s+[\w:-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)\s*(>?)/,y=/^<\/\s*([\w:-]+)[^>]*>/,G=/([\w:-]+)(?:\s*=\s*(?:(?:"((?:[^"])*)")|(?:'((?:[^'])*)')|([^>\s]+)))?/g,K=/^]*?)>/i, 11 | I=/"\u201d\u2019]/,d=/^mailto:/;return function(c,b){function k(a){a&&g.push(E(a))}function f(a,c){g.push("');k(c);g.push("")}if(!c)return c;for(var m,l=c,g=[],n,p;m=l.match(e);)n=m[0],m[2]||m[4]||(n=(m[3]?"http://":"mailto:")+n),p=m.index,k(l.substr(0,p)),f(n,m[0].replace(d,"")),l=l.substring(p+m[0].length);k(l);return a(g.join(""))}}])})(window,window.angular); 16 | //# sourceMappingURL=angular-sanitize.min.js.map 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ng-notifications-bar 2 | 3 | [Angular.js](https://angularjs.org/) and [Animate.css](http://daneden.github.io/animate.css) based component for stylish and flexible application notifications. 4 | 5 | [Demo](http://beletsky.net/ng-notifications-bar) 6 | 7 | ## Overview 8 | 9 | Web applications requires notify users of ongoing events. Common cases are errors, successful completion notifications etc. With `ng-notifications-bar` it's as easy as, 10 | 11 | ```html 12 | 13 | 14 | ... 15 | ``` 16 | 17 | ## Installation 18 | 19 | Npm installation, 20 | 21 | ```bash 22 | $ npm install ng-notifications-bar --save 23 | ``` 24 | 25 | Or bower installation, 26 | 27 | ```bash 28 | $ bower install ng-notifications-bar --save 29 | ``` 30 | 31 | Update your scripts and styles section or use the require for browserified applications. 32 | 33 | ```html 34 | 35 | 36 | 37 | ``` 38 | 39 | If you use Grunt, `wiredep` should inject the required `angular-sanitize.js` for you. 40 | 41 | For `browserify` applications, require module in yours application module, 42 | 43 | ```js 44 | require('ng-notifications-bar'); 45 | ``` 46 | 47 | In case you are using `sass` in project, it's possible to just import `ngNotificationsBar` styles, 48 | 49 | ```scss 50 | @import "../../node_modules/ng-notifications-bar/sass/ngNotificationsBar"; 51 | ``` 52 | 53 | In application module, 54 | 55 | ```js 56 | angular.module('app', ['ngNotificationsBar', 'ngSanitize']); 57 | ``` 58 | 59 | `ngSanitize` can be omitted if HTML support isn't needed. 60 | 61 | ## API 62 | 63 | The module consists of there elements - directive, service and provider. 64 | 65 | ### Directive 66 | 67 | `notifications-bar` element directive, should be placed once, typically right after `` open tag. 68 | 69 | ```html 70 | 71 | ``` 72 | 73 | If you are using a icon library besides Glyphicons for the close button (such as [Font Awesome](http://fontawesome.io)), include a `closeIcon` attribute. 74 | 75 | ```html 76 | 77 | ``` 78 | 79 | The default is the `glyphicon-remove` icon so don't forget to import Glyphicons if you aren't defining a `closeIcon` attribute. 80 | 81 | Possible to use as attribute, as well 82 | 83 | ```html 84 |
85 | ``` 86 | 87 | ### Service 88 | 89 | `notification` service is used by controllers (or other directives), to show notifications. 90 | 91 | ```js 92 | app.controllers('app', function ($scope, api, notifications) { 93 | api.get({resource: 'tasks'}) 94 | .then(function (tasks) { 95 | $scope.tasks = tasks; 96 | }, function (error) { 97 | notifications.showError({message: error.message}); 98 | }); 99 | 100 | $scope.submitTask = function () { 101 | api.post({resource: 'tasks'}, {description: this.description}) 102 | .then(function () { 103 | notifications.showSuccess({message: 'Your task posted successfully'}); 104 | }, function (error) { 105 | notifications.showError({message: 'Oh no! Task submission failed, please try again.'}); 106 | }); 107 | } 108 | }); 109 | ``` 110 | 111 | ### Provider 112 | 113 | `notificationsConfigProvider` is used to override some notifications bar defaults. 114 | 115 | ```js 116 | app.config(['notificationsConfigProvider', function (notificationsConfigProvider) { 117 | // auto hide 118 | notificationsConfigProvider.setAutoHide(true) 119 | 120 | // delay before hide 121 | notificationsConfigProvider.setHideDelay(3000) 122 | }]) 123 | ``` 124 | 125 | ## Settings 126 | It is possible to setup the whole notifications bar module in module config and each notification separately in controller 127 | 128 | Available options: 129 | 130 | - autoHide 131 | - hideDelay 132 | - acceptHTML 133 | - autoHideAnimation 134 | - autoHideAniationDelay 135 | 136 | Please **note**, HTML support is only configurable at a global level. If HTML is to be supported, make sure to inject the `'ngSanitize'` dependency. 137 | 138 | ```js 139 | var app = angular.module('app', ['ngNotificationsBar', 'ngSanitize']); 140 | ``` 141 | 142 | 143 | ### During configuration 144 | 145 | ```js 146 | app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) { 147 | // auto hide 148 | notificationsConfigProvider.setAutoHide(true); 149 | 150 | // delay before hide 151 | notificationsConfigProvider.setHideDelay(3000); 152 | 153 | // support HTML 154 | notificationsConfigProvider.setAcceptHTML(false); 155 | 156 | // Set an animation for hiding the notification 157 | notificationsConfigProvider.setAutoHideAnimation('fadeOutNotifications'); 158 | 159 | // delay between animation and removing the nofitication 160 | notificationsConfigProvider.setAutoHideAnimationDelay(1200); 161 | 162 | }]) 163 | ``` 164 | 165 | 166 | ### Override in controller 167 | 168 | ```js 169 | app.controller('main', function ($scope, notifications) { 170 | $scope.showError = function () { 171 | notifications.showError({ 172 | message: 'Oops! Something bad just happened! (hides faster)', 173 | hideDelay: 1500, //ms 174 | hide: true //bool 175 | }); 176 | }; 177 | }); 178 | ``` 179 | 180 | 181 | ## Development 182 | 183 | Install `bower` dependencies, 184 | 185 | ```bash 186 | $ bower install 187 | ``` 188 | 189 | Install `npm` dependencies, 190 | 191 | ```bash 192 | $ npm install 193 | ``` 194 | 195 | Run `grunt` build, 196 | 197 | ```bash 198 | $ grunt 199 | ``` 200 | 201 | as result, `/dist` folder is created with ready to use `.js` and `.css` file. 202 | 203 | Project doesn't have tests at the moment, so run `example` and check the functionality, 204 | 205 | ```bash 206 | $ grunt start:example 207 | ``` 208 | 209 | ## Licence 210 | 211 | Copyright (c) 2014, alexander.beletsky@gmail.com 212 | 213 | MIT 214 | -------------------------------------------------------------------------------- /src/ngNotificationsBar.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (typeof exports === 'object') { 3 | module.exports = factory(root, require('angular')); 4 | } else if (typeof define === 'function' && define.amd) { 5 | define(['angular'], function (angular) { 6 | return (root.ngNotificationsBar = factory(root, angular)); 7 | }); 8 | } else { 9 | root.ngNotificationsBar = factory(root, root.angular); 10 | } 11 | }(this, function (window, angular) { 12 | var module = angular.module('ngNotificationsBar', []); 13 | 14 | module.provider('notificationsConfig', function() { 15 | var config = {}; 16 | 17 | function setHideDelay(value){ 18 | config.hideDelay = value; 19 | } 20 | 21 | function getHideDelay(){ 22 | return config.hideDelay; 23 | } 24 | 25 | function setAcceptHTML(value){ 26 | config.acceptHTML = value; 27 | } 28 | 29 | function getAcceptHTML(){ 30 | return config.acceptHTML; 31 | } 32 | 33 | 34 | function setAutoHide(value){ 35 | config.autoHide = value; 36 | } 37 | 38 | function setAutoHideAnimation(value){ 39 | config.autoHideAnimation = value; 40 | } 41 | 42 | function getAutoHideAnimation(){ 43 | return config.autoHideAnimation; 44 | } 45 | 46 | function setAutoHideAnimationDelay(value){ 47 | config.autoHideAnimationDelay = value; 48 | } 49 | 50 | function getAutoHideAnimationDelay(){ 51 | return config.autoHideAnimationDelay; 52 | } 53 | 54 | function getAutoHide(){ 55 | return config.autoHide; 56 | } 57 | 58 | return { 59 | setHideDelay: setHideDelay, 60 | 61 | setAutoHide: setAutoHide, 62 | 63 | setAutoHideAnimation: setAutoHideAnimation, 64 | 65 | setAutoHideAnimationDelay: setAutoHideAnimationDelay, 66 | 67 | setAcceptHTML: setAcceptHTML, 68 | 69 | $get: function(){ 70 | return { 71 | getHideDelay: getHideDelay, 72 | 73 | getAutoHide: getAutoHide, 74 | 75 | getAutoHideAnimation: getAutoHideAnimation, 76 | 77 | getAutoHideAnimationDelay: getAutoHideAnimationDelay, 78 | 79 | getAcceptHTML: getAcceptHTML 80 | }; 81 | } 82 | }; 83 | }); 84 | 85 | module.factory('notifications', ['$rootScope', function ($rootScope) { 86 | var showError = function (message) { 87 | $rootScope.$broadcast('notifications:error', message); 88 | }; 89 | 90 | var showWarning = function (message) { 91 | $rootScope.$broadcast('notifications:warning', message); 92 | }; 93 | 94 | var showInfo = function (message) { 95 | $rootScope.$broadcast('notifications:info', message); 96 | }; 97 | 98 | var showSuccess = function (message) { 99 | $rootScope.$broadcast('notifications:success', message); 100 | }; 101 | 102 | var closeAll = function () { 103 | $rootScope.$broadcast('notifications:closeAll'); 104 | }; 105 | 106 | return { 107 | showError: showError, 108 | showInfo: showInfo, 109 | showWarning: showWarning, 110 | showSuccess: showSuccess, 111 | closeAll: closeAll 112 | }; 113 | }]); 114 | 115 | module.directive('notificationsBar', ['notificationsConfig', '$timeout', function (notificationsConfig, $timeout) { 116 | return { 117 | restrict: 'EA', 118 | template: function(elem, attr){ 119 | var acceptHTML = notificationsConfig.getAcceptHTML() || false; 120 | var iconClasses = attr.closeicon || 'glyphicon glyphicon-remove'; 121 | return acceptHTML ? '\ 122 |
\ 123 |
\ 124 | \ 125 | \ 126 |
\ 127 |
\ 128 | ' : '\ 129 |
\ 130 |
\ 131 | {{note.message}}\ 132 | \ 133 |
\ 134 |
\ 135 | ' 136 | 137 | }, 138 | link: function (scope) { 139 | var notifications = scope.notifications = []; 140 | var timers = []; 141 | var autoHideDelay = notificationsConfig.getHideDelay() || 3000; 142 | var autoHide = notificationsConfig.getAutoHide() || false; 143 | var autoHideAnimation = notificationsConfig.getAutoHideAnimation() || ''; 144 | var autoHideAnimationDelay = notificationsConfig.getAutoHideAnimationDelay() || 1200; 145 | 146 | var removeById = function (id) { 147 | var found = -1; 148 | 149 | notifications.forEach(function (el, index) { 150 | if (el.id === id) { 151 | found = index; 152 | 153 | el.animation = {}; 154 | el.animation[autoHideAnimation] = true; 155 | 156 | scope.$apply(); 157 | } 158 | }); 159 | 160 | if (found >= 0) { 161 | $timeout(function(){ 162 | notifications.splice(found, 1); 163 | }, autoHideAnimationDelay); 164 | } 165 | }; 166 | 167 | var notificationHandler = function (event, data, type, animation) { 168 | var message, hide = autoHide, hideDelay = autoHideDelay; 169 | 170 | if (typeof data === 'object') { 171 | message = data.message; 172 | hide = (typeof data.hide === 'undefined') ? autoHide : !!data.hide; 173 | hideDelay = data.hideDelay || hideDelay; 174 | } else { 175 | message = data; 176 | } 177 | 178 | var id = 'notif_' + (new Date()).getTime(); 179 | notifications.push({id: id, type: type, message: message, animation: animation}); 180 | if (hide) { 181 | var timer = $timeout(function () { 182 | removeById(id); 183 | $timeout.cancel(timer); 184 | }, hideDelay); 185 | } 186 | }; 187 | 188 | scope.$on('notifications:error', function (event, data) { 189 | notificationHandler(event, data, 'error'); 190 | }); 191 | 192 | scope.$on('notifications:warning', function (event, data) { 193 | notificationHandler(event, data, 'warning'); 194 | }); 195 | 196 | scope.$on('notifications:info', function (event, data) { 197 | notificationHandler(event, data, 'info'); 198 | }); 199 | 200 | scope.$on('notifications:success', function (event, data) { 201 | notificationHandler(event, data, 'success'); 202 | }); 203 | 204 | scope.$on('notifications:closeAll', function () { 205 | notifications.length = 0; 206 | }) 207 | 208 | scope.close = function (index) { 209 | notifications.splice(index, 1); 210 | }; 211 | } 212 | }; 213 | }]); 214 | 215 | return module; 216 | })); 217 | -------------------------------------------------------------------------------- /bower_components/hmps-animate-scss/partials/_helpers.scss: -------------------------------------------------------------------------------- 1 | //-----------------------------------------------------------------------// 2 | // HELPERS 3 | // 4 | // These are functions that are called from the mixins to setup stuff 5 | // like duration, fill-mode etc. 6 | // 7 | // Credit to @jackilyn who first drafted these over at 8 | // https://github.com/jackilyn/animate.scss 9 | //-----------------------------------------------------------------------// 10 | 11 | @mixin animation($animations...) { 12 | @include prefixer(animation, $animations, webkit moz spec); 13 | } 14 | 15 | //-----------------------------------------------------------------------// 16 | // @animation-name Sets the animation name. Required 17 | //-----------------------------------------------------------------------// 18 | @mixin animation-name($animation-name) { 19 | @include prefixer(animation-name, $animation-name, $prefixes); 20 | } 21 | 22 | //-----------------------------------------------------------------------// 23 | // @duration Specifies how many seconds or milliseconds an animation takes 24 | // to complete one cycle. Default 0 25 | //-----------------------------------------------------------------------// 26 | @mixin duration($duration: 1s) { 27 | @include prefixer(animation-duration, $duration, $prefixes); 28 | } 29 | 30 | //-----------------------------------------------------------------------// 31 | // @delay Specifies when the animation will start. Default 0 32 | //-----------------------------------------------------------------------// 33 | @mixin delay($delay: .2s) { 34 | @include prefixer(animation-delay, $delay, $prefixes); 35 | } 36 | 37 | //-----------------------------------------------------------------------// 38 | // @function Describes how the animation will progress over one cycle of its 39 | // duration. Default "ease" 40 | //-----------------------------------------------------------------------// 41 | @mixin function($function: ease) { 42 | @include prefixer(animation-timing-function, $function, $prefixes); 43 | } 44 | 45 | //-----------------------------------------------------------------------// 46 | // @count Specifies the number of times an animation is played. Default 1 47 | // This basically isn't supported anywhere right now but its still 48 | // in here for future use. 49 | //-----------------------------------------------------------------------// 50 | @mixin count($count: 1) { 51 | animation-iteration-count: 1; 52 | } 53 | 54 | //-----------------------------------------------------------------------// 55 | // @fill-mode Specifies whether the effects of an animation are apparent 56 | // before the animation starts and after it ends. 57 | //-----------------------------------------------------------------------// 58 | @mixin fill-mode($fill: both) { 59 | @include prefixer(animation-fill-mode, $fill, $prefixes); 60 | } 61 | 62 | //-----------------------------------------------------------------------// 63 | // @visibility Determines whether or not a transformed element is visible when 64 | // it is not facing the screen. 65 | //-----------------------------------------------------------------------// 66 | @mixin visibility($visibility: hidden) { 67 | @include prefixer(animation-backface-visibility, $visibility, $prefixes); 68 | } 69 | 70 | //-----------------------------------------------------------------------// 71 | // @transform Sets the tranform property 72 | //-----------------------------------------------------------------------// 73 | @mixin transform($property: none) { 74 | @include prefixer(transform, $property, $prefixes); 75 | } 76 | 77 | //-----------------------------------------------------------------------// 78 | // @transform-origin Sets the origin for 3d-animations 79 | //-----------------------------------------------------------------------// 80 | @mixin transform-origin($transform-origin: center center) { 81 | @include prefixer(transform-origin, $transform-origin, $prefixes); 82 | } 83 | 84 | //-----------------------------------------------------------------------// 85 | // @transform-style 86 | //-----------------------------------------------------------------------// 87 | @mixin transform-style($transform-style: flat) { 88 | @include prefixer(transform-style, $transform-style, $prefixes); 89 | } 90 | 91 | //-----------------------------------------------------------------------// 92 | // @keyframes 93 | //-----------------------------------------------------------------------// 94 | 95 | @mixin keyframes($name) { 96 | $original-prefix-for-webkit: $prefix-for-webkit; 97 | $original-prefix-for-mozilla: $prefix-for-mozilla; 98 | $original-prefix-for-microsoft: $prefix-for-microsoft; 99 | $original-prefix-for-opera: $prefix-for-opera; 100 | $original-prefix-for-spec: $prefix-for-spec; 101 | 102 | @if $original-prefix-for-webkit { 103 | @include disable-prefix-for-all(); 104 | $prefix-for-webkit: true !global; 105 | @-webkit-keyframes #{$name} { 106 | @content; 107 | } 108 | } 109 | @if $original-prefix-for-mozilla { 110 | @include disable-prefix-for-all(); 111 | $prefix-for-mozilla: true !global; 112 | @-moz-keyframes #{$name} { 113 | @content; 114 | } 115 | } 116 | @if $original-prefix-for-opera { 117 | @include disable-prefix-for-all(); 118 | $prefix-for-opera: true !global; 119 | @-o-keyframes #{$name} { 120 | @content; 121 | } 122 | } 123 | 124 | @if $original-prefix-for-spec { 125 | @include disable-prefix-for-all(); 126 | // Newish Blink browsers recognize the unprefixed @keyframe but still needs the -webkit prefix for transitions 127 | $prefix-for-webkit: true !global; 128 | $prefix-for-spec: true !global; 129 | @keyframes #{$name} { 130 | @content; 131 | } 132 | } 133 | 134 | $prefix-for-webkit: $original-prefix-for-webkit !global; 135 | $prefix-for-mozilla: $original-prefix-for-mozilla !global; 136 | $prefix-for-microsoft: $original-prefix-for-microsoft !global; 137 | $prefix-for-opera: $original-prefix-for-opera !global; 138 | $prefix-for-spec: $original-prefix-for-spec !global; 139 | } 140 | 141 | @mixin prefixer ($property, $value, $prefixes) { 142 | @each $prefix in $prefixes { 143 | @if $prefix == webkit { 144 | @if $prefix-for-webkit { 145 | -webkit-#{$property}: $value; 146 | } 147 | } 148 | @else if $prefix == moz { 149 | @if $prefix-for-mozilla { 150 | -moz-#{$property}: $value; 151 | } 152 | } 153 | @else if $prefix == ms { 154 | @if $prefix-for-microsoft { 155 | -ms-#{$property}: $value; 156 | } 157 | } 158 | @else if $prefix == o { 159 | @if $prefix-for-opera { 160 | -o-#{$property}: $value; 161 | } 162 | } 163 | @else if $prefix == spec { 164 | @if $prefix-for-spec { 165 | #{$property}: $value; 166 | } 167 | } 168 | @else { 169 | @warn "Unrecognized prefix: #{$prefix}"; 170 | } 171 | } 172 | } 173 | 174 | @mixin disable-prefix-for-all() { 175 | $prefix-for-webkit: false !global; 176 | $prefix-for-mozilla: false !global; 177 | $prefix-for-microsoft: false !global; 178 | $prefix-for-opera: false !global; 179 | $prefix-for-spec: false !global; 180 | } -------------------------------------------------------------------------------- /example/bower_components/hmps-animate-scss/partials/_helpers.scss: -------------------------------------------------------------------------------- 1 | //-----------------------------------------------------------------------// 2 | // HELPERS 3 | // 4 | // These are functions that are called from the mixins to setup stuff 5 | // like duration, fill-mode etc. 6 | // 7 | // Credit to @jackilyn who first drafted these over at 8 | // https://github.com/jackilyn/animate.scss 9 | //-----------------------------------------------------------------------// 10 | 11 | @mixin animation($animations...) { 12 | @include prefixer(animation, $animations, webkit moz spec); 13 | } 14 | 15 | //-----------------------------------------------------------------------// 16 | // @animation-name Sets the animation name. Required 17 | //-----------------------------------------------------------------------// 18 | @mixin animation-name($animation-name) { 19 | @include prefixer(animation-name, $animation-name, $prefixes); 20 | } 21 | 22 | //-----------------------------------------------------------------------// 23 | // @duration Specifies how many seconds or milliseconds an animation takes 24 | // to complete one cycle. Default 0 25 | //-----------------------------------------------------------------------// 26 | @mixin duration($duration: 1s) { 27 | @include prefixer(animation-duration, $duration, $prefixes); 28 | } 29 | 30 | //-----------------------------------------------------------------------// 31 | // @delay Specifies when the animation will start. Default 0 32 | //-----------------------------------------------------------------------// 33 | @mixin delay($delay: .2s) { 34 | @include prefixer(animation-delay, $delay, $prefixes); 35 | } 36 | 37 | //-----------------------------------------------------------------------// 38 | // @function Describes how the animation will progress over one cycle of its 39 | // duration. Default "ease" 40 | //-----------------------------------------------------------------------// 41 | @mixin function($function: ease) { 42 | @include prefixer(animation-timing-function, $function, $prefixes); 43 | } 44 | 45 | //-----------------------------------------------------------------------// 46 | // @count Specifies the number of times an animation is played. Default 1 47 | // This basically isn't supported anywhere right now but its still 48 | // in here for future use. 49 | //-----------------------------------------------------------------------// 50 | @mixin count($count: 1) { 51 | animation-iteration-count: 1; 52 | } 53 | 54 | //-----------------------------------------------------------------------// 55 | // @fill-mode Specifies whether the effects of an animation are apparent 56 | // before the animation starts and after it ends. 57 | //-----------------------------------------------------------------------// 58 | @mixin fill-mode($fill: both) { 59 | @include prefixer(animation-fill-mode, $fill, $prefixes); 60 | } 61 | 62 | //-----------------------------------------------------------------------// 63 | // @visibility Determines whether or not a transformed element is visible when 64 | // it is not facing the screen. 65 | //-----------------------------------------------------------------------// 66 | @mixin visibility($visibility: hidden) { 67 | @include prefixer(animation-backface-visibility, $visibility, $prefixes); 68 | } 69 | 70 | //-----------------------------------------------------------------------// 71 | // @transform Sets the tranform property 72 | //-----------------------------------------------------------------------// 73 | @mixin transform($property: none) { 74 | @include prefixer(transform, $property, $prefixes); 75 | } 76 | 77 | //-----------------------------------------------------------------------// 78 | // @transform-origin Sets the origin for 3d-animations 79 | //-----------------------------------------------------------------------// 80 | @mixin transform-origin($transform-origin: center center) { 81 | @include prefixer(transform-origin, $transform-origin, $prefixes); 82 | } 83 | 84 | //-----------------------------------------------------------------------// 85 | // @transform-style 86 | //-----------------------------------------------------------------------// 87 | @mixin transform-style($transform-style: flat) { 88 | @include prefixer(transform-style, $transform-style, $prefixes); 89 | } 90 | 91 | //-----------------------------------------------------------------------// 92 | // @keyframes 93 | //-----------------------------------------------------------------------// 94 | 95 | @mixin keyframes($name) { 96 | $original-prefix-for-webkit: $prefix-for-webkit; 97 | $original-prefix-for-mozilla: $prefix-for-mozilla; 98 | $original-prefix-for-microsoft: $prefix-for-microsoft; 99 | $original-prefix-for-opera: $prefix-for-opera; 100 | $original-prefix-for-spec: $prefix-for-spec; 101 | 102 | @if $original-prefix-for-webkit { 103 | @include disable-prefix-for-all(); 104 | $prefix-for-webkit: true !global; 105 | @-webkit-keyframes #{$name} { 106 | @content; 107 | } 108 | } 109 | @if $original-prefix-for-mozilla { 110 | @include disable-prefix-for-all(); 111 | $prefix-for-mozilla: true !global; 112 | @-moz-keyframes #{$name} { 113 | @content; 114 | } 115 | } 116 | @if $original-prefix-for-opera { 117 | @include disable-prefix-for-all(); 118 | $prefix-for-opera: true !global; 119 | @-o-keyframes #{$name} { 120 | @content; 121 | } 122 | } 123 | 124 | @if $original-prefix-for-spec { 125 | @include disable-prefix-for-all(); 126 | // Newish Blink browsers recognize the unprefixed @keyframe but still needs the -webkit prefix for transitions 127 | $prefix-for-webkit: true !global; 128 | $prefix-for-spec: true !global; 129 | @keyframes #{$name} { 130 | @content; 131 | } 132 | } 133 | 134 | $prefix-for-webkit: $original-prefix-for-webkit !global; 135 | $prefix-for-mozilla: $original-prefix-for-mozilla !global; 136 | $prefix-for-microsoft: $original-prefix-for-microsoft !global; 137 | $prefix-for-opera: $original-prefix-for-opera !global; 138 | $prefix-for-spec: $original-prefix-for-spec !global; 139 | } 140 | 141 | @mixin prefixer ($property, $value, $prefixes) { 142 | @each $prefix in $prefixes { 143 | @if $prefix == webkit { 144 | @if $prefix-for-webkit { 145 | -webkit-#{$property}: $value; 146 | } 147 | } 148 | @else if $prefix == moz { 149 | @if $prefix-for-mozilla { 150 | -moz-#{$property}: $value; 151 | } 152 | } 153 | @else if $prefix == ms { 154 | @if $prefix-for-microsoft { 155 | -ms-#{$property}: $value; 156 | } 157 | } 158 | @else if $prefix == o { 159 | @if $prefix-for-opera { 160 | -o-#{$property}: $value; 161 | } 162 | } 163 | @else if $prefix == spec { 164 | @if $prefix-for-spec { 165 | #{$property}: $value; 166 | } 167 | } 168 | @else { 169 | @warn "Unrecognized prefix: #{$prefix}"; 170 | } 171 | } 172 | } 173 | 174 | @mixin disable-prefix-for-all() { 175 | $prefix-for-webkit: false !global; 176 | $prefix-for-mozilla: false !global; 177 | $prefix-for-microsoft: false !global; 178 | $prefix-for-opera: false !global; 179 | $prefix-for-spec: false !global; 180 | } -------------------------------------------------------------------------------- /example/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | --------------------------------------------------------------------------------