mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 13:25:12 +00:00
7b6e00d84a
close: BS-3446 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Migrated all styling from vanilla-extract to Emotion for improved CSS-in-JS consistency across database, table, and data view components. - Updated import paths for style modules to reflect the new Emotion-based file naming. - Removed unused or redundant style exports and updated selector syntax where necessary. - **Chores** - Updated dependencies: removed vanilla-extract and added Emotion in relevant package files. - **Style** - No visual changes to existing components; all style definitions remain consistent with previous designs. - **New Features** - Introduced new reusable CSS classes for data view and table components using Emotion. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
155 lines
3.2 KiB
TypeScript
155 lines
3.2 KiB
TypeScript
import { cssVar, cssVarV2 } from '@blocksuite/affine-shared/theme';
|
|
import { css } from '@emotion/css';
|
|
|
|
export const cellContainerStyle = css({
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
border: '1px solid',
|
|
borderColor: cssVarV2.table.border,
|
|
borderCollapse: 'collapse',
|
|
isolation: 'auto',
|
|
textAlign: 'start',
|
|
verticalAlign: 'top',
|
|
});
|
|
|
|
export const columnOptionsCellStyle = css({
|
|
position: 'absolute',
|
|
height: '0',
|
|
top: '0',
|
|
left: '0',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
});
|
|
|
|
export const columnOptionsStyle = css({
|
|
cursor: 'pointer',
|
|
zIndex: 2,
|
|
width: '28px',
|
|
height: '16px',
|
|
backgroundColor: cssVarV2.table.headerBackground.default,
|
|
borderRadius: '8px',
|
|
boxShadow: cssVar('buttonShadow'),
|
|
opacity: 0,
|
|
transition: 'opacity 0.2s ease-in-out',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
'--three-pointer-icon-color': cssVarV2.icon.secondary,
|
|
':hover': {
|
|
opacity: 1,
|
|
},
|
|
'&.active': {
|
|
opacity: 1,
|
|
backgroundColor: cssVarV2.table.indicator.activated,
|
|
'--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
|
|
},
|
|
});
|
|
|
|
export const rowOptionsCellStyle = css({
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0',
|
|
width: '0',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
});
|
|
|
|
export const rowOptionsStyle = css({
|
|
cursor: 'pointer',
|
|
zIndex: 2,
|
|
width: '16px',
|
|
height: '28px',
|
|
backgroundColor: cssVarV2.table.headerBackground.default,
|
|
borderRadius: '8px',
|
|
boxShadow: cssVar('buttonShadow'),
|
|
opacity: 0,
|
|
transition: 'opacity 0.2s ease-in-out',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
'--three-pointer-icon-color': cssVarV2.icon.secondary,
|
|
':hover': {
|
|
opacity: 1,
|
|
},
|
|
'&.active': {
|
|
opacity: 1,
|
|
backgroundColor: cssVarV2.table.indicator.activated,
|
|
'--three-pointer-icon-color': cssVarV2.table.indicator.pointerActive,
|
|
},
|
|
});
|
|
|
|
export const threePointerIconStyle = css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '2px',
|
|
});
|
|
|
|
export const threePointerIconDotStyle = css({
|
|
width: '3px',
|
|
height: '3px',
|
|
backgroundColor: 'var(--three-pointer-icon-color)',
|
|
borderRadius: '50%',
|
|
});
|
|
|
|
export const indicatorStyle = css({
|
|
position: 'absolute',
|
|
backgroundColor: cssVarV2.table.indicator.activated,
|
|
zIndex: 2,
|
|
transition: 'opacity 0.2s ease-in-out',
|
|
pointerEvents: 'none',
|
|
});
|
|
|
|
export const columnIndicatorStyle = css([
|
|
indicatorStyle,
|
|
{
|
|
top: '-1px',
|
|
height: 'calc(100% + 2px)',
|
|
width: '5px',
|
|
},
|
|
]);
|
|
|
|
export const columnRightIndicatorStyle = css([
|
|
columnIndicatorStyle,
|
|
{
|
|
cursor: 'ew-resize',
|
|
right: '-3px',
|
|
pointerEvents: 'auto',
|
|
},
|
|
]);
|
|
|
|
export const columnLeftIndicatorStyle = css([
|
|
columnIndicatorStyle,
|
|
{
|
|
left: '-2px',
|
|
},
|
|
]);
|
|
|
|
export const rowIndicatorStyle = css([
|
|
indicatorStyle,
|
|
{
|
|
left: '-1px',
|
|
width: 'calc(100% + 2px)',
|
|
height: '5px',
|
|
},
|
|
]);
|
|
|
|
export const rowBottomIndicatorStyle = css([
|
|
rowIndicatorStyle,
|
|
{
|
|
bottom: '-3px',
|
|
},
|
|
]);
|
|
|
|
export const rowTopIndicatorStyle = css([
|
|
rowIndicatorStyle,
|
|
{
|
|
top: '-2px',
|
|
},
|
|
]);
|