Admin Style Guide
A Slide-out panel, similar to a modal window, breaks apart and simplifies a complex subtask that is included within a primary task.
Layout and behavior: When a panel spawns, it slides from right to left atop and almost completely over the parent page. A narrow gutter of space remains at left, showing the left navigation and a small sliver of the parent page.
Standard layout within the edges of a browser screen
(Panel position in relation to browser edge)
Spacing: Slide-out content is contained in a 12-column page grid, with additional 15px padding on the left edge. The gutter spacing at left is fluid, based on browser width.
(Nested page-grid with additional padding)
Nested Slide-outs: For multiple panels displayed, additional gutter space is used at left to show a small sliver of a Slide-out below another Slide-out.