mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(scrollbar): support light theme

Browse Source
This commit is contained in:
07akioni 2019-09-20 17:37:38 +08:00
parent 7892d3ca05
commit 838510b025
2 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/common/Scrollbar/src/main.vue
View File

@ -1,6 +1,9 @@
<template>
<div
class="n-scrollbar"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
@mouseenter="enterScrollWrapper"
@mouseleave="leaveScrollWrapper"
@dragstart.capture="handleDragStart"
@ -61,9 +64,12 @@
</template>
<script>
import withapp from '../../../mixins/withapp'
import themable from '../../../mixins/themeable'
export default {
name: 'NScrollbar',
mixins: [withapp, themable],
props: {
width: {
type: Number,

105
styles/Scrollbar.scss
View File

@ -2,62 +2,67 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(scrollbar) {
position: relative;
height: 100%;
.n-scrollbar-vertical-rail, .n-scrollbar-horizontal-rail {
position: absolute;
user-select: none;
-moz-user-select: none;
@include themes-mixin {
@include b(scrollbar) {
.n-scrollbar-rail__scrollbar {
@include fade-in-transition(scrollbar);
position: absolute;
cursor: pointer;
background-color: $scrollbar-color;
background-color: map-get($scrollbar-color, 'default');
&:hover {
background-color: $scrollbar-color--hover;
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 */
}
}
}
}
.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 */
}