Styling and appearance improvements

[orangecoloured]

Added customisable css class prefix.
Removed inner thumb.
Added scrollbar track custom class.
Added disappearing scrollbar toggle.

Now if a user uses a custom prefix everything's going to break, because the prefix in the css is hardcoded. It can be fixed by introducing inline styling for everything with ability to add user style objects. But at least now styles have their own namespace.

Also, heavily edited formatting, because eslinter wouldn't allow me to build.

[rommguy]

Hi @orangecoloured ,
I started to review the changes, why did you change all the spaces and added semicolons ?
Can you please revert those changes?
It makes it very hard to understand what changed from the files diff

[rommguy]

I think you are missing 'p', should be 6px

[orangecoloured]

@rommguy
All the syntax changes were necessary so the linting would stop throwing errors. I couldn't make a build without it, so I had to make those changes.
As for the prefix and styling. As I mentioned above. One way to fix it is to use inline styling, so all the styles would stay in the context of the component.

[sag1v]

any progress with this PR? something i can help with?

[sag1v]

I think we could (or should) go with css modules for this use case.
Add this to the css-loader:
css-loader?sourceMap&modules&camelCase=dashes&localIdentName=rcs-[local]

And in javascript use it as follows:

//...
import styles from './cs.scss'
//....
return (
    <div className={`${styles.customScroll} ${this.state.onDrag ? styles.scrollHandleDragged : ''}`}
      //...

This will render to the DOM:

<div class="rcs-custom-scroll">
// OR
<div class="rcs-custom-scroll rcs-scroll-handle-dragged">

Of course for every change we made we need to update the docs, as this is a breaking change.

I do think this change is a must. as mentioned by @orangecoloured, the CSS classes that are used in this library are very common and may conflict with other global CSS classes.

[sag1v]

I think we can close this as #51 solved it