/scss-mixin-object-scroller

:barber: A scss mixin to create your singletone scroller object

Primary LanguageCSS

SCSS Object Scroller

It takes a set of parameters and generates a singletone object class.

The object class terminology comes from cssguidelin.es

Install

  1. npm i -S scss-mixin-object-scroller
  2. Import it into your SCSS code: 
    @import "~scss-mixin-object-scroller";

Usage

Parameters
  • $size: (unit) default: 6px
  • $bg: (color) default: #eee
  • $fg. (color) default: #333
  • $radius. (unit) default: $size
Examples

  • Use it once to generate your singletone scroller object:

    @include scroller();

    It will generate:

    .scroller { overflow: auto; }
.scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.scroller::-webkit-scrollbar-track-piece { background-color: #eee; }
.scroller::-webkit-scrollbar-thumb:horizontal,
.scroller::-webkit-scrollbar-thumb:vertical { border-radius: 6px; background-color: #333; }