92 lines
3.0 KiB
SCSS
92 lines
3.0 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.
|
|
*/
|
|
|
|
/* This file has CSS for both native and non-native scrollbars in an
|
|
* order that's fairly logic to read but violates stylelints descending
|
|
* specificity rule, so turn it off for this file. It also duplicates
|
|
* a selector to separate the hiding/showing from the sizing.
|
|
*/
|
|
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
|
|
|
|
/*
|
|
1. for browsers that support native overlay auto-hiding scrollbars
|
|
*/
|
|
.mx_AutoHideScrollbar {
|
|
overflow-x: hidden;
|
|
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 having giving the child element (.mx_AutoHideScrollbar_offset) a
|
|
negative right margin of the width of the scrollbar when the container
|
|
is overflowing. This is what Firefox ends up using. Overflow is detected
|
|
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
|
|
This only works in Firefox, which should be fine as this fallback is only needed there.
|
|
*/
|
|
body.mx_scrollbar_nooverlay {
|
|
.mx_AutoHideScrollbar {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.mx_AutoHideScrollbar:hover {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/*
|
|
offset scrollbar width with negative margin-right
|
|
|
|
include before and after psuedo-elements here so they can
|
|
be used to do something interesting like scroll-indicating
|
|
gradients (see IndicatorScrollBar)
|
|
*/
|
|
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
|
|
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
|
|
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
|
|
{
|
|
margin-right: calc(-1 * var(--scrollbar-width));
|
|
}
|
|
}
|
|
|
|
// style the native scrollbars ...
|
|
// ... standard css scrollbars (firefox at time of writing)
|
|
.mx_AutoHideScrollbar {
|
|
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
|
scrollbar-width: thin;
|
|
}
|
|
// or fallback for webkit browsers
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: $scrollbar-track-color;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: $scrollbar-thumb-color;
|
|
border-radius: 3px;
|
|
}
|