IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15057 from grafana/hugoh/sidemenu-dropdown-looks-funky-in-light-theme

Browse Source 
Makes the clickable side menu header look great in light theme again
This commit is contained in:
Torkel Ödegaard 2019-01-26 07:05:28 +01:00 committed by GitHub
commit aaad9e3e49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/sidemenu/SideMenuDropDown.tsx
View File

@ -10,7 +10,7 @@ const SideMenuDropDown: FC<Props> = props => {
return ( return (
<ul className="dropdown-menu dropdown-menu--sidemenu" role="menu"> <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
<li className="side-menu-header"> <li className="side-menu-header">
<a href={link.url}> <a className="side-menu-header-link" href={link.url}>
<span className="sidemenu-item-text">{link.text}</span> <span className="sidemenu-item-text">{link.text}</span>
</a> </a>
</li> </li>

8
public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap
View File

@ -8,7 +8,9 @@ exports[`Render should render children 1`] = `
<li <li
className="side-menu-header" className="side-menu-header"
> >
<a> <a
className="side-menu-header-link"
>
<span <span
className="sidemenu-item-text" className="sidemenu-item-text"
> >
@ -51,7 +53,9 @@ exports[`Render should render component 1`] = `
<li <li
className="side-menu-header" className="side-menu-header"
> >
<a> <a
className="side-menu-header-link"
>
<span <span
className="sidemenu-item-text" className="sidemenu-item-text"
> >

9
public/sass/components/_sidemenu.scss
View File

@ -149,12 +149,19 @@
color: #ebedf2; color: #ebedf2;
} }
.side-menu-header > a { .side-menu-header-link {
// Removes left-brand-border-gradient from link // Removes left-brand-border-gradient from link
color: #ebedf2 !important;
border: none !important; border: none !important;
padding: 0 !important; padding: 0 !important;
} }
.dropdown-menu--sidemenu > li > .side-menu-header-link:hover {
// Makes sure it looks good on light theme
color: #fff !important;
background-color: $side-menu-item-hover-bg !important;
}
.sidemenu-subtitle { .sidemenu-subtitle {
padding: 0.5rem 1rem 0.5rem; padding: 0.5rem 1rem 0.5rem;
font-size: $font-size-sm; font-size: $font-size-sm;