From 056809faa689d6f9df9f8d14799635d19751f93a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 10 Feb 2018 15:47:08 +0300 Subject: [PATCH] Scroll refactoring: fix horizontal scroll. --- .../common/main/lib/mods/perfect-scrollbar.js | 2 +- apps/common/main/resources/less/scroller.less | 159 ++++++++++++------ 2 files changed, 109 insertions(+), 52 deletions(-) diff --git a/apps/common/main/lib/mods/perfect-scrollbar.js b/apps/common/main/lib/mods/perfect-scrollbar.js index 1375e41eb..3b4283bc6 100644 --- a/apps/common/main/lib/mods/perfect-scrollbar.js +++ b/apps/common/main/lib/mods/perfect-scrollbar.js @@ -80,7 +80,7 @@ // Or generate new perfectScrollbar // Set class to the container - $this.addClass('ps-container'); + $this.addClass('ps-container oo'); var $scrollbarXRail = $("
").appendTo($this), $scrollbarYRail = $("
").appendTo($this), diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less index cc62ed8c6..ef65d55e7 100644 --- a/apps/common/main/resources/less/scroller.less +++ b/apps/common/main/resources/less/scroller.less @@ -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; -} +} \ No newline at end of file