codekingpro/portable-devtools

1// Form control focus state2//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 use7// this to tweak colors on an as-needed basis. This aesthetic change is based on8// WebKit's default styles, but applicable to a wider range of browsers. Its9// 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 better12// contrast against a dark gray background.13@mixin form-control-focus($ignore-warning: false) {14  &:focus {15    color: $input-focus-color;16    background-color: $input-focus-bg;17    border-color: $input-focus-border-color;18    outline: 0;19    @if $enable-shadows {20      @include box-shadow($input-box-shadow, $input-focus-box-shadow);21    } @else {22      // Avoid using mixin so we can pass custom focus shadow properly23      box-shadow: $input-focus-box-shadow;24    }25  }26  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);27}28 29// This mixin uses an `if()` technique to be compatible with Dart Sass30// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details31@mixin form-validation-state-selector($state) {32  @if ($state == "valid" or $state == "invalid") {33    .was-validated #{if(&, "&", "")}:#{$state},34    #{if(&, "&", "")}.is-#{$state} {35      @content;36    }37  } @else {38    #{if(&, "&", "")}.is-#{$state} {39      @content;40    }41  }42}43 44@mixin form-validation-state($state, $color, $icon) {45  .#{$state}-feedback {46    display: none;47    width: 100%;48    margin-top: $form-feedback-margin-top;49    @include font-size($form-feedback-font-size);50    color: $color;51  }52 53  .#{$state}-tooltip {54    position: absolute;55    top: 100%;56    left: 0;57    z-index: 5;58    display: none;59    max-width: 100%; // Contain to parent when possible60    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;61    margin-top: .1rem;62    @include font-size($form-feedback-tooltip-font-size);63    line-height: $form-feedback-tooltip-line-height;64    color: color-yiq($color);65    background-color: rgba($color, $form-feedback-tooltip-opacity);66    @include border-radius($form-feedback-tooltip-border-radius);67 68    // See https://github.com/twbs/bootstrap/pull/3155769    // Align tooltip to form elements70    .form-row > .col > &,71    .form-row > [class*="col-"] > & {72      left: $form-grid-gutter-width * .5;73    }74  }75 76  @include form-validation-state-selector($state) {77    ~ .#{$state}-feedback,78    ~ .#{$state}-tooltip {79      display: block;80    }81  }82 83  .form-control {84    @include form-validation-state-selector($state) {85      border-color: $color;86 87      @if $enable-validation-icons {88        padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important89        background-image: escape-svg($icon);90        background-repeat: no-repeat;91        background-position: right $input-height-inner-quarter center;92        background-size: $input-height-inner-half $input-height-inner-half;93      }94 95      &:focus {96        border-color: $color;97        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);98      }99    }100  }101 102  // stylelint-disable-next-line selector-no-qualifying-type103  select.form-control {104    @include form-validation-state-selector($state) {105      @if $enable-validation-icons {106        padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important107        background-position: right $input-padding-x * 2 center;108      }109    }110  }111 112  // stylelint-disable-next-line selector-no-qualifying-type113  textarea.form-control {114    @include form-validation-state-selector($state) {115      @if $enable-validation-icons {116        padding-right: $input-height-inner;117        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;118      }119    }120  }121 122  .custom-select {123    @include form-validation-state-selector($state) {124      border-color: $color;125 126      @if $enable-validation-icons {127        padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important128        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;129      }130 131      &:focus {132        border-color: $color;133        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);134      }135    }136  }137 138  .form-check-input {139    @include form-validation-state-selector($state) {140      ~ .form-check-label {141        color: $color;142      }143 144      ~ .#{$state}-feedback,145      ~ .#{$state}-tooltip {146        display: block;147      }148    }149  }150 151  .custom-control-input {152    @include form-validation-state-selector($state) {153      ~ .custom-control-label {154        color: $color;155 156        &::before {157          border-color: $color;158        }159      }160 161      &:checked {162        ~ .custom-control-label::before {163          border-color: lighten($color, 10%);164          @include gradient-bg(lighten($color, 10%));165        }166      }167 168      &:focus {169        ~ .custom-control-label::before {170          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);171        }172 173        &:not(:checked) ~ .custom-control-label::before {174          border-color: $color;175        }176      }177    }178  }179 180  // custom file181  .custom-file-input {182    @include form-validation-state-selector($state) {183      ~ .custom-file-label {184        border-color: $color;185      }186 187      &:focus {188        ~ .custom-file-label {189          border-color: $color;190          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);191        }192      }193    }194  }195}196