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

Use > CSS selector.

Browse Source 
This patch will resolve inner scrollbar problems.
This commit is contained in:
Hyunje Alex Jun 2014-10-21 20:53:55 +01:00
parent 4f7595a34f
commit 65869821c1
1 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/perfect-scrollbar.css
View File

@ -1,4 +1,4 @@
.ps-container .ps-scrollbar-x-rail { .ps-container>.ps-scrollbar-x-rail {
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */ bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px; height: 8px;
@ -13,26 +13,24 @@
transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear;
} }
.ps-container:hover .ps-scrollbar-x-rail, .ps-container:hover>.ps-scrollbar-x-rail {
.ps-container.hover .ps-scrollbar-x-rail {
opacity: 0.6; opacity: 0.6;
filter: alpha(opacity=60); filter: alpha(opacity=60);
} }
.ps-container .ps-scrollbar-x-rail:hover, .ps-container>.ps-scrollbar-x-rail:hover {
.ps-container .ps-scrollbar-x-rail.hover {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
.ps-container .ps-scrollbar-x-rail.in-scrolling { .ps-container>.ps-scrollbar-x-rail.in-scrolling {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
.ps-container .ps-scrollbar-y-rail { .ps-container>.ps-scrollbar-y-rail {
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
width: 8px; width: 8px;
@ -47,26 +45,24 @@
transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear;
} }
.ps-container:hover .ps-scrollbar-y-rail, .ps-container:hover>.ps-scrollbar-y-rail {
.ps-container.hover .ps-scrollbar-y-rail {
opacity: 0.6; opacity: 0.6;
filter: alpha(opacity=60); filter: alpha(opacity=60);
} }
.ps-container .ps-scrollbar-y-rail:hover, .ps-container>.ps-scrollbar-y-rail:hover {
.ps-container .ps-scrollbar-y-rail.hover {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
.ps-container .ps-scrollbar-y-rail.in-scrolling { .ps-container>.ps-scrollbar-y-rail.in-scrolling {
background-color: #eee; background-color: #eee;
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
.ps-container .ps-scrollbar-x { .ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */ bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
height: 8px; height: 8px;
@ -80,12 +76,11 @@
transition: background-color .2s linear; transition: background-color .2s linear;
} }
.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
background-color: #999; background-color: #999;
} }
.ps-container .ps-scrollbar-y { .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
position: absolute; /* please don't change 'position' */ position: absolute; /* please don't change 'position' */
right: 0; /* there must be 'right' for ps-scrollbar-y */ right: 0; /* there must be 'right' for ps-scrollbar-y */
width: 8px; width: 8px;
@ -99,7 +94,6 @@
transition: background-color .2s linear; transition: background-color .2s linear;
} }
.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
background-color: #999; background-color: #999;
} }