52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import styled, { css } from "styled-components";
|
|
|
|
interface Props {
|
|
borders?: boolean;
|
|
background?: boolean;
|
|
placement: 'primary' | 'secondary'
|
|
}
|
|
|
|
export default styled.div<Props>`
|
|
gap: 6px;
|
|
height: 48px;
|
|
flex: 0 auto;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
padding: 0 16px;
|
|
font-weight: 600;
|
|
user-select: none;
|
|
align-items: center;
|
|
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
background-color: var(--primary-header);
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*@media only screen and (max-width: 768px) {
|
|
padding: 0 12px;
|
|
}*/
|
|
|
|
@media (pointer: coarse) {
|
|
height: 56px;
|
|
}
|
|
|
|
${ props => props.background && css`
|
|
height: 120px !important;
|
|
align-items: flex-end;
|
|
|
|
text-shadow: 0px 0px 1px black;
|
|
` }
|
|
|
|
${ props => props.placement === 'secondary' && css`
|
|
background-color: var(--secondary-header);
|
|
padding: 14px;
|
|
` }
|
|
|
|
${ props => props.borders && css`
|
|
border-start-start-radius: 8px;
|
|
` }
|
|
`;
|