csit.infra.dash/app/pal/static/sass/bootstrap/mixins/_forms.scss

   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
   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} {
   9       @content;
  10     }
  11   } @else {
  12     #{if(&, "&", "")}.is-#{$state} {
  13       @content;
  14     }
  15   }
  16 }
  17
  18 @mixin form-validation-state(
  19   $state,
  20   $color,
  21   $icon,
  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)
  25 ) {
  26   .#{$state}-feedback {
  27     display: none;
  28     width: 100%;
  29     margin-top: $form-feedback-margin-top;
  30     @include font-size($form-feedback-font-size);
  31     font-style: $form-feedback-font-style;
  32     color: $color;
  33   }
  34
  35   .#{$state}-tooltip {
  36     position: absolute;
  37     top: 100%;
  38     z-index: 5;
  39     display: none;
  40     max-width: 100%; // Contain to parent when possible
  41     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
  42     margin-top: .1rem;
  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);
  48   }
  49
  50   @include form-validation-state-selector($state) {
  51     ~ .#{$state}-feedback,
  52     ~ .#{$state}-tooltip {
  53       display: block;
  54     }
  55   }
  56
  57   .form-control {
  58     @include form-validation-state-selector($state) {
  59       border-color: $color;
  60
  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;
  67       }
  68
  69       &:focus {
  70         border-color: $color;
  71         box-shadow: $focus-box-shadow;
  72       }
  73     }
  74   }
  75
  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;
  82       }
  83     }
  84   }
  85
  86   .form-select {
  87     @include form-validation-state-selector($state) {
  88       border-color: $color;
  89
  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;
  97         }
  98       }
  99
 100       &:focus {
 101         border-color: $color;
 102         box-shadow: $focus-box-shadow;
 103       }
 104     }
 105   }
 106
 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);
 111       }
 112     }
 113   }
 114
 115   .form-check-input {
 116     @include form-validation-state-selector($state) {
 117       border-color: $color;
 118
 119       &:checked {
 120         background-color: $color;
 121       }
 122
 123       &:focus {
 124         box-shadow: $focus-box-shadow;
 125       }
 126
 127       ~ .form-check-label {
 128         color: $color;
 129       }
 130     }
 131   }
 132   .form-check-inline .form-check-input {
 133     ~ .#{$state}-feedback {
 134       margin-left: .5em;
 135     }
 136   }
 137
 138   .input-group {
 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" {
 144           z-index: 3;
 145         } @else if $state == "invalid" {
 146           z-index: 4;
 147         }
 148       }
 149     }
 150   }
 151 }
 152 // scss-docs-end form-validation-mixins