naive-ui/styles/Scrollbar.scss

79 lines
2.0 KiB
SCSS
Raw Normal View History

2019-08-01 16:01:35 +08:00
/* stylelint-disable */
2019-07-31 17:31:35 +08:00
@import './mixins/mixins.scss';
@import './themes/vars.scss';
2019-07-31 17:31:35 +08:00
2019-09-20 17:37:38 +08:00
@include themes-mixin {
@include b(scrollbar) {
2019-12-15 19:44:35 +08:00
@include once {
position: relative;
height: 100%;
}
& > {
2019-12-15 19:44:35 +08:00
@include once {
@include b(scrollbar-container) {
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: 0;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
& > {
@include b(scrollbar-content) {
width: fit-content;
overflow: hidden;
min-width: 100%;
/** stylelint-disable */
width: -moz-fit-content; /* Firefox/Gecko */
width: -webkit-fit-content; /* Chrome */
/* stylelint-enable */
}
}
}
}
2019-12-15 19:44:35 +08:00
@include b(scrollbar-rail) {
@include once {
position: absolute;
2019-12-15 19:44:35 +08:00
user-select: none;
-moz-user-select: none;
@include m(horizontal) {
left: 0;
right: 0;
bottom: 2.5px;
& > {
@include e(scrollbar) {
right: 0;
}
}
}
@include m(vertical) {
right: 2.5px;
top: 0;
bottom: 0;
& > {
@include e(scrollbar) {
bottom: 0;
}
}
}
}
2019-12-15 19:44:35 +08:00
& > {
@include e(scrollbar) {
@include once {
@include fade-in-transition(scrollbar);
position: absolute;
cursor: pointer;
}
background-color: map-get($scrollbar-color, 'default');
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
2019-12-15 19:44:35 +08:00
&:hover {
background-color: map-get($scrollbar-color, 'hover');
}
}
2019-09-20 17:37:38 +08:00
}
}
2019-07-31 17:31:35 +08:00
}
}
}