Styling

The appearance of the component can be customized with CSS custom properties. These only work with the WebComponent version of the component, but each of them has a regular CSS equivalent, which can be used to style the Vanilla, jQuery and Mixin variant of the component.

--hy-drawer-width

Specifies the width of the drawer.

Default
300px
CSS equivalent
.hy-drawer-content { width: $value }

--hy-drawer-slide-width

Specifies the width of the sliding area. Must be less than or equal to the drawer width. By providing a value that is different from with drawer width, you can let the drawer ‘peek’ over the edge.

Default
--hy-drawer-width, 300px
CSS equivalent
.hy-drawer-content.hy-drawer-left { left: -$value } and
.hy-drawer-content.hy-drawer-right { right: -$value }

--hy-drawer-background

The background CSS property of the drawer.

Default
#e8e8e8
CSS equivalent
.hy-drawer-content { background: $value }

--hy-drawer-box-shadow

The box shadow CSS property of the drawer.

Default
0 0 15px rgba(0, 0, 0, 0.25)
CSS equivalent
.hy-drawer-content { box-shadow: $value }

--hy-drawer-scrim-background

The CSS background property of the scrim (the overlay behind the drawer).

Default
rgba(0, 0, 0, 0.5)
CSS equivalent
.hy-drawer-scrim { background: $value }

--hy-drawer-z-index

The Z index of the drawer.

Default
30
CSS equivalent
.hy-drawer-content { z-index: $value }

--hy-drawer-scrim-z-index

The Z index of the scrim. Must be lower than --hy-drawer-z-index.

Default
20
CSS equivalent
.hy-drawer-scrim { z-index: $value }

© 2018 Florian Klampfer

Powered by Hydejack v7.5.1