css: tweak dialog box margins.

Tweak margins around dialog boxes to fix some poorly spaced elements, especially around buttons and forms controls.
2020-08-05 12:20:37 -05:00
parent ef9bc37d9e
commit 1a5cda44b9
2 changed files with 25 additions and 5 deletions
--- a/app/javascript/src/styles/common/simple_form.scss
+++ b/app/javascript/src/styles/common/simple_form.scss
@@ -107,10 +107,31 @@ form.one-line-form {
 }

 div.ui-dialog {
-  div.input {
-    input[type="text"] {
-      width: 100%;
-      max-width: 100%;
+  textarea, input[type="text"] {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  form.simple_form {
+    margin-bottom: 0;
+
+    div.input {
+      margin-bottom: 0.5em;
+    }
+
+    div.input.hidden {
+      display: none;
+    }
+  }
+
+  /* the submit and close buttons */
+  .ui-dialog-buttonpane {
+    margin-top: 0;
+    padding: 1em 1em 0 0;
+
+    .ui-button {
+      margin: 0 0.25em;
    }
  }
 }