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() {
  14   &:focus {
  15     color: $input-focus-color;
  16     background-color: $input-focus-bg;
  17     border-color: $input-focus-border-color;
  18     outline: 0;
  19     // Avoid using mixin so we can pass custom focus shadow properly
  20     @if $enable-shadows {
  21       box-shadow: $input-box-shadow, $input-focus-box-shadow;
  22     } @else {
  23       box-shadow: $input-focus-box-shadow;
  24     }
  25   }
  26 }
  27
  28
  29 @mixin form-validation-state($state, $color) {
  30   .#{$state}-feedback {
  31     display: none;
  32     width: 100%;
  33     margin-top: $form-feedback-margin-top;
  34     font-size: $form-feedback-font-size;
  35     color: $color;
  36   }
  37
  38   .#{$state}-tooltip {
  39     position: absolute;
  40     top: 100%;
  41     z-index: 5;
  42     display: none;
  43     max-width: 100%; // Contain to parent when possible
  44     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
  45     margin-top: .1rem;
  46     font-size: $form-feedback-tooltip-font-size;
  47     line-height: $form-feedback-tooltip-line-height;
  48     color: color-yiq($color);
  49     background-color: rgba($color, $form-feedback-tooltip-opacity);
  50     @include border-radius($form-feedback-tooltip-border-radius);
  51   }
  52
  53   .form-control {
  54     .was-validated &:#{$state},
  55     &.is-#{$state} {
  56       border-color: $color;
  57
  58       @if $enable-validation-icons {
  59         padding-right: $input-height-inner;
  60         background-repeat: no-repeat;
  61         background-position: center right calc(#{$input-height-inner} / 4);
  62         background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
  63
  64         @if $state == "valid" {
  65           background-image: $form-feedback-icon-valid;
  66         } @else {
  67           background-image: $form-feedback-icon-invalid;
  68         }
  69       }
  70
  71       &:focus {
  72         border-color: $color;
  73         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  74       }
  75
  76       ~ .#{$state}-feedback,
  77       ~ .#{$state}-tooltip {
  78         display: block;
  79       }
  80     }
  81   }
  82
  83   // stylelint-disable-next-line selector-no-qualifying-type
  84   textarea.form-control {
  85     .was-validated &:#{$state},
  86     &.is-#{$state} {
  87       @if $enable-validation-icons {
  88         padding-right: $input-height-inner;
  89         background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
  90       }
  91     }
  92   }
  93
  94   .custom-select {
  95     .was-validated &:#{$state},
  96     &.is-#{$state} {
  97       border-color: $color;
  98
  99       @if $enable-validation-icons {
 100         $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
 101         padding-right: $custom-select-feedback-icon-padding-right;
 102         background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
 103       }
 104
 105       &:focus {
 106         border-color: $color;
 107         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 108       }
 109
 110       ~ .#{$state}-feedback,
 111       ~ .#{$state}-tooltip {
 112         display: block;
 113       }
 114     }
 115   }
 116
 117
 118   .form-control-file {
 119     .was-validated &:#{$state},
 120     &.is-#{$state} {
 121       ~ .#{$state}-feedback,
 122       ~ .#{$state}-tooltip {
 123         display: block;
 124       }
 125     }
 126   }
 127
 128   .form-check-input {
 129     .was-validated &:#{$state},
 130     &.is-#{$state} {
 131       ~ .form-check-label {
 132         color: $color;
 133       }
 134
 135       ~ .#{$state}-feedback,
 136       ~ .#{$state}-tooltip {
 137         display: block;
 138       }
 139     }
 140   }
 141
 142   .custom-control-input {
 143     .was-validated &:#{$state},
 144     &.is-#{$state} {
 145       ~ .custom-control-label {
 146         color: $color;
 147
 148         &::before {
 149           border-color: $color;
 150         }
 151       }
 152
 153       ~ .#{$state}-feedback,
 154       ~ .#{$state}-tooltip {
 155         display: block;
 156       }
 157
 158       &:checked {
 159         ~ .custom-control-label::before {
 160           border-color: lighten($color, 10%);
 161           @include gradient-bg(lighten($color, 10%));
 162         }
 163       }
 164
 165       &:focus {
 166         ~ .custom-control-label::before {
 167           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 168         }
 169
 170         &:not(:checked) ~ .custom-control-label::before {
 171           border-color: $color;
 172         }
 173       }
 174     }
 175   }
 176
 177   // custom file
 178   .custom-file-input {
 179     .was-validated &:#{$state},
 180     &.is-#{$state} {
 181       ~ .custom-file-label {
 182         border-color: $color;
 183       }
 184
 185       ~ .#{$state}-feedback,
 186       ~ .#{$state}-tooltip {
 187         display: block;
 188       }
 189
 190       &:focus {
 191         ~ .custom-file-label {
 192           border-color: $color;
 193           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 194         }
 195       }
 196     }
 197   }
 198 }