keeweb/app/styles/common/_scroll.scss

52 lines
1.2 KiB
SCSS

.scroller {
overflow-y: scroll;
height: 100%;
@-moz-document url-prefix() {
// until Firefox bug is fixed in baron, hide native scroll area manually
// https://github.com/Diokuz/baron/issues/91
// https://github.com/Diokuz/baron/issues/93
margin-right: -30px;
padding-right: 30px;
}
&::-webkit-scrollbar {
width: 0;
}
&__bar-wrapper {
pointer-events: none;
position: absolute;
z-index: 3;
top: 10px;
bottom: 10px;
right: 5px;
width: 8px;
//border-radius: 5px;
//background: rgba(128, 128, 128, .05);
}
&__bar {
position: absolute;
z-index: 1;
width: 8px;
border-radius: 3px;
pointer-events: auto;
}
}
@mixin scrollbar-on-hover {
.scroller__bar-wrapper {
>.scroller__bar {
background-color: transparent;
transition: background-color $base-duration $base-timing;
}
}
&:hover .scroller__bar-wrapper {
>.scroller__bar {
transition: background-color $slow-transition-out;
background-color: rgba(136, 136, 136, .2);
&:hover {
transition: background-color $slow-transition-in;
background-color: rgba(136, 136, 136, .8);
}
}
}
}