86 lines
1.7 KiB
SCSS
86 lines
1.7 KiB
SCSS
@import "../../scss/_bootstrap-extended/include";
|
|
@import "perfect-scrollbar/css/perfect-scrollbar";
|
|
|
|
$ps-width: .25rem !default;
|
|
$ps-hover-width: .375rem !default;
|
|
|
|
|
|
.ps {
|
|
position: relative;
|
|
.ps__rail-x {
|
|
block-size: $ps-width;
|
|
}
|
|
|
|
.ps__rail-y {
|
|
z-index: 3;
|
|
inline-size: $ps-width;
|
|
}
|
|
|
|
.ps__rail-x,
|
|
.ps__rail-y,
|
|
.ps__thumb-x,
|
|
.ps__thumb-y {
|
|
@include border-radius($border-radius-pill);
|
|
}
|
|
|
|
.ps__rail-x:hover,
|
|
.ps__rail-x:focus,
|
|
.ps__rail-x.ps--clicking,
|
|
.ps__rail-x:hover > .ps__thumb-x,
|
|
.ps__rail-x:focus > .ps__thumb-x,
|
|
.ps__rail-x.ps--clicking > .ps__thumb-x {
|
|
block-size: $ps-hover-width;
|
|
}
|
|
|
|
.ps__rail-y:hover,
|
|
.ps__rail-y:focus,
|
|
.ps__rail-y.ps--clicking,
|
|
.ps__rail-y:hover > .ps__thumb-y,
|
|
.ps__rail-y:focus > .ps__thumb-y,
|
|
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
|
inline-size: $ps-hover-width;
|
|
}
|
|
|
|
.ps__thumb-x {
|
|
block-size: $ps-width;
|
|
inset-block-end: 0;
|
|
}
|
|
|
|
.ps__thumb-y {
|
|
inline-size: $ps-width;
|
|
inset-inline-end: 0;
|
|
}
|
|
.ps__thumb-x,
|
|
.ps__thumb-y {
|
|
background-color: var(--#{$prefix}gray-400);
|
|
}
|
|
|
|
.ps__rail-x:hover,
|
|
.ps__rail-y:hover,
|
|
.ps__rail-x:focus,
|
|
.ps__rail-y:focus,
|
|
.ps__rail-x.ps--clicking,
|
|
.ps__rail-y.ps--clicking {
|
|
background-color: var(--#{$prefix}gray-200);
|
|
}
|
|
|
|
.ps__rail-x:hover > .ps__thumb-x,
|
|
.ps__rail-y:hover > .ps__thumb-y,
|
|
.ps__rail-x:focus > .ps__thumb-x,
|
|
.ps__rail-y:focus > .ps__thumb-y,
|
|
.ps__rail-x.ps--clicking > .ps__thumb-x,
|
|
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
|
background-color: var(--#{$prefix}gray-700);
|
|
}
|
|
}
|
|
|
|
/* Firefox width issue fixed */
|
|
@supports (-moz-appearance: none) {
|
|
#both-scrollbars-example {
|
|
margin-block: 0;
|
|
margin-inline: auto;
|
|
max-inline-size: 1080px;
|
|
padding-inline: 0;
|
|
}
|
|
}
|