mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-15 05:37:32 +00:00
86 lines
1.8 KiB
TypeScript
86 lines
1.8 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,
|
|
padding: '4px 10px',
|
|
color: 'var(--affine-icon-color)',
|
|
border: '1px solid var(--affine-border-color)',
|
|
backgroundColor: 'var(--affine-white-10)',
|
|
borderRadius: 8,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
// icon size
|
|
fontSize: '16px',
|
|
|
|
selectors: {
|
|
'&.no-border': {
|
|
border: 'unset',
|
|
},
|
|
// size
|
|
'&.large': {
|
|
height: 32,
|
|
// icon size
|
|
fontSize: '20px',
|
|
},
|
|
'&.extra-large': {
|
|
height: 40,
|
|
padding: '8px 10px',
|
|
// icon size
|
|
fontSize: '20px',
|
|
},
|
|
// 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.focus': {
|
|
borderColor: 'var(--affine-primary-color)',
|
|
boxShadow: 'var(--affine-active-shadow)',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const input = style({
|
|
width: '0',
|
|
flex: 1,
|
|
fontSize: 'var(--affine-font-xs)',
|
|
lineHeight: '20px',
|
|
fontWeight: '500',
|
|
color: 'var(--affine-text-primary-color)',
|
|
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)',
|
|
},
|
|
'&.large, &.extra-large': {
|
|
fontSize: 'var(--affine-font-base)',
|
|
lineHeight: '24px',
|
|
},
|
|
},
|
|
});
|