2f6c4e3696
Co-authored-by: Hongtao Lye <codert.sn@gmail.com> Co-authored-by: liuyi <forehalo@gmail.com> Co-authored-by: LongYinan <lynweklm@gmail.com> Co-authored-by: X1a0t <405028157@qq.com> Co-authored-by: JimmFly <yangjinfei001@gmail.com> Co-authored-by: Peng Xiao <pengxiao@outlook.com> Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com> Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com> Co-authored-by: Qi <474021214@qq.com> Co-authored-by: danielchim <kahungchim@gmail.com>
77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
import { createVar, style } from '@vanilla-extract/css';
|
|
|
|
export const widthVar = createVar('widthVar');
|
|
|
|
export const inputWrapper = style({
|
|
vars: {
|
|
[widthVar]: '100%',
|
|
},
|
|
width: widthVar,
|
|
height: 28,
|
|
lineHeight: '22px',
|
|
padding: '0 10px',
|
|
color: 'var(--affine-text-primary-color)',
|
|
border: '1px solid',
|
|
backgroundColor: 'var(--affine-white)',
|
|
borderRadius: 8,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
fontSize: 'var(--affine-font-base)',
|
|
|
|
selectors: {
|
|
'&.no-border': {
|
|
border: 'unset',
|
|
},
|
|
// size
|
|
'&.large': {
|
|
height: 32,
|
|
},
|
|
'&.extra-large': {
|
|
height: 40,
|
|
fontWeight: 600,
|
|
},
|
|
// color
|
|
'&.disabled': {
|
|
background: 'var(--affine-hover-color)',
|
|
},
|
|
'&.error': {
|
|
borderColor: 'var(--affine-error-color)',
|
|
},
|
|
'&.success': {
|
|
borderColor: 'var(--affine-success-color)',
|
|
},
|
|
'&.warning': {
|
|
borderColor: 'var(--affine-warning-color)',
|
|
},
|
|
'&.default': {
|
|
borderColor: 'var(--affine-border-color)',
|
|
},
|
|
'&.default.focus': {
|
|
borderColor: 'var(--affine-primary-color)',
|
|
boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const input = style({
|
|
height: '100%',
|
|
width: '0',
|
|
flex: 1,
|
|
boxSizing: 'border-box',
|
|
// prevent default style
|
|
WebkitAppearance: 'none',
|
|
WebkitTapHighlightColor: 'transparent',
|
|
outline: 'none',
|
|
border: 'none',
|
|
|
|
selectors: {
|
|
'&::placeholder': {
|
|
color: 'var(--affine-placeholder-color)',
|
|
},
|
|
'&:disabled': {
|
|
color: 'var(--affine-text-disable-color)',
|
|
},
|
|
},
|
|
});
|