Created
July 26, 2013 13:24
-
-
Save jslegers/6088809 to your computer and use it in GitHub Desktop.
A CodePen by Hugo Giraudel. Sass mixin for scrollbar styling - Because I can't ever remember the right syntax for scrollbars styling in WebKit, here is a little Sass mixin to do it for you.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
/** | |
* Mixin scrollbar | |
*/ | |
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) { | |
::-webkit-scrollbar { | |
width: $size; | |
height: $size; | |
} | |
::-webkit-scrollbar-thumb { | |
background: $primary; | |
} | |
::-webkit-scrollbar-track { | |
background: $secondary; | |
} | |
// For Internet Explorer | |
body { | |
scrollbar-face-color: $primary; | |
scrollbar-track-color: $secondary; | |
} | |
} | |
/** | |
* Call the damn thing | |
*/ | |
@include scrollbar(.5em, tomato); | |
/** | |
* Force scrollbars | |
*/ | |
body { | |
height: 3000px; | |
width: 3000px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment