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

Add rule to order css in styled components alphabetically (#284)

Browse Source 
* Add plugin

* Run plugin
This commit is contained in:
Félix Malfait
2023-06-14 07:59:16 +02:00
committed by GitHub
parent 830b76cd9a
commit eb8fc50ff1
72 changed files with 568 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -31,18 +31,18 @@ type StyledDropdownButtonProps = {
};
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
display: flex;
cursor: pointer;
user-select: none;
background: ${(props) => props.theme.primaryBackground};
border-radius: 4px;
color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
padding: ${(props) => props.theme.spacing(1)};
cursor: pointer;
display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding-right: ${(props) => props.theme.spacing(2)};
padding: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)};
border-radius: 4px;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding-right: ${(props) => props.theme.spacing(2)};
user-select: none;
&:hover {
filter: brightness(0.95);
@ -50,19 +50,19 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
`;
const StyledDropdown = styled.ul`
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
--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: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
border-radius: var(--wraper-border-radius);
padding: 0px;
display: flex;
flex-direction: column;
min-width: 160px;
padding: 0px;
position: absolute;
right: 0;
top: 14px;
${overlayBackground}
li {
&:first-of-type {
@ -70,24 +70,24 @@ const StyledDropdown = styled.ul`
border-top-right-radius: var(--outer-border-radius);
}
&:last-of-type {
border-bottom: 0;
border-bottom-left-radius: var(--outer-border-radius);
border-bottom-right-radius: var(--outer-border-radius);
border-bottom: 0;
}
}
`;
const StyledDropdownItem = styled.li`
display: flex;
align-items: center;
width: calc(160px - ${(props) => props.theme.spacing(4)});
border-radius: 2px;
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
margin: 2px;
padding: ${(props) => props.theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px);
margin: 2px;
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text60};
border-radius: 2px;
width: calc(160px - ${(props) => props.theme.spacing(4)});
&:hover {
background: rgba(0, 0, 0, 0.04);
@ -96,54 +96,54 @@ const StyledDropdownItem = styled.li`
const StyledDropdownItemClipped = styled.span`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDropdownTopOption = styled.li`
display: flex;
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
color: ${(props) => props.theme.text80};
cursor: pointer;
display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium};
justify-content: space-between;
padding: calc(${(props) => props.theme.spacing(2)} + 2px)
calc(${(props) => props.theme.spacing(2)});
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text80};
font-weight: ${(props) => props.theme.fontWeightMedium};
&:hover {
background: rgba(0, 0, 0, 0.04);
}
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
user-select: none;
`;
const StyledIcon = styled.div`
display: flex;
justify-content: center;
margin-right: ${(props) => props.theme.spacing(1)};
min-width: ${(props) => props.theme.spacing(4)};
justify-content: center;
`;
const StyledSearchField = styled.li`
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text60};
font-weight: ${(props) => props.theme.fontWeightMedium};
border-bottom: var(--wraper-border) solid
${(props) => props.theme.primaryBorder};
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium};
justify-content: space-between;
overflow: hidden;
user-select: none;
input {
height: 36px;
width: 100%;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily};
border-radius: 8px;
height: 36px;
padding: 8px;
width: 100%;
${textInputStyle}