Scroll refactoring: fix horizontal scroll.
This commit is contained in:
parent
0f2e985634
commit
056809faa6
|
@ -80,7 +80,7 @@
|
|||
// Or generate new perfectScrollbar
|
||||
|
||||
// Set class to the container
|
||||
$this.addClass('ps-container');
|
||||
$this.addClass('ps-container oo');
|
||||
|
||||
var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
|
||||
$scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
|
||||
|
|
|
@ -1,66 +1,123 @@
|
|||
.ps-scrollbar-x-rail {
|
||||
z-index: 1;
|
||||
}
|
||||
.ps-container.oo {
|
||||
.ps-scrollbar-x-rail {
|
||||
z-index: 1;
|
||||
bottom: 1px;
|
||||
height: 9px;
|
||||
margin-right: 1px;
|
||||
margin-left: 1px;
|
||||
|
||||
.ps-scrollbar-y-rail {
|
||||
z-index: 1;
|
||||
right: 1px !important;
|
||||
width: 9px !important;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
&.always-visible-x {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.always-visible-y {
|
||||
opacity: 1 !important;
|
||||
.ps-scrollbar-x {
|
||||
background-color: @gray-light;
|
||||
|
||||
&.always-visible-x {
|
||||
bottom: 0px;
|
||||
height: 9px;
|
||||
|
||||
background-color: @gray-light;
|
||||
.background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0;
|
||||
.border-radius(2px);
|
||||
border: 1px solid @gray;
|
||||
-o-transition: background-color .5s 0 linear;
|
||||
-webkit-transition: background-color .5s 0 linear;
|
||||
-moz-transition: background-color .5s 0 linear;
|
||||
transition: background-color .5s 0 linear;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.hover {
|
||||
.ps-scrollbar-x {
|
||||
&.always-visible-x {
|
||||
background-color: @gray;
|
||||
background-position: center -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.in-scrolling {
|
||||
.ps-scrollbar-x {
|
||||
&.always-visible-x {
|
||||
background-color: @gray-soft;
|
||||
border-color: @gray-soft;
|
||||
background-position: center -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ps-scrollbar-y {
|
||||
background-color: @gray-light;
|
||||
.ps-scrollbar-y-rail {
|
||||
z-index: 1;
|
||||
right: 1px;
|
||||
width: 9px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
|
||||
&.always-visible-y {
|
||||
right: 0px !important;
|
||||
width: 9px;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.ps-scrollbar-y {
|
||||
background-color: @gray-light;
|
||||
.background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
.border-radius(2px);
|
||||
border:1px solid @gray;
|
||||
-o-transition: background-color .5s 0 linear;
|
||||
-webkit-transition: background-color .5s 0 linear;
|
||||
-moz-transition: background-color .5s 0 linear;
|
||||
transition: background-color .5s 0 linear;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.hover {
|
||||
.ps-scrollbar-y {
|
||||
&.always-visible-y {
|
||||
background-color: @gray;
|
||||
background-position: -7px center;
|
||||
right: 0px;
|
||||
width: 9px;
|
||||
|
||||
background-color: @gray-light;
|
||||
.background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
.border-radius(2px);
|
||||
border: 1px solid @gray;
|
||||
-o-transition: background-color .5s 0 linear;
|
||||
-webkit-transition: background-color .5s 0 linear;
|
||||
-moz-transition: background-color .5s 0 linear;
|
||||
transition: background-color .5s 0 linear;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.hover {
|
||||
.ps-scrollbar-y {
|
||||
&.always-visible-y {
|
||||
background-color: @gray;
|
||||
background-position: -7px center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.in-scrolling {
|
||||
.ps-scrollbar-y {
|
||||
&.always-visible-y {
|
||||
background-color: @gray-soft;
|
||||
border-color: @gray-soft;
|
||||
background-position: -7px center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.in-scrolling {
|
||||
.ps-scrollbar-y {
|
||||
&.always-visible-y {
|
||||
background-color: @gray-soft;
|
||||
border-color: @gray-soft;
|
||||
background-position: -7px center;
|
||||
}
|
||||
}
|
||||
.ps-container:hover .ps-scrollbar-y-rail,
|
||||
.ps-container.hover .ps-scrollbar-y-rail,
|
||||
.ps-container .ps-scrollbar-y-rail:hover,
|
||||
.ps-container .ps-scrollbar-y-rail.hover,
|
||||
.ps-container .ps-scrollbar-y-rail.in-scrolling,
|
||||
.ps-container:hover .ps-scrollbar-x-rail,
|
||||
.ps-container.hover .ps-scrollbar-x-rail,
|
||||
.ps-container .ps-scrollbar-x-rail:hover,
|
||||
.ps-container .ps-scrollbar-x-rail.hover,
|
||||
.ps-container .ps-scrollbar-x-rail.in-scrolling {
|
||||
background-color: transparent !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ps-container:hover .ps-scrollbar-y-rail,
|
||||
.ps-container.hover .ps-scrollbar-y-rail,
|
||||
.ps-container .ps-scrollbar-y-rail:hover,
|
||||
.ps-container .ps-scrollbar-y-rail.hover,
|
||||
.ps-container .ps-scrollbar-y-rail.in-scrolling {
|
||||
background-color: transparent !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue