Skip to content

Instantly share code, notes, and snippets.

@zoxon
Created March 5, 2021 08:23
Show Gist options
  • Save zoxon/f46efdfc5b4dab6b5d76b85806e5d8cf to your computer and use it in GitHub Desktop.
Save zoxon/f46efdfc5b4dab6b5d76b85806e5d8cf to your computer and use it in GitHub Desktop.
<template>
<component :is="tag" :class="classes" :style="style"><slot></slot></component>
</template>
<script>
import { isNumber } from '@/helpers/is'
import { stringToModifiers } from '@/helpers/bem'
export default {
name: 'BaseScrollbar',
props: {
tag: { type: [String, Object], default: 'div' },
width: { type: [Number, String], default: 8 },
theme: { type: [String, Array], default: 'default' }
},
computed: {
classes() {
const themes = stringToModifiers({
block: 'scrollbar',
key: 'theme',
mods: this.theme
})
return ['scrollbar', ...themes]
},
style() {
const width = isNumber(this.width) ? `${this.width}px` : this.width
return {
'--scrollbar-width': width
}
}
}
}
</script>
<style lang="scss">
.scrollbar {
$root: &;
&::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
&::-webkit-scrollbar-track {
border-radius: var(--track-radius);
background: var(--track-background);
box-shadow: var(--track-shadow);
transition: box-shadow 0.2s ease-in-out;
}
&::-webkit-scrollbar-thumb {
border-radius: var(--thumb-radius);
background: var(--thumb-background);
box-shadow: var(--thumb-shadow);
transition: background 0.2s linear;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--thumb-background-hover);
}
&_theme_default {
$system-like: inset 7px 10px 12px $ui-200;
--thumb-radius: 8px;
--thumb-shadow: none;
--thumb-background: #{$ui-300};
--thumb-background-hover: #{$ui-500};
--track-background: transparent;
--track-radius: 0;
--track-shadow: #{$system-like};
scrollbar-color: #0064a7 #8ea5b5;
&:hover {
--thumb-background: #{$ui-400};
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment