diff --git a/scss/_forms.scss b/scss/_forms.scss index 8063da7a9485aebeb7317d8139e2b9fa2aeb2cd5..7b750f030b72c406732b48f81cd109fdc0f05012 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -138,7 +138,7 @@ select.form-control { margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-line-height; border: solid transparent; - border-width: 1px 0; + border-width: $input-btn-border-width 0; &.form-control-sm, &.form-control-lg { @@ -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, @@ -365,6 +360,8 @@ select.form-control-lg { } .form-check-input { position: relative; + margin-top: 0; + margin-right: $form-check-input-margin-x; margin-left: 0; } @@ -378,7 +375,7 @@ select.form-control-lg { .custom-control-indicator { position: static; display: inline-block; - margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate. + margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate. vertical-align: text-bottom; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 0bf1604bda46f1e06d22741e5932e2e4ccd4d305..8248204631b14e718f9e61099d7ec0109fec118e 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;