Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-09 14:44:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(rtl): added rtl compatibility to ResponseList component

Browse Source
This commit is contained in:
fateme.fazli 2019-08-31 16:04:43 +04:30
parent a8b88eb786
commit 523d3c6540
4 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/common-elements/shelfs.tsx
View File

@ -37,9 +37,10 @@ export const ShelfIcon = styled(IntShelfIcon)`
height: ${props => props.size || '18px'}; height: ${props => props.size || '18px'};
width: ${props => props.size || '18px'}; width: ${props => props.size || '18px'};
vertical-align: middle; vertical-align: middle;
float: ${props => props.float || ''}; float: ${props => (props.theme.typography.direction === 'rtl') ? 'right' : props.float || '' };
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
transform: rotateZ(${props => directionMap[props.direction || 'down']}); transform: rotateZ(${props => (props.theme.typography.direction === 'rtl') ?
(directionMap[ props.direction === 'right' ? 'left' : 'down' || 'down']) : (directionMap[props.direction || 'down'])});
polygon { polygon {
fill: ${props => fill: ${props =>

1
src/common-elements/tabs.ts
View File

@ -67,6 +67,7 @@ export const Tabs = styled(ReactTabs)`
& > div > pre { & > div > pre {
padding: 0; padding: 0;
direction: ltr;
} }
} }
`; `;

2
src/components/JsonViewer/style.ts
View File

@ -7,7 +7,7 @@ export const jsonStyles = css`
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${props => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize}; font-size: ${props => props.theme.typography.code.fontSize};
direction: ltr;
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
contain: content; contain: content;
overflow-x: auto; overflow-x: auto;

4
src/components/Responses/styled.elements.ts
View File

@ -11,7 +11,7 @@ export const StyledResponseTitle = styled(ResponseTitle)`
line-height: 1.5em; line-height: 1.5em;
background-color: #f2f2f2; background-color: #f2f2f2;
cursor: pointer; cursor: pointer;
text-align:${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
color: ${props => props.theme.colors.responses[props.type].color}; color: ${props => props.theme.colors.responses[props.type].color};
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor}; background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
@ -35,7 +35,7 @@ export const ResponseDetailsWrap = styled.div`
`; `;
export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))` export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
text-align: left; text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
margin-top: 1em; margin-top: 1em;
caption-side: top; caption-side: top;
`; `;