57 lines
1.8 KiB
SCSS
57 lines
1.8 KiB
SCSS
|
/*
|
||
|
|
Copyright 2018 New Vector Ltd
|
||
|
|
|
||
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
you may not use this file except in compliance with the License.
|
||
|
|
You may obtain a copy of the License at
|
||
|
|
|
||
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
|
||
|
|
Unless required by applicable law or agreed to in writing, software
|
||
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
See the License for the specific language governing permissions and
|
||
|
|
limitations under the License.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/*
|
||
|
|
1. for browsers that support native overlay auto-hiding scrollbars
|
||
|
|
*/
|
||
|
|
.mx_AutoHideScrollbar {
|
||
|
|
overflow-y: auto;
|
||
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
2. webkit also supports overflow:overlay where the scrollbars don't take any space
|
||
|
|
in the layout but they don't autohide, so do that only on hover
|
||
|
|
*/
|
||
|
|
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
|
||
|
|
overflow-y: overlay;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
3. as a last fallback, compensate for the scrollbar taking up space in the layout
|
||
|
|
by playing with the paddings. the default below will add a right padding
|
||
|
|
of the scrollbar width and clear that on hover.
|
||
|
|
this won't work well on classes that also need to set their padding,
|
||
|
|
so this needs to be overriden and adjust the padding with calc like so:
|
||
|
|
```
|
||
|
|
body.mx_scrollbar_nooverlay .componentClass.mx_AutoHideScrollbar_overflow:hover {
|
||
|
|
padding-right: calc(15px - var(--scrollbar-width)) !important;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
*/
|
||
|
|
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar {
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow-y: hidden;
|
||
|
|
padding-right: var(--scrollbar-width);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover {
|
||
|
|
overflow-y: auto;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|