84 lines
1.7 KiB
JavaScript
84 lines
1.7 KiB
JavaScript
import styled, { css } from 'styled-components';
|
|
import { smallTablet, tablet, size } from '@appserver/components/utils/device';
|
|
import Base from '@appserver/components/themes/base';
|
|
|
|
const StyledTile = styled.div`
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
height: ${(props) => (props.isFolder ? '32px' : '220px')};
|
|
|
|
@media ${smallTablet} {
|
|
&:nth-of-type(n + 3) {
|
|
display: none;
|
|
}
|
|
|
|
${(props) =>
|
|
props.isFolder &&
|
|
css`
|
|
&:nth-of-type(n + 2) {
|
|
display: none;
|
|
}
|
|
`}
|
|
}
|
|
|
|
@media (min-width: ${size.smallTablet}px) and ${tablet} {
|
|
&:nth-of-type(n + 7) {
|
|
display: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
StyledTile.defaultProps = { theme: Base };
|
|
|
|
const StyledMainContent = styled.div`
|
|
height: 172px;
|
|
`;
|
|
|
|
const StyledBottom = styled.div`
|
|
display: flex;
|
|
align-items: ${(props) => (props.isFolder ? 'center' : 'stretch')};
|
|
margin-top: ${(props) => (props.isFolder ? 0 : '10px')};
|
|
height: 38px;
|
|
|
|
.first-content {
|
|
height: 32px;
|
|
width: 32px;
|
|
min-width: 32px;
|
|
}
|
|
|
|
.second-content {
|
|
width: 100%;
|
|
height: ${(props) => (props.isFolder ? '32px' : '16px')};
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.files-second-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-left: 8px;
|
|
|
|
.second-content {
|
|
&:last-of-type {
|
|
height: 12px;
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
width: 50%;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.option-button {
|
|
height: 16px;
|
|
width: 16px;
|
|
min-width: 16px;
|
|
margin-left: 8px;
|
|
border-radius: 6px;
|
|
}
|
|
`;
|
|
|
|
export { StyledTile, StyledBottom, StyledMainContent };
|