You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
990 B
36 lines
990 B
import {theme} from 'app/client/ui2018/cssVars';
|
|
import {dom, DomElementArg, Observable, styled} from 'grainjs';
|
|
|
|
export function aclMemoEditor(obs: Observable<string>, ...args: DomElementArg[]): HTMLInputElement {
|
|
return cssMemoInput(
|
|
dom.prop('value', obs),
|
|
dom.on('input', (_e, elem) => obs.set(elem.value)),
|
|
...args,
|
|
);
|
|
}
|
|
|
|
const cssMemoInput = styled('input', `
|
|
width: 100%;
|
|
min-height: 28px;
|
|
padding: 4px 5px;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
color: ${theme.controlFg};
|
|
background-color: ${theme.inputBg};
|
|
caret-color : ${theme.inputFg};
|
|
font: 12px 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover {
|
|
border: 1px solid ${theme.inputBorder};
|
|
}
|
|
&:not(&-disabled):focus-within {
|
|
outline: none !important;
|
|
cursor: text;
|
|
box-shadow: inset 0 0 0 1px ${theme.controlFg};
|
|
border-color: ${theme.controlFg};
|
|
}
|
|
`);
|