5 files changed, 55 insertions, 12 deletions
diff --git a/webapp/sass/utils/_animations.scss b/webapp/sass/utils/_animations.scss
index 767e30847..ffdbcb219 100644
--- a/webapp/sass/utils/_animations.scss
+++ b/webapp/sass/utils/_animations.scss
@@ -1,19 +1,21 @@
 @charset 'UTF-8';
 
-@-webkit-keyframes spin2 {
+@keyframes spin {
     from {
-        -webkit-transform: rotate(0deg);
+        transform: scale(1) rotate(0deg);
     }
+
     to {
-        -webkit-transform: rotate(360deg);
+        transform: scale(1) rotate(360deg);
     }
 }
 
-@keyframes spin {
+@keyframes highlight {
     from {
-        transform: scale(1) rotate(0deg);
+        @include alpha-property(background, $yellow, .5);
     }
+
     to {
-        transform: scale(1) rotate(360deg);
+        background: none;
     }
 }
diff --git a/webapp/sass/utils/_functions.scss b/webapp/sass/utils/_functions.scss
index 9013920fa..baedd72c5 100644
--- a/webapp/sass/utils/_functions.scss
+++ b/webapp/sass/utils/_functions.scss
@@ -4,6 +4,20 @@
 	@return #{$pixels/$context}em
 }
 
+@function alpha-color($color, $amount) {
+    @return rgba($color, $amount)
+}
+
 %popover-box-shadow {
     @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}
+
+%font-awesome {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
 }
 \ No newline at end of file
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index 28723e1a5..6e4488fca 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -1,8 +1,29 @@
 @charset 'UTF-8';
 
 @mixin file-icon($path) {
-    background: #fff url($path);
+    @include background-size(60px auto);
+    background-color: $white;
+    background-image: url($path);
     background-position: center;
     background-repeat: no-repeat;
-    @include background-size(60px auto);
 }
+
+@mixin alpha-property($property, $color, $opacity) {
+    #{$property}: rgba($color, $opacity);
+}
+
+@mixin font-smoothing($value: antialiased) {
+    @if $value == antialiased {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    @else {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}
+
+@mixin cursor($value) {
+    cursor: -webkit-$value;
+    cursor: zoom-$value;
+}
+\ No newline at end of file
diff --git a/webapp/sass/utils/_module.scss b/webapp/sass/utils/_module.scss
index e7f0c0c46..5dddcaef7 100644
--- a/webapp/sass/utils/_module.scss
+++ b/webapp/sass/utils/_module.scss
@@ -1,5 +1,5 @@
 // Only for combining all the files in this folder
 @import 'variables';
-@import 'animations';
 @import 'functions';
 @import 'mixins';
+@import 'animations';
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index 065c37a17..345ab11e8 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/webapp/sass/utils/_variables.scss
@@ -1,10 +1,16 @@
 @charset 'UTF-8';
 
 // Color Variables
-$color--primary: rgb(35, 137, 215);
-$color--primary--hover: darken($color--primary, 10%);
+$primary-color: rgb(35, 137, 215);
+$primary-color--hover: darken($primary-color, 10%);
 $bg--gray: rgb(245, 245, 245);
-$bg--white: rgb(255, 255, 255);
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
+$red: rgb(229, 101, 101);
+$yellow: rgb(255, 255, 0);
+$light-gray: rgba(0, 0, 0, .06);
+$gray: rgba(0, 0, 0, .3);
+$dark-gray: rgba(0, 0, 0, .5);
 
 // Page Variables
 $border-gray: 1px solid #ddd;