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

fix: make callbacks expandable by keyboard

Browse Source
This commit is contained in:
Anya Stasiuk 2020-08-19 15:50:26 +03:00
parent addf8956e3
commit 851aefb401
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;
}
@ -45,7 +48,7 @@ const CallbackTitleWrapper = styled.div`
`;
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;
`;

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

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