git.roojs.org Git - roojs1/blob - scss/bootstrap/mixins/_forms.scss

   1 // Form control focus state
   2 //
   3 // Generate a customized focus state and for any input with the specified color,
   4 // which defaults to the `$input-focus-border-color` variable.
   5 //
   6 // We highly encourage you to not customize the default value, but instead use
   7 // this to tweak colors on an as-needed basis. This aesthetic change is based on
   8 // WebKit's default styles, but applicable to a wider range of browsers. Its
   9 // usability and accessibility should be taken into account with any change.
  10 //
  11 // Example usage: change the default blue border and shadow to white for better
  12 // contrast against a dark gray background.
  13 @mixin form-control-focus($ignore-warning: false) {
  14   &:focus {
  15     color: $input-focus-color;
  16     background-color: $input-focus-bg;
  17     border-color: $input-focus-border-color;
  18     outline: 0;
  19     @if $enable-shadows {
  20       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
  21     } @else {
  22       // Avoid using mixin so we can pass custom focus shadow properly
  23       box-shadow: $input-focus-box-shadow;
  24     }
  25   }
  26   @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
  27 }
  28
  29 // This mixin uses an `if()` technique to be compatible with Dart Sass
  30 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
  31 @mixin form-validation-state-selector($state) {
  32   @if ($state == "valid" or $state == "invalid") {
  33     .was-validated #{if(&, "&", "")}:#{$state},
  34     #{if(&, "&", "")}.is-#{$state} {
  35       @content;
  36     }
  37   } @else {
  38     #{if(&, "&", "")}.is-#{$state} {
  39       @content;
  40     }
  41   }
  42 }
  43
  44 @mixin form-validation-state($state, $color, $icon) {
  45   .#{$state}-feedback {
  46     display: none;
  47     width: 100%;
  48     margin-top: $form-feedback-margin-top;
  49     @include font-size($form-feedback-font-size);
  50     color: $color;
  51   }
  52
  53   .#{$state}-tooltip {
  54     position: absolute;
  55     top: 100%;
  56     left: 0;
  57     z-index: 5;
  58     display: none;
  59     max-width: 100%; // Contain to parent when possible
  60     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
  61     margin-top: .1rem;
  62     @include font-size($form-feedback-tooltip-font-size);
  63     line-height: $form-feedback-tooltip-line-height;
  64     color: color-yiq($color);
  65     background-color: rgba($color, $form-feedback-tooltip-opacity);
  66     @include border-radius($form-feedback-tooltip-border-radius);
  67   }
  68
  69   @include form-validation-state-selector($state) {
  70     ~ .#{$state}-feedback,
  71     ~ .#{$state}-tooltip {
  72       display: block;
  73     }
  74   }
  75
  76   .form-control {
  77     @include form-validation-state-selector($state) {
  78       border-color: $color;
  79
  80       @if $enable-validation-icons {
  81         padding-right: $input-height-inner;
  82         background-image: escape-svg($icon);
  83         background-repeat: no-repeat;
  84         background-position: right $input-height-inner-quarter center;
  85         background-size: $input-height-inner-half $input-height-inner-half;
  86       }
  87
  88       &:focus {
  89         border-color: $color;
  90         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  91       }
  92     }
  93   }
  94
  95   // stylelint-disable-next-line selector-no-qualifying-type
  96   textarea.form-control {
  97     @include form-validation-state-selector($state) {
  98       @if $enable-validation-icons {
  99         padding-right: $input-height-inner;
 100         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
 101       }
 102     }
 103   }
 104
 105   .custom-select {
 106     @include form-validation-state-selector($state) {
 107       border-color: $color;
 108
 109       @if $enable-validation-icons {
 110         padding-right: $custom-select-feedback-icon-padding-right;
 111         background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
 112       }
 113
 114       &:focus {
 115         border-color: $color;
 116         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 117       }
 118     }
 119   }
 120
 121   .form-check-input {
 122     @include form-validation-state-selector($state) {
 123       ~ .form-check-label {
 124         color: $color;
 125       }
 126
 127       ~ .#{$state}-feedback,
 128       ~ .#{$state}-tooltip {
 129         display: block;
 130       }
 131     }
 132   }
 133
 134   .custom-control-input {
 135     @include form-validation-state-selector($state) {
 136       ~ .custom-control-label {
 137         color: $color;
 138
 139         &::before {
 140           border-color: $color;
 141         }
 142       }
 143
 144       &:checked {
 145         ~ .custom-control-label::before {
 146           border-color: lighten($color, 10%);
 147           @include gradient-bg(lighten($color, 10%));
 148         }
 149       }
 150
 151       &:focus {
 152         ~ .custom-control-label::before {
 153           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 154         }
 155
 156         &:not(:checked) ~ .custom-control-label::before {
 157           border-color: $color;
 158         }
 159       }
 160     }
 161   }
 162
 163   // custom file
 164   .custom-file-input {
 165     @include form-validation-state-selector($state) {
 166       ~ .custom-file-label {
 167         border-color: $color;
 168       }
 169
 170       &:focus {
 171         ~ .custom-file-label {
 172           border-color: $color;
 173           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 174         }
 175       }
 176     }
 177   }
 178 }