96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
export const SwipeBackRoot = style({
|
|
position: 'relative',
|
|
flex: 1,
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
});
|
|
|
|
export const SwipeBackContent = style({
|
|
position: 'relative',
|
|
flex: 1,
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: color.Background.Container,
|
|
boxShadow: '-4px 0 16px rgba(0, 0, 0, 0.28)',
|
|
willChange: 'transform',
|
|
touchAction: 'pan-y',
|
|
});
|
|
|
|
export const CompactDetailRoot = style({
|
|
position: 'relative',
|
|
minWidth: 0,
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const CompactNavUnderlay = style({
|
|
position: 'absolute',
|
|
inset: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
zIndex: 0,
|
|
// Keep underlay tappable if the detail layer is empty/transparent
|
|
// (e.g. space index after leaving DMs). Opaque detail content still
|
|
// sits above and receives taps first.
|
|
pointerEvents: 'auto',
|
|
});
|
|
|
|
export const CompactDetailLayer = style({
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
minWidth: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
// Pass through taps when outlet content is null/empty; real pages
|
|
// re-enable pointer events on their root via the child rule below.
|
|
pointerEvents: 'none',
|
|
});
|
|
|
|
globalStyle(`${CompactDetailLayer} > *`, {
|
|
pointerEvents: 'auto',
|
|
flex: 1,
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: color.Background.Container,
|
|
});
|
|
|
|
export const SwipeToReplyLayer = style({
|
|
position: 'relative',
|
|
flex: 1,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
});
|
|
|
|
export const SwipeToReplyIndicator = style({
|
|
position: 'absolute',
|
|
right: config.space.S300,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: toRem(36),
|
|
height: toRem(36),
|
|
borderRadius: config.radii.Pill,
|
|
backgroundColor: color.Primary.Container,
|
|
color: color.Primary.OnContainer,
|
|
pointerEvents: 'none',
|
|
zIndex: 2,
|
|
opacity: 0,
|
|
transform: 'scale(0.85)',
|
|
transition: 'opacity 0.12s ease, transform 0.12s ease',
|
|
});
|
|
|
|
export const SwipeToReplyIndicatorActive = style({
|
|
opacity: 1,
|
|
transform: 'scale(1)',
|
|
});
|