[Summary view] [Print] [Text view]

   1  //
   2  // General form controls (plus a few specific high-level interventions)
   3  //
   4  
   5  .form-control {
   6    display: block;
   7    width: 100%;
   8    padding: $input-padding-y $input-padding-x;
   9    font-family: $input-font-family;
  10    @include font-size($input-font-size);
  11    font-weight: $input-font-weight;
  12    line-height: $input-line-height;
  13    color: $input-color;
  14    background-color: $input-bg;
  15    background-clip: padding-box;
  16    border: $input-border-width solid $input-border-color;
  17    appearance: none; // Fix appearance for date inputs in Safari
  18  
  19    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  20    @include border-radius($input-border-radius, 0);
  21  
  22    @include box-shadow($input-box-shadow);
  23    @include transition($input-transition);
  24  
  25    &[type="file"] {
  26      overflow: hidden; // prevent pseudo element button overlap
  27  
  28      &:not(:disabled):not([readonly]) {
  29        cursor: pointer;
  30      }
  31    }
  32  
  33    // Customize the `:focus` state to imitate native WebKit styles.
  34    &:focus {
  35      color: $input-focus-color;
  36      background-color: $input-focus-bg;
  37      border-color: $input-focus-border-color;
  38      outline: 0;
  39      @if $enable-shadows {
  40        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
  41      } @else {
  42        // Avoid using mixin so we can pass custom focus shadow properly
  43        box-shadow: $input-focus-box-shadow;
  44      }
  45    }
  46  
  47    // Add some height to date inputs on iOS
  48    // https://github.com/twbs/bootstrap/issues/23307
  49    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
  50    &::-webkit-date-and-time-value {
  51      // Multiply line-height by 1em if it has no unit
  52      height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
  53    }
  54  
  55    // Placeholder
  56    &::placeholder {
  57      color: $input-placeholder-color;
  58      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  59      opacity: 1;
  60    }
  61  
  62    // Disabled and read-only inputs
  63    //
  64    // HTML5 says that controls under a fieldset > legend:first-child won't be
  65    // disabled if the fieldset is disabled. Due to implementation difficulty, we
  66    // don't honor that edge case; we style them as disabled anyway.
  67    &:disabled,
  68    &[readonly] {
  69      background-color: $input-disabled-bg;
  70      border-color: $input-disabled-border-color;
  71      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  72      opacity: 1;
  73    }
  74  
  75    // File input buttons theming
  76    &::file-selector-button {
  77      padding: $input-padding-y $input-padding-x;
  78      margin: (-$input-padding-y) (-$input-padding-x);
  79      margin-inline-end: $input-padding-x;
  80      color: $form-file-button-color;
  81      @include gradient-bg($form-file-button-bg);
  82      pointer-events: none;
  83      border-color: inherit;
  84      border-style: solid;
  85      border-width: 0;
  86      border-inline-end-width: $input-border-width;
  87      border-radius: 0; // stylelint-disable-line property-disallowed-list
  88      @include transition($btn-transition);
  89    }
  90  
  91    &:hover:not(:disabled):not([readonly])::file-selector-button {
  92      background-color: $form-file-button-hover-bg;
  93    }
  94  
  95    &::-webkit-file-upload-button {
  96      padding: $input-padding-y $input-padding-x;
  97      margin: (-$input-padding-y) (-$input-padding-x);
  98      margin-inline-end: $input-padding-x;
  99      color: $form-file-button-color;
 100      @include gradient-bg($form-file-button-bg);
 101      pointer-events: none;
 102      border-color: inherit;
 103      border-style: solid;
 104      border-width: 0;
 105      border-inline-end-width: $input-border-width;
 106      border-radius: 0; // stylelint-disable-line property-disallowed-list
 107      @include transition($btn-transition);
 108    }
 109  
 110    &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
 111      background-color: $form-file-button-hover-bg;
 112    }
 113  }
 114  
 115  // Readonly controls as plain text
 116  //
 117  // Apply class to a readonly input to make it appear like regular plain
 118  // text (without any border, background color, focus indicator)
 119  
 120  .form-control-plaintext {
 121    display: block;
 122    width: 100%;
 123    padding: $input-padding-y 0;
 124    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
 125    line-height: $input-line-height;
 126    color: $input-plaintext-color;
 127    background-color: transparent;
 128    border: solid transparent;
 129    border-width: $input-border-width 0;
 130  
 131    &.form-control-sm,
 132    &.form-control-lg {
 133      padding-right: 0;
 134      padding-left: 0;
 135    }
 136  }
 137  
 138  // Form control sizing
 139  //
 140  // Build on `.form-control` with modifier classes to decrease or increase the
 141  // height and font-size of form controls.
 142  //
 143  // Repeated in `_input_group.scss` to avoid Sass extend issues.
 144  
 145  .form-control-sm {
 146    min-height: $input-height-sm;
 147    padding: $input-padding-y-sm $input-padding-x-sm;
 148    @include font-size($input-font-size-sm);
 149    @include border-radius($input-border-radius-sm);
 150  
 151    &::file-selector-button {
 152      padding: $input-padding-y-sm $input-padding-x-sm;
 153      margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
 154      margin-inline-end: $input-padding-x-sm;
 155    }
 156  
 157    &::-webkit-file-upload-button {
 158      padding: $input-padding-y-sm $input-padding-x-sm;
 159      margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
 160      margin-inline-end: $input-padding-x-sm;
 161    }
 162  }
 163  
 164  .form-control-lg {
 165    min-height: $input-height-lg;
 166    padding: $input-padding-y-lg $input-padding-x-lg;
 167    @include font-size($input-font-size-lg);
 168    @include border-radius($input-border-radius-lg);
 169  
 170    &::file-selector-button {
 171      padding: $input-padding-y-lg $input-padding-x-lg;
 172      margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
 173      margin-inline-end: $input-padding-x-lg;
 174    }
 175  
 176    &::-webkit-file-upload-button {
 177      padding: $input-padding-y-lg $input-padding-x-lg;
 178      margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
 179      margin-inline-end: $input-padding-x-lg;
 180    }
 181  }
 182  
 183  // Make sure textareas don't shrink too much when resized
 184  // https://github.com/twbs/bootstrap/pull/29124
 185  // stylelint-disable selector-no-qualifying-type
 186  textarea {
 187    &.form-control {
 188      min-height: $input-height;
 189    }
 190  
 191    &.form-control-sm {
 192      min-height: $input-height-sm;
 193    }
 194  
 195    &.form-control-lg {
 196      min-height: $input-height-lg;
 197    }
 198  }
 199  // stylelint-enable selector-no-qualifying-type
 200  
 201  .form-control-color {
 202    width: $form-color-width;
 203    height: auto; // Override fixed browser height
 204    padding: $input-padding-y;
 205  
 206    &:not(:disabled):not([readonly]) {
 207      cursor: pointer;
 208    }
 209  
 210    &::-moz-color-swatch {
 211      height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
 212      @include border-radius($input-border-radius);
 213    }
 214  
 215    &::-webkit-color-swatch {
 216      height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
 217      @include border-radius($input-border-radius);
 218    }
 219  }