TelegramPWA/src/components/ui/Draggable.module.scss
2022-08-09 13:21:23 +02:00

49 lines
694 B
SCSS

.container {
position: absolute;
width: 100%;
z-index: 1;
&:has(:global(.ListItem-context-menu)) {
z-index: 2;
}
}
.isDragging {
z-index: 2;
> *:not(.knob) {
pointer-events: none;
}
}
.knob {
position: absolute;
top: 50%;
width: 2rem;
height: 2rem;
color: var(--color-text-secondary);
font-size: 1.25rem;
line-height: 1.75;
text-align: center;
opacity: 0;
transition: opacity 150ms;
cursor: grab !important;
transform: translateY(-50%);
.container:hover & {
opacity: 1;
}
.isDragging & {
opacity: 1;
cursor: grabbing !important;
}
@media (pointer: coarse) {
opacity: 1 !important;
touch-action: none;
}
}