mirror of https://github.com/apache/superset.git
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:
parent
2fd37b18e3
commit
6fde7f8984
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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({
|
||||
|
|
Loading…
Reference in New Issue