Files
outline/app/components/Key.ts
Tom Moor 2ca68c2c80 fix: Cancel editing shortcut on Windows
fix: Improve display of symbols in keyboard shortcuts dialog
closes #2733
2022-02-17 23:10:11 -08:00

25 lines
732 B
TypeScript

import styled from "styled-components";
type Props = {
/* Set to true if displaying a single symbol character to disable monospace */
symbol?: boolean;
};
const Key = styled.kbd<Props>`
display: inline-block;
padding: 4px 6px;
font-size: 11px;
font-family: ${(props) =>
props.symbol ? props.theme.fontFamily : props.theme.fontFamilyMono};
line-height: 10px;
color: ${(props) => props.theme.almostBlack};
vertical-align: middle;
background-color: ${(props) => props.theme.smokeLight};
border: solid 1px ${(props) => props.theme.slateLight};
border-bottom-color: ${(props) => props.theme.slate};
border-radius: 3px;
box-shadow: inset 0 -1px 0 ${(props) => props.theme.slate};
`;
export default Key;