0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Bug Fix: Action modals now have centered content and correct spacing

This also adds functionality to Modals, so they can have multiple
styles, e.g 'wide' and 'centered'.
This commit is contained in:
Matthew Harrison-Jones 2013-09-06 15:36:16 +01:00
parent 75a58bcd1e
commit 44deb1c0df
5 changed files with 12 additions and 6 deletions

View file

@ -979,6 +979,10 @@ body.blur > *:not(#modal-container) {
.modal-action {
@extend %modal;
.modal-footer {
margin-top: 20px;
}
}
.modal-header {
@ -1024,10 +1028,12 @@ body.blur > *:not(#modal-container) {
}
.modal-style-wide {
@extend %modal;
width: 550px;
}
.modal-style-centered {
text-align: center;
}
/* ==========================================================================
Main Elements
========================================================================== */

View file

@ -1,5 +1,5 @@
<aside class="modal-background"></aside>
<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}modal-style-{{options.style}}{{/if}} {{options.animation}} js-modal">
<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}{{#each options.style}}modal-style-{{this}} {{/each}}{{/if}}{{options.animation}} js-modal">
{{#if content.title}}<header class="modal-header"><h1>{{content.title}}</h1>{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}</header>{{/if}}
<section class="modal-content">
</section>

View file

@ -166,7 +166,7 @@
}
},
type: "action",
style: "wide",
style: ["wide", "centered"],
animation: 'fade'
},
content: {

View file

@ -300,7 +300,7 @@
options: {
close: true,
type: "info",
style: "wide",
style: ["wide"],
animation: 'fade'
},
content: {
@ -374,7 +374,7 @@
options: {
close: true,
type: "info",
style: "wide",
style: ["wide"],
animation: 'fade'
},
content: {

View file

@ -186,7 +186,7 @@
options: {
close: false,
type: "action",
style: "wide",
style: ["wide"],
animation: 'fadeIn',
afterRender: function () {
this.$('.js-drop-zone').upload();