126 lines
3.0 KiB
Plaintext
126 lines
3.0 KiB
Plaintext
//
|
|
// Scrollbar
|
|
// --------------------------------------------------
|
|
|
|
.drag-noselect {
|
|
.user-select(none);
|
|
}
|
|
|
|
@scrollbar-thumb-size: 6px;
|
|
|
|
.control-scrollbar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
|
|
>.scrollbar-scrollbar {
|
|
position: absolute;
|
|
z-index: 100;
|
|
.scrollbar-track {
|
|
background-color: @color-scrollbar-track;
|
|
position: relative;
|
|
.border-radius(5px);
|
|
|
|
.scrollbar-thumb {
|
|
background-color: @color-scrollbar-thumb;
|
|
.border-radius(5px);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
>.scrollbar-scrollbar {
|
|
right: 0;
|
|
margin-right: 5px;
|
|
width: @scrollbar-thumb-size;
|
|
.scrollbar-track {
|
|
height: 100%;
|
|
width: @scrollbar-thumb-size;
|
|
.scrollbar-thumb {
|
|
height: 20px;
|
|
width: @scrollbar-thumb-size;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&:active, &:hover {
|
|
width: @scrollbar-thumb-size + 2px;
|
|
.transition(width .3s);
|
|
.scrollbar-track,
|
|
.scrollbar-thumb {
|
|
width: @scrollbar-thumb-size + 2px;
|
|
.transition(width .3s);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
>.scrollbar-scrollbar {
|
|
margin: 0 0 5px;
|
|
clear: both;
|
|
height: @scrollbar-thumb-size;
|
|
.scrollbar-track {
|
|
width: 100%;
|
|
height: @scrollbar-thumb-size;
|
|
.scrollbar-thumb {
|
|
height: @scrollbar-thumb-size;
|
|
margin: 2px 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
&:active, &:hover {
|
|
height: @scrollbar-thumb-size + 2px;
|
|
.transition(height .3s);
|
|
.scrollbar-track,
|
|
.scrollbar-thumb {
|
|
height: @scrollbar-thumb-size + 2px;
|
|
.transition(height .3s);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html.mobile {
|
|
.control-scrollbar {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
.no-touch .control-scrollbar {
|
|
>.scrollbar-scrollbar {
|
|
opacity: 0;
|
|
.transition(opacity 0.3s);
|
|
}
|
|
|
|
&:active >.scrollbar-scrollbar,
|
|
&:hover >.scrollbar-scrollbar {opacity: 1;}
|
|
}
|
|
|
|
@media (max-width: @screen-sm) {
|
|
&.responsive-sidebar {
|
|
> .layout-cell:last-child {
|
|
.control-scrollbar {
|
|
overflow: visible;
|
|
height: auto;
|
|
|
|
.scrollbar-scrollbar {
|
|
display: none!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|