mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: Fix styling in SqlLab when tabs overflow (#11287)
* Fix styling in SqlLab when tabs overflow * Use theme variables
This commit is contained in:
parent
fc03549299
commit
9aef9c5764
@ -58,6 +58,12 @@ const defaultProps = {
|
|||||||
|
|
||||||
let queryCount = 1;
|
let queryCount = 1;
|
||||||
|
|
||||||
|
const TabTitleWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`;
|
||||||
|
|
||||||
const TabTitle = styled.span`
|
const TabTitle = styled.span`
|
||||||
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
`;
|
`;
|
||||||
@ -354,12 +360,12 @@ class TabbedSqlEditors extends React.PureComponent {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const tabHeader = (
|
const tabHeader = (
|
||||||
<>
|
<TabTitleWrapper>
|
||||||
<div data-test="dropdown-toggle-button">
|
<div data-test="dropdown-toggle-button">
|
||||||
<Dropdown overlay={menu} trigger={['click']} />
|
<Dropdown overlay={menu} trigger={['click']} />
|
||||||
</div>
|
</div>
|
||||||
<TabTitle>{qe.title}</TabTitle> <TabStatusIcon tabState={state} />{' '}
|
<TabTitle>{qe.title}</TabTitle> <TabStatusIcon tabState={state} />{' '}
|
||||||
</>
|
</TabTitleWrapper>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<EditableTabs.TabPane
|
<EditableTabs.TabPane
|
||||||
|
@ -32,6 +32,7 @@ const MenuDots = styled.div`
|
|||||||
${dotStyle};
|
${dotStyle};
|
||||||
font-weight: ${({ theme }) => theme.typography.weights.normal};
|
font-weight: ${({ theme }) => theme.typography.weights.normal};
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${({ theme }) => theme.colors.primary.base};
|
background-color: ${({ theme }) => theme.colors.primary.base};
|
||||||
@ -50,11 +51,11 @@ const MenuDots = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
transform: translateY(-${({ theme }) => theme.gridUnit}px);
|
top: ${({ theme }) => theme.gridUnit}px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: translateY(${({ theme }) => theme.gridUnit}px);
|
bottom: ${({ theme }) => theme.gridUnit}px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -52,10 +52,7 @@ const StyledTabs = styled(AntdTabs, {
|
|||||||
`};
|
`};
|
||||||
|
|
||||||
.ant-tabs-tab-btn {
|
.ant-tabs-tab-btn {
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
Loading…
Reference in New Issue
Block a user