‹ Components

7.10

_ui-modals.scss

ui-modals .ui-modal

Modifiers:

  • .narrow – Narrow variation
  • .wide – Wide variation
  • .extrawide – Extra-Wide variation
  • .crucial – Is scrollable, should be used instead of `.app-body`

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' data-dismiss='modal' title='Close'>
<i class='icon-close'></i>

</a>
</div>
<div class='ui-modal-toolbar top'>
ui-toolbar content if any
</div>
<div class='ui-modal-body'>
ui-modal Body
</div>
<div class='ui-modal-toolbar bottom'>
ui-toolbar content if any
</div>
<div class='ui-modal-footer'>
<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>
</div>
</div>
.narrow

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='narrow ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' data-dismiss='modal' title='Close'>
<i class='icon-close'></i>

</a>
</div>
<div class='ui-modal-toolbar top'>
ui-toolbar content if any
</div>
<div class='ui-modal-body'>
ui-modal Body
</div>
<div class='ui-modal-toolbar bottom'>
ui-toolbar content if any
</div>
<div class='ui-modal-footer'>
<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>
</div>
</div>
.wide

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='ui-modal wide'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' data-dismiss='modal' title='Close'>
<i class='icon-close'></i>

</a>
</div>
<div class='ui-modal-toolbar top'>
ui-toolbar content if any
</div>
<div class='ui-modal-body'>
ui-modal Body
</div>
<div class='ui-modal-toolbar bottom'>
ui-toolbar content if any
</div>
<div class='ui-modal-footer'>
<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>
</div>
</div>
.extrawide

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='extrawide ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' data-dismiss='modal' title='Close'>
<i class='icon-close'></i>

</a>
</div>
<div class='ui-modal-toolbar top'>
ui-toolbar content if any
</div>
<div class='ui-modal-body'>
ui-modal Body
</div>
<div class='ui-modal-toolbar bottom'>
ui-toolbar content if any
</div>
<div class='ui-modal-footer'>
<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>
</div>
</div>
.crucial

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='crucial ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' data-dismiss='modal' title='Close'>
<i class='icon-close'></i>

</a>
</div>
<div class='ui-modal-toolbar top'>
ui-toolbar content if any
</div>
<div class='ui-modal-body'>
ui-modal Body
</div>
<div class='ui-modal-toolbar bottom'>
ui-toolbar content if any
</div>
<div class='ui-modal-footer'>
<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>
</div>
</div>