84 lines
1.8 KiB
JavaScript
84 lines
1.8 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 {
|
|
position: relative;
|
|
height: ${isMobile ? (isMobileOnly ? '53px !important' : '61px !important') : '53px'};
|
|
align-items: center;
|
|
max-width: ${(props) => props.width}px;
|
|
@media ${tablet} {
|
|
height: 63px;
|
|
}
|
|
|
|
@media ${mobile} {
|
|
height: 53px;
|
|
}
|
|
${(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;
|
|
padding: 16px 0 12px;
|
|
align-items: center;
|
|
|
|
@media ${tablet} {
|
|
padding: 20px 0 16px 8px;
|
|
margin-left: -8px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
|
|
.add-button {
|
|
margin-bottom: -1px;
|
|
margin-left: 16px;
|
|
|
|
@media ${tablet} {
|
|
margin-left: auto;
|
|
|
|
& > div:first-child {
|
|
padding: 8px 8px 8px 8px;
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.option-button {
|
|
margin-bottom: -1px;
|
|
|
|
@media (min-width: 1024px) {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media ${tablet} {
|
|
& > div:first-child {
|
|
padding: 8px 8px 8px 8px;
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default StyledContainer;
|