mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 04:48:53 +00:00
103 lines
2.0 KiB
TypeScript
103 lines
2.0 KiB
TypeScript
import { cssVar } from '@toeverything/theme';
|
|
import { style } from '@vanilla-extract/css';
|
|
|
|
export const weekDatePicker = style({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
|
|
height: '100%',
|
|
maxHeight: '39px',
|
|
});
|
|
|
|
export const weekDatePickerContent = style({
|
|
width: 0,
|
|
flex: 1,
|
|
display: 'flex',
|
|
alignItems: 'stretch',
|
|
justifyContent: 'space-between',
|
|
gap: 4,
|
|
userSelect: 'none',
|
|
});
|
|
|
|
export const dayCell = style({
|
|
position: 'relative',
|
|
width: 0,
|
|
flexGrow: 1,
|
|
minWidth: 30,
|
|
maxWidth: 130,
|
|
|
|
cursor: 'pointer',
|
|
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
|
|
padding: '2px 4px 1px 4px',
|
|
borderRadius: 4,
|
|
|
|
fontFamily: cssVar('fontFamily'),
|
|
fontWeight: 500,
|
|
fontSize: 12,
|
|
|
|
selectors: {
|
|
'&:hover': {
|
|
backgroundColor: cssVar('hoverColor'),
|
|
},
|
|
'&[data-today="true"]:not([data-active="true"])': {
|
|
vars: {
|
|
'--cell-color': cssVar('brandColor'),
|
|
},
|
|
},
|
|
'&[data-active="true"]': {
|
|
vars: {
|
|
'--cell-color': cssVar('pureWhite'),
|
|
},
|
|
background: cssVar('brandColor'),
|
|
},
|
|
|
|
// interactive
|
|
'&::before, &::after': {
|
|
content: '',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: 1,
|
|
pointerEvents: 'none',
|
|
borderRadius: 'inherit',
|
|
opacity: 0,
|
|
},
|
|
'&::before': {
|
|
boxShadow: '0 0 0 2px var(--affine-brand-color)',
|
|
},
|
|
'&::after': {
|
|
border: '1px solid var(--affine-brand-color)',
|
|
},
|
|
'&:focus-visible::before': {
|
|
opacity: 0.5,
|
|
},
|
|
'&:focus-visible::after': {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
});
|
|
export const dayCellWeek = style({
|
|
width: '100%',
|
|
height: 16,
|
|
lineHeight: '16px',
|
|
textAlign: 'center',
|
|
|
|
textOverflow: 'clip',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
color: 'var(--cell-color, var(--affine-text-secondary-color))',
|
|
});
|
|
export const dayCellDate = style({
|
|
width: '100%',
|
|
height: 20,
|
|
lineHeight: '20px',
|
|
textAlign: 'center',
|
|
|
|
color: 'var(--cell-color, var(--affine-text-primary-color))',
|
|
});
|