tools/side_chain_tool/web/node_modules/bootstrap/scss/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: $tooltip-padding-y $tooltip-padding-x;
  45     margin-top: .1rem;
  46     font-size: $tooltip-font-size;
  47     line-height: $line-height-base;
  48     color: color-yiq($color);
  49     background-color: rgba($color, $tooltip-opacity);
  50     @include border-radius($tooltip-border-radius);
  51   }
  52
  53   .form-control,
  54   .custom-select {
  55     .was-validated &:#{$state},
  56     &.is-#{$state} {
  57       border-color: $color;
  58
  59       &:focus {
  60         border-color: $color;
  61         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  62       }
  63
  64       ~ .#{$state}-feedback,
  65       ~ .#{$state}-tooltip {
  66         display: block;
  67       }
  68     }
  69   }
  70
  71   .form-control-file {
  72     .was-validated &:#{$state},
  73     &.is-#{$state} {
  74       ~ .#{$state}-feedback,
  75       ~ .#{$state}-tooltip {
  76         display: block;
  77       }
  78     }
  79   }
  80
  81   .form-check-input {
  82     .was-validated &:#{$state},
  83     &.is-#{$state} {
  84       ~ .form-check-label {
  85         color: $color;
  86       }
  87
  88       ~ .#{$state}-feedback,
  89       ~ .#{$state}-tooltip {
  90         display: block;
  91       }
  92     }
  93   }
  94
  95   .custom-control-input {
  96     .was-validated &:#{$state},
  97     &.is-#{$state} {
  98       ~ .custom-control-label {
  99         color: $color;
 100
 101         &::before {
 102           background-color: lighten($color, 25%);
 103         }
 104       }
 105
 106       ~ .#{$state}-feedback,
 107       ~ .#{$state}-tooltip {
 108         display: block;
 109       }
 110
 111       &:checked {
 112         ~ .custom-control-label::before {
 113           @include gradient-bg(lighten($color, 10%));
 114         }
 115       }
 116
 117       &:focus {
 118         ~ .custom-control-label::before {
 119           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
 120         }
 121       }
 122     }
 123   }
 124
 125   // custom file
 126   .custom-file-input {
 127     .was-validated &:#{$state},
 128     &.is-#{$state} {
 129       ~ .custom-file-label {
 130         border-color: $color;
 131
 132         &::after { border-color: inherit; }
 133       }
 134
 135       ~ .#{$state}-feedback,
 136       ~ .#{$state}-tooltip {
 137         display: block;
 138       }
 139
 140       &:focus {
 141         ~ .custom-file-label {
 142           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 143         }
 144       }
 145     }
 146   }
 147 }