hover animations for award buttons, buttons, dropdowns, rows in file list,...

hover animations for award buttons, buttons, dropdowns, rows in file list, links, navigation tabs, labels

app/assets/stylesheets/framework/animations.scss

@@ -50,3 +50,62 @@
 .pulse {
   @include webkit-prefix(animation-name, pulse);
 }
+
+/*
+* General hover animations
+*/
+
+
+// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
+// Usage:   @include transition(width, height 0.3s ease-in-out);
+// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
+//          transition(width 0.2s, height 0.3s ease-in-out);
+//
+// Pass in any number of transitions
+@mixin transition($transitions...) {
+  $unfoldedTransitions: ();
+  @each $transition in $transitions {
+    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
+  }
+
+  transition: $unfoldedTransitions;
+}
+
+@function unfoldTransition ($transition) {
+  // Default values
+  $property: all;
+  $duration: $general-hover-transition-duration;
+  $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
+  $delay: null; // Browser default is 0, which is what we want
+  $defaultProperties: ($property, $duration, $easing, $delay);
+
+  // Grab transition properties if they exist
+  $unfoldedTransition: ();
+  @for $i from 1 through length($defaultProperties) {
+    $p: null;
+    @if $i <= length($transition) {
+      $p: nth($transition, $i)
+    } @else {
+      $p: nth($defaultProperties, $i)
+    }
+    $unfoldedTransition: append($unfoldedTransition, $p);
+  }
+
+  @return $unfoldedTransition;
+}
+
+.btn {
+  @include transition(background-color, border-color, color, box-shadow);
+}
+
+a {
+  @include transition(background-color, color, border);
+}
+
+.color-label {
+  @include transition(box-shadow);
+}
+
+.tree-table td {
+  @include transition(background-color, border-color);
+}

app/assets/stylesheets/framework/nav.scss

@@ -101,7 +101,7 @@
         &:hover,
         &:active,
         &:focus {
-          border-bottom: none;
+          border-color: transparent;
         }
       }
     }

app/assets/stylesheets/framework/variables.scss

@@ -182,6 +182,9 @@ $count-arrow-border: #dce0e5;
 $save-project-loader-color: #555;
 $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
+$general-hover-transition-duration: 150ms;
+$general-hover-transition-curve: linear;
+
 /*
 * Common component specific colors

app/assets/stylesheets/pages/labels.scss

@@ -106,6 +106,10 @@
 .color-label {
   padding: 3px 7px;
   border-radius: $label-border-radius;
+
+  &:hover {
+    box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1);
+  }
 }
 .dropdown-labels-error {
@@ -203,6 +207,10 @@
     z-index: 3;
     border-radius: $label-border-radius;
     padding: 6px 10px 6px 9px;
+
+    &:hover {
+      box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1);
+    }
   }
   .btn {