refs #16894

* improves alignment of labels and checkboxes/radio buttons

themes/finc/scss/_customVariables.scss

@@ -83,6 +83,10 @@ $state-danger-bg: $brand-danger !default;
 //// FORM ELEMENTS
 $select-bg-color: $ghost !default;
 
+////// Inputs with labels -- top margin for better alignment
+$inputs-top-margin: .2rem;
+
+
 //// BORDERS
 $border-color: $iron !default;
 ////// Note that the nav-tabs have a different border color, use the following variable in your SCSS to change it

themes/finc/scss/compiled.scss

@@ -295,6 +295,11 @@ legend {
 }
 
 //// input {}
+input[type='radio'],
+input[type='checkbox'] {
+  margin-top: $inputs-top-margin;
+}
+
 input[type='email'] {
   border: $border-default-styles;
   padding: ($grid-gutter-width / 4);
@@ -311,7 +316,6 @@ input[type='text'] {
 }
 
 // red-bordered input field, when empty, requires "form" for specifity, CK
-
 form {
   // create enough space for red border
   input:invalid,
@@ -1318,6 +1322,8 @@ header,
     input {
       margin-left: 0;
       margin-right: .25rem;
+      // make sure, input and label are aligned in acceptable manner between 100% and 200% zoom
+      margin-top: $inputs-top-margin;
     }
   }
 
@@ -2189,7 +2195,8 @@ footer ul {
 
   input[type='checkbox'],
   input[type='checkbox']:focus {
-    margin-top: 2px;
+    // make sure, input and label are aligned in acceptable manner between 100% and 200% zoom
+    margin-top: $inputs-top-margin;
   }
 }