mirror of
https://github.com/grafana/grafana.git
synced 2024-12-02 05:29:42 -06:00
commit
13720759a5
@ -1,5 +1,6 @@
|
||||
// MIXINS
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/animations";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/grid";
|
||||
|
@ -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
|
||||
// -------------------------
|
||||
|
@ -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%);
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
25
public/sass/mixins/_animations.scss
Normal file
25
public/sass/mixins/_animations.scss
Normal 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};
|
||||
}
|
Loading…
Reference in New Issue
Block a user