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     // See https://github.com/twbs/bootstrap/pull/31557
  69     // Align tooltip to form elements
  70     .form-row > .col > &,
  71     .form-row > [class*="col-"] > & {
  72       left: $form-grid-gutter-width / 2;
  73     }
  74   }
  75
  76   @include form-validation-state-selector($state) {
  77     ~ .#{$state}-feedback,
  78     ~ .#{$state}-tooltip {
  79       display: block;
  80     }
  81   }
  82
  83   .form-control {
  84     @include form-validation-state-selector($state) {
  85       border-color: $color;
  86
  87       @if $enable-validation-icons {
  88         padding-right: $input-height-inner;
  89         background-image: escape-svg($icon);
  90         background-repeat: no-repeat;
  91         background-position: right $input-height-inner-quarter center;
  92         background-size: $input-height-inner-half $input-height-inner-half;
  93       }
  94
  95       &:focus {
  96         border-color: $color;
  97         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  98       }
  99     }
 100   }
 101
 102   // stylelint-disable-next-line selector-no-qualifying-type
 103   textarea.form-control {
 104     @include form-validation-state-selector($state) {
 105       @if $enable-validation-icons {
 106         padding-right: $input-height-inner;
 107         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
 108       }
 109     }
 110   }
 111
 112   .custom-select {
 113     @include form-validation-state-selector($state) {
 114       border-color: $color;
 115
 116       @if $enable-validation-icons {
 117         padding-right: $custom-select-feedback-icon-padding-right;
 118         background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
 119       }
 120
 121       &:focus {
 122         border-color: $color;
 123         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 124       }
 125     }
 126   }
 127
 128   .form-check-input {
 129     @include form-validation-state-selector($state) {
 130       ~ .form-check-label {
 131         color: $color;
 132       }
 133
 134       ~ .#{$state}-feedback,
 135       ~ .#{$state}-tooltip {
 136         display: block;
 137       }
 138     }
 139   }
 140
 141   .custom-control-input {
 142     @include form-validation-state-selector($state) {
 143       ~ .custom-control-label {
 144         color: $color;
 145
 146         &::before {
 147           border-color: $color;
 148         }
 149       }
 150
 151       &:checked {
 152         ~ .custom-control-label::before {
 153           border-color: lighten($color, 10%);
 154           @include gradient-bg(lighten($color, 10%));
 155         }
 156       }
 157
 158       &:focus {
 159         ~ .custom-control-label::before {
 160           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 161         }
 162
 163         &:not(:checked) ~ .custom-control-label::before {
 164           border-color: $color;
 165         }
 166       }
 167     }
 168   }
 169
 170   // custom file
 171   .custom-file-input {
 172     @include form-validation-state-selector($state) {
 173       ~ .custom-file-label {
 174         border-color: $color;
 175       }
 176
 177       &:focus {
 178         ~ .custom-file-label {
 179           border-color: $color;
 180           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 181         }
 182       }
 183     }
 184   }
 185 }