cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding custom-theme scss used for custom-theme example. Added ability to set a hover scale size in the theme which will scale the X and Y rails when hovered.

Browse Source
This commit is contained in:
Chris Driscol
2016-06-01 16:48:50 -06:00
parent 9016f207e9
commit e9d7cc97c8
7 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/custom-theme.html
View File

@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<link href="custom-theme.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
@@ -19,7 +19,7 @@
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'), {
theme: 'big-and-ugly'
theme: 'custom-theme'
});
};
</script>

12
examples/custom-theme.scss Normal file
View File

@@ -0,0 +1,12 @@
@import '../src/css/main';
.ps-theme-custom-theme {
@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,
scrollbar-rail-scale-hover: 1.5
)));
}