diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index bed1ef0e270..00b6fe68fc8 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -5,9 +5,9 @@
-
-
-
+
+
+
-
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 95586c9b69f..1c06f0bdb9d 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -213,7 +213,7 @@ $wellBackground: #131517;
$navbarHeight: 52px;
$navbarBackgroundHighlight: $dark-3;
-$navbarBackground: $dark-3;
+$navbarBackground: $panel-bg;
$navbarBorder: 1px solid $body-bg;
$navbarText: $gray-4;
@@ -225,7 +225,7 @@ $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
-$navbarButtonBackground: lighten($navbarBackground, 3%);
+$navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu
@@ -233,6 +233,13 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $dark-2;
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $body-bg;
+$menu-dropdown-hover-bg: $dark-2;
+$menu-dropdown-border-color: $dark-4;
+
+
// Pagination
// -------------------------
$paginationBackground: $body-bg;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 8e35aa60375..2249b57f9c0 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -187,6 +187,12 @@ $input-invalid-border-color: lighten($red, 5%);
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $white;
+$menu-dropdown-hover-bg: $gray-6;
+$menu-dropdown-border-color: $tight-form-border;
+
// search
$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
@@ -206,7 +212,6 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6;
-
// COMPONENT VARIABLES
// --------------------------------------------------
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 6031c05db3f..679dc6f0527 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -90,8 +90,36 @@
}
}
}
+
+ &--navbar {
+ top: 100%;
+ min-width: 100%;
+ }
+
+ &--navbar,
+ &--sidemenu {
+ background: $menu-dropdown-bg;
+ margin-top: 0px;
+
+ > li > a {
+ padding: $spacer/2 $spacer;
+ border-left: 2px solid transparent;
+
+ i {
+ display: inline-block;
+ padding-right: 21px;
+ }
+
+ &:hover {
+ @include left-brand-border-gradient();
+ color: $link-hover-color;
+ background: $input-label-bg !important;
+ }
+ }
+ }
}
+
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 35626986a5f..354f9fb3d47 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -60,9 +60,8 @@
position: relative;
float: left;
margin: 0;
- border-right: 1px solid $tight-form-border;
background-color: $navbarButtonBackground;
- padding: 0.4rem 1.0rem 0.4rem 1rem;
+ padding: 0.4rem 2.0rem 0.4rem 1rem;
min-height:: $navbarHeight;
.fa-caret-down {
@@ -110,7 +109,6 @@
display: block;
margin: 0;
font-size: 1.4rem;
- border-right: 1px solid $tight-form-border;
color: darken($link-color, 5%);
background-color: $navbarButtonBackground;
font-size: $font-size-lg;
@@ -148,29 +146,6 @@
position: relative;
}
-.dropdown-menu.dropdown-menu--navbar {
- top: 100%;
- min-width: 100%;
- margin-top: 0px;
-
- li a {
- padding: $spacer/2 $spacer;
- border-left: 2px solid $side-menu-bg;
- background: $side-menu-bg;
-
- i {
- display: inline-block;
- padding-right: 21px;
- }
-
- &:hover {
- @include left-brand-border-gradient();
- color: $link-hover-color;
- background: $input-label-bg;
- }
- }
-}
-
.navbar-section-wrapper {
position: relative;
float: left;
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index ca2b4969e00..3617a935340 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -56,14 +56,21 @@
background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient();
+ .sidemenu-item {
+ border-top: 1px solid $menu-dropdown-border-color;
+ border-bottom: 1px solid $menu-dropdown-border-color;
+ }
+
.dropdown-menu {
+ margin: 0;
display: block;
opacity: 0;
top: 0px;
+ border: 1px solid $dark-4;
+ border-left: none;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
- left: $side-menu-width - 5px;
- background-color: $side-menu-bg;
+ left: $side-menu-width - 2px;
@include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: -9999;
}
@@ -82,19 +89,6 @@
}
}
-.sidemenu-main-link {
- font-size: 16px;
-}
-
-.sidemenu-item-text {
- width: 110px;
- display: inline-block;
- vertical-align: middle;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
.icon-circle {
width: 40px;
height: 40px;
@@ -104,9 +98,17 @@
opacity: .7;
position: relative;
left: 7px;
- top: 5px;
font-size: 150%;
}
+
+ .fa {
+ top: 2px;
+ }
+
+ .icon-gf {
+ top: 5px;
+ }
+
img {
left: 7px;
position: relative;
@@ -118,23 +120,9 @@
line-height: 47px;
padding: 0px 10px 0px 10px;
display: block;
- border-left: 1px solid transparent;
position: relative;
-
- .sidemenu-item-text {
- padding-left: 11px;
- position: absolute;
- display: none;
- opacity: 0;
- }
-
- &:hover {
- .sidemenu-item-text {
- display: block;
- opacity: 1;
- transition: opacity 150ms ease-in-out;
- }
- }
+ font-size: 16px;
+ border: 1px solid transparent;
img {
border-radius: 50%;
@@ -145,9 +133,10 @@
}
.side-menu-header {
- padding: 8px 10px 8px 10px;
+ padding: 10px;
background-color: $side-menu-item-hover-bg;
font-size: 18px;
+ border-bottom: 1px solid $menu-dropdown-border-color;
}
.sidemenu-org-section .dropdown-menu-title {