UNPKG

@vcl/vcl

Version:

The whole VCL in one package

52 lines (32 loc) • 1.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# [VCL](https://vcl.github.io/vcl/) drawer Sliding drawer. ## Features Sliding drawer and main panel. In closed state, only the main area is visible. Visibility of the drawer is controlled via modifiers. The margin of the content must be set programmatically according to the width of the drawer. The slide in/ out of the drawer is animated. ## Usage In this example, the drawer panel is open via the `drawer-open` modifier and the inline style `margin-left: 256px;` on the `drawer-content`. [wide example](/demo/example-side.html) This rule makes the main panel appear below the drawer panel. This is intended for narrow viewports. [side example](/demo/example-over.html) In this example, the drawer is closed and only the main panel is visible. [closed example](/demo/example-closed.html) The drawer panel can also be laid out to the right of the main panel using the `drawer-right` modifier. ## Classes - `drawer-container` - `drawer` - `drawer-content` - `drawer-backdrop` ## Modifiers - `drawer-open`: To open the panel. - `drawer-backdrop-visible`: Must be toggled for backdrop animation - `drawer-right`: Drawer is rendered on the right side - `drawer-animations`: Enables drawer animations ## Variables - `$drawer-color` - `$drawer-bg-color` - `$drawer-content-bg-color`