[Summary view] [Print] [Text view]

   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-check-input {
 108      @include form-validation-state-selector($state) {
 109        border-color: $color;
 110  
 111        &:checked {
 112          background-color: $color;
 113        }
 114  
 115        &:focus {
 116          box-shadow: $focus-box-shadow;
 117        }
 118  
 119        ~ .form-check-label {
 120          color: $color;
 121        }
 122      }
 123    }
 124    .form-check-inline .form-check-input {
 125      ~ .#{$state}-feedback {
 126        margin-left: .5em;
 127      }
 128    }
 129  
 130    .input-group .form-control,
 131    .input-group .form-select {
 132      @include form-validation-state-selector($state) {
 133        @if $state == "valid" {
 134          z-index: 1;
 135        } @else if $state == "invalid" {
 136          z-index: 2;
 137        }
 138        &:focus {
 139          z-index: 3;
 140        }
 141      }
 142    }
 143  }
 144  // scss-docs-end form-validation-mixins