admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feature: set the right border radius for dropdown items

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-24 15:29:24 +02:00
parent bb8f61212b
commit 4e3acf21d2
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
front/src/components/table/table-header/DropdownButton.tsx
View File

@ -37,17 +37,33 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
`; `;
const StyledDropdown = styled.ul` const StyledDropdown = styled.ul`
--wraper-border: 1px;
--wraper-border-radius: 8px;
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 0; right: 0;
border: 1px solid ${(props) => props.theme.primaryBorder}; border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09); box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
border-radius: 8px; border-radius: var(--wraper-border-radius);
padding: 0px; padding: 0px;
min-width: 160px; min-width: 160px;
${modalBackground} ${modalBackground}
li {
border-radius: 2px;
&:first-child {
border-top-left-radius: var(--outer-border-radius);
border-top-right-radius: var(--outer-border-radius);
}
&:last-child {
border-bottom-left-radius: var(--outer-border-radius);
border-bottom-right-radius: var(--outer-border-radius);
}
}
`; `;
const StyledDropdownItem = styled.li` const StyledDropdownItem = styled.li`
@ -57,7 +73,6 @@ const StyledDropdownItem = styled.li`
margin: 2px; margin: 2px;
background: ${(props) => props.theme.primaryBackground}; background: ${(props) => props.theme.primaryBackground};
cursor: pointer; cursor: pointer;
border-radius: 4px;
color: ${(props) => props.theme.text60}; color: ${(props) => props.theme.text60};
&:hover { &:hover {