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

84
front/src/modules/search/components/CommandMenuStyles.tsx
View File

@ -2,61 +2,61 @@ import styled from '@emotion/styled';
import { Command } from 'cmdk';
export const StyledDialog = styled(Command.Dialog)`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 640px;
padding: 25px;
width: 100%;
background: ${(props) => props.theme.primaryBackground};
border-radius: ${(props) => props.theme.borderRadius};
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
font-family: ${(props) => props.theme.fontFamily};
left: 50%;
max-width: 640px;
overflow: hidden;
padding: 0;
font-family: ${(props) => props.theme.fontFamily};
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
padding: 25px;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
`;
export const StyledInput = styled(Command.Input)`
border: none;
width: 100%;
font-size: ${(props) => props.theme.fontSizeLarge};
padding: ${(props) => props.theme.spacing(5)};
outline: none;
background: ${(props) => props.theme.primaryBackground};
color: ${(props) => props.theme.text100};
border: none;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 0;
caret-color: ${(props) => props.theme.blue};
color: ${(props) => props.theme.text100};
font-size: ${(props) => props.theme.fontSizeLarge};
margin: 0;
outline: none;
padding: ${(props) => props.theme.spacing(5)};
width: 100%;
`;
export const StyledItem = styled(Command.Item)`
cursor: pointer;
height: 48px;
font-size: ${(props) => props.theme.fontSizeMedium};
display: flex;
align-items: center;
gap: ${(props) => props.theme.spacing(3)};
padding: 0 ${(props) => props.theme.spacing(4)};
color: ${(props) => props.theme.text100};
user-select: none;
cursor: pointer;
display: flex;
font-size: ${(props) => props.theme.fontSizeMedium};
gap: ${(props) => props.theme.spacing(3)};
height: 48px;
padding: 0 ${(props) => props.theme.spacing(4)};
position: relative;
transition: all 150ms ease;
transition-property: none;
position: relative;
user-select: none;
&:hover {
background: ${(props) => props.theme.clickableElementBackgroundHover};
}
&[data-selected='true'] {
background: ${(props) => props.theme.secondaryBackground};
&:after {
content: '';
position: absolute;
left: 0;
z-index: ${(props) => props.theme.lastLayerZIndex};
width: 3px;
height: 100%;
background: ${(props) => props.theme.blue};
content: '';
height: 100%;
left: 0;
position: absolute;
width: 3px;
z-index: ${(props) => props.theme.lastLayerZIndex};
}
}
&[data-disabled='true'] {
@ -64,41 +64,41 @@ export const StyledItem = styled(Command.Item)`
cursor: not-allowed;
}
svg {
width: 16px;
height: 16px;
color: ${(props) => props.theme.text80};
height: 16px;
width: 16px;
}
`;
export const StyledList = styled(Command.List)`
background: ${(props) => props.theme.secondaryBackground};
height: min(300px, var(--cmdk-list-height));
max-height: 400px;
overflow: auto;
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
background: ${(props) => props.theme.secondaryBackground};
`;
export const StyledGroup = styled(Command.Group)`
[cmdk-group-heading] {
user-select: none;
font-size: ${(props) => props.theme.fontSizeExtraSmall};
color: ${(props) => props.theme.text30};
padding: ${(props) => props.theme.spacing(2)};
display: flex;
align-items: center;
color: ${(props) => props.theme.text30};
display: flex;
font-size: ${(props) => props.theme.fontSizeExtraSmall};
padding: ${(props) => props.theme.spacing(2)};
user-select: none;
}
`;
export const StyledEmpty = styled(Command.Empty)`
font-size: ${(props) => props.theme.fontSizeMedium};
display: flex;
align-items: center;
justify-content: center;
height: 64px;
white-space: pre-wrap;
color: ${(props) => props.theme.text30};
display: flex;
font-size: ${(props) => props.theme.fontSizeMedium};
height: 64px;
justify-content: center;
white-space: pre-wrap;
`;
export const StyledSeparator = styled(Command.Separator)``;