apphouse/dist/styles/defaults/scrollbars.ts

Component library for React that uses observable state management and theme-able components.

import { css } from 'glamor';
/**
 * A function that will apply global hidden scrollbar styles
 * @description - Set global scrollbar styles
 */
export const setGlobalHiddenScrollbarStyle = () => {
  // // Scrollbar
  css.global('::-webkit-scrollbar', {
    width: '10px',
    overflow: 'overlay',
    display: 'none'
  });
  // track
  css.global('::-webkit-scrollbar-track', {
    background: 'transparent'
  });
  // handle
  css.global('::-webkit-scrollbar-thumb', {
    background: 'transparent',
    borderRadius: '5px'
  });
  // handle on hover
  css.global('::-webkit-scrollbar-thumb:hover', {
    background: 'black'
  });

  css.global('::-webkit-scrollbar-corner', {
    background: 'transparent'
  });
};

/**
 * A hidden scrollbar styles
 */
export const HiddenScrollbarStyle = {
  '&::-webkit-scrollbar': {
    width: '10px',
    overflow: 'overlay',
    display: 'none'
  },
  '&::-webkit-scrollbar-track': {
    background: 'transparent'
  },
  '&::-webkit-scrollbar-thumb': {
    background: 'transparent',
    borderRadius: '5px'
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: 'black'
  },
  '&::-webkit-scrollbar-corner': {
    background: 'transparent'
  }
};