1 // This mixin uses an `if()` technique to be compatible with Dart Sass
2 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
4 // scss-docs-start form-validation-mixins
5 @mixin form-validation-state-selector($state) {
6 @if ($state == "valid" or $state == "invalid") {
7 .was-validated #{if(&, "&", "")}:#{$state},
8 #{if(&, "&", "")}.is-#{$state} {
12 #{if(&, "&", "")}.is-#{$state} {
18 @mixin form-validation-state(
22 $tooltip-color: color-contrast($color),
23 $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24 $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
29 margin-top: $form-feedback-margin-top;
30 @include font-size($form-feedback-font-size);
31 font-style: $form-feedback-font-style;
40 max-width: 100%; // Contain to parent when possible
41 padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
43 @include font-size($form-feedback-tooltip-font-size);
44 line-height: $form-feedback-tooltip-line-height;
45 color: $tooltip-color;
46 background-color: $tooltip-bg-color;
47 @include border-radius($form-feedback-tooltip-border-radius);
50 @include form-validation-state-selector($state) {
51 ~ .#{$state}-feedback,
52 ~ .#{$state}-tooltip {
58 @include form-validation-state-selector($state) {
61 @if $enable-validation-icons {
62 padding-right: $input-height-inner;
63 background-image: escape-svg($icon);
64 background-repeat: no-repeat;
65 background-position: right $input-height-inner-quarter center;
66 background-size: $input-height-inner-half $input-height-inner-half;
71 box-shadow: $focus-box-shadow;
76 // stylelint-disable-next-line selector-no-qualifying-type
77 textarea.form-control {
78 @include form-validation-state-selector($state) {
79 @if $enable-validation-icons {
80 padding-right: $input-height-inner;
81 background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
87 @include form-validation-state-selector($state) {
90 @if $enable-validation-icons {
91 &:not([multiple]):not([size]),
92 &:not([multiple])[size="1"] {
93 padding-right: $form-select-feedback-icon-padding-end;
94 background-image: escape-svg($form-select-indicator), escape-svg($icon);
95 background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96 background-size: $form-select-bg-size, $form-select-feedback-icon-size;
101 border-color: $color;
102 box-shadow: $focus-box-shadow;
107 .form-control-color {
108 @include form-validation-state-selector($state) {
109 @if $enable-validation-icons {
110 width: add($form-color-width, $input-height-inner);
116 @include form-validation-state-selector($state) {
117 border-color: $color;
120 background-color: $color;
124 box-shadow: $focus-box-shadow;
127 ~ .form-check-label {
132 .form-check-inline .form-check-input {
133 ~ .#{$state}-feedback {
139 > .form-control:not(:focus),
140 > .form-select:not(:focus),
141 > .form-floating:not(:focus-within) {
142 @include form-validation-state-selector($state) {
143 @if $state == "valid" {
145 } @else if $state == "invalid" {
152 // scss-docs-end form-validation-mixins