dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-04-23 19:32:14 +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
Signed by: Florian Bouillon
GPG Key ID: E05B3A94178D3A7C
4 changed files with 585 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

760
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@dzeio/components",
"version": "1.0.0-beta.4",
"version": "1.0.0-beta.5",
"license": "MIT",
"main": "./index.umd.js",
"module": "./index.es.js",
@ -14,6 +14,7 @@
"@types/node": "^18",
"@types/react": "^18",
"@types/react-dom": "^18",
"html-webpack-plugin": "^5.5.0",
"next": "^12",
"react": "^18",
"react-dom": "^18",

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))