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.
151 lines
3.0 KiB
151 lines
3.0 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { customScrollbar } from 'features/Common/customScrollbar'
|
|
|
|
export const Wrapper = styled.div`
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
`
|
|
|
|
export const Button = styled.button`
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
width: 192px;
|
|
height: 44px;
|
|
padding-left: 20px;
|
|
|
|
::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 50%;
|
|
transform: rotate(45deg);
|
|
width: 9px;
|
|
height: 9px;
|
|
border-right: 2px solid;
|
|
border-bottom: 2px solid;
|
|
border-color: ${({ theme }) => theme.colors.white};
|
|
}
|
|
`
|
|
|
|
export const ButtonTitle = styled.span`
|
|
padding-left: 10px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
letter-spacing: -0.32px;
|
|
color: ${({ theme }) => theme.colors.white};
|
|
`
|
|
|
|
export const ListWrapper = styled.div`
|
|
width: 192px;
|
|
height: 220px;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: calc(100% - 4px);
|
|
left: 0;
|
|
padding: 10px;
|
|
background-color: ${({ theme }) => theme.colors.comboboxBackground};
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
|
border-radius: 2px;
|
|
`
|
|
|
|
export const LangsList = styled.ul`
|
|
display: flex;
|
|
height: 100%;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
${customScrollbar}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
`
|
|
|
|
type LangsItemProps = {
|
|
selected: boolean,
|
|
}
|
|
|
|
export const LangsItem = styled.li<LangsItemProps>`
|
|
padding-left: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 34px;
|
|
border-radius: 2px;
|
|
transition: 0.3s;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
color: ${({ theme }) => theme.colors.white70};
|
|
:hover {
|
|
background-color: #99999940;
|
|
cursor: pointer;
|
|
}
|
|
|
|
${({ selected, theme }) => (
|
|
selected
|
|
? css`
|
|
font-weight: 600;
|
|
color: ${theme.colors.white};
|
|
`
|
|
: ''
|
|
)}
|
|
`
|
|
|
|
export const LangName = styled.span`
|
|
padding-left: 10px;
|
|
`
|
|
|
|
type Position = {
|
|
col: number,
|
|
row: number,
|
|
}
|
|
|
|
const flagPositions: Record<string, Position> = {
|
|
bg: { col: 10, row: 1 },
|
|
cs: { col: 1, row: 3 },
|
|
de: { col: 5, row: 4 },
|
|
en: { col: 4, row: 12 },
|
|
es: { col: 12, row: 10 },
|
|
fr: { col: 1, row: 4 },
|
|
hu: { col: 0, row: 5 },
|
|
it: { col: 8, row: 5 },
|
|
ja: { col: 6, row: 2 },
|
|
lv: { col: 6, row: 6 },
|
|
nl: { col: 5, row: 8 },
|
|
pl: { col: 4, row: 9 },
|
|
pt: { col: 5, row: 9 },
|
|
ru: { col: 8, row: 9 },
|
|
uk: { col: 2, row: 12 },
|
|
zh: { col: 6, row: 2 },
|
|
}
|
|
|
|
const getFlagPosition = (lang_iso: string) => {
|
|
const { col, row } = flagPositions[lang_iso] || { col: 99, row: 99 }
|
|
return `${col * -24}px ${row * -16}px`
|
|
}
|
|
|
|
type FlagIconProps = {
|
|
lang_iso: string,
|
|
}
|
|
|
|
export const FlagIcon = styled.span<FlagIconProps>`
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 16px;
|
|
background-image: url('/images/flags-sprite.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 360px;
|
|
background-position: ${({ lang_iso }) => getFlagPosition(lang_iso)};
|
|
`
|
|
|