Merge branch 'develop'

jacob-meacham · Jun 9, 2015 · a95cb6e · a95cb6e
2 parents e945a2a + b403cdb
commit a95cb6e
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 62 deletions.
diff --git a/dist/angular-notification-icons.css b/dist/angular-notification-icons.css
@@ -27,144 +27,167 @@
 }
 .angular-notifications-icon.wide-icon {
   border-radius: 30% / 50%;
+  background-clip: padding-box;
 }
 .angular-notifications-icon.fade {
-  -webkit-animation: notification_fade_in 0.5s;
-          animation: notification_fade_in 0.5s;
+  -webkit-animation: notification-fade-in 0.5s;
+  animation: notification-fade-in 0.5s;
 }
 .angular-notifications-icon.bounce {
-  -webkit-animation: notification_bounce 0.5s;
-          animation: notification_bounce 0.5s;
+  -webkit-animation: notification-bounce 0.5s;
+  animation: notification-bounce 0.5s;
 }
 .angular-notifications-icon.grow {
-  -webkit-animation: notification_grow 0.5s;
-          animation: notification_grow 0.5s;
+  -webkit-animation: notification-grow 0.5s;
+  animation: notification-grow 0.5s;
 }
 .angular-notifications-icon.shake {
-  -webkit-animation: notification_shake 0.5s;
-          animation: notification_shake 0.5s;
+  -webkit-animation: notification-shake 0.5s;
+  animation: notification-shake 0.5s;
 }
