Merge pull request #4089 from grafana/matt-weekend-ui

Matt weekend ui

public/sass/_grafana.scss

 // MIXINS
 @import "mixins/mixins";
+@import "mixins/animations";
 @import "mixins/buttons";
 @import "mixins/breakpoints";
 @import "mixins/grid";

public/sass/_variables.dark.scss

@@ -207,6 +207,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $dark-4;
+$side-menu-opacity:		  0.97;
 
 // Pagination
 // -------------------------

public/sass/_variables.light.scss

@@ -162,6 +162,7 @@ $input-label-bg:	        	     $gray-5;
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
+$side-menu-opacity:		  0.97;
 
 // search
 $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);

public/sass/components/_sidemenu.scss

@@ -7,7 +7,7 @@
   top: 52px;
   left: 0;
   width: $side-menu-width;
-  background-color: $side-menu-bg;
+  background-color: rgba($side-menu-bg,$side-menu-opacity);
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   visibility: hidden;
@@ -65,15 +65,15 @@
         opacity: 0;
         top: 0px;
         left: $side-menu-width;
-        background-color: $side-menu-bg;
-        animation: dropdown-anim 100ms ease-in-out 150ms forwards;
+        background-color: rgba($side-menu-bg,$side-menu-opacity);
+        @include animation('dropdown-anim 100ms ease-in-out 100ms forwards');
         z-index: -9999;
       }
     }
   }
 }
 
-@keyframes dropdown-anim {
+@include keyframes(dropdown-anim) {
   0% {
     display: none;
     opacity: 0;
@@ -85,7 +85,7 @@
   }
   100% {
     opacity: 1;
-    transform: translate3d(0,0,0)
+    transform: translate3d(0,0,0);
   }
 }
 

public/sass/mixins/_animations.scss

+@mixin keyframes($animation-name) {
+    @-webkit-keyframes #{$animation-name} {
+        @content;
+    }
+    @-moz-keyframes #{$animation-name} {
+        @content;
+    }  
+    @-ms-keyframes #{$animation-name} {
+        @content;
+    }
+    @-o-keyframes #{$animation-name} {
+        @content;
+    }  
+    @keyframes #{$animation-name} {
+        @content;
+    }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};      
+}