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

Matt weekend ui
This commit is contained in:
Matt Toback 2016-02-20 15:00:44 -05:00
commit 13720759a5
5 changed files with 33 additions and 5 deletions

View File

@ -1,5 +1,6 @@
// MIXINS
@import "mixins/mixins";
@import "mixins/animations";
@import "mixins/buttons";
@import "mixins/breakpoints";
@import "mixins/grid";

View File

@ -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
// -------------------------

View File

@ -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%);

View File

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

View File

@ -0,0 +1,25 @@
@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};
}