portal-FE-common/src/styles/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
  31   .#{$state}-feedback {
  32     display: none;
  33     width: 100%;
  34     margin-top: $form-feedback-margin-top;
  35     font-size: $form-feedback-font-size;
  36     color: $color;
  37   }
  38
  39   .#{$state}-tooltip {
  40     position: absolute;
  41     top: 100%;
  42     z-index: 5;
  43     display: none;
  44     width: 250px;
  45     padding: .5rem;
  46     margin-top: .1rem;
  47     font-size: .875rem;
  48     line-height: 1;
  49     color: #fff;
  50     background-color: rgba($color, .8);
  51     border-radius: .2rem;
  52   }
  53
  54   .form-control,
  55   .custom-select {
  56     .was-validated &:#{$state},
  57     &.is-#{$state} {
  58       border-color: $color;
  59
  60       &:focus {
  61         border-color: $color;
  62         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  63       }
  64
  65       ~ .#{$state}-feedback,
  66       ~ .#{$state}-tooltip {
  67         display: block;
  68       }
  69     }
  70   }
  71
  72   .form-check-input {
  73     .was-validated &:#{$state},
  74     &.is-#{$state} {
  75       ~ .form-check-label {
  76         color: $color;
  77       }
  78     }
  79   }
  80
  81   .custom-control-input {
  82     .was-validated &:#{$state},
  83     &.is-#{$state} {
  84       ~ .custom-control-label {
  85         color: $color;
  86
  87         &::before {
  88           background-color: lighten($color, 25%);
  89         }
  90       }
  91
  92       ~ .#{$state}-feedback,
  93       ~ .#{$state}-tooltip {
  94         display: block;
  95       }
  96
  97       &:checked {
  98         ~ .custom-control-label::before {
  99           @include gradient-bg(lighten($color, 10%));
 100         }
 101       }
 102
 103       &:focus {
 104         ~ .custom-control-label::before {
 105           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
 106         }
 107       }
 108     }
 109   }
 110
 111   // custom file
 112   .custom-file-input {
 113     .was-validated &:#{$state},
 114     &.is-#{$state} {
 115       ~ .custom-file-label {
 116         border-color: $color;
 117
 118         &::before { border-color: inherit; }
 119       }
 120
 121       ~ .#{$state}-feedback,
 122       ~ .#{$state}-tooltip {
 123         display: block;
 124       }
 125
 126       &:focus {
 127         ~ .custom-file-label {
 128           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 129         }
 130       }
 131     }
 132   }
 133 }