Ghost/core/client/templates/components/gh-modal-dialog.hbs
Paul Adam Davis 4fb3fe62a9 Use CSS animations for modals
No issue

- Changes Modals to use CSS-based animations
- All modals have an animation, so the option is removed from the handlebars helper
- Removes `animation` from the handlebars helper, as all had one anyway
- Removed the `centered` style - All modals should be left-aligned
- Buttons now default to being on the left
- Cleans up some styles (modal body top spacing) which #4632 helped clean up
2014-12-15 18:23:42 +00:00

23 lines
1.2 KiB
Handlebars

<div class="modal-container js-modal-container" {{action "closeModal"}}>
<article {{bind-attr class="klass :js-modal"}}>
<section class="modal-content" {{action bubbles=false preventDefault=false}}>
{{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
{{#if showClose}}<a class="close" href="" title="Close" {{action "closeModal"}}><span class="hidden">Close</span></a>{{/if}}
<section class="modal-body">
{{yield}}
</section>
{{#if confirm}}
<footer class="modal-footer">
<button type="button" {{bind-attr class="rejectButtonClass :js-button-reject"}} {{action "confirm" "reject"}}>
{{confirm.reject.text}}
</button><!--
Required to strip the white-space between buttons
--><button type="button" {{bind-attr class="acceptButtonClass :js-button-accept"}} {{action "confirm" "accept"}}>
{{confirm.accept.text}}
</button>
</footer>
{{/if}}
</section>
</article>
</div>
<div class="modal-background js-modal-background"></div>