+++ /dev/null
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `$input-focus-border-color` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-@mixin form-control-focus() {
- &:focus {
- color: $input-focus-color;
- background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
- } @else {
- box-shadow: $input-focus-box-shadow;
- }
- }
-}
-
-
-@mixin form-validation-state($state, $color) {
- .#{$state}-feedback {
- display: none;
- width: 100%;
- margin-top: $form-feedback-margin-top;
- font-size: $form-feedback-font-size;
- color: $color;
- }
-
- .#{$state}-tooltip {
- position: absolute;
- top: 100%;
- z-index: 5;
- display: none;
- max-width: 100%; // Contain to parent when possible
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
- margin-top: .1rem;
- font-size: $form-feedback-tooltip-font-size;
- line-height: $form-feedback-tooltip-line-height;
- color: color-yiq($color);
- background-color: rgba($color, $form-feedback-tooltip-opacity);
- @include border-radius($form-feedback-tooltip-border-radius);
- }
-
- .form-control {
- .was-validated &:#{$state},
- &.is-#{$state} {
- border-color: $color;
-
- @if $enable-validation-icons {
- padding-right: $input-height-inner;
- background-repeat: no-repeat;
- background-position: center right calc(#{$input-height-inner} / 4);
- background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
-
- @if $state == "valid" {
- background-image: $form-feedback-icon-valid;
- } @else {
- background-image: $form-feedback-icon-invalid;
- }
- }
-
- &:focus {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
- }
- }
-
- // stylelint-disable-next-line selector-no-qualifying-type
- textarea.form-control {
- .was-validated &:#{$state},
- &.is-#{$state} {
- @if $enable-validation-icons {
- padding-right: $input-height-inner;
- background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
- }
- }
- }
-
- .custom-select {
- .was-validated &:#{$state},
- &.is-#{$state} {
- border-color: $color;
-
- @if $enable-validation-icons {
- $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
- padding-right: $custom-select-feedback-icon-padding-right;
- background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
- }
-
- &:focus {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
- }
- }
-
-
- .form-control-file {
- .was-validated &:#{$state},
- &.is-#{$state} {
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
- }
- }
-
- .form-check-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
- ~ .form-check-label {
- color: $color;
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
- }
- }
-
- .custom-control-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
- ~ .custom-control-label {
- color: $color;
-
- &::before {
- border-color: $color;
- }
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
-
- &:checked {
- ~ .custom-control-label::before {
- border-color: lighten($color, 10%);
- @include gradient-bg(lighten($color, 10%));
- }
- }
-
- &:focus {
- ~ .custom-control-label::before {
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
- }
-
- &:not(:checked) ~ .custom-control-label::before {
- border-color: $color;
- }
- }
- }
- }
-
- // custom file
- .custom-file-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
- ~ .custom-file-label {
- border-color: $color;
- }
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
-
- &:focus {
- ~ .custom-file-label {
- border-color: $color;
- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
- }
- }
- }
- }
-}