Updating asss lint stuff with other scss improvements

webapp/sass/utils/_animations.scss

@@ -1,19 +1,21 @@
 @charset 'UTF-8';
 
-@-webkit-keyframes spin2 {
-    from {
-        -webkit-transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(360deg);
-    }
-}
-
 @keyframes spin {
     from {
         transform: scale(1) rotate(0deg);
     }
+
     to {
         transform: scale(1) rotate(360deg);
     }
 }
+
+@keyframes highlight {
+    from {
+        @include alpha-property(background, $yellow, .5);
+    }
+
+    to {
+        background: none;
+    }
+}

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);
 }

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;
+}

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';

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;