@eclipse-scout/core
Version:
Eclipse Scout runtime
240 lines (194 loc) • 6.74 kB
text/less
/*
* Copyright (c) 2010, 2023 BSI Business Systems Integration AG
*
* This program and the accompanying materials are made
* available under the terms of the Eclipse Public License 2.0
* which is available at https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*/
@scrollbar-size-transition-speed: 125ms;
.scrollbar {
position: absolute;
z-index: 1;
cursor: pointer;
overflow: hidden;
transition: opacity 250ms; /* Scrollbars are hidden in hybrid mode, see Scrollbar#onTouchStart */
#scout.scrollbar-y-padding();
#scout.scrollbar-x-padding();
&.y-axis {
height: calc(~'100% - ' 2 * @scrollbar-margin);
width: @scrollbar-size;
margin-top: @scrollbar-margin;
margin-bottom: @scrollbar-margin;
&.borderless {
margin-left: 0;
margin-right: 0;
}
}
&.x-axis {
width: calc(~'100% - ' 2 * @scrollbar-margin);
height: @scrollbar-size;
margin-left: @scrollbar-margin;
margin-right: @scrollbar-margin;
&.borderless {
margin-top: 0;
margin-bottom: 0;
}
}
}
.scrollbar-thumb-handle {
height: 100%;
border-radius: 4px;
background-color: @scrollbar-thumb-color;
&.clipped-left {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.clipped-right {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.clipped-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&.clipped-bottom {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&.y-axis {
width: @scrollbar-thumb-size;
top: 0;
transition: width @scrollbar-size-transition-speed;
.scrollbar:hover > .scrollbar-thumb > &,
.scrollbar-thumb-move > & {
width: @scrollbar-thumb-hover-size;
}
}
&.x-axis {
height: @scrollbar-thumb-size;
left: 0;
transition: height @scrollbar-size-transition-speed;
.scrollbar:hover > .scrollbar-thumb > &,
.scrollbar-thumb-move > & {
height: @scrollbar-thumb-hover-size;
}
}
}
.scrollbar-thumb {
cursor: pointer;
position: absolute;
&.y-axis {
width: @scrollbar-size;
top: 0;
transition: padding-left @scrollbar-size-transition-speed;
}
&.x-axis {
height: @scrollbar-size;
left: 0;
transition: padding-top @scrollbar-size-transition-speed;
}
}
.scrollbar-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
.scrollbar-thumb:hover > .scrollbar-thumb-handle {
background-color: @scrollbar-thumb-hover-color;
}
.container-too-small-for-thumb > .scrollbar-thumb-handle {
border-radius: 0;
background-color: @scrollbar-thumb-small-color;
}
.container-too-small-for-thumb.scrollbar-thumb-move > .scrollbar-thumb-handle,
.container-too-small-for-thumb.scrollbar-thumb:hover > .scrollbar-thumb-handle {
background-color: @scrollbar-thumb-small-hover-color;
}
.hybrid-scrollable {
#scout.hide-scrollbars();
}
.scroll-shadow {
transition: box-shadow 250ms;
position: absolute;
pointer-events: none;
z-index: 1; // ensure shadow lays over elements having a z-index
#scout.scroll-shadow();
&.gradient {
--scroll-shadow-color: @scroll-shadow-gradient-color;
--scroll-shadow-size: 20px;
--scroll-shadow-blur: 15px;
--scroll-shadow-spread: 15px;
}
&.large {
--scroll-shadow-size: @scroll-shadow-size-large;
--scroll-shadow-blur: @scroll-shadow-size-large;
--scroll-shadow-spread: @scroll-shadow-size-large;
}
}
#scout {
.scroll-shadow() {
--scroll-shadow-color: @scroll-shadow-color;
--scroll-shadow-size: @scroll-shadow-size;
--scroll-shadow-blur: @scroll-shadow-blur;
--scroll-shadow-spread: @scroll-shadow-spread;
// Allow a widget to adjust the size of the shadow container
--scroll-shadow-inset-top: 0;
--scroll-shadow-inset-right: 0;
--scroll-shadow-inset-bottom: 0;
--scroll-shadow-inset-left: 0;
--scroll-shadow-blur-spread-color: var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color);
--scroll-shadow-top: inset 0 var(--scroll-shadow-size) var(--scroll-shadow-blur-spread-color);
--scroll-shadow-bottom: inset 0 calc(-1 * var(--scroll-shadow-size)) var(--scroll-shadow-blur-spread-color);
--scroll-shadow-left: inset var(--scroll-shadow-size) 0 var(--scroll-shadow-blur-spread-color);
--scroll-shadow-right: inset calc(-1 * var(--scroll-shadow-size)) 0 var(--scroll-shadow-blur-spread-color);
--scroll-shadow-none: inset 0 0 0 0 transparent;
@scroll-shadow-top: var(--scroll-shadow-top);
@scroll-shadow-bottom: var(--scroll-shadow-bottom);
@scroll-shadow-left: var(--scroll-shadow-left);
@scroll-shadow-right: var(--scroll-shadow-right);
@scroll-shadow-none: var(--scroll-shadow-none);
&.top {
box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-none;
&.bottom {
box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-none;
&.left {
box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-left;
}
&.right {
box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-none;
&.left {
box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-left;
}
}
}
&.left {
box-shadow: @scroll-shadow-top, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-left;
&.right {
box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-left;
}
}
&.right {
box-shadow: @scroll-shadow-top, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-none;
}
}
&.bottom {
box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-none;
&.right {
box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-none;
}
}
&.left {
box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-left;
&.right {
box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-left;
}
&.bottom {
box-shadow: @scroll-shadow-none, @scroll-shadow-none, @scroll-shadow-bottom, @scroll-shadow-left;
&.right {
box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-bottom, @scroll-shadow-left;
}
}
}
&.right {
box-shadow: @scroll-shadow-none, @scroll-shadow-right, @scroll-shadow-none, @scroll-shadow-none;
}
}
}