mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-17 10:06:17 +08:00
Peng Xiao
7d951a975f
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar Some issues: - tried ast-grep but it seems to be not easy to add imports conditionally - current work does not work well with ts with types because babel will strip them out
44 lines
954 B
TypeScript
44 lines
954 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
export const inlineEditWrapper = style({
|
|
position: 'relative',
|
|
borderRadius: 4,
|
|
padding: 4,
|
|
display: 'inline-block',
|
|
minWidth: 50,
|
|
minHeight: 28,
|
|
});
|
|
export const inlineEdit = style({
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'pre',
|
|
wordWrap: 'break-word',
|
|
// to avoid shrinking when <input /> show up
|
|
border: '1px solid transparent',
|
|
selectors: {
|
|
[`.${inlineEditWrapper}[data-editing="true"] &`]: {
|
|
opacity: 0,
|
|
visibility: 'hidden',
|
|
},
|
|
},
|
|
});
|
|
export const inlineEditInput = style({
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
left: 0,
|
|
top: 0,
|
|
opacity: 0,
|
|
visibility: 'hidden',
|
|
pointerEvents: 'none',
|
|
selectors: {
|
|
[`.${inlineEditWrapper}[data-editing="true"] &`]: {
|
|
opacity: 1,
|
|
visibility: 'visible',
|
|
pointerEvents: 'auto',
|
|
},
|
|
},
|
|
});
|
|
export const placeholder = style({
|
|
opacity: 0.8,
|
|
});
|