[Summary view] [Print] [Text view]

   1  // stylelint-disable selector-no-qualifying-type
   2  
   3  //
   4  // Textual form controls
   5  //
   6  
   7  .form-control {
   8    display: block;
   9    width: 100%;
  10    height: $input-height;
  11    padding: $input-padding-y $input-padding-x;
  12    font-family: $input-font-family;
  13    @include font-size($input-font-size);
  14    font-weight: $input-font-weight;
  15    line-height: $input-line-height;
  16    color: $input-color;
  17    background-color: $input-bg;
  18    background-clip: padding-box;
  19    border: $input-border-width solid $input-border-color;
  20  
  21    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  22    @include border-radius($input-border-radius, 0);
  23  
  24    @include box-shadow($input-box-shadow);
  25    @include transition($input-transition);
  26  
  27    // Unstyle the caret on `<select>`s in IE10+.
  28    &::-ms-expand {
  29      background-color: transparent;
  30      border: 0;
  31    }
  32  
  33    // Remove select outline from select box in FF
  34    &:-moz-focusring {
  35      color: transparent;
  36      text-shadow: 0 0 0 $input-color;
  37    }
  38  
  39    // Customize the `:focus` state to imitate native WebKit styles.
  40    @include form-control-focus($ignore-warning: true);
  41  
  42    // Placeholder
  43    &::placeholder {
  44      color: $input-placeholder-color;
  45      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  46      opacity: 1;
  47    }
  48  
  49    // Disabled and read-only inputs
  50    //
  51    // HTML5 says that controls under a fieldset > legend:first-child won't be
  52    // disabled if the fieldset is disabled. Due to implementation difficulty, we
  53    // don't honor that edge case; we style them as disabled anyway.
  54    &:disabled,
  55    &[readonly] {
  56      background-color: $input-disabled-bg;
  57      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  58      opacity: 1;
  59    }
  60  }
  61  
  62  input[type="date"],
  63  input[type="time"],
  64  input[type="datetime-local"],
  65  input[type="month"] {
  66    &.form-control {
  67      appearance: none; // Fix appearance for date inputs in Safari
  68    }
  69  }
  70  
  71  select.form-control {
  72    &:focus::-ms-value {
  73      // Suppress the nested default white text on blue background highlight given to
  74      // the selected option text when the (still closed) <select> receives focus
  75      // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
  76      // match the appearance of the native widget.
  77      // See https://github.com/twbs/bootstrap/issues/19398.
  78      color: $input-color;
  79      background-color: $input-bg;
  80    }
  81  }
  82  
  83  // Make file inputs better match text inputs by forcing them to new lines.
  84  .form-control-file,
  85  .form-control-range {
  86    display: block;
  87    width: 100%;
  88  }
  89  
  90  
  91  //
  92  // Labels
  93  //
  94  
  95  // For use with horizontal and inline forms, when you need the label (or legend)
  96  // text to align with the form controls.
  97  .col-form-label {
  98    padding-top: add($input-padding-y, $input-border-width);
  99    padding-bottom: add($input-padding-y, $input-border-width);
 100    margin-bottom: 0; // Override the `<label>/<legend>` default
 101    @include font-size(inherit); // Override the `<legend>` default
 102    line-height: $input-line-height;
 103  }
 104  
 105  .col-form-label-lg {
 106    padding-top: add($input-padding-y-lg, $input-border-width);
 107    padding-bottom: add($input-padding-y-lg, $input-border-width);
 108    @include font-size($input-font-size-lg);
 109    line-height: $input-line-height-lg;
 110  }
 111  
 112  .col-form-label-sm {
 113    padding-top: add($input-padding-y-sm, $input-border-width);
 114    padding-bottom: add($input-padding-y-sm, $input-border-width);
 115    @include font-size($input-font-size-sm);
 116    line-height: $input-line-height-sm;
 117  }
 118  
 119  
 120  // Readonly controls as plain text
 121  //
 122  // Apply class to a readonly input to make it appear like regular plain
 123  // text (without any border, background color, focus indicator)
 124  
 125  .form-control-plaintext {
 126    display: block;
 127    width: 100%;
 128    padding: $input-padding-y 0;
 129    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
 130    @include font-size($input-font-size);
 131    line-height: $input-line-height;
 132    color: $input-plaintext-color;
 133    background-color: transparent;
 134    border: solid transparent;
 135    border-width: $input-border-width 0;
 136  
 137    &.form-control-sm,
 138    &.form-control-lg {
 139      padding-right: 0;
 140      padding-left: 0;
 141    }
 142  }
 143  
 144  
 145  // Form control sizing
 146  //
 147  // Build on `.form-control` with modifier classes to decrease or increase the
 148  // height and font-size of form controls.
 149  //
 150  // Repeated in `_input_group.scss` to avoid Sass extend issues.
 151  
 152  .form-control-sm {
 153    height: $input-height-sm;
 154    padding: $input-padding-y-sm $input-padding-x-sm;
 155    @include font-size($input-font-size-sm);
 156    line-height: $input-line-height-sm;
 157    @include border-radius($input-border-radius-sm);
 158  }
 159  
 160  .form-control-lg {
 161    height: $input-height-lg;
 162    padding: $input-padding-y-lg $input-padding-x-lg;
 163    @include font-size($input-font-size-lg);
 164    line-height: $input-line-height-lg;
 165    @include border-radius($input-border-radius-lg);
 166  }
 167  
 168  // stylelint-disable-next-line no-duplicate-selectors
 169  select.form-control {
 170    &[size],
 171    &[multiple] {
 172      height: auto;
 173    }
 174  }
 175  
 176  textarea.form-control {
 177    height: auto;
 178  }
 179  
 180  // Form groups
 181  //
 182  // Designed to help with the organization and spacing of vertical forms. For
 183  // horizontal forms, use the predefined grid classes.
 184  
 185  .form-group {
 186    margin-bottom: $form-group-margin-bottom;
 187  }
 188  
 189  .form-text {
 190    display: block;
 191    margin-top: $form-text-margin-top;
 192  }
 193  
 194  
 195  // Form grid
 196  //
 197  // Special replacement for our grid system's `.row` for tighter form layouts.
 198  
 199  .form-row {
 200    display: flex;
 201    flex-wrap: wrap;
 202    margin-right: -$form-grid-gutter-width / 2;
 203    margin-left: -$form-grid-gutter-width / 2;
 204  
 205    > .col,
 206    > [class*="col-"] {
 207      padding-right: $form-grid-gutter-width / 2;
 208      padding-left: $form-grid-gutter-width / 2;
 209    }
 210  }
 211  
 212  
 213  // Checkboxes and radios
 214  //
 215  // Indent the labels to position radios/checkboxes as hanging controls.
 216  
 217  .form-check {
 218    position: relative;
 219    display: block;
 220    padding-left: $form-check-input-gutter;
 221  }
 222  
 223  .form-check-input {
 224    position: absolute;
 225    margin-top: $form-check-input-margin-y;
 226    margin-left: -$form-check-input-gutter;
 227  
 228    // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
 229    &[disabled] ~ .form-check-label,
 230    &:disabled ~ .form-check-label {
 231      color: $text-muted;
 232    }
 233  }
 234  
 235  .form-check-label {
 236    margin-bottom: 0; // Override default `<label>` bottom margin
 237  }
 238  
 239  .form-check-inline {
 240    display: inline-flex;
 241    align-items: center;
 242    padding-left: 0; // Override base .form-check
 243    margin-right: $form-check-inline-margin-x;
 244  
 245    // Undo .form-check-input defaults and add some `margin-right`.
 246    .form-check-input {
 247      position: static;
 248      margin-top: 0;
 249      margin-right: $form-check-inline-input-margin-x;
 250      margin-left: 0;
 251    }
 252  }
 253  
 254  
 255  // Form validation
 256  //
 257  // Provide feedback to users when form field values are valid or invalid. Works
 258  // primarily for client-side validation via scoped `:invalid` and `:valid`
 259  // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 260  // server side validation.
 261  
 262  @each $state, $data in $form-validation-states {
 263    @include form-validation-state($state, map-get($data, color), map-get($data, icon));
 264  }
 265  
 266  // Inline forms
 267  //
 268  // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 269  // forms begin stacked on extra small (mobile) devices and then go inline when
 270  // viewports reach <768px.
 271  //
 272  // Requires wrapping inputs and labels with `.form-group` for proper display of
 273  // default HTML form controls and our custom form controls (e.g., input groups).
 274  
 275  .form-inline {
 276    display: flex;
 277    flex-flow: row wrap;
 278    align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
 279  
 280    // Because we use flex, the initial sizing of checkboxes is collapsed and
 281    // doesn't occupy the full-width (which is what we want for xs grid tier),
 282    // so we force that here.
 283    .form-check {
 284      width: 100%;
 285    }
 286  
 287    // Kick in the inline
 288    @include media-breakpoint-up(sm) {
 289      label {
 290        display: flex;
 291        align-items: center;
 292        justify-content: center;
 293        margin-bottom: 0;
 294      }
 295  
 296      // Inline-block all the things for "inline"
 297      .form-group {
 298        display: flex;
 299        flex: 0 0 auto;
 300        flex-flow: row wrap;
 301        align-items: center;
 302        margin-bottom: 0;
 303      }
 304  
 305      // Allow folks to *not* use `.form-group`
 306      .form-control {
 307        display: inline-block;
 308        width: auto; // Prevent labels from stacking above inputs in `.form-group`
 309        vertical-align: middle;
 310      }
 311  
 312      // Make static controls behave like regular ones
 313      .form-control-plaintext {
 314        display: inline-block;
 315      }
 316  
 317      .input-group,
 318      .custom-select {
 319        width: auto;
 320      }
 321  
 322      // Remove default margin on radios/checkboxes that were used for stacking, and
 323      // then undo the floating of radios and checkboxes to match.
 324      .form-check {
 325        display: flex;
 326        align-items: center;
 327        justify-content: center;
 328        width: auto;
 329        padding-left: 0;
 330      }
 331      .form-check-input {
 332        position: relative;
 333        flex-shrink: 0;
 334        margin-top: 0;
 335        margin-right: $form-check-input-margin-x;
 336        margin-left: 0;
 337      }
 338  
 339      .custom-control {
 340        align-items: center;
 341        justify-content: center;
 342      }
 343      .custom-control-label {
 344        margin-bottom: 0;
 345      }
 346    }
 347  }