Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 00:26:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make callbacks expandable by keyboard (#1354)

Browse Source
This commit is contained in:
Anna Stasiuk 2020-08-20 17:06:55 +03:00 committed by GitHub
parent 0ab06cfd84
commit 46eee7b70c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Callbacks/CallbackTitle.tsx
View File

@ -32,7 +32,10 @@ export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
} }
} }
const CallbackTitleWrapper = styled.div` const CallbackTitleWrapper = styled.button`
border: 0;
width: 100%;
text-align: left;
& > * { & > * {
vertical-align: middle; vertical-align: middle;
} }
@ -45,7 +48,7 @@ const CallbackTitleWrapper = styled.div`
`; `;
const CallbackName = styled.span<{ deprecated?: boolean }>` const CallbackName = styled.span<{ deprecated?: boolean }>`
text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')}; text-decoration: ${(props) => (props.deprecated ? 'line-through' : 'none')};
margin-right: 8px; margin-right: 8px;
`; `;

2
src/components/Callbacks/styled.elements.ts
View File

@ -1,5 +1,6 @@
import styled from '../../styled-components'; import styled from '../../styled-components';
import { CallbackTitle } from './CallbackTitle'; import { CallbackTitle } from './CallbackTitle';
import { darken } from 'polished';
export const StyledCallbackTitle = styled(CallbackTitle)` export const StyledCallbackTitle = styled(CallbackTitle)`
padding: 10px; padding: 10px;
@ -8,6 +9,7 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
line-height: 1.5em; line-height: 1.5em;
background-color: ${({ theme }) => theme.colors.gray[100]}; background-color: ${({ theme }) => theme.colors.gray[100]};
cursor: pointer; cursor: pointer;
outline-color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.colors.gray[100])};
`; `;
export const CallbackDetailsWrap = styled.div` export const CallbackDetailsWrap = styled.div`