5690720652
close PD-1810 
112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import { cssVar } from '@toeverything/theme';
|
|
import { createVar, style } from '@vanilla-extract/css';
|
|
export const panelWidthVar = createVar('panel-width');
|
|
export const resizeHandleOffsetVar = createVar('resize-handle-offset');
|
|
export const resizeHandleVerticalPadding = createVar(
|
|
'resize-handle-vertical-padding'
|
|
);
|
|
export const animationTimeout = createVar();
|
|
|
|
export const root = style({
|
|
vars: {
|
|
[panelWidthVar]: '256px',
|
|
[resizeHandleOffsetVar]: '0',
|
|
},
|
|
position: 'relative',
|
|
width: panelWidthVar,
|
|
minWidth: panelWidthVar,
|
|
height: '100%',
|
|
zIndex: 4,
|
|
transform: 'translateX(0)',
|
|
maxWidth: '50%',
|
|
selectors: {
|
|
'&[data-open="false"][data-handle-position="right"],&[data-is-floating="true"][data-handle-position="right"]':
|
|
{
|
|
marginLeft: `calc(${panelWidthVar} * -1)`,
|
|
},
|
|
'&[data-open="false"][data-handle-position="left"],&[data-is-floating="true"][data-handle-position="left"]':
|
|
{
|
|
marginRight: `calc(${panelWidthVar} * -1)`,
|
|
},
|
|
'&[data-open="true"][data-handle-position="right"][data-is-floating="true"]':
|
|
{
|
|
transform: `translateX(calc(${panelWidthVar} + 4px))`,
|
|
},
|
|
'&[data-open="true"][data-handle-position="left"][data-is-floating="true"]':
|
|
{
|
|
transform: `translateX(calc(${panelWidthVar} * -1))`,
|
|
},
|
|
'&[data-enable-animation="true"]': {
|
|
transition: `margin-left ${animationTimeout}, margin-right ${animationTimeout}, transform ${animationTimeout}, background ${animationTimeout}`,
|
|
},
|
|
'&[data-transition-state="exited"]': {
|
|
// avoid focus on hidden panel
|
|
visibility: 'hidden',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const content = style({
|
|
contain: 'strict',
|
|
width: '100%',
|
|
height: '100%',
|
|
});
|
|
|
|
export const panelContent = style({
|
|
position: 'relative',
|
|
height: '100%',
|
|
overflow: 'auto',
|
|
});
|
|
export const resizeHandleContainer = style({
|
|
position: 'absolute',
|
|
right: resizeHandleOffsetVar,
|
|
top: resizeHandleVerticalPadding,
|
|
bottom: resizeHandleVerticalPadding,
|
|
width: 8,
|
|
zIndex: '1',
|
|
transform: 'translateX(50%)',
|
|
backgroundColor: 'transparent',
|
|
opacity: 0,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
cursor: 'col-resize',
|
|
'@media': {
|
|
'(max-width: 600px)': {
|
|
// do not allow resizing on small screen
|
|
display: 'none',
|
|
},
|
|
},
|
|
transition: 'opacity 0.15s ease 0.1s',
|
|
selectors: {
|
|
'&[data-resizing="true"], &:hover': {
|
|
opacity: 1,
|
|
},
|
|
'&[data-open="false"]': {
|
|
display: 'none',
|
|
},
|
|
'&[data-open="open"]': {
|
|
display: 'block',
|
|
},
|
|
'&[data-handle-position="left"]': {
|
|
left: resizeHandleOffsetVar,
|
|
right: 'auto',
|
|
transform: 'translateX(-50%)',
|
|
},
|
|
},
|
|
});
|
|
export const resizerInner = style({
|
|
position: 'absolute',
|
|
height: '100%',
|
|
width: '2px',
|
|
borderRadius: '2px',
|
|
backgroundColor: cssVar('primaryColor'),
|
|
transition: 'all 0.2s ease-in-out',
|
|
transform: 'translateX(0.5px)',
|
|
selectors: {
|
|
[`${resizeHandleContainer}[data-resizing="true"] &`]: {
|
|
width: '4px',
|
|
borderRadius: '4px',
|
|
},
|
|
},
|
|
});
|