add some vars

2 files changed, 18 insertions, 12 deletions

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 8063da7a9..dc1c66b9b 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -192,7 +192,7 @@ select.form-control-lg {
 
 .form-text {
   display: block;
-  margin-top: ($spacer * .25);
+  margin-top: $form-text-margin-top;
 }
 
 
@@ -203,12 +203,7 @@ select.form-control-lg {
 .form-check {
   position: relative;
   display: block;
-  margin-bottom: ($spacer * .75);
-
-  // Move up sibling radios or checkboxes for tighter spacing
-  + .form-check {
-    margin-top: -.25rem;
-  }
+  margin-bottom: $form-check-margin-bottom;
 
   &.disabled {
     .form-check-label {
@@ -219,15 +214,15 @@ select.form-control-lg {
 }
 
 .form-check-label {
-  padding-left: 1.25rem;
+  padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
   cursor: pointer;
 }
 
 .form-check-input {
   position: absolute;
-  margin-top: .25rem;
-  margin-left: -1.25rem;
+  margin-top: $form-check-input-margin-y;
+  margin-left: -$form-check-input-gutter;
 
   &:only-child {
     position: static;
@@ -243,7 +238,7 @@ select.form-control-lg {
   }
 
   + .form-check-inline {
-    margin-left: .75rem;
+    margin-left: $form-check-inline-margin-x;
   }
 }
 
@@ -253,7 +248,7 @@ select.form-control-lg {
 // Apply contextual and semantic states to individual form controls.
 
 .form-control-feedback {
-  margin-top: ($spacer * .25);
+  margin-top: $form-feedback-margin-top;
 }
 
 .form-control-success,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0bf1604bd..824820463 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -449,6 +449,16 @@ $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-pa
 
 $input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
 
+$form-text-margin-top:     .25rem !default;
+$form-feedback-margin-top: $form-text-margin-top !default;
+
+$form-check-margin-bottom:  .5rem !default;
+$form-check-input-gutter:   1.25rem !default;
+$form-check-input-margin-y: .25rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+
 $form-group-margin-bottom:       $spacer-y !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
@@ -461,6 +471,7 @@ $custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
 
 $custom-control-indicator-size:       1rem !default;
+$custom-control-indicator-margin-y:   (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
 $custom-control-indicator-bg:         #ddd !default;
 $custom-control-indicator-bg-size:    50% 50% !default;
 $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;