feature: set the right border radius for dropdown items

This commit is contained in:
Sammy Teillet
2023-04-24 15:29:24 +02:00
parent bb8f61212b
commit 4e3acf21d2

View File

@ -37,17 +37,33 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
`;
const StyledDropdown = styled.ul`
--wraper-border: 1px;
--wraper-border-radius: 8px;
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
display: flex;
flex-direction: column;
position: absolute;
top: 14px;
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);
border-radius: 8px;
border-radius: var(--wraper-border-radius);
padding: 0px;
min-width: 160px;
${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`
@ -57,7 +73,6 @@ const StyledDropdownItem = styled.li`
margin: 2px;
background: ${(props) => props.theme.primaryBackground};
cursor: pointer;
border-radius: 4px;
color: ${(props) => props.theme.text60};
&:hover {