[design] improve modal body padding

This commit is contained in:
zombieFox 2020-06-14 14:32:53 +01:00
parent f624d988fd
commit 84cdeb9b03
2 changed files with 9 additions and 4 deletions

View File

@ -43,13 +43,16 @@
.modal-body { .modal-body {
border-radius: var(--theme-radius) var(--theme-radius) 0 0; border-radius: var(--theme-radius) var(--theme-radius) 0 0;
padding: 2em;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.modal-body-spacer {
margin: 2em;
}
.modal-heading:focus { .modal-heading:focus {
outline: none; outline: none;
} }

View File

@ -101,6 +101,7 @@ var modal = (function() {
bind.focus.remove(); bind.focus.remove();
}; };
var modalBody = helper.node("div|class:modal-body"); var modalBody = helper.node("div|class:modal-body");
var modalBodySpacer = helper.node("div|class:modal-body-spacer");
var modalControls = helper.node("div|class:modal-controls form-group"); var modalControls = helper.node("div|class:modal-controls form-group");
var actionButton = helper.node("button:" + options.actionText + "|class:button button-line button-block modal-button,tabindex:1"); var actionButton = helper.node("button:" + options.actionText + "|class:button button-line button-block modal-button,tabindex:1");
var cancelButton = helper.node("button:" + options.cancelText + "|class:button button-line button-block modal-button,tabindex:1"); var cancelButton = helper.node("button:" + options.cancelText + "|class:button button-line button-block modal-button,tabindex:1");
@ -118,7 +119,7 @@ var modal = (function() {
value: 1 value: 1
}] }]
}); });
modalBody.appendChild(modalHeading); modalBodySpacer.appendChild(modalHeading);
}; };
if (options.content) { if (options.content) {
if (typeof options.content == "string") { if (typeof options.content == "string") {
@ -128,11 +129,12 @@ var modal = (function() {
text: options.content text: options.content
}); });
container.appendChild(para); container.appendChild(para);
modalBody.appendChild(container); modalBodySpacer.appendChild(container);
} else { } else {
modalBody.appendChild(options.content); modalBodySpacer.appendChild(options.content);
}; };
}; };
modalBody.appendChild(modalBodySpacer);
modalWrapper.appendChild(modalBody); modalWrapper.appendChild(modalBody);
modalWrapper.appendChild(modalControls); modalWrapper.appendChild(modalControls);
modal.appendChild(modalWrapper); modal.appendChild(modalWrapper);