34dd64103c
* Slate style has certain behavior elements that iOS expects * Swap to using that implementation
72 lines
1.5 KiB
TypeScript
72 lines
1.5 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)} ${toRem(1)}`,
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:first-child &`]: {
|
|
paddingLeft: toRem(13),
|
|
},
|
|
[`${EditorTextareaScroll}:last-child &`]: {
|
|
paddingRight: toRem(13),
|
|
},
|
|
'&:focus': {
|
|
outline: 'none',
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderContainer = style([
|
|
DefaultReset,
|
|
{
|
|
opacity: config.opacity.Placeholder,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderTextVisual = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'block',
|
|
paddingTop: toRem(13),
|
|
paddingLeft: toRem(1),
|
|
},
|
|
]);
|
|
|
|
export const EditorToolbarBase = style({
|
|
padding: `0 ${config.borderWidth.B300}`,
|
|
});
|
|
|
|
export const EditorToolbar = style({
|
|
padding: config.space.S100,
|
|
});
|
|
|
|
export const MarkdownBtnBox = style({
|
|
paddingRight: config.space.S100,
|
|
});
|