naive-ui/styles/Scrollbar.scss

69 lines
1.7 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-07-31 17:31:35 +08:00
.n-scrollbar-rail__scrollbar {
@include fade-in-transition(scrollbar);
position: absolute;
cursor: pointer;
2019-09-20 17:37:38 +08:00
background-color: map-get($scrollbar-color, 'default');
2019-09-24 12:43:56 +08:00
transition: background-color .2s $default-cubic-bezier;
2019-07-31 17:31:35 +08:00
&:hover {
2019-09-20 17:37:38 +08:00
background-color: map-get($scrollbar-color, 'hover');
}
}
@include once {
position: relative;
height: 100%;
@include b(scrollbar-vertical-rail) {
position: absolute;
user-select: none;
-moz-user-select: none;
}
@include b(scrollbar-horizontal-rail) {
position: absolute;
user-select: none;
-moz-user-select: none;
}
.n-scrollbar-horizontal-rail {
left: 0;
right: 0;
bottom: 2.5px;
.n-scrollbar-rail__scrollbar {
right: 0;
}
}
.n-scrollbar-vertical-rail {
position: absolute;
right: 2.5px;
top: 0;
bottom: 0;
.n-scrollbar-rail__scrollbar {
bottom: 0;
}
}
.n-scrollbar-container {
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.n-scrollbar-content {
width: fit-content;
overflow: visible;
min-width: 100%;
/** stylelint-disable */
width: -moz-fit-content; /* Firefox/Gecko */
width: -webkit-fit-content; /* Chrome */
/* stylelint-enable */
2019-07-31 17:31:35 +08:00
}
}
}
}