</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>
@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 {
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);
+}
/**