Box overlay

Experimental
View source

Use the Box--overlay with the <details> and <details-dialog>, and add the details-overlay-dark utility if you wish to apply a dark transparent background.

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.

In github.com there is a shared dialog partial. You will only have to pass in the modal content:

<%= render layout: "shared/details_dialog", locals: {
button_text: "Delete account",
title: "Are you sure you want to delete this account?",
button_class: "btn btn-danger"
} do %>
<div class="Box-body overflow-auto">
<p>
This action is irreversible.
</p>
<button type="button" class="btn btn-block btn-danger mt-2" data-close-dialog>
Delete
</button>
</div>
<% end %>
Edit this page on GitHub
2 contributorssimuraicolebemis
Last edited by simurai on October 11, 2019