Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Scroll refactoring: fix horizontal scroll.

Browse source
This commit is contained in:
Julia Radzhabova 2018-02-10 15:47:08 +03:00
parent 0f2e985634
commit 056809faa6
2 changed files with 109 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/mods/perfect-scrollbar.js
View file

@ -80,7 +80,7 @@
// Or generate new perfectScrollbar // Or generate new perfectScrollbar
// Set class to the container // 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), var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
$scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this), $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),

159
apps/common/main/resources/less/scroller.less
View file

@ -1,66 +1,123 @@
.ps-scrollbar-x-rail { .ps-container.oo {
z-index: 1; .ps-scrollbar-x-rail {
} z-index: 1;
bottom: 1px;
height: 9px;
margin-right: 1px;
margin-left: 1px;
.ps-scrollbar-y-rail { &.always-visible-x {
z-index: 1; opacity: 1 !important;
right: 1px !important; }
width: 9px !important;
margin-top: 1px;
margin-bottom: 1px;
&.always-visible-y { .ps-scrollbar-x {
opacity: 1 !important; 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 { .ps-scrollbar-y-rail {
background-color: @gray-light; z-index: 1;
right: 1px;
width: 9px;
margin-top: 1px;
margin-bottom: 1px;
&.always-visible-y { &.always-visible-y {
right: 0px !important; opacity: 1 !important;
width: 9px; }
.ps-scrollbar-y {
background-color: @gray-light; 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 { &.always-visible-y {
background-color: @gray; right: 0px;
background-position: -7px center; 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-container:hover .ps-scrollbar-y-rail,
.ps-scrollbar-y { .ps-container.hover .ps-scrollbar-y-rail,
&.always-visible-y { .ps-container .ps-scrollbar-y-rail:hover,
background-color: @gray-soft; .ps-container .ps-scrollbar-y-rail.hover,
border-color: @gray-soft; .ps-container .ps-scrollbar-y-rail.in-scrolling,
background-position: -7px center; .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;
}