TelegramPWA/src/components/ui/Draggable.module.scss

59 lines
775 B
SCSS

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