0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed Code Smells from PR 1494 (#1536)

Browse source 
Co-authored-by: Anton Zorin <zorii4@Antons-MacBook-Pro.local>
Co-authored-by: Oleg Shur <workshur@gmail.com>
This commit is contained in:
Zorii4 2022-02-02 16:04:27 +03:00 • committed by GitHub
parent f248ad1c39
commit 0b5f9283d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 54 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
View file

@ -5,6 +5,58 @@ interface TitleProps {
isOrdered?: boolean;
}
const orderableMixin = css(
({ theme: { table } }) => `
cursor: pointer;
padding-right: 18px;
position: relative;
&::before,
&::after {
border: 4px solid transparent;
content: '';
display: block;
height: 0;
right: 5px;
top: 50%;
position: absolute;
}
&::before {
border-bottom-color: ${table.th.color.normal};
margin-top: -9px;
}
&::after {
border-top-color: ${table.th.color.normal};
margin-top: 1px;
}
&:hover {
color: ${table.th.color.hover};
&::before {
border-bottom-color: ${table.th.color.hover};
}
&::after {
border-top-color: ${table.th.color.hover};
}
}
`
);
const orderedMixin = css(
({ theme: { table } }) => `
color: ${table.th.color.active};
&::before {
border-bottom-color: ${table.th.color.active};
}
&::after {
border-top-color: ${table.th.color.active};
}
`
);
export const Title = styled.span<TitleProps>(
({ isOrderable, isOrdered, theme: { table } }) => css`
font-family: Inter, sans-serif;
@ -21,56 +73,9 @@ export const Title = styled.span<TitleProps>(
cursor: default;
color: ${table.th.color.normal};
${isOrderable &&
css`
cursor: pointer;
${isOrderable && orderableMixin}
padding-right: 18px;
position: relative;
&::before,
&::after {
border: 4px solid transparent;
content: '';
display: block;
height: 0;
right: 5px;
top: 50%;
position: absolute;
}
&::before {
border-bottom-color: ${table.th.color.normal};
margin-top: -9px;
}
&::after {
border-top-color: ${table.th.color.normal};
margin-top: 1px;
}
&:hover {
color: ${table.th.color.hover};
&::before {
border-bottom-color: ${table.th.color.hover};
}
&::after {
border-top-color: ${table.th.color.hover};
}
}
`}
${isOrderable &&
isOrdered &&
css`
color: ${table.th.color.active};
&::before {
border-bottom-color: ${table.th.color.active};
}
&::after {
border-top-color: ${table.th.color.active};
}
`}
${isOrderable && isOrdered && orderedMixin}
`
);