From dc0995ac969c53b576382d8386ad448514369ecb Mon Sep 17 00:00:00 2001 From: Ahmad Bawaneh Date: Mon, 7 Jan 2019 00:21:28 +0200 Subject: [PATCH] modals and message dialogs https://github.com/DominoKit/domino-ui/issues/161 --- .../domino/ui/dialogs/MessageDialog.java | 10 +- .../ui/dialogs/MessageDialogStyles.java | 7 + .../dominokit/domino/ui/modals/BaseModal.java | 28 +- .../domino/ui/modals/IsModalDialog.java | 25 +- .../domino/ui/modals/ModalBackDrop.java | 5 +- .../domino/ui/modals/ModalDialog.java | 14 +- .../domino/ui/modals/ModalStyles.java | 19 + .../domino/ui/public/css/dialogs/dialogs.css | 147 +------ .../domino/ui/public/css/domino-ui.css | 1 + .../domino/ui/public/css/modals/modals.css | 386 ++++++++++++++++++ .../dominokit/domino/ui/public/css/style.css | 200 --------- .../plugins/bootstrap/css/bootstrap.css | 9 - 12 files changed, 444 insertions(+), 407 deletions(-) create mode 100644 src/main/java/org/dominokit/domino/ui/dialogs/MessageDialogStyles.java create mode 100644 src/main/java/org/dominokit/domino/ui/modals/ModalStyles.java create mode 100644 src/main/java/org/dominokit/domino/ui/public/css/modals/modals.css diff --git a/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialog.java b/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialog.java index 319d9d74f..1e18ad596 100644 --- a/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialog.java +++ b/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialog.java @@ -53,18 +53,18 @@ public static MessageDialog createMessage(String title, Node content, CloseHandl public static MessageDialog createMessage(Node content, CloseHandler closeHandler) { MessageDialog messageDialog = new MessageDialog(); + messageDialog.style.add(MessageDialogStyles.MESSAGE_DIALOG); messageDialog.setSize(ModalSize.ALERT); - messageDialog.modal.getModalContent().style().setTextAlign("center"); - messageDialog.modal.getModalFooter().style().setTextAlign("center"); messageDialog.modal.getModalHeader() .insertBefore(messageDialog.iconContainer, messageDialog.modal.getModalHeader().firstChild()); messageDialog.hideHeader(); messageDialog.setAutoClose(true); messageDialog.onClose(closeHandler::onClose); messageDialog.appendChild(content); - okButton = Button.create("OK").linkify(); - okButton.asElement().style.setProperty("min-width", "120px"); + okButton = Button.create("OK") + .styler(style -> style.add(MessageDialogStyles.DIALOG_BUTTON)) + .linkify(); messageDialog.appendFooterChild(okButton); okButton.getClickableElement().addEventListener(EventType.click.getName(), evt -> messageDialog.close()); @@ -141,7 +141,7 @@ public MessageDialog warning() { private static DominoElement createMessageIcon(HTMLElement element) { return DominoElement.of(element) - .styler(style -> style.add("message-icon")); + .styler(style -> style.add(MessageDialogStyles.MESSAGE_ICON)); } private void initIcon() { diff --git a/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialogStyles.java b/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialogStyles.java new file mode 100644 index 000000000..895aba134 --- /dev/null +++ b/src/main/java/org/dominokit/domino/ui/dialogs/MessageDialogStyles.java @@ -0,0 +1,7 @@ +package org.dominokit.domino.ui.dialogs; + +public class MessageDialogStyles { + public static final String MESSAGE_DIALOG = "message-dialog"; + public static final String DIALOG_BUTTON = "dialog-button"; + public static final String MESSAGE_ICON = "message-icon"; +} diff --git a/src/main/java/org/dominokit/domino/ui/modals/BaseModal.java b/src/main/java/org/dominokit/domino/ui/modals/BaseModal.java index 8c253758f..83b002f99 100644 --- a/src/main/java/org/dominokit/domino/ui/modals/BaseModal.java +++ b/src/main/java/org/dominokit/domino/ui/modals/BaseModal.java @@ -155,16 +155,6 @@ private void handleForwardTab(Event evt) { } } - /** - * @deprecated use {@link #appendChild(Node)} - */ - @Deprecated - @Override - public T appendContent(Node content) { - modal.modalBody.appendChild(content); - return (T) this; - } - @Override public T appendChild(Node content) { modal.modalBody.appendChild(content); @@ -187,16 +177,6 @@ public T appendFooterChild(IsElement content) { return appendFooterChild(content.asElement()); } - /** - * @deprecated use {@link #appendChild(Node)} - */ - @Deprecated - @Override - public T appendFooterContent(Node content) { - modal.modalFooter.appendChild(content); - return (T) this; - } - @Override public T large() { return setSize(ModalSize.LARGE); @@ -257,7 +237,7 @@ public T open() { activeElementBeforeOpen = DominoDom.document.activeElement; addBackdrop(); - style().add("in"); + style().add(ModalStyles.IN); style().setDisplay("block"); if (nonNull(firstFocusElement)) { firstFocusElement.focus(); @@ -281,7 +261,7 @@ public T open() { public void addBackdrop() { if (opened_dialogs <= 0) { document.body.appendChild(ModalBackDrop.INSTANCE); - DominoElement.of(document.body).style().add("modal-open"); + DominoElement.of(document.body).style().add(ModalStyles.MODAL_OPEN); } else { Z_INDEX = Z_INDEX + 10; ModalBackDrop.INSTANCE.style.setProperty("z-index", Z_INDEX + ""); @@ -292,7 +272,7 @@ public void addBackdrop() { public void removeBackDrop() { if (opened_dialogs <= 0) { ModalBackDrop.INSTANCE.remove(); - DominoElement.of(document.body).style().remove("modal-open"); + DominoElement.of(document.body).style().remove(ModalStyles.MODAL_OPEN); } else { Z_INDEX = Z_INDEX - 10; ModalBackDrop.INSTANCE.style.setProperty("z-index", Z_INDEX + ""); @@ -317,7 +297,7 @@ private void initFocusElements() { public T close() { opened_dialogs = opened_dialogs - 1; - asElement().classList.remove("in"); + asElement().classList.remove(ModalStyles.IN); asElement().style.display = "none"; if (nonNull(activeElementBeforeOpen)) activeElementBeforeOpen.focus(); diff --git a/src/main/java/org/dominokit/domino/ui/modals/IsModalDialog.java b/src/main/java/org/dominokit/domino/ui/modals/IsModalDialog.java index aa206e521..8dba6b5b7 100644 --- a/src/main/java/org/dominokit/domino/ui/modals/IsModalDialog.java +++ b/src/main/java/org/dominokit/domino/ui/modals/IsModalDialog.java @@ -8,22 +8,11 @@ import org.jboss.gwt.elemento.core.IsElement; public interface IsModalDialog { - /** - * @deprecated use {@link #appendChild(Node)} - */ - @Deprecated - T appendContent(Node content); T appendChild(Node content); T appendChild(IsElement content); - /** - * @deprecated use {@link #appendFooterChild(Node)} - */ - @Deprecated - T appendFooterContent(Node content); - T appendFooterChild(Node content); T appendFooterChild(IsElement content); @@ -79,9 +68,9 @@ public interface IsModalDialog { T deCenterVertically(); enum ModalSize { - LARGE("modal-lg"), - ALERT("modal-alert"), - SMALL("modal-sm"); + LARGE(ModalStyles.MODAL_LG), + ALERT(ModalStyles.MODAL_ALERT), + SMALL(ModalStyles.MODAL_SM); String style; @@ -91,10 +80,10 @@ enum ModalSize { } enum ModalType { - BOTTOM_SHEET("bottom-sheet"), - TOP_SHEET("top-sheet"), - LEFT_SHEET("left-sheet"), - RIGHT_SHEET("right-sheet"); + BOTTOM_SHEET(ModalStyles.BOTTOM_SHEET), + TOP_SHEET(ModalStyles.TOP_SHEET), + LEFT_SHEET(ModalStyles.LEFT_SHEET), + RIGHT_SHEET(ModalStyles.RIGHT_SHEET); String style; diff --git a/src/main/java/org/dominokit/domino/ui/modals/ModalBackDrop.java b/src/main/java/org/dominokit/domino/ui/modals/ModalBackDrop.java index 9c3d260e1..9f8d5f57f 100644 --- a/src/main/java/org/dominokit/domino/ui/modals/ModalBackDrop.java +++ b/src/main/java/org/dominokit/domino/ui/modals/ModalBackDrop.java @@ -11,7 +11,10 @@ public class ModalBackDrop { public static Deque openedModals = new LinkedList<>(); - public static final HTMLDivElement INSTANCE = Elements.div().css("modal-backdrop fade in") + public static final HTMLDivElement INSTANCE = Elements.div() + .css(ModalStyles.MODAL_BACKDROP) + .css(ModalStyles.FADE) + .css(ModalStyles.IN) .on(EventType.click, event -> { if (ModalBackDrop.INSTANCE.isEqualNode(Js.uncheckedCast(event.target))) { closeCurrentOpen(); diff --git a/src/main/java/org/dominokit/domino/ui/modals/ModalDialog.java b/src/main/java/org/dominokit/domino/ui/modals/ModalDialog.java index fbbdc407d..56694d63d 100644 --- a/src/main/java/org/dominokit/domino/ui/modals/ModalDialog.java +++ b/src/main/java/org/dominokit/domino/ui/modals/ModalDialog.java @@ -1,7 +1,6 @@ package org.dominokit.domino.ui.modals; import elemental2.dom.Node; -import org.dominokit.domino.ui.style.ColorScheme; public class ModalDialog extends BaseModal { @@ -23,22 +22,13 @@ public static ModalDialog create() { return new ModalDialog(); } - public static ModalDialog createPickerModal(String title, ColorScheme colorScheme, Node content) { + public static ModalDialog createPickerModal(String title, Node content) { ModalDialog modal = ModalDialog.create(title) .styler(style -> style - .add("picker-modal") - .setMinWidth("275px") - .setWidth("275px") - .setMarginLeft("calc(50% - 137.5px)")) + .add(ModalStyles.PICKER_MODAL)) .small() .setAutoClose(true) .appendChild(content); - modal.getHeaderContainerElement().style().setDisplay("none"); - modal.getBodyElement().style().setPadding("0px", true); - modal.getContentElement().style().setWidth("275px"); - modal.getDialogElement().style().setWidth("275px"); - modal.getFooterElement().style().setPadding("0px", true); - return modal; } diff --git a/src/main/java/org/dominokit/domino/ui/modals/ModalStyles.java b/src/main/java/org/dominokit/domino/ui/modals/ModalStyles.java new file mode 100644 index 000000000..59e0c04c0 --- /dev/null +++ b/src/main/java/org/dominokit/domino/ui/modals/ModalStyles.java @@ -0,0 +1,19 @@ +package org.dominokit.domino.ui.modals; + +public class ModalStyles { + public static final String MODAL_OPEN = "modal-open"; + + public static final String MODAL_LG = "modal-lg"; + public static final String MODAL_ALERT = "modal-alert"; + public static final String MODAL_SM = "modal-sm"; + + public static final String BOTTOM_SHEET = "bottom-sheet"; + public static final String TOP_SHEET = "top-sheet"; + public static final String LEFT_SHEET = "left-sheet"; + public static final String RIGHT_SHEET = "right-sheet"; + + public static final String MODAL_BACKDROP = "modal-backdrop"; + public static final String FADE = "fade"; + public static final String IN = "in"; + public static final String PICKER_MODAL = "picker-modal"; +} diff --git a/src/main/java/org/dominokit/domino/ui/public/css/dialogs/dialogs.css b/src/main/java/org/dominokit/domino/ui/public/css/dialogs/dialogs.css index f07f3e43e..d331e6ce2 100644 --- a/src/main/java/org/dominokit/domino/ui/public/css/dialogs/dialogs.css +++ b/src/main/java/org/dominokit/domino/ui/public/css/dialogs/dialogs.css @@ -1,145 +1,16 @@ +.message-dialog .modal-content, +.message-dialog .modal-footer { + text-align: center; +} + +.message-dialog .dialog-button{ + min-width: 120px; +} + .message-icon { margin-bottom: 15px; font-size: 72px; border-radius: 50%; height: 78px; width: 78px; -} - - -.modal-open { - overflow: hidden; -} -.modal { - position: fixed; - /*top: 0;*/ - /*right: 0;*/ - /*bottom: 0;*/ - /*left: 0;*/ - z-index: 1050; - display: none; - overflow: hidden; - -webkit-overflow-scrolling: touch; - outline: 0; -} -.modal.fade .modal-dialog { - -webkit-transition: -webkit-transform .3s ease-out; - -o-transition: -o-transform .3s ease-out; - transition: transform .3s ease-out; - -webkit-transform: translate(0, -25%); - -ms-transform: translate(0, -25%); - -o-transform: translate(0, -25%); - transform: translate(0, -25%); -} -.modal.in .modal-dialog { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - -o-transform: translate(0, 0); - transform: translate(0, 0); -} -.modal-open .modal { - overflow-x: hidden; - overflow-y: auto; -} -.modal-dialog { - position: relative; - width: auto; -} -.modal-content { - position: relative; - background-color: #fff; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, .2); - border-radius: 6px; - outline: 0; - -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); - box-shadow: 0 3px 9px rgba(0, 0, 0, .5); -} -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1040; - background-color: #000; -} -.modal-backdrop.fade { - filter: alpha(opacity=0); - opacity: 0; -} -.modal-backdrop.in { - filter: alpha(opacity=50); - opacity: .5; -} -.modal-header { - padding: 15px; - border-bottom: 1px solid #e5e5e5; -} -.modal-header .close { - margin-top: -2px; -} -.modal-title { - margin: 0; - line-height: 1.42857143; -} -.modal-body { - position: relative; - padding: 15px; -} -.modal-footer { - padding: 15px; - text-align: right; - border-top: 1px solid #e5e5e5; -} -.modal-footer .btn + .btn { - margin-bottom: 0; - margin-left: 5px; -} -.modal-footer .btn-group .btn + .btn { - margin-left: -1px; -} -.modal-footer .btn-block + .btn-block { - margin-left: 0; -} -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; -} -@media (min-width: 768px) { - .modal-dialog { - margin: 0px auto; - } - .modal-content { - -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); - box-shadow: 0 5px 15px rgba(0, 0, 0, .5); - } - .modal-sm { - } - - .modal-alert{ - width: 500px; - } -} -@media (min-width: 992px) { - .modal-lg { - } -} - -.modal-header:before, -.modal-header:after, -.modal-footer:before, -.modal-footer:after { - display: table; - content: " "; -} - -.modal-header:after, -.modal-footer:after { - clear: both; } \ No newline at end of file diff --git a/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css b/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css index f850af1d1..91580eaac 100644 --- a/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css +++ b/src/main/java/org/dominokit/domino/ui/public/css/domino-ui.css @@ -18,5 +18,6 @@ @import url(collapsible/collapsible.css); @import url(datatable/datatable.css); @import url(dialogs/dialogs.css); +@import url(modals/modals.css); @import url(style.css); @import url(colors.css); \ No newline at end of file diff --git a/src/main/java/org/dominokit/domino/ui/public/css/modals/modals.css b/src/main/java/org/dominokit/domino/ui/public/css/modals/modals.css new file mode 100644 index 000000000..fc66751d5 --- /dev/null +++ b/src/main/java/org/dominokit/domino/ui/public/css/modals/modals.css @@ -0,0 +1,386 @@ +/* Modals ====================================== */ +.fade { + opacity: 0; + -webkit-transition: opacity .15s linear; + -o-transition: opacity .15s linear; + transition: opacity .15s linear; +} + +.fade.in { + opacity: 1; +} + +body.modal-open { + overflow: hidden; +} + +.modal-open { + overflow: hidden; +} + +.modal { + position: fixed; + z-index: 1050; + display: none; + overflow: hidden; + -webkit-overflow-scrolling: touch; + outline: 0; +} + +.modal.fade .modal-dialog { + -webkit-transition: -webkit-transform .3s ease-out; + -o-transition: -o-transform .3s ease-out; + transition: transform .3s ease-out; + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); + transform: translate(0, -25%); +} + +.modal.in .modal-dialog { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal-dialog { + position: relative; + width: auto; +} + +.modal-content { + position: relative; + background-color: #fff; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 6px; + outline: 0; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); + box-shadow: 0 3px 9px rgba(0, 0, 0, .5); +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000; +} + +.modal-backdrop.fade { + filter: alpha(opacity=0); + opacity: 0; +} + +.modal-backdrop.in { + filter: alpha(opacity=50); + opacity: .5; +} + +.modal-header { + padding: 15px; + border-bottom: 1px solid #e5e5e5; +} + +.modal-header .close { + margin-top: -2px; +} + +.modal-title { + margin: 0; + line-height: 1.42857143; +} + +.modal-body { + position: relative; + padding: 15px; +} + +.modal-footer { + padding: 15px; + text-align: right; + border-top: 1px solid #e5e5e5; +} + +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} + +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} + +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 768px) { + .modal-dialog { + margin: 0px auto; + } + + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + } + + .modal-sm { + } + + .modal-alert { + width: 500px; + } +} + +@media (min-width: 992px) { + .modal-lg { + } +} + +@media only screen and (min-width: 992px) { + .modal { + margin-left: 30%; + margin-right: 30%; + margin-top: 30px; + width: 40%; + } + + .modal:not([class*="-sheet"]) { + top: 30px; + } + + .modal.modal-lg { + margin-left: 20%; + margin-right: 20%; + margin-top: 30px; + width: 60%; + } + + .modal.modal-sm { + margin-left: 40%; + margin-right: 40%; + margin-top: 30px; + width: 20%; + } + + .modal.bottom-sheet { + margin: 0px; + bottom: 0; + width: 100%; + } + + .modal.top-sheet { + margin: 0px; + top: 0; + width: 100%; + } + + .modal.left-sheet { + margin: 0px; + left: 0; + width: 30%; + } + + .modal.modal-lg.left-sheet { + width: 50%; + } + + .modal.modal-sm.left-sheet { + width: 20%; + } + + .modal.left-sheet .modal-content { + height: calc(100vh); + } + + .modal.right-sheet { + margin: 0px; + right: 0; + width: 30%; + } + + .modal.modal-lg.right-sheet { + width: 50%; + } + + .modal.modal-sm.right-sheet { + width: 20%; + } + + .modal.right-sheet .modal-content { + height: calc(100vh); + } +} + +@media only screen and (max-width: 992px) { + + .modal { + margin-left: 5%; + margin-right: 5%; + margin-top: 30px; + width: 90%; + } + + .modal:not([class*="-sheet"]) { + top: 30px; + } + + .modal.modal-lg { + margin-left: 5%; + margin-right: 5%; + margin-top: 30px; + width: 90%; + } + + .modal.modal-sm { + margin-left: 5%; + margin-right: 5%; + margin-top: 30px; + width: 90%; + } + + .modal.bottom-sheet { + margin: 0px; + bottom: 0; + } + + .modal.top-sheet { + margin: 0px; + top: 0; + width: 100%; + } + + .modal.left-sheet { + margin: 0px; + left: 0; + width: 90%; + } + + .modal.modal-lg.left-sheet { + width: 90%; + } + + .modal.modal-sm.left-sheet { + width: 90%; + } + + .modal.left-sheet .modal-content { + height: calc(100vh); + } + + .modal.right-sheet { + margin: 0px; + right: 0; + width: 90%; + } + + .modal.modal-lg.right-sheet { + width: 90%; + } + + .modal.modal-sm.right-sheet { + width: 90%; + } + + .modal.right-sheet .modal-content { + height: calc(100vh); + } + + .modal.picker-modal { + margin-top: 0px; + top: 5px; + } +} + +.modal-header:before, +.modal-header:after, +.modal-footer:before, +.modal-footer:after { + display: table; + content: " "; +} + +.modal-header:after, +.modal-footer:after { + clear: both; +} + + +.modal .modal-header { + border: none; + padding: 25px 25px 25px 25px; +} + +.modal .modal-header .modal-title { + font-weight: bold; + font-size: 16px; +} + +.modal .modal-content { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + border-radius: 0; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31) !important; + border: none; +} + +.modal .modal-content .modal-body { + color: #777; + padding: 15px 25px 15px 25px; +} + +.modal .modal-footer { + border: none; +} + +.modal-content[class*="col-"] .modal-footer, +.modal-content[class*="col-"] .modal-footer .btn-link:hover, +.modal-content[class*="col-"] .modal-footer .btn-link:active, +.modal-content[class*="col-"] .modal-footer .btn-link:focus { + background-color: rgba(0, 0, 0, 0.12); +} + +.modal.picker-modal { + min-width: 275px; + width: 275px; + margin-left: calc(50% - 137.5px); +} + +.modal.picker-modal .modal-content, +.modal.picker-modal .modal-dialog{ + width: 275px; +} + +.modal.picker-modal .modal-header{ + display: none; +} + +.modal.picker-modal .modal-body, +.modal.picker-modal .modal-footer{ + padding: 0px; +} + +.picker-modal-header { + padding: 5px !important; + text-align: center !important; +} diff --git a/src/main/java/org/dominokit/domino/ui/public/css/style.css b/src/main/java/org/dominokit/domino/ui/public/css/style.css index d5a713af9..6607fcddc 100644 --- a/src/main/java/org/dominokit/domino/ui/public/css/style.css +++ b/src/main/java/org/dominokit/domino/ui/public/css/style.css @@ -1,8 +1,4 @@  /* Navbar ====================================== */ -body.modal-open { - overflow: hidden; -} - .navbar { font-family: "Roboto", sans-serif; -webkit-border-radius: 0; @@ -3592,189 +3588,7 @@ fieldset[disabled] .form-control { font-size: 17px; } -/* Modals ====================================== */ -@media only screen and (min-width: 992px) { - .modal { - margin-left: 30%; - margin-right: 30%; - margin-top: 30px; - width: 40%; - } - - .modal:not([class*="-sheet"]) { - top: 30px; - } - - .modal.modal-lg { - margin-left: 20%; - margin-right: 20%; - margin-top: 30px; - width: 60%; - } - - .modal.modal-sm { - margin-left: 40%; - margin-right: 40%; - margin-top: 30px; - width: 20%; - } - - .modal.bottom-sheet { - margin: 0px; - bottom: 0; - width: 100%; - } - - .modal.top-sheet { - margin: 0px; - top: 0; - width: 100%; - } - - .modal.left-sheet { - margin: 0px; - left: 0; - width: 30%; - } - - .modal.modal-lg.left-sheet { - width: 50%; - } - - .modal.modal-sm.left-sheet { - width: 20%; - } - - .modal.left-sheet .modal-content { - height: calc(100vh); - } - .modal.right-sheet { - margin: 0px; - right: 0; - width: 30%; - } - - .modal.modal-lg.right-sheet { - width: 50%; - } - - .modal.modal-sm.right-sheet { - width: 20%; - } - - .modal.right-sheet .modal-content { - height: calc(100vh); - } -} - -@media only screen and (max-width: 992px) { - - .modal { - margin-left: 5%; - margin-right: 5%; - margin-top: 30px; - width: 90%; - } - - .modal:not([class*="-sheet"]) { - top: 30px; - } - - .modal.modal-lg { - margin-left: 5%; - margin-right: 5%; - margin-top: 30px; - width: 90%; - } - - .modal.modal-sm { - margin-left: 5%; - margin-right: 5%; - margin-top: 30px; - width: 90%; - } - - .modal.bottom-sheet { - margin: 0px; - bottom: 0; - } - - .modal.top-sheet { - margin: 0px; - top: 0; - width: 100%; - } - - .modal.left-sheet { - margin: 0px; - left: 0; - width: 90%; - } - - .modal.modal-lg.left-sheet { - width: 90%; - } - - .modal.modal-sm.left-sheet { - width: 90%; - } - - .modal.left-sheet .modal-content { - height: calc(100vh); - } - - .modal.right-sheet { - margin: 0px; - right: 0; - width: 90%; - } - - .modal.modal-lg.right-sheet { - width: 90%; - } - - .modal.modal-sm.right-sheet { - width: 90%; - } - - .modal.right-sheet .modal-content { - height: calc(100vh); - } - - .modal.picker-modal { - margin-top: 0px; - top: 5px; - } -} - -.modal .modal-header { - border: none; - padding: 25px 25px 25px 25px; -} - -.modal .modal-header .modal-title { - font-weight: bold; - font-size: 16px; -} - -.modal .modal-content { - -webkit-border-radius: 0; - -moz-border-radius: 0; - -ms-border-radius: 0; - border-radius: 0; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31) !important; - border: none; -} - -.modal .modal-content .modal-body { - color: #777; - padding: 15px 25px 15px 25px; -} - -.modal .modal-footer { - border: none; -} /* Labels ====================================== */ .label { @@ -6272,11 +6086,6 @@ a.disabled { padding-right: 5px !important; } -.picker-modal-header { - padding: 5px !important; - text-align: center !important; -} - .calendar .navigate { border-radius: 50%; transform: scale(0.9); @@ -6706,15 +6515,6 @@ a.disabled { padding-right: 25px; } -.modal-content[class*="col-"] .modal-footer { - background-color: rgba(0, 0, 0, 0.12); -} - -.modal-content[class*="col-"] .modal-footer .btn-link:hover, -.modal-content[class*="col-"] .modal-footer .btn-link:active, -.modal-content[class*="col-"] .modal-footer .btn-link:focus { - background-color: rgba(0, 0, 0, 0.12); -} .panel-group .full-body .panel[class*="col-"] .panel-body { border-top-color: #fff; diff --git a/src/main/java/org/dominokit/domino/ui/public/plugins/bootstrap/css/bootstrap.css b/src/main/java/org/dominokit/domino/ui/public/plugins/bootstrap/css/bootstrap.css index 68ab7b464..f3acccce9 100644 --- a/src/main/java/org/dominokit/domino/ui/public/plugins/bootstrap/css/bootstrap.css +++ b/src/main/java/org/dominokit/domino/ui/public/plugins/bootstrap/css/bootstrap.css @@ -2889,15 +2889,6 @@ select[multiple].input-lg { } } -.fade { - opacity: 0; - -webkit-transition: opacity .15s linear; - -o-transition: opacity .15s linear; - transition: opacity .15s linear; -} -.fade.in { - opacity: 1; -} .collapse { display: none !important; }