mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-16 03:10:16 -04:00
bc5e7445d9
* Add ESC btn to toolbar to quickly exit formatting * add horizontal scroll to toolbar item * make editor toolbar usable in touch device * fix editor hotkeys not working in window * remove unused import
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, DefaultReset, toRem } from 'folds';
|
|
|
|
export const Editor = style([
|
|
DefaultReset,
|
|
{
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R400,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const EditorOptions = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S200,
|
|
},
|
|
]);
|
|
|
|
export const EditorTextareaScroll = style({});
|
|
|
|
export const EditorTextarea = style([
|
|
DefaultReset,
|
|
{
|
|
flexGrow: 1,
|
|
height: '100%',
|
|
padding: `${toRem(13)} 0`,
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:first-child &`]: {
|
|
paddingLeft: toRem(13),
|
|
},
|
|
[`${EditorTextareaScroll}:last-child &`]: {
|
|
paddingRight: toRem(13),
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholder = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
width: '100%',
|
|
opacity: config.opacity.Placeholder,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
|
|
selectors: {
|
|
'&:not(:first-child)': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorToolbarBase = style({
|
|
padding: `0 ${config.borderWidth.B300}`,
|
|
});
|
|
|
|
export const EditorToolbar = style({
|
|
padding: config.space.S100,
|
|
});
|