From: Mark Otto <markdotto@gmail.com>
Date: Wed, 14 Jun 2017 03:15:42 +0000 (-0700)
Subject: Merge branch 'v4-dev' into form-tweaks
X-Git-Tag: v4.0.0-beta~147^2~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=21b874d19dfee091ee64dd4db934850516d2d7b0;p=thirdparty%2Fbootstrap.git

Merge branch 'v4-dev' into form-tweaks
---

21b874d19dfee091ee64dd4db934850516d2d7b0
diff --cc scss/_variables.scss
index e0111d0c93,d26e3de12a..5bd938c6b0
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@@ -404,23 -407,16 +407,23 @@@ $input-border-radius:            $borde
  $input-border-radius-lg:         $border-radius-lg !default;
  $input-border-radius-sm:         $border-radius-sm !default;
  
- $input-bg-focus:                 $input-bg !default;
- $input-border-color-focus:       lighten($brand-primary, 25%) !default;
- $input-box-shadow-focus:         $input-box-shadow, $btn-focus-box-shadow !default;
- $input-color-focus:              $input-color !default;
+ $input-focus-bg:                 $input-bg !default;
+ $input-focus-border-color:       lighten($brand-primary, 25%) !default;
 -$input-focus-box-shadow:         $input-box-shadow, rgba($input-focus-border-color, .6) !default;
++$input-focus-box-shadow:         $input-box-shadow, $btn-focus-box-shadow !default;
+ $input-focus-color:              $input-color !default;
  
- $input-color-placeholder:        $gray-light !default;
+ $input-placeholder-color:        $gray-light !default;
  
 -$input-height:                   (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;
 -$input-height-lg:                (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default;
 -$input-height-sm:                (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default;
 +$input-height-border:           $input-btn-border-width * 2 !default;
 +
 +$input-height-inner:            ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
 +$input-height:                  calc(#{$input-height-inner} + #{$input-height-border}) !default;
 +
 +$input-height-inner-sm:         ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
 +$input-height-sm:               calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
 +
 +$input-height-inner-lg:         ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
 +$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
  
  $input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
  
diff --cc scss/mixins/_forms.scss
index 972c9e1045,0b183373eb..4a1e0bc311
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@@ -12,70 -46,10 +12,70 @@@
  // contrast against a dark gray background.
  @mixin form-control-focus() {
    &:focus {
-     color: $input-color-focus;
-     background-color: $input-bg-focus;
-     border-color: $input-border-color-focus;
+     color: $input-focus-color;
+     background-color: $input-focus-bg;
+     border-color: $input-focus-border-color;
      outline: none;
-     @include box-shadow($input-box-shadow-focus);
+     @include box-shadow($input-focus-box-shadow);
    }
  }
 +
 +
 +@mixin form-validation-state($state, $color) {
 +
 +  .form-control,
 +  .custom-select {
 +    .was-validated &:#{$state},
 +    &.is-#{$state} {
 +      border-color: $color;
 +
 +      &:focus {
 +        box-shadow: 0 0 0 .2rem rgba($color,.25);
 +      }
 +
 +      ~ .invalid-feedback,
 +      ~ .invalid-tooltip {
 +        display: block;
 +      }
 +    }
 +  }
 +
 +
 +  // TODO: redo check markup lol crap
 +  .form-check-input {
 +    .was-validated &:#{$state},
 +    &.is-#{$state} {
 +      + .form-check-label {
 +        color: $color;
 +      }
 +    }
 +  }
 +
 +  // custom radios and checks
 +  .custom-control-input {
 +    .was-validated &:#{$state},
 +    &.is-#{$state} {
 +      ~ .custom-control-indicator {
 +        background-color: rgba($color, .25);
 +      }
 +      ~ .custom-control-description {
 +        color: $color;
 +      }
 +    }
 +  }
 +
 +  // custom file
 +  .custom-file-input {
 +    .was-validated &:#{$state},
 +    &.is-#{$state} {
 +      ~ .custom-file-control {
 +        border-color: $color;
 +
 +        &::before { border-color: inherit; }
 +      }
 +      &:focus {
 +        box-shadow: 0 0 0 .2rem rgba($color,.25);
 +      }
 +    }
 +  }
 +}