muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

better scrollbars

Browse source
This commit is contained in:
Fedor Katurov 2019-11-03 21:38:15 +07:00
parent 0c2229d9af
commit e6fd658039
5 changed files with 65 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
package-lock.json generated
View file

@ -3605,6 +3605,11 @@
"shallow-clone": "^3.0.0"
}
},
"cnbuilder": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/cnbuilder/-/cnbuilder-1.1.7.tgz",
"integrity": "sha512-8D9dpabOVOh7GX/qPZ60sJpqxHaiLqSDsuZOYH1TvoNkgMrO7BJHCbNepHHoglSdU//M2sjLHaL9Vu0qibSV2A=="
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@ -11250,6 +11255,16 @@
"react-motion": "^0.5.2"
}
},
"react-scrollbars-custom": {
"version": "4.0.21",
"resolved": "https://registry.npmjs.org/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz",
"integrity": "sha512-EwIVXBYsZG91Wm90a8ajSjpclXMu3XehcSGz+QbnLDQbmc+Rj/Uj+gP9bgbhyvQTKlhfjoka77VEWu9/DxOwBg==",
"requires": {
"cnbuilder": "^1.1.7",
"react-draggable": "^3.3.2",
"zoom-level": "^1.2.4"
}
},
"react-sizeme": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.7.tgz",
@ -14934,6 +14949,11 @@
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"dev": true
},
"zoom-level": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/zoom-level/-/zoom-level-1.2.4.tgz",
"integrity": "sha512-nGFUhyU3Y4jWh6l+hYCVVUxu3vrD0i/RkumJRzYGU0COMWMs2Szs84mltacd64R9zJcxwKckWQN/KKbfB1btVA=="
}
}
}

1
package.json
View file

@ -96,6 +96,7 @@
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scrollbar": "^0.5.4",
"react-scrollbars-custom": "^4.0.21",
"react-sortable-hoc": "^1.10.1",
"react-stack-grid": "^0.7.1",
"redux": "^4.0.1",

2
src/containers/dialogs/BetterScrollDialog/index.tsx
View file

@ -9,7 +9,7 @@ import React, {
} from 'react';
// import { DialogPanel } from '~/components/panels/DialogPanel';
import classNames from 'classnames';
import { Scroll } from '~/components/containers/Scroll';
import Scroll from 'react-scrollbars-custom';
import * as styles from './styles.scss';
import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
import { Icon } from '~/components/input/Icon';

2
src/redux/modal/reducer.ts
View file

@ -10,7 +10,7 @@ export interface IModalState {
const INITIAL_STATE: IModalState = {
is_shown: false,
dialog: DIALOGS.LOGIN,
dialog: DIALOGS.TEST,
};
export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

42
src/styles/global.scss
View file

@ -86,3 +86,45 @@ body {
:global(h2) {
font: $font_24_bold;
}
::-webkit-scrollbar {
width: 18px;
height: 18px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-thumb {
background: #999999;
border: 4px solid $content_bg;
border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover {
background: lighten(#999999, 4%);
}
::-webkit-scrollbar-thumb:active {
background: lighten(#999999, 8%);
}
::-webkit-scrollbar-track {
background: $content_bg;
border: 0px none #ffffff;
border-radius: 50px;
}
// ::-webkit-scrollbar-track:hover {
// background: #666666;
// }
//
// ::-webkit-scrollbar-track:active {
// background: #333333;
// }
::-webkit-scrollbar-corner {
background: transparent;
}