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 };
|