You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.1 KiB
SCSS
133 lines
3.1 KiB
SCSS
// Scroll bar
|
|
.ps {
|
|
touch-action: auto;
|
|
overflow: hidden !important;
|
|
&.ps--active-x > .ps__scrollbar-x-rail,
|
|
&.ps--active-y > .ps__scrollbar-y-rail {
|
|
display: block;
|
|
background-color: transparent;
|
|
}
|
|
&.ps--active-y > .ps__scrollbar-y-rail {
|
|
top:0 !important;
|
|
}
|
|
&.ps--in-scrolling.ps--x {
|
|
> .ps__scrollbar-x-rail {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-x {
|
|
background-color: #999;
|
|
height: 11px;
|
|
}
|
|
|
|
}
|
|
}
|
|
> .ps__scrollbar-x-rail {
|
|
display: none;
|
|
position: absolute;
|
|
/* please don't change 'position' */
|
|
opacity: 0;
|
|
transition: background-color .2s linear, opacity .2s linear;
|
|
bottom: 0px;
|
|
/* there must be 'bottom' for ps__scrollbar-x-rail */
|
|
height: 15px;
|
|
> .ps__scrollbar-x {
|
|
position: absolute;
|
|
/* please don't change 'position' */
|
|
background-color: #aaa;
|
|
border-radius: 6px;
|
|
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
bottom: 2px;
|
|
/* there must be 'bottom' for ps__scrollbar-x */
|
|
height: 6px;
|
|
|
|
}
|
|
&:hover > .ps__scrollbar-x,
|
|
> .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
|
|
height: 11px;
|
|
}
|
|
}
|
|
&.ps--in-scrolling.ps--y {
|
|
> .ps__scrollbar-y-rail {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-y {
|
|
background-color: #999;
|
|
width: 11px;
|
|
}
|
|
}
|
|
}
|
|
> .ps__scrollbar-y-rail {
|
|
display: none;
|
|
position: absolute;
|
|
/* please don't change 'position' */
|
|
opacity: 0;
|
|
transition: background-color .2s linear, opacity .2s linear;
|
|
right: 0;
|
|
/* there must be 'right' for ps__scrollbar-y-rail */
|
|
width: 15px;
|
|
z-index: 999;
|
|
> .ps__scrollbar-y {
|
|
position: absolute;
|
|
/* please don't change 'position' */
|
|
background-color: #aaa;
|
|
border-radius: 6px;
|
|
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
|
right: 2px;
|
|
/* there must be 'right' for ps__scrollbar-y */
|
|
width: 6px;
|
|
}
|
|
&:hover > .ps__scrollbar-y,
|
|
> .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
|
|
width: 11px;
|
|
}
|
|
}
|
|
&:hover.ps--in-scrolling.ps--x {
|
|
> .ps__scrollbar-x-rail {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-x {
|
|
background-color: #999;
|
|
height: 11px;
|
|
}
|
|
}
|
|
}
|
|
&:hover.ps--in-scrolling.ps--y {
|
|
> .ps__scrollbar-y-rail {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-y {
|
|
background-color: #999;
|
|
width: 11px;
|
|
}
|
|
}
|
|
}
|
|
&:hover > .ps__scrollbar-x-rail,
|
|
&:hover > .ps__scrollbar-y-rail {
|
|
opacity: 0.6;
|
|
}
|
|
&:hover {
|
|
> .ps__scrollbar-x-rail{
|
|
&:hover {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-x {
|
|
background-color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .ps__scrollbar-y-rail {
|
|
&:hover {
|
|
background-color: #eee;
|
|
opacity: 0.9;
|
|
> .ps__scrollbar-y {
|
|
background-color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|