/looplab/scss/bootstrap/_forms.scss

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