bootstrap/mixins/_forms.scss

0001 // This mixin uses an `if()` technique to be compatible with Dart Sass
0002 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
0003 @mixin form-validation-state-selector($state) {
0004   @if ($state == "valid" or $state == "invalid") {
0005     .was-validated #{if(&, "&", "")}:#{$state},
0006     #{if(&, "&", "")}.is-#{$state} {
0007       @content;
0008     }
0009   } @else {
0010     #{if(&, "&", "")}.is-#{$state} {
0011       @content;
0012     }
0013   }
0014 }
0015
0016 @mixin form-validation-state($state, $color, $icon) {
0017   .#{$state}-feedback {
0018     display: none;
0019     width: 100%;
0020     margin-top: $form-feedback-margin-top;
0021     @include font-size($form-feedback-font-size);
0022     font-style: $form-feedback-font-style;
0023     color: $color;
0024   }
0025
0026   .#{$state}-tooltip {
0027     position: absolute;
0028     top: 100%;
0029     z-index: 5;
0030     display: none;
0031     max-width: 100%; // Contain to parent when possible
0032     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
0033     margin-top: .1rem;
0034     @include font-size($form-feedback-tooltip-font-size);
0035     line-height: $form-feedback-tooltip-line-height;
0036     color: color-contrast($color);
0037     background-color: rgba($color, $form-feedback-tooltip-opacity);
0038     @include border-radius($form-feedback-tooltip-border-radius);
0039   }
0040
0041   @include form-validation-state-selector($state) {
0042     ~ .#{$state}-feedback,
0043     ~ .#{$state}-tooltip {
0044       display: block;
0045     }
0046   }
0047
0048   .form-control {
0049     @include form-validation-state-selector($state) {
0050       border-color: $color;
0051
0052       @if $enable-validation-icons {
0053         padding-right: $input-height-inner;
0054         background-image: escape-svg($icon);
0055         background-repeat: no-repeat;
0056         background-position: right $input-height-inner-quarter center;
0057         background-size: $input-height-inner-half $input-height-inner-half;
0058       }
0059
0060       &:focus {
0061         border-color: $color;
0062         box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
0063       }
0064     }
0065   }
0066
0067   // stylelint-disable-next-line selector-no-qualifying-type
0068   textarea.form-control {
0069     @include form-validation-state-selector($state) {
0070       @if $enable-validation-icons {
0071         padding-right: $input-height-inner;
0072         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
0073       }
0074     }
0075   }
0076
0077   .form-select {
0078     @include form-validation-state-selector($state) {
0079       border-color: $color;
0080
0081       @if $enable-validation-icons {
0082         padding-right: $form-select-feedback-icon-padding-end;
0083         background-image: escape-svg($form-select-indicator), escape-svg($icon);
0084         background-position: $form-select-bg-position, $form-select-feedback-icon-position;
0085         background-size: $form-select-bg-size, $form-select-feedback-icon-size;
0086       }
0087
0088       &:focus {
0089         border-color: $color;
0090         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
0091       }
0092     }
0093   }
0094
0095   .form-check-input {
0096     @include form-validation-state-selector($state) {
0097       border-color: $color;
0098
0099       &:checked {
0100         background-color: $color;
0101       }
0102
0103       &:focus {
0104         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
0105       }
0106
0107       ~ .form-check-label {
0108         color: $color;
0109       }
0110     }
0111   }
0112   .form-check-inline .form-check-input {
0113     ~ .#{$state}-feedback {
0114       margin-left: .5em;
0115     }
0116   }
0117 }