mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix(home): Show home page tabs as pills instead of links (#20257)
* fix(home): make to update the css style of links * fix(home): make to fix lint issue * fix(home): make to remove underline when tab is active * fix(homes): make to fix the issue of tab * fix(home): make to move styles to a tag
This commit is contained in:
parent
ca526e63c8
commit
a833674a8d
@ -25,8 +25,8 @@ const MenuItem = styled(AntdMenu.Item)`
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.ant-menu-item {
|
&.ant-menu-item {
|
||||||
height: ${({ theme }) => theme.gridUnit * 7}px;
|
height: ${({ theme }) => theme.gridUnit * 8}px;
|
||||||
line-height: ${({ theme }) => theme.gridUnit * 7}px;
|
line-height: ${({ theme }) => theme.gridUnit * 8}px;
|
||||||
a {
|
a {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
transition: background-color ${({ theme }) => theme.transitionTiming}s;
|
transition: background-color ${({ theme }) => theme.transitionTiming}s;
|
||||||
|
@ -97,7 +97,8 @@ const StyledHeader = styled.div`
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: ${({ theme }) => theme.gridUnit * 4}px;
|
padding: ${({ theme }) => theme.gridUnit * 2}px
|
||||||
|
${({ theme }) => theme.gridUnit * 4}px;
|
||||||
line-height: ${({ theme }) => theme.gridUnit * 5}px;
|
line-height: ${({ theme }) => theme.gridUnit * 5}px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -112,7 +113,8 @@ const StyledHeader = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active a {
|
&.active a {
|
||||||
text-decoration: underline;
|
background: ${({ theme }) => theme.colors.secondary.light4};
|
||||||
|
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,7 +124,8 @@ const StyledHeader = styled.div`
|
|||||||
li > a:hover,
|
li > a:hover,
|
||||||
li > a:focus,
|
li > a:focus,
|
||||||
li > div:hover,
|
li > div:hover,
|
||||||
div > div:hover {
|
div > div:hover,
|
||||||
|
div > a:hover {
|
||||||
background: ${({ theme }) => theme.colors.secondary.light4};
|
background: ${({ theme }) => theme.colors.secondary.light4};
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-radius: ${({ theme }) => theme.borderRadius}px;
|
border-radius: ${({ theme }) => theme.borderRadius}px;
|
||||||
|
Loading…
Reference in New Issue
Block a user