65 lines
1.6 KiB
SCSS
65 lines
1.6 KiB
SCSS
@mixin hide() {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@mixin show() {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
@mixin shadowize($value...) {
|
|
box-shadow: 0px 2px 5px 0px var(--shadowColor), $value;
|
|
}
|
|
|
|
@mixin scrollbar(
|
|
$width: 8px,
|
|
$thumbColor: var(--baseAlt2Color),
|
|
$thumbActiveColor: var(--baseAlt3Color)
|
|
) {
|
|
$trackColor: transparent;
|
|
|
|
$elem: if(&, '&', '');
|
|
|
|
@media screen and (min-width: 550px) {
|
|
// chrome scrollbar styles
|
|
#{$elem}::-webkit-scrollbar {
|
|
width: $width;
|
|
height: $width;
|
|
border-radius: var(--baseRadius);
|
|
}
|
|
#{$elem}::-webkit-scrollbar-track {
|
|
background: $trackColor;
|
|
border-radius: var(--baseRadius);
|
|
}
|
|
#{$elem}::-webkit-scrollbar-thumb {
|
|
background-color: $thumbColor;
|
|
border-radius: 15px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
&:hover,
|
|
&:active {
|
|
background-color: $thumbActiveColor;
|
|
}
|
|
}
|
|
|
|
@if & {
|
|
// firefox scrollbar
|
|
scrollbar-color: $thumbColor $trackColor;
|
|
scrollbar-width: thin;
|
|
scroll-behavior: smooth;
|
|
} @else {
|
|
html {
|
|
// firefox scrollbar
|
|
scrollbar-color: $thumbColor $trackColor;
|
|
scrollbar-width: thin;
|
|
scroll-behavior: smooth;
|
|
|
|
* {
|
|
scrollbar-width: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|