primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 01:04:04 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #939 from primer/box-overlay-example

Browse Source 
Fix Box--overlay example
This commit is contained in:
Shawn Allen 2019-10-23 09:24:05 -07:00 committed by GitHub
commit 645f63029b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/content/components/box-overlay.md
View File

@ -12,15 +12,15 @@ Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://git
Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
**Note:** `position: fixed` has been disabled in this example
```html live
```erb
<details class="details-reset details-overlay details-overlay-dark">
<summary class="btn" aria-haspopup="dialog">Open dialog</summary>
<details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
<div class="Box-header">
<button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
<%= octicon "x" %>
<!-- <%= octicon "x" %> -->
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
</button>
<h3 class="Box-title">Box title</h3>
</div>
@ -50,6 +50,10 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
</div>
</details-dialog>
</details>
<!-- Temporary overrides (don't use in production) -->
<style> .frame-example { min-height: 500px; } </style>
<link href="https://unpkg.com/@github/details-dialog-element/index.css" rel="stylesheet" />
```
In github.com there is a shared dialog partial. You will only have to pass in the modal content:

2
docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
View File

@ -7,7 +7,7 @@ function LivePreviewWrapper({children}) {
<Frame>
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
<style>{primerStyles}</style>
<div className="p-3">{children}</div>
<div className="frame-example p-3">{children}</div>
</Frame>
)
}