You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.1 KiB
65 lines
1.1 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
import { TooltipWrapper } from 'features/Tooltip'
|
|
|
|
export const MenuList = styled.ul`
|
|
display: flex;
|
|
${isMobileDevice
|
|
? css`
|
|
align-items: center;
|
|
@media screen and (orientation: landscape){
|
|
margin-right: 5px;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const MenuItem = styled.li`
|
|
position: relative;
|
|
display: flex;
|
|
height: 2.28rem;
|
|
line-height: 2.28rem;
|
|
cursor: pointer;
|
|
|
|
:hover ${TooltipWrapper} {
|
|
display: block;
|
|
}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
height: 100%;
|
|
padding: 5px;
|
|
`
|
|
: ''};
|
|
|
|
`
|
|
|
|
type IconProps = {
|
|
size: string,
|
|
src: string,
|
|
}
|
|
|
|
export const Icon = styled.div<IconProps>`
|
|
width: 2.36rem;
|
|
height: 100%;
|
|
background-image: url(/images/${({ src }) => `${src}.svg`});
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: ${({ size }) => size};
|
|
opacity: 0.8;
|
|
${isMobileDevice
|
|
? css`
|
|
height: 14px;
|
|
width: 14px;
|
|
background-size: contain;
|
|
:only-child {
|
|
margin: 0 4px;
|
|
}
|
|
`
|
|
: ''};
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
`
|
|
|