/mizuxe2017/scss/bootstrap/mixins/_forms.scss

  1// Form control focus state
  2//
  3// Generate a customized focus state and for any input with the specified color,
  4// which defaults to the `$input-focus-border-color` variable.
  5//
  6// We highly encourage you to not customize the default value, but instead use
  7// this to tweak colors on an as-needed basis. This aesthetic change is based on
  8// WebKit's default styles, but applicable to a wider range of browsers. Its
  9// usability and accessibility should be taken into account with any change.
 10//
 11// Example usage: change the default blue border and shadow to white for better
 12// contrast against a dark gray background.
 13@mixin form-control-focus() {
 14  &:focus {
 15    color: $input-focus-color;
 16    background-color: $input-focus-bg;
 17    border-color: $input-focus-border-color;
 18    outline: 0;
 19    // Avoid using mixin so we can pass custom focus shadow properly
 20    @if $enable-shadows {
 21      box-shadow: $input-box-shadow, $input-focus-box-shadow;
 22    } @else {
 23      box-shadow: $input-focus-box-shadow;
 24    }
 25  }
 26}
 27
 28
 29@mixin form-validation-state($state, $color) {
 30  .#{$state}-feedback {
 31    display: none;
 32    width: 100%;
 33    margin-top: $form-feedback-margin-top;
 34    font-size: $form-feedback-font-size;
 35    color: $color;
 36  }
 37
 38  .#{$state}-tooltip {
 39    position: absolute;
 40    top: 100%;
 41    z-index: 5;
 42    display: none;
 43    max-width: 100%; // Contain to parent when possible
 44    padding: .5rem;
 45    margin-top: .1rem;
 46    font-size: .875rem;
 47    line-height: 1;
 48    color: #fff;
 49    background-color: rgba($color, .8);
 50    border-radius: .2rem;
 51  }
 52
 53  .form-control,
 54  .custom-select {
 55    .was-validated &:#{$state},
 56    &.is-#{$state} {
 57      border-color: $color;
 58
 59      &:focus {
 60        border-color: $color;
 61        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 62      }
 63
 64      ~ .#{$state}-feedback,
 65      ~ .#{$state}-tooltip {
 66        display: block;
 67      }
 68    }
 69  }
 70
 71  .form-check-input {
 72    .was-validated &:#{$state},
 73    &.is-#{$state} {
 74      ~ .form-check-label {
 75        color: $color;
 76      }
 77
 78      ~ .#{$state}-feedback,
 79      ~ .#{$state}-tooltip {
 80        display: block;
 81      }
 82    }
 83  }
 84
 85  .custom-control-input {
 86    .was-validated &:#{$state},
 87    &.is-#{$state} {
 88      ~ .custom-control-label {
 89        color: $color;
 90
 91        &::before {
 92          background-color: lighten($color, 25%);
 93        }
 94      }
 95
 96      ~ .#{$state}-feedback,
 97      ~ .#{$state}-tooltip {
 98        display: block;
 99      }
100
101      &:checked {
102        ~ .custom-control-label::before {
103          @include gradient-bg(lighten($color, 10%));
104        }
105      }
106
107      &:focus {
108        ~ .custom-control-label::before {
109          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
110        }
111      }
112    }
113  }
114
115  // custom file
116  .custom-file-input {
117    .was-validated &:#{$state},
118    &.is-#{$state} {
119      ~ .custom-file-label {
120        border-color: $color;
121
122        &::before { border-color: inherit; }
123      }
124
125      ~ .#{$state}-feedback,
126      ~ .#{$state}-tooltip {
127        display: block;
128      }
129
130      &:focus {
131        ~ .custom-file-label {
132          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
133        }
134      }
135    }
136  }
137}