LP#1775466 Common form CSS
authorBill Erickson <berickxx@gmail.com>
Thu, 12 Jul 2018 21:31:04 +0000 (17:31 -0400)
committerBill Erickson <berickxx@gmail.com>
Wed, 5 Sep 2018 14:05:23 +0000 (10:05 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
Open-ILS/src/eg2/src/styles.css

index 4664ce6..800165e 100644 (file)
@@ -8,7 +8,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <form #fmEditForm="ngForm" role="form" class="form-validated">
+    <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
       <div class="form-group row" *ngFor="let field of fields">
         <div class="col-lg-3 offset-lg-1">
           <label for="rec-{{field.name}}">{{field.label}}</label>
index ade0852..8162775 100644 (file)
@@ -28,9 +28,7 @@ interface CustomFieldContext {
 
 @Component({
   selector: 'eg-fm-record-editor',
-  templateUrl: './fm-editor.component.html',
-  // fix funky checkbox alignment.
-  styles: ['input[type="checkbox"] {margin-left: 0px}']
+  templateUrl: './fm-editor.component.html'
 })
 export class FmRecordEditorComponent
     extends DialogComponent implements OnInit {
index 163871f..b87ad78 100644 (file)
@@ -110,6 +110,38 @@ h5 {font-size: .95rem}
   border-left: 5px solid #FA787E;
 }
 
+/* Typical form CSS.
+ * Brings font size down 5% to squeeze a bit more in.
+ * Bold labels
+ * Fixes some bootstrap margin funkiness with checkboxes for
+ * better vertical alignment.
+ * Optional faint odd or even row striping.
+ */
+.common-form {
+  font-size: 95%;
+}
+.common-form .row {
+  margin: 5px;
+  padding: 3px;
+}
+
+.common-form label {
+  font-weight: bold;
+}
+.common-form input[type="checkbox"] {
+  /* BS adds a negative left margin */
+  margin-left: 0px;
+}
+.common-form.striped-even .row:nth-child(even) {
+  background-color: rgba(0,0,0,.03);
+  border-top: 1px solid rgba(0,0,0,.125);
+  border-bottom: 1px solid rgba(0,0,0,.125);
+}
+.common-form.striped-odd .row:nth-child(odd) {
+  background-color: rgba(0,0,0,.03);
+  border-top: 1px solid rgba(0,0,0,.125);
+  border-bottom: 1px solid rgba(0,0,0,.125);
+}
 
 
 /**