kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.0 KiB
109 lines
3.0 KiB
# Modals
|
|
|
|
## Modals: Standard style
|
|
|
|
```
|
|
<div class="op-modal--modal-container">
|
|
<div class="op-modal--modal-header">
|
|
<h3>Export</h3>
|
|
<a class="op-modal--modal-close-button">
|
|
<i class="icon-close" title="Close popup"></i>
|
|
</a>
|
|
</div>
|
|
<div class="op-modal--modal-body">
|
|
<ul class="export-options">
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-atom icon-big"></i>
|
|
<span class="export-label">ATOM</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-xls icon-big"></i>
|
|
<span class="export-label">XLS</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-export-xls-with-descriptions icon-big"></i>
|
|
<span class="export-label">XLS with description</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-pdf icon-big"></i>
|
|
<span class="export-label">PDF</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-pdf-descr icon-big"></i>
|
|
<span class="export-label">PDF with description</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<i class="icon-export-csv icon-big"></i>
|
|
<span class="export-label">CSV</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
```
|
|
|
|
## Modals: Highlighted and with footer
|
|
|
|
```
|
|
<div class="op-modal--modal-container -highlight">
|
|
<div class="op-modal--modal-header">
|
|
<h2>Welcome to OpenProject</h2>
|
|
<a class="op-modal--modal-close-button" title="Close popup">
|
|
<i class="icon-close"></i>
|
|
</a>
|
|
</div>
|
|
<div class="op-modal--modal-body">
|
|
<b>Please select your language</b>
|
|
<fieldset class="form--fieldset">
|
|
<div class="form--field">
|
|
<label class="form--label" title="Language" for="user_language">Language</label>
|
|
<span class="form--field-container">
|
|
<span class="form--select-container -slim">
|
|
<select class="form--select">
|
|
<option value="de">Deutsch</option>
|
|
<option selected="selected" value="en">English</option>
|
|
<option value="fr">Français</option>
|
|
</select>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="op-modal--modal-footer">
|
|
<button name="button" type="submit" class="button -highlight">Save</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Modals: Danger zone highlighting
|
|
|
|
```
|
|
<div class="op-modal--modal-container -highlight -danger-zone">
|
|
<div class="op-modal--modal-header">
|
|
<h3 class="icon-context icon-warning">Confirm deletion of Work Package</h3>
|
|
<a class="op-modal--modal-close-button" title="Close popup">
|
|
<i class="icon-close"></i>
|
|
</a>
|
|
</div>
|
|
<div class="op-modal--modal-body">
|
|
<p>Are you sure you want to delete the following work package?<p>
|
|
<p> ... </p>
|
|
</div>
|
|
<div class="op-modal--modal-footer">
|
|
<button name="button" type="submit" class="button -danger">Continue</button>
|
|
<button name="button" type="submit" class="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|