pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: add fade transition to bottom border on navbar menu items (#10402) 

* Add fade transition to bottom border on navbar menu items

* lint fix

* use theme variables

* fix spec
This commit is contained in:
Moriah Kreeger 2020-07-23 12:49:28 -07:00 committed by GitHub
parent 2fd37b18e3
commit 6fde7f8984
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset-frontend/spec/javascripts/components/Menu_spec.jsx
View File

@ -19,6 +19,7 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { Nav } from 'react-bootstrap';
import { supersetTheme, ThemeProvider } from '@superset-ui/style';
import Menu from 'src/components/Menu/Menu';
@ -156,7 +157,10 @@ describe('Menu', () => {
...overrideProps,
};
const versionedWrapper = mount(<Menu {...props} />);
const versionedWrapper = mount(<Menu {...props} />, {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
expect(versionedWrapper.find('.version-info div')).toHaveLength(2);
});

22
superset-frontend/src/components/Menu/Menu.jsx
View File

@ -59,6 +59,28 @@ const StyledHeader = styled.header`
flex-direction: column;
justify-content: center;
}
.navbar-nav > li > a {
&:after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: ${({ theme }) => theme.colors.primary.base};
opacity: 0;
transition: opacity ${({ theme }) => theme.transitionTiming * 2}s;
}
&:hover {
border-bottom: none;
&:after {
opacity: 1;
}
}
}
`;
export default function Menu({