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.
86 lines
1.5 KiB
86 lines
1.5 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
type TabProps = {
|
|
disabled?: boolean,
|
|
selected?: boolean,
|
|
upperCase?: boolean,
|
|
}
|
|
|
|
export const Tab = styled.button.attrs(({ selected }: TabProps) => ({
|
|
'aria-pressed': selected,
|
|
}))<TabProps>`
|
|
border: none;
|
|
outline: none;
|
|
height: 100%;
|
|
padding-top: 0.38rem;
|
|
padding-bottom: 0.27rem;
|
|
font-weight: 600;
|
|
font-size: 0.519rem;
|
|
line-height: 0.85rem;
|
|
letter-spacing: -0.1px;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
|
|
${({ selected, theme }) => (
|
|
selected
|
|
? css`
|
|
background-color: #FFFFFF;
|
|
color: ${theme.colors.black};
|
|
`
|
|
: css`
|
|
background-color: transparent;
|
|
color: #FFFFFF;
|
|
|
|
:hover {
|
|
background-color: #484848;
|
|
}
|
|
`
|
|
)}
|
|
|
|
${({ upperCase }) => (
|
|
upperCase ? 'text-transform: uppercase;' : ''
|
|
)}
|
|
|
|
${({ disabled }) => (
|
|
disabled
|
|
&& css`
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
`
|
|
)}
|
|
|
|
:not(:last-child) {
|
|
border-right: 1px solid #FFFFFF;
|
|
}
|
|
${isMobileDevice
|
|
? css`
|
|
font-size: 10px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type TabGroupProps = {
|
|
buttons: number,
|
|
}
|
|
|
|
export const TabsGroup = styled.div.attrs({
|
|
role: 'group',
|
|
})<TabGroupProps>`
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
border: 1px solid #FFFFFF;
|
|
border-radius: 2px;
|
|
|
|
${Tab} {
|
|
width: ${({ buttons }) => 100 / buttons}%;
|
|
}
|
|
${isMobileDevice
|
|
? css`
|
|
height: 28px;
|
|
`
|
|
: ''};
|
|
`
|
|
|