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 Endpoint component

Browse Source
This commit is contained in:
fateme.fazli 2019-08-28 14:45:52 +04:30
parent 5f22544cca
commit a8b88eb786
3 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/openapi-fa.yaml
View File

@ -1,9 +1,9 @@
openapi: 3.0.0 openapi: 3.0.0
servers: servers:
- url: //petstore.swagger.io/v2 - url: //petstore.swagger.io/v2
description: Default server description: سرور پیش فرض
- url: //petstore.swagger.io/sandbox - url: //petstore.swagger.io/sandbox
description: Sandbox server description: sandbox سرور
info: info:
description: | description: |
این یک فایل تست api-doc است که مرتبط با مدیریت یک پت‌شاپ طراحی و نوشته شده است. این یک فایل تست api-doc است که مرتبط با مدیریت یک پت‌شاپ طراحی و نوشته شده است.

6
src/components/Endpoint/styled.elements.ts
View File

@ -25,6 +25,7 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border: ${props => (props.inverted ? '0' : '1px solid transparent')};
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease; transition: border-color 0.25s ease;
direction: ltr;
${props => ${props =>
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
@ -59,7 +60,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
transition: all 0.25s ease; transition: all 0.25s ease;
text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
${props => (props.expanded ? '' : 'transform: translateY(-50%) scaleY(0);')} ${props => (props.expanded ? '' : 'transform: translateY(-50%) scaleY(0);')}
`; `;
@ -68,6 +69,7 @@ export const ServerItem = styled.div`
`; `;
export const ServerUrl = styled.div` export const ServerUrl = styled.div`
text-align: left;
padding: 5px; padding: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fff; background: #fff;
@ -75,5 +77,5 @@ export const ServerUrl = styled.div`
color: ${props => props.theme.colors.primary.main}; color: ${props => props.theme.colors.primary.main};
> span { > span {
color: ${props => props.theme.colors.text.primary}; color: ${props => props.theme.colors.text.primary};
} };
`; `;

4
src/theme.ts
View File

@ -103,13 +103,13 @@ const defaultTheme: ThemeInterface = {
smoothing: 'antialiased', smoothing: 'antialiased',
optimizeSpeed: true, optimizeSpeed: true,
headings: { headings: {
fontFamily: 'Montserrat, sans-serif', fontFamily: 'Montserrat, sans-serif, Vazir',
fontWeight: '400', fontWeight: '400',
lineHeight: '1.6em', lineHeight: '1.6em',
}, },
code: { code: {
fontSize: '13px', fontSize: '13px',
fontFamily: 'Courier, monospace', fontFamily: 'Courier, monospace, Vazir',
lineHeight: ({ typography }) => typography.lineHeight, lineHeight: ({ typography }) => typography.lineHeight,
fontWeight: ({ typography }) => typography.fontWeightRegular, fontWeight: ({ typography }) => typography.fontWeightRegular,
color: '#e53935', color: '#e53935',