76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
import styled, { css } from 'styled-components';
|
|
import { isMobile, isMobileOnly } from 'react-device-detect';
|
|
import { tablet, desktop, mobile } from '@appserver/components/utils/device';
|
|
|
|
const StyledContainer = styled.div`
|
|
.header-container {
|
|
margin-top: 14px;
|
|
position: relative;
|
|
|
|
align-items: center;
|
|
max-width: ${(props) => props.width}px;
|
|
|
|
${(props) =>
|
|
props.title &&
|
|
css`
|
|
display: grid;
|
|
grid-template-columns: ${(props) =>
|
|
props.isRootFolder
|
|
? 'auto auto 1fr'
|
|
: props.canCreate
|
|
? 'auto auto auto auto 1fr'
|
|
: 'auto auto auto 1fr'};
|
|
|
|
@media ${tablet} {
|
|
grid-template-columns: ${(props) =>
|
|
props.isRootFolder
|
|
? '1fr auto'
|
|
: props.canCreate
|
|
? 'auto 1fr auto auto'
|
|
: 'auto 1fr auto'};
|
|
}
|
|
`}
|
|
|
|
.arrow-button {
|
|
margin-right: 15px;
|
|
min-width: 17px;
|
|
|
|
align-items: center;
|
|
|
|
@media ${tablet} {
|
|
padding: 0 0 0 8px;
|
|
margin-left: -8px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
|
|
.add-button {
|
|
margin-left: 16px;
|
|
|
|
@media ${tablet} {
|
|
margin-left: auto;
|
|
|
|
& > div:first-child {
|
|
padding: 0px 8px 8px 8px;
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.option-button {
|
|
@media (min-width: 1024px) {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media ${tablet} {
|
|
& > div:first-child {
|
|
padding: 0px 8px 8px 8px;
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default StyledContainer;
|