VCL layer

Show content or dialogs on top of the current view.

Features

Introduces the following concepts:

• Layer cover: the fix positioned background covering the viewport to indicate that the underlying content cannot be interacted with.
• Layer: The fixed positioned container of the layer box, used to lay out the layer box.
• Layer box: The relative positioned container holding the actual content of the layer.

By default the layer box is horizontally and vertically centered.

The layer box has a reasonable max width; it extends to covers the whole viewport if its width is smaller than --sm-viewport.

Usage

Usually a layer is opened in context of the current view to show additional information or allow for additional interactions.

A simple layer with a panel as its content.

basic example

Classes

• vclLayerCover
• vclLayer
• vclLayerBox

Modifiers

• vclTransparent: Makes the layer's background transparent.
• vclLayerFill: Makes the layer cover the whole viewport.
• vclLayerStickToBottom: Makes the layer stick to the bottom.
• vclLayerGutterPadding: Add a padding of half the gutter width.

Variables

• --layer-color
• --layer-bg-color
• --layer-cover-bg-color
• --layer-border-color
• --layer-header-bg-color
• --layer-footer-bg-color

Demo

example.html on GH-pages.