-@-webkit-keyframes notification_fade_in {
+@-webkit-keyframes notification-fade-in {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
-@keyframes notification_fade_in {
+@keyframes notification-fade-in {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
-@-webkit-keyframes notification_bounce {
+@-webkit-keyframes notification-bounce {
   30% {
     -webkit-transform: perspective(1px) translate(0, -8px);
-            transform: perspective(1px) translate(0, -8px);
+    -ms-transform: perspective(1px) translate(0, -8px);
+    transform: perspective(1px) translate(0, -8px);
   }
   60% {
     -webkit-transform: perspective(1px) translate(0, 0);
-            transform: perspective(1px) translate(0, 0);
+    -ms-transform: perspective(1px) translate(0, 0);
+    transform: perspective(1px) translate(0, 0);
   }
   80% {
     -webkit-transform: perspective(1px) translate(0, -5px);
-            transform: perspective(1px) translate(0, -5px);
+    -ms-transform: perspective(1px) translate(0, -5px);
+    transform: perspective(1px) translate(0, -5px);
   }
   to {
     -webkit-transform: perspective(1px) translate(0, 0);
-            transform: perspective(1px) translate(0, 0);
+    -ms-transform: perspective(1px) translate(0, 0);
+    transform: perspective(1px) translate(0, 0);
   }
 }
-@keyframes notification_bounce {
+@keyframes notification-bounce {
   30% {
     -webkit-transform: perspective(1px) translate(0, -8px);
-            transform: perspective(1px) translate(0, -8px);
+    -ms-transform: perspective(1px) translate(0, -8px);
+    transform: perspective(1px) translate(0, -8px);
   }
   60% {
     -webkit-transform: perspective(1px) translate(0, 0);
-            transform: perspective(1px) translate(0, 0);
+    -ms-transform: perspective(1px) translate(0, 0);
+    transform: perspective(1px) translate(0, 0);
   }
   80% {
     -webkit-transform: perspective(1px) translate(0, -5px);
-            transform: perspective(1px) translate(0, -5px);
+    -ms-transform: perspective(1px) translate(0, -5px);
+    transform: perspective(1px) translate(0, -5px);
   }
   to {
     -webkit-transform: perspective(1px) translate(0, 0);
-            transform: perspective(1px) translate(0, 0);
+    -ms-transform: perspective(1px) translate(0, 0);
+    transform: perspective(1px) translate(0, 0);
   }
 }
-@-webkit-keyframes notification_grow {
+@-webkit-keyframes notification-grow {
   30% {
     -webkit-transform: scale(1.2);
-            transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
   }
   60% {
     -webkit-transform: scale(0.8);
-            transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
-@keyframes notification_grow {
+@keyframes notification-grow {
   30% {
     -webkit-transform: scale(1.2);
-            transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
   }
   60% {
     -webkit-transform: scale(0.8);
-            transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
   }
   to {
     -webkit-transform: scale(1);
             transform: scale(1);
   }
 }
-@-webkit-keyframes notification_shake {
+@-webkit-keyframes notification-shake {
   20% {
     -webkit-transform: rotate(20deg);
-            transform: rotate(20deg);
+    -ms-transform: rotate(20deg);
+    transform: rotate(20deg);
   }
   40% {
     -webkit-transform: rotate(-20deg);
-            transform: rotate(-20deg);
+    -ms-transform: rotate(-20deg);
+    transform: rotate(-20deg);
   }
   60% {
     -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
+    -ms-transform: rotate(10deg);
+    transform: rotate(10deg);
   }
   80% {
     -webkit-transform: rotate(-10deg);
-            transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
   }
   to {
     -webkit-transform: rotate(0);
-            transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
   }
 }
-@keyframes notification_shake {
+@keyframes notification-shake {
   20% {
     -webkit-transform: rotate(20deg);
-            transform: rotate(20deg);
+    -ms-transform: rotate(20deg);
+    transform: rotate(20deg);
   }
   40% {
     -webkit-transform: rotate(-20deg);
-            transform: rotate(-20deg);
+    -ms-transform: rotate(-20deg);
+    transform: rotate(-20deg);
   }
   60% {
     -webkit-transform: rotate(10deg);
-            transform: rotate(10deg);
+    -ms-transform: rotate(10deg);
+    transform: rotate(10deg);
   }
   80% {
     -webkit-transform: rotate(-10deg);
-            transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
   }
   to {
     -webkit-transform: rotate(0);
-            transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
   }
 }
diff --git a/dist/angular-notification-icons.min.css b/dist/angular-notification-icons.min.css
diff --git a/gulp/build.js b/gulp/build.js
@@ -29,9 +29,7 @@ module.exports = function(options) {
       .pipe($.rename('angular-notification-icons.min.js'))
       .pipe(gulp.dest(options.dist));
 
-    return gulp.src(options.src + '/**/*.less')
-      .pipe($.concat('angular-notification-icons.less'))
-      .pipe(gulp.dest(options.tmp))
+    return gulp.src(options.src + '/css/angular-notification-icons.less')
       .pipe($.less()).on('error', options.errorHandler('Less'))
       .pipe($.autoprefixer()).on('error', options.errorHandler('Autoprefixer'))
       .pipe($.rename('angular-notification-icons.css'))

diff --git a/src/css/angular-notification-icons.less b/src/css/angular-notification-icons.less
@@ -1,3 +1,5 @@
+@import "./prefixer.less";
+
 .angular-notifications-container {
     position: relative;
     display: table-cell;
@@ -26,26 +28,31 @@
 }
 
 .angular-notifications-icon.wide-icon {
-    border-radius: ~"30% / 50%";
+    .border-radius(~"30% / 50%");
 }
 
 .angular-notifications-icon.fade {
-  animation: notification_fade_in 0.5s;
+  .animation(notification-fade-in 0.5s);
 }
 
 .angular-notifications-icon.bounce {
-  animation: notification_bounce 0.5s;
+  .animation(notification-bounce 0.5s);
 }
 
 .angular-notifications-icon.grow {
-  animation: notification_grow 0.5s;
+  .animation(notification-grow 0.5s);
 }
 
 .angular-notifications-icon.shake {
-  animation: notification_shake 0.5s;
+  .animation(notification-shake 0.5s);
 }
 
-@keyframes notification_fade_in {
+@-webkit-keyframes notification-fade-in {.fade-frames;}
+@-moz-keyframes notification-fade-in {.fade-frames;}
+@-ms-keyframes notification-fade-in {.fade-frames;}
+@-o-keyframes notification-fade-in {.fade-frames;}
+@keyframes notification-fade-in {.fade-frames;}
+.fade-frames () {
     from {
         opacity: 0;
     }
@@ -55,56 +62,71 @@
     }
 }
 
-@keyframes notification_bounce {
+@-webkit-keyframes notification-bounce {.bounce-frames;}
+@-moz-keyframes notification-bounce {.bounce-frames;}
+@-ms-keyframes notification-bounce {.bounce-frames;}
+@-o-keyframes notification-bounce {.bounce-frames;}
+@keyframes notification-bounce {.bounce-frames;}
+.bounce-frames () {
     30% {
-        transform: perspective(1px) translate(0, -8px);
+        .translate(0, -8px);
     }
 
     60% {
-        transform: perspective(1px) translate(0, 0);
+        .translate(0, 0);
     }
 
     80% {
-        transform: perspective(1px) translate(0, -5px);
+        .translate(0, -5px);
     }
 
     to {
-        transform: perspective(1px) translate(0, 0);
+        .translate(0, 0);
     }
 }
 
-@keyframes notification_grow {
+@-webkit-keyframes notification-grow {.grow-frames;}
+@-moz-keyframes notification-grow {.grow-frames;}
+@-ms-keyframes notification-grow {.grow-frames;}
+@-o-keyframes notification-grow {.grow-frames;}
+@keyframes notification-grow {.grow-frames;}
+.grow-frames () {
     30% {
-        transform: scale(1.2);
+        .scale(1.2);
     }
 
     60% {
-        transform: scale(0.8);
+        .scale(0.8);
     }
 
     to {
         transform: scale(1);
     }
 }
 
-@keyframes notification_shake {
+@-webkit-keyframes notification-shake {.shake-frames;}
+@-moz-keyframes notification-shake {.shake-frames;}
+@-ms-keyframes notification-shake {.shake-frames;}
+@-o-keyframes notification-shake {.shake-frames;}
+@keyframes notification-shake {.shake-frames;}
+.shake-frames () {
     20% {
-        transform: rotate(20deg);
+        .rotate(20deg);
     }
 
     40% {
-        transform: rotate(-20deg);
+        .rotate(-20deg);
     }
 
     60% {
-        transform: rotate(10deg);
+        .rotate(10deg);
     }
 
     80% {
-        transform: rotate(-10deg);
+        .rotate(-10deg);
     }
 
     to {
-        transform: rotate(0);
+        .rotate(0);
     }
 }
diff --git a/src/css/prefixer.less b/src/css/prefixer.less
@@ -0,0 +1,44 @@
+//  Credit to LESS Elements for the motivation and
+//  to CSS3Please.com for implementation.
+//
+//  Copyright (c) 2012 Joel Sutherland
+//  MIT Licensed:
+//  http://www.opensource.org/licenses/mit-license.php
+//
+//---------------------------------------------------
+// This is a stripped down version of LESS-Prefixer (http://lessprefixer.com/)
+
+.animation(@args) {
+    -webkit-animation: @args;
+    -moz-animation: @args;
+    -ms-animation: @args;
+    -o-animation: @args;
+    animation: @args;
+}
+
+.border-radius(@args) {
+    -webkit-border-radius: @args;
+    border-radius: @args;
+
+    background-clip: padding-box;
+}
+
+.transform(@args) {
+    -webkit-transform: @args;
+    -moz-transform: @args;
+    -ms-transform: @args;
+    -o-transform: @args;
+    transform: @args;
+}
+
+.rotate(@deg) {
+    .transform(rotate(@deg));
+}
+
+.scale(@factor) {
+    .transform(scale(@factor));
+}
+
+.translate(@x, @y) {
+    .transform(perspective(1px) translate(@x, @y));
+}