You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

163 lines
4.5 KiB

5 months ago
  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
  3. // scss-docs-start form-validation-mixins
  4. @mixin form-validation-state-selector($state) {
  5. @if ($state == "valid" or $state == "invalid") {
  6. .was-validated #{if(&, "&", "")}:#{$state},
  7. #{if(&, "&", "")}.is-#{$state} {
  8. @content;
  9. }
  10. } @else {
  11. #{if(&, "&", "")}.is-#{$state} {
  12. @content;
  13. }
  14. }
  15. }
  16. @mixin form-validation-state(
  17. $state,
  18. $color,
  19. $icon,
  20. $tooltip-color: color-contrast($color),
  21. $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
  22. $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
  23. $border-color: $color
  24. ) {
  25. .#{$state}-feedback {
  26. display: none;
  27. width: 100%;
  28. margin-top: $form-feedback-margin-top;
  29. @include font-size($form-feedback-font-size);
  30. font-style: $form-feedback-font-style;
  31. color: $color;
  32. }
  33. .#{$state}-tooltip {
  34. position: absolute;
  35. top: 100%;
  36. z-index: 5;
  37. display: none;
  38. max-width: 100%; // Contain to parent when possible
  39. padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
  40. margin-top: .1rem;
  41. @include font-size($form-feedback-tooltip-font-size);
  42. line-height: $form-feedback-tooltip-line-height;
  43. color: $tooltip-color;
  44. background-color: $tooltip-bg-color;
  45. @include border-radius($form-feedback-tooltip-border-radius);
  46. }
  47. @include form-validation-state-selector($state) {
  48. ~ .#{$state}-feedback,
  49. ~ .#{$state}-tooltip {
  50. display: block;
  51. }
  52. }
  53. .form-control {
  54. @include form-validation-state-selector($state) {
  55. border-color: $border-color;
  56. @if $enable-validation-icons {
  57. padding-right: $input-height-inner;
  58. background-image: escape-svg($icon);
  59. background-repeat: no-repeat;
  60. background-position: right $input-height-inner-quarter center;
  61. background-size: $input-height-inner-half $input-height-inner-half;
  62. }
  63. &:focus {
  64. border-color: $border-color;
  65. @if $enable-shadows {
  66. @include box-shadow($input-box-shadow, $focus-box-shadow);
  67. } @else {
  68. // Avoid using mixin so we can pass custom focus shadow properly
  69. box-shadow: $focus-box-shadow;
  70. }
  71. }
  72. }
  73. }
  74. // stylelint-disable-next-line selector-no-qualifying-type
  75. textarea.form-control {
  76. @include form-validation-state-selector($state) {
  77. @if $enable-validation-icons {
  78. padding-right: $input-height-inner;
  79. background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
  80. }
  81. }
  82. }
  83. .form-select {
  84. @include form-validation-state-selector($state) {
  85. border-color: $border-color;
  86. @if $enable-validation-icons {
  87. &:not([multiple]):not([size]),
  88. &:not([multiple])[size="1"] {
  89. --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
  90. padding-right: $form-select-feedback-icon-padding-end;
  91. background-position: $form-select-bg-position, $form-select-feedback-icon-position;
  92. background-size: $form-select-bg-size, $form-select-feedback-icon-size;
  93. }
  94. }
  95. &:focus {
  96. border-color: $border-color;
  97. @if $enable-shadows {
  98. @include box-shadow($form-select-box-shadow, $focus-box-shadow);
  99. } @else {
  100. // Avoid using mixin so we can pass custom focus shadow properly
  101. box-shadow: $focus-box-shadow;
  102. }
  103. }
  104. }
  105. }
  106. .form-control-color {
  107. @include form-validation-state-selector($state) {
  108. @if $enable-validation-icons {
  109. width: add($form-color-width, $input-height-inner);
  110. }
  111. }
  112. }
  113. .form-check-input {
  114. @include form-validation-state-selector($state) {
  115. border-color: $border-color;
  116. &:checked {
  117. background-color: $color;
  118. }
  119. &:focus {
  120. box-shadow: $focus-box-shadow;
  121. }
  122. ~ .form-check-label {
  123. color: $color;
  124. }
  125. }
  126. }
  127. .form-check-inline .form-check-input {
  128. ~ .#{$state}-feedback {
  129. margin-left: .5em;
  130. }
  131. }
  132. .input-group {
  133. > .form-control:not(:focus),
  134. > .form-select:not(:focus),
  135. > .form-floating:not(:focus-within) {
  136. @include form-validation-state-selector($state) {
  137. @if $state == "valid" {
  138. z-index: 3;
  139. } @else if $state == "invalid" {
  140. z-index: 4;
  141. }
  142. }
  143. }
  144. }
  145. }
  146. // scss-docs-end form-validation-mixins