92 lines
2.0 KiB
TypeScript
92 lines
2.0 KiB
TypeScript
|
import { style } from '@vanilla-extract/css';
|
||
|
|
import { color, config, toRem } from 'folds';
|
||
|
|
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||
|
|
|
||
|
|
export const ItemDraggableTarget = style([
|
||
|
|
ContainerColor({ variant: 'SurfaceVariant' }),
|
||
|
|
{
|
||
|
|
height: '100%',
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
top: 0,
|
||
|
|
zIndex: 1,
|
||
|
|
cursor: 'grab',
|
||
|
|
borderRadius: config.radii.R400,
|
||
|
|
opacity: config.opacity.P300,
|
||
|
|
|
||
|
|
':active': {
|
||
|
|
cursor: 'ns-resize',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const LineHeight = 4;
|
||
|
|
const DropTargetLine = style({
|
||
|
|
selectors: {
|
||
|
|
'&[data-hover=true]:before': {
|
||
|
|
content: '',
|
||
|
|
display: 'block',
|
||
|
|
width: '100%',
|
||
|
|
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
top: '50%',
|
||
|
|
zIndex: 1,
|
||
|
|
transform: 'translateY(-50%)',
|
||
|
|
|
||
|
|
borderBottom: `${toRem(LineHeight)} solid currentColor`,
|
||
|
|
},
|
||
|
|
'&[data-hover=true]:after': {
|
||
|
|
content: '',
|
||
|
|
display: 'block',
|
||
|
|
width: toRem(LineHeight * 3),
|
||
|
|
height: toRem(LineHeight * 3),
|
||
|
|
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
top: '50%',
|
||
|
|
zIndex: 1,
|
||
|
|
transform: 'translate(-50%, -50%)',
|
||
|
|
|
||
|
|
backgroundColor: color.Surface.Container,
|
||
|
|
border: `${toRem(LineHeight)} solid currentColor`,
|
||
|
|
borderRadius: '50%',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const BaseAfterRoomItemDropTarget = style({
|
||
|
|
width: '100%',
|
||
|
|
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
bottom: 0,
|
||
|
|
zIndex: 99,
|
||
|
|
|
||
|
|
color: color.Success.Main,
|
||
|
|
|
||
|
|
selectors: {
|
||
|
|
'&[data-error=true]': {
|
||
|
|
color: color.Critical.Main,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const RoomTargetHeight = 32;
|
||
|
|
export const AfterRoomItemDropTarget = style([
|
||
|
|
BaseAfterRoomItemDropTarget,
|
||
|
|
{
|
||
|
|
height: toRem(RoomTargetHeight),
|
||
|
|
transform: `translateY(${toRem(RoomTargetHeight / 2 + LineHeight / 2)})`,
|
||
|
|
},
|
||
|
|
DropTargetLine,
|
||
|
|
]);
|
||
|
|
const SpaceTargetHeight = 14;
|
||
|
|
export const AfterSpaceItemDropTarget = style([
|
||
|
|
BaseAfterRoomItemDropTarget,
|
||
|
|
{
|
||
|
|
height: toRem(SpaceTargetHeight),
|
||
|
|
transform: `translateY(calc(100% - ${toRem(4)}))`,
|
||
|
|
},
|
||
|
|
DropTargetLine,
|
||
|
|
]);
|