- fixed indentation (2 spaces)

- added missing new lines at the end of files
- removed 'ps-theme-big-and-ugly' theme
- improved readme.md. Added an example on how to create custom themes with scss.
This commit is contained in:
wujekbogdan
2015-12-10 10:21:44 +01:00
parent 6fbaa00403
commit bcfe954803
6 changed files with 53 additions and 61 deletions
+17 -11
View File
@@ -309,7 +309,7 @@ The number of pixels the content height can surpass the container height without
**Default: 0**
### stopPropagationOnClick
When set to false, when clicking on a rail, the click event will be allowed to propagate.
When set to false, when clicking on a rail, the click event will be allowed to pr##opagate.
**Default: true**
### useSelectionScroll
@@ -317,29 +317,35 @@ When set to true, you can scroll the container by selecting text and move the cu
**Default: false**
### theme
A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes.
A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.
**Default: 'default'**
Example:
**Example 1:**
Add `theme` parameter:
```javascript
Ps.initialize(container, {
theme: 'my-theme-name',
theme: 'my-theme-name'
});
```
```css
Create a class name prefixed with `.ps-theme-`. Include `ps-container()` mixin. It's recommended to use `map-merge()` to extend `$ps-theme-default` map with your custom styles.
```css#
.ps-theme-my-theme-name {
@include ps-container(map-merge($ps-theme-default, (
border-radius: 0,
scrollbar-x-rail-height: 20px,
scrollbar-x-height: 20px,
scrollbar-y-rail-width: 20px,
scrollbar-y-width: 20px,)
border-radius: 0,
scrollbar-x-rail-height: 20px,
scrollbar-x-height: 20px,
scrollbar-y-rail-width: 20px,
scrollbar-y-width: 20px,)
));
}
```
**Example 2:**
Alternatively, if you don't want to create your own themes, but only modify the default one, you could simply overwrite `$ps-*` variables with your own values. In this case `theme` parameter is not required when calling `.initialize()` method. Remember do define your own variables before the `theme.scss` file is imported.
## Events
perfect-scrollbar dispatches custom events.