Scrollbar

Scrollbar styles are rewritten in CSS for a better appearance.

Introduction

The scrollbar styles are written in pure CSS in Luda, the customized styles only shows for screens larger than the m width breakpoint.

In the below example, customized scrollbar styles shows on middle size screens and large screens.

$scrollbar-width-breakpoint: m !default

Default start breakpoint to show customized scrollbar styles.

$scrollbar-breakpoint-vertical-width-rem: $spacing-tiny-rem !default

Default vertical scrollbar width for webkit browsers.

$scrollbar-breakpoint-horizontal-height-rem: $scrollbar-breakpoint-vertical-width-rem !default

Default horizontal scrollbar height for webkit browsers.

$scrollbar-thumb-background: rgba(lighten($color-muted, 10%), $opacity-more-muted) !default

Default scrollbar thumb background for webkit browsers.

$scrollbar-thumb-border-radius: $scrollbar-breakpoint-vertical-width-rem !default

Default scrollbar thumb border radius for webkit browsers.

$scrollbar-firefox-width-keyword: thin !default

Default scrollbar with for firefox.

$scrollbar-firefox-color: rgba($color-muted, $opacity-more-muted) transparent !default

Default scrollbar background color for firefox.

$scrollbar-edge-overflow-style: -ms-autohiding-scrollbar !default

Default scrollbar overflow style for Edge browsers.