mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-06 11:59:51 +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
83 lines
1.7 KiB
TypeScript
83 lines
1.7 KiB
TypeScript
import { cssVar } from '@toeverything/theme';
|
|
import { style } from '@vanilla-extract/css';
|
|
export const root = style({
|
|
height: '100vh',
|
|
width: '100vw',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
fontSize: cssVar('fontBase'),
|
|
position: 'relative',
|
|
background: cssVar('backgroundPrimaryColor'),
|
|
});
|
|
export const affineLogo = style({
|
|
color: 'inherit',
|
|
});
|
|
export const topNav = style({
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '16px 120px',
|
|
selectors: {
|
|
'&.mobile': {
|
|
padding: '16px 20px',
|
|
},
|
|
},
|
|
});
|
|
export const topNavLinks = style({
|
|
display: 'flex',
|
|
columnGap: 4,
|
|
});
|
|
export const topNavLink = style({
|
|
color: cssVar('textPrimaryColor'),
|
|
fontSize: cssVar('fontSm'),
|
|
fontWeight: 500,
|
|
textDecoration: 'none',
|
|
padding: '4px 18px',
|
|
});
|
|
export const iconButton = style({
|
|
fontSize: '24px',
|
|
pointerEvents: 'auto',
|
|
selectors: {
|
|
'&.plain': {
|
|
color: cssVar('textPrimaryColor'),
|
|
},
|
|
},
|
|
});
|
|
export const menu = style({
|
|
width: '100vw',
|
|
height: '100vh',
|
|
padding: '0',
|
|
background: cssVar('backgroundPrimaryColor'),
|
|
borderRadius: '0',
|
|
border: 'none',
|
|
boxShadow: 'none',
|
|
});
|
|
export const menuItem = style({
|
|
color: cssVar('textPrimaryColor'),
|
|
fontSize: cssVar('fontSm'),
|
|
fontWeight: 500,
|
|
textDecoration: 'none',
|
|
padding: '12px 20px',
|
|
maxWidth: '100%',
|
|
position: 'relative',
|
|
borderRadius: '0',
|
|
transition: 'background 0.3s ease',
|
|
selectors: {
|
|
'&:after': {
|
|
position: 'absolute',
|
|
content: '""',
|
|
bottom: 0,
|
|
display: 'block',
|
|
width: 'calc(100% - 40px)',
|
|
height: '0.5px',
|
|
background: cssVar('black10'),
|
|
},
|
|
'&:not(:last-of-type)': {
|
|
marginBottom: '0',
|
|
},
|
|
},
|
|
});
|