dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-07-29 08:19:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add back scrollbar

Browse Source 
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon
2022-10-18 15:02:00 +02:00
parent 41c01d8af5
commit 2646afae23
4 changed files with 585 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Scrollbar.stories.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Meta, Story } from '@storybook/react/types-6-0'
import React from 'react'
export default {
title: 'DZEIO/Scrollbar',
parameters: {
layout: 'fullscreen'
}
} as Meta
export const Scrollbar: Story<any> = (args: any) => <div style={{height: '1000vh'}} />

28
src/general.styl
View File

@ -39,22 +39,22 @@ a
/* Track */
::-webkit-scrollbar-corner
::-webkit-scrollbar-track
background nativeRGB(var(--theme-50))
background nativeRGB(var(--theme-100))
transition $transition
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-800))
// ::-webkit-scrollbar-thumb
// background: darken(nativeRGB(var(--theme-50)), 16%)
// transition $transition
// @media (prefers-color-scheme dark)
// background lighten(nativeRGB(var(--gray-800)), 16%)
// &:hover
// background: darken(nativeRGB(var(--theme-50)), 24%)
// @media (prefers-color-scheme dark)
// background: lighten(nativeRGB(var(--gray-800)), 24%)
::-webkit-scrollbar-thumb
background: nativeRGB(var(--theme-200))
transition $transition
@media (prefers-color-scheme dark)
background nativeRGB(var(--gray-700))
&:hover
background: nativeRGB(var(--theme-300))
@media (prefers-color-scheme dark)
background: nativeRGB(var(--gray-600))
// &:active
// background: darken(nativeRGB(var(--theme-50)), 32%)
// @media (prefers-color-scheme dark)
// background: lighten(nativeRGB(var(--gray-800)), 32%)
&:active
background: nativeRGB(var(--theme-400))
@media (prefers-color-scheme dark)
background: nativeRGB(var(--gray-500))