RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

scroller: move ticks to left on mobile

cap
Varun Patil 2022-12-06 12:06:02 -08:00
parent 18419e1550
commit 9b0fcaf47f
1 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/ScrollerManager.vue
View File

@ -508,38 +508,6 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
opacity: 1; opacity: 1;
} }
// Hide ticks on mobile unless hovering
@include phone {
// Shift pointer events to hover cursor
pointer-events: none;
.cursor.hv {
pointer-events: all;
}
&:not(.scrolling) {
.cursor.hv {
left: 5px;
border: none;
box-shadow: 0 0 5px -3px #000;
height: 40px;
width: 70px;
border-radius: 20px;
> .text {
display: none;
}
> .icon {
display: block;
}
}
> .tick {
opacity: 0;
}
}
.cursor.st {
display: none;
}
}
> .tick { > .tick {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
@ -611,5 +579,42 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
opacity: 1; opacity: 1;
} }
} }
// Hide ticks on mobile unless hovering
@include phone {
// Shift pointer events to hover cursor
pointer-events: none;
.cursor.hv {
pointer-events: all;
}
> .tick {
right: 40px;
}
&:not(.scrolling) {
> .tick {
display: none;
}
}
.cursor.hv {
left: 5px;
border: none;
box-shadow: 0 0 5px -3px #000;
height: 40px;
width: 70px;
border-radius: 20px;
> .text {
display: none;
}
> .icon {
display: block;
}
}
.cursor.st {
display: none;
}
}
} }
</style> </style>