Skip to content

Instantly share code, notes, and snippets.

@gioragutt
Created November 17, 2024 17:52
Show Gist options
  • Save gioragutt/eba799fc7a91a81dc8b13312a77e39c2 to your computer and use it in GitHub Desktop.
Save gioragutt/eba799fc7a91a81dc8b13312a77e39c2 to your computer and use it in GitHub Desktop.
scroller with padding on both sides
@mixin _scrollerThumb($size, $color) {
&::-webkit-scrollbar-thumb {
border: ($size / 3) var(--border-style) transparent;
border-radius: var(--border-radius-small);
background-color: $color;
background-clip: content-box;
-webkit-background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-clip: border-box;
-webkit-background-clip: border-box;
}
}
@mixin scroller($width: 4px, $color: var(--color-gainsboro)) {
&::-webkit-scrollbar {
width: $width * 1.5;
}
@include _scrollerThumb($width, $color);
}
@mixin scrollerHorizontal($height: 4px, $color: var(--color-gainsboro)) {
&::-webkit-scrollbar {
height: $height;
width: 0;
}
@include _scrollerThumb($height, $color);
}
@import './scroller.scss';
.my-stuff {
@include scroller($color: var(--icon-color));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment