fix: rtl support

change direction of sideMenu icons.
center sideMenu icon in phone size.
This commit is contained in:
sajjad 2019-08-26 16:11:37 +04:30
parent 574d4032c1
commit 26d38e180d
3 changed files with 3 additions and 0 deletions

View File

@ -24,6 +24,7 @@ export const SearchInput = styled.input.attrs(() => ({
color: ${props => props.theme.menu.textColor}; color: ${props => props.theme.menu.textColor};
background-color: transparent; background-color: transparent;
outline: none; outline: none;
text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'center' : 'inherit'};
`; `;
export const SearchIcon = styled((props: { className?: string }) => ( export const SearchIcon = styled((props: { className?: string }) => (

View File

@ -144,6 +144,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
} }
${ShelfIcon} { ${ShelfIcon} {
transform: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'rotate(0deg)' : 'none'};
height: ${({ theme }) => theme.menu.arrow.size}; height: ${({ theme }) => theme.menu.arrow.size};
width: ${({ theme }) => theme.menu.arrow.size}; width: ${({ theme }) => theme.menu.arrow.size};
polygon { polygon {

View File

@ -62,5 +62,6 @@ const ChevronContainer = styled.div`
align-self: center; align-self: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
direction: ltr;
color: ${props => props.theme.colors.primary.main}; color: ${props => props.theme.colors.primary.main};
`; `;