34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
import type { StyledFileManagerProps } from "components/system/Files/Views";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import ScrollBars from "styles/common/ScrollBars";
|
||
|
|
import { DEFAULT_SCROLLBAR_WIDTH, TASKBAR_HEIGHT } from "utils/constants";
|
||
|
|
|
||
|
|
const StyledFileManager = styled.ol<StyledFileManagerProps>`
|
||
|
|
${({ $scrollable }) =>
|
||
|
|
$scrollable ? ScrollBars(DEFAULT_SCROLLBAR_WIDTH) : undefined};
|
||
|
|
|
||
|
|
column-gap: ${({ theme }) => theme.sizes.fileManager.columnGap};
|
||
|
|
contain: strict;
|
||
|
|
display: grid;
|
||
|
|
grid-auto-flow: row;
|
||
|
|
grid-template-columns: ${({ theme }) =>
|
||
|
|
`repeat(auto-fill, ${theme.sizes.fileManager.gridEntryWidth})`};
|
||
|
|
grid-template-rows: ${({ theme }) =>
|
||
|
|
`repeat(auto-fill, ${theme.sizes.fileManager.gridEntryHeight})`};
|
||
|
|
height: 100%;
|
||
|
|
overflow: ${({ $scrollable }) => ($scrollable ? undefined : "hidden")};
|
||
|
|
padding: ${({ theme }) => theme.sizes.fileManager.padding};
|
||
|
|
place-content: flex-start;
|
||
|
|
pointer-events: ${({ $selecting }) => ($selecting ? "auto" : undefined)};
|
||
|
|
row-gap: ${({ theme }) => theme.sizes.fileManager.rowGap};
|
||
|
|
|
||
|
|
main > & {
|
||
|
|
grid-auto-flow: column;
|
||
|
|
height: calc(100% - ${TASKBAR_HEIGHT}px);
|
||
|
|
overflow: visible;
|
||
|
|
padding-bottom: 21px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default StyledFileManager;
|