You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.0 KiB
146 lines
3.0 KiB
@import "../../index"; |
|
|
|
.scrollbar-layout-main { |
|
box-sizing: border-box; |
|
outline: none; |
|
overflow: hidden; |
|
position: absolute; |
|
transition-duration: 250ms; |
|
transition-timing-function: ease; |
|
user-select: none; |
|
.background-color(@scroll-color, 5%); |
|
border-radius: 5px; |
|
} |
|
|
|
.bi-theme-dark { |
|
.scrollbar-layout-main { |
|
.background-color(@scroll-color-theme-dark, 5%); |
|
} |
|
} |
|
|
|
.scrollbar-layout-main-vertical { |
|
bottom: 0; |
|
right: 0; |
|
top: 0; |
|
transition-property: background-color; |
|
width: 10px; |
|
} |
|
|
|
.scrollbar-layout-main-vertical.public-scrollbar-main-active, |
|
.scrollbar-layout-main-vertical:hover { |
|
width: 10px; |
|
} |
|
|
|
.scrollbar-layout-main-horizontal { |
|
bottom: 0; |
|
height: 10px; |
|
left: 0; |
|
transition-property: background-color; |
|
.background-color(@scroll-color, 5%); |
|
} |
|
|
|
.bi-theme-dark { |
|
.scrollbar-layout-main-horizontal { |
|
.background-color(@scroll-color-theme-dark, 5%); |
|
} |
|
} |
|
|
|
/* Touching the scroll-track directly makes the scroll-track bolder */ |
|
.scrollbar-layout-main-horizontal.public-scrollbar-main-active, |
|
.scrollbar-layout-main-horizontal:hover { |
|
height: 10px; |
|
} |
|
|
|
.scrollbar-layout-face { |
|
left: 0; |
|
overflow: hidden; |
|
position: absolute; |
|
z-index: 1; |
|
} |
|
|
|
/** |
|
* This selector renders the "nub" of the scrollface. The nub must |
|
* be rendered as pseudo-element so that it won't receive any UI events then |
|
* we can get the correct `event.offsetX` and `event.offsetY` from the |
|
* scrollface element while dragging it. |
|
*/ |
|
.scrollbar-layout-face:after { |
|
border-radius: 6px; |
|
content: ''; |
|
display: block; |
|
position: absolute; |
|
transition: background-color 250ms ease; |
|
} |
|
|
|
.scrollbar-layout-face-horizontal { |
|
bottom: 0; |
|
left: 0; |
|
top: 0; |
|
} |
|
|
|
.scrollbar-layout-face-horizontal:after { |
|
bottom: 2px; |
|
left: 0; |
|
top: 2px; |
|
width: 100%; |
|
} |
|
|
|
.scrollbar-layout-face-vertical { |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
} |
|
|
|
.scrollbar-layout-face-vertical:after { |
|
height: 100%; |
|
left: 2px; |
|
right: 2px; |
|
top: 0; |
|
} |
|
|
|
/** |
|
* scrollbars. |
|
*/ |
|
|
|
/* Touching the scroll-track directly makes the scroll-track bolder */ |
|
.public-scrollbar-main.public-scrollbar-main-active, |
|
.public-scrollbar-main:hover { |
|
//background-color: rgba(255, 255, 255, 0.8); |
|
} |
|
|
|
.public-scrollbar-main-opaque, |
|
.public-scrollbar-main-opaque.public-scrollbar-main-active, |
|
.public-scrollbar-main-opaque:hover { |
|
//background-color: #fff; |
|
} |
|
|
|
.public-scrollbar-face:after { |
|
.background-color(@scroll-color, 30%); |
|
} |
|
|
|
.bi-theme-dark { |
|
.public-scrollbar-face:after { |
|
.background-color(@scroll-color-theme-dark, 30%); |
|
} |
|
} |
|
|
|
.public-scrollbar-main:hover .public-scrollbar-face:after, |
|
.public-scrollbar-main-active .public-scrollbar-face:after, |
|
.public-scrollbar-face-active:after { |
|
.background-color(@scroll-color, 70%); |
|
} |
|
|
|
.bi-theme-dark { |
|
.public-scrollbar-main:hover .public-scrollbar-face:after, |
|
.public-scrollbar-main-active .public-scrollbar-face:after, |
|
.public-scrollbar-face-active:after { |
|
.background-color(@scroll-color-theme-dark, 70%); |
|
} |
|
} |
|
|
|
//horizontalScrollbar |
|
.horizontal-scrollbar { |
|
bottom: 0; |
|
position: absolute; |
|
} |
|
|
|
|