59 lines
1.4 KiB
SCSS
59 lines
1.4 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) {
|
||
|
|
$trackColor: transparent;
|
||
|
|
|
||
|
|
@media screen and (min-width: 550px) {
|
||
|
|
// chrome scrollbar styles
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: $width;
|
||
|
|
height: $width;
|
||
|
|
border-radius: var(--baseRadius);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: $trackColor;
|
||
|
|
border-radius: var(--baseRadius);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--baseAlt2Color);
|
||
|
|
border-radius: 15px;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
background-clip: padding-box;
|
||
|
|
&:hover,
|
||
|
|
&:active {
|
||
|
|
background-color: var(--baseAlt3Color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if & {
|
||
|
|
// firefox scrollbar
|
||
|
|
scrollbar-color: var(--baseAlt2Color) $trackColor;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
} @else {
|
||
|
|
html {
|
||
|
|
// firefox scrollbar
|
||
|
|
scrollbar-color: var(--baseAlt2Color) $trackColor;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
|
||
|
|
* {
|
||
|
|
scrollbar-width: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|