diff options
| -rw-r--r-- | scss/_forms.scss | 19 | ||||
| -rw-r--r-- | scss/_variables.scss | 11 |
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; |